From 4ad2d1657d243a1a8eb4e48d15cafceeca0e7488 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 26 Oct 2023 18:37:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         | 12 +++-
 ui/src/components/card-box/index.vue          | 12 +---
 .../components/top-bar/top-menu/index.vue     |  3 +-
 ui/src/styles/app.scss                        | 32 +++++++++-
 ui/src/styles/element-plus.scss               | 58 ++++++++++++++++++
 ui/src/utils/message.ts                       | 25 ++++++--
 ui/src/views/dataset/index.vue                | 34 +++++++++--
 ui/src/views/login/forgot-password/index.vue  |  2 +-
 ui/src/views/login/register/index.vue         |  2 +-
 ui/src/views/login/reset-password/index.vue   |  2 +-
 ui/src/views/setting/index.vue                | 60 +++++++++++--------
 11 files changed, 190 insertions(+), 52 deletions(-)

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index aaba9eb48..ef5f09fb1 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -24,7 +24,17 @@ const getAllDateset: (param?: String) => Promise<Result<any[]>> = (param) => {
   return get(`${prefix}`, param && { search_text: param })
 }
 
+/**
+ * 删除数据集
+ * @param 参数 dataset_id
+ */
+const delDateset: (dataset_id: String) => Promise<Result<boolean>> = (dataset_id) => {
+  return del(`${prefix}/${dataset_id}`)
+}
+
+
 export default {
   getDateset,
-  getAllDateset
+  getAllDateset,
+  delDateset
 }
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index e5fc5fb1f..902ad7b03 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -2,11 +2,11 @@
   <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
     <div class="card-header">
       <slot name="header">
-        <div class="title flex">
+        <div class="title flex align-center">
           <AppAvatar class="mr-10">
             <el-icon><Document /></el-icon>
           </AppAvatar>
-          <h3>{{ title }}</h3>
+          <h4>{{ title }}</h4>
         </div>
       </slot>
     </div>
