refactor: chatHistoryDrawer

ui/src/views/chat/embed/index.vue

@@ -3,7 +3,7 @@
     class="chat-embed layout-bg chat-background"
     :class="{ 'chat-embed--popup': isPopup }"
     v-loading="loading"
-    :style="{
+        :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
       '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
       backgroundImage: `url(${applicationDetail?.chat_background})`,
@@ -15,7 +15,7 @@
         <AppIcon
           iconName="app-history-outlined"
           style="font-size: 20px"
-          class="ml-16"
+          class="ml-16 cursor"
           :style="{
             color: applicationDetail?.custom_theme?.header_font_color,
           }"
@@ -60,95 +60,11 @@
         </AiChat>
       </div>
 
-      <el-drawer
-        v-model="show"
-        :with-header="false"
-        class="left-drawer"
-        direction="ltr"
-        :size="280"
-      >
-        <div>
-          <div class="flex align-center mb-16">
-            <div class="flex mr-8">
-              <el-avatar
-                v-if="isAppIcon(applicationDetail?.icon)"
-                shape="square"
-                :size="32"
-                style="background: none"
-              >
-                <img :src="applicationDetail?.icon" alt="" />
-              </el-avatar>
-              <LogoIcon v-else height="32px" />
-            </div>
-            <h4>{{ applicationDetail?.name }}</h4>
-          </div>
-          <el-button class="add-button w-full primary" @click="newChat">
-            <AppIcon iconName="app-create-chat"></AppIcon>
-            <span class="ml-4">{{ $t('chat.createChat') }}</span>
-          </el-button>
-          <p class="mt-20 mb-8">{{ $t('chat.history') }}</p>
-        </div>
-
-        <div class="left-height pt-0">
-          <el-scrollbar>
-            <div>
-              <common-list
-                :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
-                :data="chatLogData"
-                v-loading="left_loading"
-                :defaultActive="currentChatId"
-                @click="clickListHandle"
-                @mouseenter="mouseenter"
-                @mouseleave="mouseId = ''"
-              >
-                <template #default="{ row }">
-                  <div class="flex-between">
-                    <ReadWrite
-                      @change="editName($event, row)"
-                      :data="row.abstract"
-                      trigger="manual"
-                      :write="row.writeStatus"
-                      @close="closeWrite(row)"
-                      :maxlength="1024"
-                    />
-                    <div
-                      @click.stop
-                      v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus"
-                      class="flex"
-                    >
-                      <el-button style="padding: 0" link @click.stop="openWrite(row)">
-                        <el-icon><EditPen /></el-icon>
-                      </el-button>
-                      <el-button style="padding: 0" link @click.stop="deleteLog(row)">
-                        <el-icon><Delete /></el-icon>
-                      </el-button>
-                    </div>
-                  </div>
-                </template>
-                <template #empty>
-                  <div class="text-center mt-24">
-                    <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
-                  </div>
-                </template>
-              </common-list>
-            </div>
-            <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
-              <span>{{ $t('chat.only20history') }}</span>
-            </div>
-          </el-scrollbar>
-        </div>
-        <div class="flex align-center user-info" @click="toUserCenter">
-          <el-avatar :size="32">
-            <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
-          </el-avatar>
-          <span v-if="chatUser.chat_profile?.authentication" class="ml-8 color-text-primary">{{
-            chatUser.chatUserProfile?.nick_name
-          }}</span>
-        </div>
-      </el-drawer>
+     <ChatHistoryDrawer v-model:show="show" :application-detail="applicationDetail" :chat-log-data="chatLogData"
+        :left-loading="left_loading" :currentChatId="currentChatId" @new-chat="newChat"
+        @clickLog="clickListHandle" @delete-log="deleteLog" />
     </div>
 
-    <UserCenter v-model:show="userCenterDrawerShow" />
   </div>
 </template>
 <script setup lang="ts">
