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/package.json b/package.json
index b54305a2..ced059ff 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": {
     "@modyfi/vite-plugin-yaml": "^1.1.1",
diff --git a/src/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts
index 117cc74c..75ede8a8 100644
--- a/src/.vitepress/theme/index.ts
+++ b/src/.vitepress/theme/index.ts
@@ -5,13 +5,20 @@ import DefaultTheme from "vitepress/theme";
 import Aura from "@primeuix/themes/aura";
 import PrimeVue from "primevue/config";
 
+
+// Import components
+import AppLayout from "@/components/AppLayout.vue";
+import SelectionShareMenu from "@/components/SelectionShareMenu.vue";
 import PostList from "@/components/PostList.vue";
 import redirect from "@/redirect";
 
 import "./style.css";
 
+// Define the theme
 export default {
   extends: DefaultTheme,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
+  Layout: AppLayout as any,
   enhanceApp({ app, router }) {
     /* client side redirections */
     router.onBeforeRouteChange = (to) => redirect(to, router);
@@ -21,5 +28,6 @@ export default {
 
     /* register global components */
     app.component("PostList", PostList);
+    app.component("SelectionShareMenu", SelectionShareMenu);
   },
 } as Theme;
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
new file mode 100644
index 00000000..9410ee19
--- /dev/null
+++ b/src/components/AppLayout.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import DefaultTheme from "vitepress/theme";
+
+import SelectionShareMenu from "./SelectionShareMenu.vue";
+
+const { Layout: DefaultLayout } = DefaultTheme;
+</script>
+
+<template>
+  <DefaultLayout>
+    <template #layout-bottom>
+      <SelectionShareMenu />
+    </template>
+  </DefaultLayout>
+</template>
diff --git a/src/components/SelectionShareMenu.vue b/src/components/SelectionShareMenu.vue
new file mode 100644
index 00000000..419260d5
--- /dev/null
+++ b/src/components/SelectionShareMenu.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+
+import ShareCard from "./ShareCard.vue";
+
+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: number, y: number, text: string) => {
+  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
+
+    // 获取选中文本的HTML内容
+    const container = document.createElement("div");
+    const clonedSelection = range.cloneContents();
+    container.appendChild(clonedSelection);
+    const htmlContent = container.innerHTML;
+
+    // 使用HTML内容而不是纯文本
+    showMenu(x, y, htmlContent);
+  }
+};
+
+// Handle mouseup event to detect selection
+const handleMouseUp = () => {
+  // 如果分享卡片已显示，不再监听选择变化
+  if (typeof window === "undefined" || shareCardVisible.value) 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;
+  // 清空选中的文本，以便用户可以重新选择
+  setTimeout(() => {
+    if (typeof window !== "undefined") {
+      window.getSelection()?.removeAllRanges();
+    }
+  }, 100);
+};
+
+// Click outside to hide menu
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement;
+  if (menuVisible.value && !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 class="menu-button copy-button" title="复制" @click="copyText">
+        <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 class="menu-button share-button" title="分享" @click="shareText">
+        <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"
+      @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..d39b8e10
--- /dev/null
+++ b/src/components/ShareCard.vue
@@ -0,0 +1,678 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+import { useData } from "vitepress";
+
+// 定义Props类型
+interface ShareCardProps {
+  text: string;
+  visible: boolean;
+}
+
+// 定义主题类型
+interface Theme {
+  name: string;
+  background: string;
+  text: string;
+  border: string;
+}
+
+// 定义主题样式类型
+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<boolean>(false);
+const isGeneratingImage = ref<boolean>(false);
+const shareCardRef = ref<HTMLElement | null>(null);
+const currentTheme = ref<string>(isDark.value ? "dark" : "light"); // 根据网站主题设置默认值
+
+// 监听网站主题变化
+watch(isDark, (newValue: boolean) => {
+  // 只有当当前主题是dark或light时才自动切换
+  if (currentTheme.value === "dark" || currentTheme.value === "light") {
+    currentTheme.value = newValue ? "dark" : "light";
+  }
+});
+
+// 定义主题
+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" },
+  { name: "green", background: "#0f9d58", text: "#fff", border: "#fff" },
+  { name: "orange", background: "#ed6c00", text: "#ffffff", border: "#ffffff" },
+  { name: "teal", background: "#2bb7b3", text: "#ffffff", border: "#ffffff" },
+];
+
+// 当前主题的样式
+const themeStyle = computed<ThemeStyle>(() => {
+  const theme = themes.find((t) => t.name === currentTheme.value) ?? themes[0];
+  return {
+    background: theme.background,
+    color: theme.text,
+    borderColor: theme.border,
+  };
+});
+
+// 设置主题
+const setTheme = (themeName: string): void => {
+  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 = (): void => {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+
+  try {
+    // 获取QR码容器元素
+    const qrcodeElement = document.getElementById("qrcode");
+    if (!qrcodeElement) return;
+
+    // 清除之前的内容
+    qrcodeElement.innerHTML = "";
+
+    // 获取当前主题颜色
+    const theme =
+      themes.find((t) => t.name === currentTheme.value) ?? themes[0];
+
+    // 生成正确的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 = "80px";
+    qrCodeImg.style.height = "80px";
+
+    // 处理主题颜色
+    let bgColor = theme.background.replace("#", "");
+    let fgColor = theme.text.replace("#", "");
+
+    // 确保颜色格式正确
+    if (!bgColor) bgColor = "ffffff";
+    if (!fgColor) fgColor = "000000";
+
+    // 使用QR Code API生成二维码
+    const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=${encodeURIComponent(qrUrl)}&bgcolor=${bgColor}&color=${fgColor}`;
+
+    // 设置加载事件
+    qrCodeImg.onload = () => {
+      qrcodeGenerated.value = true;
+    };
+
+    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)}`;
+    };
+
+    // 设置图片源
+    qrCodeImg.src = qrCodeUrl;
+
+    // 添加到DOM
+    qrcodeElement.appendChild(qrCodeImg);
+  } 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 (): Promise<string | null> => {
+  if (!shareCardRef.value || typeof window === "undefined") return null;
+
+  try {
+    const domToImage = (await import("dom-to-image-more")) as unknown as {
+      default: DomToImage;
+    };
+
+    // 创建一个新的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) as HTMLElement;
+
+    // 确保 HTML 格式在克隆中保留
+    const blockquote = clone.querySelector(".formatted-text");
+    if (blockquote instanceof HTMLElement) {
+      blockquote.innerHTML = props.text;
+    }
+
+    // 确保背景色正确应用
+    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 = `${String(originalWidth)}px`;
+    clone.style.height = `${String(originalHeight)}px`;
+    clone.style.backgroundColor = theme.background;
+    clone.style.color = theme.text;
+    clone.style.padding = "20px";
+    clone.style.borderRadius = "12px";
+    clone.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
+
+    // 添加到临时容器
+    cloneContainer.appendChild(clone);
+
+    // 使用toPng生成高分辨率图片
+    const dataUrl = await domToImage.default.toPng(clone, {
+      quality: 1,
+      bgcolor: theme.background,
+      width: scaledWidth, // 使用放大后的宽度
+      height: scaledHeight, // 使用放大后的高度
+      style: {
+        margin: "0",
+        padding: "20px",
+        "border-radius": "12px",
+        "background-color": theme.background,
+        color: theme.text,
+        transform: `scale(${String(scale)})`,
+        "transform-origin": "top left",
+      },
+    });
+
+    // 移除临时元素
+    document.body.removeChild(cloneContainer);
+
+    return dataUrl;
+  } 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 (): Promise<void> => {
+  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-${String(new Date().getTime())}.png`;
+    link.href = dataUrl;
+    link.click();
+
+    isGeneratingImage.value = false;
+  } catch (err: unknown) {
+    console.error(
+      "Failed to download image:",
+      err instanceof Error ? err.message : String(err),
+    );
+    isGeneratingImage.value = false;
+  }
+};
+
+// We're using the global.d.ts file for clipboard API declarations
+
+// 复制图片到剪贴板
+const copyToClipboard = async (): Promise<void> => {
+  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: unknown) {
+    console.error(
+      "Failed to copy image to clipboard:",
+      err instanceof Error ? err.message : String(err),
+    );
+    alert("复制图片失败，请尝试下载图片后手动分享。");
+    isGeneratingImage.value = false;
+  }
+};
+
+// Watch for visibility changes to generate QR code when component becomes visible
+watch(
+  () => props.visible,
+  (newValue: boolean) => {
+    // 当组件变为可见时，重置状态并生成新的二维码
+    if (newValue) {
+      // 重置状态
+      qrcodeGenerated.value = false;
+
+      // 清除之前的二维码
+      const qrcodeElement = document.getElementById("qrcode");
+      if (qrcodeElement) {
+        qrcodeElement.innerHTML = "";
+      }
+
+      // 小延迟确保 DOM 准备就绪
+      setTimeout(generateQRCode, 100);
+    }
+  },
+  { immediate: true }, // 立即触发一次
+);
+
+// 当组件挂载时，如果可见则生成二维码
+onMounted(() => {
+  // 组件挂载时不需要额外生成二维码，因为 watch 中的 immediate: true 会处理
+});
+</script>
+
+<template>
+  <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="emit('close')">×</button>
+      </div>
+
+      <!-- 预览卡片 - 用于下载 -->
+      <div
+        ref="shareCardRef"
+        class="share-card"
+        :style="{
+          backgroundColor: themeStyle.background,
+          color: themeStyle.color,
+          borderColor: themeStyle.borderColor,
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+        }"
+      >
+        <div class="share-content">
+          <div class="share-text">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <blockquote
+              :style="{ borderLeftColor: themeStyle.borderColor }"
+              class="formatted-text"
+              v-html="text"
+            ></blockquote>
+          </div>
+          <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>
+      </div>
+
+      <!-- 控制按钮 - 不包含在下载图片中 -->
+      <div class="share-controls">
+        <div class="theme-selector">
+          <span>主题：</span>
+          <button
+            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)"
+          >
+            A
+          </button>
+        </div>
+        <div class="button-group">
+          <button
+            class="copy-button"
+            :disabled="isGeneratingImage"
+            @click="copyToClipboard"
+          >
+            {{ isGeneratingImage ? "生成中..." : "复制到剪贴板" }}
+          </button>
+          <button
+            class="download-button"
+            :disabled="isGeneratingImage"
+            @click="downloadAsImage"
+          >
+            {{ 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: var(--vp-c-bg);
+  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;
+  color: var(--vp-c-text-1);
+}
+
+.share-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.share-card-header h3 {
+  margin: 0;
+  color: var(--vp-c-text-1);
+}
+
+.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-radius: 8px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.share-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.share-text {
+  flex: 1;
+}
+
+.share-content blockquote {
+  font-size: 18px;
+  line-height: 1.6;
+  padding-left: 15px;
+  margin: 0 0 20px 0;
+  border-left-width: 4px;
+  border-left-style: solid;
+}
+
+.share-source {
+  font-size: 14px;
+}
+
+.share-footer {
+  display: flex;
+  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: 8px;
+  border-radius: 8px;
+  border: 1px solid;
+  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: 5px;
+  font-size: 12px;
+  text-align: center;
+  line-height: 1.2;
+}
+
+/* 控制按钮样式 */
+.share-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.theme-selector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.theme-button {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+
+.theme-button.active {
+  border-color: #000;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.download-button,
+.copy-button {
+  padding: 10px 16px;
+  color: var(--vp-c-white);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  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:active,
+.copy-button:active {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+.download-button:disabled,
+.copy-button:disabled {
+  background-color: var(--vp-c-gray);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+@media (min-width: 768px) {
+  .share-card {
+    flex-direction: row;
+  }
+
+  .share-qrcode {
+    margin-top: 0;
+    min-width: 150px;
+  }
+
+  .theme-selector {
+    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>
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;