From 11f29317c84b97754a386ed1b7bd28be30a43686 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 24 Nov 2023 14:49:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/package-lock.json                          | 11 +++
 ui/src/api/type/model.ts                      |  2 -
 ui/src/components/card-add/index.vue          |  1 +
 ui/src/components/card-box/index.vue          |  1 +
 ui/src/components/icons/index.ts              | 20 +++++
 ui/src/router/modules/application.ts          |  4 +-
 ui/src/stores/modules/model.ts                |  2 +-
 ui/src/styles/element-plus.scss               |  5 +-
 ui/src/views/application/AppOverview.vue      | 80 +++++++++++++++++--
 ui/src/views/application/AppSetting.vue       |  8 --
 ...teApplication.vue => CreateAndSetting.vue} | 70 ++++++++++------
 .../components/AddDatasetDialog.vue           | 48 +++++++++++
 ui/src/views/application/index.vue            |  4 +-
 13 files changed, 210 insertions(+), 46 deletions(-)
 delete mode 100644 ui/src/views/application/AppSetting.vue
 rename ui/src/views/application/{CreateApplication.vue => CreateAndSetting.vue} (79%)
 create mode 100644 ui/src/views/application/components/AddDatasetDialog.vue

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 4edcf7174..ccbc1f7dc 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -11,6 +11,7 @@
         "axios": "^0.27.2",
         "element-plus": "^2.3.14",
         "lodash": "^4.17.21",
+        "mitt": "^3.0.0",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.6",
         "vue": "^3.3.4",
@@ -3602,6 +3603,11 @@
         "node": "*"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/mlly": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
@@ -8411,6 +8417,11 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "mlly": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
diff --git a/ui/src/api/type/model.ts b/ui/src/api/type/model.ts
index b4abade16..368e0cd11 100644
--- a/ui/src/api/type/model.ts
+++ b/ui/src/api/type/model.ts
@@ -1,5 +1,3 @@
-import { SrvRecord } from 'dns'
-
 interface modelRequest {
   name: string
   model_type: string
diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue
index 43b0127a5..2edea748d 100644
--- a/ui/src/components/card-add/index.vue
+++ b/ui/src/components/card-add/index.vue
@@ -26,6 +26,7 @@ defineProps({
   min-height: var(--card-min-height);
   border: 1px dashed var(--el-color-primary);
   background: #eff0f1;
+  border-radius: 8px;
 
   .add-icon {
     font-size: 14px;
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 0663b2cae..c61742c62 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -54,6 +54,7 @@ function cardLeave() {
   position: relative;
   min-height: var(--card-min-height);
   border: 1px solid #ffffff;
+  border-radius: 8px;
   .description {
     display: -webkit-box;
     -webkit-box-orient: vertical;
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index 39fc5b06b..69acdd534 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -221,5 +221,25 @@ export const iconMap: any = {
         )
       ])
     }
+  },
+  'app-hide-password': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M7.99998 10.0002C7.56178 10.0002 7.13299 9.96572 6.7171 9.8997L6.38511 11.1387C6.33746 11.3165 6.15468 11.4221 5.97686 11.3744L5.33291 11.2019C5.15509 11.1542 5.04956 10.9714 5.09721 10.7936L5.4223 9.58034C4.87988 9.3961 4.37072 9.15543 3.90466 8.86678L2.84516 9.92629C2.71498 10.0565 2.50393 10.0565 2.37375 9.92629L1.90235 9.45489C1.77217 9.32471 1.77217 9.11366 1.90235 8.98348L2.8354 8.05043C2.35399 7.59967 1.95185 7.08569 1.64787 6.5247C1.64468 6.51881 1.64138 6.51264 1.63799 6.50624C1.51335 6.27086 1.55999 5.97623 1.75685 5.79684C1.92026 5.64792 2.03572 5.54659 2.13615 5.44616C2.14513 5.43717 2.15496 5.42715 2.16545 5.41632C2.31084 5.26609 2.55878 5.32201 2.64392 5.51294C3.47403 7.37447 5.46187 8.6669 7.99998 8.6669C10.4318 8.6669 12.4662 7.40921 13.2827 5.68288C13.3039 5.63796 13.3277 5.58139 13.3516 5.52133C13.4274 5.33113 13.6738 5.27374 13.8186 5.41849C13.9256 5.52556 14.0684 5.66833 14.2469 5.84678C14.4233 6.02319 14.471 6.29259 14.3557 6.51383C14.3277 6.56764 14.3004 6.61834 14.2771 6.65865C13.9636 7.20157 13.5569 7.69799 13.0751 8.13259L13.926 8.98348C14.0562 9.11366 14.0562 9.32471 13.926 9.45489L13.4546 9.92629C13.3245 10.0565 13.1134 10.0565 12.9832 9.92629L11.9885 8.93161C11.5518 9.1916 11.0789 9.41007 10.5777 9.58034L10.9027 10.7936C10.9504 10.9714 10.8449 11.1542 10.667 11.2019L10.0231 11.3744C9.84527 11.4221 9.66249 11.3165 9.61485 11.1387L9.28285 9.8997C8.86696 9.96572 8.43817 10.0002 7.99998 10.0002Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
   }
 }
