From b24a19a0356fc8a6c9df7186b292f43484df1558 Mon Sep 17 00:00:00 2001
From: Brian Yang <youngzm339@outlook.com>
Date: Wed, 22 May 2024 15:45:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=8D=95=E6=AC=A1=E8=81=8A=E5=A4=A9=E7=9A=84=E5=85=A8=E9=83=A8?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E8=AE=B0=E5=BD=95=E4=B8=BAMarkdown=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E6=88=96HTML=E6=96=87=E4=BB=B6=20(#502)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/package.json                |  3 ++
 ui/src/views/chat/pc/index.vue | 57 +++++++++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/ui/package.json b/ui/package.json
index 229b9d3a..4bc39ccc 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -19,6 +19,7 @@
     "cropperjs": "^1.6.2",
     "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
+    "file-saver": "^2.0.5",
     "install": "^0.13.0",
     "katex": "^0.16.10",
     "lodash": "^4.17.21",
@@ -31,6 +32,7 @@
     "markdown-it-sup": "^1.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-toc-done-right": "^4.2.0",
+    "marked": "^12.0.2",
     "md-editor-v3": "4.12.1",
     "medium-zoom": "^1.1.0",
     "mermaid": "^10.9.0",
@@ -49,6 +51,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node18": "^18.2.0",
+    "@types/file-saver": "^2.0.7",
     "@types/jsdom": "^21.1.1",
     "@types/markdown-it": "^13.0.7",
     "@types/markdown-it-highlightjs": "^3.3.4",
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
index 4b91d2e6..c1105591 100644
--- a/ui/src/views/chat/pc/index.vue
+++ b/ui/src/views/chat/pc/index.vue
@@ -7,7 +7,10 @@
       <div class="chat-pc__left border-r">
         <div class="p-24 pb-0">
           <el-button class="add-button w-full primary" @click="newChat">
-            <el-icon><Plus /></el-icon><span class="ml-4">新建对话</span>
+            <el-icon>
+              <Plus />
+            </el-icon>
+            <span class="ml-4">新建对话</span>
           </el-button>
           <p class="mt-20 mb-8">历史记录</p>
         </div>
@@ -46,6 +49,20 @@
           </h4>
 
           <span v-if="currentRecordList.length" class="flex align-center">
+            <el-dropdown class="mr-8">
+                <AppIcon
+                  iconName="takeaway-box"
+                  class="info mr-8"
+                  style="font-size: 16px"
+                  title="导出聊天记录"
+                ></AppIcon>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="exportMarkdown">导出 Markdown</el-dropdown-item>
+                  <el-dropdown-item @click="exportHTML">导出 HTML</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
             <AppIcon iconName="app-chat-record" class="info mr-8" style="font-size: 16px"></AppIcon>
             <span class="lighter"> {{ paginationConfig.total }} 条提问 </span>
           </span>
@@ -76,10 +93,14 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { marked } from 'marked'
+import { saveAs } from 'file-saver'
 import applicationApi from '@/api/application'
 import useStore from '@/stores'
+
 import useResize from '@/layout/hooks/useResize'
 useResize()
+
 const route = useRoute()
 
 const {
@@ -144,6 +165,7 @@ function getAccessToken(token: string) {
       applicationAvailable.value = false
     })
 }
+
 function getProfile() {
   applicationApi
     .getProfile(loading)
@@ -210,6 +232,7 @@ function getChatRecord() {
       }
     })
 }
+
 const clickListHandle = (item: any) => {
   if (item.id !== currentChatId.value) {
     paginationConfig.current_page = 1
@@ -230,6 +253,28 @@ function refresh(id: string) {
   currentChatId.value = id
 }
 
+async function exportMarkdown(): Promise<void> {
+  const suggestedName: string = `${currentChatId.value}.md`
+  const markdownContent: string = currentRecordList.value.map((record: any) =>
+    `# ${record.problem_text}\n\n${record.answer_text}\n\n`
+  ).join('\n')
+
+  const blob: Blob = new Blob([markdownContent], { type: 'text/markdown;charset=utf-8' })
+  saveAs(blob, suggestedName)
+}
+
+async function exportHTML(): Promise<void> {
+  const suggestedName: string = `${currentChatId.value}.html`
+  const markdownContent: string = currentRecordList.value.map((record: any) =>
+    `# ${record.problem_text}\n\n${record.answer_text}\n\n`
+  ).join('\n')
+  const htmlContent: any = marked(markdownContent)
+
+  const blob: Blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
+  saveAs(blob, suggestedName)
+}
+
+
 onMounted(() => {
   user.changeUserType(2)
   getAccessToken(accessToken)
@@ -239,6 +284,7 @@ onMounted(() => {
 .chat-pc {
   background-color: var(--app-layout-bg-color);
   overflow: hidden;
+
   &__header {
     background: var(--app-header-bg-color);
     position: fixed;
@@ -251,25 +297,31 @@ onMounted(() => {
     box-sizing: border-box;
     border-bottom: 1px solid var(--el-border-color);
   }
+
   &__left {
     padding-top: calc(var(--app-header-height) - 8px);
     background: #ffffff;
     width: 280px;
+
     .add-button {
       border: 1px solid var(--el-color-primary);
     }
+
     .left-height {
       height: calc(100vh - var(--app-header-height) - 135px);
     }
   }
+
   &__right {
     width: calc(100% - 280px);
     padding-top: calc(var(--app-header-height));
     overflow: hidden;
     position: relative;
+
     .right-header {
       background: #ffffff;
     }
+
     .right-height {
       height: calc(100vh - var(--app-header-height) * 2 - 24px);
     }
@@ -279,6 +331,7 @@ onMounted(() => {
     position: relative;
     text-align: center;
     color: var(--el-color-info);
+
     ::before {
       content: '';
       width: 17%;
@@ -288,6 +341,7 @@ onMounted(() => {
       left: 16px;
       top: 50%;
     }
+
     ::after {
       content: '';
       width: 17%;
@@ -298,6 +352,7 @@ onMounted(() => {
       top: 50%;
     }
   }
+
   .chat-width {
     max-width: var(--app-chat-width, 860px);
     margin: 0 auto;