feature(legodesigner): 增加图标组件

src/components/SvgIcon/SvgIcon.vue

@@ -42,6 +42,15 @@
     return 'svg-icon';
   });
 
+  watch(
+    () => props.color,
+    (newVal) => {
+      if (newVal) {
+        defaultColor.value = newVal;
+      }
+    }
+  );
+
   const defaultColor = ref<any>(props.color);
   const mouseover = () => {
     if (props.isHover) {

src/views/LegoDesigner/components/WidgetList/WidgetList.vue

@@ -18,7 +18,13 @@
             @dragend="dragEnd($event)"
             @click="addWidgetToCenter(item, itemCom)"
           >
-            <img :src="getAssetsFile(itemCom.screenShot.src)" />
+            <!-- 图标 -->
+            <lego-design-icon
+              v-if="item.category === 'icon'"
+              :widget-data="itemCom"
+            ></lego-design-icon>
+            <!-- 普通组件 -->
+            <img v-else :src="getAssetsFile(itemCom.screenShot.src)" />
           </div>
         </el-collapse-item>
       </el-collapse>
@@ -30,6 +36,9 @@
   import { WIDGET_CONFIG_LIST } from '../../schema/widgetConfig';
   import { IWidget, IWidgetTab } from '../../types';
   import { getAssetsFile } from '../../utils/common';
+  import LegoDesignIcon from '../../widgets/icon/LegoDesignIconList.vue';
+  import { useIconfontItem } from '../../widgets/icon/useIconfontItem';
+  import { iconfontList } from '../../widgets/icon/iconfont';
 
   const emit = defineEmits(['addWidget']);
 
@@ -52,15 +61,27 @@
   const dragEnd = (event: any) => {
     event.dataTransfer.clearData();
   };
+
+  // 初始化图标列表
+  const initIconfontList = () => {
+    WIDGET_CONFIG_LIST.forEach((cptList) => {
+      if (cptList.category === 'icon') {
+        iconfontList['glyphs'].forEach((iconItem) => cptList.list.push(useIconfontItem(iconItem)));
+      }
+    });
+  };
+  initIconfontList();
 </script>
 <style lang="scss" scoped>
   .widget-list-box {
     width: 100%;
+    position: relative;
     .com-list-box {
       :deep(.el-collapse) {
         border-top: none;
         .el-collapse-item__header {
           padding: 0 15px;
+          user-select: none;
         }
         .el-collapse-item__content {
           padding: 10px;
@@ -69,6 +90,7 @@
           justify-content: space-between;
           flex-wrap: wrap;
         }
+
         .widget-item {
           border-radius: 2px;
           // box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px;

src/views/LegoDesigner/schema/widgetConfig.ts

@@ -638,5 +638,11 @@ export const WIDGET_CONFIG_LIST: Array<IWidgetTab> = [
         dataSource: {} // 组件单独数据
       }
     ]
+  },
+  {
+    title: '图标',
+    category: 'icon',
+    dataSource: {},
+    list: []
   }
 ];

src/views/LegoDesigner/setters/iconColorEditor.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="icon-color-editor-box">
+    <el-form-item label="图标颜色:">
+      <color-picker-custom-vue v-model="widgetItem.css.iconColor"></color-picker-custom-vue>
+    </el-form-item>
+  </div>
+</template>
+<script lang="ts" setup>
+  import useSelectWidgetItem from '../hooks/useSelectWidgetItem';
+  import ColorPickerCustomVue from '../components/ColorPicker/ColorPickerCustom.vue';
+
+  const props = defineProps<{
+    id: string;
+    pageIndex: number;
+  }>();
+
+  // 选中的widgetItem
+  const { widgetItem } = useSelectWidgetItem(props.id, props.pageIndex);
+</script>

src/views/LegoDesigner/setters/iconSizeEditor.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="icon-size-editor-box">
+    <el-form-item label="图标大小:">
+      <el-input-number v-model="widgetItem.css.iconSize" :min="0" />
+      <span class="unit">像素</span>
+    </el-form-item>
+  </div>
+</template>
+<script lang="ts" setup>
+  import useSelectWidgetItem from '../hooks/useSelectWidgetItem';
+
+  const props = defineProps<{
+    id: string;
+    pageIndex: number;
+  }>();
+
+  // 选中的widgetItem
+  const { widgetItem } = useSelectWidgetItem(props.id, props.pageIndex);
+</script>
+<style lang="scss" scoped>
+  .icon-size-editor-box {
+    .unit {
+      margin-left: 10px;
+      color: #929292;
+      letter-spacing: 2px;
+    }
+  }
+</style>

src/views/LegoDesigner/setters/settersMap.ts

@@ -19,6 +19,8 @@ import fontSizeEditor from './fontSizeEditor.vue';
 import lineHeightEditor from './lineHeightEditor.vue';
 import textAlignEditor from './textAlignEditor.vue';
 import textEditEditor from './dataSetters/textEditEditor.vue';
+import iconColorEditor from './iconColorEditor.vue';
+import iconSizeEditor from './iconSizeEditor.vue';
 
 // 属性设置组件对应关系
 export const SETTERS_MAP: ISetterMap = {
@@ -39,7 +41,9 @@ export const SETTERS_MAP: ISetterMap = {
   borderColor: borderColorEditor,
   borderStyle: borderStyleEditor,
   lineHeight: lineHeightEditor,
-  textAlign: textAlignEditor
+  textAlign: textAlignEditor,
+  iconColor: iconColorEditor,
+  iconSize: iconSizeEditor
 };
 
 // 数据设置组件对应关系

src/views/LegoDesigner/widgets/icon/LegoDesignIconList.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="lego-design-icon-box">
+    <svg-icon :icon-name="widgetData?.icon" color="#74a274" size="25px"></svg-icon>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { IWidget } from '../../types';
+
+  interface IWidgetItem {
+    widgetData: IWidget | null; // 模块数据
+  }
+  withDefaults(defineProps<IWidgetItem>(), {
+    widgetData: null
+  });
+</script>
+<style lang="scss" scoped>
+  .lego-design-icon-box {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/views/LegoDesigner/widgets/icon/LegoDesignIconRender.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="lego-design-icon-box">
+    <svg-icon
+      :icon-name="widgetData?.icon"
+      :color="widgetData?.css.iconColor"
+      :size="widgetData?.css.iconSize + 'px'"
+    ></svg-icon>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { IWidget } from '../../types';
+
+  interface IWidgetItem {
+    widgetData: IWidget | null; // 模块数据
+  }
+  const props = withDefaults(defineProps<IWidgetItem>(), {
+    widgetData: null
+  });
+</script>
+<style lang="scss" scoped>
+  .lego-design-icon-box {
+    width: v-bind('props.widgetData?.css.width + "px"');
+    height: v-bind('props.widgetData?.css.height + "px"');
+    border-style: v-bind('props.widgetData?.css.borderStyle');
+    border-width: v-bind('props.widgetData?.css.borderWidth + "px"');
+    padding: v-bind('props.widgetData?.css.padding.top  + "px"')
+      v-bind('props.widgetData?.css.padding.right + "px"')
+      v-bind('props.widgetData?.css.padding.bottom + "px"')
+      v-bind('props.widgetData?.css.padding.left + "px"');
+    border-color: v-bind('props.widgetData?.css.borderColor');
+    overflow: hidden;
+    background-color: v-bind('props.widgetData?.css.backgroundColor');
+    display: flex;
+    align-items: center;
+    justify-content: v-bind('props.widgetData?.css.textAlign');
+  }
+</style>