diff --git a/ui/src/router/modules/application.ts b/ui/src/router/modules/application.ts
index 763243d65..0597e52e1 100644
--- a/ui/src/router/modules/application.ts
+++ b/ui/src/router/modules/application.ts
@@ -14,7 +14,7 @@ const applicationRouter = {
       path: '/application/create',
       name: 'CreateApplication',
       meta: { activeMenu: '/application' },
-      component: () => import('@/views/application/CreateApplication.vue'),
+      component: () => import('@/views/application/CreateAndSetting.vue'),
       hidden: true
     },
     {
@@ -46,7 +46,7 @@ const applicationRouter = {
             parentPath: '/application/:appId',
             parentName: 'ApplicationDetail'
           },
-          component: () => import('@/views/application/AppSetting.vue')
+          component: () => import('@/views/application/CreateAndSetting.vue')
         },
         {
           path: 'dialog',
diff --git a/ui/src/stores/modules/model.ts b/ui/src/stores/modules/model.ts
index 0e2f8fc78..a68b1e54a 100644
--- a/ui/src/stores/modules/model.ts
+++ b/ui/src/stores/modules/model.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import modelApi from '@/api/model'
-import type { modelRequest } from '@/api/type/model'
+import type { modelRequest, Provider } from '@/api/type/model'
 const useModelStore = defineStore({
   id: 'model',
   state: () => ({}),
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 954982441..67906aedf 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -93,7 +93,6 @@
 }
 
 .el-card {
-  --el-card-border-radius: 8px;
   --el-card-padding: calc(var(--app-base-px) * 2);
 }
 .el-dropdown {
@@ -185,4 +184,6 @@
   font-size: 13px;
 }
 
-
+.el-select-group .el-select-dropdown__item {
+  padding-left: 11px;
+}
diff --git a/ui/src/views/application/AppOverview.vue b/ui/src/views/application/AppOverview.vue
index 77958af25..f738c35ec 100644
--- a/ui/src/views/application/AppOverview.vue
+++ b/ui/src/views/application/AppOverview.vue
@@ -1,8 +1,76 @@
 <template>
-  <div>
-  概览
-  </div>
+  <LayoutContainer header="概览" back-to="-1">
+    <div class="main-calc-height p-24">
+      <h4 class="title-decoration-1 mb-16">应用信息</h4>
+      <el-card shadow="never" class="overview-card">
+        <div class="title flex align-center">
+          <AppAvatar class="mr-12" shape="square" :size="32">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+          <h4 class="ellipsis-1">应用</h4>
+          <div class="ml-8">
+            <el-tag class="warning-tag">已停用</el-tag>
+            <el-tag class="success-tag">运行中</el-tag>
+          </div>
+        </div>
+        <div class="active-button" @click.stop>
+          <el-switch />
+        </div>
+        <el-row class="mt-16">
+          <el-col :span="12">
+            <el-text type="info">公开访问链接</el-text>
+            <div class="mt-4">
+              <span class="vertical-middle lighter">
+                https:/fit2cloud.com/xlab-fit2cloud/smart-doc/16826
+              </span>
+
+              <el-button type="primary" text>
+                <el-icon style="font-size: 13px"><CopyDocument /></el-icon>
+              </el-button>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <el-text type="info">API访问凭据</el-text>
+            <div class="mt-4">
+              <span class="vertical-middle lighter">
+                API Key: OGZmZThlZjYyYzU2MWE1OTlkYTVjZTBi
+              </span>
+
+              <el-button type="primary" text>
+                <el-icon style="font-size: 13px"><CopyDocument /></el-icon>
+              </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>
+                </el-button>
+              </span>
+              <span>
+                <el-button type="primary" text>
+                  <AppIcon iconName="app-hide-password" />
+                </el-button>
+              </span>
+            </div>
+          </el-col>
+        </el-row>
+        <div class="mt-16">
+          <el-button type="primary"> 演示 </el-button>
+          <el-button> 嵌入第三方 </el-button>
+        </div>
+      </el-card>
+    </div>
+  </LayoutContainer>
 </template>
-<script setup lang="ts">
-</script>
-<style lang="scss" scoped></style>
+<script setup lang="ts"></script>
+<style lang="scss" scoped>
+.overview-card {
+  position: relative;
+  .active-button {
+    position: absolute;
+    right: 16px;
+    top: 21px;
+  }
+}
+</style>
diff --git a/ui/src/views/application/AppSetting.vue b/ui/src/views/application/AppSetting.vue
deleted file mode 100644
index c0782e516..000000000
--- a/ui/src/views/application/AppSetting.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div>
-  设置
-  </div>
-</template>
-<script setup lang="ts">
-</script>
-<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/CreateApplication.vue b/ui/src/views/application/CreateAndSetting.vue
similarity index 79%
rename from ui/src/views/application/CreateApplication.vue
rename to ui/src/views/application/CreateAndSetting.vue
index 915838091..74c51c7b5 100644
--- a/ui/src/views/application/CreateApplication.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer header="创建应用" back-to="-1" class="create-application">
+  <LayoutContainer :header="appId ? '设置' : '创建应用'" back-to="-1" class="create-application">
     <el-row>
       <el-col :span="10">
         <div class="p-24 mb-16" style="padding-bottom: 0">
@@ -34,11 +34,12 @@
                   show-word-limit
                 />
               </el-form-item>
-
-              <div v-html="realatedProvider('model_azure_provider', 'icon')"></div>
-
               <el-form-item label="选择模型" prop="model_id">
-                <el-select v-model="applicationForm.model_id" placeholder="请选择模型">
+                <el-select
+                  v-model="applicationForm.model_id"
+                  placeholder="请选择模型"
+                  style="width: 100%"
+                >
                   <el-option-group
                     v-for="(value, label) in modelOptions"
                     :key="value"
@@ -49,16 +50,30 @@
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"
+                      class="flex-between"
                     >
-                      <div v-html="realatedProvider(label, 'icon')" class="model-icon"></div>
-                      <span>{{ item.name }}</span>
+                      <div class="flex">
+                        <span
+                          v-html="realatedProvider(label, 'icon')"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                      </div>
+                      <el-icon class="check-icon" v-if="item.id === applicationForm.model_id"
+                        ><Check
+                      /></el-icon>
                     </el-option>
                   </el-option-group>
+                  <div class="border-t" style="padding: 8px 11px">
+                    <el-button type="primary" link>
+                      <el-icon class="mr-4"><Plus /></el-icon> 添加模型
+                    </el-button>
+                  </div>
                 </el-select>
               </el-form-item>
 
-              <el-form-item label="多轮对话">
-                <el-switch v-model="applicationForm.multiple_rounds_dialogue" />
+              <el-form-item label="多轮对话" @click.prevent>
+                <el-switch v-model="applicationForm.multiple_rounds_dialogue"></el-switch>
               </el-form-item>
               <el-form-item label="关联数据集">
                 <template #label>
@@ -131,13 +146,21 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { groupBy } from 'lodash'
 import AiDialog from '@/components/ai-dialog/index.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
+import type { Provider } from '@/api/type/model'
 import useStore from '@/stores'
 const { model } = useStore()
 
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { appId }
+} = route as any
+
 const applicationFormRef = ref<FormInstance>()
 
 const loading = ref(false)
@@ -162,8 +185,8 @@ const rules = reactive<FormRules<ApplicationFormType>>({
     }
   ]
 })
