From ce3c631430aa43d8e883b08afc8392fdc63b1126 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Mon, 26 Sep 2022 17:32:28 +0800
Subject: [PATCH] Icon-Picker component allows searching external sources

---
 apps/vue/src/components/Icon/src/IconPicker.vue   |  4 +++-
 .../workbench/components/MenuReference.vue        | 15 +++++++++++++--
 .../platform/menu/hooks/useMenuFormContext.ts     |  6 ++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/vue/src/components/Icon/src/IconPicker.vue b/apps/vue/src/components/Icon/src/IconPicker.vue
index 40cfe7d17..39e98bc15 100644
--- a/apps/vue/src/components/Icon/src/IconPicker.vue
+++ b/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']);
diff --git a/apps/vue/src/views/dashboard/workbench/components/MenuReference.vue b/apps/vue/src/views/dashboard/workbench/components/MenuReference.vue
index a580eb598..87b68614b 100644
--- a/apps/vue/src/views/dashboard/workbench/components/MenuReference.vue
+++ b/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);
diff --git a/apps/vue/src/views/platform/menu/hooks/useMenuFormContext.ts b/apps/vue/src/views/platform/menu/hooks/useMenuFormContext.ts
index 07ebe9515..cd0f67d47 100644
--- a/apps/vue/src/views/platform/menu/hooks/useMenuFormContext.ts
+++ b/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 = {