From 2cdc72935e29cdb92293c87fa8ddccd9b65bc8a1 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 1 Dec 2023 11:36:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=9B=A2=E9=98=9F?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ai-dialog/OperationButton.vue  | 51 ++++++++++++++++++
 ui/src/components/ai-dialog/index.vue         | 53 +++----------------
 ui/src/components/common-list/index.vue       | 22 +++-----
 .../layout/components/sidebar/SidebarItem.vue | 17 +++---
 ui/src/layout/components/sidebar/index.vue    |  1 +
 ui/src/router/modules/application.ts          |  3 +-
 ui/src/views/application/AppOverview.vue      |  6 +--
 .../components/AddDatasetDialog.vue           |  2 +-
 .../application/components/EmbedDialog.vue    |  4 +-
 ui/src/views/template/index.vue               | 41 ++++++++------
 10 files changed, 108 insertions(+), 92 deletions(-)
 create mode 100644 ui/src/components/ai-dialog/OperationButton.vue

diff --git a/ui/src/components/ai-dialog/OperationButton.vue b/ui/src/components/ai-dialog/OperationButton.vue
new file mode 100644
index 000000000..e747b01c9
--- /dev/null
+++ b/ui/src/components/ai-dialog/OperationButton.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <el-tooltip effect="dark" content="重新生成" placement="top">
+      <el-button text @click.stop @click="getAccessToken(item.id)">
+        <AppIcon iconName="VideoPlay"></AppIcon>
+      </el-button>
+    </el-tooltip>
+    <el-divider direction="vertical" />
+    <el-tooltip effect="dark" content="复制" placement="top">
+      <el-button text @click="copyClick(item.answer_text)">
+        <AppIcon iconName="app-copy"></AppIcon>
+      </el-button>
+    </el-tooltip>
+    <el-divider direction="vertical" />
+    <el-tooltip effect="dark" content="赞同" placement="top">
+      <el-button text>
+        <AppIcon iconName="app-like"></AppIcon>
+      </el-button>
+    </el-tooltip>
+    <el-tooltip effect="dark" content="取消赞同" placement="top">
+      <el-button text>
+        <AppIcon iconName="app-like-color"></AppIcon>
+      </el-button>
+    </el-tooltip>
+    <el-divider direction="vertical" />
+    <el-tooltip effect="dark" content="反对" placement="top">
+      <el-button text>
+        <AppIcon iconName="app-oppose"></AppIcon>
+      </el-button>
+    </el-tooltip>
+    <el-tooltip effect="dark" content="取消反对" placement="top">
+      <el-button text>
+        <AppIcon iconName="app-oppose-color"></AppIcon>
+      </el-button>
+    </el-tooltip>
+  </div>
+</template>
+<script setup lang="ts">
+import { copyClick } from '@/utils/clipboard'
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const emit = defineEmits(['update:data'])
+
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index 3ae39ff23..d88e1424c 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -79,51 +79,7 @@
                 </div>
 
                 <!-- <div v-if="item.write_ed && props.appId">
-                  <el-tooltip effect="dark" content="重新生成" placement="top">
-                    <el-button text @click.stop @click="getAccessToken(item.id)">
-                      <AppIcon iconName="VideoPlay"></AppIcon>
-                    </el-button>
-                  </el-tooltip>
-                  <el-divider direction="vertical" />
-                  <el-tooltip effect="dark" content="复制" placement="top">
-                    <el-button text @click="copyClick(item.answer_text)">
-                      <AppIcon iconName="app-copy"></AppIcon>
-                    </el-button>
-                  </el-tooltip>
-                  <el-divider direction="vertical" />
-                  <el-tooltip effect="dark" content="赞同" placement="top">
-                    <el-button
-                      text
-                      @click.stop="router.push({ path: `/application/${item.id}/setting` })"
-                    >
-                      <AppIcon iconName="app-like"></AppIcon>
-                    </el-button>
-                  </el-tooltip>
-                  <el-tooltip effect="dark" content="取消赞同" placement="top">
-                    <el-button
-                      text
-                      @click.stop="router.push({ path: `/application/${item.id}/setting` })"
-                    >
-                      <AppIcon iconName="app-like-color"></AppIcon>
-                    </el-button>
-                  </el-tooltip>
-                  <el-divider direction="vertical" />
-                  <el-tooltip effect="dark" content="反对" placement="top">
-                    <el-button
-                      text
-                      @click.stop="router.push({ path: `/application/${item.id}/setting` })"
-                    >
-                      <AppIcon iconName="app-oppose"></AppIcon>
-                    </el-button>
-                  </el-tooltip>
-                  <el-tooltip effect="dark" content="取消反对" placement="top">
-                    <el-button
-                      text
-                      @click.stop="router.push({ path: `/application/${item.id}/setting` })"
-                    >
-                      <AppIcon iconName="app-oppose-color"></AppIcon>
-                    </el-button>
-                  </el-tooltip>
+                  <OperationButton :data="item" />
                 </div> -->
               </div>
             </div>
