feat: support legend options (doocs#292)

xwzy · Apr 28, 2024 · ed951d2 · ed951d2
1 parent 97f42c9
commit ed951d2
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 2 deletions.
diff --git a/src/assets/scripts/config.js b/src/assets/scripts/config.js
@@ -88,6 +88,33 @@ export default {
       desc: `dark`,
     },
   ],
+  legendOption: [
+    {
+      label: `title 优先`,
+      value: `title-alt`,
+      desc: ``,
+    },
+    {
+      label: `alt 优先`,
+      value: `alt-title`,
+      desc: ``,
+    },
+    {
+      label: `只显示 title`,
+      value: `title`,
+      desc: ``,
+    },
+    {
+      label: `只显示 alt`,
+      value: `alt`,
+      desc: ``,
+    },
+    {
+      label: `不显示`,
+      value: `none`,
+      desc: ``,
+    },
+  ],
   form: {
     rows: 1,
     cols: 1,

diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/assets/scripts/renderers/wx-renderer.js
@@ -175,8 +175,22 @@ class WxRenderer {
 
           return `<figcaption ${getStyles("figcaption")}>${s}</figcaption>`;
         };
-
-        const subText = createSubText(title || text);
+        const transform = (title, alt) => {
+          const legend = localStorage.getItem("legend");
+          switch (legend) {
+            case "alt":
+              return alt;
+            case "title":
+              return title;
+            case "alt-title":
+              return alt || title;
+            case "title-alt":
+              return title || alt;
+            default:
+              return "";
+          }
+        };
+        const subText = createSubText(transform(title, text));
         const figureStyles = getStyles("figure");
         const imgStyles = getStyles("image");
         return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -110,6 +110,14 @@
               :charge="codeThemeChanged"
             ></style-option-menu>
           </el-dropdown-item>
+          <el-dropdown-item class="padding-left-3">
+            <style-option-menu
+              label="图注格式"
+              :options="config.legendOption"
+              :current="selectLegend"
+              :charge="legendChanged"
+            ></style-option-menu>
+          </el-dropdown-item>
           <el-dropdown-item
             divided
             class="padding-left-3"
@@ -201,6 +209,7 @@ export default {
       selectSize: ``,
       selectColor: ``,
       selectCodeTheme: config.codeThemeOption[2].value,
+      selectLegend: ``,
       form: {
         dialogVisible: false,
         title: ``,
@@ -254,6 +263,7 @@ export default {
       currentSize: (state) => state.currentSize,
       currentColor: (state) => state.currentColor,
       codeTheme: (state) => state.codeTheme,
+      legend: (state) => state.legend,
       nightMode: (state) => state.nightMode,
       currentCiteStatus: (state) => state.citeStatus,
       currentIsMacCodeBlock: (state) => state.isMacCodeBlock,
@@ -332,6 +342,11 @@ export default {
       this.selectCodeTheme = theme
       this.$emit(`refresh`)
     },
+    legendChanged(legend) {
+      this.setCurrentLegend(legend)
+      this.selectLegend = legend
+      this.$emit(`refresh`)
+    },
     statusChanged() {
       this.citeStatus = !this.citeStatus
       this.setCiteStatus(this.citeStatus)
@@ -420,6 +435,7 @@ export default {
       this.colorChanged(this.config.colorOption[0].value)
       this.sizeChanged(this.config.sizeOption[2].value)
       this.codeThemeChanged(this.config.codeThemeOption[2].value)
+      this.legendChanged(this.config.legendOption[3].value)
       this.$emit(`cssChanged`)
       this.selectFont = this.currentFont
       this.selectSize = this.currentSize
@@ -441,6 +457,7 @@ export default {
       `setCurrentSize`,
       `setCssEditorValue`,
       `setCurrentCodeTheme`,
+      `setCurrentLegend`,
       `setWxRendererOptions`,
       `setIsMacCodeBlock`,
       `setIsEditOnLeft`,
@@ -451,6 +468,7 @@ export default {
     this.selectSize = this.currentSize
     this.selectColor = this.currentColor
     this.selectCodeTheme = this.codeTheme
+    this.selectLegend = this.legend
     this.citeStatus = this.currentCiteStatus
     this.isMacCodeBlock = this.currentIsMacCodeBlock
     this.isEditOnLeft = this.currentIsEditOnLeft

diff --git a/src/stores/index.js b/src/stores/index.js
@@ -25,6 +25,7 @@ export const useStore = defineStore(`store`, {
     citeStatus: false,
     nightMode: false,
     codeTheme: config.codeThemeOption[2].value,
+    legend: config.legendOption[3].value,
     isMacCodeBlock: true,
     isEditOnLeft: true,
   }),
@@ -58,6 +59,10 @@ export const useStore = defineStore(`store`, {
       this.codeTheme = data
       localStorage.setItem(`codeTheme`, data)
     },
+    setCurrentLegend(data) {
+      this.legend = data
+      localStorage.setItem(`legend`, data)
+    },
     setIsMacCodeBlock(data) {
       this.isMacCodeBlock = data
       localStorage.setItem(`isMacCodeBlock`, data)
@@ -79,6 +84,8 @@ export const useStore = defineStore(`store`, {
         localStorage.getItem(`size`) || config.sizeOption[2].value
       this.codeTheme =
         localStorage.getItem(`codeTheme`) || config.codeThemeOption[2].value
+      this.legend =
+        localStorage.getItem(`legend`) || config.legendOption[3].value
       this.citeStatus = localStorage.getItem(`citeStatus`) === `true`
       this.nightMode = localStorage.getItem(`nightMode`) === `true`
       this.isMacCodeBlock = !(