From c618a2f38bb9b1ac45d09eec9aa5f93d8d4fd7e5 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 11:19:34 +0800
Subject: [PATCH 01/14] feat: select-share-menu (#211)

---
 package.json                          |   4 +-
 src/.vitepress/theme/index.ts         |   4 +
 src/components/Layout.vue             |  15 ++
 src/components/SelectionShareMenu.vue | 184 +++++++++++++++++++
 src/components/ShareCard.vue          | 244 ++++++++++++++++++++++++++
 5 files changed, 450 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Layout.vue
 create mode 100644 src/components/SelectionShareMenu.vue
 create mode 100644 src/components/ShareCard.vue

diff --git a/package.json b/package.json
index 76e5f774..6ce80dd8 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
   },
   "dependencies": {
     "@primeuix/themes": "^1.0.3",
-    "primevue": "^4.3.3"
+    "dom-to-image-more": "^3.5.0",
+    "primevue": "^4.3.3",
+    "qrcodejs2": "^0.0.2"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
diff --git a/src/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts
index 8a041ca5..1073678b 100644
--- a/src/.vitepress/theme/index.ts
+++ b/src/.vitepress/theme/index.ts
@@ -5,11 +5,14 @@ import DefaultTheme from "vitepress/theme";
 import Aura from "@primeuix/themes/aura";
 import PrimeVue from "primevue/config";
 
+import Layout from "../../components/Layout.vue";
 import PostList from "../../components/PostList.vue";
+import SelectionShareMenu from "../../components/SelectionShareMenu.vue";
 import "./style.css";
 
 export default {
   extends: DefaultTheme,
+  Layout,
   enhanceApp({ app, router }) {
     /* redirect legacy hash path, can only be done on client side */
     router.onAfterRouteChange = async (to) => {
@@ -25,5 +28,6 @@ export default {
 
     /* register global components */
     app.component("PostList", PostList);
+    app.component("SelectionShareMenu", SelectionShareMenu);
   },
 } satisfies Theme;
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
new file mode 100644
index 00000000..b3b9d719
--- /dev/null
+++ b/src/components/Layout.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import SelectionShareMenu from './SelectionShareMenu.vue'
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #layout-bottom>
+      <SelectionShareMenu />
+    </template>
+  </Layout>
+</template>
diff --git a/src/components/SelectionShareMenu.vue b/src/components/SelectionShareMenu.vue
new file mode 100644
index 00000000..394bbd52
--- /dev/null
+++ b/src/components/SelectionShareMenu.vue
@@ -0,0 +1,184 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+
+import ShareCard from "./ShareCard.vue";
+
+const menuVisible = ref(false);
+const menuPosition = ref({ x: 0, y: 0 });
+const selectedText = ref("");
+const shareCardVisible = ref(false);
+
+// Function to show the menu
+const showMenu = (x, y, text) => {
+  if (text && text.trim() !== "") {
+    selectedText.value = text;
+    menuPosition.value = { x, y };
+    menuVisible.value = true;
+  }
+};
+
+// Function to hide the menu
+const hideMenu = () => {
+  menuVisible.value = false;
+};
+
+// Handle text selection
+const handleSelection = () => {
+  if (typeof window === "undefined") return;
+
+  const selection = window.getSelection();
+  if (selection && selection.toString().trim() !== "") {
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+
+    // Position the menu above the selection
+    const x = rect.left + rect.width / 2;
+    const y = rect.top - 10; // Position above the selection
+
+    showMenu(x, y, selection.toString());
+  }
+};
+
+// Handle mouseup event to detect selection
+const handleMouseUp = () => {
+  if (typeof window === "undefined") return;
+  setTimeout(handleSelection, 10); // Small delay to ensure selection is complete
+};
+
+// Copy selected text to clipboard
+const copyText = async () => {
+  if (typeof navigator === "undefined") return;
+
+  try {
+    await navigator.clipboard.writeText(selectedText.value);
+    // Use a non-blocking notification instead of alert
+    console.log("文本已复制到剪贴板");
+    hideMenu();
+  } catch (err) {
+    console.error("复制失败:", err);
+  }
+};
+
+// Share selected text
+const shareText = () => {
+  // Show share card in the current page
+  shareCardVisible.value = true;
+  hideMenu();
+};
+
+// Close share card
+const closeShareCard = () => {
+  shareCardVisible.value = false;
+};
+
+// Click outside to hide menu
+const handleClickOutside = (event) => {
+  if (menuVisible.value && !event.target.closest(".selection-menu")) {
+    hideMenu();
+  }
+};
+
+onMounted(() => {
+  if (typeof document === "undefined") return;
+
+  document.addEventListener("mouseup", handleMouseUp);
+  document.addEventListener("mousedown", handleClickOutside);
+});
+
+onUnmounted(() => {
+  if (typeof document === "undefined") return;
+
+  document.removeEventListener("mouseup", handleMouseUp);
+  document.removeEventListener("mousedown", handleClickOutside);
+});
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="menuVisible"
+      class="selection-menu"
+      :style="{
+        left: `${menuPosition.x}px`,
+        top: `${menuPosition.y}px`,
+        transform: 'translate(-50%, -100%)',
+      }"
+    >
+      <button @click="copyText" class="menu-button copy-button" title="复制">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+          <path
+            d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+          ></path>
+        </svg>
+      </button>
+      <button @click="shareText" class="menu-button share-button" title="分享">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="18" cy="5" r="3"></circle>
+          <circle cx="6" cy="12" r="3"></circle>
+          <circle cx="18" cy="19" r="3"></circle>
+          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+          <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Share Card Component -->
+    <ShareCard
+      :text="selectedText"
+      :visible="shareCardVisible"
+      :on-close="closeShareCard"
+    />
+  </div>
+</template>
+
+<style scoped>
+.selection-menu {
+  position: fixed;
+  display: flex;
+  background-color: #333;
+  border-radius: 4px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  padding: 8px;
+}
+
+.menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin: 0 4px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  color: white;
+  transition: background-color 0.2s;
+}
+
+.menu-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>
diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
new file mode 100644
index 00000000..07b4099a
--- /dev/null
+++ b/src/components/ShareCard.vue
@@ -0,0 +1,244 @@
+<script setup>
+import { defineProps, onMounted, ref, watch } from "vue";
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  "on-close": {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const qrcodeGenerated = ref(false);
+const isGeneratingImage = ref(false);
+const shareCardRef = ref(null);
+
+// Function to generate QR code
+const generateQRCode = async () => {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  if (!document.getElementById("qrcode") || qrcodeGenerated.value) return;
+
+  try {
+    const QRCodeModule = await import("qrcodejs2");
+    const QRCode = QRCodeModule.default;
+
+    new QRCode(document.getElementById("qrcode"), {
+      text: window.location.href,
+      width: 128,
+      height: 128,
+      colorDark: "#000000",
+      colorLight: "#ffffff",
+      correctLevel: QRCode.CorrectLevel.H,
+    });
+
+    qrcodeGenerated.value = true;
+  } catch (err) {
+    console.error("Failed to load QRCode:", err);
+  }
+};
+
+// Function to download share card as image
+const downloadAsImage = async () => {
+  if (!shareCardRef.value || typeof window === "undefined") return;
+
+  isGeneratingImage.value = true;
+
+  try {
+    const domToImage = await import("dom-to-image-more");
+
+    const dataUrl = await domToImage.toPng(shareCardRef.value, {
+      quality: 0.95,
+      bgcolor: "#fff",
+    });
+
+    // Create download link
+    const link = document.createElement("a");
+    link.download = `share-${new Date().getTime()}.png`;
+    link.href = dataUrl;
+    link.click();
+
+    isGeneratingImage.value = false;
+  } catch (err) {
+    console.error("Failed to generate image:", err);
+    isGeneratingImage.value = false;
+  }
+};
+
+// Watch for visibility changes to generate QR code when component becomes visible
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue && !qrcodeGenerated.value) {
+      // Small delay to ensure DOM is ready
+      setTimeout(generateQRCode, 100);
+    }
+  },
+);
+
+onMounted(() => {
+  if (props.visible) {
+    setTimeout(generateQRCode, 100);
+  }
+});
+</script>
+
+<template>
+  <div v-if="visible" class="share-card-overlay" @click="props['on-close']">
+    <div class="share-card-container" @click.stop>
+      <div class="share-card-header">
+        <h3>分享内容</h3>
+        <button class="close-button" @click="props['on-close']">×</button>
+      </div>
+      <div class="share-card" ref="shareCardRef">
+        <div class="share-content">
+          <blockquote>{{ text }}</blockquote>
+          <div class="share-source">
+            <p>来源: 南方科技大学飞跃手册</p>
+          </div>
+        </div>
+        <div class="share-qrcode">
+          <div id="qrcode"></div>
+          <p>扫描二维码访问原文</p>
+        </div>
+        <div class="share-actions">
+          <button
+            class="download-button"
+            @click="downloadAsImage"
+            :disabled="isGeneratingImage"
+          >
+            {{ isGeneratingImage ? "生成中..." : "下载分享图片" }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.share-card-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+}
+
+.share-card-container {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.share-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.share-card-header h3 {
+  margin: 0;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+}
+
+.share-card {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin: 20px 0;
+}
+
+.share-content {
+  flex: 1;
+}
+
+.share-content blockquote {
+  font-size: 18px;
+  line-height: 1.6;
+  color: #333;
+  border-left: 4px solid #4285f4;
+  padding-left: 15px;
+  margin: 0 0 20px 0;
+}
+
+.share-source {
+  font-size: 14px;
+  color: #666;
+}
+
+.share-qrcode {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.share-qrcode p {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #666;
+}
+
+@media (min-width: 768px) {
+  .share-card {
+    flex-direction: row;
+  }
+
+  .share-qrcode {
+    margin-top: 0;
+  }
+}
+
+.share-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.download-button {
+  padding: 8px 16px;
+  background-color: #4285f4;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.download-button:hover {
+  background-color: #3367d6;
+}
+
+.download-button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+</style>

From 6cad1757ee544f2bc01c8b8748958074816a9fd6 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 11:30:54 +0800
Subject: [PATCH 02/14] feat: card-preview ShareCard.vue (#211)

---
 src/components/SelectionShareMenu.vue |   9 +-
 src/components/ShareCard.vue          | 167 +++++++++++++++++++++-----
 2 files changed, 143 insertions(+), 33 deletions(-)

diff --git a/src/components/SelectionShareMenu.vue b/src/components/SelectionShareMenu.vue
index 394bbd52..9ac58d34 100644
--- a/src/components/SelectionShareMenu.vue
+++ b/src/components/SelectionShareMenu.vue
@@ -41,7 +41,8 @@ const handleSelection = () => {
 
 // Handle mouseup event to detect selection
 const handleMouseUp = () => {
-  if (typeof window === "undefined") return;
+  // 如果分享卡片已显示，不再监听选择变化
+  if (typeof window === "undefined" || shareCardVisible.value) return;
   setTimeout(handleSelection, 10); // Small delay to ensure selection is complete
 };
 
@@ -69,6 +70,12 @@ const shareText = () => {
 // Close share card
 const closeShareCard = () => {
   shareCardVisible.value = false;
+  // 清空选中的文本，以便用户可以重新选择
+  setTimeout(() => {
+    if (typeof window !== "undefined") {
+      window.getSelection()?.removeAllRanges();
+    }
+  }, 100);
 };
 
 // Click outside to hide menu
diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 07b4099a..e893ebad 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, onMounted, ref, watch } from "vue";
+import { computed, defineProps, onMounted, ref, watch } from "vue";
 
 const props = defineProps({
   text: {
@@ -19,6 +19,40 @@ const props = defineProps({
 const qrcodeGenerated = ref(false);
 const isGeneratingImage = ref(false);
 const shareCardRef = ref(null);
+const currentTheme = ref("dark"); // 默认暗色主题
+
+// 定义主题
+const themes = [
+  { name: "dark", background: "#333", text: "#fff", border: "#4285f4" },
+  { name: "light", background: "#fff", text: "#333", border: "#4285f4" },
+  { name: "blue", background: "#1a73e8", text: "#fff", border: "#fff" },
+  { name: "green", background: "#0f9d58", text: "#fff", border: "#fff" },
+  { name: "red", background: "#ea4335", text: "#fff", border: "#fff" },
+];
+
+// 当前主题的样式
+const themeStyle = computed(() => {
+  const theme = themes.find((t) => t.name === currentTheme.value) || themes[0];
+  return {
+    background: theme.background,
+    color: theme.text,
+    borderColor: theme.border,
+  };
+});
+
+// 设置主题
+const setTheme = (themeName) => {
+  currentTheme.value = themeName;
+  // 重新生成二维码以匹配主题颜色
+  if (qrcodeGenerated.value) {
+    const qrcodeElement = document.getElementById("qrcode");
+    if (qrcodeElement) {
+      qrcodeElement.innerHTML = "";
+      qrcodeGenerated.value = false;
+      setTimeout(generateQRCode, 100);
+    }
+  }
+};
 
 // Function to generate QR code
 const generateQRCode = async () => {
@@ -29,12 +63,16 @@ const generateQRCode = async () => {
     const QRCodeModule = await import("qrcodejs2");
     const QRCode = QRCodeModule.default;
 
+    // 获取当前主题颜色
+    const theme =
+      themes.find((t) => t.name === currentTheme.value) || themes[0];
+
     new QRCode(document.getElementById("qrcode"), {
       text: window.location.href,
       width: 128,
       height: 128,
-      colorDark: "#000000",
-      colorLight: "#ffffff",
+      colorDark: theme.text,
+      colorLight: theme.background,
       correctLevel: QRCode.CorrectLevel.H,
     });
 
@@ -55,7 +93,7 @@ const downloadAsImage = async () => {
 
     const dataUrl = await domToImage.toPng(shareCardRef.value, {
       quality: 0.95,
-      bgcolor: "#fff",
+      bgcolor: "transparent",
     });
 
     // Create download link
@@ -96,26 +134,58 @@ onMounted(() => {
         <h3>分享内容</h3>
         <button class="close-button" @click="props['on-close']">×</button>
       </div>
-      <div class="share-card" ref="shareCardRef">
+
+      <!-- 预览卡片 - 用于下载 -->
+      <div
+        class="share-card"
+        ref="shareCardRef"
+        :style="{
+          backgroundColor: themeStyle.background,
+          color: themeStyle.color,
+          borderColor: themeStyle.borderColor,
+        }"
+      >
         <div class="share-content">
-          <blockquote>{{ text }}</blockquote>
-          <div class="share-source">
-            <p>来源: 南方科技大学飞跃手册</p>
+          <div class="share-text">
+            <blockquote :style="{ borderLeftColor: themeStyle.borderColor }">
+              {{ text }}
+            </blockquote>
+            <div class="share-source">
+              <p>来源: 南方科技大学飞跃手册</p>
+            </div>
+          </div>
+          <div
+            class="share-qrcode"
+            :style="{ backgroundColor: themeStyle.background }"
+          >
+            <div id="qrcode"></div>
+            <p>扫描二维码访问原文</p>
           </div>
         </div>
-        <div class="share-qrcode">
-          <div id="qrcode"></div>
-          <p>扫描二维码访问原文</p>
-        </div>
-        <div class="share-actions">
+      </div>
+
+      <!-- 控制按钮 - 不包含在下载图片中 -->
+      <div class="share-controls">
+        <div class="theme-selector">
+          <span>主题：</span>
           <button
-            class="download-button"
-            @click="downloadAsImage"
-            :disabled="isGeneratingImage"
+            v-for="theme in themes"
+            :key="theme.name"
+            class="theme-button"
+            :class="{ active: currentTheme === theme.name }"
+            :style="{ backgroundColor: theme.background, color: theme.text }"
+            @click="setTheme(theme.name)"
           >
-            {{ isGeneratingImage ? "生成中..." : "下载分享图片" }}
+            A
           </button>
         </div>
+        <button
+          class="download-button"
+          @click="downloadAsImage"
+          :disabled="isGeneratingImage"
+        >
+          {{ isGeneratingImage ? "生成中..." : "下载分享图片" }}
+        </button>
       </div>
     </div>
   </div>
@@ -170,9 +240,10 @@ onMounted(() => {
   flex-direction: column;
   gap: 20px;
   padding: 20px;
-  border: 1px solid #eee;
   border-radius: 8px;
   margin: 20px 0;
+  position: relative;
+  overflow: hidden;
 }
 
 .share-content {
@@ -182,15 +253,14 @@ onMounted(() => {
 .share-content blockquote {
   font-size: 18px;
   line-height: 1.6;
-  color: #333;
-  border-left: 4px solid #4285f4;
   padding-left: 15px;
   margin: 0 0 20px 0;
+  border-left-width: 4px;
+  border-left-style: solid;
 }
 
 .share-source {
   font-size: 14px;
-  color: #666;
 }
 
 .share-qrcode {
@@ -198,32 +268,49 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
 }
 
 .share-qrcode p {
   margin-top: 10px;
   font-size: 14px;
-  color: #666;
+  text-align: center;
 }
 
-@media (min-width: 768px) {
-  .share-card {
-    flex-direction: row;
-  }
+/* 控制按钮样式 */
+.share-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-top: 20px;
+}
 
-  .share-qrcode {
-    margin-top: 0;
-  }
+.theme-selector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
-.share-actions {
+.theme-button {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
   display: flex;
+  align-items: center;
   justify-content: center;
-  margin-top: 20px;
+  font-weight: bold;
+}
+
+.theme-button.active {
+  border-color: #000;
 }
 
 .download-button {
-  padding: 8px 16px;
+  padding: 10px 16px;
   background-color: #4285f4;
   color: white;
   border: none;
@@ -231,6 +318,7 @@ onMounted(() => {
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.2s;
+  align-self: center;
 }
 
 .download-button:hover {
@@ -241,4 +329,19 @@ onMounted(() => {
   background-color: #ccc;
   cursor: not-allowed;
 }
+
+@media (min-width: 768px) {
+  .share-card {
+    flex-direction: row;
+  }
+
+  .share-qrcode {
+    margin-top: 0;
+    min-width: 150px;
+  }
+
+  .theme-selector {
+    justify-content: center;
+  }
+}
 </style>

From aeac9234dbe93597f6d02a27bdb42d3e2c60b827 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 11:34:48 +0800
Subject: [PATCH 03/14] fix: background color (#211)

---
 src/components/ShareCard.vue | 51 +++++++++++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index e893ebad..98225981 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -91,12 +91,48 @@ const downloadAsImage = async () => {
   try {
     const domToImage = await import("dom-to-image-more");
 
-    const dataUrl = await domToImage.toPng(shareCardRef.value, {
-      quality: 0.95,
-      bgcolor: "transparent",
+    // 创建一个新的div元素，用于生成图片
+    const cloneContainer = document.createElement("div");
+    cloneContainer.style.position = "absolute";
+    cloneContainer.style.left = "-9999px";
+    cloneContainer.style.top = "-9999px";
+    document.body.appendChild(cloneContainer);
+
+    // 克隆分享卡片
+    const clone = shareCardRef.value.cloneNode(true);
+
+    // 确保背景色正确应用
+    const theme =
+      themes.find((t) => t.name === currentTheme.value) || themes[0];
+    clone.style.backgroundColor = theme.background;
+    clone.style.color = theme.text;
+    clone.style.width = `${shareCardRef.value.offsetWidth}px`;
+    clone.style.padding = "20px";
+    clone.style.borderRadius = "8px";
+    clone.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
+
+    // 添加到临时容器
+    cloneContainer.appendChild(clone);
+
+    // 使用toPng生成图片
+    const dataUrl = await domToImage.toPng(clone, {
+      quality: 1,
+      bgcolor: theme.background,
+      width: shareCardRef.value.offsetWidth,
+      height: shareCardRef.value.offsetHeight,
+      style: {
+        margin: "0",
+        padding: "20px",
+        "border-radius": "8px",
+        "background-color": theme.background,
+        color: theme.text,
+      },
     });
 
-    // Create download link
+    // 移除临时元素
+    document.body.removeChild(cloneContainer);
+
+    // 创建下载链接
     const link = document.createElement("a");
     link.download = `share-${new Date().getTime()}.png`;
     link.href = dataUrl;
@@ -143,6 +179,7 @@ onMounted(() => {
           backgroundColor: themeStyle.background,
           color: themeStyle.color,
           borderColor: themeStyle.borderColor,
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
         }"
       >
         <div class="share-content">
@@ -248,6 +285,12 @@ onMounted(() => {
 
 .share-content {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.share-text {
+  flex: 1;
 }
 
 .share-content blockquote {

From 15b8fc4c20a36bf8627658a1d7406920636517fc Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 11:43:40 +0800
Subject: [PATCH 04/14] feat: support selected html el (#211)

---
 src/components/SelectionShareMenu.vue |  9 ++++-
 src/components/ShareCard.vue          | 51 +++++++++++++++++++++++++--
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/components/SelectionShareMenu.vue b/src/components/SelectionShareMenu.vue
index 9ac58d34..e1fa8953 100644
--- a/src/components/SelectionShareMenu.vue
+++ b/src/components/SelectionShareMenu.vue
@@ -35,7 +35,14 @@ const handleSelection = () => {
     const x = rect.left + rect.width / 2;
     const y = rect.top - 10; // Position above the selection
 
-    showMenu(x, y, selection.toString());
+    // 获取选中文本的HTML内容
+    const container = document.createElement("div");
+    const clonedSelection = range.cloneContents();
+    container.appendChild(clonedSelection);
+    const htmlContent = container.innerHTML;
+
+    // 使用HTML内容而不是纯文本
+    showMenu(x, y, htmlContent);
   }
 };
 
diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 98225981..02536e3b 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -101,6 +101,12 @@ const downloadAsImage = async () => {
     // 克隆分享卡片
     const clone = shareCardRef.value.cloneNode(true);
 
+    // 确保 HTML 格式在克隆中保留
+    const blockquote = clone.querySelector(".formatted-text");
+    if (blockquote) {
+      blockquote.innerHTML = props.text;
+    }
+
     // 确保背景色正确应用
     const theme =
       themes.find((t) => t.name === currentTheme.value) || themes[0];
@@ -184,9 +190,11 @@ onMounted(() => {
       >
         <div class="share-content">
           <div class="share-text">
-            <blockquote :style="{ borderLeftColor: themeStyle.borderColor }">
-              {{ text }}
-            </blockquote>
+            <blockquote
+              :style="{ borderLeftColor: themeStyle.borderColor }"
+              v-html="text"
+              class="formatted-text"
+            ></blockquote>
             <div class="share-source">
               <p>来源: 南方科技大学飞跃手册</p>
             </div>
@@ -387,4 +395,41 @@ onMounted(() => {
     justify-content: center;
   }
 }
+
+.formatted-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.formatted-text p {
+  margin: 0.5em 0;
+}
+
+.formatted-text strong,
+.formatted-text b {
+  font-weight: bold;
+}
+
+.formatted-text em,
+.formatted-text i {
+  font-style: italic;
+}
+
+.formatted-text a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.formatted-text ul,
+.formatted-text ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.formatted-text code {
+  font-family: monospace;
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
 </style>

From 02373a51d0da3c2c9cbcff23e67170553076f89b Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 11:57:43 +0800
Subject: [PATCH 05/14] feat: qrcode added (#211)

---
 src/components/SelectionShareMenu.vue |   2 +-
 src/components/ShareCard.vue          | 100 ++++++++++++++++----------
 2 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/src/components/SelectionShareMenu.vue b/src/components/SelectionShareMenu.vue
index e1fa8953..ba125104 100644
--- a/src/components/SelectionShareMenu.vue
+++ b/src/components/SelectionShareMenu.vue
@@ -161,7 +161,7 @@ onUnmounted(() => {
     <ShareCard
       :text="selectedText"
       :visible="shareCardVisible"
-      :on-close="closeShareCard"
+      @close="closeShareCard"
     />
   </div>
 </template>
diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 02536e3b..e0f67360 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineProps, onMounted, ref, watch } from "vue";
+import { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue";
 
 const props = defineProps({
   text: {
@@ -10,12 +10,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  "on-close": {
-    type: Function,
-    default: () => {},
-  },
 });
 
+const emit = defineEmits(["close"]);
+
 const qrcodeGenerated = ref(false);
 const isGeneratingImage = ref(false);
 const shareCardRef = ref(null);
@@ -44,41 +42,48 @@ const themeStyle = computed(() => {
 const setTheme = (themeName) => {
   currentTheme.value = themeName;
   // 重新生成二维码以匹配主题颜色
-  if (qrcodeGenerated.value) {
-    const qrcodeElement = document.getElementById("qrcode");
-    if (qrcodeElement) {
-      qrcodeElement.innerHTML = "";
-      qrcodeGenerated.value = false;
-      setTimeout(generateQRCode, 100);
-    }
-  }
+  qrcodeGenerated.value = false;
+  setTimeout(generateQRCode, 100);
 };
 
 // Function to generate QR code
-const generateQRCode = async () => {
+const generateQRCode = () => {
   if (typeof window === "undefined" || typeof document === "undefined") return;
   if (!document.getElementById("qrcode") || qrcodeGenerated.value) return;
 
   try {
-    const QRCodeModule = await import("qrcodejs2");
-    const QRCode = QRCodeModule.default;
+    // 清除之前的二维码（如果有）
+    const qrcodeElement = document.getElementById("qrcode");
+    qrcodeElement.innerHTML = "";
 
     // 获取当前主题颜色
     const theme =
-      themes.find((t) => t.name === currentTheme.value) || themes[0];
+      themes.find((t) => t.name === currentTheme.value) ?? themes[0];
 
-    new QRCode(document.getElementById("qrcode"), {
-      text: window.location.href,
-      width: 128,
-      height: 128,
-      colorDark: theme.text,
-      colorLight: theme.background,
-      correctLevel: QRCode.CorrectLevel.H,
-    });
+    // 生成正确的URL
+    // 在开发环境中使用当前网址，在生产环境中使用基础URL
+    const baseUrl = "https://sustech-application.com";
+    const currentPath = window.location.pathname;
+    const qrUrl = `${baseUrl}${currentPath}`;
+
+    // 使用原生方式创建二维码图片
+    const qrCodeImg = document.createElement("img");
+    qrCodeImg.alt = "扫描二维码访问原文";
+    qrCodeImg.style.width = "128px";
+    qrCodeImg.style.height = "128px";
+
+    // 使用QR Code API生成二维码
+    const bgColor = theme.background.replace("#", "");
+    const fgColor = theme.text.replace("#", "");
+    const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=${encodeURIComponent(qrUrl)}&bgcolor=${bgColor}&color=${fgColor}`;
+    qrCodeImg.src = qrCodeUrl;
+
+    // 添加到DOM
+    qrcodeElement.appendChild(qrCodeImg);
 
     qrcodeGenerated.value = true;
   } catch (err) {
-    console.error("Failed to load QRCode:", err);
+    console.error("Failed to generate QRCode:", err);
   }
 };
 
@@ -170,11 +175,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="visible" class="share-card-overlay" @click="props['on-close']">
+  <div v-if="visible" class="share-card-overlay" @click="emit('close')">
     <div class="share-card-container" @click.stop>
       <div class="share-card-header">
         <h3>分享内容</h3>
-        <button class="close-button" @click="props['on-close']">×</button>
+        <button class="close-button" @click="emit('close')">×</button>
       </div>
 
       <!-- 预览卡片 - 用于下载 -->
@@ -196,15 +201,20 @@ onMounted(() => {
               class="formatted-text"
             ></blockquote>
             <div class="share-source">
-              <p>来源: 南方科技大学飞跃手册</p>
+              <p>南方科技大学飞跃手册</p>
             </div>
           </div>
-          <div
-            class="share-qrcode"
-            :style="{ backgroundColor: themeStyle.background }"
-          >
-            <div id="qrcode"></div>
-            <p>扫描二维码访问原文</p>
+          <div class="share-qrcode-container">
+            <div
+              class="share-qrcode"
+              :style="{
+                backgroundColor: themeStyle.background,
+                borderColor: themeStyle.borderColor,
+              }"
+            >
+              <div id="qrcode"></div>
+              <p class="qrcode-text">扫描二维码访问原文</p>
+            </div>
           </div>
         </div>
       </div>
@@ -314,19 +324,33 @@ onMounted(() => {
   font-size: 14px;
 }
 
+.share-qrcode-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
 .share-qrcode {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 20px;
-  padding: 10px;
+  padding: 15px;
+  border-radius: 8px;
+  border: 1px solid;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  max-width: 160px;
+}
+
+.share-qrcode img {
+  display: block;
   border-radius: 4px;
 }
 
-.share-qrcode p {
+.qrcode-text {
   margin-top: 10px;
   font-size: 14px;
   text-align: center;
+  line-height: 1.4;
 }
 
 /* 控制按钮样式 */

From 099969b70cccca4f79d1ccff7d1bccf8e9e15a78 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 12:05:00 +0800
Subject: [PATCH 06/14] fix: qrcode tab-switch (#211)

---
 src/components/ShareCard.vue | 62 ++++++++++++++++++++++++++++--------
 1 file changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index e0f67360..65985ef2 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -43,17 +43,26 @@ const setTheme = (themeName) => {
   currentTheme.value = themeName;
   // 重新生成二维码以匹配主题颜色
   qrcodeGenerated.value = false;
+
+  // 清除之前的二维码
+  const qrcodeElement = document.getElementById("qrcode");
+  if (qrcodeElement) {
+    qrcodeElement.innerHTML = "";
+  }
+
   setTimeout(generateQRCode, 100);
 };
 
 // Function to generate QR code
 const generateQRCode = () => {
   if (typeof window === "undefined" || typeof document === "undefined") return;
-  if (!document.getElementById("qrcode") || qrcodeGenerated.value) return;
 
   try {
-    // 清除之前的二维码（如果有）
+    // 获取QR码容器元素
     const qrcodeElement = document.getElementById("qrcode");
+    if (!qrcodeElement) return;
+
+    // 清除之前的内容
     qrcodeElement.innerHTML = "";
 
     // 获取当前主题颜色
@@ -61,27 +70,44 @@ const generateQRCode = () => {
       themes.find((t) => t.name === currentTheme.value) ?? themes[0];
 
     // 生成正确的URL
-    // 在开发环境中使用当前网址，在生产环境中使用基础URL
+    // 使用绝对URL确保在任何页面都能正确生成
     const baseUrl = "https://sustech-application.com";
     const currentPath = window.location.pathname;
     const qrUrl = `${baseUrl}${currentPath}`;
 
-    // 使用原生方式创建二维码图片
+    // 创建图片元素
     const qrCodeImg = document.createElement("img");
     qrCodeImg.alt = "扫描二维码访问原文";
     qrCodeImg.style.width = "128px";
     qrCodeImg.style.height = "128px";
 
+    // 处理主题颜色
+    let bgColor = theme.background.replace("#", "");
+    let fgColor = theme.text.replace("#", "");
+
+    // 确保颜色格式正确
+    if (!bgColor) bgColor = "ffffff";
+    if (!fgColor) fgColor = "000000";
+
     // 使用QR Code API生成二维码
-    const bgColor = theme.background.replace("#", "");
-    const fgColor = theme.text.replace("#", "");
     const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=${encodeURIComponent(qrUrl)}&bgcolor=${bgColor}&color=${fgColor}`;
+
+    // 设置加载事件
+    qrCodeImg.onload = () => {
+      qrcodeGenerated.value = true;
+    };
+
+    qrCodeImg.onerror = (e) => {
+      console.error("Failed to load QR code image:", e);
+      // 尝试使用默认颜色
+      qrCodeImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=${encodeURIComponent(qrUrl)}`;
+    };
+
+    // 设置图片源
     qrCodeImg.src = qrCodeUrl;
 
     // 添加到DOM
     qrcodeElement.appendChild(qrCodeImg);
-
-    qrcodeGenerated.value = true;
   } catch (err) {
     console.error("Failed to generate QRCode:", err);
   }
@@ -160,17 +186,27 @@ const downloadAsImage = async () => {
 watch(
   () => props.visible,
   (newValue) => {
-    if (newValue && !qrcodeGenerated.value) {
-      // Small delay to ensure DOM is ready
+    // 当组件变为可见时，重置状态并生成新的二维码
+    if (newValue) {
+      // 重置状态
+      qrcodeGenerated.value = false;
+
+      // 清除之前的二维码
+      const qrcodeElement = document.getElementById("qrcode");
+      if (qrcodeElement) {
+        qrcodeElement.innerHTML = "";
+      }
+
+      // 小延迟确保 DOM 准备就绪
       setTimeout(generateQRCode, 100);
     }
   },
+  { immediate: true }, // 立即触发一次
 );
 
+// 当组件挂载时，如果可见则生成二维码
 onMounted(() => {
-  if (props.visible) {
-    setTimeout(generateQRCode, 100);
-  }
+  // 组件挂载时不需要额外生成二维码，因为 watch 中的 immediate: true 会处理
 });
 </script>
 

From 4f223a94001c2f21b5ea50a2b0e54d07185a9d09 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 12:08:25 +0800
Subject: [PATCH 07/14] feat: Support triple resolution (#211)

---
 src/components/ShareCard.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 65985ef2..0c5f4009 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -141,9 +141,19 @@ const downloadAsImage = async () => {
     // 确保背景色正确应用
     const theme =
       themes.find((t) => t.name === currentTheme.value) || themes[0];
+
+    // 计算厚度分辨率的尺寸
+    const originalWidth = shareCardRef.value.offsetWidth;
+    const originalHeight = shareCardRef.value.offsetHeight;
+    const scale = 3; // 3倍分辨率
+    const scaledWidth = originalWidth * scale;
+    const scaledHeight = originalHeight * scale;
+
+    // 设置克隆元素的样式
+    clone.style.width = `${originalWidth}px`;
+    clone.style.height = `${originalHeight}px`;
     clone.style.backgroundColor = theme.background;
     clone.style.color = theme.text;
-    clone.style.width = `${shareCardRef.value.offsetWidth}px`;
     clone.style.padding = "20px";
     clone.style.borderRadius = "8px";
     clone.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
@@ -151,18 +161,20 @@ const downloadAsImage = async () => {
     // 添加到临时容器
     cloneContainer.appendChild(clone);
 
-    // 使用toPng生成图片
+    // 使用toPng生成高分辨率图片
     const dataUrl = await domToImage.toPng(clone, {
       quality: 1,
       bgcolor: theme.background,
-      width: shareCardRef.value.offsetWidth,
-      height: shareCardRef.value.offsetHeight,
+      width: scaledWidth, // 使用放大后的宽度
+      height: scaledHeight, // 使用放大后的高度
       style: {
         margin: "0",
         padding: "20px",
         "border-radius": "8px",
         "background-color": theme.background,
         color: theme.text,
+        transform: `scale(${scale})`,
+        "transform-origin": "top left",
       },
     });
 

From f980d1d7a85c45ecaa6be696fe07a70ebf1dc078 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 12:12:39 +0800
Subject: [PATCH 08/14] feat: smaller QR aligned to the right (#211)

---
 src/components/ShareCard.vue | 83 +++++++++++++++++++++++++-----------
 1 file changed, 57 insertions(+), 26 deletions(-)

diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 0c5f4009..141f22d4 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -77,9 +77,9 @@ const generateQRCode = () => {
 
     // 创建图片元素
     const qrCodeImg = document.createElement("img");
-    qrCodeImg.alt = "扫描二维码访问原文";
-    qrCodeImg.style.width = "128px";
-    qrCodeImg.style.height = "128px";
+    qrCodeImg.alt = "扫码访问";
+    qrCodeImg.style.width = "80px";
+    qrCodeImg.style.height = "80px";
 
     // 处理主题颜色
     let bgColor = theme.background.replace("#", "");
@@ -90,7 +90,7 @@ const generateQRCode = () => {
     if (!fgColor) fgColor = "000000";
 
     // 使用QR Code API生成二维码
-    const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=${encodeURIComponent(qrUrl)}&bgcolor=${bgColor}&color=${fgColor}`;
+    const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=${encodeURIComponent(qrUrl)}&bgcolor=${bgColor}&color=${fgColor}`;
 
     // 设置加载事件
     qrCodeImg.onload = () => {
@@ -100,7 +100,7 @@ const generateQRCode = () => {
     qrCodeImg.onerror = (e) => {
       console.error("Failed to load QR code image:", e);
       // 尝试使用默认颜色
-      qrCodeImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=${encodeURIComponent(qrUrl)}`;
+      qrCodeImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=${encodeURIComponent(qrUrl)}`;
     };
 
     // 设置图片源
@@ -248,20 +248,23 @@ onMounted(() => {
               v-html="text"
               class="formatted-text"
             ></blockquote>
-            <div class="share-source">
-              <p>南方科技大学飞跃手册</p>
-            </div>
           </div>
-          <div class="share-qrcode-container">
-            <div
-              class="share-qrcode"
-              :style="{
-                backgroundColor: themeStyle.background,
-                borderColor: themeStyle.borderColor,
-              }"
-            >
-              <div id="qrcode"></div>
-              <p class="qrcode-text">扫描二维码访问原文</p>
+          <div class="share-footer">
+            <div class="share-footer-left">
+              <p class="share-website">南科飞跃手册</p>
+              <p class="share-url">sustech-application.com</p>
+            </div>
+            <div class="share-qrcode-container">
+              <div
+                class="share-qrcode"
+                :style="{
+                  backgroundColor: themeStyle.background,
+                  borderColor: themeStyle.borderColor,
+                }"
+              >
+                <div id="qrcode"></div>
+                <p class="qrcode-text">扫码访问</p>
+              </div>
             </div>
           </div>
         </div>
@@ -372,33 +375,61 @@ onMounted(() => {
   font-size: 14px;
 }
 
-.share-qrcode-container {
+.share-footer {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 20px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding-top: 15px;
+}
+
+.share-footer-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.share-website {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+}
+
+.share-url {
+  font-size: 14px;
+  opacity: 0.8;
+  margin: 0;
+}
+
+.share-qrcode-container {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .share-qrcode {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 15px;
+  padding: 8px;
   border-radius: 8px;
   border: 1px solid;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  max-width: 160px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100px;
 }
 
 .share-qrcode img {
   display: block;
   border-radius: 4px;
+  width: 80px;
+  height: 80px;
 }
 
 .qrcode-text {
-  margin-top: 10px;
-  font-size: 14px;
+  margin-top: 5px;
+  font-size: 12px;
   text-align: center;
-  line-height: 1.4;
+  line-height: 1.2;
 }
 
 /* 控制按钮样式 */

From 11e50503db218a8999aca970736840a1e6c1df8a Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 12:16:33 +0800
Subject: [PATCH 09/14] fix: delete defineProps & defineEmits (#211)

---
 src/components/ShareCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 141f22d4..0df28b4b 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 const props = defineProps({
   text: {
@@ -77,7 +77,7 @@ const generateQRCode = () => {
 
     // 创建图片元素
     const qrCodeImg = document.createElement("img");
-    qrCodeImg.alt = "扫码访问";
+    qrCodeImg.alt = "扫码访问原文";
     qrCodeImg.style.width = "80px";
     qrCodeImg.style.height = "80px";
 
@@ -263,7 +263,7 @@ onMounted(() => {
                 }"
               >
                 <div id="qrcode"></div>
-                <p class="qrcode-text">扫码访问</p>
+                <p class="qrcode-text">扫码访问原文</p>
               </div>
             </div>
           </div>

From fe4b8e95cd11f7c844114a14e0dd37ac01169f69 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 12:26:02 +0800
Subject: [PATCH 10/14] feat: more color to choose (#211)

---
 src/components/ShareCard.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 0df28b4b..1b5ca888 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -25,7 +25,8 @@ const themes = [
   { name: "light", background: "#fff", text: "#333", border: "#4285f4" },
   { name: "blue", background: "#1a73e8", text: "#fff", border: "#fff" },
   { name: "green", background: "#0f9d58", text: "#fff", border: "#fff" },
-  { name: "red", background: "#ea4335", text: "#fff", border: "#fff" },
+  { name: "orange", background: "#ed6c00", text: "#ffffff", border: "#ffffff" },
+  { name: "teal", background: "#2bb7b3", text: "#ffffff", border: "#ffffff" },
 ];
 
 // 当前主题的样式

From caf940315417341d4eb40da83b2fd217c9fe03a7 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Mon, 14 Apr 2025 12:39:59 +0800
Subject: [PATCH 11/14] feat: add to clipboard (#211)

---
 src/components/ShareCard.vue | 148 +++++++++++++++++++++++++++++------
 1 file changed, 122 insertions(+), 26 deletions(-)

diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 1b5ca888..a96e2e4c 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";
 
+import { useData } from "vitepress";
+
 const props = defineProps({
   text: {
     type: String,
@@ -14,10 +16,21 @@ const props = defineProps({
 
 const emit = defineEmits(["close"]);
 
+// 获取VitePress的主题设置
+const { isDark } = useData();
+
 const qrcodeGenerated = ref(false);
 const isGeneratingImage = ref(false);
 const shareCardRef = ref(null);
-const currentTheme = ref("dark"); // 默认暗色主题
+const currentTheme = ref(isDark.value ? "dark" : "light"); // 根据网站主题设置默认值
+
+// 监听网站主题变化
+watch(isDark, (newValue) => {
+  // 只有当当前主题是dark或light时才自动切换
+  if (currentTheme.value === "dark" || currentTheme.value === "light") {
+    currentTheme.value = newValue ? "dark" : "light";
+  }
+});
 
 // 定义主题
 const themes = [
@@ -114,11 +127,9 @@ const generateQRCode = () => {
   }
 };
 
-// Function to download share card as image
-const downloadAsImage = async () => {
-  if (!shareCardRef.value || typeof window === "undefined") return;
-
-  isGeneratingImage.value = true;
+// 生成分享卡片图片
+const generateShareImage = async () => {
+  if (!shareCardRef.value || typeof window === "undefined") return null;
 
   try {
     const domToImage = await import("dom-to-image-more");
@@ -156,7 +167,7 @@ const downloadAsImage = async () => {
     clone.style.backgroundColor = theme.background;
     clone.style.color = theme.text;
     clone.style.padding = "20px";
-    clone.style.borderRadius = "8px";
+    clone.style.borderRadius = "12px";
     clone.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
 
     // 添加到临时容器
@@ -171,7 +182,7 @@ const downloadAsImage = async () => {
       style: {
         margin: "0",
         padding: "20px",
-        "border-radius": "8px",
+        "border-radius": "12px",
         "background-color": theme.background,
         color: theme.text,
         transform: `scale(${scale})`,
@@ -182,6 +193,26 @@ const downloadAsImage = async () => {
     // 移除临时元素
     document.body.removeChild(cloneContainer);
 
+    return dataUrl;
+  } catch (err) {
+    console.error("Failed to generate image:", err);
+    return null;
+  }
+};
+
+// Function to download share card as image
+const downloadAsImage = async () => {
+  if (!shareCardRef.value || typeof window === "undefined") return;
+
+  isGeneratingImage.value = true;
+
+  try {
+    const dataUrl = await generateShareImage();
+
+    if (!dataUrl) {
+      throw new Error("Failed to generate image");
+    }
+
     // 创建下载链接
     const link = document.createElement("a");
     link.download = `share-${new Date().getTime()}.png`;
@@ -190,7 +221,39 @@ const downloadAsImage = async () => {
 
     isGeneratingImage.value = false;
   } catch (err) {
-    console.error("Failed to generate image:", err);
+    console.error("Failed to download image:", err);
+    isGeneratingImage.value = false;
+  }
+};
+
+// 复制图片到剪贴板
+const copyToClipboard = async () => {
+  if (!shareCardRef.value || typeof window === "undefined") return;
+
+  isGeneratingImage.value = true;
+
+  try {
+    const dataUrl = await generateShareImage();
+
+    if (!dataUrl) {
+      throw new Error("Failed to generate image");
+    }
+
+    // 将dataUrl转换为Blob
+    const res = await fetch(dataUrl);
+    const blob = await res.blob();
+
+    // 创建ClipboardItem并复制到剪贴板
+    const item = new ClipboardItem({ "image/png": blob });
+    await navigator.clipboard.write([item]);
+
+    // 显示成功消息
+    alert("图片已复制到剪贴板！");
+
+    isGeneratingImage.value = false;
+  } catch (err) {
+    console.error("Failed to copy image to clipboard:", err);
+    alert("复制图片失败，请尝试下载图片后手动分享。");
     isGeneratingImage.value = false;
   }
 };
@@ -286,13 +349,22 @@ onMounted(() => {
             A
           </button>
         </div>
-        <button
-          class="download-button"
-          @click="downloadAsImage"
-          :disabled="isGeneratingImage"
-        >
-          {{ isGeneratingImage ? "生成中..." : "下载分享图片" }}
-        </button>
+        <div class="button-group">
+          <button
+            class="copy-button"
+            @click="copyToClipboard"
+            :disabled="isGeneratingImage"
+          >
+            {{ isGeneratingImage ? "生成中..." : "复制到剪贴板" }}
+          </button>
+          <button
+            class="download-button"
+            @click="downloadAsImage"
+            :disabled="isGeneratingImage"
+          >
+            {{ isGeneratingImage ? "生成中..." : "下载分享图片" }}
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -313,7 +385,7 @@ onMounted(() => {
 }
 
 .share-card-container {
-  background-color: white;
+  background-color: var(--vp-c-bg);
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   width: 90%;
@@ -321,6 +393,7 @@ onMounted(() => {
   max-height: 90vh;
   overflow-y: auto;
   padding: 20px;
+  color: var(--vp-c-text-1);
 }
 
 .share-card-header {
@@ -332,6 +405,7 @@ onMounted(() => {
 
 .share-card-header h3 {
   margin: 0;
+  color: var(--vp-c-text-1);
 }
 
 .close-button {
@@ -464,25 +538,47 @@ onMounted(() => {
   border-color: #000;
 }
 
-.download-button {
+.button-group {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.download-button,
+.copy-button {
   padding: 10px 16px;
-  background-color: #4285f4;
-  color: white;
+  color: var(--vp-c-white);
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
-  transition: background-color 0.2s;
-  align-self: center;
+  transition: all 0.2s ease;
+  flex: 1;
+  max-width: 200px;
+  background-color: var(--vp-c-brand);
+  position: relative;
+  overflow: hidden;
+}
+
+.download-button:hover,
+.copy-button:hover {
+  background-color: var(--vp-c-brand-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
-.download-button:hover {
-  background-color: #3367d6;
+.download-button:active,
+.copy-button:active {
+  transform: translateY(0);
+  box-shadow: none;
 }
 
-.download-button:disabled {
-  background-color: #ccc;
+.download-button:disabled,
+.copy-button:disabled {
+  background-color: var(--vp-c-gray);
   cursor: not-allowed;
+  opacity: 0.7;
 }
 
 @media (min-width: 768px) {

From 4a3e6da1377ee96cb973ac7bfdaa6fd5e5d7ecae Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Fri, 18 Apr 2025 06:43:04 +0800
Subject: [PATCH 12/14] feat: add ts definition (#211)

---
 src/components/SelectionShareMenu.vue |  14 +--
 src/components/ShareCard.vue          | 139 ++++++++++++++++++--------
 2 files changed, 107 insertions(+), 46 deletions(-)

diff --git a/src/components/SelectionShareMenu.vue b/src/components/SelectionShareMenu.vue
index ba125104..0da79984 100644
--- a/src/components/SelectionShareMenu.vue
+++ b/src/components/SelectionShareMenu.vue
@@ -1,15 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 
 import ShareCard from "./ShareCard.vue";
 
-const menuVisible = ref(false);
-const menuPosition = ref({ x: 0, y: 0 });
-const selectedText = ref("");
-const shareCardVisible = ref(false);
+const menuVisible = ref<boolean>(false);
+const menuPosition = ref<{ x: number; y: number }>({ x: 0, y: 0 });
+const selectedText = ref<string>("");
+const shareCardVisible = ref<boolean>(false);
 
 // Function to show the menu
-const showMenu = (x, y, text) => {
+const showMenu = (x: number, y: number, text: string) => {
   if (text && text.trim() !== "") {
     selectedText.value = text;
     menuPosition.value = { x, y };
@@ -86,7 +86,7 @@ const closeShareCard = () => {
 };
 
 // Click outside to hide menu
-const handleClickOutside = (event) => {
+const handleClickOutside = (event: MouseEvent) => {
   if (menuVisible.value && !event.target.closest(".selection-menu")) {
     hideMenu();
   }
diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index a96e2e4c..08d6ba3a 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -1,31 +1,54 @@
-<script setup>
+<script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
 
 import { useData } from "vitepress";
 
-const props = defineProps({
-  text: {
-    type: String,
-    required: true,
-  },
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+// 定义Props类型
+interface ShareCardProps {
+  text: string;
+  visible: boolean;
+}
+
+// 定义主题类型
+interface Theme {
+  name: string;
+  background: string;
+  text: string;
+  border: string;
+}
 
-const emit = defineEmits(["close"]);
+// 定义主题样式类型
+interface ThemeStyle {
+  background: string;
+  color: string;
+  borderColor: string;
+}
+
+// 定义dom-to-image-more选项类型
+interface DomToImageOptions {
+  quality?: number;
+  bgcolor?: string;
+  width?: number;
+  height?: number;
+  style?: Record<string, string>;
+}
+
+const props = defineProps<ShareCardProps>();
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
 
 // 获取VitePress的主题设置
 const { isDark } = useData();
 
-const qrcodeGenerated = ref(false);
-const isGeneratingImage = ref(false);
-const shareCardRef = ref(null);
-const currentTheme = ref(isDark.value ? "dark" : "light"); // 根据网站主题设置默认值
+const qrcodeGenerated = ref<boolean>(false);
+const isGeneratingImage = ref<boolean>(false);
+const shareCardRef = ref<HTMLElement | null>(null);
+const currentTheme = ref<string>(isDark.value ? "dark" : "light"); // 根据网站主题设置默认值
 
 // 监听网站主题变化
-watch(isDark, (newValue) => {
+watch(isDark, (newValue: boolean) => {
   // 只有当当前主题是dark或light时才自动切换
   if (currentTheme.value === "dark" || currentTheme.value === "light") {
     currentTheme.value = newValue ? "dark" : "light";
@@ -33,7 +56,7 @@ watch(isDark, (newValue) => {
 });
 
 // 定义主题
-const themes = [
+const themes: Theme[] = [
   { name: "dark", background: "#333", text: "#fff", border: "#4285f4" },
   { name: "light", background: "#fff", text: "#333", border: "#4285f4" },
   { name: "blue", background: "#1a73e8", text: "#fff", border: "#fff" },
@@ -43,7 +66,7 @@ const themes = [
 ];
 
 // 当前主题的样式
-const themeStyle = computed(() => {
+const themeStyle = computed<ThemeStyle>(() => {
   const theme = themes.find((t) => t.name === currentTheme.value) || themes[0];
   return {
     background: theme.background,
@@ -53,7 +76,7 @@ const themeStyle = computed(() => {
 });
 
 // 设置主题
-const setTheme = (themeName) => {
+const setTheme = (themeName: string): void => {
   currentTheme.value = themeName;
   // 重新生成二维码以匹配主题颜色
   qrcodeGenerated.value = false;
@@ -68,7 +91,7 @@ const setTheme = (themeName) => {
 };
 
 // Function to generate QR code
-const generateQRCode = () => {
+const generateQRCode = (): void => {
   if (typeof window === "undefined" || typeof document === "undefined") return;
 
   try {
@@ -111,7 +134,7 @@ const generateQRCode = () => {
       qrcodeGenerated.value = true;
     };
 
-    qrCodeImg.onerror = (e) => {
+    qrCodeImg.onerror = (e: Event) => {
       console.error("Failed to load QR code image:", e);
       // 尝试使用默认颜色
       qrCodeImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=${encodeURIComponent(qrUrl)}`;
@@ -122,17 +145,27 @@ const generateQRCode = () => {
 
     // 添加到DOM
     qrcodeElement.appendChild(qrCodeImg);
-  } catch (err) {
-    console.error("Failed to generate QRCode:", err);
+  } catch (err: unknown) {
+    console.error(
+      "Failed to generate QRCode:",
+      err instanceof Error ? err.message : String(err),
+    );
   }
 };
 
+// 声明dom-to-image-more模块
+interface DomToImage {
+  toPng(node: HTMLElement, options?: DomToImageOptions): Promise<string>;
+}
+
 // 生成分享卡片图片
-const generateShareImage = async () => {
+const generateShareImage = async (): Promise<string | null> => {
   if (!shareCardRef.value || typeof window === "undefined") return null;
 
   try {
-    const domToImage = await import("dom-to-image-more");
+    const domToImage = (await import("dom-to-image-more")) as unknown as {
+      default: DomToImage;
+    };
 
     // 创建一个新的div元素，用于生成图片
     const cloneContainer = document.createElement("div");
@@ -142,11 +175,11 @@ const generateShareImage = async () => {
     document.body.appendChild(cloneContainer);
 
     // 克隆分享卡片
-    const clone = shareCardRef.value.cloneNode(true);
+    const clone = shareCardRef.value.cloneNode(true) as HTMLElement;
 
     // 确保 HTML 格式在克隆中保留
     const blockquote = clone.querySelector(".formatted-text");
-    if (blockquote) {
+    if (blockquote instanceof HTMLElement) {
       blockquote.innerHTML = props.text;
     }
 
@@ -154,7 +187,7 @@ const generateShareImage = async () => {
     const theme =
       themes.find((t) => t.name === currentTheme.value) || themes[0];
 
-    // 计算厚度分辨率的尺寸
+    // 计算高分辨率的尺寸
     const originalWidth = shareCardRef.value.offsetWidth;
     const originalHeight = shareCardRef.value.offsetHeight;
     const scale = 3; // 3倍分辨率
@@ -174,7 +207,7 @@ const generateShareImage = async () => {
     cloneContainer.appendChild(clone);
 
     // 使用toPng生成高分辨率图片
-    const dataUrl = await domToImage.toPng(clone, {
+    const dataUrl = await domToImage.default.toPng(clone, {
       quality: 1,
       bgcolor: theme.background,
       width: scaledWidth, // 使用放大后的宽度
@@ -194,14 +227,17 @@ const generateShareImage = async () => {
     document.body.removeChild(cloneContainer);
 
     return dataUrl;
-  } catch (err) {
-    console.error("Failed to generate image:", err);
+  } catch (err: unknown) {
+    console.error(
+      "Failed to generate image:",
+      err instanceof Error ? err.message : String(err),
+    );
     return null;
   }
 };
 
 // Function to download share card as image
-const downloadAsImage = async () => {
+const downloadAsImage = async (): Promise<void> => {
   if (!shareCardRef.value || typeof window === "undefined") return;
 
   isGeneratingImage.value = true;
@@ -220,14 +256,36 @@ const downloadAsImage = async () => {
     link.click();
 
     isGeneratingImage.value = false;
-  } catch (err) {
-    console.error("Failed to download image:", err);
+  } catch (err: unknown) {
+    console.error(
+      "Failed to download image:",
+      err instanceof Error ? err.message : String(err),
+    );
     isGeneratingImage.value = false;
   }
 };
 
+// 声明ClipboardItem接口
+interface ClipboardItems {
+  [key: string]: Blob;
+}
+
+interface ClipboardItemConstructor {
+  new (items: ClipboardItems): ClipboardItem;
+}
+
+declare global {
+  interface Navigator {
+    clipboard: {
+      write(items: ClipboardItem[]): Promise<void>;
+    };
+  }
+
+  var ClipboardItem: ClipboardItemConstructor;
+}
+
 // 复制图片到剪贴板
-const copyToClipboard = async () => {
+const copyToClipboard = async (): Promise<void> => {
   if (!shareCardRef.value || typeof window === "undefined") return;
 
   isGeneratingImage.value = true;
@@ -251,8 +309,11 @@ const copyToClipboard = async () => {
     alert("图片已复制到剪贴板！");
 
     isGeneratingImage.value = false;
-  } catch (err) {
-    console.error("Failed to copy image to clipboard:", err);
+  } catch (err: unknown) {
+    console.error(
+      "Failed to copy image to clipboard:",
+      err instanceof Error ? err.message : String(err),
+    );
     alert("复制图片失败，请尝试下载图片后手动分享。");
     isGeneratingImage.value = false;
   }
@@ -261,7 +322,7 @@ const copyToClipboard = async () => {
 // Watch for visibility changes to generate QR code when component becomes visible
 watch(
   () => props.visible,
-  (newValue) => {
+  (newValue: boolean) => {
     // 当组件变为可见时，重置状态并生成新的二维码
     if (newValue) {
       // 重置状态

From 5d3b021ffb37e8c595819882c6d85eacdfa413d8 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Fri, 18 Apr 2025 06:46:40 +0800
Subject: [PATCH 13/14] refactor: ts (#211)

---
 src/components/Layout.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index b3b9d719..9410ee19 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -1,15 +1,15 @@
-<script setup>
-import { useData } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
-import SelectionShareMenu from './SelectionShareMenu.vue'
+<script setup lang="ts">
+import DefaultTheme from "vitepress/theme";
 
-const { Layout } = DefaultTheme
+import SelectionShareMenu from "./SelectionShareMenu.vue";
+
+const { Layout: DefaultLayout } = DefaultTheme;
 </script>
 
 <template>
-  <Layout>
+  <DefaultLayout>
     <template #layout-bottom>
       <SelectionShareMenu />
     </template>
-  </Layout>
+  </DefaultLayout>
 </template>

From e2aac5545f6988d7a485dff9a0bfef50393a1284 Mon Sep 17 00:00:00 2001
From: JayBridge <12310903@mail.sustech.edu.cn>
Date: Fri, 18 Apr 2025 07:04:42 +0800
Subject: [PATCH 14/14] fix: lint:es (#211)

---
 eslint.config.ts                             | 18 ++++++++
 src/.vitepress/theme/index.ts                |  9 ++--
 src/components/{Layout.vue => AppLayout.vue} |  0
 src/components/SelectionShareMenu.vue        |  7 +--
 src/components/ShareCard.vue                 | 48 ++++++--------------
 src/types/dom-to-image-more.d.ts             | 14 ++++++
 src/types/global.d.ts                        | 46 +++++++++++++++++++
 7 files changed, 103 insertions(+), 39 deletions(-)
 rename src/components/{Layout.vue => AppLayout.vue} (100%)
 create mode 100644 src/types/dom-to-image-more.d.ts
 create mode 100644 src/types/global.d.ts

diff --git a/eslint.config.ts b/eslint.config.ts
index 5ac0583d..4a8483a2 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -8,6 +8,11 @@ export default ts.config(
   ts.configs.strictTypeChecked,
   ts.configs.stylisticTypeChecked,
   vue.configs["flat/recommended"],
+  {
+    rules: {
+      "vue/no-v-html": "off", // Disable v-html warning as we need it for formatted text
+    },
+  },
   {
     // FIXME: remove this once we no longer need the bracket fix
     ignores: ["**/*.js"],
@@ -19,6 +24,19 @@ export default ts.config(
         parser: ts.parser,
         projectService: true,
       },
+      globals: {
+        window: "readonly",
+        document: "readonly",
+        navigator: "readonly",
+        setTimeout: "readonly",
+        console: "readonly",
+        alert: "readonly",
+        fetch: "readonly",
+        ClipboardItem: "readonly",
+      },
+      // Add browser environment
+      ecmaVersion: 2022,
+      sourceType: "module",
     },
   },
   prettier,
diff --git a/src/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts
index 1073678b..b5d3b7c9 100644
--- a/src/.vitepress/theme/index.ts
+++ b/src/.vitepress/theme/index.ts
@@ -5,14 +5,17 @@ import DefaultTheme from "vitepress/theme";
 import Aura from "@primeuix/themes/aura";
 import PrimeVue from "primevue/config";
 
-import Layout from "../../components/Layout.vue";
+// Import components
+import AppLayout from "../../components/AppLayout.vue";
 import PostList from "../../components/PostList.vue";
 import SelectionShareMenu from "../../components/SelectionShareMenu.vue";
 import "./style.css";
 
+// Define the theme
 export default {
   extends: DefaultTheme,
-  Layout,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
+  Layout: AppLayout as any,
   enhanceApp({ app, router }) {
     /* redirect legacy hash path, can only be done on client side */
     router.onAfterRouteChange = async (to) => {
@@ -30,4 +33,4 @@ export default {
     app.component("PostList", PostList);
     app.component("SelectionShareMenu", SelectionShareMenu);
   },
-} satisfies Theme;
+} as Theme;
diff --git a/src/components/Layout.vue b/src/components/AppLayout.vue
similarity index 100%
rename from src/components/Layout.vue
rename to src/components/AppLayout.vue
diff --git a/src/components/SelectionShareMenu.vue b/src/components/SelectionShareMenu.vue
index 0da79984..419260d5 100644
--- a/src/components/SelectionShareMenu.vue
+++ b/src/components/SelectionShareMenu.vue
@@ -87,7 +87,8 @@ const closeShareCard = () => {
 
 // Click outside to hide menu
 const handleClickOutside = (event: MouseEvent) => {
-  if (menuVisible.value && !event.target.closest(".selection-menu")) {
+  const target = event.target as HTMLElement;
+  if (menuVisible.value && !target.closest(".selection-menu")) {
     hideMenu();
   }
 };
@@ -118,7 +119,7 @@ onUnmounted(() => {
         transform: 'translate(-50%, -100%)',
       }"
     >
-      <button @click="copyText" class="menu-button copy-button" title="复制">
+      <button class="menu-button copy-button" title="复制" @click="copyText">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
@@ -136,7 +137,7 @@ onUnmounted(() => {
           ></path>
         </svg>
       </button>
-      <button @click="shareText" class="menu-button share-button" title="分享">
+      <button class="menu-button share-button" title="分享" @click="shareText">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
diff --git a/src/components/ShareCard.vue b/src/components/ShareCard.vue
index 08d6ba3a..d39b8e10 100644
--- a/src/components/ShareCard.vue
+++ b/src/components/ShareCard.vue
@@ -35,9 +35,7 @@ interface DomToImageOptions {
 
 const props = defineProps<ShareCardProps>();
 
-const emit = defineEmits<{
-  (e: "close"): void;
-}>();
+const emit = defineEmits<(e: "close") => void>();
 
 // 获取VitePress的主题设置
 const { isDark } = useData();
@@ -67,7 +65,7 @@ const themes: Theme[] = [
 
 // 当前主题的样式
 const themeStyle = computed<ThemeStyle>(() => {
-  const theme = themes.find((t) => t.name === currentTheme.value) || themes[0];
+  const theme = themes.find((t) => t.name === currentTheme.value) ?? themes[0];
   return {
     background: theme.background,
     color: theme.text,
@@ -134,8 +132,8 @@ const generateQRCode = (): void => {
       qrcodeGenerated.value = true;
     };
 
-    qrCodeImg.onerror = (e: Event) => {
-      console.error("Failed to load QR code image:", e);
+    qrCodeImg.onerror = () => {
+      console.error("Failed to load QR code image");
       // 尝试使用默认颜色
       qrCodeImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=${encodeURIComponent(qrUrl)}`;
     };
@@ -185,7 +183,7 @@ const generateShareImage = async (): Promise<string | null> => {
 
     // 确保背景色正确应用
     const theme =
-      themes.find((t) => t.name === currentTheme.value) || themes[0];
+      themes.find((t) => t.name === currentTheme.value) ?? themes[0];
 
     // 计算高分辨率的尺寸
     const originalWidth = shareCardRef.value.offsetWidth;
@@ -195,8 +193,8 @@ const generateShareImage = async (): Promise<string | null> => {
     const scaledHeight = originalHeight * scale;
 
     // 设置克隆元素的样式
-    clone.style.width = `${originalWidth}px`;
-    clone.style.height = `${originalHeight}px`;
+    clone.style.width = `${String(originalWidth)}px`;
+    clone.style.height = `${String(originalHeight)}px`;
     clone.style.backgroundColor = theme.background;
     clone.style.color = theme.text;
     clone.style.padding = "20px";
@@ -218,7 +216,7 @@ const generateShareImage = async (): Promise<string | null> => {
         "border-radius": "12px",
         "background-color": theme.background,
         color: theme.text,
-        transform: `scale(${scale})`,
+        transform: `scale(${String(scale)})`,
         "transform-origin": "top left",
       },
     });
@@ -251,7 +249,7 @@ const downloadAsImage = async (): Promise<void> => {
 
     // 创建下载链接
     const link = document.createElement("a");
-    link.download = `share-${new Date().getTime()}.png`;
+    link.download = `share-${String(new Date().getTime())}.png`;
     link.href = dataUrl;
     link.click();
 
@@ -265,24 +263,7 @@ const downloadAsImage = async (): Promise<void> => {
   }
 };
 
-// 声明ClipboardItem接口
-interface ClipboardItems {
-  [key: string]: Blob;
-}
-
-interface ClipboardItemConstructor {
-  new (items: ClipboardItems): ClipboardItem;
-}
-
-declare global {
-  interface Navigator {
-    clipboard: {
-      write(items: ClipboardItem[]): Promise<void>;
-    };
-  }
-
-  var ClipboardItem: ClipboardItemConstructor;
-}
+// We're using the global.d.ts file for clipboard API declarations
 
 // 复制图片到剪贴板
 const copyToClipboard = async (): Promise<void> => {
@@ -357,8 +338,8 @@ onMounted(() => {
 
       <!-- 预览卡片 - 用于下载 -->
       <div
-        class="share-card"
         ref="shareCardRef"
+        class="share-card"
         :style="{
           backgroundColor: themeStyle.background,
           color: themeStyle.color,
@@ -368,10 +349,11 @@ onMounted(() => {
       >
         <div class="share-content">
           <div class="share-text">
+            <!-- eslint-disable-next-line vue/no-v-html -->
             <blockquote
               :style="{ borderLeftColor: themeStyle.borderColor }"
-              v-html="text"
               class="formatted-text"
+              v-html="text"
             ></blockquote>
           </div>
           <div class="share-footer">
@@ -413,15 +395,15 @@ onMounted(() => {
         <div class="button-group">
           <button
             class="copy-button"
-            @click="copyToClipboard"
             :disabled="isGeneratingImage"
+            @click="copyToClipboard"
           >
             {{ isGeneratingImage ? "生成中..." : "复制到剪贴板" }}
           </button>
           <button
             class="download-button"
-            @click="downloadAsImage"
             :disabled="isGeneratingImage"
+            @click="downloadAsImage"
           >
             {{ isGeneratingImage ? "生成中..." : "下载分享图片" }}
           </button>
diff --git a/src/types/dom-to-image-more.d.ts b/src/types/dom-to-image-more.d.ts
new file mode 100644
index 00000000..11f69b72
--- /dev/null
+++ b/src/types/dom-to-image-more.d.ts
@@ -0,0 +1,14 @@
+declare module 'dom-to-image-more' {
+  export interface DomToImageOptions {
+    quality?: number;
+    bgcolor?: string;
+    width?: number;
+    height?: number;
+    style?: Record<string, string>;
+  }
+
+  export function toPng(node: HTMLElement, options?: DomToImageOptions): Promise<string>;
+  export function toJpeg(node: HTMLElement, options?: DomToImageOptions): Promise<string>;
+  export function toBlob(node: HTMLElement, options?: DomToImageOptions): Promise<Blob>;
+  export function toSvg(node: HTMLElement, options?: DomToImageOptions): Promise<string>;
+}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 00000000..fdb8c0a5
--- /dev/null
+++ b/src/types/global.d.ts
@@ -0,0 +1,46 @@
+// This file declares global browser objects to prevent ESLint errors
+// when accessing browser globals like window, document, etc.
+
+interface Window {
+  getSelection(): Selection | null;
+  location: Location;
+  dataLayer: unknown[];
+}
+
+// Clipboard API declarations
+interface ClipboardItemOptions {
+  presentationStyle?: "unspecified" | "inline" | "attachment";
+}
+
+interface ClipboardItem {
+  readonly types: string[];
+  getType(type: string): Promise<Blob>;
+}
+
+interface ClipboardItemConstructor {
+  new (
+    items: Record<string, string | Blob | PromiseLike<string | Blob>>,
+    options?: ClipboardItemOptions,
+  ): ClipboardItem;
+  supports(type: string): boolean;
+}
+
+interface Clipboard {
+  read(): Promise<ClipboardItems>;
+  readText(): Promise<string>;
+  write(items: ClipboardItem[]): Promise<void>;
+  writeText(text: string): Promise<void>;
+}
+
+type ClipboardItems = ClipboardItem[];
+
+declare function setTimeout(callback: () => void, ms?: number): number;
+declare function alert(message?: string): void;
+declare const console: Console;
+
+// Make TypeScript aware that we're in a browser environment
+declare const window: Window;
+declare const document: Document;
+declare const navigator: Navigator & { clipboard: Clipboard };
+declare const fetch: typeof globalThis.fetch;
+declare const ClipboardItem: ClipboardItemConstructor;