From 64284b18db627033a70247ef8d060e761ec53026 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 25 Oct 2023 18:35:28 +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

---
 .DS_Store                                     | Bin 0 -> 6148 bytes
 ui/src/api/dataset.ts                         |  30 ++++++
 ui/src/api/team.ts                            |   6 +-
 ui/src/api/type/dataset.ts                    |   7 ++
 ui/src/api/type/team.ts                       |   6 +-
 ui/src/components/app-avatar/index.vue        |  20 ++++
 ui/src/components/card-add/index.vue          |  38 ++++++++
 ui/src/components/card-box/index.vue          |  74 ++++++++++++++
 .../content-container/LayoutContent.vue       |   4 +-
 ui/src/components/index.ts                    |   8 ++
 .../components/top-bar/avatar/index.vue       |  14 ++-
 ui/src/layout/main-layout/index.vue           |   1 -
 ui/src/router/routes.ts                       |  12 +--
 ui/src/styles/app.scss                        |   9 ++
 ui/src/views/dataset/index.vue                |  92 +++++++++++++++++-
 .../setting/component/CreateMemberDialog.vue  |  10 +-
 .../setting/component/PermissionSetting.vue   |   2 +-
 17 files changed, 298 insertions(+), 35 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 ui/src/api/dataset.ts
 create mode 100644 ui/src/api/type/dataset.ts
 create mode 100644 ui/src/components/app-avatar/index.vue
 create mode 100644 ui/src/components/card-add/index.vue
 create mode 100644 ui/src/components/card-box/index.vue

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..90847363517040cd0e5644a2215e5f53658de7fd
GIT binary patch
literal 6148
zcmeHK%}T>S5Z<-5O({YS3OxqA7EEgu#7l_v1&ruHr6we3FwK@GHHT8jSzpK}@p+ut
z-5i1eZz6UEcE8#A+0A^A{b7u8cNLBpGZ|wBG(?U{gP^(5wWEU(xtt?mSx{t)AQ3^s
zM1RqQ-`-(!CRoTKR{#EwV3EXGZrh)Hr`6u=bd9djHy*raQFytZuQJzP-r?w4h$N_V
zKe&mbVrK4Nh&1=(G+N4pIE*0V{x(iSQMh82hMCOul*8y5y_q>!uTN}yXpP2`&Cpt(
zjX|FrpKdli<KXb<{A%`+%v15Eh~&Vzls%0Vyn|A!>D61NiAbNoUgcD=gv0<bKnxHA
z+sA-D3yl8ul};5C1H`}&4B-A?K|^#jmI~$80UchS(ceZy0Uh5Gh?Yi2W2q24AY7#a
zs#LC@7+j@;-O_Q6#!{h5XI!of^XQeU#|xLMgWZzhj5`XcCkBXtIs+{=H1YhugkPrd
zkzY@t5ivjv{4)l4d+JSHC`zBL-^#<Y)`Ip34F%&$R6szlT>@Z$`^Z2#mES@g;v9{o
VLYxKdG98dE0+JBwh=E^V;0pzFOeFvS

literal 0
HcmV?d00001

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
new file mode 100644
index 000000000..aaba9eb48
--- /dev/null
+++ b/ui/src/api/dataset.ts
@@ -0,0 +1,30 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { datasetListRequest } from '@/api/type/dataset'
+
+const prefix = '/dataset'
+
+/**
+ * 获取分页数据集
+ * @param 参数  {
+              "current_page": "string",
+              "page_size": "string",
+              "search_text": "string",
+            }
+ */
+const getDateset: (param: datasetListRequest) => Promise<Result<any[]>> = (param) => {
+  return get(`${prefix}`, param)
+}
+
+/**
+ * 获取全部数据集
+ * @param 参数 search_text
+ */
+const getAllDateset: (param?: String) => Promise<Result<any[]>> = (param) => {
+  return get(`${prefix}`, param && { search_text: param })
+}
+
+export default {
+  getDateset,
+  getAllDateset
+}
diff --git a/ui/src/api/team.ts b/ui/src/api/team.ts
index b427f50d1..1e08b684b 100644
--- a/ui/src/api/team.ts
+++ b/ui/src/api/team.ts
@@ -1,6 +1,6 @@
 import { Result } from '@/request/Result'
 import { get, post, del, put } from '@/request/index'
-import type { TeamMember, TeamMemberRequest } from '@/api/type/team'
+import type { TeamMember } from '@/api/type/team'
 // import type { Ref } from 'vue'
 
 const prefix = '/team/member'
@@ -16,8 +16,8 @@ const getTeamMember: () => Promise<Result<TeamMember[]>> = () => {
  * 添加成员
  * @param 参数 { "username_or_email": "string" }
  */
-const postCreatTeamMember: (body: TeamMemberRequest) => Promise<Result<boolean>> = (body) => {
-  return post(`${prefix}`, body)
+const postCreatTeamMember: (data: String) => Promise<Result<boolean>> = (data) => {
+  return post(`${prefix}`, { username_or_email: data })
 }
 
 /**
diff --git a/ui/src/api/type/dataset.ts b/ui/src/api/type/dataset.ts
new file mode 100644
index 000000000..f8247e1ac
--- /dev/null
+++ b/ui/src/api/type/dataset.ts
@@ -0,0 +1,7 @@
+interface datasetListRequest {
+  current_page: number
+  page_size: number
+  search_text: string
+}
+
+export type { datasetListRequest }
diff --git a/ui/src/api/type/team.ts b/ui/src/api/type/team.ts
index be1a4c45a..9e17a842a 100644
--- a/ui/src/api/type/team.ts
+++ b/ui/src/api/type/team.ts
@@ -10,8 +10,4 @@ interface TeamMember {
   user_id: string
 }
 
-interface TeamMemberRequest {
-  username_or_email: string
-}
-
-export type { TeamMember, TeamMemberRequest }
+export type { TeamMember }
diff --git a/ui/src/components/app-avatar/index.vue b/ui/src/components/app-avatar/index.vue
new file mode 100644
index 000000000..cfee6ad60
--- /dev/null
+++ b/ui/src/components/app-avatar/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-avatar :size="30" v-bind="$attrs">
+    <slot> {{ firstUserName }} </slot>
+  </el-avatar>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+defineOptions({ name: 'AppAvatar' })
+const props = defineProps({
+  name: {
+    type: String,
+    default: ''
+  }
+})
+
+const firstUserName = computed(() => {
+  return props.name?.substring(0, 1)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue
new file mode 100644
index 000000000..c6f7673be
--- /dev/null
+++ b/ui/src/components/card-add/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-card shadow="hover">
+    <div class="card-add">
+      <AppIcon :iconName="icon" class="add-icon" />
+      <span class="ml-10">{{ title }}</span>
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'CardAdd' })
+defineProps({
+  title: {
+    type: String,
+    default: '标题'
+  },
+  icon: {
+    type: String,
+    default: 'CirclePlusFilled'
+  }
+})
+</script>
+<style lang="scss" scoped>
+.card-add {
+  width: 100%;
+  min-height: 110px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 15px;
+  cursor: pointer;
+  &:hover {
+    color: var(--el-color-primary);
+  }
+  .add-icon {
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
new file mode 100644
index 000000000..e5fc5fb1f
--- /dev/null
+++ b/ui/src/components/card-box/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
+    <div class="card-header">
+      <slot name="header">
+        <div class="title flex">
+          <AppAvatar class="mr-10">
+            <el-icon><Document /></el-icon>
+          </AppAvatar>
+          <h3>{{ title }}</h3>
+        </div>
+      </slot>
+    </div>
+    <div class="description mt-10">
+      <slot name="description">
+        {{ description }}
+      </slot>
+    </div>
+    <slot />
+    <slot name="mouseEnter" v-if="$slots.mouseEnter && show" />
+    <div class="card-footer" v-if="$slots.footer">
+      <slot name="footer" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+defineOptions({ name: 'CardBox' })
+const props = defineProps({
+  title: {
+    type: String,
+    default: '标题'
+  },
+  description: {
+    type: String,
+    default: ''
+  }
+})
+
+const show = ref(false)
+function cardEnter() {
+  show.value = true
+}
+function cardLeave() {
+  show.value = false
+}
+</script>
+<style lang="scss" scoped>
+.card-box {
+  font-size: 14px;
+  position: relative;
+  min-height: 150px;
+
+  .card-header {
+    .title {
+      align-items: center;
+      h3 {
+        font-size: 15px;
+      }
+    }
+  }
+  .description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    height: 40px;
+  }
+  .card-footer {
+    position: absolute;
+    bottom: 0;
+    min-height: 30px;
+  }
+}
+</style>
diff --git a/ui/src/components/content-container/LayoutContent.vue b/ui/src/components/content-container/LayoutContent.vue
index e59f6675b..20db34851 100644
--- a/ui/src/components/content-container/LayoutContent.vue
+++ b/ui/src/components/content-container/LayoutContent.vue
@@ -6,7 +6,7 @@
       </slot>
     </div>
     <el-scrollbar>
-      <div class="content-container__main">
+      <div class="content-container__main main-calc-height">
         <slot></slot>
       </div>
     </el-scrollbar>
@@ -25,7 +25,7 @@ defineProps({
 <style lang="scss" scope>
 .content-container {
   transition: 0.3s;
-
+  padding: var(--app-view-padding);
   .content-container__header {
     font-weight: 600;
     font-size: 18px;
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 6b80f2551..247f74e51 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -1,16 +1,24 @@
 import { type App } from 'vue'
 import AppIcon from './icons/AppIcon.vue'
+import AppAvatar from './app-avatar/index.vue'
 import LoginLayout from './login-layout/index.vue'
 import LoginContainer from './login-container/index.vue'
 import LayoutContent from './content-container/LayoutContent.vue'
 import TagsInput from './tags-input/index.vue'
+import CardBox from './card-box/index.vue'
+import CardAdd from './card-add/index.vue'
+
+
 
 export default {
   install(app: App) {
     app.component(AppIcon.name, AppIcon)
+    app.component(AppAvatar.name, AppAvatar)
     app.component(LoginLayout.name, LoginLayout)
     app.component(LoginContainer.name, LoginContainer)
     app.component(LayoutContent.name, LayoutContent)
     app.component(TagsInput.name, TagsInput)
+    app.component(CardBox.name, CardBox)
+    app.component(CardAdd.name, CardAdd)
   }
 }
diff --git a/ui/src/layout/components/top-bar/avatar/index.vue b/ui/src/layout/components/top-bar/avatar/index.vue
index 9098f7ecd..60a77e24e 100644
--- a/ui/src/layout/components/top-bar/avatar/index.vue
+++ b/ui/src/layout/components/top-bar/avatar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dropdown trigger="click" type="primary">
-    <el-avatar :size="30"> {{ firstUserName }} </el-avatar>
+    <AppAvatar :name="user.userInfo?.username" />
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item @click="openResetPassword">
@@ -15,15 +15,13 @@
   <ResetPassword ref="resetPasswordRef"></ResetPassword>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import useStore from '@/stores';
+import { ref } from 'vue'
+import useStore from '@/stores'
 import { useRouter } from 'vue-router'
 import ResetPassword from './ResetPasssword.vue'
-const { user } = useStore();
+const { user } = useStore()
 const router = useRouter()
-const firstUserName = computed(() => {
-  return user.userInfo?.username?.substring(0, 1)
-})
+
 const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()
 
 const openResetPassword = () => {
@@ -36,4 +34,4 @@ const logout = () => {
   })
 }
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/ui/src/layout/main-layout/index.vue b/ui/src/layout/main-layout/index.vue
index 5e766ba3a..9d3fc311d 100644
--- a/ui/src/layout/main-layout/index.vue
+++ b/ui/src/layout/main-layout/index.vue
@@ -20,6 +20,5 @@ import { Sidebar, AppMain } from '../components'
 }
 .view-container {
   width: 100%;
-  padding: var(--app-view-padding);
 }
 </style>
diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts
index 637eb98f4..e7e9ab22b 100644
--- a/ui/src/router/routes.ts
+++ b/ui/src/router/routes.ts
@@ -11,12 +11,12 @@ export const routes: Array<RouteRecordRaw> = [
     component: () => import('@/layout/app-layout/index.vue'),
     redirect: '/setting',
     children: [
-      {
-        path: '/first',
-        name: 'first',
-        meta: { icon: 'House', title: '首页' },
-        component: () => import('@/views/first/index.vue')
-      },
+      // {
+      //   path: '/first',
+      //   name: 'first',
+      //   meta: { icon: 'House', title: '首页' },
+      //   component: () => import('@/views/first/index.vue')
+      // },
       ...rolesRoutes
     ]
   },
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 8edee08bb..9e8793f50 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -136,6 +136,15 @@ ul {
   cursor: pointer;
 }
 
+.ellipsis {
+  display: inline-block;
+  max-width: 100px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// 内容部分 自适应高度
 .main-calc-height {
   height: calc(100vh - 125px);
 }
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index fa1fd78b1..969477762 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -1,9 +1,95 @@
 <template>
-    <div>
-        dataset
+  <LayoutContent header="数据集">
+    <div class="dataset-list-container p-15">
+      <div class="align-right">
+        <el-input
+          v-model="filterText"
+          placeholder="搜索内容"
+          suffix-icon="Search"
+          style="width: 300px"
+        />
+      </div>
+      <div>
+        <el-row
+          :gutter="15"
+          v-infinite-scroll="loadDataset"
+          :infinite-scroll-disabled="disabledScroll"
+        >
+          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4" class="mt-10">
+            <CardAdd title="创建数据集" />
+          </el-col>
+          <el-col
+            :xs="24"
+            :sm="12"
+            :md="6"
+            :lg="6"
+            :xl="4"
+            v-for="(item, index) in datasetList"
+            :key="index"
+            class="mt-10"
+          >
+            <CardBox :title="item.name" :description="item.desc" class="cursor">
+              <template #mouseEnter>
+                <div class="delete-button">
+                  <el-button type="primary" link>
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </div>
+              </template>
+
+              <template #footer>
+                <div class="footer-content">
+                  {{ item?.document_count || 0 }}文档数 {{ item?.char_length || 0 }}字符数
+                  {{ item?.char_length || 0 }}关联应用
+                </div>
+              </template>
+            </CardBox>
+          </el-col>
+        </el-row>
+      </div>
     </div>
+  </LayoutContent>
 </template>
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import datasetApi from '@/api/dataset'
+import type { datasetListRequest } from '@/api/type/dataset'
 
+const loading = ref(false)
+const filterText = ref('')
+const datasetList = ref<any[]>([])
+const disabledScroll = ref(false)
+const pageConfig = ref<datasetListRequest>({
+  current_page: 1,
+  page_size: 20,
+  search_text: ''
+})
+
+function loadDataset() {}
+
+function getList() {
+  loading.value = true
+  datasetApi
+    .getDateset(pageConfig.value)
+    .then((res) => {
+      datasetList.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {
+  getList()
+})
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.dataset-list-container {
+  .delete-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+}
+</style>
diff --git a/ui/src/views/setting/component/CreateMemberDialog.vue b/ui/src/views/setting/component/CreateMemberDialog.vue
index 4ccb896ef..539508cdc 100644
--- a/ui/src/views/setting/component/CreateMemberDialog.vue
+++ b/ui/src/views/setting/component/CreateMemberDialog.vue
@@ -81,12 +81,10 @@ const submitMember = async (formEl: FormInstance | undefined) => {
   await formEl.validate((valid, fields) => {
     if (valid) {
       loading.value = true
-      const obj: any = {
-        username_or_email: memberForm.value.users?.length
-          ? memberForm.value.users.toString()
-          : memberForm.value.user
-      }
-      TeamApi.postCreatTeamMember(obj).then(() => {
+      const submitValue: string = memberForm.value.users?.length
+        ? memberForm.value.users.toString()
+        : memberForm.value.user
+      TeamApi.postCreatTeamMember(submitValue).then(() => {
         MsgSuccess('提交成功')
         emit('refresh')
         dialogVisible.value = false
diff --git a/ui/src/views/setting/component/PermissionSetting.vue b/ui/src/views/setting/component/PermissionSetting.vue
index ed97ba50f..37b962cbe 100644
--- a/ui/src/views/setting/component/PermissionSetting.vue
+++ b/ui/src/views/setting/component/PermissionSetting.vue
@@ -47,7 +47,7 @@ const allChecked: any = ref({
   [USE]: false
 })
 
-const tableHeight = ref(100)
+const tableHeight = ref(0)
 
 watch(
   () => props.data,