From ed412aabb6781f661cf231ede06888cbd0caaf1d Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 6 Nov 2024 16:37:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AC=AC=E4=B8=89=E6=96=B9=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E7=A6=BB=E7=BA=BF=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_core/authentication/oauth-login.vue      |  3 +--
 apps/web-antd/src/views/_core/oauth-common.ts | 22 ++++++++++-----
 .../_core/profile/components/account-bind.vue |  4 +--
 packages/icons/package.json                   |  4 +++
 packages/icons/src/iconify-offline/index.ts   | 27 +++++++++++++++++++
 packages/icons/src/iconify/index.ts           |  1 -
 6 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/apps/web-antd/src/views/_core/authentication/oauth-login.vue b/apps/web-antd/src/views/_core/authentication/oauth-login.vue
index f8805ff0..0c359ec1 100644
--- a/apps/web-antd/src/views/_core/authentication/oauth-login.vue
+++ b/apps/web-antd/src/views/_core/authentication/oauth-login.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
 import { Col, Row, Tooltip } from 'ant-design-vue';
@@ -31,7 +30,7 @@ const clientList = accountBindList.filter((item) => item.action);
         <Tooltip :title="`${item.title}登录`">
           <span class="flex cursor-pointer items-center justify-center">
             <component
-              :is="createIconifyIcon(item.avatar)"
+              :is="item.avatar"
               v-if="item.avatar"
               :style="{ color: item.color }"
               class="size-[24px]"
