Icon-Picker component allows searching external sources

apps/vue/src/components/Icon/src/IconPicker.vue

@@ -1,6 +1,6 @@
 <template>
   <a-input
-    disabled
+    :disabled="onlyDefineIcons"
     :style="{ width }"
     :placeholder="t('component.icon.placeholder')"
     :class="prefixCls"
@@ -109,6 +109,8 @@
     pageSize: propTypes.number.def(140),
     copy: propTypes.bool.def(false),
     mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
+    // 仅在datas中定义的图标
+    onlyDefineIcons: propTypes.bool.def(true),
   });
 
   const emit = defineEmits(['change', 'update:value']);

apps/vue/src/views/dashboard/workbench/components/MenuReference.vue

@@ -6,7 +6,13 @@
     :width="500"
     @ok="handleSubmit"
   >
-    <Form :model="formModel" ref="formElRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
+    <Form
+      ref="formElRef"
+      :model="formModel"
+      :rules="formRules"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 17 }"
+    >
       <Form.Item :label="t('routes.dashboard.workbench.menus.selectMenu')" name="menuId">
         <VTreeSelect
           allowClear
@@ -33,7 +39,7 @@
         <VInput v-model:value="formModel.aliasName" autocomplete="off" />
       </Form.Item>
       <Form.Item :label="t('routes.dashboard.workbench.menus.defineIcon')" name="icon">
-        <IconPicker v-model:value="formModel.icon" />
+        <IconPicker v-model:value="formModel.icon" :onlyDefineIcons="false" />
       </Form.Item>
     </Form>
   </BasicModal>
@@ -63,6 +69,11 @@
     color: '#000000',
     aliasName: '',
   });
+  const formRules = reactive({
+    menuId: {
+      required: true,
+    },
+  });
   const formElRef = ref<any>(null);
   const menuTreeData = ref<any[]>([]);
   const radio = ref(false);

apps/vue/src/views/platform/menu/hooks/useMenuFormContext.ts

@@ -83,6 +83,12 @@ export function useMenuFormContext({ menuModel, formElRef, framework }: UseMenuF
         case ValueType.Object:
           if (item.name === 'icon') {
             schema.component = 'IconPicker';
+            schema.componentProps = {
+              onlyDefineIcons: false,
+              style: {
+                width: '100%',
+              },
+            };
           } else {
             schema.component = 'Input';
             schema.componentProps = {