perf: optimized some styles (#136)

Synaptrix · Mar 30, 2023 · 85aeda9 · 85aeda9
1 parent 86fc1d6
commit 85aeda9
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 87 deletions.
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
@@ -97,3 +97,7 @@ code {
   color: rgb(var(--primary-6));
   background-color: transparent;
 }
+
+.arco-popover-content {
+  margin-top: 0;
+}
diff --git a/src/components/Function/components/AddSession.vue b/src/components/Function/components/AddSession.vue
@@ -12,52 +12,48 @@ const handleSelect = async (value: MessageType | any) => {
 </script>
 
 <template>
-  <a-tooltip content="图像参数" v-if="currentSession?.type === 'image'">
-    <a-popover trigger="click">
-      <a-button type="text" :disabled="isThinking">
-        <template #icon>
-          <icon-tool />
-        </template>
-      </a-button>
-      <template #content>
-        <div class="flex flex-col gap-2">
-          <div class="flex items-center gap-2">
-            <span>尺寸：</span>
-            <a-radio-group v-model="imageParams.size" type="button">
-              <a-radio value="256x256">256</a-radio>
-              <a-radio value="512x512">512</a-radio>
-              <a-radio value="1024x1024">1024</a-radio>
-            </a-radio-group>
-          </div>
-          <div class="flex items-center gap-2">
-            <span>数量：</span>
-            <a-radio-group
-              v-model="imageParams.number"
-              type="button"
-              class="w-[168px] justify-between"
-            >
-              <a-radio :value="1">1</a-radio>
-              <a-radio :value="2">2</a-radio>
-              <a-radio :value="3">3</a-radio>
-              <a-radio :value="4">4</a-radio>
-            </a-radio-group>
-          </div>
-        </div>
+  <a-popover v-if="currentSession?.type === 'image'">
+    <a-button type="text" :disabled="isThinking">
+      <template #icon>
+        <icon-tool />
       </template>
-    </a-popover>
-  </a-tooltip>
+    </a-button>
+    <template #content>
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center">
+          <span>图片尺寸：</span>
+          <a-radio-group v-model="imageParams.size" type="button">
+            <a-radio value="256x256">256</a-radio>
+            <a-radio value="512x512">512</a-radio>
+            <a-radio value="1024x1024">1024</a-radio>
+          </a-radio-group>
+        </div>
+        <div class="flex items-center">
+          <span>图片数量：</span>
+          <a-radio-group
+            v-model="imageParams.number"
+            type="button"
+            class="w-[168px] justify-between"
+          >
+            <a-radio :value="1">1</a-radio>
+            <a-radio :value="2">2</a-radio>
+            <a-radio :value="3">3</a-radio>
+            <a-radio :value="4">4</a-radio>
+          </a-radio-group>
+        </div>
+      </div>
+    </template>
+  </a-popover>
 
-  <a-tooltip content="新增对话">
-    <a-dropdown @select="handleSelect">
-      <a-button type="text" :disabled="isThinking">
-        <template #icon>
-          <icon-plus-circle />
-        </template>
-      </a-button>
-      <template #content>
-        <a-doption value="text">文本模式</a-doption>
-        <a-doption value="image">图像模式</a-doption>
+  <a-dropdown trigger="hover" @select="handleSelect">
+    <a-button type="text" :disabled="isThinking">
+      <template #icon>
+        <icon-plus-circle />
       </template>
-    </a-dropdown>
-  </a-tooltip>
+    </a-button>
+    <template #content>
+      <a-doption value="text">文本模式</a-doption>
+      <a-doption value="image">图像模式</a-doption>
+    </template>
+  </a-dropdown>
 </template>
diff --git a/src/components/Function/components/Export.vue b/src/components/Function/components/Export.vue
@@ -13,17 +13,19 @@ const handleSelect = (value: string) => {
 </script>
 
 <template>
-  <a-tooltip content="导出文件">
-    <a-dropdown @select="(value: any) => handleSelect(value)" position="top">
-      <a-button type="text" :disabled="disabled">
-        <template #icon>
-          <icon-download />
-        </template>
-      </a-button>
-      <template #content>
-        <a-doption value="image">导出图片</a-doption>
-        <!-- <a-doption value="markdown">导出 Markdown</a-doption> -->
+  <a-dropdown
+    trigger="hover"
+    @select="(value: any) => handleSelect(value)"
+    position="top"
+  >
+    <a-button type="text" :disabled="disabled">
+      <template #icon>
+        <icon-download />
       </template>
-    </a-dropdown>
-  </a-tooltip>
+    </a-button>
+    <template #content>
+      <a-doption value="image">导出图片</a-doption>
+      <!-- <a-doption value="markdown">导出 Markdown</a-doption> -->
+    </template>
+  </a-dropdown>
 </template>
diff --git a/src/components/Input/components/RoleList.vue b/src/components/Input/components/RoleList.vue
@@ -205,7 +205,7 @@ const handleClose = () => {
     }
 
     .arco-popover-content {
-      --uno: mt-0 flex-1 overflow-auto;
+      --uno: flex-1 overflow-auto;
     }
   }
 }

diff --git a/src/components/Session/components/SessionContent.vue b/src/components/Session/components/SessionContent.vue
@@ -4,12 +4,12 @@ import MarkdownItHighlight from 'markdown-it-highlightjs'
 import { emit } from '@tauri-apps/api/event'
 import type { SessionData } from '@/types'
 
+const props = defineProps<{ data: SessionData }>()
+
 const store = useSessionStore()
 const { currentSession } = storeToRefs(store)
 const { deleteSessionData } = store
 
-const props = defineProps<{ data: SessionData }>()
-
 const marked = new MarkdownIt({
   linkify: true
 })
@@ -38,20 +38,27 @@ const position = computed(() => (props.data.is_ask ? 'left' : 'right'))
         ></div>
       </a-tooltip>
 
-      <a-tooltip content="删除" :position="position">
-        <icon-delete @click="deleteSessionData(data)" />
-      </a-tooltip>
+      <a-popover class="session-data-download-popover" :position="position">
+        <icon-download />
 
-      <a-tooltip content="导出 Markdown 文件" :position="position">
-        <div
-          class="markdown"
-          :id="`markdown-${data.id}`"
-          @click="saveMarkdown($event, data.message.content)"
-        ></div>
-      </a-tooltip>
+        <template #content>
+          <a-tooltip content="导出 Markdown">
+            <div
+              class="markdown"
+              :id="`markdown-${data.id}`"
+              @click="saveMarkdown($event, data.message.content)"
+            ></div>
+          </a-tooltip>
+
+          <a-tooltip content="导出图片">
+            <icon-image @click="saveImage(`session-data-${data.id}`)" />
+          </a-tooltip>
+        </template>
+      </a-popover>
+      <!-- </a-tooltip -->
 
-      <a-tooltip content="导出图片" :position="position">
-        <icon-image @click="saveImage(`session-data-${data.id}`)" />
+      <a-tooltip content="删除" :position="position">
+        <icon-delete @click="deleteSessionData(data)" />
       </a-tooltip>
     </div>
 
@@ -97,12 +104,16 @@ const position = computed(() => (props.data.is_ask ? 'left' : 'right'))
             @load="emit('scroll-to-bottom')"
           />
           <div
-            class="transition-300 absolute top-0 grid h-full w-full place-items-center bg-black/50 opacity-0 group-hover/image:opacity-100"
+            class="transition-300 absolute top-0 flex h-full w-full items-center justify-center gap-6 bg-black/50 opacity-0 group-hover/image:opacity-100"
           >
             <icon-download
-              class="text-10 cursor-pointer text-white"
+              class="text-8 cursor-pointer text-white opacity-70 hover:opacity-100"
               @click="saveImageFromFile(img.file)"
             />
+            <icon-delete
+              class="text-8 cursor-pointer text-white opacity-70 hover:opacity-100"
+              @click="deleteSessionData(data)"
+            />
           </div>
         </div>
       </a-col>

diff --git a/src/components/Session/components/index.scss b/src/components/Session/components/index.scss
@@ -1,27 +1,23 @@
 .session-data {
   .operation {
     .copy {
-      background-color: var(--color-text-1);
-
       mask-image: url('@/assets/image/copy.svg');
       mask-size: contain;
+      --uno: bg-[var(--color-text-1)];
 
       &.copied {
         mask-image: url('@/assets/image/copied.svg');
       }
     }
 
     .markdown {
-      background-color: var(--color-text-1);
-
       mask-image: url('@/assets/image/markdown.svg');
       mask-size: contain;
+      --uno: bg-[var(--color-text-1)];
     }
 
     > * {
-      cursor: pointer;
-
-      --uno: transition-300 h-6 w-6 opacity-70;
+      --uno: h-6 w-6 cursor-pointer opacity-70;
 
       &:hover {
         --uno: opacity-100;
@@ -65,7 +61,7 @@
 
     ol,
     ul {
-      --uno: flex flex-col gap-4 pl-5 list-disc ;
+      --uno: flex list-disc flex-col gap-4 pl-5;
 
       li {
         --uno: leading-6;
@@ -76,8 +72,8 @@
       }
     }
 
-    ol{
-      --uno: pl-8 list-decimal;
+    ol {
+      --uno: list-decimal pl-8;
     }
 
     &--ask {
@@ -93,3 +89,26 @@
     }
   }
 }
+
+.session-data-download-popover {
+  .arco-trigger-content {
+    --uno: py-1 px-2;
+    .arco-popover-content {
+      --uno: flex gap-2;
+
+      .markdown {
+        mask-image: url('@/assets/image/markdown.svg');
+        mask-size: contain;
+        --uno: bg-[var(--color-text-1)];
+      }
+
+      > * {
+        --uno: h-6 w-6 cursor-pointer text-[var(--color-text-1)] opacity-70;
+
+        &:hover {
+          --uno: opacity-100;
+        }
+      }
+    }
+  }
+}
diff --git a/src/stores/session.ts b/src/stores/session.ts
@@ -125,9 +125,15 @@ export const useSessionStore = defineStore(
 
     // 删除一条对话数据
     const deleteSessionData = async (payload: SessionData) => {
-      const { id, session_id } = payload
-      const sql = `DELETE FROM session_data WHERE id = '${id}' AND session_id = '${session_id}';`
-      await executeSQL(sql)
+      if (sessionDataList.value.length === 1) {
+        await deleteSession()
+      } else {
+        const { id, session_id } = payload
+        const sql = `DELETE FROM session_data WHERE id = '${id}' AND session_id = '${session_id}';`
+        await executeSQL(sql)
+      }
+
+      Message.success('删除成功')
 
       getSessionData()
     }