fix: 修改方法画布

src/renderer/src/locales/en_US.json

@@ -77,5 +77,7 @@
   "openingProject": "open project...",
   "openProjectSuccess": "open project success",
   "projectNotExist": "Project Not Exist",
-  "saveSuccess": "Save Success"
+  "saveSuccess": "Save Success",
+  "screen": "Screen",
+  "canvasSize": "Canvas Size:"
 }

src/renderer/src/locales/zh_CN.json

@@ -77,5 +77,7 @@
   "openingProject": "正在打开项目...",
   "openProjectSuccess": "打开项目成功",
   "projectNotExist": "项目不存在",
-  "saveSuccess": "保存成功"
+  "saveSuccess": "保存成功",
+  "screen": "屏幕",
+  "canvasSize": "画布尺寸："
 }

src/renderer/src/lvgl-widgets/index.ts

@@ -1,5 +0,0 @@
-import lv_obj from './lv_obj'
-
-export default {
-  lv_obj
-}

src/renderer/src/lvgl-widgets/lv_button/index.ts

@@ -0,0 +1,8 @@
+export default {
+  config: {
+    props: {
+      name: 'button',
+      type: 'button'
+    }
+  }
+}

src/renderer/src/lvgl-widgets/lv_obj/src/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>

src/renderer/src/store/modules/project.ts

@@ -8,6 +8,7 @@ import type { Language } from '@/types/language'
 import type { Method } from '@/types/method'
 import type { BaseWidget } from '@/types/baseWidget'
 import type { Screen } from '@/types/screen'
+import type { Page } from '@/types/page'
 
 import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
