perfect_view_header_right

src/router/index.ts

@@ -1,6 +1,9 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHistory } from "vue-router";
 
-const routes = [{ path: '/', component: () => import('@/views/Index.vue') }];
+const routes = [
+  { path: "/", component: () => import("@/views/Index.vue") },
+  { path: "/preview", component: () => import("@/views/Preview.vue") },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.VITE_ROUTER_BASE),

src/views/Preview.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="preview">
+    <div class="meta2d-canvas" ref="meta2dDom"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, onUnmounted } from "vue";
+import localforage from "localforage";
+import { localMeta2dDataName } from "@/services/utils";
+import { registerNormalShape } from "../components/register";
+import { defaultFormat } from "@/services/defaults";
+import { useRouter, useRoute } from "vue-router";
+import { Meta2d, Options, Pen } from "@meta2d/core";
+import { registerBasicDiagram } from "@/services/register";
+
+const route = useRoute();
+
+const meta2dDom = ref("");
+
+const meta2dOptions: Options = {
+  cdn: "https://assets.le5lecdn.com",
+  //   rule: true,
+  background: "#1e2430",
+  x: 10,
+  y: 10,
+  width: 1920,
+  height: 1080,
+  //   defaultFormat: { ...defaultFormat },
+};
+
+onMounted(() => {
+  meta2d = new Meta2d(meta2dDom.value, meta2dOptions);
+  registerBasicDiagram();
+  open();
+  meta2d.on("opened", opened);
+});
+
+const watcher = watch(
+  () => route.query.id,
+  async () => {
+    open();
+  }
+);
+
+const open = async () => {
+  if (route.query.id) {
+    const ret: any = getLe5le2d(route.query.id + "");
+    ret && meta2d.open(ret);
+  } else {
+    const data: any = JSON.parse(
+      await localforage.getItem(localMeta2dDataName)
+    );
+    data&&meta2d.open(data);
+  }
+};
+
+const opened = () => {
+  meta2d.fitSizeView(true, 10);
+};
+
+onUnmounted(() => {
+  watcher();
+  if (meta2d) {
+    meta2d.off("opened", opened);
+
+    meta2d.destroy();
+  }
+});
+</script>
+<style lang="postcss" scoped>
+.preview {
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--color-background-editor);
+  .meta2d-canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/components/View.vue

@@ -132,10 +132,34 @@
 
       <div class="flex-grow"></div>
       <t-tooltip content="预览" placement="bottom">
-        <a><t-icon name="browse" /></a>
+        <a @click="preview"><t-icon name="browse" /></a>
       </t-tooltip>
-      <t-tooltip content="运行" placement="bottom">
-        <a><t-icon name="caret-right" /></a>
+      <t-tooltip
+        :content="isLock === 2 ? '锁定' : isLock === 1 ? '预览' : '编辑'"
+        placement="bottom"
+      >
+        <a>
+          <!-- <t-icon name="caret-right" /> -->
+          <svg
+            v-if="isLock === 1"
+            class="l-icon"
+            aria-hidden="true"
+            @click="onLock"
+          >
+            <use xlink:href="#l-lock"></use>
+          </svg>
+          <svg
+            v-else-if="isLock === 2"
+            class="l-icon"
+            aria-hidden="true"
+            @click="onLock"
+          >
+            <use xlink:href="#l-wufayidong"></use>
+          </svg>
+          <svg v-else class="l-icon" aria-hidden="true" @click="onLock">
+            <use xlink:href="#l-unlock"></use>
+          </svg>
+        </a>
       </t-tooltip>
       <t-tooltip content="手机查看" placement="bottom">
         <a><t-icon name="qrcode" /></a>
@@ -156,7 +180,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Meta2d, Options, Pen, deepClone } from "@meta2d/core";
+import { Meta2d, Options, Pen, deepClone, LockState } from "@meta2d/core";
 import { onMounted, onUnmounted, watch, ref, reactive } from "vue";
 import { registerBasicDiagram } from "@/services/register";
 import { useRouter, useRoute } from "vue-router";
@@ -173,7 +197,9 @@ import {
 import { useSelection, SelectionMode } from "@/services/selections";
 import { defaultFormat } from "@/services/defaults";
 import { MessagePlugin } from "tdesign-vue-next";
-
+import { localMeta2dDataName } from "@/services/utils";
+import localforage from "localforage";
+import { checkData } from "@/services/utils";
 const router = useRouter();
 const route = useRoute();
 const { user, message, getUser, getMessage, signout } = useUser();
@@ -401,6 +427,38 @@ const onAddShape = (event: DragEvent, name: string) => {
   }
   event.stopPropagation();
 };
+
+const isLock = ref(0);
+function onLock() {
+  !isLock.value && (isLock.value = 0);
+  if (isLock.value === LockState.DisableMove) {
+    isLock.value = LockState.None;
+  } else {
+    isLock.value++;
+  }
+  meta2d.lock(isLock.value);
+  meta2d.hideInput();
+}
+
+const preview = async () => {
+  meta2d.stopAnimate();
+  const data: Meta2dBackData = meta2d.data();
+  checkData(data);
+  if (dot && user && data._id) {
+    // 有 id ，是修改后保存
+    await save(SaveType.Save);
+  }
+  if (!data._id) {
+    await localforage.setItem(localMeta2dDataName, JSON.stringify(data));
+  }
+  router.push({
+    path: "/preview",
+    query: {
+      r: Date.now() + "",
+      id: data._id,
+    },
+  });
+};
 </script>
 <style lang="postcss" scoped>
 .meta2d {