fix: 格式化代码

.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  printWidth: 100,
+  trailingComma: none,
+  tabWidht: 2,
+  endOfLine: 'lf'
+}

README.md

@@ -31,4 +31,4 @@ $ pnpm build:mac
 
 # For Linux
 $ pnpm build:linux
-```
+```

electron.vite.config.ts

@@ -18,25 +18,25 @@ export default defineConfig({
     resolve: {
       alias: {
         '@': resolve('src/renderer/src'),
-        '~@': resolve('src/renderer/src'),
+        '~@': resolve('src/renderer/src')
       }
     },
     plugins: [
       vue(),
       (monacoEditorPlugin as any).default({
-        languageWorkers:['editorWorkerService', 'json'],
+        languageWorkers: ['editorWorkerService', 'json'],
         customDistPath: (root: string) => {
           return `${root}/dist/monaco-editor`
-        },
+        }
       }),
       // 自定引入插件
       AutoImport({
-        resolvers: [ElementPlusResolver()],
+        resolvers: [ElementPlusResolver()]
       }),
       Components({
-        resolvers: [ElementPlusResolver()],
+        resolvers: [ElementPlusResolver()]
       }),
-      UnoCSS(),
+      UnoCSS()
     ]
   }
 })

src/renderer/auto-imports.d.ts

@@ -5,6 +5,4 @@
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 export {}
-declare global {
-
-}
+declare global {}

src/renderer/src/App.vue

@@ -1,14 +1,12 @@
 <template>
   <el-config-provider :locale="appStore.getLocale">
-    <router-view/>
+    <router-view />
   </el-config-provider>
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from './store/modules/app';
-const appStore = useAppStore();
-
+import { useAppStore } from './store/modules/app'
+const appStore = useAppStore()
 </script>
 
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>

src/renderer/src/components/SplitterCollapse/SplitterCollapseItem.vue

@@ -29,13 +29,16 @@ import { AiOutlineRight, AiOutlineDown } from 'vue-icons-plus/ai'
 import type { Ref } from 'vue'
 
 const HEADER_HEIGHT = 32
-const props = withDefaults(defineProps<{
-  name: string
-  title: string
-  min?: number | string
-}>(), {
-  min: 0,
-})
+const props = withDefaults(
+  defineProps<{
+    name: string
+    title: string
+    min?: number
+  }>(),
+  {
+    min: 0
+  }
+)
 
 const emit = defineEmits(['change'])
 const parent = inject<{
@@ -44,10 +47,10 @@ const parent = inject<{
   lastChildName: string
 }>('info')
 
-const size = ref<number | string>(props.min)
+const size = ref<number>(props.min)
 
 const height = computed(() => {
-  return `${opened.value ? size.value : HEADER_HEIGHT}px`
+  return `${opened.value ? Math.max(size.value, HEADER_HEIGHT) : HEADER_HEIGHT}px`
 })
 
 // 展开状态

src/renderer/src/components/SplitterCollapse/index.ts

@@ -1,4 +1,4 @@
-import SplitterCollapseItem from "./SplitterCollapseItem.vue";
-import SplitterCollapse from "./index.vue";
+import SplitterCollapseItem from './SplitterCollapseItem.vue'
+import SplitterCollapse from './index.vue'
 
-export { SplitterCollapseItem, SplitterCollapse };
+export { SplitterCollapseItem, SplitterCollapse }

src/renderer/src/locale/en_US.json

@@ -1,3 +1 @@
-{
-  
-}
+{}

src/renderer/src/locale/index.ts

@@ -6,7 +6,7 @@ export default createI18n({
   legacy: false,
   locale: localStorage.getItem('lang') || 'zh_CN',
   messages: {
-    'zh_CN': zh_CN,
-    "en_US": en_US
+    zh_CN: zh_CN,
+    en_US: en_US
   }
 })

src/renderer/src/locale/zh_CN.json

@@ -1,3 +1 @@
-{
-  
-}
+{}

src/renderer/src/main.ts

@@ -5,8 +5,8 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
 import './theme/vars.css'
 
 import 'normalize.css'
-import router from './router';
-import { setupStore } from "./store";
+import router from './router'
+import { setupStore } from './store'
 import i18n from './locale'
 
 const app = createApp(App)

src/renderer/src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -7,13 +7,13 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/designer',
-    component: () => import('@/views/designer/index.vue'),
+    component: () => import('@/views/designer/index.vue')
   }
