fix: 调整基础组件样式，菜单子项等

src/renderer/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
@@ -57,6 +58,7 @@ declare module 'vue' {
     ElSplitter: typeof import('element-plus/es')['ElSplitter']
     ElSplitterPanel: typeof import('element-plus/es')['ElSplitterPanel']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabPanel: typeof import('element-plus/es')['ElTabPanel']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']

src/renderer/src/locales/en_US.json

@@ -50,7 +50,7 @@
   "theme": "Theme",
   "editProject": "Edit Project",
   "nameRequired": "Project Name Is Required",
-  "boardIsRequired": "Board Is Required",
   "flashIsRequired": "Flash Is Required",
-  "ramIsRequired": "RAM Is Required"
+  "ramIsRequired": "RAM Is Required",
+  "chipIsRequired": "Board Is Required"
 }

src/renderer/src/locales/zh_CN.json

@@ -50,7 +50,7 @@
   "download": "下载",
   "editProject": "编辑项目",
   "nameRequired": "项目名称不能为空",
-  "boardIsRequired": "板卡不能为空",
   "flashIsRequired": "闪存不能为空",
-  "ramIsRequired": "内存不能为空"
+  "ramIsRequired": "内存不能为空",
+  "chipIsRequired": "芯片不能为空"
 }

src/renderer/src/theme/vars.css

@@ -26,13 +26,13 @@
   --el-bg-color: var(--bg-primary);
   --el-bg-color-overlay: var(--bg-secondary) !important;
 
-  --el-text-color-primary: var(--text-secondary);
-  --el-text-color-regular: var(--text-secondary);
-  --el-text-color-placeholder: #545454;
-  --el-text-color-disabled: #454545;
+  --el-text-color-primary: var(--text-secondary) !important;
+  --el-text-color-regular: var(--text-secondary) !important;
+  --el-text-color-placeholder: #545454 !important;
+  --el-text-color-disabled: #454545 !important;
 
-  --el-border-color: var(--border-color);
-  --el-border-radius-base: 6px;
+  --el-border-color: var(--border-color) !important;
+  --el-border-radius-base: 6px !important;
 
   --el-header-bg-color: var(--bg-secondary);
   --el-main-bg-color: var(--bg-primary);
@@ -57,6 +57,9 @@
   /* VS Code 字体 */
   --vscode-font-family: 'Segoe UI', 'Liberation Sans', 'Arial', sans-serif;
   font-family: var(--vscode-font-family);
