【代码优化】AI：聊天对话 index.vue 代码梳理 80%（message 部分）

62246021 · YunaiV · 1a6afa32 · 62246021 · 62246021 · 62246021
Commit 62246021 authored Jul 08, 2024 by YunaiV
6 changed files
--- a/src/views/ai/chat/index/components/conversation/ConversationList.vue
+++ b/src/views/ai/chat/index/components/conversation/ConversationList.vue
--- a/src/views/ai/chat/index/components/role/RoleCategoryList.vue
+++ b/src/views/ai/chat/index/components/role/RoleCategoryList.vue
 <template>
  <div class="category-list">
-    <div class="category" v-for="(category) in categoryList" :key="category">
+    <div class="category" v-for="category in categoryList" :key="category">
-      <el-button plain round size="small" v-if="category !== active" @click="handleCategoryClick(category)">{{ category }}</el-button>
+      <el-button
-      <el-button plain round size="small" v-else type="primary" @click="handleCategoryClick(category)">{{ category }}</el-button>
+        plain
+        round
+        size="small"
+        :type="category === active ? 'primary' : ''"
+        @click="handleCategoryClick(category)"
+      >
+        {{ category }}
+      </el-button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import {PropType} from "vue";
+import { PropType } from 'vue'
 // 定义属性
 defineProps({
@@ -25,11 +32,10 @@ defineProps({
 // 定义回调
 const emits = defineEmits(['onCategoryClick'])
-// 处理分类点击事件
+/** 处理分类点击事件 */
-const handleCategoryClick = async (category) => {
+const handleCategoryClick = async (category: string) => {
  emits('onCategoryClick', category)
 }
 </script>
 <style scoped lang="scss">
 .category-list {

--- a/src/views/ai/chat/index/components/Header.vue
+++ b/src/views/ai/chat/index/components/Header.vue
--- a/src/views/ai/chat/index/components/role/RoleList.vue
+++ b/src/views/ai/chat/index/components/role/RoleList.vue
@@ -2,21 +2,21 @@
  <div class="card-list" ref="tabsRef" @scroll="handleTabsScroll">
    <div class="card-item" v-for="role in roleList" :key="role.id">
      <el-card class="card" body-class="card-body">
-        <!--  更多 -->
+        <!-- 更多操作 -->
        <div class="more-container" v-if="showMore">
          <el-dropdown @command="handleMoreClick">
            <span class="el-dropdown-link">
-             <el-button type="text" >
+              <el-button type="text">
                <el-icon><More /></el-icon>
              </el-button>
            </span>
            <!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
            <template #dropdown>
              <el-dropdown-menu>
-                <el-dropdown-item :command="['edit', role]" >
+                <el-dropdown-item :command="['edit', role]">
                  <el-icon><EditPen /></el-icon>编辑
                </el-dropdown-item>
-                <el-dropdown-item :command="['delete', role]"  style="color: red;" >
+                <el-dropdown-item :command="['delete', role]" style="color: red">
                  <el-icon><Delete /></el-icon>
                  <span>删除</span>
                </el-dropdown-item>
@@ -24,9 +24,9 @@
            </template>
          </el-dropdown>
        </div>
-        <!--  头像 -->
+        <!-- 角色信息 -->
        <div>
-          <img class="avatar" :src="role.avatar"/>
+          <img class="avatar" :src="role.avatar" />
        </div>
        <div class="right-container">
          <div class="content-container">
@@ -43,9 +43,9 @@
 </template>
 <script setup lang="ts">
-import {ChatRoleVO} from '@/api/ai/model/chatRole'
+import { ChatRoleVO } from '@/api/ai/model/chatRole'
-import {PropType, ref} from "vue";
+import { PropType, ref } from 'vue'
-import {Delete, EditPen, More} from "@element-plus/icons-vue";
+import { Delete, EditPen, More } from '@element-plus/icons-vue'
 const tabsRef = ref<any>() // tabs ref
@@ -65,10 +65,11 @@ const props = defineProps({
    default: false
  }
 })
 // 定义钩子
 const emits = defineEmits(['onDelete', 'onEdit', 'onUse', 'onPage'])
-// more 点击
+/** 操作：编辑、删除 */
 const handleMoreClick = async (data) => {
  const type = data[0]
  const role = data[1]
@@ -79,28 +80,20 @@ const handleMoreClick = async (data) => {
  }
 }
-// 使用
+/** 选中 */
 const handleUseClick = (role) => {
  emits('onUse', role)
 }
+/** 滚动 */
 const handleTabsScroll = async () => {
  if (tabsRef.value) {
-    const { scrollTop, scrollHeight, clientHeight } = tabsRef.value;
+    const { scrollTop, scrollHeight, clientHeight } = tabsRef.value
-    console.log('scrollTop', scrollTop)
    if (scrollTop + clientHeight >= scrollHeight - 20 && !props.loading) {
-      console.log('分页')
-      // page.value++;
-      // fetchData(page.value);
      await emits('onPage')
    }
  }
 }
-onMounted(() => {
-  console.log('props', props.roleList)
-})
 </script>
 <style lang="scss">
@@ -114,11 +107,9 @@ onMounted(() => {
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
 }
 </style>
 <style scoped lang="scss">
 // 卡片列表
 .card-list {
  display: flex;
@@ -180,9 +171,6 @@ onMounted(() => {
        margin-top: 2px;
      }
    }
  }
 }
 </style>
--- a/src/views/ai/chat/index/components/role/index.vue
+++ b/src/views/ai/chat/index/components/role/index.vue
@@ -3,7 +3,7 @@
  <el-container class="role-container">
    <ChatRoleForm ref="formRef" @success="handlerAddRoleSuccess" />
    <!-- header  -->
-    <Header title="角色仓库" style="position: relative" />
+    <RoleHeader title="角色仓库" class="relative" />
    <!--  main  -->
    <el-main class="role-main">
      <div class="search-container">
@@ -18,10 +18,10 @@
          @change="getActiveTabsRole"
        />
        <el-button
-          v-if="activeRole == 'my-role'"
+          v-if="activeTab == 'my-role'"
          type="primary"
          @click="handlerAddRole"
-          style="margin-left: 20px"
+          class="ml-20px"
        >
          <!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
          <el-icon>
@@ -31,7 +31,7 @@
        </el-button>
      </div>
      <!-- tabs -->
-      <el-tabs v-model="activeRole" class="tabs" @tab-click="handleTabsClick">
+      <el-tabs v-model="activeTab" class="tabs" @tab-click="handleTabsClick">
        <el-tab-pane class="role-pane" label="我的角色" name="my-role">
          <RoleList
            :loading="loading"
@@ -41,7 +41,7 @@
            @on-edit="handlerCardEdit"
            @on-use="handlerCardUse"
            @on-page="handlerCardPage('my')"
-            style="margin-top: 20px"
+            class="mt-20px"
          />
        </el-tab-pane>
        <el-tab-pane label="公共角色" name="public-role">
@@ -57,7 +57,7 @@
            @on-edit="handlerCardEdit"
            @on-use="handlerCardUse"
            @on-page="handlerCardPage('public')"
-            style="margin-top: 20px"
+            class="mt-20px"
            loading
          />
        </el-tab-pane>
@@ -68,27 +68,30 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import Header from '../Header.vue'
+import RoleHeader from './RoleHeader.vue'
 import RoleList from './RoleList.vue'
 import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue'
 import RoleCategoryList from './RoleCategoryList.vue'
 import { ChatRoleApi, ChatRolePageReqVO, ChatRoleVO } from '@/api/ai/model/chatRole'
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
-import { TabsPaneContext } from 'element-plus'
 import { Search, User } from '@element-plus/icons-vue'
+import { TabsPaneContext } from 'element-plus'
 const router = useRouter() // 路由对象
 // 属性定义
 const loading = ref<boolean>(false) // 加载中
-const activeRole = ref<string>('my-role') // 选中的角色 TODO @fan：是不是叫 activeTab 会更明确一点哈。选中的角色，会以为是某个角色
+const activeTab = ref<string>('my-role') // 选中的角色 Tab
 const search = ref<string>('') // 加载中
-// TODO @fan：要不 myPage、pubPage，搞成类似 const queryParams = reactive({ ，分别搞成两个大的参数哈？
+const myRoleParams = reactive({
-const myPageNo = ref<number>(1) // my 分页下标
+  pageNo: 1,
-const myPageSize = ref<number>(50) // my 分页大小
+  pageSize: 50
+})
 const myRoleList = ref<ChatRoleVO[]>([]) // my 分页大小
-const publicPageNo = ref<number>(1) // public 分页下标
+const publicRoleParams = reactive({
-const publicPageSize = ref<number>(50) // public 分页大小
+  pageNo: 1,
+  pageSize: 50
+})
 const publicRoleList = ref<ChatRoleVO[]>([]) // public 分页大小
 const activeCategory = ref<string>('全部') // 选择中的分类
 const categoryList = ref<string[]>([]) // 角色分类类别
@@ -96,7 +99,7 @@ const categoryList = ref<string[]>([]) // 角色分类类别
 /** tabs 点击 */
 const handleTabsClick = async (tab: TabsPaneContext) => {
  // 设置切换状态
-  activeRole.value = tab.paneName + ''
+  activeTab.value = tab.paneName + ''
  // 切换的时候重新加载数据
  await getActiveTabsRole()
 }
@@ -104,12 +107,11 @@ const handleTabsClick = async (tab: TabsPaneContext) => {
 /** 获取 my role 我的角色 */
 const getMyRole = async (append?: boolean) => {
  const params: ChatRolePageReqVO = {
-    pageNo: myPageNo.value,
+    ...myRoleParams,
-    pageSize: myPageSize.value,
    name: search.value,
    publicStatus: false
  }
-  const { total, list } = await ChatRoleApi.getMyPage(params)
+  const { list } = await ChatRoleApi.getMyPage(params)
  if (append) {
    myRoleList.value.push.apply(myRoleList.value, list)
  } else {
@@ -120,8 +122,7 @@ const getMyRole = async (append?: boolean) => {
 /** 获取 public role 公共角色 */
 const getPublicRole = async (append?: boolean) => {
  const params: ChatRolePageReqVO = {
-    pageNo: publicPageNo.value,
+    ...publicRoleParams,
-    pageSize: publicPageSize.value,
    category: activeCategory.value === '全部' ? '' : activeCategory.value,
    name: search.value,
    publicStatus: true
@@ -136,20 +137,18 @@ const getPublicRole = async (append?: boolean) => {
 /** 获取选中的 tabs 角色 */
 const getActiveTabsRole = async () => {
-  if (activeRole.value === 'my-role') {
+  if (activeTab.value === 'my-role') {
-    myPageNo.value = 1
+    myRoleParams.pageNo = 1
    await getMyRole()
  } else {
-    publicPageNo.value = 1
+    publicRoleParams.pageNo = 1
    await getPublicRole()
  }
 }
 /** 获取角色分类列表 */
 const getRoleCategoryList = async () => {
-  const res = await ChatRoleApi.getCategoryList()
+  categoryList.value = ['全部', ...(await ChatRoleApi.getCategoryList())]
-  const defaultRole = ['全部']
-  categoryList.value = [...defaultRole, ...res]
 }
 /** 处理分类点击 */
@@ -165,6 +164,10 @@ const formRef = ref()
 const handlerAddRole = async () => {
  formRef.value.open('my-create', null, '添加角色')
 }
+/** 编辑角色 */
+const handlerCardEdit = async (role) => {
+  formRef.value.open('my-update', role.id, '编辑角色')
+}
 /** 添加角色成功 */
 const handlerAddRoleSuccess = async (e) => {
@@ -172,28 +175,22 @@ const handlerAddRoleSuccess = async (e) => {
  await getActiveTabsRole()
 }
-// card 删除
+/** 删除角色 */
 const handlerCardDelete = async (role) => {
  await ChatRoleApi.deleteMy(role.id)
  // 刷新数据
  await getActiveTabsRole()
 }
-// card 编辑
+/** 角色分页：获取下一页 */
-const handlerCardEdit = async (role) => {
-  formRef.value.open('my-update', role.id, '编辑角色')
-}
-/** card 分页：获取下一页 */
 const handlerCardPage = async (type) => {
-  console.log('handlerCardPage', type)
  try {
    loading.value = true
    if (type === 'public') {
-      publicPageNo.value++
+      publicRoleParams.pageNo++
      await getPublicRole(true)
    } else {
-      myPageNo.value++
+      myRoleParams.pageNo++
      await getMyRole(true)
    }
  } finally {
@@ -208,10 +205,10 @@ const handlerCardUse = async (role) => {
    roleId: role.id
  } as unknown as ChatConversationVO
  const conversationId = await ChatConversationApi.createChatConversationMy(data)
  // 2. 跳转页面
-  // TODO @fan：最好用 name，后续可能会改~~~
  await router.push({
-    path: `/ai/chat`,
+    name: 'AiChat',
    query: {
      conversationId: conversationId
    }

--- a/src/views/ai/chat/index/index.vue
+++ b/src/views/ai/chat/index/index.vue
@@ -19,11 +19,10 @@
        <div class="btns" v-if="activeConversation">
          <el-button type="primary" bg plain size="small" @click="openChatConversationUpdateForm">
            <span v-html="activeConversation?.modelName"></span>
-            <Icon icon="ep:setting" style="margin-left: 10px" />
+            <Icon icon="ep:setting" class="ml-10px" />
          </el-button>
          <el-button size="small" class="btn" @click="handlerMessageClear">
-            <!-- TODO @fan：style 部分，可以考虑用 unocss 替代 -->
+            <img src="@/assets/ai/clear.svg" class="h-14px" />
-            <img src="@/assets/ai/clear.svg" style="height: 14px" />
          </el-button>
          <!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
          <el-button size="small" :icon="Download" class="btn" />
@@ -76,7 +75,7 @@
          <div class="prompt-btns">
            <div>
              <el-switch v-model="enableContext" />
-              <span style="font-size: 14px; color: #8f8f8f">上下文</span>
+              <span class="ml-5px text-14px text-#8f8f8f">上下文</span>
            </div>
            <el-button
              type="primary"
@@ -119,6 +118,9 @@ import MessageLoading from './components/message/MessageLoading.vue'
 import MessageNewConversation from './components/message/MessageNewConversation.vue'
 import { Download, Top } from '@element-plus/icons-vue'
+/** AI 聊天对话 列表 */
+defineOptions({ name: 'AiChat' })
 const route = useRoute() // 路由
 const message = useMessage() // 消息弹窗