-];
+]
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes,
-});
+  routes
+})
 
-export default router;
+export default router

src/renderer/src/store/index.ts

@@ -1,10 +1,10 @@
-import type { App } from 'vue';
-import { createPinia } from 'pinia';
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
 
-const store = createPinia();
+const store = createPinia()
 
 export function setupStore(app: App<Element>) {
-  app.use(store);
+  app.use(store)
 }
 
-export { store };
+export { store }

src/renderer/src/store/modules/action.ts

@@ -1,272 +1,241 @@
-import { defineStore } from "pinia";
-import { AlignEnum } from "@/enum/alignEnum";
-import { LayerEnum } from "@/enum/layerEnum";
-import { useProjectStore } from "@/store/modules/project";
-import { cloneDeep } from "lodash";
-import { CustomElement } from "#/project";
-import { uuid } from "@/utils";
+import { defineStore } from 'pinia'
+import { AlignEnum } from '@/enum/alignEnum'
+import { LayerEnum } from '@/enum/layerEnum'
+import { useProjectStore } from '@/store/modules/project'
+import { cloneDeep } from 'lodash'
+import { CustomElement } from '#/project'
+import { uuid } from '@/utils'
 
 type ActionState = {
   // 操作记录--最大记录10条
-  records: string[];
+  records: string[]
   // 当前操作索引
-  activeIndex: number;
-  appKey: number;
-  copyCache: any;
-};
+  activeIndex: number
+  appKey: number
+  copyCache: any
+}
 export const useAcionStore = defineStore('action', {
   state(): ActionState {
     return {
       records: [],
       activeIndex: -1,
       appKey: 0,
-      copyCache: null,
-    };
+      copyCache: null
+    }
   },
   getters: {
     projectStore: () => useProjectStore(),
     undoDisabled: (state) => state.activeIndex <= 0,
-    redoDisabled: (state) => state.activeIndex === state.records.length - 1,
+    redoDisabled: (state) => state.activeIndex === state.records.length - 1
   },
   actions: {
     initRecord() {
-      this.records = [JSON.stringify(this.projectStore.projectInfo)];
-      this.activeIndex = 0;
+      this.records = [JSON.stringify(this.projectStore.projectInfo)]
+      this.activeIndex = 0
     },
     // addRecord({type, info }: RecordItem & { snapshot?: ProjectInfo}) {
     addRecord() {
       // 新增如果当前索引不是最后一条, 覆盖后面的记录
       if (this.activeIndex < this.records.length - 1) {
-        this.records.splice(this.activeIndex + 1, this.records.length);
+        this.records.splice(this.activeIndex + 1, this.records.length)
       }
 
-      this.records.push(JSON.stringify(this.projectStore.projectInfo));
+      this.records.push(JSON.stringify(this.projectStore.projectInfo))
 
       // 新增如果超过10条记录，删除最早的一条
       if (this.records.length > 10) {
-        this.records.shift();
-        this.activeIndex--;
+        this.records.shift()
+        this.activeIndex--
       }
 
-      this.activeIndex = this.records.length - 1;
+      this.activeIndex = this.records.length - 1
     },
     /* 撤销 */
     actionUndo() {
-      if (this.activeIndex <= 0) return;
-      --this.activeIndex;
-      const projectInfo = JSON.parse(this.records[this.activeIndex]);
-      this.projectStore.updateProjectInfo(projectInfo);
-      this.appKey++;
+      if (this.activeIndex <= 0) return
+      --this.activeIndex
+      const projectInfo = JSON.parse(this.records[this.activeIndex])
+      this.projectStore.updateProjectInfo(projectInfo)
+      this.appKey++
     },
     /* 重做 */
     actionRedo() {
-      ++this.activeIndex;
-      const projectInfo = JSON.parse(this.records[this.activeIndex]);
-      this.projectStore.updateProjectInfo(projectInfo);
-      this.appKey++;
+      ++this.activeIndex
+      const projectInfo = JSON.parse(this.records[this.activeIndex])
+      this.projectStore.updateProjectInfo(projectInfo)
+      this.appKey++
     },
     actionClear() {},
     /* 对齐 */
     actionAlign(type: AlignEnum) {
-      const activeElements = this.projectStore.currentSelectedElements;
+      const activeElements = this.projectStore.currentSelectedElements
       switch (type) {
         case AlignEnum.Bottom: {
           const maxY = Math.max(
-            ...activeElements.map(
-              (item) => item.container.props.y + item.container.props.height
-            )
-          );
+            ...activeElements.map((item) => item.container.props.y + item.container.props.height)
+          )
           activeElements.forEach((item) => {
             this.projectStore.updateElement(
               item.key,
-              "container.props.y",
+              'container.props.y',
               maxY - item.container.props.height
-            );
-          });
-          break;
+            )
+          })
+          break
         }
         case AlignEnum.HorizontalCenter: {
           const maxX = Math.max(
-            ...activeElements.map(
-              (item) => item.container.props.x + item.container.props.width
-            )
-          );
-          const minX = Math.min(
-            ...activeElements.map((item) => item.container.props.x)
-          );
-          const centerX = minX + (maxX - minX) / 2;
+            ...activeElements.map((item) => item.container.props.x + item.container.props.width)
+          )
+          const minX = Math.min(...activeElements.map((item) => item.container.props.x))
+          const centerX = minX + (maxX - minX) / 2
           activeElements.forEach((item) => {
             this.projectStore.updateElement(
               item.key,
-              "container.props.x",
+              'container.props.x',
               centerX - item.container.props.width / 2
-            );
-          });
-          break;
+            )
+          })
+          break
         }
         case AlignEnum.VerticalCenter: {
           const maxY = Math.max(
-            ...activeElements.map(
-              (item) => item.container.props.y + item.container.props.height
-            )
-          );
-          const minY = Math.min(
-            ...activeElements.map((item) => item.container.props.y)
-          );
-          const centerY = minY + (maxY - minY) / 2;
+            ...activeElements.map((item) => item.container.props.y + item.container.props.height)
+          )
+          const minY = Math.min(...activeElements.map((item) => item.container.props.y))
+          const centerY = minY + (maxY - minY) / 2
           activeElements.forEach((item) => {
             this.projectStore.updateElement(
               item.key,
-              "container.props.y",
+              'container.props.y',
               centerY - item.container.props.height / 2
-            );
-          });
-          break;
+            )
+          })
+          break
         }
         case AlignEnum.Left: {
-          const minX = Math.min(
-            ...activeElements.map((item) => item.container.props.x)
-          );
+          const minX = Math.min(...activeElements.map((item) => item.container.props.x))
           activeElements.forEach((item) => {
-            this.projectStore.updateElement(
-              item.key,
-              "container.props.x",
-              minX
-            );
-          });
-          break;
+            this.projectStore.updateElement(item.key, 'container.props.x', minX)
+          })
+          break
         }
         case AlignEnum.Right: {
           const maxX = Math.max(
-            ...activeElements.map(
-              (item) => item.container.props.x + item.container.props.width
-            )
-          );
+            ...activeElements.map((item) => item.container.props.x + item.container.props.width)
+          )
           activeElements.forEach((item) => {
             this.projectStore.updateElement(
               item.key,
-              "container.props.x",
+              'container.props.x',
               maxX - item.container.props.width
-            );
-          });
-          break;
+            )
+          })
+          break
         }
         case AlignEnum.Top: {
-          const minY = Math.min(
-            ...activeElements.map((item) => item.container.props.y)
-          );
+          const minY = Math.min(...activeElements.map((item) => item.container.props.y))
           activeElements.forEach((item) => {
-            this.projectStore.updateElement(
-              item.key,
-              "container.props.y",
-              minY
-            );
-          });
-          break;
+            this.projectStore.updateElement(item.key, 'container.props.y', minY)
+          })
+          break
         }
         default:
       }