-const modelOptions = ref([])
-const providerOptions = ref([])
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
 
 watch(exampleList.value, () => {
   applicationForm.example = exampleList.value.filter((v) => v)
@@ -173,9 +196,8 @@ function getModel() {
   loading.value = true
   model
     .asyncGetModel()
-    .then((res) => {
+    .then((res: any) => {
       modelOptions.value = groupBy(res?.data, 'provider')
-      console.log(modelOptions.value)
       loading.value = false
     })
     .catch(() => {
@@ -187,7 +209,7 @@ function getProvider() {
   loading.value = true
   model
     .asyncGetProvider()
-    .then((res) => {
+    .then((res: any) => {
       providerOptions.value = res?.data
       loading.value = false
     })
@@ -196,9 +218,10 @@ function getProvider() {
     })
 }
 
-function realatedProvider(val, attr) {
-  const filterProvider = providerOptions.value.filter((item) => item.provider === val)?.[0]
-  console.log(filterProvider)
+function realatedProvider(val: string | number, attr: string) {
+  const filterProvider: any = providerOptions.value.filter(
+    (item: any) => item.provider === val
+  )?.[0]
   return filterProvider?.[attr] || ''
 }
 
@@ -220,16 +243,17 @@ onMounted(() => {
     box-sizing: border-box;
   }
   .scrollbar-height-left {
-    height: calc(var(--app-main-height) - 100px);
+    height: calc(var(--app-main-height) - 127px);
   }
   .scrollbar-height {
     height: calc(var(--app-main-height) - 150px);
   }
-
 }
 .model-icon {
-    svg {
-      width: 30px;
-    }
-  }
+  width: 20px;
+}
+.check-icon {
+  position: absolute;
+  right: 10px;
+}
 </style>
diff --git a/ui/src/views/application/components/AddDatasetDialog.vue b/ui/src/views/application/components/AddDatasetDialog.vue
new file mode 100644
index 000000000..ff8f05153
--- /dev/null
+++ b/ui/src/views/application/components/AddDatasetDialog.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-dialog title="添加关联数据集" v-model="dialogVisible" width="600">
+    <el-row :gutter="12">
+      <el-col :span="12">
+        <el-card shadow="hover"> Hover </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover"> Hover </el-card>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitHandle"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const emit = defineEmits(['updateContent'])
+
+const dialogVisible = ref<boolean>(false)
+
+const detail = ref({})
+
+const paragraphFormRef = ref()
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    detail.value = {}
+  }
+})
+
+const open = (data: any) => {
+  dialogVisible.value = true
+}
+const submitHandle = async () => {
+  if (await paragraphFormRef.value?.validate()) {
+    emit('updateContent', paragraphFormRef.value?.form)
+    dialogVisible.value = false
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 85f720eb3..a77815679 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -128,9 +128,9 @@ function getList() {
     .getApplication(pageConfig)
     .then((res) => {
       const list = res.data?.records
-      list.map((item) => {
+      list.map((item: any) => {
         applicationList.value.push({
-          value:item.provider,
+          value: item.provider,
           label: item.name
         })
       })