From 9a47bc7456f364f7e3afec39f08f0185e1c223e3 Mon Sep 17 00:00:00 2001
From: ayang <75017711+bilibili-ayang@users.noreply.github.com>
Date: Tue, 21 Mar 2023 20:50:33 +0800
Subject: [PATCH] feat: link open to browser (#47)

---
 src/App.vue                                   |  4 ++-
 src/assets/css/global.scss                    |  2 +-
 src/assets/css/theme.scss                     |  4 +--
 .../Function/components/HistoryDrawer.vue     | 13 ++++++--
 .../Function/components/SettingsModal.vue     |  4 +--
 src/components/Input/index.vue                |  4 +--
 src/components/Session/index.scss             |  4 +++
 src/components/Session/index.vue              | 10 ++++--
 src/hooks/index.ts                            |  1 +
 src/hooks/useObserverLink.ts                  | 31 +++++++++++++++++++
 src/stores/settings.ts                        |  2 +-
 src/utils/copyCode.ts                         |  4 +--
 src/utils/index.ts                            |  1 +
 13 files changed, 66 insertions(+), 18 deletions(-)
 create mode 100644 src/hooks/index.ts
 create mode 100644 src/hooks/useObserverLink.ts

diff --git a/src/App.vue b/src/App.vue
index 89297b1..8d59220 100644
--- a/src/App.vue
+++ b/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
 
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index f006454..fa9eeae 100644
--- a/src/assets/css/global.scss
+++ b/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 {
diff --git a/src/assets/css/theme.scss b/src/assets/css/theme.scss
index 0207325..5fd98b8 100644
--- a/src/assets/css/theme.scss
+++ b/src/assets/css/theme.scss
@@ -3,7 +3,7 @@ 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'] {
@@ -11,5 +11,5 @@ body[arco-theme='dark'] {
   --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);
 }
diff --git a/src/components/Function/components/HistoryDrawer.vue b/src/components/Function/components/HistoryDrawer.vue
index 2fa3255..d876a02 100644
--- a/src/components/Function/components/HistoryDrawer.vue
+++ b/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;
     }
   }
 }
diff --git a/src/components/Function/components/SettingsModal.vue b/src/components/Function/components/SettingsModal.vue
index 760f33a..04e81db 100644
--- a/src/components/Function/components/SettingsModal.vue
+++ b/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">
diff --git a/src/components/Input/index.vue b/src/components/Input/index.vue
index 73dcbcf..9718ef7 100644
--- a/src/components/Input/index.vue
+++ b/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;
diff --git a/src/components/Session/index.scss b/src/components/Session/index.scss
index efec1d3..ab92cc9 100644
--- a/src/components/Session/index.scss
+++ b/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 {
diff --git a/src/components/Session/index.vue b/src/components/Session/index.vue
index e613732..06a0f78 100644
--- a/src/components/Session/index.vue
+++ b/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">
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..7611cb3
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useObserverLink'
diff --git a/src/hooks/useObserverLink.ts b/src/hooks/useObserverLink.ts
new file mode 100644
index 0000000..bcbc01d
--- /dev/null
+++ b/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
+  })
+}
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index f4ca372..534f592 100644
--- a/src/stores/settings.ts
+++ b/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()
 
diff --git a/src/utils/copyCode.ts b/src/utils/copyCode.ts
index 8b9a5e2..190ab5d 100644
--- a/src/utils/copyCode.ts
+++ b/src/utils/copyCode.ts
@@ -29,8 +29,6 @@ const renderCode = (originRule: (...args: RulesArgs) => string) => {
     const [tokens, idx] = args
 
     const content = tokens[idx].content
-      .replaceAll('"', '&quot;')
-      .replaceAll("'", '&lt;')
 
     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)
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index d5f7c7a..648ca4d 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,3 +2,4 @@ export * from './shared'
 export * from './tauri'
 export * from './keyMap'
 export * from './saveImage'
+export * from './copyCode'