form-create: 字体图标扩展

Author: puhui999

src/components/FormCreate/src/config/useDictSelectRule.ts

@@ -22,7 +22,7 @@ export const useDictSelectRule = () => {
       })) ?? []
   })
   return {
-    icon: 'icon-select',
+    icon: 'icon-doc-text',
     label,
     name,
     rule() {

src/components/FormCreate/src/config/useSelectRule.ts

@@ -11,7 +11,7 @@ export const useSelectRule = (option: SelectRuleOption) => {
   const label = option.label
   const name = option.name
   return {
-    icon: 'icon-select',
+    icon: option.icon,
     label,
     name,
     rule() {

src/components/FormCreate/src/type/index.ts

@@ -45,5 +45,6 @@ export interface ApiSelectProps {
 export interface SelectRuleOption {
   label: string // label 名称
   name: string // 组件名称
+  icon: string // 组件图标
   props?: any[] // 组件规则
 }

src/components/FormCreate/src/useFormCreateDesigner.ts

@@ -48,12 +48,21 @@ export const useFormCreateDesigner = async (designer: Ref) => {
     })
   }
 
-  const userSelectRule = useSelectRule({ name: 'UserSelect', label: '用户选择器' })
-  const deptSelectRule = useSelectRule({ name: 'DeptSelect', label: '部门选择器' })
+  const userSelectRule = useSelectRule({
+    name: 'UserSelect',
+    label: '用户选择器',
+    icon: 'icon-user-o'
+  })
+  const deptSelectRule = useSelectRule({
+    name: 'DeptSelect',
+    label: '部门选择器',
+    icon: 'icon-address-card-o'
+  })
   const dictSelectRule = useDictSelectRule()
   const apiSelectRule0 = useSelectRule({
     name: 'ApiSelect',
     label: '接口选择器',
+    icon: 'icon-server',
     props: [...apiSelectRule]
   })
 

src/styles/FormCreate/fonts/fontello.woff

@@ -0,0 +1,22 @@
+// 使用字体图标来源 https://fontello.com/
+
+@font-face {
+  font-family: 'fc-icon';
+  src: url('@/styles/FormCreate/fonts/fontello.woff') format('woff');
+}
+
+.icon-doc-text:before {
+  content: '\f0f6';
+}
+
+.icon-server:before {
+  content: '\f233';
+}
+
+.icon-address-card-o:before {
+  content: '\f2bc';
+}
+
+.icon-user-o:before {
+  content: '\f2c0';
+}

src/styles/FormCreate/index.scss

@@ -1,4 +1,5 @@
 @import './var.css';
+@import './FormCreate/index.scss';
 @import 'element-plus/theme-chalk/dark/css-vars.css';
 
 .reset-margin [class*='el-icon'] + span {