+
+  /* Element Plus 组件样式 */
+  --el-font-size-base: 11px !important;
 }
 
 .light {
@@ -86,3 +89,22 @@ body {
     color 0.3s ease,
     border-color 0.3s ease;
 }
+
+
+.el-tabs {
+  --el-tabs-header-height: 28px !important;
+  --el-color-primary: var(--text-active);
+}
+
+.el-collapse {
+  --el-collapse-border-color: var(--el-border-color-lighter);
+  --el-collapse-header-height: 28px !important;
+  --el-collapse-header-bg-color: var(--el-fill-color-blank);
+  --el-collapse-header-text-color: var(--el-text-color-primary);
+  --el-collapse-header-font-size: 11px !important;
+  --el-collapse-content-bg-color: var(--el-fill-color-blank);
+  --el-collapse-content-font-size: 12px;
+  --el-collapse-content-text-color: var(--el-text-color-primary);
+  border-bottom: 1px solid var(--el-collapse-border-color);
+  border-top: 1px solid var(--el-collapse-border-color);
+}

src/renderer/src/views/designer/modals/projectModal/index.vue

@@ -354,7 +354,9 @@
 
     <template #footer>
       <el-button @click="showModal = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="handleSubmit">{{ $t('create') }}</el-button>
+      <el-button type="primary" @click="mode === 'add' ? handleSubmit() : handleEdit()">{{
+        $t('create')
+      }}</el-button>
     </template>
 
     <el-dialog
@@ -373,9 +375,7 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button type="primary" @click="mode === 'add' ? handleSetScreen : handleEdit">{{
-          $t('confirm')
-        }}</el-button>
+        <el-button type="primary" @click="handleSetScreen">{{ $t('confirm') }}</el-button>
       </template>
     </el-dialog>
   </el-dialog>
@@ -479,7 +479,7 @@ const typeOptions = computed(() => {
 const rules = computed(() => {
   return {
     name: [{ required: true, message: t('nameRequired'), trigger: 'blur' }],
-    'chip.model': [{ required: true, message: t('boardIsRequired'), trigger: 'blur' }],
+    'chip.model': [{ required: true, message: t('chipIsRequired'), trigger: 'blur' }],
     'chip.flash_size.capacity': [
       { required: true, message: t('flashIsRequired'), trigger: 'blur' }
     ],

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

@@ -1,6 +1,6 @@
 <template>
-  <SplitterCollapse>
-    <SplitterCollapseItem title="屏幕页面" :defaultSize="30">
+  <el-tabs v-model="activeMenu" stretch>
+    <el-tab-pane label="屏幕" name="screen" class="flex-1">
       <!-- 屏幕层 -->
       <el-tree
         ref="treeRef"
@@ -18,8 +18,8 @@
           <ScreenTreeItem :node="node" :data="data" />
         </template>
       </el-tree>
-    </SplitterCollapseItem>
-    <SplitterCollapseItem title="图层">
+    </el-tab-pane>
+    <el-tab-pane label="页面" name="page">
       <!-- 页面层 -->
       <el-tree
         ref="treeRef"
@@ -35,17 +35,18 @@
           <PageTreeItem :node="node" :data="data" />
         </template>
       </el-tree>
-    </SplitterCollapseItem>
-  </SplitterCollapse>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script setup lang="ts">
-import { SplitterCollapse, SplitterCollapseItem } from '@/components/SplitterCollapse'
 import ScreenTreeItem from './components/ScreenTreeItem.vue'
 import PageTreeItem from './components/PageTreeItem.vue'
 import { useProjectStore } from '@/store/modules/project'
+import { ref } from 'vue'
 
 const projectStore = useProjectStore()
+const activeMenu = ref<string>('screen')
 
 const handleNodeClick = (node: any) => {
   if (node.type === 'page') {
@@ -54,4 +55,4 @@ const handleNodeClick = (node: any) => {
 }
 </script>
 
-<style scoped></style>
+<style lang="less" scoped></style>

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

@@ -1,25 +1,25 @@
 <template>
-  <SplitterCollapse>
-    <SplitterCollapseItem title="基础">
-      <el-space alignment="center" wrap>
-        <div
-          class="w-70px h-70px flex items-center text-text-secondary justify-center cursor-pointer hover:bg-bg-secondary hover:text-text-active"
-          v-for="item in 10"
-          :key="item"
-        >
-          控件{{ item }}
-        </div>
-      </el-space>
-    </SplitterCollapseItem>
-    <SplitterCollapseItem title="表单"> </SplitterCollapseItem>
-    <SplitterCollapseItem title="容器"> </SplitterCollapseItem>
-    <SplitterCollapseItem title="图文"> </SplitterCollapseItem>
-    <SplitterCollapseItem title="媒体"> </SplitterCollapseItem>
-  </SplitterCollapse>
+  <el-scrollbar>
+    <el-collapse>
+      <el-collapse-item title="基础">
+        <el-space alignment="center" wrap>
+          <div
+            class="w-70px h-70px flex items-center text-text-secondary justify-center cursor-pointer hover:bg-bg-secondary hover:text-text-active"
+            v-for="item in 10"
+            :key="item"
+          >
+            控件{{ item }}
+          </div>
+        </el-space>
+      </el-collapse-item>
+      <el-collapse-item title="表单"> </el-collapse-item>
+      <el-collapse-item title="容器"> </el-collapse-item>
+      <el-collapse-item title="图文"> </el-collapse-item>
+      <el-collapse-item title="媒体"> </el-collapse-item>
+    </el-collapse>
+  </el-scrollbar>
 </template>
 
-<script setup lang="ts">
-import { SplitterCollapse, SplitterCollapseItem } from '@/components/SplitterCollapse'
-</script>
+<script setup lang="ts"></script>
 
 <style scoped></style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full">
-    <ViewTitle title="函数方法">
+    <ViewTitle title="函数代码">
       <template #right>
         <el-button type="text" @click="handleAdd"><LuPlus size="14px" /></el-button>
       </template>

src/renderer/src/views/designer/sidebar/components/EditImageModal.vue

@@ -99,6 +99,11 @@ const colorFormatOptions = [
     label: 'RGB888',
     value: 'RGB888'
   },
+  {
+    key: '3',
+    label: 'ARGB8565',
+    value: 'ARGB8565'
+  },
   {
     key: '3',
     label: 'RGB565',

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

@@ -47,13 +47,16 @@
         </ul>
       </div>
     </div>
-    <!-- 目录大纲 -->
-    <div class="flex-1 overflow-hidden" v-show="activeMenu === 'file'">
-      <Hierarchy />
-    </div>
     <!-- 控件库 -->
     <div class="flex-1 overflow-hidden" v-show="activeMenu === 'widget'">
-      <Libary />
+      <SplitterCollapse>
+        <SplitterCollapseItem title="控件">
+          <Libary />
+        </SplitterCollapseItem>
+        <SplitterCollapseItem title="图层">
+          <Hierarchy />
+        </SplitterCollapseItem>
+      </SplitterCollapse>
     </div>
     <!-- 资源管理 -->
     <div class="flex-1 overflow-hidden" v-show="activeMenu === 'resource'">
@@ -76,7 +79,8 @@ import { ref, h, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/store/modules/app'
 
-import { LuFiles, LuBoxes, LuSettings2, LuInbox, LuCode2 } from 'vue-icons-plus/lu'
+import { SplitterCollapse, SplitterCollapseItem } from '@/components/SplitterCollapse'
+import { LuBoxes, LuSettings2, LuInbox, LuCode2 } from 'vue-icons-plus/lu'
 import Hierarchy from './Hierarchy.vue'
 import Libary from './Libary.vue'
 import Schema from './Schema.vue'
@@ -89,11 +93,6 @@ const { t } = useI18n()
 const sidebarMenu = computed(() => {
   console.log(appStore.lang)
   return [
-    {
-      key: 'file',
-      title: h('span', null, h(LuFiles)),
-      tooltip: t('directory')
-    },
     {
       key: 'widget',
       title: h('span', null, h(LuBoxes)),
@@ -117,7 +116,7 @@ const sidebarMenu = computed(() => {
   ]
 })
 
-const activeMenu = ref('file')
+const activeMenu = ref('widget')
 const appStore = useAppStore()
 const showPopoverMenu = ref(false)
 </script>

src/renderer/src/views/designer/tools/Operate.vue

@@ -1,12 +1,12 @@
 <template>
   <template v-for="item in projectMenu" :key="item.label">
     <el-divider direction="vertical" v-if="item.type" />
-    <MenuItem v-else :item="item" @click="handleClick(item.key)" />
+    <MenuItem v-else :item="item" :disabled="item?.disabled" @click="item?.onClick?.()"> </MenuItem>
   </template>
 </template>
 
 <script setup lang="ts">
-import { reactive, inject } from 'vue'
+import { inject, computed } from 'vue'
 import {
   LuUndo,
   LuRedo,
@@ -24,99 +24,110 @@ import {
   LuArrowDownToLine
 } from 'vue-icons-plus/lu'
 import MenuItem from './components/MenuItem.vue'
+import { useProjectStore } from '@/store/modules/project'
 
-const onMenuClick = inject<(menuKey: string) => void>('onMenuClick', () => {})
+import type { MenuItemType } from './components/MenuItem.vue'
 
-const projectMenu = reactive([
-  {
-    key: 'undo',
-    label: '撤销',
-    img: LuUndo
-  },
-  {
-    key: 'redo',
-    label: '重做',
-    img: LuRedo
-  },
-  {
-    type: 'divider'
-  },
-  {
-    key: 'alignLeft',
-    label: '左对齐',
-    img: LuAlignStartVertical
-  },
-  {
-    key: 'alignHorizontal',
-    label: '水平对齐',
-    img: LuAlignCenterVertical
-  },
-  {
-    key: 'alignRight',
-    label: '右对齐',
-    img: LuAlignEndVertical
-  },
-  {
-    key: 'alignTop',
-    label: '顶对齐',
-    img: LuAlignStartHorizontal
-  },
-  {
-    key: 'alignVertical',
-    label: '垂直居中',
-    img: LuAlignCenterHorizontal
-  },
-  {
-    key: 'alignBottom',
-    label: '底对齐',
-    img: LuAlignEndHorizontal
-  },
-  {
-    type: 'divider'
-  },
-  {
-    key: 'alignWidth',
-    label: '宽度匹配',
-    img: LuAlignHorizontalSpaceBetween
-  },
-  {
-    key: 'alignHeight',
-    label: '高度匹配',
-    img: LuAlignVerticalSpaceBetween
-  },
-  {
-    key: 'alignAll',
-    label: '宽高匹配',
-    img: LuLayoutGrid
-  },
-  {
-    type: 'divider'
-  },
-  {
-    key: 'up',
-    label: '上移一层',
-    img: LuArrowUp
-  },
-  {
-    key: 'down',
-    label: '下移一层',
-    img: LuLayoutGrid
-  },
-  {
-    key: 'top',
-    label: '置于顶层',
-    img: LuArrowUpToLine
-  },
-  {
-    key: 'bottom',
-    label: '置于底层',
-    img: LuArrowDownToLine
-  }
-])
+const onMenuClick = inject<(menuKey: string) => void>('onMenuClick', () => {})
+const projectStore = useProjectStore()
 
-const handleClick = (menuKey: string) => {
-  onMenuClick?.(menuKey)
-}
+const projectMenu = computed((): MenuItemType[] => {
+  console.log(projectStore.history)
+  return [
+    {
+      key: 'undo',
+      label: '撤销',
+      img: LuUndo,
+      disabled: !projectStore.canUndo,
+      onClick: () => {
+        projectStore.undo()
+      }
+    },
+    {
+      key: 'redo',
+      label: '重做',
+      img: LuRedo,
+      disabled: !projectStore.canRedo,
+      onClick: () => {
+        projectStore.redo()
+      }
+    },
+    {
+      type: 'divider'
+    },
+    {
+      key: 'alignLeft',
+      label: '左对齐',
+      img: LuAlignStartVertical
+    },
+    {
+      key: 'alignHorizontal',
+      label: '水平对齐',
+      img: LuAlignCenterVertical
+    },
+    {
+      key: 'alignRight',
+      label: '右对齐',
+      img: LuAlignEndVertical
+    },
+    {
+      key: 'alignTop',
+      label: '顶对齐',
+      img: LuAlignStartHorizontal
+    },
+    {
+      key: 'alignVertical',
+      label: '垂直居中',
+      img: LuAlignCenterHorizontal
+    },
+    {
+      key: 'alignBottom',
+      label: '底对齐',
+      img: LuAlignEndHorizontal
+    },
+    {
+      type: 'divider'
+    },
+    {
+      key: 'alignWidth',
+      label: '宽度匹配',
+      img: LuAlignHorizontalSpaceBetween
+    },
+    {
+      key: 'alignHeight',
+      label: '高度匹配',
+      img: LuAlignVerticalSpaceBetween
+    },
+    {
+      key: 'alignAll',
+      label: '宽高匹配',
+      img: LuLayoutGrid
+    },
+    {
+      type: 'divider'
+    },
+    {
+      key: 'up',
+      label: '上移一层',
+      img: LuArrowUp
+    },
+    {
+      key: 'down',
+      label: '下移一层',
+      img: LuLayoutGrid
+    },
+    {
+      key: 'top',
+      label: '置于顶层',
+      img: LuArrowUpToLine
+    },
+    {
+      key: 'bottom',
+      label: '置于底层',
+      img: LuArrowDownToLine
+    }
+  ]
+})
 </script>
 
 <style lang="less" scoped></style>

src/renderer/src/views/designer/tools/components/MenuItem.vue

@@ -19,23 +19,28 @@
 
 <script setup lang="ts">
 import type { VNode } from 'vue'
+import { IconType } from 'vue-icons-plus'
 import { defineEmits, defineProps } from 'vue'
 
+export type MenuItemType = {
+  type?: string
+  key?: string
+  label?: string
+  img?: string | VNode | IconType
+  [key: string]: any
+}
+
 const props = defineProps<{
-  item: {
-    key: string
-    label: string
-    img: string | VNode
-  }
+  item: MenuItemType
   disabled?: boolean
-  onClick?: (item: { key: string; label: string; img: string | VNode }) => void
+  onClick?: (item: MenuItemType) => void
 }>()
 
 const emit = defineEmits<{
-  (e: 'click', item: { key: string; label: string; img: string | VNode }): void
+  (e: 'click', item: MenuItemType): void
 }>()
 
-function handleClick(item: { key: string; label: string; img: string | VNode }) {
+function handleClick(item: MenuItemType) {
   if (props.disabled) return
   emit('click', item)
 }