feat: 添加动态加载字体文件应用到控件

src/renderer/index.html

@@ -6,7 +6,7 @@
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: local: http: https: blob:;"
+      content="default-src 'self' data: local: http: https: blob:; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: local: http: https: blob:;"
     />
     <style>
       body {

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

@@ -48,9 +48,17 @@ export const getStyle = (key, value) => {
     case 'text': {
       style.color = value?.color
       style.fontSize = `${value?.size}px`
-      style.fontFamily = value?.family
+      // style.fontFamily = value?.family
       style.textAlign = value?.align
 
+      // 处理字体
+      if (value?.family && value?.family !== 'xx') {
+        const font = useProjectStore().project?.resources?.fonts?.find(
+          (item) => item.id === value.family
+        )
+        style.fontFamily = `'${font?.fileName}'`
+      }
+
       style.fontStyle = value?.italic ? 'italic' : 'normal'
       // 装饰
       style.textDecoration = value?.decoration

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

@@ -101,6 +101,30 @@ export const useProjectStore = defineStore('project', () => {
     }
   )
 
+  watch(
+    () => project.value?.resources.fonts,
+    (fonts?: FontResource[]) => {
+      // 动态加载全部字体
+      const fontPromises = fonts?.map((font) => {
+        const fontFace = new FontFace(
+          font.fileName,
+          `url('local:///${projectPath.value + font.path}')`.replaceAll('\\', '/')
+        )
+        return fontFace.load()
+      })
+
+      if (fontPromises) {
+        Promise.all(fontPromises)
+          .then((loadedFonts) => {
+            console.log('已加载字体:', loadedFonts)
+            loadedFonts.forEach((font) => document.fonts.add(font))
+            console.log('所有字体已加载并可用')
+          })
+          .catch((err) => console.error('字体加载失败:', err))
+      }
+    }
+  )
+
   // 当前激活元素map
   const activeWidgetMap = computed(() => {
     return activeWidgets.value.reduce((acc, cur) => {

src/renderer/src/views/designer/config/property/components/StyleFont.vue

@@ -18,7 +18,18 @@
       />
     </el-form-item>
     <el-form-item label="样式" label-position="left" label-width="60px">
-      <el-select-v2 v-model="family" :options="fontOptions" />
+      <el-select v-model="family">
+        <el-option
+          v-for="item in fontOptions"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        >
+          <div :style="{ fontFamily: `'${item.label}'` }">
+            {{ item.label }}
+          </div>
+        </el-option>
+      </el-select>
     </el-form-item>
     <el-form-item v-if="!hideAlign" label="对齐" label-position="left" label-width="60px">
       <el-select-v2 v-model="align" :options="alignOptions" />