From f9a23f8ee136ab44a8a4bb3422739be7db6ca6bd Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 17 May 2024 15:01:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/icons/index.ts | 25 +++++++++++++++++++++++++
 ui/src/styles/app.scss           |  3 +++
 ui/src/views/chat/pc/index.vue   | 32 ++++++++++++++++++++++----------
 3 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index 88dd8fd3c..19bc84375 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -823,5 +823,30 @@ export const iconMap: any = {
         )
       ])
     }
+  },
+  'app-chat-record': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M11.3333 7.33334C11.3333 6.96515 11.6318 6.66667 12 6.66667H14.6667C15.0349 6.66667 15.3333 6.96515 15.3333 7.33334V12.6667C15.3333 13.0349 15.0349 13.3333 14.6667 13.3333H13.2761L12.4714 14.1381C12.2111 14.3984 11.7889 14.3984 11.5286 14.1381L10.7239 13.3333H7.33334C6.96515 13.3333 6.66667 13.0349 6.66667 12.6667V10C6.66667 9.63182 6.96515 9.33334 7.33334 9.33334H11.3333V7.33334ZM12.6667 8.00001V10C12.6667 10.3682 12.3682 10.6667 12 10.6667H8.00001V12H11C11.1768 12 11.3464 12.0702 11.4714 12.1953L12 12.7239L12.5286 12.1953C12.6536 12.0702 12.8232 12 13 12H14V8.00001H12.6667Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M1.33334 1.33333C0.965149 1.33333 0.666672 1.63181 0.666672 1.99999V10C0.666672 10.3682 0.965149 10.6667 1.33334 10.6667H2.72386L3.86193 11.8047C4.12228 12.0651 4.54439 12.0651 4.80474 11.8047L5.94281 10.6667H12C12.3682 10.6667 12.6667 10.3682 12.6667 10V1.99999C12.6667 1.63181 12.3682 1.33333 12 1.33333H1.33334ZM4.66667 5.99999C4.66667 6.36818 4.36819 6.66666 4.00001 6.66666C3.63182 6.66666 3.33334 6.36818 3.33334 5.99999C3.33334 5.6318 3.63182 5.33333 4.00001 5.33333C4.36819 5.33333 4.66667 5.6318 4.66667 5.99999ZM7.33334 5.99999C7.33334 6.36818 7.03486 6.66666 6.66667 6.66666C6.29848 6.66666 6 6.36818 6 5.99999C6 5.6318 6.29848 5.33333 6.66667 5.33333C7.03486 5.33333 7.33334 5.6318 7.33334 5.99999ZM10 5.99999C10 6.36818 9.70153 6.66666 9.33334 6.66666C8.96515 6.66666 8.66667 6.36818 8.66667 5.99999C8.66667 5.6318 8.96515 5.33333 9.33334 5.33333C9.70153 5.33333 10 5.6318 10 5.99999Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
   }
 }
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 707d4fb2c..0e15126dc 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -184,6 +184,9 @@ h4 {
 .p-24 {
   padding: calc(var(--app-base-px) * 3);
 }
+.p-16-24 {
+  padding: calc(var(--app-base-px) * 2) calc(var(--app-base-px) * 3);
+}
 
 .pt-0 {
   padding-top: 0;
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
index 84023faf5..49222c3a5 100644
--- a/ui/src/views/chat/pc/index.vue
+++ b/ui/src/views/chat/pc/index.vue
@@ -4,7 +4,7 @@
       <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
     </div>
     <div class="flex">
-      <div class="chat-pc__left">
+      <div class="chat-pc__left border-r">
         <div class="p-24 pb-0">
           <el-button class="add-button w-full primary" @click="newChat">
             <el-icon><Plus /></el-icon><span class="ml-4">新建对话</span>
@@ -33,6 +33,13 @@
         </div>
       </div>
       <div class="chat-pc__right">
+        <div class="right-header border-b mb-24 p-16-24 flex-between">
+          <h4>{{ currentChatName }}</h4>
+          <span v-if="currentRecordList.length" class="flex align-center">
+            <AppIcon iconName="app-chat-record" class="info mr-8" style="font-size: 16px"></AppIcon>
+            <span class="lighter"> {{ currentRecordList.length }} 条提问 </span>
+          </span>
+        </div>
         <div class="right-height">
           <AiChat
             v-model:data="applicationDetail"
@@ -60,6 +67,11 @@ const {
 
 const { application, user, log } = useStore()
 
+const newObj = {
+  id: 'new',
+  abstract: '新建对话'
+}
+
 const loading = ref(false)
 const applicationDetail = ref<any>({})
 const applicationAvailable = ref<boolean>(true)
@@ -73,6 +85,7 @@ const paginationConfig = reactive({
 
 const currentRecordList = ref<any>([])
 const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
+const currentChatName = ref('新建对话')
 
 function getAccessToken(token: string) {
   application
@@ -100,16 +113,13 @@ function newChat() {
   if (!chatLogeData.value.some((v) => v.id === 'new')) {
     paginationConfig.current_page = 1
     currentRecordList.value = []
-
-    chatLogeData.value.unshift({
-      id: 'new',
-      abstract: '新的对话'
-    })
+    chatLogeData.value.unshift(newObj)
   } else {
     paginationConfig.current_page = 1
     currentRecordList.value = []
   }
   currentChatId.value = 'new'
+  currentChatName.value = '新建对话'
 }
 
 function getChatLog(id: string) {
@@ -139,6 +149,7 @@ const clickListHandle = (item: any) => {
   paginationConfig.current_page = 1
   currentRecordList.value = []
   currentChatId.value = item.id
+  currentChatName.value = item.abstract
   if (currentChatId.value !== 'new') {
     getChatRecord()
   }
@@ -172,7 +183,6 @@ onMounted(() => {
   }
   &__left {
     padding-top: calc(var(--app-header-height) - 8px);
-
     background: #ffffff;
     width: 280px;
     .add-button {
@@ -184,12 +194,14 @@ onMounted(() => {
   }
   &__right {
     width: calc(100% - 280px);
-    padding-top: calc(var(--app-header-height) + 24px);
-
+    padding-top: calc(var(--app-header-height));
     overflow: hidden;
     position: relative;
+    .right-header {
+      background: #ffffff;
+    }
     .right-height {
-      height: calc(100vh - var(--app-header-height) - 24px);
+      height: calc(100vh - var(--app-header-height) * 2 - 24px);
     }
   }