add_header_edit&tool&help

src/views/components/Header.vue

@@ -88,59 +88,59 @@
       <a> 编辑 </a>
       <t-dropdown-menu>
         <t-dropdown-item>
-          <a>
+          <a @click="onUndo">
             <div class="flex">
               撤销 <span class="flex-grow"></span> Ctrl + Z
             </div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item divider="true">
-          <a>
+          <a @click="onRedo">
             <div class="flex">
               恢复 <span class="flex-grow"></span> Ctrl + Y
             </div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>
+          <a @click="onCut">
             <div class="flex">
               剪切 <span class="flex-grow"></span> Ctrl + X
             </div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>
+          <a @click="onCopy">
             <div class="flex">
               复制 <span class="flex-grow"></span> Ctrl + C
             </div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item divider="true">
-          <a>
+          <a @click="onPaste">
             <div class="flex">
               粘贴 <span class="flex-grow"></span> Ctrl + V
             </div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>
+          <a @click="onToggleAnchor">
             <div class="flex">
               添加/删除锚点 <span class="flex-grow"></span> A
             </div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>
+          <a @click="onAddAnchorHand">
             <div class="flex">添加手柄 <span class="flex-grow"></span> H</div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>
+          <a @click="onRemoveAnchorHand">
             <div class="flex">删除手柄 <span class="flex-grow"></span> D</div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>
+          <a @click="onToggleAnchorHand">
             <div class="flex">
               切换手柄 <span class="flex-grow"></span> Shift
             </div>
@@ -157,42 +157,44 @@
       <a> 工具 </a>
       <t-dropdown-menu>
         <t-dropdown-item>
-          <a>窗口大小</a>
+          <a @click="onScaleWindow">窗口大小</a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>放大</a>
+          <a @click="onScaleUp">放大</a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>缩小</a>
+          <a @click="onScaleDown">缩小</a>
         </t-dropdown-item>
         <t-dropdown-item divider="true">
-          <a>100%视图</a>
+          <a @click="onScaleView">100%视图</a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>鹰眼地图</a>
+          <a @click="showMap">鹰眼地图</a>
         </t-dropdown-item>
         <t-dropdown-item divider="true">
-          <a>放大镜</a>
+          <a @click="showMagnifier">放大镜</a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>
+          <a @click="onAutoAnchor">
             <div class="flex middle">
-              自动锚点 <span class="flex-grow"></span> <t-icon name="check" />
+              自动锚点 <span class="flex-grow"></span>
+              <t-icon v-show="autoAnchor" name="check" />
             </div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item divider="true">
-          <a>
+          <a @click="onDisableAnchor">
             <div class="flex middle">
-              禁用锚点 <span class="flex-grow"></span> <t-icon name="check" />
+              禁用锚点 <span class="flex-grow"></span>
+              <t-icon v-show="disableAnchor" name="check" />
             </div>
           </a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>明亮主题</a>
+          <a @click="switchTheme('light')">明亮主题</a>
         </t-dropdown-item>
         <t-dropdown-item>
-          <a>暗黑主题</a>
+          <a @click="switchTheme('dark')">暗黑主题</a>
         </t-dropdown-item>
       </t-dropdown-menu>
     </t-dropdown>
@@ -204,23 +206,8 @@
     >
       <a> 帮助 </a>
       <t-dropdown-menu>
-        <t-dropdown-item>
-          <a>产品介绍</a>
-        </t-dropdown-item>
-        <t-dropdown-item>
-          <a>快速上手</a>
-        </t-dropdown-item>
-        <t-dropdown-item>
-          <a>使用手册</a>
-        </t-dropdown-item>
-        <t-dropdown-item divider="true">
-          <a>快捷键</a>
-        </t-dropdown-item>
-        <t-dropdown-item divider="true">
-          <a>企业服务与支持</a>
-        </t-dropdown-item>
-        <t-dropdown-item>
-          <a>关于我们</a>
+        <t-dropdown-item v-for="item in helpList" :divider="item.divider">
+          <a :href="item.url" :target="item.target">{{ item.name }}</a>
         </t-dropdown-item>
       </t-dropdown-menu>
     </t-dropdown>