-      this.addRecord();
+      this.addRecord()
     },
     /* 图层调整 */
     actionLayer(type: LayerEnum) {
-      const activeElements = this.projectStore.currentSelectedElements;
+      const activeElements = this.projectStore.currentSelectedElements
       const elements = cloneDeep(
         this.projectStore.elements.sort((a, b) => a.zIndex - b.zIndex)
-      ) as CustomElement[];
+      ) as CustomElement[]
 
       switch (type) {
         case LayerEnum.UP: {
           activeElements.forEach((item) => {
-            const index = elements.findIndex(
-              (element) => element.key === item.key
-            );
-            if (item.zIndex === elements.length) return;
-            elements.splice(index, 1);
-            elements.splice(index + 1, 0, { ...item });
-          });
+            const index = elements.findIndex((element) => element.key === item.key)
+            if (item.zIndex === elements.length) return
+            elements.splice(index, 1)
+            elements.splice(index + 1, 0, { ...item })
+          })
           elements.forEach((item, index) => {
-            item.zIndex = index + 1;
-          });
+            item.zIndex = index + 1
+          })
           elements.forEach((item) => {
-            this.projectStore.updateElement(item.key, "zIndex", item.zIndex);
-          });
-          break;
+            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex)
+          })
+          break
         }
         case LayerEnum.DOWN: {
           activeElements.forEach((item) => {
-            const index = elements.findIndex(
-              (element) => element.key === item.key
-            );
-            if (item.zIndex === 1) return;
-            elements.splice(index, 1);
-            elements.splice(index - 1, 0, { ...item });
-          });
+            const index = elements.findIndex((element) => element.key === item.key)
+            if (item.zIndex === 1) return
+            elements.splice(index, 1)
+            elements.splice(index - 1, 0, { ...item })
+          })
           elements.forEach((item, index) => {
-            item.zIndex = index + 1;
-          });
+            item.zIndex = index + 1
+          })
           elements.forEach((item) => {
-            this.projectStore.updateElement(item.key, "zIndex", item.zIndex);
-          });
-          break;
+            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex)
+          })
+          break
         }
         case LayerEnum.TOP: {
           activeElements.forEach((item) => {
-            const index = elements.findIndex(
-              (element) => element.key === item.key
-            );
-            if (item.zIndex === elements.length) return;
-            elements.splice(index, 1);
-            elements.push({ ...item });
-          });
+            const index = elements.findIndex((element) => element.key === item.key)
+            if (item.zIndex === elements.length) return
+            elements.splice(index, 1)
+            elements.push({ ...item })
+          })
           elements.forEach((item, index) => {
-            item.zIndex = index + 1;
-          });
+            item.zIndex = index + 1
+          })
           elements.forEach((item) => {
-            this.projectStore.updateElement(item.key, "zIndex", item.zIndex);
-          });
-          break;
+            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex)
+          })
+          break
         }
         case LayerEnum.BOTTOM: {
           activeElements.forEach((item) => {
-            const index = elements.findIndex(
-              (element) => element.key === item.key
-            );
-            if (item.zIndex === 1) return;
-            elements.splice(index, 1);
-            elements.unshift({ ...item });
-          });
+            const index = elements.findIndex((element) => element.key === item.key)
+            if (item.zIndex === 1) return
+            elements.splice(index, 1)
+            elements.unshift({ ...item })
+          })
           elements.forEach((item, index) => {
-            item.zIndex = index + 1;
-          });
+            item.zIndex = index + 1
+          })
           elements.forEach((item) => {
-            this.projectStore.updateElement(item.key, "zIndex", item.zIndex);
-          });
-          break;
+            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex)
+          })
+          break
         }
       }