@@ -69,6 +70,9 @@ export const useProjectStore = defineStore('project', () => {
   // 当前选中元素
   const activeWidgets = ref<any[]>([])
 
+  // 打开页面
+  const openPages = ref<Page[]>([])
+
   /**
    * 创建应用
    * @param meta 应用元信息
@@ -97,10 +101,12 @@ export const useProjectStore = defineStore('project', () => {
     }
     // 2、构建屏幕信息
     activePageId.value = ''
+    openPages.value = []
     meta.screens.forEach((screen) => {
       const newScreen = createScreen(screen)
       newScreen.name += '_1'
       project.value?.screens.push(newScreen)
+      openPages.value.push(newScreen.pages[0])
     })
     activePageId.value = project.value.screens[0].pages[0].id
     activeWidgets.value = [project.value.screens[0].pages[0]]
@@ -167,6 +173,7 @@ export const useProjectStore = defineStore('project', () => {
     // 初始化处理
     clear()
     projectPath.value = path
+    openPages.value = newProject.screens.map((screen) => screen.pages?.[0]).filter((item) => item)
     activePageId.value = newProject.screens[0].pages?.[0]?.id
     activeWidgets.value = [newProject.screens[0].pages?.[0]]
     imageCompressFormat.value = newProject.meta.imageCompress
@@ -268,6 +275,7 @@ export const useProjectStore = defineStore('project', () => {
     openLocalProject,
     saveProject,
     activeWidgets,
+    openPages,
 
     // 历史记录
     history,

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

@@ -1,24 +1,26 @@
 <template>
-  <div class="w-full h-full">
+  <div style="height: calc(100vh - 146px)" class="w-full flex flex-col">
     <ViewTitle title="函数代码">
       <template #right>
         <el-button type="text" @click="handleAdd"><LuPlus size="14px" /></el-button>
       </template>
     </ViewTitle>
-    <el-scrollbar>
-      <MethodItem
-        v-for="item in projectStore.project?.methods || []"
-        :key="item.id"
-        :data="item"
-        @delete="handleDelete(item.id)"
-      />
-      <div
-        v-if="!projectStore.project?.methods?.length"
-        class="text-center text-text-secondary mt-4"
-      >
-        暂无数据~
-      </div>
-    </el-scrollbar>
+    <div class="flex-1 min-h-0">
+      <el-scrollbar>
+        <MethodItem
+          v-for="item in projectStore.project?.methods || []"
+          :key="item.id"
+          :data="item"
+          @delete="handleDelete(item.id)"
+        />
+        <div
+          v-if="!projectStore.project?.methods?.length"
+          class="text-center text-text-secondary mt-4"
+        >
+          暂无数据~
+        </div>
+      </el-scrollbar>
+    </div>
   </div>
 </template>
 

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

@@ -15,6 +15,7 @@
           v-if="edit"
           v-model.trim="title"
           ref="inputRef"
+          spellcheck="false"
           @keydown.enter="handleChangeName"
           @blur="handleChangeName"
           @click.stop

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

@@ -11,7 +11,12 @@
           <el-tab-pane label="界面设计" name="design" :closable="false">
             <SplitterGroup :direction="appStore.screenLayout">
               <SplitterPanel>
-                <Stage key="1" :data="projectStore.project?.screens[0]" />
+                <Stage
+                  key="1"
+                  v-if="projectStore.project?.screens[0]"
+                  :screen="projectStore.project?.screens[0]"
+                  :page="projectStore.openPages[0]"
+                />
               </SplitterPanel>
               <SplitterResizeHandle
                 class="bg-border"
@@ -19,7 +24,11 @@
                 v-if="projectStore.project?.meta.screenType === 'dual'"
               />
               <SplitterPanel v-if="projectStore.project?.meta.screenType === 'dual'">
-                <Stage key="2" :data="projectStore.project?.screens[1]" />
+                <Stage
+                  key="2"
+                  :screen="projectStore.project?.screens[1]"
+                  :page="projectStore.openPages[1]"
+                />
               </SplitterPanel>
             </SplitterGroup>
           </el-tab-pane>

src/renderer/src/views/designer/workspace/stage/DesignerCanvas.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="stage-wrapper" ref="stageWrapperRef" :style="getWrapperStyle">
     <div class="stage" ref="stageRef" :style="getStyles.stageStyle">
-      <div ref="tipRef" class="tip-txt" :style="getStyles.tipStyle">页面名称</div>
+      <div ref="tipRef" class="tip-txt" :style="getStyles.tipStyle">{{ page?.name }}</div>
       <div class="absolute transparent-bg" :style="getStyles.transpartBg"></div>
       <div
         ref="canvasRef"
@@ -26,23 +26,16 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { StageState } from './type'
+import type { Page } from '@/types/page'
 
-import {
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  computed,
-  nextTick,
-  defineExpose,
-  defineProps,
-  defineEmits
-} from 'vue'
-
+import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
 import { useScroll, useElementSize, useResizeObserver } from '@vueuse/core'
+import { useProjectStore } from '@/store/modules/project'
 import ComponentWrapper from './ComponentWrapper.vue'
 
 const props = defineProps<{
   state: StageState
+  page?: Page
 }>()
 const emit = defineEmits<{
   changeState: [Partial<StageState>]
@@ -51,6 +44,7 @@ const stageWrapperRef: Ref<HTMLElement | null> = ref(null)
 const stageRef: Ref<HTMLElement | null> = ref(null)
 const canvasRef: Ref<HTMLElement | null> = ref(null)
 const { width: clientWidth, height: clientHeight } = useElementSize(stageWrapperRef)
+const projectStore = useProjectStore()
 
 const getWrapperStyle = computed(() => {
   const { showRuler } = props.state
@@ -98,7 +92,9 @@ const getStyles = computed(() => {
   const endX = tipLeft + width * scale
   const endY = startY + height * scale
 
-  const clipPath = `rect(${startY}px ${endX}px ${endY}px ${tipLeft}px)`
+  const offset = props.page?.id === projectStore.activePageId ? 2 : 0
+  const clipPath = `rect(${startY + offset}px ${endX + offset}px ${endY + offset}px ${tipLeft + offset}px)`
+  const border = props.page?.id === projectStore.activePageId ? '2px solid #1890ff' : ''
 
   return {
     // 舞台样式
@@ -114,7 +110,8 @@ const getStyles = computed(() => {
       transform: `scale(${scale})`,
       left: `${canvasLeft}px`,
       top: `${canvasTop}px`,
-      background: '#fff'
+      background: '#fff',
+      border
     },
     // 提示样式
     tipStyle: {

src/renderer/src/views/designer/workspace/stage/Scaleplate.vue

@@ -69,7 +69,7 @@ import type { Ref } from 'vue'
 import type { StageState } from './type'
 import type { Page, ReferenceLine } from '@/types/page'
 
-import { ref, watch, defineProps, computed } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { LuEye, LuEyeOff } from 'vue-icons-plus/lu'
 import { UseDraggable } from '@vueuse/components'
 import { drawScaleplate } from './utils'

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

@@ -8,25 +8,20 @@
   >
     <div class="workspace flex flex-col">
       <div class="h-32px bg-bg-secondary stage-title border-b-1px border-b-solid border-border">
-        <div class="px-12px leading-32px text-text-primary font-bold">屏幕</div>
+        <div class="px-12px leading-32px text-text-primary font-bold">{{ $t('screen') }}</div>
       </div>
       <div class="workspace-top">
         <!-- 画布 -->
-        <DesignerCanvas
-          :state="state"
-          :page="currentScreenActivePage"
-          ref="canvasRef"
-          @changeState="handleSetState"
-        />
+        <DesignerCanvas :state="state" :page="page" ref="canvasRef" @changeState="handleSetState" />
         <!-- 标尺 -->
-        <Scaleplate :state="state" :page="currentScreenActivePage" v-show="state.showRuler" />
+        <Scaleplate :state="state" :page="page" v-show="state.showRuler" />
       </div>
       <!-- 底部工具栏 -->
       <div
         class="workspace-bottom flex justify-between items-center overflow-hidden bg-bg-secondary"
       >
         <div class="bottom-left flex items-center">
-          <span style="margin-right: 12px">画布尺寸：</span>
+          <span style="margin-right: 12px">{{ $t('canvasSize') }}</span>
           <span>{{ state.width }} * {{ state.height }}</span>
         </div>
         <div class="bottom-right flex items-center gap-8px">
@@ -85,8 +80,9 @@
 <script setup lang="ts">
 import type { StageState } from './type'
 import type { Screen } from '@/types/screen'
+import type { Page } from '@/types/page'
 
-import { ref, reactive, watch, nextTick, computed } from 'vue'
+import { ref, reactive, watch, nextTick } from 'vue'
 import Scaleplate from './Scaleplate.vue'
 import DesignerCanvas from './DesignerCanvas.vue'
 import { throttle } from 'lodash'
@@ -102,7 +98,8 @@ import { useProjectStore } from '@/store/modules/project'
 import { useAppStore } from '@/store/modules/app'
 
 const props = defineProps<{
-  data?: Screen
+  screen?: Screen
+  page?: Page
 }>()
 
 const projectStore = useProjectStore()
@@ -127,15 +124,9 @@ const state = reactive<StageState>({
   showBgGrid: false,
   showReferenceLine: true
 })
-// 当前活动页面ID
-const currentPageId = ref<string>()
-// 当前屏幕活动页面
-const currentScreenActivePage = computed(() => {
-  return props.data?.pages.find((item) => item.id === currentPageId.value)
-})
 
 watch(
-  () => props.data,
+  () => props.screen,
   async (val) => {
     if (val) {
       state.width = val.width
@@ -143,9 +134,6 @@ watch(
       await nextTick()
       handleCenter()
     }
-    if (!currentPageId.value && val?.pages.length) {
-      currentPageId.value = val.pages[0].id
-    }
   }
 )