@@ -369,7 +356,7 @@ const drawingPencil = () => {
     } else {
       meta2d.stopPencil();
     }
-    pencil.value = meta2d.canvas.pencil;
+    pencil.value = meta2d.canvas.pencil || false;
   } catch (e: any) {
     MessagePlugin.warning(e.message);
   }
@@ -1189,6 +1176,122 @@ ${defsList.join("\n")}
   evt.initEvent("click", true, true);
   a.dispatchEvent(evt);
 };
+
+const onUndo = () => {
+  meta2d.undo();
+};
+
+const onRedo = () => {
+  meta2d.redo();
+};
+
+const onCut = () => {
+  meta2d.cut();
+};
+
+const onCopy = () => {
+  meta2d.copy();
+};
+
+const onPaste = () => {
+  meta2d.paste();
+};
+
+const onToggleAnchor = () => {
+  //取消连线状态
+  meta2d.canvas.drawingLineName && drawPen();
+  meta2d.toggleAnchorMode();
+};
+
+const onAddAnchorHand = () => {
+  meta2d.addAnchorHand();
+};
+
+const onRemoveAnchorHand = () => {
+  meta2d.removeAnchorHand();
+};
+
+const onToggleAnchorHand = () => {
+  meta2d.toggleAnchorHand();
+};
+
+const onScaleWindow = () => {
+  meta2d.fitView();
+};
+
+const onScaleUp = () => {
+  const _scale = meta2d.store.data.scale + 0.1;
+  meta2d.scale(_scale);
+};
+
+const onScaleDown = () => {
+  const _scale = meta2d.store.data.scale - 0.1;
+  meta2d.scale(_scale);
+};
+
+const onScaleView = () => {
+  meta2d.scale(1);
+  meta2d.centerView();
+};
+
+const autoAnchor = ref(true);
+const onAutoAnchor = () => {
+  meta2d.store.options.autoAnchor = !meta2d.store.options.autoAnchor;
+  autoAnchor.value = meta2d.store.options.autoAnchor;
+};
+
+const onDisableAnchor = () => {
+  meta2d.store.options.disableAnchor = !meta2d.store.options.disableAnchor;
+  changeDisableAnchor();
+};
+
+const disableAnchor = ref(true);
+const changeDisableAnchor = () => {
+  const { disableAnchor: disableAnchorOption, autoAnchor: autoAnchorOption } =
+    meta2d.store.options;
+  disableAnchor.value = disableAnchorOption || false;
+  if (disableAnchorOption && autoAnchorOption) {
+    // 禁用瞄点开了，需要关闭自动瞄点
+    onAutoAnchor();
+  }
+};
+
+const switchTheme = (theme: string) => {};
+
+const helpList = [
+  {
+    name: "产品介绍",
+    url: "https://doc.le5le.com/document/118756411",
+    target: "_blank",
+  },
+  {
+    name: "快速上手",
+    url: "https://doc.le5le.com/document/119363000",
+    target: "_blank",
+  },
+  {
+    name: "使用手册",
+    url: "https://doc.le5le.com/document/118764244",
+    target: "_blank",
+  },
+  {
+    name: "快捷键",
+    url: "https://doc.le5le.com/document/119620214",
+    target: "_blank",
+    divider: true,
+  },
+  {
+    name: "企业服务与支持",
+    url: "https://doc.le5le.com/document/119296274",
+    target: "_blank",
+    divider: true,
+  },
+  {
+    name: "关于我们",
+    url: "https://le5le.com/about.html",
+    target: "_blank",
+  },
+];
 </script>
 <style lang="postcss" scoped>
 .app-header {