@@ -156,13 +72,12 @@ import { ref, onMounted, reactive, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { isAppIcon } from '@/utils/common'
 import { hexToRgba } from '@/utils/theme'
-import { MsgError } from '@/utils/message'
 import useStore from '@/stores'
 import { t } from '@/locales'
-import UserCenter from '../mobile/component/UserCenter.vue'
+import ChatHistoryDrawer from '../mobile/component/ChatHistoryDrawer.vue'
 import chatAPI from '@/api/chat/chat'
 
-const { user, chatLog, chatUser } = useStore()
+const { user, chatLog } = useStore()
 const route = useRoute()
 
 const isPopup = computed(() => {
@@ -192,7 +107,6 @@ const paginationConfig = reactive({
 const currentRecordList = ref<any>([])
 const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
 
-const mouseId = ref('')
 
 const customStyle = computed(() => {
   return {
@@ -201,34 +115,6 @@ const customStyle = computed(() => {
   }
 })
 
-function editName(val: string, item: any) {
-  if (val) {
-    const obj = {
-      abstract: val,
-    }
-    chatLog.asyncPutChatClientLog(applicationDetail.value.id, item.id, obj, loading).then(() => {
-      const find = chatLogData.value.find((row: any) => row.id === item.id)
-      if (find) {
-        find.abstract = val
-      }
-      item['writeStatus'] = false
-    })
-  } else {
-    MsgError(t('views.applicationWorkflow.tip.nameMessage'))
-  }
-}
-
-function openWrite(item: any) {
-  item['writeStatus'] = true
-}
-
-function closeWrite(item: any) {
-  item['writeStatus'] = false
-}
-
-function mouseenter(row: any) {
-  mouseId.value = row.id
-}
 function deleteLog(row: any) {
   chatLog.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
     if (currentChatId.value === row.id) {
@@ -340,12 +226,6 @@ const init = () => {
 onMounted(() => {
   init()
 })
-
-const userCenterDrawerShow = ref(false)
-function toUserCenter() {
-  if (!chatUser.chat_profile?.authentication) return
-  userCenterDrawerShow.value = true
-}
 </script>
 <style lang="scss">
 .chat-embed {
@@ -371,31 +251,6 @@ function toUserCenter() {
     z-index: 11;
     font-size: 1rem;
   }
-  // 历史对话弹出层
-  .left-drawer {
-    .el-drawer__body {
-      padding: 16px;
-      background:
-        linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
-        #eef1f4;
-      overflow: hidden;
-
-      .add-button {
-        border: 1px solid var(--el-color-primary);
-      }
-
-      .left-height {
-        height: calc(100vh - 212px);
-      }
-
-      .user-info {
-        border-radius: 6px;
-        padding: 4px 8px;
-        margin-top: 16px;
-        box-sizing: border-box;
-      }
-    }
-  }
  &.chat-embed--popup {
     .chat-popover-button {
       right: 85px;
@@ -412,29 +267,7 @@ function toUserCenter() {
     top: var(--app-header-height);
     z-index: 2008;
   }
-  .gradient-divider {
-    position: relative;
-    text-align: center;
-    color: var(--el-color-info);
-    ::before {
-      content: '';
-      width: 17%;
-      height: 1px;
-      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
-      position: absolute;
-      left: 16px;
-      top: 50%;
-    }
-    ::after {
-      content: '';
-      width: 17%;
-      height: 1px;
-      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
-      position: absolute;
-      right: 16px;
-      top: 50%;
-    }
-  }
+
   .AiChat-embed {
     .ai-chat__operate {
       padding-top: 12px;

ui/src/views/chat/mobile/component/ChatHistoryDrawer.vue

@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <el-drawer v-model="show" :with-header="false" class="left-drawer" direction="ltr" :size="280">
+      <div>
+        <div class="flex align-center mb-16">
+          <div class="flex mr-8">
+            <el-avatar v-if="isAppIcon(applicationDetail?.icon)" shape="square" :size="32" style="background: none">
+              <img :src="applicationDetail?.icon" alt="" />
+            </el-avatar>
+            <LogoIcon v-else height="32px" />
+          </div>
+          <h4>{{ applicationDetail?.name }}</h4>
+        </div>
+        <el-button size="large" class="add-button w-full primary" @click="emit('newChat')">
+          <AppIcon iconName="app-create-chat"></AppIcon>
+          <span class="ml-4">{{ $t('chat.createChat') }}</span>
+        </el-button>
+        <p class="mt-20 mb-8">{{ $t('chat.history') }}</p>
+      </div>
+
+      <div class="left-height pt-0">
+        <el-scrollbar>
+          <div>
+            <common-list :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+              :data="chatLogData" v-loading="leftLoading" :defaultActive="currentChatId" @click="handleClickList"
+              @mouseenter="mouseenter" @mouseleave="mouseId = ''">
+              <template #default="{ row }">
+                <div class="flex-between">
+                  <ReadWrite @change="val => updateChatName(val, row)" :data="row.abstract" trigger="manual"
+                    :write="row.writeStatus" @close="() => (row.writeStatus = false)" :maxlength="1024" />
+                  <div @click.stop v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus" class="flex">
+                    <el-button style="padding: 0" link @click.stop="() => (row.writeStatus = true)">
+                      <el-icon>
+                        <EditPen />
+                      </el-icon>
+                    </el-button>
+                    <el-button style="padding: 0" link @click.stop="() => deleteChatLog(row)">
+                      <el-icon>
+                        <Delete />
+                      </el-icon>
+                    </el-button>
+                  </div>
+                </div>
+              </template>
+              <template #empty>
+                <div class="text-center mt-24">
+                  <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
+                </div>
+              </template>
+            </common-list>
+          </div>
+          <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
+            <span>{{ $t('chat.only20history') }}</span>
+          </div>
+        </el-scrollbar>
+      </div>
+      <div class="flex align-center user-info" @click="toUserCenter">
+        <el-avatar :size="32" :class="`${!chatUser.chat_profile?.authentication ? 'cursor-default' : ''}`">
+          <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+        </el-avatar>
+        <span v-if="chatUser.chat_profile?.authentication" class="ml-8 color-text-primary">
+          {{ chatUser.chatUserProfile?.nick_name }}
+        </span>
+      </div>
+    </el-drawer>
+
+    <UserCenter v-model:show="userCenterDrawerShow" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineModel } from 'vue'
+import { isAppIcon } from '@/utils/common'
+import { t } from '@/locales'
+import { Delete, EditPen } from '@element-plus/icons-vue'
+import useStore from '@/stores'
+import { MsgError } from '@/utils/message'
+import UserCenter from './UserCenter.vue'
+
+const show = defineModel<boolean>('show')
+
+const props = defineProps<{
+  applicationDetail: any
+  chatLogData: any[]
+  leftLoading: boolean
+  currentChatId: string
+}>()
+
+const emit = defineEmits([
+  'newChat',
+  'clickLog',
+  'deleteLog',
+])
+
+const { chatUser, chatLog } = useStore()
+
+const handleClickList = (item: any) => {
+  emit('clickLog', item)
+}
+
+const updateChatName = (val: string, item: any) => {
+  if (!val) return MsgError(t('views.applicationWorkflow.tip.nameMessage'))
+  const obj = { abstract: val }
+  chatLog.asyncPutChatClientLog(props.applicationDetail.id, item.id, obj, ref(false)).then(() => {
+    item.abstract = val
+    item.writeStatus = false
+  })
+}
+
+const deleteChatLog = (row: any) => {
+  emit('deleteLog', row)
+}
+
+const mouseId = ref('')
+const mouseenter = (row: any) => {
+  mouseId.value = row.id
+}
+
+const userCenterDrawerShow = ref(false)
+function toUserCenter() {
+  if (!chatUser.chat_profile?.authentication) return
+  userCenterDrawerShow.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.left-drawer) {
+  .el-drawer__body {
+    padding: 16px;
+    background:
+      linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
+      #eef1f4;
+    overflow: hidden;
+
+    .add-button {
+      border: 1px solid var(--el-color-primary);
+      background-color: #3370FF1A;
+      color: #3370FF;
+      font-weight: 500;
+
+      &:hover {
+        background-color: #3370FF33;
+      }
+    }
+
+    .left-height {
+      height: calc(100vh - 212px);
+    }
+
+    .common-list li.active {
+      background-color: #ffffff;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+      &:hover {
+        background-color: #ffffff;
+      }
+    }
+
+    .user-info {
+      border-radius: 6px;
+      padding: 4px 8px;
+      margin-top: 16px;
+      box-sizing: border-box;
+    }
+  }
+
+  .cursor-default {
+    cursor: default;
+  }
+}
+
+.gradient-divider {
+  position: relative;
+  text-align: center;
+  color: var(--el-color-info);
+
+  ::before {
+    content: '';
+    width: 17%;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+    position: absolute;
+    left: 16px;
+    top: 50%;
+  }
+
+  ::after {
+    content: '';
+    width: 17%;
+    height: 1px;
+    background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+    position: absolute;
+    right: 16px;
+    top: 50%;
+  }
+}
+</style>

ui/src/views/chat/mobile/index.vue

@@ -15,7 +15,7 @@
         <AppIcon
           iconName="app-history-outlined"
           style="font-size: 20px"
-          class="ml-16"
+          class="ml-16 cursor"
           :style="{
             color: applicationDetail?.custom_theme?.header_font_color,
           }"
@@ -60,113 +60,23 @@
         </AiChat>
       </div>
 
-      <el-drawer
-        v-model="show"
-        :with-header="false"
-        class="left-drawer"
-        direction="ltr"
-        :size="280"
-      >
-        <div>
-          <div class="flex align-center mb-16">
-            <div class="flex mr-8">
-              <el-avatar
-                v-if="isAppIcon(applicationDetail?.icon)"
-                shape="square"
-                :size="32"
-                style="background: none"
-              >
-                <img :src="applicationDetail?.icon" alt="" />
-              </el-avatar>
-              <LogoIcon v-else height="32px" />
-            </div>
-            <h4>{{ applicationDetail?.name }}</h4>
-          </div>
-          <el-button class="add-button w-full primary" @click="newChat">
-            <AppIcon iconName="app-create-chat"></AppIcon>
-            <span class="ml-4">{{ $t('chat.createChat') }}</span>
-          </el-button>
-          <p class="mt-20 mb-8">{{ $t('chat.history') }}</p>
-        </div>
-
-        <div class="left-height pt-0">
-          <el-scrollbar>
-            <div>
-              <common-list
-                :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
-                :data="chatLogData"
-                v-loading="left_loading"
-                :defaultActive="currentChatId"
-                @click="clickListHandle"
-                @mouseenter="mouseenter"
-                @mouseleave="mouseId = ''"
-              >
-                <template #default="{ row }">
-                  <div class="flex-between">
-                    <ReadWrite
-                      @change="editName($event, row)"
-                      :data="row.abstract"
-                      trigger="manual"
-                      :write="row.writeStatus"
-                      @close="closeWrite(row)"
-                      :maxlength="1024"
-                    />
-                    <div
-                      @click.stop
-                      v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus"
-                      class="flex"
-                    >
-                      <el-button style="padding: 0" link @click.stop="openWrite(row)">
-                        <el-icon>
-                          <EditPen />
-                        </el-icon>
-                      </el-button>
-                      <el-button style="padding: 0" link @click.stop="deleteLog(row)">
-                        <el-icon>
-                          <Delete />
-                        </el-icon>
-                      </el-button>
-                    </div>
-                  </div>
-                </template>
-                <template #empty>
-                  <div class="text-center mt-24">
-                    <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
-                  </div>
-                </template>
-              </common-list>
-            </div>
-            <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
-              <span>{{ $t('chat.only20history') }}</span>
-            </div>
-          </el-scrollbar>
-        </div>
-        <div class="flex align-center user-info" @click="toUserCenter">
-          <el-avatar :size="32">
-            <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
-          </el-avatar>
-          <span v-if="chatUser.chat_profile?.authentication" class="ml-8 color-text-primary">{{
-            chatUser.chatUserProfile?.nick_name
-          }}</span>
-        </div>
-      </el-drawer>
+     <ChatHistoryDrawer v-model:show="show" :application-detail="applicationDetail" :chat-log-data="chatLogData"
+        :left-loading="left_loading" :currentChatId="currentChatId" @new-chat="newChat"
+        @clickLog="clickListHandle" @delete-log="deleteLog" />
     </div>
 
-    <UserCenter v-model:show="userCenterDrawerShow" />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, reactive, nextTick, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import { isAppIcon } from '@/utils/common'
 import { hexToRgba } from '@/utils/theme'
-import { MsgError } from '@/utils/message'
 import useStore from '@/stores'
 import { t } from '@/locales'
-import UserCenter from './component/UserCenter.vue'
+import ChatHistoryDrawer from './component/ChatHistoryDrawer.vue'
 import chatAPI from '@/api/chat/chat'
 
-const { user, chatLog, chatUser, common } = useStore()
+const { user, chatLog, common } = useStore()
 
 const AiChatRef = ref()
 const loading = ref(false)
@@ -192,7 +102,6 @@ const paginationConfig = reactive({
 const currentRecordList = ref<any>([])
 const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
 
-const mouseId = ref('')
 
 const customStyle = computed(() => {
   return {
@@ -207,35 +116,6 @@ const classObj = computed(() => {
   }
 })
 
-function editName(val: string, item: any) {
-  if (val) {
-    const obj = {
-      abstract: val,
-    }
-
-    chatLog.asyncPutChatClientLog(applicationDetail.value.id, item.id, obj, loading).then(() => {
-      const find = chatLogData.value.find((row: any) => row.id === item.id)
-      if (find) {
-        find.abstract = val
-      }
-      item['writeStatus'] = false
-    })
-  } else {
-    MsgError(t('views.applicationWorkflow.tip.nameMessage'))
-  }
-}
-
-function openWrite(item: any) {
-  item['writeStatus'] = true
-}
-
-function closeWrite(item: any) {
-  item['writeStatus'] = false
-}
-
-function mouseenter(row: any) {
-  mouseId.value = row.id
-}
 function deleteLog(row: any) {
   chatLog.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
     if (currentChatId.value === row.id) {
@@ -247,7 +127,6 @@ function deleteLog(row: any) {
     getChatLog(applicationDetail.value.id)
   })
 }
-
 function handleScroll(event: any) {
   if (
     currentChatId.value !== 'new' &&
@@ -346,12 +225,6 @@ const init = () => {
 onMounted(() => {
   init()
 })
-
-const userCenterDrawerShow = ref(false)
-function toUserCenter() {
-  if (!chatUser.chat_profile?.authentication) return
-  userCenterDrawerShow.value = true
-}
 </script>
 <style lang="scss">
 .chat-mobile {
@@ -377,61 +250,12 @@ function toUserCenter() {
     z-index: 11;
     font-size: 1rem;
   }
-  // 历史对话弹出层
-  .left-drawer {
-    .el-drawer__body {
-      padding: 16px;
-      background:
-        linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
-        #eef1f4;
-      overflow: hidden;
-
-      .add-button {
-        border: 1px solid var(--el-color-primary);
-      }
-
-      .left-height {
-        height: calc(100vh - 212px);
-      }
-
-      .user-info {
-        border-radius: 6px;
-        padding: 4px 8px;
-        margin-top: 16px;
-        box-sizing: border-box;
-      }
-    }
-  }
 
   // &.chat-embed--popup {
   //   .chat-popover-button {
   //     right: 85px;
   //   }
   // }
-
-  .gradient-divider {
-    position: relative;
-    text-align: center;
-    color: var(--el-color-info);
-    ::before {
-      content: '';
-      width: 17%;
-      height: 1px;
-      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
-      position: absolute;
-      left: 16px;
-      top: 50%;
-    }
-    ::after {
-      content: '';
-      width: 17%;
-      height: 1px;
-      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
-      position: absolute;
-      right: 16px;
-      top: 50%;
-    }
-  }
   // .AiChat-embed {
   //   .ai-chat__operate {
   //     padding-top: 12px;

ui/src/views/chat/pc/index.vue

@@ -33,6 +33,7 @@
               <h4 v-show="!isPcCollapse">{{ applicationDetail?.name }}</h4>
             </div>
             <el-button
+              size="large" 
               type="primary"
               plain
               v-show="!isPcCollapse"
@@ -637,6 +638,15 @@ function closeExecutionDetail() {
     position: relative;
     z-index: 1;
 
+    .common-list li.active {
+      background-color: #ffffff;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+      &:hover {
+        background-color: #ffffff;
+      }
+    }
+
     .el-menu {
       display: flex;
       flex-direction: column;
@@ -706,6 +716,12 @@ function closeExecutionDetail() {
 
     .add-button {
       border: 1px solid var(--el-color-primary);
+      background-color: #3370FF1A;
+      color: #3370FF;
+      font-weight: 500;
+      &:hover {
+        background-color: #3370FF33;
+      }
     }
 
     .left-height {
@@ -783,7 +799,12 @@ function closeExecutionDetail() {
 }
 
 .chat-pc-popper {
-  .el-menu-item-group__title {
+  background: linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
+        #eef1f4 !important;
+  .el-menu {
+    background: transparent;
+  }
+        .el-menu-item-group__title {
     padding-bottom: 16px;
     font-weight: 500;
     color: var(--app-text-color-secondary);
@@ -798,7 +819,12 @@ function closeExecutionDetail() {
       background-color: #1f23291a;
     }
     &.is-active {
-      background-color: #3370ff1a;
+      background-color: #ffffff;
+      
+      color: var(--el-text-color-primary);
+      & > div {
+        font-weight: 500;
+      }
     }
   }
 }