-      this.addRecord();
+      this.addRecord()
     },
     /* 添加组合 */
     actionGroup() {
-      const elements = this.projectStore.currentSelectedElements;
-      const key = uuid();
+      const elements = this.projectStore.currentSelectedElements
+      const key = uuid()
       // 1、移除元素
       elements.forEach((element) => {
-        this.projectStore.removeElement(element.key);
-      });
-      const { minX, minY, maxX, maxY, maxZIndex } = calcComboInfo(elements);
-      const groupIndex = this.projectStore.elements.filter((item) => item.componentType === "group").length + 1;
+        this.projectStore.removeElement(element.key)
+      })
+      const { minX, minY, maxX, maxY, maxZIndex } = calcComboInfo(elements)
+      const groupIndex =
+        this.projectStore.elements.filter((item) => item.componentType === 'group').length + 1
       // 重新计算子元素位置
       elements.forEach((item) => {
-        item.container.props.x -= minX;
-        item.container.props.y -= minY;
-        item.parentKey = key;
-      });
+        item.container.props.x -= minX
+        item.container.props.y -= minY
+        item.parentKey = key
+      })
       const group: CustomElement = {
         key,
-        name: "组合" + groupIndex,
-        componentType: "group",
+        name: '组合' + groupIndex,
+        componentType: 'group',
         visible: true,
         locked: false,
         zIndex: maxZIndex,
@@ -276,8 +245,8 @@ export const useAcionStore = defineStore('action', {
             width: maxX - minX,
             height: maxY - minY,
             x: minX,
-            y: minY,
-          },
+            y: minY
+          }
         },
         children: elements,
         collapsed: false,
