制作画板ui

src/components/main-panel/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <UiEditorLayout class="layout" :class="layoutClass">
+    <UiEditorHead class="header">
+      <div
+        class="menu"
+        :class="{ abs: isFull }"
+        @click="customMap.sysView = isFull ? 'auto' : 'full'"
+      >
+        <ui-icon :type="isFull ? 'menu' : 'close'" ctrl />
+      </div>
+
+    </UiEditorHead>
+    <slot/>
+    <Menu
+      :menu="menus"
+      :active-key="activeMenuKey"
+      @update:active-key="val => emit('update:activeMenuKey', val)"
+    />
+  </UiEditorLayout>
+</template>
+
+<script setup lang="ts">
+import UiEditorLayout from "@/components/base/editor/layout/index.vue";
+import UiEditorHead from "@/components/base/editor/layout/Head.vue";
+import UiIcon from "@/components/base/components/icon/index.vue";
+import Menu from '@/views/sys/menu'
+import {MenuAtom, MenuRaw} from "@/views/sys/menu/menu.js";
+import { customMap } from "@/hook/custom";
+import { computed, ref } from "vue";
+import "@/preset/pc.scss"
+import "@/preset/style.scss"
+
+const props = defineProps<{
+  menus: MenuRaw,
+  activeMenuKey: string,
+}>();
+const emit = defineEmits<{
+  (e: 'update:activeMenuKey', t: MenuAtom['name']): void
+}>()
+
+const isFull = computed(() => customMap.sysView === 'full' )
+const layoutClass = computed(() => ({
+  ["sys-view-full"]: isFull.value
+}))
+
+</script>
+
+<style scoped lang="scss">
+.layout {
+  --header-top: 0px;
+  &.sys-view-full {
+    --header-top: calc(-1 * var(--editor-head-height));
+  }
+}
+
+.header {
+  color: rgba(var(--colors-primary-fill), 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  transition: top 0.3s ease;
+  top: var(--header-top);
+}
+
+.header .menu {
+  transition: background 0.3s ease;
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin: calc((var(--editor-head-height) - 42px) / 2)
+  calc((var(--editor-menu-width) - 42px) / 2);
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .icon {
+    font-size: 16px;
+  }
+  &.abs {
+    top: 100%;
+    left: 0;
+    background: rgba(27, 27, 28, 0.8);
+    border-radius: 4px;
+    border: 1px solid #000000;
+    backdrop-filter: blur(4px);
+
+    .icon {
+      font-size: 24px;
+    }
+  }
+}
+
+.main {
+  flex: 1;
+  text-align: center;
+  font-size: var(--big-size);
+
+  .title {
+    font-size: 1em;
+    font-weight: bold;
+    display: inline-block;
+
+    span {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+</style>

src/graphic/Controls/UIControl.js

@@ -29,11 +29,11 @@ export default class UIControl {
     this.newsletter.selectUI = selectUI
   }
 
-  get selectVector() {
-    return this.newsletter.selectVector
+  get focusVector() {
+    return this.newsletter.focusVector
   }
-  set selectVector(selectVector) {
-    this.newsletter.selectVector = selectVector
+  set focusVector(focusVector) {
+    this.newsletter.focusVector = focusVector
   }
 
   /**

src/hook/useGraphic.ts

@@ -3,10 +3,13 @@ import { structureDraw } from "@/graphic";
 import VectorType from '@/graphic/enum/VectorType'
 import UIType from '@/graphic/enum/UIEvents'
 
+export type UITypeT = typeof UIType
+export type VectorTypeT = typeof VectorType
+
 const newsletter = ref<{
-  selectUI?: typeof UIType
-  selectVector?: { geoType: typeof VectorType }
-}>({ selectUI: null, selectVector: null });
+  selectUI?: UITypeT[keyof UITypeT]
+  focusVector?: { geoType: VectorTypeT[keyof VectorTypeT] }
+}>({ selectUI: null, focusVector: null });
 
 export const setCanvas = async (canvas: HTMLCanvasElement) => {
   await import("../graphic/index.js").then((model) => {
@@ -22,6 +25,6 @@ export const uiType = reactive({
     drawRef.value.uiControl.selectUI = type
   }
 })
-export const currentVector = computed(() => newsletter.value.selectVector)
+export const currentVector = computed(() => newsletter.value.focusVector)
 
 export { VectorType, UIType }

src/router/info.ts

@@ -73,7 +73,7 @@ export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
     path: "/graphic",
     name: readyRouteName.graphic,
     meta: readyRouteMeta.graphic,
-    component: () => import("@/views/raphic/index.vue"),
+    component: () => import("@/views/graphic/index.vue"),
   },
 ];
 

src/views/raphic/index.vue

@@ -1,23 +1,16 @@
 <template>
-  <div class="draw-layout">
-    <div class="draw-slide">
-      <div
-        v-for="menu in menus"
-        :key="menu.key"
-        @click="uiType.change(menu.key)"
-        :class="{ active: menu.key === uiType.current }"
-      >
-        {{ menu.text }}
+  <MainPanel :menus="menus" :active-menu-key="uiType.current">
+    <div class="draw-layout">
+      <div class="canvas-layout">+
+        <canvas ref="drawCanvasRef" class="draw-canvas" />
       </div>
     </div>
-    <div class="canvas-layout">+
-      <canvas ref="drawCanvasRef" class="draw-canvas" />
-    </div>
-  </div>
+  </MainPanel>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import MainPanel from '@/components/main-panel/index.vue'
+import {computed, onMounted, ref} from "vue";
 import { setCanvas, UIType, uiType } from "@/hook/useGraphic";
 
 const drawCanvasRef = ref<HTMLCanvasElement>();
@@ -26,13 +19,23 @@ const setCanvasSize = () => {
   drawCanvasRef.value.height = drawCanvasRef.value.offsetHeight;
 };
 
-const menus = ref([
+const menusRaw = ref([
   { key: UIType.Road, text: "直路" },
   { key: UIType.CurveRoad, text: "弯路" },
   { key: UIType.Tag, text: "标注" },
   { key: UIType.MeasureLine, text: "测量线" },
   { key: UIType.Img, text: "背景图片" },
 ]);
+const menus = computed(() =>
+  menusRaw.value.map((menu) => ({
+    title: menu.text,
+    name: menu.key,
+    isRoute: false,
+    icon: 'menu',
+    onClick: () => uiType.change(menu.key as any)
+  }))
+)
+
 
 onMounted(() => {
   setCanvasSize();

src/views/sys/menu/index.vue

@@ -37,7 +37,14 @@ import { os } from "@/utils";
 import { customMap } from "@/hook";
 import { currentApp } from "@/store/app";
 
-const props = defineProps<{ disabledGoto?: boolean; menu: MenuRaw }>();
+const props = defineProps<{
+  disabledGoto?: boolean;
+  menu: MenuRaw
+  activeKey?: string
+}>();
+const emit = defineEmits<{
+  (e: "update:activeKey", v: MenuAtom['name']): void;
+}>()
 
 const gotoMenuItem = (item: MenuAtom) => {
   if (!props.disabledGoto) {
@@ -46,12 +53,13 @@ const gotoMenuItem = (item: MenuAtom) => {
     } else if (item.isRoute) {
       router.push({ name: item.name as string });
     }
+    emit('update:activeKey', item.name);
   }
 };
 
 const active = computed(() =>
   findMenuLocals(
-    router.currentRoute.value.name as string,
+    props.activeKey || router.currentRoute.value.name as string,
     currentApp.menu.value.relation as any
   )
 );