From 78e372fa21a7ac843b41eb382e8427597f2a09f1 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 8 Dec 2023 16:55:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/application-overview.ts            |  63 +++++++++
 ui/src/api/application.ts                     |  28 ++--
 ui/src/request/index.ts                       |   2 +-
 ui/src/router/modules/application.ts          |   2 +-
 .../component/APIKeyDialog.vue                | 124 ++++++++++++++++++
 .../component}/EmbedDialog.vue                |   0
 .../index.vue}                                |  68 ++++++----
 ui/src/views/document/index.vue               |   4 +-
 8 files changed, 251 insertions(+), 40 deletions(-)
 create mode 100644 ui/src/api/application-overview.ts
 create mode 100644 ui/src/views/applicaiton-overview/component/APIKeyDialog.vue
 rename ui/src/views/{application/components => applicaiton-overview/component}/EmbedDialog.vue (100%)
 rename ui/src/views/{application/AppOverview.vue => applicaiton-overview/index.vue} (63%)

diff --git a/ui/src/api/application-overview.ts b/ui/src/api/application-overview.ts
new file mode 100644
index 000000000..361990193
--- /dev/null
+++ b/ui/src/api/application-overview.ts
@@ -0,0 +1,63 @@
+import { Result } from '@/request/Result'
+import { get, post, postStream, del, put } from '@/request/index'
+
+import { type Ref } from 'vue'
+
+const prefix = '/application'
+
+/**
+ * API_KEY列表
+ * @param 参数 applicaiton_id
+ */
+const getAPIKey: (applicaiton_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  applicaiton_id,
+  loading
+) => {
+  return get(`${prefix}/${applicaiton_id}/api_key`, undefined, loading)
+}
+
+/**
+ * 新增API_KEY
+ * @param 参数 applicaiton_id
+ */
+const postAPIKey: (applicaiton_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  applicaiton_id,
+  loading
+) => {
+  return post(`${prefix}/${applicaiton_id}/api_key`, {}, undefined, loading)
+}
+
+/**
+ * 删除API_KEY
+ * @param 参数 applicaiton_id api_key_id
+ */
+const delAPIKey: (
+  applicaiton_id: String,
+  api_key_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (applicaiton_id, api_key_id, loading) => {
+  return del(`${prefix}/${applicaiton_id}/api_key/${api_key_id}`, undefined, undefined, loading)
+}
+
+/**
+ * 修改API_KEY
+ * @param 参数 applicaiton_id,api_key_id
+ * data {
+ *   is_active: boolean
+ * }
+ */
+const putAPIKey: (
+  applicaiton_id: string,
+  api_key_id: String,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (applicaiton_id, api_key_id, data, loading) => {
+  return put(`${prefix}/${applicaiton_id}/api_key/${api_key_id}`, data, undefined, loading)
+}
+
+export default {
+  getAPIKey,
+  postAPIKey,
+  delAPIKey,
+  putAPIKey
+}
diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
index 9569cd119..0b1b60c5a 100644
--- a/ui/src/api/application.ts
+++ b/ui/src/api/application.ts
@@ -111,17 +111,6 @@ const getApplicationDataset: (
   return get(`${prefix}/${applicaiton_id}/list_dataset`, undefined, loading)
 }
 
-/**
- * API_KEY列表
- * @param 参数 applicaiton_id
- */
-const getAPIKey: (applicaiton_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
-  applicaiton_id,
-  loading
-) => {
-  return get(`${prefix}/${applicaiton_id}/api_key`, undefined, loading)
-}
-
 /**
  * 获取AccessToken
  * @param 参数 applicaiton_id
@@ -133,6 +122,21 @@ const getAccessToken: (applicaiton_id: string, loading?: Ref<boolean>) => Promis
   return get(`${prefix}/${applicaiton_id}/access_token`, undefined, loading)
 }
 
+/**
+ * 修改AccessToken
+ * @param 参数 applicaiton_id
+ * data {
+ *  "is_active": true
+ * }
+ */
+const putAccessToken: (
+  applicaiton_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (applicaiton_id, data, loading) => {
+  return put(`${prefix}/${applicaiton_id}/access_token`, data, undefined, loading)
+}
+
 /**
  * 应用认证
  * @param 参数 
@@ -235,8 +239,8 @@ export default {
   delApplication,
   getApplicationDetail,
   getApplicationDataset,
-  getAPIKey,
   getAccessToken,
+  putAccessToken,
   postAppAuthentication,
   getProfile,
   putChatVote
diff --git a/ui/src/request/index.ts b/ui/src/request/index.ts
index cb586b305..e016c62d3 100644
--- a/ui/src/request/index.ts
+++ b/ui/src/request/index.ts
@@ -141,8 +141,8 @@ export const post: (
  */
 export const put: (
   url: string,
-  params?: unknown,
   data?: unknown,
+  params?: unknown,
   loading?: NProgress | Ref<boolean>
 ) => Promise<Result<any>> = (url, data, params, loading) => {
   return promise(request({ url: url, method: 'put', data, params }), loading)
diff --git a/ui/src/router/modules/application.ts b/ui/src/router/modules/application.ts
index f3a89140e..20afe834f 100644
--- a/ui/src/router/modules/application.ts
+++ b/ui/src/router/modules/application.ts
@@ -35,7 +35,7 @@ const applicationRouter = {
             parentPath: '/application/:id',
             parentName: 'ApplicationDetail'
           },
-          component: () => import('@/views/application/AppOverview.vue')
+          component: () => import('@/views/applicaiton-overview/index.vue')
         },
         {
           path: 'setting', 
diff --git a/ui/src/views/applicaiton-overview/component/APIKeyDialog.vue b/ui/src/views/applicaiton-overview/component/APIKeyDialog.vue
new file mode 100644
index 000000000..0057c6b0a
--- /dev/null
+++ b/ui/src/views/applicaiton-overview/component/APIKeyDialog.vue
@@ -0,0 +1,124 @@
+<template>
+  <el-dialog title="API Key" v-model="dialogVisible" width="800">
+    <el-button type="primary" class="mb-16" @click="createApiKey"> 创建 </el-button>
+    <el-table :data="apiKey" class="mb-16" :loading="loading">
+      <el-table-column prop="secret_key" label="API Key">
+        <template #default="{ row }">
+          <span class="vertical-middle lighter break-all">
+            {{ row.secret_key }}
+          </span>
+          <el-button type="primary" text @click="copyClick(row.secret_key)">
+            <AppIcon iconName="app-copy"></AppIcon>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <div @click.stop>
+            <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="创建日期" width="170">
+        <template #default="{ row }">
+          {{ datetimeFormat(row.create_time) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="80">
+        <template #default="{ row }">
+          <el-tooltip effect="dark" content="删除" placement="top">
+            <el-button type="primary" text @click="deleteApiKey(row)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { copyClick } from '@/utils/clipboard'
+import overviewApi from '@/api/application-overview'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import useStore from '@/stores'
+const route = useRoute()
+const {
+  params: { id }
+} = route
+const { application } = useStore()
+
+const emit = defineEmits(['addData'])
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const apiKey = ref<any>(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    apiKey.value = null
+  }
+})
+
+function deleteApiKey(row: any) {
+  MsgConfirm(
+    `是否删除API Key：${row.secret_key} ?`,
+    `删除后无法使用该 API Key 调用接口，请谨慎操作`,
+    {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      overviewApi.delAPIKey(id as string, row.id, loading).then(() => {
+        MsgSuccess('删除成功')
+        getApiKeyList()
+      })
+    })
+    .catch(() => {})
+}
+
+function changeState(bool: Boolean, row: any) {
+  const obj = {
+    is_active: bool
+  }
+  const str = bool ? '启用成功' : '禁用成功'
+  overviewApi.putAPIKey(id as string, row.id, obj, loading).then((res) => {
+    MsgSuccess(str)
+    getApiKeyList()
+  })
+}
+
+function createApiKey() {
+  overviewApi.postAPIKey(id as string, loading).then((res) => {
+    getApiKeyList()
+  })
+}
+
+const open = () => {
+  getApiKeyList()
+  dialogVisible.value = true
+}
+
+function getApiKeyList() {
+  overviewApi.getAPIKey(id as string, loading).then((res) => {
+    apiKey.value = res.data
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.embed-dialog {
+  .code {
+    color: var(--app-text-color) !important;
+    background: var(--app-layout-bg-color);
+    font-weight: 400;
+    font-size: 13px;
+    white-space: pre;
+    height: 180px;
+  }
+}
+</style>
diff --git a/ui/src/views/application/components/EmbedDialog.vue b/ui/src/views/applicaiton-overview/component/EmbedDialog.vue
similarity index 100%
rename from ui/src/views/application/components/EmbedDialog.vue
rename to ui/src/views/applicaiton-overview/component/EmbedDialog.vue
diff --git a/ui/src/views/application/AppOverview.vue b/ui/src/views/applicaiton-overview/index.vue
similarity index 63%
rename from ui/src/views/application/AppOverview.vue
rename to ui/src/views/applicaiton-overview/index.vue
index 55886b277..df0bb1b23 100644
--- a/ui/src/views/application/AppOverview.vue
+++ b/ui/src/views/applicaiton-overview/index.vue
@@ -2,7 +2,7 @@
   <LayoutContainer header="概览">
     <div class="main-calc-height p-24">
       <h4 class="title-decoration-1 mb-16">应用信息</h4>
-      <el-card shadow="never" class="overview-card">
+      <el-card shadow="never" class="overview-card" v-loading="loading">
         <div class="title flex align-center">
           <AppAvatar
             v-if="detail?.name"
@@ -20,15 +20,17 @@
             <div class="flex">
               <el-text type="info">公开访问链接</el-text>
               <el-switch
+                v-model="accessToken.is_active"
                 class="ml-8"
                 size="small"
                 inline-prompt
                 active-text="开"
                 inactive-text="关"
+                @change="changeState"
               />
             </div>
 
-            <div class="mt-4">
+            <div class="mt-4 url-height">
               <span class="vertical-middle lighter break-all">
                 {{ shareUrl }}
               </span>
@@ -36,40 +38,46 @@
               <el-button type="primary" text @click="copyClick(shareUrl)">
                 <AppIcon iconName="app-copy"></AppIcon>
               </el-button>
+              <el-button @click="getAccessToken" type="primary" text style="margin-left: 1px">
+                <el-icon><RefreshRight /></el-icon>
+              </el-button>
             </div>
-            <div class="mt-16">
-              <el-button type="primary"><a :href="shareUrl" target="_blank">演示</a></el-button>
-              <el-button @click="openDialog"> 嵌入第三方 </el-button>
+            <div>
+              <el-button :disabled="!accessToken?.is_active" type="primary"><a :href="shareUrl" target="_blank">演示</a></el-button>
+              <el-button :disabled="!accessToken?.is_active" @click="openDialog"> 嵌入第三方 </el-button>
             </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mt-16">
             <div class="flex">
               <el-text type="info">API访问凭据</el-text>
             </div>
-            <div class="mt-4">
+            <div class="mt-4 url-height">
               <span class="vertical-middle lighter break-all">
-                API Key: OGZmZThlZjYyYzU2MWE1OTlkYTVjZTBi
+                {{ apiUrl }}
               </span>
 
-              <el-button type="primary" text>
+              <el-button type="primary" text @click="copyClick(apiUrl)">
                 <AppIcon iconName="app-copy"></AppIcon>
               </el-button>
             </div>
-            <div class="mt-16">
-              <el-button @click="openDialog"> 获取密钥 </el-button>
+            <div>
+              <el-button @click="openAPIKeyDialog"> API Key </el-button>
             </div>
           </el-col>
         </el-row>
       </el-card>
     </div>
     <EmbedDialog ref="EmbedDialogRef" />
+    <APIKeyDialog ref="APIKeyDialogRef" />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import EmbedDialog from './component/EmbedDialog.vue'
+import APIKeyDialog from './component/APIKeyDialog.vue'
 import applicationApi from '@/api/application'
-import EmbedDialog from './components/EmbedDialog.vue'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { copyClick } from '@/utils/clipboard'
 import useStore from '@/stores'
 const { application } = useStore()
@@ -79,27 +87,37 @@ const {
   params: { id }
 } = route as any
 
+const apiUrl = window.location.origin + '/doc'
+
+const APIKeyDialogRef = ref()
 const EmbedDialogRef = ref()
 const shareUrl = ref('')
-const accessToken = ref('')
+const accessToken = ref<any>({})
 const detail = ref<any>(null)
-const apiKey = ref<any>(null)
 
 const loading = ref(false)
 
-function openDialog() {
-  EmbedDialogRef.value.open(accessToken.value)
-}
-function getAccessToken() {
-  application.asyncGetAccessToken(id, loading).then((res: any) => {
-    accessToken.value = res?.data?.access_token
-    shareUrl.value = application.location + res?.data?.access_token
+function changeState(bool: Boolean) {
+  const obj = {
+    is_active: bool
+  }
+  const str = bool ? '启用成功' : '禁用成功'
+  applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
+    MsgSuccess(str)
+    getDetail()
   })
 }
 
-function getApiKey() {
-  applicationApi.getAPIKey(id, loading).then((res) => {
-    apiKey.value = res.data
+function openAPIKeyDialog() {
+  APIKeyDialogRef.value.open()
+}
+function openDialog() {
+  EmbedDialogRef.value.open(accessToken.value?.access_token)
+}
+function getAccessToken() {
+  application.asyncGetAccessToken(id, loading).then((res: any) => {
+    accessToken.value = res?.data
+    shareUrl.value = application.location + res?.data?.access_token
   })
 }
 
@@ -110,7 +128,6 @@ function getDetail() {
 }
 onMounted(() => {
   getDetail()
-  getApiKey()
   getAccessToken()
 })
 </script>
@@ -122,5 +139,8 @@ onMounted(() => {
     right: 16px;
     top: 21px;
   }
+  .url-height {
+    min-height: 50px;
+  }
 }
 </style>
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index 882ea3bd5..27c58794d 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -57,7 +57,7 @@
               </el-text>
             </template>
           </el-table-column>
-          <el-table-column prop="name" label="启用状态">
+          <el-table-column label="启用状态">
             <template #default="{ row }">
               <div @click.stop>
                 <el-switch
@@ -78,7 +78,7 @@
               {{ datetimeFormat(row.update_time) }}
             </template>
           </el-table-column>
-          <el-table-column prop="name" label="操作" align="center">
+          <el-table-column label="操作" align="center">
             <template #default="{ row }">
               <span v-if="row.status === 2">
                 <el-tooltip effect="dark" content="刷新" placement="top">