@@ -286,49 +255,49 @@ export const useAcionStore = defineStore('action', {
         props: {}
       }
       // 2、添加组合元素
-      this.projectStore.addElement(group);
+      this.projectStore.addElement(group)
     },
-   /* 拆分组合元素 */
+    /* 拆分组合元素 */
     actionUngroup() {
-      const group = this.projectStore.currentSelectedElements[0];
+      const group = this.projectStore.currentSelectedElements[0]
       // 1、取出子元素
       const elements = group.children?.map((item) => {
         // 2、计算子元素位置
-        item.container.props.x += group.container.props.x;
-        item.container.props.y += group.container.props.y;
-        delete item.parentKey;
-        return item;
-      });
-    
+        item.container.props.x += group.container.props.x
+        item.container.props.y += group.container.props.y
+        delete item.parentKey
+        return item
+      })
+
       // 3、移除组
-      this.projectStore.removeElement(group.key);
+      this.projectStore.removeElement(group.key)
       // 4、添加子元素
       elements?.forEach((item) => {
-        this.projectStore.addElement(item, undefined, true);
-      });
+        this.projectStore.addElement(item, undefined, true)
+      })
     },
     /* 复制 */
     actionCopy() {
-      const elements = this.projectStore.currentSelectedElements;
-      this.copyCache = JSON.stringify(elements);
+      const elements = this.projectStore.currentSelectedElements
+      this.copyCache = JSON.stringify(elements)
     },
     /* 粘贴 */
     actionPaste() {
-      if (!this.copyCache) return;
-      
+      if (!this.copyCache) return
+
       try {
-        const elements = JSON.parse(this.copyCache);
-        const offsetX = 10;
-        const offsetY = 10;
+        const elements = JSON.parse(this.copyCache)
+        const offsetX = 10
+        const offsetY = 10
         elements.forEach((element: CustomElement) => {
-          element.key = uuid();
-          element.container.props.x += offsetX;
-          element.container.props.y += offsetY;
-          this.projectStore.addElement(element);
-        });
+          element.key = uuid()
+          element.container.props.x += offsetX
+          element.container.props.y += offsetY
+          this.projectStore.addElement(element)
+        })
       } catch (error) {
-        console.log(error);
+        console.log(error)
       }
     }
