Merge 67ef9dc21c into 03b0e73acb

.github/workflows/docker.yml

@@ -0,0 +1,39 @@
+name: Build and Push Docker Images
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Log in to Docker Hub
+      uses: docker/login-action@v3
+      with:
+        username: ${{ secrets.DOCKER_USERNAME }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
+
+    - name: Build base image
+      run: bash scripts/build-base-image.sh
+
+    - name: Build nginx image
+      run: bash scripts/build-nginx.sh
+
+    - name: Build standalone image
+      run: bash scripts/build-standalone.sh
+
+    - name: Build static image
+      run: bash scripts/build-static.sh
+
+    - name: Push images to Docker Hub
+      run: bash scripts/push-images.sh

docker/latest/.env

@@ -0,0 +1,4 @@
+VER_APP=latest
+VER_NGX=1.21.6-alpine
+VER_GOLANG=1.17.6-alpine3.15
+VER_ALPINE=3.15

docker/latest/Dockerfile.base

@@ -0,0 +1,14 @@
+FROM node:20-alpine3.19 AS builder
+ENV LANG="en_US.UTF-8"
+ENV LANGUAGE="en_US.UTF-8"
+ENV LC_ALL="en_US.UTF-8"
+RUN apk add curl
+RUN curl -L "https://github.com/doocs/md/archive/refs/heads/main.zip" -o "main.zip" && unzip "main.zip" && mv "md-main" /app
+WORKDIR /app
+COPY ./patch/vite.config.ts /app/vite.config.ts
+ENV NODE_OPTIONS="--openssl-legacy-provider"
+RUN npm i && npm run build
+
+FROM scratch
+LABEL MAINTAINER="ylb<contact@yanglibin.info>"
+COPY --from=builder /app/dist /app/assets

docker/latest/Dockerfile.nginx

@@ -0,0 +1,6 @@
+ARG VER_NGX="1.21.6-alpine"
+
+FROM "doocs/md:latest-assets" AS assets
+FROM "nginx:$VER_NGX"
+LABEL MAINTAINER="ylb<contact@yanglibin.info>"
+COPY --from=assets /app/* /usr/share/nginx/html

docker/latest/Dockerfile.standalone

@@ -0,0 +1,19 @@
+ARG VER_GOLANG=1.17.6-alpine3.15
+ARG VER_ALPINE=3.15
+
+FROM "doocs/md:latest-assets" AS assets
+
+FROM "golang:$VER_GOLANG" AS gobuilder
+COPY --from=assets /app/* /app/assets/
+COPY server/main.go /app
+RUN apk add git bash gcc musl-dev upx
+WORKDIR /app
+RUN go build -ldflags "-w -s" -o md main.go && \
+    apk add upx && \
+    upx -9 -o md.minify md
+
+FROM "alpine:$VER_ALPINE"
+LABEL MAINTAINER="ylb<contact@yanglibin.info>"
+COPY --from=gobuilder /app/md.minify /bin/md
+EXPOSE 80
+CMD ["md"]

docker/latest/Dockerfile.static

@@ -0,0 +1,12 @@
+FROM doocs/md:latest-assets AS assets
+
+# detail https://github.com/lipanski/docker-static-website/blob/master/Dockerfile
+FROM lipanski/docker-static-website
+
+WORKDIR /home/static
+
+COPY --from=assets /app/* /home/static
+
+EXPOSE 80
+
+CMD ["/busybox-httpd", "-f", "-v", "-p", "80", "-c", "httpd.conf"]

docker/latest/patch/vite.config.ts

@@ -0,0 +1,66 @@
+import path from 'node:path'
+import process from 'node:process'
+
+import vue from '@vitejs/plugin-vue'
+import { visualizer } from 'rollup-plugin-visualizer'
+import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: `/`, // 基本路径, 建议以绝对路径跟随访问目录
+  define: {
+    process,
+  },
+  plugins: [
+    vue(),
+    UnoCSS(),
+    vueDevTools(),
+    nodePolyfills({
+      include: [`path`, `util`, `timers`, `stream`, `fs`],
+      overrides: {
+        // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
+        // fs: 'memfs',
+      },
+    }),
+    process.env.ANALYZE === `true` && visualizer({
+      emitFile: true,
+      filename: `stats.html`,
+    }),
+    AutoImport({
+      imports: [
+        `vue`,
+        `pinia`,
+        `@vueuse/core`,
+      ],
+      dirs: [
+        `./src/stores`,
+        `./src/utils/toast`,
+      ],
+    }),
+    Components({
+      resolvers: [],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, `./src`),
+    },
+  },
+  css: {
+    devSourcemap: true,
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        chunkFileNames: `static/js/md-[name]-[hash].js`,
+        entryFileNames: `static/js/md-[name]-[hash].js`,
+        assetFileNames: `static/[ext]/md-[name]-[hash].[ext]`,
+      },
+    },
+  },
+})

docker/latest/server/main.go

@@ -0,0 +1,21 @@
+package main
+
+import (
+	"embed"
+	"io/fs"
+	"log"
+	"net/http"
+)
+
+//go:embed assets
+var assets embed.FS
+
+func main() {
+	mutex := http.NewServeMux()
+	md, _ := fs.Sub(assets, "assets")
+	mutex.Handle("/", http.FileServer(http.FS(md)))
+	err := http.ListenAndServe(":80", mutex)
+	if err != nil {
+		log.Fatal(err)
+	}
+}

eslint.config.mjs

@@ -5,7 +5,7 @@ export default antfu({
   unocss: true,
   typescript: true,
   formatters: true,
-  ignores: [`.github`, `bin`, `md-cli`, `src/assets`, `example`],
+  ignores: [`.github`, `scripts`, `docker`, `md-cli`, `src/assets`, `example`],
 }, {
   rules: {
     'semi': [`error`, `never`],

package.json

@@ -13,7 +13,7 @@
     "build:cli": "npm run build && npx shx rm -rf md-cli/dist && npx shx rm -rf dist/**/*.map && npx shx cp -r dist md-cli/ && cd md-cli && npm pack",
     "build:analyze": "cross-env ANALYZE=true vite build",
     "preview": "npm run build && vite preview",
-    "release:cli": "node ./bin/release.js",
+    "release:cli": "node ./scripts/release.js",
     "ext:dev": "wxt",
     "ext:zip": "wxt zip",
     "lint": "eslint . --fix",

scripts/build-base-image.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+RELEASE_DIR='./docker';
+REPO_NAME='doocs/md'
+
+for app_ver in $RELEASE_DIR/*; do
+
+    if [ -f "$app_ver/Dockerfile.base" ]; then
+
+        tag=$(echo $app_ver | cut -b 10-);
+        echo "Build: $tag";
+        set -a
+            . "$app_ver/.env"
+        set +a
+
+        echo $app_ver
+        echo "VER_APP: $VER_APP"
+        echo "VER_NGX: $VER_NGX"
+        echo "VER_GOLANG: $VER_GOLANG"
+        echo "VER_ALPINE: $VER_ALPINE"
+
+        docker build --build-arg VER_APP=$VER_APP -f "$app_ver/Dockerfile.base" -t "$REPO_NAME:${VER_APP}-assets" "$app_ver"
+    fi
+
+done

scripts/build-nginx.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+RELEASE_DIR='./docker';
+REPO_NAME='doocs/md'
+
+for app_ver in $RELEASE_DIR/*; do
+
+    if [ -f "$app_ver/Dockerfile.nginx" ]; then
+
+        tag=$(echo $app_ver | cut -b 10-);
+        echo "Build: $tag";
+        set -a
+            . "$app_ver/.env"
+        set +a
+
+        echo $app_ver
+        echo "VER_APP: $VER_APP"
+        echo "VER_NGX: $VER_NGX"
+        echo "VER_GOLANG: $VER_GOLANG"
+        echo "VER_ALPINE: $VER_ALPINE"
+
+        docker build --build-arg VER_APP=$VER_APP --build-arg VER_NGX=$VER_NGX -f "$app_ver/Dockerfile.nginx" -t "$REPO_NAME:${VER_APP}-nginx" "$app_ver"
+    fi
+
+done

scripts/build-standalone.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+RELEASE_DIR='./docker';
+REPO_NAME='doocs/md'
+
+for app_ver in $RELEASE_DIR/*; do
+
+    if [ -f "$app_ver/Dockerfile.standalone" ]; then
+
+        tag=$(echo $app_ver | cut -b 10-);
+        echo "Build: $tag";
+        set -a
+            . "$app_ver/.env"
+        set +a
+
+        echo $app_ver
+        echo "VER_APP: $VER_APP"
+        echo "VER_NGX: $VER_NGX"
+        echo "VER_GOLANG: $VER_GOLANG"
+        echo "VER_ALPINE: $VER_ALPINE"
+
+        docker build --build-arg VER_APP=$VER_APP --build-arg VER_NGX=$VER_NGX -f "$app_ver/Dockerfile.standalone" -t "$REPO_NAME:${VER_APP}" "$app_ver"
+    fi
+
+done

scripts/build-static.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+RELEASE_DIR='./docker';
+REPO_NAME='doocs/md'
+
+for app_ver in $RELEASE_DIR/*; do
+
+    if [ -f "$app_ver/Dockerfile.static" ]; then
+
+        tag=$(echo $app_ver | cut -b 10-);
+        echo "Build: $tag";
+        set -a
+            . "$app_ver/.env"
+        set +a
+
+        echo $app_ver
+        echo "VER_APP: $VER_APP"
+        echo "VER_NGX: $VER_NGX"
+        echo "VER_GOLANG: $VER_GOLANG"
+        echo "VER_ALPINE: $VER_ALPINE"
+
+        docker build --build-arg VER_APP=$VER_APP --build-arg VER_NGX=$VER_NGX -f "$app_ver/Dockerfile.static" -t "$REPO_NAME:${VER_APP}-static" "$app_ver"
+    fi
+
+done

scripts/push-images.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+RELEASE_DIR='./docker';
+REPO_NAME='doocs/md'
+
+for app_ver in $RELEASE_DIR/*; do
+
+    tag=$(echo $app_ver | cut -b 10-);
+
+    if [ -f "$app_ver/Dockerfile.base" ]; then
+        # 推送构建产物，方便其他的用户和爱好者进行二次封装
+        docker push $REPO_NAME:$tag-assets
+    fi
+
+    if [ -f "$app_ver/Dockerfile.standalone" ]; then
+        # 推送单个二进制的镜像
+        docker push $REPO_NAME:$tag
+    fi
+
+    if [ -f "$app_ver/Dockerfile.nginx" ]; then
+        # 推送使用 Nginx 的镜像
+        docker push $REPO_NAME:$tag-nginx
+    fi
+
+    if [ -f "$app_ver/Dockerfile.static" ]; then
+        # 推送使用 lipanski/docker-static-website 的镜像
+        docker push $REPO_NAME:$tag-static
+    fi
+
+done

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -14,11 +14,26 @@ import {
   themeOptions,
 } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
-import { addPrefix, mergeCss, solveWeChatImage } from '@/utils'
+import {
-import { ChevronDownIcon, Moon, PanelLeftClose, PanelLeftOpen, Settings, Sun } from 'lucide-vue-next'
+  addPrefix,
+  processClipboardContent,
+} from '@/utils'
+import {
+  ChevronDownIcon,
+  Moon,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Settings,
+  Sun,
+} from 'lucide-vue-next'
 import PickColors from 'vue-pick-colors'
 
-const emit = defineEmits([`addFormat`, `formatContent`, `startCopy`, `endCopy`])
+const emit = defineEmits([
+  `addFormat`,
+  `formatContent`,
+  `startCopy`,
+  `endCopy`,
+])
 
 const formatItems = [
   {
@@ -64,34 +79,10 @@ const copyMode = useStorage(addPrefix(`copyMode`), `txt`)
 const source = ref(``)
 const { copy: copyContent } = useClipboard({ source })
 
-const creatEmptyNode = () => {
-  const node = document.createElement(`p`)
-  node.style.fontSize = `0`
-  node.style.lineHeight = `0`
-  node.style.margin = `0`
-  node.innerHTML = ` `
-  return node
-}
-
 // 复制到微信公众号
 function copy() {
   emit(`startCopy`)
   setTimeout(() => {
-    function modifyHtmlStructure(htmlString: string) {
-      // 创建一个 div 元素来暂存原始 HTML 字符串
-      const tempDiv = document.createElement(`div`)
-      tempDiv.innerHTML = htmlString
-
-      const originalItems = tempDiv.querySelectorAll(`li > ul, li > ol`)
-
-      originalItems.forEach((originalItem) => {
-        originalItem.parentElement!.insertAdjacentElement(`afterend`, originalItem)
-      })
-
-      // 返回修改后的 HTML 字符串
-      return tempDiv.innerHTML
-    }
-
     // 如果是深色模式，复制之前需要先切换到白天模式
     const isBeforeDark = isDark.value
     if (isBeforeDark) {
@@ -99,49 +90,11 @@ function copy() {
     }
 
     nextTick(async () => {
-      solveWeChatImage()
+      processClipboardContent(primaryColor.value)
-
       const clipboardDiv = document.getElementById(`output`)!
-      clipboardDiv.innerHTML = mergeCss(clipboardDiv.innerHTML)
-      clipboardDiv.innerHTML = modifyHtmlStructure(clipboardDiv.innerHTML)
-      clipboardDiv.innerHTML = clipboardDiv.innerHTML
-        // 公众号不支持 position， 转换为等价的 translateY
-        .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
-        // 适配主题中的颜色变量
-        .replace(/hsl\(var\(--foreground\)\)/g, `#3f3f3f`)
-        .replace(/var\(--blockquote-background\)/g, `#f7f7f7`)
-        .replace(/var\(--md-primary-color\)/g, primaryColor.value)
-        .replace(/--md-primary-color:.+?;/g, ``)
-        .replace(/<span class="nodeLabel"([^>]*)><p[^>]*>(.*?)<\/p><\/span>/g, `<span class="nodeLabel"$1>$2</span>`)
-
       clipboardDiv.focus()
-
-      // 由于 svg 无法复制， 在前后各插入一个空白节点
-      const beforeNode = creatEmptyNode()
-      const afterNode = creatEmptyNode()
-      clipboardDiv.insertBefore(beforeNode, clipboardDiv.firstChild)
-      clipboardDiv.appendChild(afterNode)
-
-      // 兼容 Mermaid
-      const nodes = clipboardDiv.querySelectorAll(`.nodeLabel`)
-      nodes.forEach((node) => {
-        const parent = node.parentElement!
-        const xmlns = parent.getAttribute(`xmlns`)!
-        const style = parent.getAttribute(`style`)!
-        const section = document.createElement(`section`)
-        section.setAttribute(`xmlns`, xmlns)
-        section.setAttribute(`style`, style)
-        section.innerHTML = parent.innerHTML
-
-        const grand = parent.parentElement!
-        grand.innerHTML = ``
-        grand.appendChild(section)
-      })
-
       window.getSelection()!.removeAllRanges()
-
       const temp = clipboardDiv.innerHTML
-
       if (copyMode.value === `txt`) {
         const range = document.createRange()
         range.setStartBefore(clipboardDiv.firstChild!)
@@ -150,19 +103,20 @@ function copy() {
         document.execCommand(`copy`)
         window.getSelection()!.removeAllRanges()
       }
-
       clipboardDiv.innerHTML = output.value
-
       if (isBeforeDark) {
         nextTick(() => toggleDark())
       }
-
       if (copyMode.value === `html`) {
         await copyContent(temp)
       }
 
       // 输出提示
-      toast.success(copyMode.value === `html` ? `已复制 HTML 源码，请进行下一步操作。` : `已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴。`)
+      toast.success(
+        copyMode.value === `html`
+          ? `已复制 HTML 源码，请进行下一步操作。`
+          : `已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴。`,
+      )
 
       editorRefresh()
       emit(`endCopy`)
@@ -177,7 +131,9 @@ function customStyle() {
   }, 50)
 }
 
-const pickColorsContainer = useTemplateRef<HTMLElement | undefined>(`pickColorsContainer`)
+const pickColorsContainer = useTemplateRef<HTMLElement | undefined>(
+  `pickColorsContainer`,
+)
 const format = ref<Format>(`rgb`)
 const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 </script>
@@ -191,18 +147,30 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
         <MenubarTrigger> 格式 </MenubarTrigger>
         <MenubarContent class="w-60" align="start">
           <MenubarCheckboxItem
-            v-for="{ label, kbd, emitArgs } in formatItems" :key="label"
+            v-for="{ label, kbd, emitArgs } in formatItems"
-            @click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
+            :key="label"
+            @click="
+              emitArgs[0] === 'addFormat'
+                ? $emit(emitArgs[0], emitArgs[1])
+                : $emit(emitArgs[0])
+            "
           >
             {{ label }}
             <MenubarShortcut>
-              <kbd v-for="item in kbd" :key="item" class="mx-1 bg-gray-2 dark:bg-stone-9">
+              <kbd
+                v-for="item in kbd"
+                :key="item"
+                class="mx-1 bg-gray-2 dark:bg-stone-9"
+              >
                 {{ item }}
               </kbd>
             </MenubarShortcut>
           </MenubarCheckboxItem>
           <MenubarSeparator />
-          <MenubarCheckboxItem :checked="isCiteStatus" @click="citeStatusChanged()">
+          <MenubarCheckboxItem
+            :checked="isCiteStatus"
+            @click="citeStatusChanged()"
+          >
             微信外链转底部引用
           </MenubarCheckboxItem>
         </MenubarContent>
@@ -212,10 +180,20 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
       <HelpDropdown />
     </Menubar>
 
-    <Button v-if="!store.isOpenPostSlider" variant="outline" class="mr-2" @click="store.isOpenPostSlider = true">
+    <Button
+      v-if="!store.isOpenPostSlider"
+      variant="outline"
+      class="mr-2"
+      @click="store.isOpenPostSlider = true"
+    >
       <PanelLeftOpen class="size-4" />
     </Button>
-    <Button v-else variant="outline" class="mr-2" @click="store.isOpenPostSlider = false">
+    <Button
+      v-else
+      variant="outline"
+      class="mr-2"
+      @click="store.isOpenPostSlider = false"
+    >
       <PanelLeftClose class="size-4" />
     </Button>
     <Popover>
@@ -230,9 +208,14 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>主题</h2>
             <div class="grid grid-cols-3 justify-items-center gap-2">
               <Button
-                v-for="{ label, value } in themeOptions" :key="value" class="w-full" variant="outline" :class="{
+                v-for="{ label, value } in themeOptions"
+                :key="value"
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': store.theme === value,
-                }" @click="store.themeChanged(value)"
+                }"
+                @click="store.themeChanged(value)"
               >
                 {{ label }}
               </Button>
@@ -242,8 +225,13 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>字体</h2>
             <div class="grid grid-cols-3 justify-items-center gap-2">
               <Button
-                v-for="{ label, value } in fontFamilyOptions" :key="value" variant="outline" class="w-full"
+                v-for="{ label, value } in fontFamilyOptions"
-                :class="{ 'border-black dark:border-white': store.fontFamily === value }"
+                :key="value"
+                variant="outline"
+                class="w-full"
+                :class="{
+                  'border-black dark:border-white': store.fontFamily === value,
+                }"
                 @click="store.fontChanged(value)"
               >
                 {{ label }}
@@ -254,9 +242,14 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>字号</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                v-for="{ value, desc } in fontSizeOptions" :key="value" variant="outline" class="w-full" :class="{
+                v-for="{ value, desc } in fontSizeOptions"
+                :key="value"
+                variant="outline"
+                class="w-full"
+                :class="{
                   'border-black dark:border-white': store.fontSize === value,
-                }" @click="store.sizeChanged(value)"
+                }"
+                @click="store.sizeChanged(value)"
               >
                 {{ desc }}
               </Button>
@@ -266,12 +259,19 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>主题色</h2>
             <div class="grid grid-cols-3 justify-items-center gap-2">
               <Button
-                v-for="{ label, value } in colorOptions" :key="value" class="w-full" variant="outline" :class="{
+                v-for="{ label, value } in colorOptions"
-                  'border-black dark:border-white': store.primaryColor === value,
+                :key="value"
-                }" @click="store.colorChanged(value)"
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white':
+                    store.primaryColor === value,
+                }"
+                @click="store.colorChanged(value)"
               >
                 <span
-                  class="mr-2 inline-block h-4 w-4 rounded-full" :style="{
+                  class="mr-2 inline-block h-4 w-4 rounded-full"
+                  :style="{
                     background: value,
                   }"
                 />
@@ -285,7 +285,8 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
               <PickColors
                 v-if="pickColorsContainer"
                 v-model:value="primaryColor"
-                show-alpha :format="format"
+                show-alpha
+                :format="format"
                 :format-options="formatOptions"
                 :theme="store.isDark ? 'dark' : 'light'"
                 :popup-container="pickColorsContainer"
@@ -296,12 +297,19 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
           <div class="space-y-2">
             <h2>代码块主题</h2>
             <div>
-              <Select v-model="store.codeBlockTheme" @update:model-value="store.codeBlockThemeChanged">
+              <Select
+                v-model="store.codeBlockTheme"
+                @update:model-value="store.codeBlockThemeChanged"
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="Select a fruit" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem v-for="{ label, value } in codeBlockThemeOptions" :key="label" :value="value">
+                  <SelectItem
+                    v-for="{ label, value } in codeBlockThemeOptions"
+                    :key="label"
+                    :value="value"
+                  >
                     {{ label }}
                   </SelectItem>
                 </SelectContent>
@@ -312,9 +320,14 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>图注格式</h2>
             <div class="grid grid-cols-3 justify-items-center gap-2">
               <Button
-                v-for="{ label, value } in legendOptions" :key="value" class="w-full" variant="outline" :class="{
+                v-for="{ label, value } in legendOptions"
+                :key="value"
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': store.legend === value,
-                }" @click="store.legendChanged(value)"
+                }"
+                @click="store.legendChanged(value)"
               >
                 {{ label }}
               </Button>
@@ -325,16 +338,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>Mac 代码块</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': store.isMacCodeBlock,
-                }" @click="!store.isMacCodeBlock && store.macCodeBlockChanged()"
+                }"
+                @click="!store.isMacCodeBlock && store.macCodeBlockChanged()"
               >
                 开启
               </Button>
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': !store.isMacCodeBlock,
-                }" @click="store.isMacCodeBlock && store.macCodeBlockChanged()"
+                }"
+                @click="store.isMacCodeBlock && store.macCodeBlockChanged()"
               >
                 关闭
               </Button>
@@ -344,16 +363,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>微信外链转底部引用</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': store.isCiteStatus,
-                }" @click="!store.isCiteStatus && store.citeStatusChanged()"
+                }"
+                @click="!store.isCiteStatus && store.citeStatusChanged()"
               >
                 开启
               </Button>
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': !store.isCiteStatus,
-                }" @click="store.isCiteStatus && store.citeStatusChanged()"
+                }"
+                @click="store.isCiteStatus && store.citeStatusChanged()"
               >
                 关闭
               </Button>
@@ -363,16 +388,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>段落首行缩进</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': store.isUseIndent,
-                }" @click="!store.isUseIndent && store.useIndentChanged()"
+                }"
+                @click="!store.isUseIndent && store.useIndentChanged()"
               >
                 开启
               </Button>
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': !store.isUseIndent,
-                }" @click="store.isUseIndent && store.useIndentChanged()"
+                }"
+                @click="store.isUseIndent && store.useIndentChanged()"
               >
                 关闭
               </Button>
@@ -382,16 +413,23 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>自定义 CSS 面板</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
-                  'border-black dark:border-white': displayStore.isShowCssEditor,
+                variant="outline"
-                }" @click="!displayStore.isShowCssEditor && customStyle()"
+                :class="{
+                  'border-black dark:border-white':
+                    displayStore.isShowCssEditor,
+                }"
+                @click="!displayStore.isShowCssEditor && customStyle()"
               >
                 开启
               </Button>
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': !displayStore.isShowCssEditor,
-                }" @click="displayStore.isShowCssEditor && customStyle()"
+                }"
+                @click="displayStore.isShowCssEditor && customStyle()"
               >
                 关闭
               </Button>
@@ -401,16 +439,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>编辑区位置</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': store.isEditOnLeft,
-                }" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
+                }"
+                @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
               >
                 左侧
               </Button>
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': !store.isEditOnLeft,
-                }" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
+                }"
+                @click="store.isEditOnLeft && store.toggleEditOnLeft()"
               >
                 右侧
               </Button>
@@ -420,16 +464,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>模式</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': !isDark,
-                }" @click="store.toggleDark(false)"
+                }"
+                @click="store.toggleDark(false)"
               >
                 <Sun class="h-4 w-4" />
               </Button>
               <Button
-                class="w-full" variant="outline" :class="{
+                class="w-full"
+                variant="outline"
+                :class="{
                   'border-black dark:border-white': isDark,
-                }" @click="store.toggleDark(true)"
+                }"
+                @click="store.toggleDark(true)"
               >
                 <Moon class="h-4 w-4" />
               </Button>
@@ -445,7 +495,9 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
       </PopoverContent>
     </Popover>
 
-    <div class="space-x-1 bg-background text-background-foreground mx-2 flex items-center border rounded-md">
+    <div
+      class="space-x-1 bg-background text-background-foreground mx-2 flex items-center border rounded-md"
+    >
       <Button variant="ghost" class="shadow-none" @click="copy">
         复制
       </Button>
@@ -456,11 +508,7 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <ChevronDownIcon class="text-secondary-foreground h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent
+        <DropdownMenuContent align="end" :align-offset="-5" class="w-[200px]">
-          align="end"
-          :align-offset="-5"
-          class="w-[200px]"
-        >
           <DropdownMenuRadioGroup v-model="copyMode">
             <DropdownMenuRadioItem value="txt">
               公众号格式

src/utils/index.ts

@@ -340,20 +340,86 @@ export function removeLeft(str: string) {
 export function solveWeChatImage() {
   const clipboardDiv = document.getElementById(`output`)!
   const images = clipboardDiv.getElementsByTagName(`img`)
-  for (let i = 0; i < images.length; i++) {
+
-    const image = images[i]
+  Array.from(images).forEach((image) => {
     const width = image.getAttribute(`width`)!
     const height = image.getAttribute(`height`)!
     image.removeAttribute(`width`)
     image.removeAttribute(`height`)
     image.style.width = width
     image.style.height = height
-  }
+  })
 }
 
-export function mergeCss(html: string) {
+export function mergeCss(html: string): string {
   return juice(html, {
     inlinePseudoElements: true,
     preserveImportant: true,
   })
 }
+
+export function createEmptyNode(): HTMLElement {
+  const node = document.createElement(`p`)
+  node.style.fontSize = `0`
+  node.style.lineHeight = `0`
+  node.style.margin = `0`
+  node.innerHTML = `&nbsp;`
+  return node
+}
+
+export function modifyHtmlStructure(htmlString: string): string {
+  const tempDiv = document.createElement(`div`)
+  tempDiv.innerHTML = htmlString
+
+  // 移动 `li > ul` 和 `li > ol` 到 `li` 后面
+  tempDiv.querySelectorAll(`li > ul, li > ol`).forEach((originalItem) => {
+    originalItem.parentElement!.insertAdjacentElement(`afterend`, originalItem)
+  })
+
+  return tempDiv.innerHTML
+}
+
+export function processClipboardContent(primaryColor: string) {
+  const clipboardDiv = document.getElementById(`output`)!
+
+  // 先合并 CSS 和修改 HTML 结构
+  clipboardDiv.innerHTML = modifyHtmlStructure(mergeCss(clipboardDiv.innerHTML))
+
+  // 处理样式和颜色变量
+  clipboardDiv.innerHTML = clipboardDiv.innerHTML
+    .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
+    .replace(/hsl\(var\(--foreground\)\)/g, `#3f3f3f`)
+    .replace(/var\(--blockquote-background\)/g, `#f7f7f7`)
+    .replace(/var\(--md-primary-color\)/g, primaryColor)
+    .replace(/--md-primary-color:.+?;/g, ``)
+    .replace(
+      /<span class="nodeLabel"([^>]*)><p[^>]*>(.*?)<\/p><\/span>/g,
+      `<span class="nodeLabel"$1>$2</span>`,
+    )
+
+  // 处理图片大小
+  solveWeChatImage()
+
+  // 添加空白节点用于兼容 SVG 复制
+  const beforeNode = createEmptyNode()
+  const afterNode = createEmptyNode()
+  clipboardDiv.insertBefore(beforeNode, clipboardDiv.firstChild)
+  clipboardDiv.appendChild(afterNode)
+
+  // 兼容 Mermaid
+  const nodes = clipboardDiv.querySelectorAll(`.nodeLabel`)
+  nodes.forEach((node) => {
+    const parent = node.parentElement!
+    const xmlns = parent.getAttribute(`xmlns`)!
+    const style = parent.getAttribute(`style`)!
+    const section = document.createElement(`section`)
+    section.setAttribute(`xmlns`, xmlns)
+    section.setAttribute(`style`, style)
+    section.innerHTML = parent.innerHTML
+
+    const grand = parent.parentElement!
+    // 清空父元素
+    grand.innerHTML = ``
+    grand.appendChild(section)
+  })
+}

src/views/CodemirrorEditor.vue

@@ -170,12 +170,15 @@ watch(isDark, () => {
   toRaw(editor.value)?.setOption?.(`theme`, theme)
 })
 
+const charCount = ref(0)
+
 // 初始化编辑器
 function initEditor() {
   const editorDom = document.querySelector<HTMLTextAreaElement>(`#editor`)!
 
   if (!editorDom.value) {
     editorDom.value = store.posts[store.currentPostIndex].content
+    charCount.value = store.posts[store.currentPostIndex].content.replace(/\s/g, ``).length
   }
   editor.value = CodeMirror.fromTextArea(editorDom, {
     mode: `text/x-markdown`,
@@ -222,7 +225,9 @@ function initEditor() {
     clearTimeout(changeTimer.value)
     changeTimer.value = setTimeout(() => {
       onEditorRefresh()
-      store.posts[store.currentPostIndex].content = e.getValue()
+      const value = e.getValue()
+      store.posts[store.currentPostIndex].content = value
+      charCount.value = value.replace(/\s/g, ``).length
     }, 300)
   })
 
@@ -414,23 +419,28 @@ onMounted(() => {
             </ContextMenuContent>
           </ContextMenu>
         </div>
-        <div
+        <div class="relative flex-1">
-          id="preview"
+          <div
-          ref="preview"
+            id="preview"
-          :span="isShowCssEditor ? 8 : 12"
+            ref="preview"
-          class="preview-wrapper flex-1 p-5"
+            :span="isShowCssEditor ? 8 : 12"
-        >
+            class="preview-wrapper flex-1 p-5"
-          <div id="output-wrapper" :class="{ output_night: !backLight }">
+          >
-            <div class="preview border shadow-xl">
+            <div id="output-wrapper" :class="{ output_night: !backLight }">
-              <section id="output" v-html="output" />
+              <div class="preview border shadow-xl">
-              <div v-if="isCoping" class="loading-mask">
+                <section id="output" v-html="output" />
-                <div class="loading-mask-box">
+                <div v-if="isCoping" class="loading-mask">
-                  <div class="loading__img" />
+                  <div class="loading-mask-box">
-                  <span>正在生成</span>
+                    <div class="loading__img" />
+                    <span>正在生成</span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div class="bg-muted absolute bottom-0 left-0 p-2 text-xs shadow">
+            {{ charCount }} 个字符
+          </div>
         </div>
         <CssEditor class="flex-1" />
       </div>