From d8c2dfd9832d1d0a2fbf80197daf5af6c516dbff Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 29 Nov 2023 17:34:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/application.ts                | 27 +++++++++++-
 ui/src/router/routes.ts                  |  6 +++
 ui/src/stores/modules/application.ts     | 17 +++++++-
 ui/src/styles/app.scss                   |  3 ++
 ui/src/views/application/AppOverview.vue | 52 +++++++++++++++++++++---
 ui/src/views/chat/index.vue              | 36 ++++++++++++++++
 6 files changed, 133 insertions(+), 8 deletions(-)
 create mode 100644 ui/src/views/chat/index.vue

diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
index e3db14888..fe1cd7e25 100644
--- a/ui/src/api/application.ts
+++ b/ui/src/api/application.ts
@@ -133,6 +133,29 @@ const getApplicationDataset: (
 ) => Promise<Result<any>> = (applicaiton_id, loading) => {
   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
+ */
+const getAccessToken: (applicaiton_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  applicaiton_id,
+  loading
+) => {
+  return get(`${prefix}/${applicaiton_id}/access-token`, undefined, loading)
+}
+
 export default {
   getAllAppilcation,
   getApplication,
@@ -142,5 +165,7 @@ export default {
   postChatMessage,
   delApplication,
   getApplicationDetail,
-  getApplicationDataset
+  getApplicationDataset,
+  getAPIKey,
+  getAccessToken
 }
diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts
index b894a7405..5884daf1a 100644
--- a/ui/src/router/routes.ts
+++ b/ui/src/router/routes.ts
@@ -21,6 +21,12 @@ export const routes: Array<RouteRecordRaw> = [
     ]
   },
 
+  {
+    path: '/chat/:accessToken',
+    name: 'Chat',
+    component: () => import('@/views/chat/index.vue')
+  },
+
   {
     path: '/login',
     name: 'login',
diff --git a/ui/src/stores/modules/application.ts b/ui/src/stores/modules/application.ts
index c6ce9dec5..cf7879973 100644
--- a/ui/src/stores/modules/application.ts
+++ b/ui/src/stores/modules/application.ts
@@ -4,7 +4,9 @@ import { type Ref } from 'vue'
 
 const useApplicationStore = defineStore({
   id: 'application',
-  state: () => ({}),
+  state: () => ({
+    location: `${window.location.origin}/ui/chat/`
+  }),
   actions: {
     async asyncGetAllApplication() {
       return new Promise((resolve, reject) => {
@@ -30,6 +32,19 @@ const useApplicationStore = defineStore({
             reject(error)
           })
       })
+    },
+
+    async asyncGetAccessToken(id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        applicationApi
+          .getAccessToken(id, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
     }
   }
 })
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 27f4ba85a..229583ea0 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -132,6 +132,9 @@ h4 {
 .ml-16 {
   margin-left: calc(var(--app-base-px) * 2);
 }
+.ml-24 {
+  margin-left: calc(var(--app-base-px) * 3);
+}
 .mr-4 {
   margin-right: calc(var(--app-base-px) - 4px);
 }
diff --git a/ui/src/views/application/AppOverview.vue b/ui/src/views/application/AppOverview.vue
index f738c35ec..1714adb30 100644
--- a/ui/src/views/application/AppOverview.vue
+++ b/ui/src/views/application/AppOverview.vue
@@ -7,10 +7,10 @@
           <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>
+          <h4 class="ellipsis-1">{{ detail?.name }}</h4>
+          <div class="ml-8" v-if="detail">
+            <el-tag v-if="detail?.status" class="success-tag">运行中</el-tag>
+            <el-tag v-else class="warning-tag">已停用</el-tag>
           </div>
         </div>
         <div class="active-button" @click.stop>
@@ -21,7 +21,7 @@
             <el-text type="info">公开访问链接</el-text>
             <div class="mt-4">
               <span class="vertical-middle lighter">
-                https:/fit2cloud.com/xlab-fit2cloud/smart-doc/16826
+                {{ shareUrl }}
               </span>
 
               <el-button type="primary" text>
@@ -63,7 +63,47 @@
     </div>
   </LayoutContainer>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import applicationApi from '@/api/application'
+import useStore from '@/stores'
+const { application } = useStore()
+const router = useRouter()
+const route = useRoute()
+
+const shareUrl = ref('')
+const detail = ref<any>(null)
+const apiKey = ref<any>(null)
+const {
+  params: { id }
+} = route as any
+
+const loading = ref(false)
+
+function getAccessToken() {
+  application.asyncGetAccessToken(id, loading).then((res) => {
+    shareUrl.value = application.location + res.data
+  })
+}
+
+function getApiKey() {
+  applicationApi.getAPIKey(id, loading).then((res) => {
+    apiKey.value = res.data
+  })
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id, loading).then((res: any) => {
+    detail.value = res.data
+  })
+}
+onMounted(() => {
+  getDetail()
+  getApiKey()
+  getAccessToken()
+})
+</script>
 <style lang="scss" scoped>
 .overview-card {
   position: relative;
diff --git a/ui/src/views/chat/index.vue b/ui/src/views/chat/index.vue
new file mode 100644
index 000000000..c5c4bd504
--- /dev/null
+++ b/ui/src/views/chat/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="chat">
+    <div class="chat__header">
+      <div class="chat-width"><h2 class="ml-24">111</h2></div>
+    </div>
+    <div class="chat__main chat-width"><AiDialog></AiDialog></div>
+  </div>
+</template>
+<script setup lang="ts">
+import AiDialog from '@/components/ai-dialog/index.vue'
+</script>
+<style lang="scss" scoped>
+.chat {
+  background-color: var(--app-layout-bg-color);
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    padding: var(--app-header-padding);
+  }
+  &__main {
+    padding-top: calc(var(--app-header-height) + 24px);
+    height: calc(100vh - var(--app-header-height) - 24px);
+  }
+  .chat-width {
+    width: 840px;
+    margin: 0 auto;
+  }
+}
+</style>