diff --git a/apps/web-antd/src/views/_core/oauth-common.ts b/apps/web-antd/src/views/_core/oauth-common.ts
index b51a95fc..66274425 100644
--- a/apps/web-antd/src/views/_core/oauth-common.ts
+++ b/apps/web-antd/src/views/_core/oauth-common.ts
@@ -1,3 +1,13 @@
+import type { Component } from 'vue';
+
+import {
+  AlipayIcon,
+  DingdingIcon,
+  GiteeIcon,
+  GithubOAuthIcon,
+  TaobaoIcon,
+} from '@vben/icons';
+
 import { authBinding } from '#/api/core/auth';
 /**
  * @description: 菜单
@@ -13,7 +23,7 @@ export interface ListItem {
   title: string;
   description: string;
   extra?: string;
-  avatar?: string;
+  avatar?: Component;
   color?: string;
 }
 
@@ -50,7 +60,7 @@ async function handleAuthBinding(source: string) {
  */
 export const accountBindList: BindItem[] = [
   {
-    avatar: 'ri:taobao-fill',
+    avatar: TaobaoIcon,
     color: '#ff4000',
     description: '绑定淘宝账号',
     key: '1',
@@ -58,7 +68,7 @@ export const accountBindList: BindItem[] = [
     title: '淘宝',
   },
   {
-    avatar: 'fa-brands:alipay',
+    avatar: AlipayIcon,
     color: '#2eabff',
     description: '绑定支付宝账号',
     key: '2',
@@ -66,7 +76,7 @@ export const accountBindList: BindItem[] = [
     title: '支付宝',
   },
   {
-    avatar: 'ri:dingding-fill',
+    avatar: DingdingIcon,
     color: '#2eabff',
     description: '绑定钉钉账号',
     key: '3',
@@ -75,7 +85,7 @@ export const accountBindList: BindItem[] = [
   },
   {
     action: () => handleAuthBinding('gitee'),
-    avatar: 'simple-icons:gitee',
+    avatar: GiteeIcon,
     color: '#c71d23',
     description: '绑定GITEE账号',
     key: '4',
@@ -84,7 +94,7 @@ export const accountBindList: BindItem[] = [
   },
   {
     action: () => handleAuthBinding('github'),
-    avatar: 'uiw:github',
+    avatar: GithubOAuthIcon,
     color: '',
     description: '绑定GITHUB账号',
     key: '5',
diff --git a/apps/web-antd/src/views/_core/profile/components/account-bind.vue b/apps/web-antd/src/views/_core/profile/components/account-bind.vue
index a4a2f1f5..b1172d0c 100644
--- a/apps/web-antd/src/views/_core/profile/components/account-bind.vue
+++ b/apps/web-antd/src/views/_core/profile/components/account-bind.vue
@@ -5,8 +5,6 @@ import type { SocialInfo } from '#/api/system/social/model';
 
 import { computed, onMounted, ref, unref } from 'vue';
 
-import { createIconifyIcon } from '@vben/icons';
-
 import {
   Alert,
   Avatar,
@@ -127,7 +125,7 @@ onMounted(reload);
               <div class="flex w-full items-center gap-4">
                 <div>
                   <component
-                    :is="createIconifyIcon(item.avatar)"
+                    :is="item.avatar"
                     v-if="item.avatar"
                     :style="{ color: item.color }"
                     class="size-[40px]"
diff --git a/packages/icons/package.json b/packages/icons/package.json
index e70a1dc5..f2ebe6ad 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -21,9 +21,13 @@
   },
   "devDependencies": {
     "@iconify/icons-ant-design": "^1.2.7",
+    "@iconify/icons-fa-brands": "^1.2.4",
     "@iconify/icons-flat-color-icons": "^1.2.5",
     "@iconify/icons-la": "^1.2.3",
     "@iconify/icons-logos": "^1.2.36",
+    "@iconify/icons-ri": "^1.2.10",
+    "@iconify/icons-simple-icons": "^1.2.74",
+    "@iconify/icons-uiw": "^1.2.6",
     "@iconify/icons-vscode-icons": "^1.2.29"
   }
 }
diff --git a/packages/icons/src/iconify-offline/index.ts b/packages/icons/src/iconify-offline/index.ts
index 31cbccf4..a0817d1d 100644
--- a/packages/icons/src/iconify-offline/index.ts
+++ b/packages/icons/src/iconify-offline/index.ts
@@ -3,9 +3,14 @@ import { createIconifyOfflineIcon } from '@vben-core/icons';
 import githubOutlined from '@iconify/icons-ant-design/github-outlined';
 import inboxIcon from '@iconify/icons-ant-design/inbox-outlined';
 import userOutlined from '@iconify/icons-ant-design/user-outlined';
+import alipayIcon from '@iconify/icons-fa-brands/alipay';
 import comandLine from '@iconify/icons-flat-color-icons/command-line';
 import memoryIcon from '@iconify/icons-la/memory';
 import redisIcon from '@iconify/icons-logos/redis';
+import dingdingFill from '@iconify/icons-ri/dingding-fill';
+import taobaoIconFill from '@iconify/icons-ri/taobao-fill';
+import giteeIcon from '@iconify/icons-simple-icons/gitee';
+import githubOAuthIcon from '@iconify/icons-uiw/github';
 import excelIcon from '@iconify/icons-vscode-icons/file-type-excel';
 
 // 用户 下拉菜单
@@ -38,3 +43,25 @@ export const InBoxIcon = createIconifyOfflineIcon(
   'ant-design:inbox-outlined',
   inboxIcon,
 );
+
+// 第三方登录相关图标
+export const TaobaoIcon = createIconifyOfflineIcon(
+  'ri:taobao-fill',
+  taobaoIconFill,
+);
+export const AlipayIcon = createIconifyOfflineIcon(
+  'fa-brands:alipay',
+  alipayIcon,
+);
+export const DingdingIcon = createIconifyOfflineIcon(
+  'ri:dingding-fill',
+  dingdingFill,
+);
+export const GiteeIcon = createIconifyOfflineIcon(
+  'simple-icons:gitee',
+  giteeIcon,
+);
+export const GithubOAuthIcon = createIconifyOfflineIcon(
+  'uiw:github',
+  githubOAuthIcon,
+);
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index 989ca89b..1e59ef0b 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -14,6 +14,5 @@ export const MdiQqchat = createIconifyIcon('mdi:qqchat');
 
 export const EosSystem = createIconifyIcon('eos-icons:system-group');
 
-export const GiteeIcon = createIconifyIcon('simple-icons:gitee');
 // 个人中心
 export const ProfileIcon = createIconifyIcon('mingcute:profile-line');