fix: 初始化draw模块

src/draw/index.js

@@ -0,0 +1,5 @@
+export const structureDraw = (canvas) => {
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#000";
+  ctx.fillRect(0, 0, 100, 100);
+};

src/hook/useDraw.ts

@@ -0,0 +1,8 @@
+import { ref } from "vue";
+import { structureDraw } from "../draw/index.js";
+
+const drawRef = ref();
+
+export const setCanvas = (canvas: HTMLCanvasElement) => {
+  drawRef.value = structureDraw(canvas);
+};

src/router/constant.ts

@@ -1,56 +1,57 @@
-import { modeFlags, ModeFlag, isLogin } from '@/store/sys'
-import { computed, ComputedRef } from 'vue'
-import { ui18n } from '@/lang'
+import { modeFlags, ModeFlag, isLogin } from "@/store/sys";
+import { computed, ComputedRef } from "vue";
+import { ui18n } from "@/lang";
 
 export const readyRouteName = {
-  layout: 'layout',
-  query: 'query',
-  hotspot: 'hotspot',
-  measure: 'measure',
-} as const
+  layout: "layout",
+  query: "query",
+  hotspot: "hotspot",
+  measure: "measure",
+  draw: "draw",
+} as const;
 
 export const writeRouteName = {
   ...readyRouteName,
-  setup: 'setup'
-} as const
+  setup: "setup",
+} as const;
 
-export const defRouteName = readyRouteName.query
+export const defRouteName = readyRouteName.query;
 
-export type RouteNameRaw<T extends ModeFlag = any> =
-  T extends typeof modeFlags.LOGIN
-    ? typeof writeRouteName
-    : typeof readyRouteName
+export type RouteNameRaw<T extends ModeFlag = any> = T extends typeof modeFlags.LOGIN
+  ? typeof writeRouteName
+  : typeof readyRouteName;
 
 export type RouteMetaAtom = {
-  title: string
-  onClick?: () => void
-  svg?: boolean
-}
+  title: string;
+  onClick?: () => void;
+  svg?: boolean;
+};
 
 export type RouteMetaRaw<T extends ModeFlag = any> = {
-  [key in keyof RouteNameRaw<T>]: RouteMetaAtom
-}
+  [key in keyof RouteNameRaw<T>]: RouteMetaAtom;
+};
 
 export const readyRouteMeta: RouteMetaRaw = {
-  [readyRouteName.layout]: { title: ui18n.t('sys.title') },
-  [readyRouteName.query]: { title: ui18n.t('sys.query') },
-  [readyRouteName.hotspot]: { title: ui18n.t('hotspot.name') },
-  [readyRouteName.measure]: { title: ui18n.t('measure.name') },
-}
+  [readyRouteName.layout]: { title: ui18n.t("sys.title") },
+  [readyRouteName.query]: { title: ui18n.t("sys.query") },
+  [readyRouteName.hotspot]: { title: ui18n.t("hotspot.name") },
+  [readyRouteName.measure]: { title: ui18n.t("measure.name") },
+  [readyRouteName.draw]: { title: "绘图" },
+};
 
 export const writeRouteMeta: RouteMetaRaw<typeof modeFlags.LOGIN> = {
   ...readyRouteMeta,
-  [writeRouteName.setup]: { title: ui18n.t('sys.setup') },
-}
+  [writeRouteName.setup]: { title: ui18n.t("sys.setup") },
+};
 
-export type RouteName<T extends ModeFlag = any> = ComputedRef<RouteNameRaw<T>>
+export type RouteName<T extends ModeFlag = any> = ComputedRef<RouteNameRaw<T>>;
 export const routeName = computed(() =>
   isLogin.value ? writeRouteName : readyRouteName
-)
+);
 
-export type RouteMeta<T extends ModeFlag = any> = ComputedRef<RouteMetaRaw<T>>
+export type RouteMeta<T extends ModeFlag = any> = ComputedRef<RouteMetaRaw<T>>;
 export const routeMeta = computed(() =>
   isLogin.value ? writeRouteMeta : readyRouteMeta
-)
+);
 
-export default writeRouteName
+export default writeRouteName;

src/router/info.ts

@@ -69,6 +69,12 @@ export const writeChildren: RoutesRaw<typeof modeFlags.LOGIN> = [
 
 export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
   { ...baseAppRoute, children: writeChildren },
+  {
+    path: "/draw",
+    name: readyRouteName.draw,
+    meta: readyRouteMeta.draw,
+    component: () => import("@/views/draw/index.vue"),
+  },
 ];
 
 export type RoutesRef<T extends ModeFlag = any> = ComputedRef<{

src/views/draw/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="draw-layout">
+    <canvas ref="drawCanvasRef" class="draw-canvas" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import { setCanvas } from "@/hook/useDraw";
+
+const drawCanvasRef = ref<HTMLCanvasElement>();
+const setCanvasSize = () => {
+  drawCanvasRef.value.width = drawCanvasRef.value.offsetWidth;
+  drawCanvasRef.value.height = drawCanvasRef.value.offsetHeight;
+};
+
+// window.addEventListener("resize", setCanvasSize);
+
+onMounted(() => {
+  setCanvasSize();
+  setCanvas(drawCanvasRef.value);
+});
+
+onUnmounted(() => {
+  // window.removeEventListener("resize", setCanvasSize);
+});
+</script>
+
+<style lang="scss">
+@import url("./style.scss");
+</style>

src/views/draw/style.scss

@@ -0,0 +1,5 @@
+.draw-canvas,
+.draw-layout {
+  width : 100%;
+  height: 100%;
+}