feat: link open to browser (#47)

src/App.vue

@@ -2,6 +2,7 @@
 import { appWindow } from '@tauri-apps/api/window'
 import { initSQL } from '@/sqls'
 import { useSettingsStore } from '@/stores'
+import { useObserverLink } from '@/hooks'
 
 const { isFix, windowFocused } = storeToRefs(useSettingsStore())
 
@@ -12,7 +13,8 @@ onMounted(async () => {
 
   isLoading.value = false
 
-  // 监听窗口有无获取焦点
+  useObserverLink()
+
   appWindow.onFocusChanged(({ payload }) => {
     windowFocused.value = payload
 

src/assets/css/global.scss

@@ -59,7 +59,7 @@ body {
 .frosted {
   position: relative;
 
-  background-color: var(--opacity-background);
+  background-color: var(--frosted-background);
 
   &::before,
   &::after {

src/assets/css/theme.scss

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

src/components/Function/components/HistoryDrawer.vue

@@ -1,15 +1,22 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useSessionStore } from '@/stores'
 import { IconDelete } from '@arco-design/web-vue/es/icon'
+import { Message } from '@arco-design/web-vue'
 import type { SessionPayload } from '@/types'
 
 const props = defineProps<{ visible: boolean; setVisible: () => void }>()
 
 const sessionStore = useSessionStore()
-const { sessionList, currentSession } = storeToRefs(sessionStore)
+const { sessionList, currentSession, isThinking } = storeToRefs(sessionStore)
 const { switchSession, getSessionList, deleteSession } = sessionStore
 
 const handleClick = (item: SessionPayload) => {
+  if (isThinking.value) {
+    Message.info('稍等片刻，AI 正在思考')
+
+    return
+  }
+
   switchSession(item)
 
   props.setVisible()
@@ -66,7 +73,7 @@ const handleClick = (item: SessionPayload) => {
   --uno: overflow-hidden rounded-xl;
   .arco-drawer {
     .arco-drawer-body {
-      padding: 0.5rem;
+      --uno: p-2;
     }
   }
 }

src/components/Function/components/SettingsModal.vue

@@ -46,7 +46,7 @@ watch(
     <div class="flex flex-col gap-6">
       <div class="flex gap-2">
         <a-checkbox v-model="autoStart">开机自启动</a-checkbox>
-        <a-checkbox v-model="isRememberPosition">记住上次窗口位置</a-checkbox>
+        <a-checkbox v-model="isRememberPosition">记住窗口上次位置</a-checkbox>
       </div>
 
       <!-- 热键绑定 -->
@@ -62,7 +62,7 @@ watch(
       <a-input-password
         v-model="apiKey"
         class="w-full"
-        placeholder="API Key"
+        placeholder="OpenAI API KEY"
         allow-clear
       />
       <p class="text-3 text-right text-[var(--color-text-3)]" v-if="apiKey">

src/components/Input/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { appWindow } from '@tauri-apps/api/window'
 import { Message } from '@arco-design/web-vue'
 import { useSessionStore, useRoleStore } from '@/stores'
@@ -81,7 +81,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .app-input {
   .arco-textarea-wrapper {
     transition: all 0.3s;

src/components/Session/index.scss

@@ -45,6 +45,10 @@
     li {
       --uno: flex flex-col gap-4;
     }
+
+    a {
+      --uno: text-[rgb(var(--primary-6))] hover:underline;
+    }
   }
 
   @keyframes blink {

src/components/Session/index.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import MarkdownIt from 'markdown-it'
 import MarkdownItHighlight from 'markdown-it-highlightjs'
-import CopyCode from '@/utils/copyCode'
 import { IconImage } from '@arco-design/web-vue/es/icon'
-import { saveImage } from '@/utils'
+import { copyCode } from '@/utils'
 import { useSettingsStore, useSessionStore, useRoleStore } from '@/stores'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 
 dayjs.extend(utc)
 
-const marked = new MarkdownIt().use(MarkdownItHighlight).use(CopyCode)
+const marked = new MarkdownIt({
+  linkify: true
+})
+  .use(MarkdownItHighlight)
+  .use(copyCode)
 
 const { uuid } = storeToRefs(useSettingsStore())
 const { sessionDataList } = storeToRefs(useSessionStore())
@@ -35,6 +38,7 @@ watchEffect(() => {
 <template>
   <div
     ref="sessionElement"
+    id=""
     class="session relative flex-1 cursor-default overflow-auto"
   >
     <template v-if="sessionDataList.length">

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useObserverLink'

src/hooks/useObserverLink.ts

@@ -0,0 +1,31 @@
+import { open } from '@tauri-apps/api/shell'
+
+export const useObserverLink = () => {
+  const handleElement = (element: HTMLElement) => {
+    if (element.tagName === 'A') {
+      element.onclick = (event) => {
+        event.preventDefault()
+
+        const url = element.getAttribute('href')
+        if (!url) return
+
+        open(url)
+      }
+    } else {
+      Array.from(element.children).forEach((item) =>
+        handleElement(item as HTMLElement)
+      )
+    }
+  }
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      handleElement(mutation.target as HTMLElement)
+    })
+  })
+
+  observer.observe(document.querySelector('#app') as HTMLElement, {
+    childList: true,
+    subtree: true
+  })
+}

src/stores/settings.ts

@@ -42,7 +42,7 @@ export const useSettingsStore = defineStore(
         themeMode.value === THEME.light ? THEME.dark : THEME.light
     }
 
-    // 绑定热键
+    // 绑定快捷键
     const registerKey = async () => {
       await unregisterAll()
 

src/utils/copyCode.ts

@@ -29,8 +29,6 @@ const renderCode = (originRule: (...args: RulesArgs) => string) => {
     const [tokens, idx] = args
 
     const content = tokens[idx].content
-      .replaceAll('"', '"')
-      .replaceAll("'", '<')
 
     const originRendered = originRule(...args)
 
@@ -45,7 +43,7 @@ const renderCode = (originRule: (...args: RulesArgs) => string) => {
   }
 }
 
-export default (md: any) => {
+export const copyCode = (md: any) => {
   md.renderer.rules.code_block = renderCode(md.renderer.rules.code_block)
   md.renderer.rules.fence = renderCode(md.renderer.rules.fence)
 }

src/utils/index.ts

@@ -2,3 +2,4 @@ export * from './shared'
 export * from './tauri'
 export * from './keyMap'
 export * from './saveImage'
+export * from './copyCode'