feat: split the home/index.vue file

ikuaitu · Oct 31, 2024 · 849a8f7 · 849a8f7
1 parent 4105901
commit 849a8f7
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 185 deletions.
diff --git a/src/views/home/header.vue b/src/views/home/header.vue
@@ -1,5 +1,5 @@
 <template>
-  <Header v-if="state.show">
+  <Header v-if="$props.show">
     <div class="left">
       <logo></logo>
       <Divider type="vertical" />
@@ -15,12 +15,7 @@
       <myTemplName></myTemplName>
       <!-- 标尺开关 -->
       <Tooltip :content="$t('grid')">
-        <iSwitch
-          v-model="state.ruler"
-          @on-change="rulerSwitch"
-          size="small"
-          class="switch"
-        ></iSwitch>
+        <iSwitch v-model="ruler" @on-change="rulerSwitch" size="small" class="switch"></iSwitch>
       </Tooltip>
       <Divider type="vertical" />
       <history></history>
@@ -42,40 +37,44 @@
   </Header>
 </template>
 
-<script setup>
+<script setup lang="ts" name="HomeHeader">
+import proIcon from '@/assets/icon/proIcon.png';
 import logo from '@/components/logo.vue';
+// 导入元素
 import importJson from '@/components/importJSON.vue';
 import importFile from '@/components/importFile.vue';
 import myTemplName from '@/components/myTemplName.vue';
 import history from '@/components/history.vue';
-import admin from '@/components/admin';
-import previewCurrent from '@/components/previewCurrent';
+import admin from '@/components/admin.vue';
+import previewCurrent from '@/components/previewCurrent.vue';
 import waterMark from '@/components/waterMark.vue';
 import save from '@/components/save.vue';
-import login from '@/components/login';
+import login from '@/components/login.vue';
 import lang from '@/components/lang.vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { reactive } from 'vue';
+import type { IEditor } from '@kuaitu/core';
 
-const { t } = useI18n();
-const route = useRoute();
-const state = reactive({
-  show: true,
-  ruler: true,
+const props = defineProps<{
+  show: boolean;
+  canvasEditor: IEditor;
+}>();
+
+const ruler = defineModel<boolean>('ruler', {
+  default: true,
 });
 
-const rulerSwitch = (val) => {
+const rulerSwitch = (val: boolean) => {
   if (val) {
-    canvasEditor.rulerEnable();
+    props.canvasEditor.rulerEnable();
   } else {
-    canvasEditor.rulerDisable();
+    props.canvasEditor.rulerDisable();
   }
+  // 使标尺开关组件失焦，避免响应键盘的空格事件
+  // @ts-expect-error type error
   document.activeElement.blur();
 };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .left,
 .right {
   display: flex;

diff --git a/src/views/home/index.module.less b/src/views/home/index.module.less
@@ -3,6 +3,35 @@
   margin: 20px;
 }
 
+// .logo {
+//   width: 30px;
+//   height: 30px;
+//   display: inline-block;
+//   margin-right: 10px;
+//   text-align: center;
+//   vertical-align: middle;
+//   .ivu-icon {
+//     vertical-align: super;
+//   }
+// }
+
+// 属性面板样式
+// :deep(.attr-item) {
+//   position: relative;
+//   margin-bottom: 12px;
+//   height: 40px;
+//   padding: 0 10px;
+//   background: #f6f7f9;
+//   border: none;
+//   border-radius: 4px;
+//   display: flex;
+//   align-items: center;
+//   .ivu-tooltip {
+//     text-align: center;
+//     flex: 1;
+//   }
+// }
+
 .ivu-menu-vertical .menu-item {
   text-align: center;
   padding: 10px 2px;
@@ -50,6 +79,8 @@
   width: 300px;
   height: 300px;
   margin: 0 auto;
+  // background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHUlEQVQ4jWNgYGAQIYAJglEDhoUBg9+FowbQ2gAARjwKARjtnN8AAAAASUVORK5CYII=");
+  // background-size: 30px 30px;
 }
 
 #workspace {
@@ -68,21 +99,22 @@
 .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
   background: none;
 }
-
+// 标尺与网格背景
 .switch {
   margin-right: 10px;
 }
-
 .design-stage-point {
   --offsetX: 0px;
   --offsetY: 0px;
   --size: 20px;
   background-size: var(--size) var(--size);
   background-image: radial-gradient(circle, #2f3542 1px, rgba(0, 0, 0, 0) 1px);
-  background-position: var(--offsetX) var (--offsetY);
+  background-position: var(--offsetX) var(--offsetY);
 }
 
 .design-stage-grid {
+  // dom.style.setProperty('--offsetX', `${point.x + e.clientX}px`) 通过修改 偏移量 可实现跟随鼠标效果 --size 则为间距
+  // dom.style.setProperty('--offsetY', `${point.y + e.clientY}px`)
   --offsetX: 0px;
   --offsetY: 0px;
   --size: 16px;
@@ -113,7 +145,6 @@
   z-index: 2;
   background-color: var(--rule4-bg-c);
 }
-
 .coordinates-bar-top {
   cursor: row-resize;
   top: 0;
@@ -126,7 +157,6 @@
   background-size: var(--ruler-space) var(--ruler-h), var(--ruler-tall-space) var(--ruler-tall-h);
   background-position: bottom;
 }
-
 .coordinates-bar-left {
   cursor: col-resize;
   top: var(--ruler-size);