stylus 语法换成 saas 语法

web/src/views/ChatExport.vue

@@ -7,93 +7,98 @@
 
       <div v-for="item in chatData" :key="item.id">
         <chat-prompt v-if="item.type === 'prompt'" :data="item" list-style="list" />
-        <chat-reply v-else-if="item.type === 'reply'" :data="item" :read-only="true" list-style="list" />
+        <chat-reply
+          v-else-if="item.type === 'reply'"
+          :data="item"
+          :read-only="true"
+          list-style="list"
+        />
       </div>
     </div>
     <!-- end chat box -->
   </div>
 </template>
 <script setup>
-import ChatReply from "@/components/ChatReply.vue";
-import ChatPrompt from "@/components/ChatPrompt.vue";
-import { nextTick, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import { httpGet } from "@/utils/http";
-import "highlight.js/styles/a11y-dark.css";
-import hl from "highlight.js";
-import { ElMessage } from "element-plus";
-import Clipboard from "clipboard";
+import ChatPrompt from '@/components/ChatPrompt.vue'
+import ChatReply from '@/components/ChatReply.vue'
+import { httpGet } from '@/utils/http'
+import Clipboard from 'clipboard'
+import { ElMessage } from 'element-plus'
+import hl from 'highlight.js'
+import 'highlight.js/styles/a11y-dark.css'
+import { nextTick, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-const chatData = ref([]);
-const router = useRouter();
-const chatId = router.currentRoute.value.query["chat_id"];
-const loading = ref(true);
-const chatTitle = ref("");
+const chatData = ref([])
+const router = useRouter()
+const chatId = router.currentRoute.value.query['chat_id']
+const loading = ref(true)
+const chatTitle = ref('')
 
-httpGet("/api/chat/history?chat_id=" + chatId)
+httpGet('/api/chat/history?chat_id=' + chatId)
   .then((res) => {
-    const data = res.data;
+    const data = res.data
     if (!data) {
-      loading.value = false;
-      return;
+      loading.value = false
+      return
     }
 
     for (let i = 0; i < data.length; i++) {
-      if (data[i].type === "prompt") {
-        chatData.value.push(data[i]);
-        continue;
-      } else if (data[i].type === "mj") {
-        data[i].content = JSON.parse(data[i].content);
-        data[i].content.content = data[i].content?.content;
-        chatData.value.push(data[i]);
-        continue;
+      if (data[i].type === 'prompt') {
+        chatData.value.push(data[i])
+        continue
+      } else if (data[i].type === 'mj') {
+        data[i].content = JSON.parse(data[i].content)
+        data[i].content.content = data[i].content?.content
+        chatData.value.push(data[i])
+        continue
       }
 
-      data[i].orgContent = data[i].content;
-      data[i].content = data[i].content;
-      chatData.value.push(data[i]);
+      data[i].orgContent = data[i].content
+      data[i].content = data[i].content
+      chatData.value.push(data[i])
     }
 
     nextTick(() => {
-      hl.configure({ ignoreUnescapedHTML: true });
-      const blocks = document.querySelector("#chat-box").querySelectorAll("pre code");
+      hl.configure({ ignoreUnescapedHTML: true })
+      const blocks = document.querySelector('#chat-box').querySelectorAll('pre code')
       blocks.forEach((block) => {
-        hl.highlightElement(block);
-      });
-    });
-    loading.value = false;
+        hl.highlightElement(block)
+      })
+    })
+    loading.value = false
   })
   .catch((e) => {
-    ElMessage.error("加载聊天记录失败：" + e.message);
-  });
+    ElMessage.error('加载聊天记录失败：' + e.message)
+  })
 
-httpGet("/api/chat/detail?chat_id=" + chatId)
+httpGet('/api/chat/detail?chat_id=' + chatId)
   .then((res) => {
-    chatTitle.value = res.data.title;
+    chatTitle.value = res.data.title
   })
   .catch((e) => {
-    ElMessage.error("加载会失败： " + e.message);
-  });
+    ElMessage.error('加载会失败： ' + e.message)
+  })
 
 onMounted(() => {
-  const clipboard = new Clipboard(".copy-reply");
-  clipboard.on("success", () => {
-    ElMessage.success("复制成功！");
-  });
+  const clipboard = new Clipboard('.copy-reply')
+  clipboard.on('success', () => {
+    ElMessage.success('复制成功！')
+  })
 
-  clipboard.on("error", () => {
-    ElMessage.error("复制失败！");
-  });
-});
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！')
+  })
+})
 </script>
-<style lang="stylus">
+<style lang="scss">
 .chat-export {
-  display flex
-  justify-content center
-  padding 0 20px
+  display: flex;
+  justify-content: center;
+  padding: 0 20px;
 
   .chat-box {
-    width 100%;
+    width: 100%;
     // 变量定义
     --content-font-size: 16px;
     --content-color: #c1c1c1;
@@ -102,7 +107,7 @@ onMounted(() => {
     padding: 0 0 50px 0;
 
     .title {
-      text-align center
+      text-align: center;
     }
 
     .chat-line {
@@ -111,7 +116,7 @@ onMounted(() => {
       align-items: center;
 
       .chat-line-inner {
-        max-width 800px
+        max-width: 800px;
       }
     }
   }