perf: optimized some details (#31)

Synaptrix · Mar 20, 2023 · 86d08f7 · 86d08f7
1 parent bcc0cac
commit 86d08f7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -8,16 +8,22 @@
   <h3>基于 tauri + vue3 开发的跨平台桌面端应用</h3>
 
   <div>
-    <a href="https://github.com/Bin-Huang/chatbox/releases" target="_blank">
+    <a href="https://github.com/bilibili-ayang/ChatGPT-Desktop/releases">
       <img alt="macOS" src="https://img.shields.io/badge/-macOS-black?style=flat-square&logo=apple&logoColor=white" />
     </a>
-    <a href="https://github.com/Bin-Huang/chatbox/releases" target="_blank">
+    <a href="https://github.com/bilibili-ayang/ChatGPT-Desktop/releases">
       <img alt="Windows" src="https://img.shields.io/badge/-Windows-blue?style=flat-square&logo=windows&logoColor=white" />
     </a>
-    <a href="https://github.com/Bin-Huang/chatbox/releases" target="_blank">
+    <a href="https://github.com/bilibili-ayang/ChatGPT-Desktop/releases">
       <img alt="Linux" src="https://img.shields.io/badge/-Linux-yellow?style=flat-square&logo=linux&logoColor=white" />
     </a>
   </div>
+
+  <div>
+    <img src="https://img.shields.io/github/license/bilibili-ayang/ChatGPT-Desktop?style=flat-square" />
+    <img src="https://img.shields.io/github/package-json/v/bilibili-ayang/ChatGPT-Desktop?style=flat-square" />
+    <img src="https://img.shields.io/github/downloads/bilibili-ayang/ChatGPT-Desktop/total?style=flat-square" />
+  </div>
 </div>
 
 ## 为什么选择 ChatGPT-Desktop？

diff --git a/src/App.vue b/src/App.vue
@@ -27,6 +27,11 @@ onMounted(async () => {
     class="frosted flex h-screen flex-col overflow-hidden rounded-xl p-2"
     :class="[themeClass, windowFocused ? 'bordered' : 'bordered-transparent']"
   >
+    <div
+      class="bg-gray/60 z-999 fixed top-2 left-1/2 h-3 w-80 -translate-x-1/2 cursor-move rounded-md opacity-0 transition hover:opacity-100"
+      data-tauri-drag-region
+    ></div>
+
     <div class="flex h-full items-center justify-center" v-if="isLoading">
       <a-spin :size="50" :loading="true" />
     </div>

diff --git a/src/api/openAi.ts b/src/api/openAi.ts
@@ -82,7 +82,7 @@ export const getOpenAIResultStreamApi = async (messages: MessageData[]) => {
 export const getAiMessage = async (value?: string) => {
   const { apiKey } = useSettingsStore()
 
-  if (!apiKey || !import.meta.env.VITE_OPEN_AI_API_KEY) {
+  if (!apiKey && !import.meta.env.VITE_OPEN_AI_API_KEY) {
     Message.warning('请先填写 OpenAi API Key')
     return
   }
@@ -167,7 +167,12 @@ export const getAiMessage = async (value?: string) => {
 
     isThinking.value = false
   } catch ({ message }: any) {
-    dialogErrorMessage(message)
+    // TODO: 删除失败的询问和回答项
+    if (message.includes('timed out')) {
+      dialogErrorMessage('请求超时！')
+    } else {
+      dialogErrorMessage('填写的 API KEY 无效')
+    }
 
     isThinking.value = false
   }

diff --git a/src/components/Session/index.vue b/src/components/Session/index.vue
@@ -30,31 +30,26 @@ watchEffect(() => {
     ref="sessionElement"
     class="session relative flex-1 cursor-default overflow-auto"
   >
-    <div
-      class="bg-gray/60 z-999 sticky top-2 m-auto h-3 w-80 cursor-move rounded-md opacity-0 hover:opacity-100"
-      data-tauri-drag-region
-    ></div>
     <template v-if="sessionDataList.length">
       <div
-        :id="`session-${item.id}`"
+        :id="`session-data-${item.id}`"
         class="flex items-start gap-4 py-2 px-4"
         v-for="item in sessionDataList"
         :key="item.time"
       >
+        <!-- TODO: 优化 css -->
         <Avatar class="w-12!" :value="item.is_ask ? uuid : currentRole?.name" />
-        <div
-          class="group relative flex flex-1 flex-col gap-3.5 py-[11.5px] leading-6"
-          :key="item.id"
-        >
+        <div class="group relative flex flex-1 flex-col py-3" :key="item.id">
           <div
             class="text-5 absolute top-2 right-2 opacity-0 transition group-hover:opacity-100"
           >
             <IconImage
               class="cursor-pointer"
-              @click="saveImage(`session-${item.id}`)"
+              @click="saveImage(`session-data-${item.id}`)"
             />
           </div>
           <div
+            class="session-item flex flex-col gap-4 leading-6"
             v-html="marked.render(item.message.content)"
             :class="!item.message.content && 'blink-block'"
           ></div>
@@ -74,14 +69,20 @@ watchEffect(() => {
     @apply absolute h-6 w-1 bg-[var(--color-text-2)] content-none;
   }
 
-  ::v-deep(.markdown-it-code-copy) {
-    width: 20px;
-    height: 20px;
+  ::v-deep(pre) {
+    margin: 0;
+    code {
+      @apply rounded-md;
+    }
+    + .markdown-it-code-copy {
+      width: 20px;
+      height: 20px;
 
-    border: 0;
-    outline: 0;
-    background: url('@/assets/image/copy.svg') no-repeat center;
-    background-size: contain;
+      border: 0;
+      outline: 0;
+      background: url('@/assets/image/copy.svg') no-repeat center;
+      background-size: contain;
+    }
   }
 
   @keyframes blink {