feat: support session markdown export, close #115 (#187)

Author: ayangweb

.eslintrc-auto-import.json

@@ -100,6 +100,7 @@
     "showWindow": true,
     "specialKeys": true,
     "storeToRefs": true,
+    "throttle": true,
     "toRaw": true,
     "toRef": true,
     "toRefs": true,

src/components/Function/components/Export.vue

@@ -1,13 +1,55 @@
 <script setup lang="ts">
-const { isThinking, sessionDataList } = storeToRefs(useSessionStore())
+import { sep } from '@tauri-apps/api/path'
+import type { SessionData } from '@/types'
+
+const { isThinking, sessionDataList, currentSession } = storeToRefs(
+  useSessionStore()
+)
+const { currentRole } = storeToRefs(useRoleStore())
 
 const disabled = computed(
   () => isThinking.value || !sessionDataList.value.length
 )
 
-const handleSelect = (value: string) => {
+const getRoleName = (item: SessionData) => {
+  const name = item.is_ask ? '你' : currentRole.value?.name
+
+  return name + '：'
+}
+
+const getMDContent = async (item: SessionData) => {
+  let content = ''
+
+  const { message, message_type } = item
+
+  if (currentSession.value?.type === 'text') {
+    content = message.content
+  } else {
+    if (message_type === 'text') {
+      content = message.content.prompt
+    } else {
+      for (const image of message.content) {
+        const imageName = await saveImageFromFile(image.file, true)
+
+        content += `\n![图片](.${sep}markdown-images${sep}${imageName})`
+      }
+    }
+  }
+
+  return getRoleName(item) + content + '\n\n'
+}
+
+const handleSelect = async (value: string) => {
   if (value === 'image') {
     saveImage('session-list')
+  } else if (value === 'markdown') {
+    let mdResult = ''
+
+    for await (const item of sessionDataList.value) {
+      mdResult += await getMDContent(item)
+    }
+
+    saveMarkdown(mdResult)
   }
 }
 </script>
@@ -25,7 +67,7 @@ const handleSelect = (value: string) => {
     </a-button>
     <template #content>
       <a-doption value="image">导出图片</a-doption>
-      <!-- <a-doption value="markdown">导出 Markdown</a-doption> -->
+      <a-doption value="markdown"> 导出 Markdown </a-doption>
     </template>
   </a-dropdown>
 </template>

src/components/Session/components/SessionContent.vue

@@ -69,8 +69,7 @@ const position = computed(() => (props.data.is_ask ? 'left' : 'right'))
             <a-tooltip content="导出 Markdown">
               <div
                 class="markdown"
-                :id="`markdown-${data.id}`"
-                @click="saveMarkdown($event, data.message.content)"
+                @click="saveMarkdown(data.message.content)"
               ></div>
             </a-tooltip>
 

src/components/Update/index.vue

@@ -78,7 +78,7 @@ onMounted(() => {
 
   listen('update-app', () => checkUpdate(false))
 
-  setTimeout(checkUpdate, 1000 * 60 * 60 * 24)
+  setInterval(checkUpdate, 1000 * 60 * 60 * 24)
 })
 </script>
 

src/sqls/index.ts

@@ -4,7 +4,7 @@ import { sep } from '@tauri-apps/api/path'
 import type { TableName, TablePayload, WherePayload } from '@/types'
 
 const dbFile = import.meta.env.DEV ? 'sql.dev.db' : 'sql.db'
-const db = await Database.load(`sqlite:${await appConfigDir()}${sep}${dbFile}`)
+const db = await Database.load(`sqlite:${await appConfigDir()}${dbFile}`)
 
 /**
  * sql 的字符串参数需要在加一个冒号

src/types/shared.d.ts

@@ -5,3 +5,5 @@ export type RequestHost = 'OPENAI' | 'GITHUB'
 export type SaveType = 'system' | 'image' | 'markdown'
 
 export type TokenUnit = 'TK' | '￠'
+
+export type Timeout = ReturnType<typeof setTimeout> | null

src/utils/saveImage.ts

@@ -6,7 +6,7 @@ import {
   readDir,
   createDir
 } from '@tauri-apps/api/fs'
-import { appConfigDir, sep } from '@tauri-apps/api/path'
+import { appConfigDir, downloadDir, sep } from '@tauri-apps/api/path'
 import html2canvas from 'html2canvas'
 import type { SaveType } from '@/types'
 
@@ -58,17 +58,27 @@ export const saveImageFromBase64 = async (base64: string) => {
   return fileName
 }
 
-export const saveImageFromFile = async (file: string) => {
-  const targetFile = `${await getName()}-${file}`
+export const saveImageFromFile = async (file: string, renderMd = false) => {
+  let targetFile = `${await getName()}-${file}`
+
+  if (renderMd) {
+    const folder = (await downloadDir()) + 'markdown-images'
+
+    await readDir(folder).catch(async () => {
+      await createDir(folder)
+    })
+
+    targetFile = folder + sep + file
+  }
 
   // 把对应的图片复制到下载文件夹
-  await copyFile(
-    `${await appConfigDir()}${sep}images/${sep}${file}`,
-    targetFile,
-    {
-      dir: BaseDirectory.Download
-    }
-  )
+  await copyFile(`${await appConfigDir()}images${sep}${file}`, targetFile, {
+    dir: BaseDirectory.Download
+  })
+
+  if (renderMd) {
+    return file
+  }
 
   openFilePath(targetFile)
 
@@ -85,7 +95,7 @@ const writeImage = async (
   if (type === 'system') {
     if (!fileName) return
 
-    const folder = (await appConfigDir()) + sep + 'images'
+    const folder = (await appConfigDir()) + 'images'
 
     await readDir(folder).catch(async () => {
       await createDir(folder)

src/utils/saveMarkdown.ts

@@ -1,29 +1,19 @@
 import { writeTextFile, BaseDirectory } from '@tauri-apps/api/fs'
 
-export const saveMarkdown = async (event: MouseEvent, content: any) => {
+export const saveMarkdown = throttle(async (content: any) => {
   try {
     const { currentSession } = useSessionStore()
 
-    const element = event.target as HTMLElement
-    const uuid = '_' + element.getAttribute('id')
-
-    if (window[uuid]) return
-    window[uuid] = uuid
-
     const file = `${currentSession?.title.slice(0, 10)}-${Date.now()}.md`
 
     await writeTextFile(file, content?.prompt || content, {
       dir: BaseDirectory.Download
     })
 
-    setTimeout(() => {
-      window[uuid] = null
-    }, 3000)
-
     openFilePath(file)
 
     Message.success('Markdown 文件导出成功')
   } catch (error) {
     Message.error('Markdown 文件导出失败，请重试！')
   }
-}
+})

src/utils/shared.ts

@@ -1,3 +1,5 @@
+import { Timeout } from '@/types'
+
 /**
  * 判断数据是否为 null 或者 undefined
  * @param value 数据
@@ -27,3 +29,24 @@ export const NOOP = () => {
  * 获取数组/字符串最后一个元素
  */
 export const getLastItem = <T>(arr: T[]) => arr[arr.length - 1]
+
+/**
+ * 节流
+ * @param func 回调函数
+ * @param delay 延迟时间
+ */
+export const throttle = <T extends (...args: any[]) => void>(
+  func: T,
+  delay = 3000
+): T => {
+  let lastTime = 0
+
+  return ((...args: any[]) => {
+    const currentTime = Date.now()
+    if (currentTime - lastTime > delay) {
+      lastTime = currentTime
+
+      func.apply(this, args)
+    }
+  }) as T
+}