@@ -154,10 +110,10 @@
 <script setup lang="ts">
 import { ref, nextTick, onUpdated, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import OperationButton from './OperationButton.vue'
 import applicationApi from '@/api/application'
 import { ChatManagement, type chatType } from '@/api/type/application'
 import { randomId } from '@/utils/utils'
-import { copyClick } from '@/utils/clipboard'
 
 const route = useRoute()
 const {
@@ -258,6 +214,7 @@ function chatMessage() {
         ChatManagement.addChatRecord(row, 50, loading)
         ChatManagement.write(id)
         const reader = response.body.getReader()
+        /*eslint no-constant-condition: ["error", { "checkLoops": false }]*/
         while (true) {
           const { done, value } = await reader.read()
           if (done) {
@@ -273,7 +230,9 @@ function chatMessage() {
                 ChatManagement.append(id, content)
               }
             }
-          } catch (e) {}
+          } catch (e) {
+            //  console
+          }
         }
       }
     })
diff --git a/ui/src/components/common-list/index.vue b/ui/src/components/common-list/index.vue
index 9a7b103f3..aa2be2094 100644
--- a/ui/src/components/common-list/index.vue
+++ b/ui/src/components/common-list/index.vue
@@ -2,18 +2,10 @@
   <div class="common-list">
     <el-scrollbar>
       <ul v-if="data.length > 0">
-        <li
-          v-if="slots.prefix"
-          @click="clickHandle()"
-          :class="modelValue === undefined || modelValue === null ? 'active' : ''"
-          class="cursor"
-        >
-          <slot name="prefix"> </slot>
-        </li>
         <template v-for="(item, index) in data" :key="index">
           <li
-            @click.prevent="clickHandle(item)"
-            :class="modelValue === item ? 'active' : ''"
+            @click.prevent="clickHandle(item, index)"
+            :class="current === index ? 'active' : ''"
             class="cursor"
           >
             <slot :row="item" :index="index"> </slot>
