feat: 应用功能

ui/src/components/common-list/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="common-list">
+    <el-scrollbar>
+      <ul v-if="data.length > 0">
+        <template v-for="(item, index) in data" :key="index">
+          <li
+            @click.prevent="clickHandle(item, index)"
+            :class="current === index ? 'active' : ''"
+            class="cursor"
+          >
+            <slot :row="item" :index="index"> </slot>
+          </li>
+        </template>
+      </ul>
+      <el-empty description="暂无数据" v-else />
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+defineOptions({ name: 'CommonList' })
+const props = defineProps({
+  data: {
+    type: Array<any>,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const current = ref(0)
+
+function clickHandle(row: any, index: number) {
+  current.value = index
+  emit('click', row)
+}
+</script>
+<style lang="scss" scoped>
+// 通用 ui li样式
+.common-list {
+  li {
+    padding: 11px 16px;
+    &.active {
+      background: var(--el-color-primary-light-9);
+      border-radius: 4px;
+      color: var(--el-color-primary);
+    }
+  }
+}
+</style>

ui/src/components/index.ts

@@ -11,6 +11,7 @@ import BackButton from './back-button/index.vue'
 import AppTable from './app-table/index.vue'
 import ReadWrite from './read-write/index.vue'
 import TagEllipsis from './tag-ellipsis/index.vue'
+import CommonList from './common-list/index.vue'
 
 export default {
   install(app: App) {
@@ -26,5 +27,6 @@ export default {
     app.component(AppTable.name, AppTable)
     app.component(ReadWrite.name, ReadWrite)
     app.component(TagEllipsis.name, TagEllipsis)
+    app.component(CommonList.name, CommonList)
   }
 }

ui/src/router/modules/application.ts

@@ -1,8 +1,68 @@
+import Layout from '@/layout/main-layout/index.vue'
 const applicationRouter = {
-  path: '/app',
+  path: '/application',
-  name: 'app',
+  name: 'application',
   meta: { icon: 'app-applicaiton', title: '应用', permission: 'APPLICATION:READ' },
-  component: () => import('@/views/app/index.vue')
+  redirect: '/application',
+  children: [
+    {
+      path: '/application',
+      name: 'application',
+      component: () => import('@/views/application/index.vue')
+    },
+    {
+      path: '/application/create', // create 
+      name: 'CreateApplication',
+      meta: { activeMenu: '/application' },
+      component: () => import('@/views/application/CreateApplication.vue'),
+      hidden: true
+    },
+    {
+      path: '/application/:appId',
+      name: 'ApplicationDetail',
+      meta: { title: '应用详情', activeMenu: '/application' },
+      component: Layout,
+      hidden: true,
+      children: [
+        {
+          path: 'overview',
+          name: 'AppOverview',
+          meta: {
+            icon: 'Document',
+            title: '概览',
+            active: 'overview',
+            parentPath: '/application/:appId',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/application/AppOverview.vue')
+        },
+        {
+          path: 'setting', 
+          name: 'AppSetting',
+          meta: {
+            icon: 'Setting',
+            title: '设置',
+            active: 'setting',
+            parentPath: '/application/:appId',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/application/AppSetting.vue')
+        },
+        {
+          path: 'dialog',
+          name: 'DialogLog',
+          meta: {
+            icon: 'Setting',
+            title: '对话日志',
+            active: 'dialog',
+            parentPath: '/application/:appId',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/application/DialogLog.vue')
+        }
+      ]
+    },
+  ]
 }
 
 export default applicationRouter

ui/src/router/modules/setting.ts

@@ -16,6 +16,18 @@ const settingRouter = {
         parentName: 'setting'
       },
       component: () => import('@/views/setting/index.vue')
+    },
+    {
+      path: '/template',
+      name: 'template',
+      meta: {
+        icon: 'app-team',
+        title: '模版管理',
+        activeMenu: '/setting',
+        parentPath: '/setting',
+        parentName: 'setting'
+      },
+      component: () => import('@/views/template/index.vue')
     }
   ]
 }

ui/src/styles/app.scss

@@ -292,5 +292,3 @@ h4 {
 .primary {
   color: var(--el-color-primary);
 }
-
-

ui/src/styles/variables.scss

@@ -29,8 +29,8 @@
   --card-min-height: 160px;
   --card-min-width: 220px;
 
-  /** team */
+  /** setting */
-  --team-manage-left-width: 280px;
+  --setting-left-width: 280px;
 
   /** dataset */
   --create-dataset-height: calc(

ui/src/views/app/index.vue

@@ -1,8 +0,0 @@
-<template >
-    <div>
-        app
-    </div>
-</template>
-<script setup lang="ts">
-</script>
-<style lang="scss" scoped></style>

ui/src/views/application/AppOverview.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+  概览
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>

ui/src/views/application/AppSetting.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+  设置
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>

ui/src/views/application/CreateApplication.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+  创建应用
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>

ui/src/views/application/DialogLog.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+  对话日志
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>

ui/src/views/application/index.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="application-list-container p-24">
+      <div class="flex-between">
+        <h3>应用</h3>
+        <el-input
+          v-model="pageConfig.name"
+          @change="search"
+          placeholder="按 名称 搜索"
+          prefix-icon="Search"
+          class="w-240"
+        />
+      </div>
+      <div v-loading.fullscreen.lock="loading">
+        <el-row
+          :gutter="15"
+          v-infinite-scroll="loadDataset"
+          :infinite-scroll-disabled="disabledScroll"
+          class="app-list-row"
+        >
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
+            <CardAdd title="创建应用" @click="router.push({ path: '/application/create' })" />
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
+            <CardBox title="应用" @click="router.push({ path: '/application/1/overview' })" />
+          </el-col>
+          <!-- <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="4"
+            v-for="(item, index) in applicationList"
+            :key="index"
+            class="mt-8"
+          >
+            <CardBox
+              :title="item.name"
+              :description="item.desc"
+              class="cursor"
+              @click="router.push({ path: `/dataset/${item.id}/document` })"
+            >
+              <template #mouseEnter>
+                <el-tooltip effect="dark" content="删除" placement="top">
+                  <el-button text @click.stop="deleteDateset(item)" class="delete-button">
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </template>
+  
+              <template #footer>
+                <div class="footer-content">
+                  <span class="bold">{{ item?.document_count || 0 }}</span>
+                  文档<el-divider direction="vertical" />
+                  <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
+                  字符<el-divider direction="vertical" />
+                  <span class="bold">{{ item?.char_length || 0 }}</span>
+                  关联应用
+                </div>
+              </template>
+            </CardBox>
+          </el-col> -->
+        </el-row>
+      </div>
+    </div>
+  </template>
+  <script setup lang="ts">
+  import { ref, onMounted, reactive } from 'vue'
+  import datasetApi from '@/api/dataset'
+  import type { datasetListRequest } from '@/api/type/dataset'
+//   import { MsgSuccess, MsgConfirm } from '@/utils/message'
+  import { useRouter } from 'vue-router'
+//   import { numberFormat } from '@/utils/utils'
+  const router = useRouter()
+  
+  const loading = ref(false)
+  const disabledScroll = ref(false)
+  const pageConfig = reactive<datasetListRequest>({
+    current_page: 1,
+    page_size: 20,
+    name: ''
+  })
+
+    const applicationList = ref<any[]>([])
+  
+  function loadDataset() {}
+  
+  function search() {
+    pageConfig.current_page = 1
+    getList()
+  }
+  
+//   function deleteDateset(row: any) {
+//     MsgConfirm(
+//       `是否删除数据集：${row.name} ?`,
+//       `此数据集关联 ${row.char_length} 个应用，删除后无法恢复，请谨慎操作。`,
+//       {
+//         confirmButtonText: '删除',
+//         confirmButtonClass: 'danger'
+//       }
+//     )
+//       .then(() => {
+//         loading.value = true
+//         datasetApi
+//           .delDateset(row.id)
+//           .then(() => {
+//             MsgSuccess('删除成功')
+//             getList()
+//           })
+//           .catch(() => {
+//             loading.value = false
+//           })
+//       })
+//       .catch(() => {})
+//   }
+  
+  function getList() {
+    loading.value = true
+    datasetApi
+      .getDateset(pageConfig)
+      .then((res) => {
+        applicationList.value = res.data?.records
+        loading.value = false
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  }
+  
+  onMounted(() => {
+    // getList()
+  })
+  </script>
+  <style lang="scss" scoped>
+//   .dataset-list-container {
+//     .delete-button {
+//       position: absolute;
+//       right: 12px;
+//       top: 18px;
+//       height: auto;
+//     }
+//     .footer-content {
+//       .bold {
+//         color: var(--app-text-color);
+//       }
+//     }
+//   }
+  </style>
+  

ui/src/views/setting/index.vue

@@ -11,40 +11,34 @@
         <div class="team-member-input">
           <el-input v-model="filterText" placeholder="请输入用户名搜索" prefix-icon="Search" />
         </div>
-        <div class="member-list mt-8" v-loading="loading">
+        <common-list
-          <el-scrollbar>
+          :data="filterMember"
-            <ul v-if="filterMember.length > 0">
+          class="mt-8"
-              <template v-for="(item, index) in filterMember" :key="index">
+          v-loading="loading"
-                <li
+          @click="clickMemberHandle"
-                  @click.prevent="clickMemberHandle(item.id)"
+        >
-                  :class="currentUser === item.id ? 'active' : ''"
+          <template #default="{ row }">
-                  class="flex-between cursor"
+            <div class="flex-between">
-                >
+              <div>
-                  <div>
+                <span class="mr-8">{{ row.username }}</span>
-                    <span class="mr-8">{{ item.username }}</span>
+                <el-tag v-if="isManage(row.type)" class="default-tag">所有者</el-tag>
-                    <el-tag v-if="isManage(item.type)" class="default-tag">所有者</el-tag>
+                <el-tag type="warning" v-else>用户</el-tag>
-                    <el-tag type="warning" v-else>用户</el-tag>
+              </div>
-                  </div>
+              <div @click.stop style="margin-top: 5px">
-                  <span @click.stop>
+                <el-dropdown trigger="click" v-if="!isManage(row.type)">
-                    <el-dropdown trigger="click" v-if="!isManage(item.type)">
+                  <span class="cursor">
-                      <span class="cursor">
+                    <el-icon class="rotate-90"><MoreFilled /></el-icon>
-                        <el-icon class="rotate-90"><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 #dropdown>
-              </template>
+                    <el-dropdown-menu>
-            </ul>
+                      <el-dropdown-item @click.prevent="deleteMember(row)">移除</el-dropdown-item>
-            <el-empty description="暂无数据" v-else />
+                    </el-dropdown-menu>
-          </el-scrollbar>
+                  </template>
-        </div>
+                </el-dropdown>
+              </div>
+            </div>
+          </template>
+        </common-list>
       </div>
       <div class="permission-setting flex" v-loading="rLoading">
         <div class="team-manage__table p-24">
@@ -181,9 +175,9 @@ function isManage(type: String) {
   return type === 'manage'
 }
 
-function clickMemberHandle(id: String) {
+function clickMemberHandle(item: any) {
-  currentUser.value = id
+  currentUser.value = item.id
-  MemberPermissions(id)
+  MemberPermissions(item.id)
 }
 function addMember() {
   CreateMemberRef.value?.open()
@@ -223,23 +217,13 @@ onMounted(() => {
   }
   .team-member {
     box-sizing: border-box;
-    width: var(--team-manage-left-width);
+    width: var(--setting-left-width);
-    min-width: var(--team-manage-left-width);
+    min-width: var(--setting-left-width);
-    .member-list {
-      li {
-        padding: 11px 16px;
-        &.active {
-          background: var(--el-color-primary-light-9);
-          border-radius: 4px;
-          color: var(--el-color-primary);
-        }
-      }
-    }
   }
 
   .permission-setting {
     box-sizing: border-box;
-    width: calc(100% - var(--team-manage-left-width));
+    width: calc(100% - var(--setting-left-width));
     flex-direction: column;
   }
 

ui/src/views/template/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <LayoutContainer header="模版管理">
+    <div class="template-manage flex main-calc-height">
+      <div class="template-manage__left p-8 border-r">
+        <h4 class="p-16">供应商</h4>
+        <common-list :data="list" class="mt-8" v-loading="loading" @click="clickHandle">
+          <template #default="{ row }">
+            <div class="flex">
+              <img src="@/assets/icon_document.svg" alt="" class="mr-8" />
+              <span>{{ row.name }}</span>
+            </div>
+          </template>
+        </common-list>
+      </div>
+      <div class="template-manage__left p-24">
+        <h4>全部模型</h4>
+      </div>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, watch } from 'vue'
+const loading = ref(false)
+const list = ref([
+  {
+    name: '1111'
+  }
+])
+
+function clickHandle(row: any) {}
+
+onMounted(() => {})
+</script>
+
+<style lang="scss" scoped>
+.template-manage {
+  &__left {
+    box-sizing: border-box;
+    width: var(--setting-left-width);
+    min-width: var(--setting-left-width);
+  }
+}
+</style>