perf: optimized the display of session content (#39)

package.json

@@ -23,6 +23,7 @@
     "@multiavatar/multiavatar": "^1.0.7",
     "@tauri-apps/api": "^1.2.0",
     "@types/marked": "^4.0.8",
+    "dayjs": "^1.11.7",
     "highlight.js": "^11.7.0",
     "html-to-image": "^1.11.11",
     "markdown-it": "^13.0.1",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "chat_gpt"
-version = "0.0.2"
+version = "0.0.3"
 description = "ChatGPT-Desktop"
 authors = ["orangelckc", "bilibili-ayang"]
 license = "MIT"

src-tauri/tauri.conf.json

@@ -87,8 +87,7 @@
       }
     ],
     "systemTray": {
-      "iconPath": "assets/tray.png",
-      "iconAsTemplate": true
+      "iconPath": "assets/tray.png"
     }
   }
 }

src/App.vue

@@ -15,6 +15,7 @@ onMounted(async () => {
   // 监听窗口有无获取焦点
   appWindow.onFocusChanged(({ payload }) => {
     windowFocused.value = payload
+
     setTimeout(() => {
       if (!windowFocused.value && !isFix.value) appWindow.hide()
     }, 100)
@@ -37,11 +38,11 @@ onMounted(async () => {
     </div>
 
     <template v-else>
-      <div class="text-7 z-999 fixed top-2 right-2 flex gap-2">
-        <!-- 主题切换 -->
-        <Theme />
+      <div class="text-7 z-999 fixed top-2 left-2 flex flex-col gap-2">
         <!-- 固定窗口 -->
         <Fixed />
+        <!-- 主题切换 -->
+        <Theme />
       </div>
 
       <!-- 会话信息 -->

src/api/openAi.ts

@@ -60,9 +60,9 @@ export const getOpenAIResultStreamApi = async (messages: MessageData[]) => {
       if (response.ok) return
 
       if (response.status === 429) {
-        throw new Error('请求的key超出限制')
+        throw new Error('请求的 key 超出限制')
       } else if (response.status === 401) {
-        throw new Error('请求的key无效')
+        throw new Error('请求的 API KEY 无效')
       } else {
         throw new Error('请求出错')
       }
@@ -98,7 +98,8 @@ export const getAiMessage = async (value?: string) => {
     return
   }
 
-  const { isThinking } = storeToRefs(useSessionStore())
+  const { isThinking, sessionDataList } = storeToRefs(useSessionStore())
+  const { updateSessionData } = useSessionStore()
 
   try {
     const { currentRole } = useRoleStore()
@@ -178,8 +179,10 @@ export const getAiMessage = async (value?: string) => {
 
     isThinking.value = false
   } catch ({ message }: any) {
-    // TODO: 删除失败的询问和回答项
-    dialogErrorMessage(message as string)
+    sessionDataList.value.at(-1)!.message.content = message
+
+    updateSessionData(sessionDataList.value.at(-1)!)
+
     isThinking.value = false
   }
 }

src/assets/css/theme.scss

@@ -1,10 +1,14 @@
 body {
+  --background-color: #f2f3f5;
+
   --scroll-thumb-color: #c0c0c0;
   --scroll-thumb-color-hover: #a7a7a7;
   --scroll-track-color: #f1f1f1;
 }
 
-body[theme-mode="dark"] {
+body[arco-theme='dark'] {
+  --background-color: #17171a;
+
   --scroll-thumb-color: #686868;
   --scroll-thumb-color-hover: #7a7a7a;
   --scroll-track-color: #444;

src/components/Function/index.vue

@@ -21,14 +21,14 @@ const disabled = computed(
 
 // 控制设置弹框
 const modalVisible = ref(false)
-const setModalVisible = () => {
-  modalVisible.value = !modalVisible.value
+const closeModal = () => {
+  modalVisible.value = false
 }
 
 // 控制历史列表抽屉
 const drawerVisible = ref(false)
-const setDrawerVisible = () => {
-  drawerVisible.value = !drawerVisible.value
+const closeDrawer = () => {
+  drawerVisible.value = false
 }
 
 // TODO: 在获取数据时删除的处理，在获取数据时切换历史记录的处理
@@ -54,12 +54,12 @@ const functions = computed(() => [
   {
     content: '历史记录',
     icon: IconHistory,
-    handleClick: setDrawerVisible
+    handleClick: () => (drawerVisible.value = true)
   },
   {
     content: '设置',
     icon: IconSettings,
-    handleClick: setModalVisible
+    handleClick: () => (modalVisible.value = true)
   }
 ])
 </script>
@@ -96,10 +96,10 @@ const functions = computed(() => [
   </div>
 
   <!-- 设置弹框 -->
-  <SettingsModal :visible="modalVisible" :set-visible="setModalVisible" />
+  <SettingsModal :visible="modalVisible" :set-visible="closeModal" />
 
   <!-- 历史会话抽屉 -->
-  <HistoryDrawer :visible="drawerVisible" :set-visible="setDrawerVisible" />
+  <HistoryDrawer :visible="drawerVisible" :set-visible="closeDrawer" />
 </template>
 
 <style scoped lang="scss">

src/components/Session/index.vue

@@ -32,39 +32,30 @@ watchEffect(() => {
   >
     <template v-if="sessionDataList.length">
       <div
-        class="flex items-start gap-4 py-2 px-4"
         v-for="item in sessionDataList"
-        :key="item.time"
         :id="`session-data-${item.id}`"
+        class="flex gap-4 px-2 py-4"
         :class="item.is_ask && 'flex-row-reverse'"
+        :key="item.id"
       >
-        <!-- TODO: 优化 css -->
-        <Avatar
-          class="w-12! flex-shrink-0 flex-grow-0"
-          :value="item.is_ask ? uuid : currentRole?.name"
-        />
+        <Avatar class="w-12!" :value="item.is_ask ? uuid : currentRole?.name" />
+
         <div
-          class="group relative flex w-auto flex-col py-3"
-          :key="item.id"
-          :class="
-            item.is_ask
-              ? 'bg-red items-end rounded-md pr-3 pl-8'
-              : 'bg-blue rounded-md pl-3 pr-8'
-          "
+          class="flex w-[calc(100%-8rem)] flex-col gap-2"
+          :class="item.is_ask && 'items-end'"
         >
+          <span>{{ item.time }}</span>
+
+          <div class="blink-block" v-if="!item.message.content"></div>
           <div
-            class="text-5 absolute top-2 opacity-0 transition group-hover:opacity-100"
-            :class="item.is_ask ? 'left-2' : 'right-2'"
-          >
-            <IconImage
-              class="cursor-pointer"
-              @click="saveImage(`session-data-${item.id}`)"
-            />
-          </div>
-          <div
-            class="`session-item leading-6` flex flex-col gap-4"
+            class="session-item flex w-fit flex-col gap-4 rounded-md p-4"
+            :class="
+              item.is_ask
+                ? 'bg-[rgb(var(--blue-6))] text-white'
+                : 'bg-[var(--background-color)]'
+            "
             v-html="marked.render(item.message.content)"
-            :class="!item.message.content && 'blink-block'"
+            v-else
           ></div>
         </div>
       </div>
@@ -79,22 +70,50 @@ watchEffect(() => {
 .session {
   .blink-block::after {
     animation: blink 1s infinite;
-    @apply absolute h-6 w-1 bg-[var(--color-text-2)] content-none;
+    @apply absolute h-6 w-1 bg-[var(--color-text-3)] content-none;
   }
 
-  ::v-deep(pre) {
-    margin: 0;
-    code {
-      @apply rounded-md;
+  ::v-deep(.session-item) {
+    p {
+      @apply leading-6;
     }
-    + .markdown-it-code-copy {
-      width: 20px;
-      height: 20px;
-
-      border: 0;
-      outline: 0;
-      background: url('@/assets/image/copy.svg') no-repeat center;
-      background-size: contain;
+
+    pre {
+      margin: 0;
+      code {
+        @apply rounded-md leading-6;
+      }
+      + .markdown-it-code-copy {
+        width: 20px;
+        height: 20px;
+
+        transition: all 0.3s;
+
+        opacity: 0;
+        border: 0;
+        outline: 0;
+        background: url('@/assets/image/copy.svg') no-repeat center;
+        background-size: contain;
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      &:hover {
+        + .markdown-it-code-copy {
+          opacity: 0.7;
+        }
+      }
+    }
+
+    ol,
+    ul {
+      li {
+        @apply flex flex-col gap-4;
+        &:not(:last-child) {
+          @apply pb-4;
+        }
+      }
     }
   }