fix: 修改图片问题及图片控件宽高适应

src/renderer/src/lvgl-widgets/hooks/useWidgetStyle.ts

@@ -182,7 +182,7 @@ export const useWidgetStyle = (param: StyleParam) => {
 
         // 获取背景图片src及颜色
         if (key === 'background' && style?.[key]?.image?.imgId) {
-          const basePath = projectStore?.project?.meta.path
+          const basePath = projectStore?.projectPath
           const imagePath = projectStore?.project?.resources.images.find(
             (item) => item.id === style?.[key]?.image?.imgId
           )?.path

src/renderer/src/lvgl-widgets/image-button/ImageButton.vue

@@ -56,7 +56,7 @@ watch(
   async (val) => {
     if (val && projectStore.project) {
       // 加载图片
-      const basePath = projectStore.project.meta.path
+      const basePath = projectStore.projectPath
       const imagePath = projectStore.project.resources.images.find((item) => item.id === val)?.path
       const result = await getImageByPath(basePath + imagePath)
       src.value = result?.src!

src/renderer/src/lvgl-widgets/image/Image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="boxStyle" class="overflow-hidden flex items-center justify-center">
+  <div :style="boxStyle" class="flex items-center justify-center">
     <ImageBg
       :src="src || defaultImg"
       :image-style="styleMap?.mainStyle?.imageStyle"
@@ -10,7 +10,6 @@
 
 <script setup lang="ts">
 import { computed, watch, ref } from 'vue'
-import { getImageByPath } from '@/utils'
 import { useProjectStore } from '@/store/modules/project'
 import defaultImg from '@/assets/default.png'
 import ImageBg from '../ImageBg.vue'
@@ -31,12 +30,11 @@ const props = defineProps<{
   openScale: boolean
   scale: number
   antiAliasing: boolean
+  id?: string
 }>()
 
 const src = ref('')
 const projectStore = useProjectStore()
-const width = ref(props.width)
-const height = ref(props.height)
 
 const styleMap = useWidgetStyle({
   widget: 'lv_image',
@@ -44,21 +42,13 @@ const styleMap = useWidgetStyle({
 })
 
 const imageProps = computed(() => {
-  const { openScale, scale = 256, image } = props
-  const s = scale / 256
-  if (openScale) {
-    return {
-      width: `${width.value * s}px`,
-      height: `${height.value * s}px`
-    }
-  }
-  if (!image) {
-    return {
-      height: '100%',
-      width: '100%'
-    }
+  const { openScale, scale = 256, width, height } = props
+  const s = openScale ? scale / 256 : 1
+
+  return {
+    width: `${width * s}px`,
+    height: `${height * s}px`
   }
-  return {}
 })
 
 watch(
@@ -66,14 +56,9 @@ watch(
   async (val) => {
     if (val && projectStore.project) {
       // 加载图片
-      const basePath = projectStore.project.meta.path
+      const basePath = projectStore.projectPath
       const imagePath = projectStore.project.resources.images.find((item) => item.id === val)?.path
-      const result = await getImageByPath(basePath + imagePath)
-      src.value = result?.src!
-      width.value = result?.dimensions.width!
-      height.value = result?.dimensions.height!
-    } else {
-      src.value = ''
+      src.value = `local:///${(basePath + imagePath).replaceAll('\\', '/')}`
     }
   },
   {

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

@@ -57,8 +57,6 @@ export const useProjectStore = defineStore('project', () => {
   const recentProjectStore = useRecentProject()
   const { t } = useI18n()
 
-  // 项目路径
-  const projectPath = ref<string>()
   // 图片压缩格式
   const imageCompressFormat = ref<string[]>([])
   // 当前最大化屏幕
@@ -77,6 +75,13 @@ export const useProjectStore = defineStore('project', () => {
       screen.pages.some((page) => page.id === activePageId.value)
     )
   })
+
+  // 项目路径
+  const projectPath = computed(() => {
+    if (!project.value) return ''
+
+    return `${project.value.meta.path}\\${project.value.meta.name}`
+  })
   // 打开页面 用以记录每个屏幕打开的页面
   const openPages = ref<Page[]>([])
 
@@ -147,7 +152,7 @@ export const useProjectStore = defineStore('project', () => {
       }
     }
 
-    projectPath.value = `${meta.path}/${meta.name}`
+    // projectPath.value = `${meta.path}/${meta.name}`
     // 4、创建项目文件夹
     await window.electron.ipcRenderer.invoke('create-directory', `${meta.path}\\${meta.name}`)
     // // assets
@@ -210,12 +215,14 @@ export const useProjectStore = defineStore('project', () => {
     project.value = newProject
     globalStyle.value = style
     currentMaxScreen.value = null
+    const projectPath = project.value.meta.path + '\\' + project.value.meta.name
     // 修改项目路径
-    if (project.value.meta.path !== path) {
-      project.value.meta.path = path
+    if (projectPath !== path) {
+      // 替换最后的项目名称
+      project.value.meta.path = path.slice(0, path.lastIndexOf('\\'))
     }
     // 初始化处理
-    projectPath.value = path
+    // projectPath.value = path
     openPages.value = newProject.screens.map((screen) => screen.pages?.[0]).filter((item) => item)
     activePageId.value = newProject.screens[0].pages?.[0]?.id
     imageCompressFormat.value = newProject.meta.imageCompress

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

@@ -60,6 +60,8 @@ import { useAppStore } from '@/store/modules/app'
 
 import type { StageState } from './type'
 import { has } from 'lodash-es'
+import { Page } from '@/types/page'
+import { BaseWidget } from '@/types/baseWidget'
 
 defineProps<{
   // 父级容器 拖拽缩放设置
@@ -157,6 +159,13 @@ const individualGroupableProps = (element: HTMLElement | SVGElement | null | und
   }
 }
 
+// 获取缩放值
+const getScale = (widget: Page | BaseWidget) => {
+  if (!widget.props?.openScale) return 1
+
+  return (widget.props?.scale ?? 256) / 256
+}
+
 // 拖拽开始
 const onDragStart = (e) => {
   zIndex.value = e.target.style.zIndex
@@ -188,8 +197,9 @@ const onResize = (e) => {
 const onResizeEnd = (e) => {
   const id = e.target.attributes['widget-id']?.value
   if (e.lastEvent && id && projectStore.activeWidgetMap[id]) {
-    projectStore.activeWidgetMap[id].props.width = Math.round(e.lastEvent.width)
-    projectStore.activeWidgetMap[id].props.height = Math.round(e.lastEvent.height)
+    const scale = getScale(projectStore.activeWidgetMap[id])
+    projectStore.activeWidgetMap[id].props.width = Math.round(e.lastEvent.width / scale)
+    projectStore.activeWidgetMap[id].props.height = Math.round(e.lastEvent.height / scale)
     // 带可选固定高度控件
     if (has(projectStore.activeWidgetMap[id].props, 'fixedHeight')) {
       projectStore.activeWidgetMap[id].props.fixedHeight = true
@@ -234,8 +244,9 @@ const onResizeGroupEnd = ({ events }) => {
   events.forEach((ev) => {
     const id = ev.target.attributes['widget-id']?.value
     if (ev.lastEvent && id && projectStore.activeWidgetMap[id]) {
-      projectStore.activeWidgetMap[id].props.width = Math.round(ev.lastEvent.width)
-      projectStore.activeWidgetMap[id].props.height = Math.round(ev.lastEvent.height)
+      const scale = getScale(projectStore.activeWidgetMap[id])
+      projectStore.activeWidgetMap[id].props.width = Math.round(ev.lastEvent.width / scale)
+      projectStore.activeWidgetMap[id].props.height = Math.round(ev.lastEvent.height / scale)
       // 带可选固定高度控件
       if (has(projectStore.activeWidgetMap[id].props, 'fixedHeight')) {
         projectStore.activeWidgetMap[id].props.fixedHeight = true

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

@@ -132,13 +132,19 @@ const getStyle = computed((): CSSProperties => {
     }
   }
 
+  let scale = 1
+  // 存在缩放属性且打开
+  if (schema.props?.openScale) {
+    scale = (schema.props?.scale ?? 256) / 256
+  }
+
   return {
     position: 'absolute',
     left: 0,
     top: 0,
     transform: `translate(${schema.props.x}px, ${schema.props.y}px) ${rotate}`,
-    width: schema.props?.width + 'px',
-    height: schema.props?.height + 'px',
+    width: schema.props?.width * scale + 'px',
+    height: schema.props?.height * scale + 'px',
     zIndex: zIndex.value,
     ...style,
     ...other,