-  },
-});
+  }
+})

src/renderer/src/store/modules/stage.ts

@@ -1,36 +1,36 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia'
 
-import { ReferLine } from "./type";
+import { ReferLine } from './type'
 
 interface StageState {
   // 缩放比例
-  scale: number;
+  scale: number
   // 大屏宽度
-  width: number;
+  width: number
   // 大屏高度
-  height: number;
+  height: number
   // x坐标原点位置
-  originX: number;
+  originX: number
   // y坐标原点位置
-  originY: number;
+  originY: number
   // 视口宽度
-  viewportWidth: number;
+  viewportWidth: number
   // 视口高度
-  viewportHeight: number;
+  viewportHeight: number
   // 屏幕中心原点x
-  centerX: number;
+  centerX: number
   // 屏幕中心原点y
-  centerY: number;
+  centerY: number
   // x坐标滚动
-  scrollX: number;
+  scrollX: number
   // y坐标滚动
-  scrollY: number;
+  scrollY: number
   // 容器宽度
-  wrapperWidth: number;
+  wrapperWidth: number
   // 容器高度
-  wrapperHeight: number;
+  wrapperHeight: number
   // 显示图层面板
-  showLayer: boolean;
+  showLayer: boolean
 }
 
 export const useStageStore = defineStore('stage', {
@@ -53,66 +53,65 @@ export const useStageStore = defineStore('stage', {
   getters: {
     // 根据滚动和缩放，重新计算辅助线位置
     getReferLines(state): ReferLine[] {
-      const { scale, scrollX, scrollY, originX, originY } = state;
+      const { scale, scrollX, scrollY, originX, originY } = state
       // const projectStore = useProjectStore();
-      const referLines: ReferLine[] = [];
+      const referLines: ReferLine[] = []
       return referLines
-      .map((line) => {
-        
-        let x = line.x || 0;
-        let y = line.y || 0;
-        if(line.type === 'horizontal') {
-          x = originX + line.value * scale - scrollX + 20;
-        } else {
-          y = originY + line.value * scale - scrollY + 20;
-        }
+        .map((line) => {
+          let x = line.x || 0
+          let y = line.y || 0
+          if (line.type === 'horizontal') {
+            x = originX + line.value * scale - scrollX + 20
+          } else {
+            y = originY + line.value * scale - scrollY + 20
+          }
 
-        return {
-          ...line,
-          x,
-          y
-        }
-      })
-      .filter((line) => {
-        // 过滤掉不在视口内的辅助线
-        if(line.type === 'horizontal') {
-          return line.x > 20 && line.x < state.viewportWidth;
-        } else {
-          return line.y > 20 && line.y < state.viewportHeight;
-        }
-      })
+          return {
+            ...line,
+            x,
+            y
+          }
+        })
+        .filter((line) => {
+          // 过滤掉不在视口内的辅助线
+          if (line.type === 'horizontal') {
+            return line.x > 20 && line.x < state.viewportWidth
+          } else {
+            return line.y > 20 && line.y < state.viewportHeight
+          }
+        })
     }
   },
   actions: {
     setSize(width: number, height: number) {
-      this.width = width;
-      this.height = height;
+      this.width = width
+      this.height = height
     },
     setStageWaraaperSize(width: number, height: number) {
-      this.wrapperWidth = width;
-      this.wrapperHeight = height;
+      this.wrapperWidth = width
+      this.wrapperHeight = height
     },
     setViewportSize(width: number, height: number) {
-      this.viewportWidth = width;
-      this.viewportHeight = height;
+      this.viewportWidth = width
+      this.viewportHeight = height
     },
     setOriginPoint(originX: number, originY: number) {
-      this.originX = originX;
-      this.originY = originY;
+      this.originX = originX
+      this.originY = originY
     },
     setScale(scale: number) {
-      this.scale = scale;
+      this.scale = scale
     },
     setCenterPoint(x: number, y: number) {
-      this.centerX = x;
-      this.centerY = y;
+      this.centerX = x
+      this.centerY = y
     },
     setScroll(x: number, y: number) {
-      this.scrollX = x;
-      this.scrollY = y;
+      this.scrollX = x
+      this.scrollY = y
     },
     toggleShowLayer() {
-      this.showLayer = !this.showLayer;
+      this.showLayer = !this.showLayer
     }
   }
-})
+})