@@ -50,14 +50,6 @@ function cardLeave() {
   position: relative;
   min-height: 150px;
 
-  .card-header {
-    .title {
-      align-items: center;
-      h3 {
-        font-size: 15px;
-      }
-    }
-  }
   .description {
     display: -webkit-box;
     -webkit-box-orient: vertical;
diff --git a/ui/src/layout/components/top-bar/top-menu/index.vue b/ui/src/layout/components/top-bar/top-menu/index.vue
index 70ce72471..7b7e742d4 100644
--- a/ui/src/layout/components/top-bar/top-menu/index.vue
+++ b/ui/src/layout/components/top-bar/top-menu/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="top-menu-container flex h-full">
+  <div class="top-menu-container flex align-center h-full">
     <MenuItem
       :menu="menu"
       v-hasPermission="menu.meta?.permission"
@@ -20,7 +20,6 @@ const topMenuList = computed(() => {
 </script>
 <style lang="scss" scope>
 .top-menu-container {
-  align-items: center;
   margin-bottom: -1px;
 }
 </style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 9e8793f50..5437b05b9 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -12,7 +12,7 @@ body {
   font-size: 14px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei',
     '微软雅黑', Arial, sans-serif;
   height: 100%;
   margin: 0;
@@ -67,6 +67,22 @@ ul {
   background-color: transparent;
 }
 
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -74,6 +90,9 @@ ul {
   height: 100%;
 }
 
+.mt-8 {
+  margin-top: 8px;
+}
 .mt-10 {
   margin-top: 10px;
 }
@@ -81,6 +100,9 @@ ul {
 .ml-10 {
   margin-left: 10px;
 }
+.ml-16 {
+  margin-left: 16px;
+}
 .mr-10 {
   margin-right: 10px;
 }
@@ -112,9 +134,13 @@ ul {
 }
 
 .align-center {
+  align-items: center;
+}
+
+.text-center {
   text-align: center;
 }
-.align-right {
+.text-right {
   text-align: right;
 }
 
@@ -132,7 +158,7 @@ ul {
   border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
-.cursor{
+.cursor {
   cursor: pointer;
 }
 
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 0f580d807..c98ca44b5 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -1,5 +1,6 @@
 :root {
   --el-menu-item-height: 45px;
+  --el-text-color-primary: '#1F2329';
 }
 .el-avatar {
   --el-avatar-bg-color: var(--el-color-primary);
@@ -24,6 +25,63 @@
   }
 }
 
+.el-message-box {
+  padding-bottom: 24px;
+  .app-confirm {
+    .app-confirm-title {
+      color: var(--el-text-color-primary);
+    }
+    .icon {
+      font-size: 24px;
+      color: var(--el-color-warning);
+    }
+    .app-confirm-decription {
+      margin-left: 40px;
+    }
+  }
+}
+
+
+.el-message-box__content {
+  padding: 24px;
+  color: var(--el-text-color-primary);
+}
+.el-message-box__btns {
+  padding: 5px 24px 0;
+  button {
+    min-width: 80px;
+    &:nth-child(2) {
+      margin-left: 12px;
+    }
+  }
+  button.danger {
+    background: var(--el-color-danger);
+    border: var(--el-color-danger);
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .el-col-lg-5 {
+    display: block;
+    max-width: 25%;
+    flex: 0 0 25%;
+  }
+}
+@media only screen and (min-width: 1400px) {
+  .el-col-lg-5 {
+    display: block;
+    max-width: 20.8333333333%;
+    flex: 0 0 20.8333333333%;
+  }
+}
+@media only screen and (min-width: 1920px) {
+  .el-col-xl-4 {
+    display: block;
+    max-width: 16.6666666667%;
+    flex: 0 0 16.6666666667%;
+  }
+}
+
 // 抽屉样式整体修改
 .el-drawer {
   .el-drawer__header {
diff --git a/ui/src/utils/message.ts b/ui/src/utils/message.ts
index 69c83b52f..0e07b8aef 100644
--- a/ui/src/utils/message.ts
+++ b/ui/src/utils/message.ts
@@ -1,4 +1,6 @@
-import { ElMessageBox, ElMessage } from 'element-plus'
+import { h } from 'vue'
+import { ElMessageBox, ElMessage, ElIcon } from 'element-plus'
+import { WarningFilled } from '@element-plus/icons-vue'
 
 export const MsgSuccess = (message: string) => {
   ElMessage.success({
@@ -36,10 +38,25 @@ export const MsgError = (message: string) => {
   })
 }
 
-export const MsgConfirm = (message: string, options = {}) => {
+/**
+ * 删除数据集
+ * @param 参数 message: {title, decription,type}
+ */
+
+export const MsgConfirm = ({ title, decription }: any, options?: any) => {
+  const message: any = h('div', { class: 'app-confirm' }, [
+    h('h4', { class: 'app-confirm-title flex align-center' }, [
+      h(ElIcon, { class: 'icon' }, [h(WarningFilled)]),
+      h('span', { class: 'ml-16' }, title)
+    ]),
+    h('div', { class: 'app-confirm-decription mt-8' }, decription)
+  ])
+
   const defaultOptions: Object = {
-    type: 'warning',
+    showCancelButton: true,
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
     ...options
   }
-  return ElMessageBox.confirm(message, '确认', defaultOptions)
+  return ElMessageBox({ message, ...defaultOptions })
 }
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 969477762..487fc27db 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutContent header="数据集">
     <div class="dataset-list-container p-15">
-      <div class="align-right">
+      <div class="text-right">
         <el-input
           v-model="filterText"
           placeholder="搜索内容"
@@ -15,14 +15,14 @@
           v-infinite-scroll="loadDataset"
           :infinite-scroll-disabled="disabledScroll"
         >
-          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4" class="mt-10">
+          <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-10">
             <CardAdd title="创建数据集" />
           </el-col>
           <el-col
             :xs="24"
             :sm="12"
             :md="6"
-            :lg="6"
+            :lg="5"
             :xl="4"
             v-for="(item, index) in datasetList"
             :key="index"
@@ -31,7 +31,7 @@
             <CardBox :title="item.name" :description="item.desc" class="cursor">
               <template #mouseEnter>
                 <div class="delete-button">
-                  <el-button type="primary" link>
+                  <el-button type="primary" link @click.stop="deleteDateset(item)">
                     <el-icon><Delete /></el-icon>
                   </el-button>
                 </div>
@@ -54,6 +54,7 @@
 import { ref, onMounted } from 'vue'
 import datasetApi from '@/api/dataset'
 import type { datasetListRequest } from '@/api/type/dataset'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 
 const loading = ref(false)
 const filterText = ref('')
@@ -65,7 +66,30 @@ const pageConfig = ref<datasetListRequest>({
   search_text: ''
 })
 
-function loadDataset() {}
+function loadDataset() { }
+
+
+function deleteDateset(row: any) {
+  MsgConfirm({
+    title: `是否删除数据集：${row.name}？`,
+    decription: '此数据集关联2个应用，删除后无法恢复，请谨慎操作。',
+    confirmButtonText: '删除',
+  }, {
+    confirmButtonClass: 'danger',
+  })
+    .then(() => {
+      loading.value = true
+      datasetApi.delDateset(row.id)
+        .then(() => {
+          MsgSuccess('删除成功')
+          getList()
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    })
+    .catch(() => {})
+}
 
 function getList() {
   loading.value = true
diff --git a/ui/src/views/login/forgot-password/index.vue b/ui/src/views/login/forgot-password/index.vue
index 58f9b4bf4..95de7b283 100644
--- a/ui/src/views/login/forgot-password/index.vue
+++ b/ui/src/views/login/forgot-password/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h3 class="mb-20">忘记密码</h3>
+      <h4 class="mb-20">忘记密码</h4>
       <el-form
         class="register-form"
         ref="resetPasswordFormRef"
diff --git a/ui/src/views/login/register/index.vue b/ui/src/views/login/register/index.vue
index e3ffe0046..dc9ee54e1 100644
--- a/ui/src/views/login/register/index.vue
+++ b/ui/src/views/login/register/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h3 class="mb-20">注册</h3>
+      <h4 class="mb-20">注册</h4>
       <el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef">
         <el-form-item prop="username">
           <el-input
diff --git a/ui/src/views/login/reset-password/index.vue b/ui/src/views/login/reset-password/index.vue
index f1b91f4bd..c5f82785e 100644
--- a/ui/src/views/login/reset-password/index.vue
+++ b/ui/src/views/login/reset-password/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h3 class="mb-20">修改密码</h3>
+      <h4 class="mb-20">修改密码</h4>
       <el-form
         class="reset-password-form"
         ref="resetPasswordFormRef"
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index 4cb7599c6..b7998263f 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -2,8 +2,8 @@
   <LayoutContent header="团队管理">
     <div class="team-manage flex main-calc-height">
       <div class="team-member p-15 border-r">
-        <h3>团队成员</h3>
-        <div class="align-right">
+        <h4>团队成员</h4>
+        <div class="text-right">
           <el-button type="primary" link @click="addMember">
             <AppIcon iconName="app-add-users" class="add-user-icon" />添加成员
           </el-button>
@@ -25,18 +25,20 @@
                     <el-tag effect="dark" v-if="isManage(item.type)">所有者</el-tag>
                     <el-tag effect="dark" type="warning" v-else>用户</el-tag>
                   </div>
-                  <el-dropdown trigger="click" v-if="!isManage(item.type)">
-                    <span class="cursor">
-                      <el-icon><MoreFilled /></el-icon>
-                    </span>
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item @click.prevent="deleteMember(item.id)"
-                          >移除</el-dropdown-item
-                        >
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
+                  <span @click.stop>
+                    <el-dropdown trigger="click" v-if="!isManage(item.type)">
+                      <span class="cursor">
+                        <el-icon><MoreFilled /></el-icon>
+                      </span>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item @click.prevent="deleteMember(item)"
+                            >移除</el-dropdown-item
+                          >
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </span>
                 </li>
               </template>
             </ul>
@@ -46,7 +48,7 @@
       </div>
       <div class="permission-setting flex" v-loading="rLoading">
         <div class="team-manage__table p-15">
-          <h3>权限设置</h3>
+          <h4>权限设置</h4>
           <el-tabs v-model="activeName" class="demo-tabs">
             <el-tab-pane
               v-for="item in settingTags"
@@ -74,7 +76,7 @@ import TeamApi from '@/api/team'
 import type { TeamMember } from '@/api/type/team'
 import CreateMemberDialog from './component/CreateMemberDialog.vue'
 import PermissionSetting from './component/PermissionSetting.vue'
-import { MsgSuccess } from '@/utils/message'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 
 const DATASET = 'DATASET'
 
@@ -151,16 +153,26 @@ function MemberPermissions(id: String) {
     })
 }
 
-function deleteMember(id: String) {
-  loading.value = true
-  TeamApi.delTeamMember(id)
+function deleteMember(row: TeamMember) {
+  MsgConfirm({
+    title: `是否移除成员：${row.username}`,
+    decription: '移除后将会取消成员拥有的数据集和应用权限。',
+    confirmButtonText: '移除',
+  }, {
+    confirmButtonClass: 'danger',
+  })
     .then(() => {
-      MsgSuccess('删除成功')
-      getMember()
-    })
-    .catch(() => {
-      loading.value = false
+      loading.value = true
+      TeamApi.delTeamMember(row.id)
+        .then(() => {
+          MsgSuccess('删除成功')
+          getMember()
+        })
+        .catch(() => {
+          loading.value = false
+        })
     })
+    .catch(() => {})
 }
 
 function isManage(type: String) {