feat(editor): 抽取btn操作到变量

ZvonimirSun · Dec 19, 2023 · 0867b89 · 0867b89
1 parent 200caa3
commit 0867b89
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 67 deletions.
diff --git a/src/components/editor/basic.ts b/src/components/editor/basic.ts
@@ -23,7 +23,7 @@ function baseInfoPanel (view: EditorView): Panel {
   function getCursorAndSelection (): string {
     const selection = view.state.selection.main
     const line = view.state.doc.lineAt(selection.head)
-    let info = `行: ${line.number} 列: ${selection.head - line.from}`
+    let info = `总行数: ${view.state.doc.lines} 行数: ${line.number} 列数: ${selection.head - line.from}`
     if (!selection.empty) {
       info += `选中: ${Math.abs(selection.to - selection.from)} 字符`
     }

diff --git a/src/components/editor/editor.vue b/src/components/editor/editor.vue
@@ -56,33 +56,59 @@ function onChange (update: ViewUpdate) {
   }
 }
 
-function formatBtn () {
-  const val = props.plugin.formatter(cm.state.doc.toString())
-  if (val && val !== cm.state.doc.toString()) {
-    cm.dispatch({
-      changes: { from: 0, to: cm.state.doc.length, insert: val }
-    })
-  }
-}
-
-function compactBtn () {
-  const val = props.plugin.compactor(cm.state.doc.toString())
-  if (val && val !== cm.state.doc.toString()) {
-    cm.dispatch({
-      changes: { from: 0, to: cm.state.doc.length, insert: val }
-    })
-  }
-}
-
-function undoBtn () {
-  if (!hasUndo.value) return
-  undo(cm)
-}
-
-function redoBtn () {
-  if (!hasRedo.value) return
-  redo(cm)
-}
+const controls: {
+  title: string,
+  event: () => void,
+  isDisabled?: () => boolean,
+  icon: string
+}[][] = [
+  [
+    {
+      title: '格式化',
+      event: function formatBtn () {
+        const val = props.plugin.formatter(cm.state.doc.toString())
+        if (val && val !== cm.state.doc.toString()) {
+          cm.dispatch({
+            changes: { from: 0, to: cm.state.doc.length, insert: val }
+          })
+        }
+      },
+      icon: 'i-iszy-editor-format'
+    },
+    {
+      title: '压缩',
+      event: function compactBtn () {
+        const val = props.plugin.compactor(cm.state.doc.toString())
+        if (val && val !== cm.state.doc.toString()) {
+          cm.dispatch({
+            changes: { from: 0, to: cm.state.doc.length, insert: val }
+          })
+        }
+      },
+      icon: 'i-iszy-editor-compact'
+    }
+  ],
+  [
+    {
+      title: '撤销',
+      isDisabled: () => !hasUndo.value,
+      event: function undoBtn () {
+        if (!hasUndo.value) return
+        undo(cm)
+      },
+      icon: 'i-fa6-solid-arrow-rotate-left'
+    },
+    {
+      title: '重做',
+      isDisabled: () => !hasRedo.value,
+      event: function redoBtn () {
+        if (!hasRedo.value) return
+        redo(cm)
+      },
+      icon: 'i-fa6-solid-arrow-rotate-right'
+    }
+  ]
+]
 </script>
 
 <template>
@@ -94,41 +120,26 @@ function redoBtn () {
       class="controller"
       flex
     >
-      <div
-        title="格式化"
-        class="controller-btn"
-        @click="formatBtn"
-      >
-        <span class="i-iszy-editor-format" />
-      </div>
-      <div
-        title="压缩"
-        class="controller-btn"
-        @click="compactBtn"
-      >
-        <span class="i-iszy-editor-compact" />
-      </div>
-      <div class="divider" />
-      <div
-        title="撤销"
-        class="controller-btn"
-        :class="{
-          disabled: !hasUndo
-        }"
-        @click="undoBtn"
-      >
-        <span class="i-fa6-solid-arrow-rotate-left" />
-      </div>
-      <div
-        title="重做"
-        class="controller-btn"
-        :class="{
-          disabled: !hasRedo
-        }"
-        @click="redoBtn"
-      >
-        <span class="i-fa6-solid-arrow-rotate-right" />
-      </div>
+      <template v-for="(group, i) in controls">
+        <div
+          v-if="i !== 0"
+          :key="'divider' + i"
+          class="divider"
+        />
+        <div
+          v-for="(btn, j) in group"
+          :key="'btn' + i + j"
+          :title="btn.title"
+          class="controller-btn"
+
+          :class="{
+            disabled: btn.isDisabled?.()
+          }"
+          @click="btn.event"
+        >
+          <span :class="btn.icon" />
+        </div>
+      </template>
     </div>
     <div
       ref="editor"

diff --git a/src/tools.json b/src/tools.json
@@ -284,10 +284,6 @@
         "name": "留言反馈",
         "link": "https://github.com/ZvonimirSun/iszy-tools/discussions",
         "statistics": false
-      },
-      {
-        "name": "测试",
-        "link": "/test"
       }
     ]
   }