src/renderer/src/store/modules/type.d.ts

@@ -1,12 +1,12 @@
-declare export interface ReferLine {
+declare interface ReferLine {
   // 辅助线唯一标识
-  key: string;
+  key: string
   // 辅助线类型
-  type: 'horizontal' | 'vertical' | null;
+  type: 'horizontal' | 'vertical' | null
   // 辅助线位置
-  value: number;
+  value: number
   // x坐标
-  x: number;
+  x: number
   // y坐标
-  y: number;
-}
+  y: number
+}

src/renderer/src/views/designer/config/index.vue

@@ -1,13 +1,7 @@
 <template>
-<div>
-  右侧面板
-</div>
+  <div>右侧面板</div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
 
-</script>
-
-<style scoped lang="less">
-
-</style>
+<style scoped lang="less"></style>

src/renderer/src/views/designer/info/index.vue

@@ -1,13 +1,9 @@
 <template>
-  <div class="w-full h-full bg-bg-sidebar box-border border-t-2px border-t-solid border-t-border">
-
-  </div>
+  <div
+    class="w-full h-full bg-bg-sidebar box-border border-t-2px border-t-solid border-t-border"
+  ></div>
 </template>
 
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
+<script setup lang="ts"></script>
 
-</style>
+<style scoped></style>

src/renderer/src/views/designer/sidebar/index.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="w-full h-full flex">
-    <div class="w-50px h-full bg-bg-sidebar">111</div>
+    <div class="w-50px h-full bg-bg-sidebar flex flex-col items-center justify-between">
+      <div class="flex-1">
+        <ul class="list-none p-0 m-0">
+          <li class="w-full h-40px flex items-center justify-center"><LuFiles /></li>
+          <li class="w-full h-40px flex items-center justify-center"><LuBoxes /></li>
+          <li class="w-full h-40px flex items-center justify-center"><LuBoxes /></li>
+          <li class="w-full h-40px flex items-center justify-center"><LuBoxes /></li>
+          <li class="w-full h-40px flex items-center justify-center"><LuBoxes /></li>
+        </ul>
+      </div>
+      <div class="flex flex-col"></div>
+    </div>
     <div class="flex-1">
       <SplitterCollapse>
         <SplitterCollapseItem title="屏幕页面" name="page" :min="200"> </SplitterCollapseItem>
@@ -12,6 +23,7 @@
 
 <script setup lang="ts">
 import { SplitterCollapse, SplitterCollapseItem } from '@/components/SplitterCollapse'
+import { LuFiles, LuBoxes } from 'vue-icons-plus/lu';
 </script>
 
 <style scoped lang="less">

src/renderer/src/views/designer/workspace/index.vue

@@ -1,13 +1,7 @@
 <template>
-  <div>
-    中间区域
-  </div>
+  <div>中间区域</div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
 
-</script>
-
-<style scoped>
-
-</style>
+<style scoped></style>

src/renderer/src/views/preview/index.vue

@@ -1,13 +1,7 @@
 <template>
-  <div>
-    预览弹窗
-  </div>
+  <div>预览弹窗</div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
 
-</script>
-
-<style scoped>
-
-</style>
+<style scoped></style>