perf: optimized some styles

package.json

@@ -40,7 +40,6 @@
     "@arco-design/web-vue": "^2.44.1",
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
-    "@iconify-json/mdi": "^1.1.50",
     "@kidonng/daisyui": "^2.51.3",
     "@release-it/conventional-changelog": "^5.1.1",
     "@tauri-apps/cli": "^1.2.2",

src/App.vue

@@ -3,7 +3,7 @@ import { appWindow } from '@tauri-apps/api/window'
 import { initSQL } from '@/sqls'
 import { useSettingsStore } from '@/stores'
 
-const { themeClass, isFix, windowFocused } = storeToRefs(useSettingsStore())
+const { isFix, windowFocused } = storeToRefs(useSettingsStore())
 
 const isLoading = ref(true)
 
@@ -26,10 +26,10 @@ onMounted(async () => {
 <template>
   <div
     class="frosted flex h-screen flex-col overflow-hidden rounded-xl p-2"
-    :class="[themeClass, windowFocused ? 'bordered' : 'bordered-transparent']"
+    :class="[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"
+      class="bg-gray/60 z-999 transition-300 fixed top-2 left-1/2 h-3 w-80 -translate-x-1/2 cursor-move rounded-md opacity-0 hover:opacity-100"
       data-tauri-drag-region
     ></div>
 

src/assets/css/global.scss

@@ -59,6 +59,8 @@ body {
 .frosted {
   position: relative;
 
+  background-color: var(--opacity-background);
+
   &::before,
   &::after {
     position: absolute;
@@ -81,4 +83,3 @@ body {
   color: rgb(var(--primary-6));
   background-color: transparent;
 }
-

src/assets/css/theme.scss

@@ -1,15 +1,15 @@
 body {
-  --background-color: #f2f3f5;
-
+  --session-background: #f2f3f5;
   --scroll-thumb-color: #c0c0c0;
   --scroll-thumb-color-hover: #a7a7a7;
   --scroll-track-color: #f1f1f1;
+  --opacity-background: rgba(255, 255, 255, 0.7);
 }
 
 body[arco-theme='dark'] {
-  --background-color: #17171a;
-
+  --session-background: #17171a;
   --scroll-thumb-color: #686868;
   --scroll-thumb-color-hover: #7a7a7a;
   --scroll-track-color: #444;
+  --opacity-background: rgba(0, 0, 0, 0.7);
 }

src/components/Fixed/index.vue

@@ -9,7 +9,7 @@ const { isFix } = storeToRefs(useSettingsStore())
   <div class="swap swap-rotate" @click="isFix = !isFix">
     <input type="checkbox" v-model="isFix" />
 
-    <IconPushpin class="swap-on text-[rgb(var(--arcoblue-6))]" />
+    <IconPushpin class="swap-on text-[rgb(var(--primary-6))]" />
 
     <div class="swap-off">
       <IconPushpin class="-rotate-45" />

src/components/Function/components/HistoryDrawer.vue

@@ -32,7 +32,7 @@ const handleClick = (item: SessionPayload) => {
     <ul class="flex flex-col gap-2">
       <li
         v-for="item in sessionList"
-        class="group flex cursor-pointer items-center justify-between rounded-lg p-2 transition hover:bg-[var(--color-fill-2)]"
+        class="transition-300 group flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-[var(--color-fill-2)]"
         :class="{
           'bg-[rgb(var(--blue-6))]! text-white': item.id === currentSession?.id
         }"

src/components/Function/components/ShortcutKey.vue

@@ -56,7 +56,7 @@ const handleKeyup = (event: KeyboardEvent) => {
     <div
       ref="bindingElement"
       tabindex="0"
-      class="flex flex-1 cursor-pointer items-center justify-between rounded border border-solid border-[var(--color-fill-2)] bg-[var(--color-fill-2)] p-2 outline-none transition"
+      class="transition-300 flex flex-1 cursor-pointer items-center justify-between rounded border border-solid border-[var(--color-fill-2)] bg-[var(--color-fill-2)] p-2 outline-none"
       :class="[isBinding ? 'border-[rgb(var(--primary-5))]!' : '']"
       @focus="isBinding = true"
       @blur="isBinding = false"

src/components/Input/components/RoleList.vue

@@ -140,7 +140,7 @@ const handleClose = () => {
       <ul>
         <li
           v-for="item in renderList"
-          class="flex cursor-pointer items-center gap-4 bg-transparent p-4 text-[var(--color-text-1)] transition hover:bg-[var(--color-fill-2)]"
+          class="transition-300 flex cursor-pointer items-center gap-4 bg-transparent p-4 text-[var(--color-text-1)] hover:bg-[var(--color-fill-2)]"
           :class="{
             'bg-[rgb(var(--blue-6))]!': currentRole?.id === item.id,
             'bg-transparent!': item.isEdit,

src/components/Input/index.vue

@@ -67,10 +67,14 @@ onMounted(() => {
     <a-textarea
       ref="textAreaElement"
       class="bordered bg-transparent!"
+      :class="!textAreaValue && 'rounded-10'"
       :placeholder="isThinking ? 'AI 正在思考...' : '有什么问题尽管问我'"
       v-model="textAreaValue"
       :disabled="isThinking || isEdit"
-      auto-size
+      :auto-size="{
+        minRows: 1,
+        maxRows: 5
+      }"
       clearable
       @keydown="onKeydown"
     ></a-textarea>
@@ -82,16 +86,11 @@ onMounted(() => {
   .arco-textarea-wrapper {
     transition: all 0.3s;
 
-    border-radius: 32px;
-
     &:hover {
-      border-color: var(--color-neutral-4);
+      --uno: border-[var(--color-neutral-4)];
     }
     &.arco-textarea-focus {
-      max-height: 96px;
-
-      border-color: rgb(var(--arcoblue-6));
-      border-radius: 0;
+      --uno: rounded-0 border-[rgb(var(--primary-6))];
     }
   }
 }

src/components/Session/index.scss

@@ -0,0 +1,57 @@
+.session {
+  .blink-block::after {
+    animation: blink 1s infinite;
+
+    --uno: absolute h-6 w-1 bg-[var(--color-text-3)] content-none;
+  }
+
+  ::v-deep(.session-item) {
+    pre {
+      --uno: m0;
+      code {
+        --uno: rounded-md leading-6;
+      }
+
+      + .code-copy {
+        background: url('@/assets/image/copy.svg') no-repeat center;
+        background-size: contain;
+
+        --uno: transition-300 absolute top-2 right-2 h-6 w-6 cursor-pointer
+          text-white opacity-0;
+
+        &:hover {
+          --uno: opacity-100;
+        }
+
+        &.copied {
+          opacity: 1 !important;
+          background-image: url('@/assets/image/copied.svg');
+        }
+      }
+
+      &:hover {
+        + .code-copy {
+          --uno: opacity-70;
+        }
+      }
+    }
+
+    ol,
+    ul,
+    li {
+      --uno: flex flex-col gap-4;
+    }
+  }
+
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

src/components/Session/index.vue

@@ -51,17 +51,17 @@ watchEffect(() => {
           class="relative flex w-[calc(100%-8rem)] flex-col gap-2"
           :class="item.is_ask && 'items-end'"
         >
-          <span class="text-true-gray text-xs">{{
-            localTime(item.time!)
-          }}</span>
+          <span class="text-xs text-[var(--color-text-2)]">
+            {{ localTime(item.time!) }}
+          </span>
 
           <div class="blink-block" v-if="!item.message.content"></div>
           <div
             class="session-item relative 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)]'
+                : 'bg-[var(--session-background)]'
             "
             v-html="marked.render(item.message.content)"
             v-else
@@ -76,22 +76,5 @@ watchEffect(() => {
 </template>
 
 <style scoped lang="scss">
-.session {
-  .blink-block::after {
-    animation: blink 1s infinite;
-    --uno: absolute h-6 w-1 bg-[var(--color-text-2)] content-none;
-  }
-
-  @keyframes blink {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-}
+@import './index.scss';
 </style>

src/stores/settings.ts

@@ -9,9 +9,6 @@ export const useSettingsStore = defineStore(
   () => {
     // 主题
     const themeMode = ref(THEME.light)
-    const themeClass = computed(() =>
-      themeMode.value === THEME.light ? 'bg-white/70' : 'bg-black/70'
-    )
 
     // 用户的唯一值
     const uuid = ref('')
@@ -108,7 +105,6 @@ export const useSettingsStore = defineStore(
 
     return {
       themeMode,
-      themeClass,
       uuid,
       isFix,
       windowFocused,

src/types/declare.d.ts

@@ -1 +1,5 @@
 declare module 'markdown-it-code-copy'
+
+declare interface Window {
+  [key: string]: any
+}

src/utils/copyCode.ts

@@ -1,61 +1,51 @@
-// @unocss-include
 import Clipboard from 'clipboard'
 
+type RulesArgs = [Array<{ content: string }>, number]
+
 const PLUGIN_CLASS = 'code-copy'
 
 new Clipboard(`.${PLUGIN_CLASS}`, {
-  text: (trigger: HTMLButtonElement) => {
-    trigger.classList.add('i-mdi-checkbox-multiple-marked-outline')
-    setTimeout(() => {
-      trigger.classList.remove('i-mdi-checkbox-multiple-marked-outline')
-    }, 2000)
-    return trigger.getAttribute('data-clipboard-text') ?? ''
-  }
-})
+  text: (trigger: HTMLElement) => {
+    const uuid = trigger.getAttribute('data-uuid')
+    const copyValue = trigger.getAttribute('data-clipboard-text')
 
-interface Options {
-  buttonClass?: string
-}
+    if (!uuid || !copyValue || window[uuid]) return ''
 
-type RulesArgs = [Array<{ content: string }>, number]
+    trigger.classList.add('copied')
 
-const defaultOptions: Options = {
-  buttonClass:
-    'text-white h-5 absolute cursor-pointer i-mdi-checkbox-multiple-blank-outline top-6 right-2'
-}
+    window[uuid] = setTimeout(() => {
+      trigger.classList.remove('copied')
 
-const renderCode = (
-  origRule: (...args: RulesArgs) => string,
-  options: Options
-) => {
-  options = { ...defaultOptions, ...options }
+      clearTimeout(window[uuid])
+      window[uuid] = null
+    }, 3000)
+
+    return copyValue
+  }
+})
+
+const renderCode = (originRule: (...args: RulesArgs) => string) => {
   return (...args: RulesArgs) => {
     const [tokens, idx] = args
+
     const content = tokens[idx].content
       .replaceAll('"', '&quot;')
       .replaceAll("'", '&lt;')
-    const origRendered = origRule(...args)
 
-    if (content.length === 0) {
-      return origRendered
-    }
+    const originRendered = originRule(...args)
+
+    if (!content) return originRendered
 
     return `
-<div style="position: relative">
-	${origRendered}
-	<button class="${PLUGIN_CLASS} ${
-      options.buttonClass ?? ''
-    }" data-clipboard-text="${content}"  title="Copy code">
-	</button>
-</div>
-`
+    <div class='relative'>
+      ${originRendered}
+      <div class="${PLUGIN_CLASS}" data-clipboard-text="${content}" data-uuid="${crypto.randomUUID()}" title="复制代码"></div>
+    </div>
+    `
   }
 }
 
-export default (md: any, options: Options) => {
-  md.renderer.rules.code_block = renderCode(
-    md.renderer.rules.code_block,
-    options
-  )
-  md.renderer.rules.fence = renderCode(md.renderer.rules.fence, options)
+export default (md: any) => {
+  md.renderer.rules.code_block = renderCode(md.renderer.rules.code_block)
+  md.renderer.rules.fence = renderCode(md.renderer.rules.fence)
 }