@@ -32,8 +24,6 @@ defineOptions({ name: 'CommonList' })
 
 withDefaults(
   defineProps<{
-    modelValue?: any
-
     data: Array<any>
   }>(),
   {
@@ -41,11 +31,13 @@ withDefaults(
   }
 )
 
-const emit = defineEmits(['click', 'update:modelValue'])
+const emit = defineEmits(['click'])
 
-function clickHandle(row?: any) {
+const current = ref(0)
+
+function clickHandle(row: any, index: number) {
+  current.value = index
   emit('click', row)
-  emit('update:modelValue', row)
 }
 </script>
 <style lang="scss" scoped>
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index cdc2dc992..d90fc4771 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -2,11 +2,7 @@
   <div v-if="!menu.meta || !menu.meta.hidden" class="sidebar-item">
     <el-menu-item ref="subMenu" :index="menu.path" popper-class="sidebar-popper">
       <template #title>
-        <AppIcon
-          v-if="menu.meta && menu.meta.icon"
-          :iconName="menu.meta.icon"
-          class="sidebar-icon"
-        />
+        <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menuIcon" class="sidebar-icon" />
         <span v-if="menu.meta && menu.meta.title">{{ menu.meta.title }}</span>
       </template>
     </el-menu-item>
@@ -14,11 +10,20 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { type RouteRecordRaw } from 'vue-router'
 
-defineProps<{
+const props = defineProps<{
   menu: RouteRecordRaw
+  activeMenu: any
 }>()
+const menuIcon = computed(() => {
+  if (props.activeMenu === props.menu.path) {
+    return props.menu.meta?.iconActive || props.menu?.meta?.icon
+  } else {
+    return props.menu?.meta?.icon
+  }
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/ui/src/layout/components/sidebar/index.vue b/ui/src/layout/components/sidebar/index.vue
index e176daa4d..223b82832 100644
--- a/ui/src/layout/components/sidebar/index.vue
+++ b/ui/src/layout/components/sidebar/index.vue
@@ -10,6 +10,7 @@
           v-for="(menu, index) in subMenuList"
           :key="index"
           :menu="menu"
+          :activeMenu="activeMenu"
         >
         </sidebar-item>
       </el-menu>
diff --git a/ui/src/router/modules/application.ts b/ui/src/router/modules/application.ts
index f7793fc04..6ec437b88 100644
--- a/ui/src/router/modules/application.ts
+++ b/ui/src/router/modules/application.ts
@@ -28,7 +28,8 @@ const applicationRouter = {
           path: 'overview',
           name: 'AppOverview',
           meta: {
-            icon: 'Document',
+            icon: 'app-all-menu',
+            iconActive: 'app-all-menu-active',
             title: '概览',
             active: 'overview',
             parentPath: '/application/:id',
diff --git a/ui/src/views/application/AppOverview.vue b/ui/src/views/application/AppOverview.vue
index b60e355d5..8a3b850a4 100644
--- a/ui/src/views/application/AppOverview.vue
+++ b/ui/src/views/application/AppOverview.vue
@@ -25,7 +25,7 @@
               </span>
 
               <el-button type="primary" text @click="copyClick(shareUrl)">
-                <el-icon style="font-size: 13px"><CopyDocument /></el-icon>
+                <AppIcon iconName="app-copy"></AppIcon>
               </el-button>
             </div>
           </el-col>
@@ -37,14 +37,14 @@
               </span>
 
               <el-button type="primary" text>
-                <el-icon style="font-size: 13px"><CopyDocument /></el-icon>
+                   <AppIcon iconName="app-copy"></AppIcon>
               </el-button>
             </div>
             <div class="mt-4">
               <span class="vertical-middle lighter"> API Secret: ************** </span>
               <span>
                 <el-button type="primary" text>
-                  <el-icon style="font-size: 13px"><CopyDocument /></el-icon>
+                     <AppIcon iconName="app-copy"></AppIcon>
                 </el-button>
               </span>
               <span>
diff --git a/ui/src/views/application/components/AddDatasetDialog.vue b/ui/src/views/application/components/AddDatasetDialog.vue
index 20f8e4d0e..e20ea5ceb 100644
--- a/ui/src/views/application/components/AddDatasetDialog.vue
+++ b/ui/src/views/application/components/AddDatasetDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog title="添加关联数据集" v-model="dialogVisible" width="600">
-    <template #header="{ close, titleId, titleClass }">
+    <template #header="{ titleId, titleClass }">
       <div class="my-header flex">
         <h4 :id="titleId" :class="titleClass">添加关联数据集</h4>
         <el-button link class="ml-16" @click="refresh">
diff --git a/ui/src/views/application/components/EmbedDialog.vue b/ui/src/views/application/components/EmbedDialog.vue
index 4b6532897..d183d9c28 100644
--- a/ui/src/views/application/components/EmbedDialog.vue
+++ b/ui/src/views/application/components/EmbedDialog.vue
@@ -8,7 +8,7 @@
             <div class="flex-between">
               <span class="bold">复制以下代码进行嵌入</span>
               <el-button text @click="copyClick(source1)">
-                <el-icon style="font-size: 13px"><CopyDocument /></el-icon>
+                <AppIcon iconName="app-copy" ></AppIcon>
               </el-button>
             </div>
             <div class="mt-8">
@@ -24,7 +24,7 @@
             <div class="flex-between">
               <span class="bold">复制以下代码进行嵌入</span>
               <el-button text @click="copyClick(source2)">
-                <el-icon style="font-size: 13px"><CopyDocument /></el-icon>
+                <AppIcon iconName="app-copy"></AppIcon>
               </el-button>
             </div>
             <div class="mt-8">
diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue
index a5b2dc074..d171979a8 100644
--- a/ui/src/views/template/index.vue
+++ b/ui/src/views/template/index.vue
@@ -3,33 +3,31 @@
     <div class="template-manage flex main-calc-height">
       <div class="template-manage__left p-8 border-r">
         <h4 class="p-16">供应商</h4>
+
         <common-list
-          v-model="active_provider"
           :data="provider_list"
           class="mt-8"
           v-loading="loading"
+          @click="clickListHandle"
         >
-          <template #prefix>
-            <div class="flex">
+          <template #default="{ row, index }">
+            <div class="flex" v-if="index === 0">
               <AppIcon
-                style="height: 24px; width: 24px"
                 class="mr-8"
-                :iconName="active_provider ? 'app-all-menu' : 'app-all-menu-active'"
+                style="height: 20px; width: 20px"
+                :iconName="active_provider === row ? 'app-all-menu-active' : 'app-all-menu'"
               ></AppIcon>
               <span>全部模型</span>
             </div>
-          </template>
-          <template #default="{ row }">
-            <div class="flex">
-              <span :innerHTML="row.icon" alt="" style="height: 24px; width: 24px" class="mr-8" />
+            <div class="flex" v-else>
+              <span :innerHTML="row.icon" alt="" style="height: 20px; width: 20px" class="mr-8" />
               <span>{{ row.name }}</span>
             </div>
           </template>
         </common-list>
       </div>
       <div class="template-manage__right p-24" v-loading="list_model_loading">
-        <h3 v-if="active_provider">{{ active_provider.name }}</h3>
-        <h3 v-else>全部模型</h3>
+        <h3>{{ active_provider?.name }}</h3>
         <div class="flex-between mt-8">
           <el-button type="primary" @click="openCreateModel(active_provider)">创建模型</el-button>
           <el-input
@@ -67,6 +65,12 @@ import { splitArray } from '@/utils/common'
 import CreateModel from '@/views/template/component/CreateModel.vue'
 import SelectProvider from '@/views/template/component/SelectProvider.vue'
 
+const allObj = {
+  icon: '',
+  provider: '',
+  name: '全部模型'
+}
+
 const loading = ref<boolean>(false)
 
 const active_provider = ref<Provider>()
@@ -82,6 +86,11 @@ const model_split_list = computed(() => {
 const createModelRef = ref<InstanceType<typeof CreateModel>>()
 const selectProviderRef = ref<InstanceType<typeof SelectProvider>>()
 
+const clickListHandle = (item: Provider) => {
+  active_provider.value = item
+  list_model()
+}
+
 const openCreateModel = (provider?: Provider) => {
   if (provider) {
     createModelRef.value?.open(provider)
@@ -91,19 +100,17 @@ const openCreateModel = (provider?: Provider) => {
 }
 
 const list_model = () => {
-  const params = active_provider.value ? { provider: active_provider.value.provider } : {}
+  const params = active_provider.value?.provider ? { provider: active_provider.value.provider } : {}
   ModelApi.getModel({ ...model_search_form.value, ...params }, list_model_loading).then((ok) => {
     model_list.value = ok.data
   })
 }
 
-watch(active_provider, list_model, {
-  immediate: true
-})
-
 onMounted(() => {
   ModelApi.getProvider(loading).then((ok) => {
-    provider_list.value = [...ok.data]
+    active_provider.value = allObj
+    provider_list.value = [allObj, ...ok.data]
+    list_model()
   })
 })
 </script>