refactor(icons): 迁移部分图标到 @ant-design/icons-vue 并移除未使用的离线图标

移除 @vben/icons 中的 UserOutlined、InBoxIcon、ExcelIcon 等图标,改用 @ant-design/icons-vue 提供的对应组件。
删除 packages/icons 中未使用的离线图标定义,包括 TaobaoIcon、AlipayIcon、GithubOAuthIcon 等。
在 apps/web-antd/src/views/_core/ 新增 oauth-common.tsx 文件,集中管理 OAuth 绑定相关逻辑与数据。
This commit is contained in:
dap
2026-01-23 10:42:52 +08:00
parent 46fa96f556
commit 948dc9b520
6 changed files with 24 additions and 51 deletions

View File

@@ -10,7 +10,6 @@ import {
CircleHelp, CircleHelp,
GiteeIcon, GiteeIcon,
GitHubOutlined, GitHubOutlined,
UserOutlined,
} from '@vben/icons'; } from '@vben/icons';
import { import {
BasicLayout, BasicLayout,
@@ -22,6 +21,8 @@ import { preferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores'; import { useAccessStore, useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils'; import { openWindow } from '@vben/utils';
import { UserOutlined } from '@ant-design/icons-vue';
import { TenantToggle } from '#/components/tenant-toggle'; import { TenantToggle } from '#/components/tenant-toggle';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { resetRoutes } from '#/router'; import { resetRoutes } from '#/router';

View File

@@ -1,15 +1,10 @@
import type { Component, CSSProperties } from 'vue'; import type { Component, CSSProperties } from 'vue';
import { markRaw, ref } from 'vue'; import { ref } from 'vue';
import { DEFAULT_TENANT_ID } from '@vben/constants'; import { DEFAULT_TENANT_ID } from '@vben/constants';
import { import { VbenIcon } from '@vben/icons';
GiteeIcon, import { cn } from '@vben/utils';
GithubOAuthIcon,
SvgMaxKeyIcon,
SvgTopiamIcon,
SvgWechatIcon,
} from '@vben/icons';
import { createGlobalState } from '@vueuse/core'; import { createGlobalState } from '@vueuse/core';
@@ -69,32 +64,38 @@ export async function handleAuthBinding(source: string) {
*/ */
export const accountBindList: BindItem[] = [ export const accountBindList: BindItem[] = [
{ {
avatar: markRaw(GiteeIcon), avatar: (
<span
class={cn('icon-[simple-icons--gitee]', 'size-6')}
style={{ color: '#c71d23' }}
/>
),
description: '绑定Gitee账号', description: '绑定Gitee账号',
source: 'gitee', source: 'gitee',
title: 'Gitee', title: 'Gitee',
style: { color: '#c71d23' },
}, },
{ {
avatar: markRaw(GithubOAuthIcon), avatar: (
<span class={cn('icon-[fa--github-alt]', 'text-[#333]', 'size-6')} />
),
description: '绑定Github账号', description: '绑定Github账号',
source: 'github', source: 'github',
title: 'Github', title: 'Github',
}, },
{ {
avatar: markRaw(SvgMaxKeyIcon), avatar: <VbenIcon icon={'svg:max-key'} />,
description: '绑定MaxKey账号', description: '绑定MaxKey账号',
source: 'maxkey', source: 'maxkey',
title: 'MaxKey', title: 'MaxKey',
}, },
{ {
avatar: markRaw(SvgTopiamIcon), avatar: <VbenIcon icon={'svg:topiam'} />,
description: '绑定topiam账号', description: '绑定topiam账号',
source: 'topiam', source: 'topiam',
title: 'Topiam', title: 'Topiam',
}, },
{ {
avatar: markRaw(SvgWechatIcon), avatar: <VbenIcon icon={'svg:wechat'} />,
description: '绑定wechat账号', description: '绑定wechat账号',
source: 'wechat', source: 'wechat',
title: 'Wechat', title: 'Wechat',

View File

@@ -4,8 +4,8 @@ import type { UploadFile } from 'antdv-next';
import { h, ref, unref } from 'vue'; import { h, ref, unref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { ExcelIcon, InBoxIcon } from '@vben/icons';
import { InboxOutlined } from '@ant-design/icons-vue';
import { Switch, Upload } from 'antdv-next'; import { Switch, Upload } from 'antdv-next';
import { downloadImportTemplate, userImportData } from '#/api/system/user'; import { downloadImportTemplate, userImportData } from '#/api/system/user';
@@ -80,7 +80,7 @@ function handleCancel() {
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
> >
<p class="ant-upload-drag-icon flex items-center justify-center"> <p class="ant-upload-drag-icon flex items-center justify-center">
<InBoxIcon class="size-[48px] text-primary" /> <InboxOutlined class="size-[48px] text-primary" />
</p> </p>
<p class="ant-upload-text">点击或者拖拽到此处上传文件</p> <p class="ant-upload-text">点击或者拖拽到此处上传文件</p>
</UploadDragger> </UploadDragger>
@@ -92,7 +92,7 @@ function handleCancel() {
@click="commonDownloadExcel(downloadImportTemplate, '用户导入模板')" @click="commonDownloadExcel(downloadImportTemplate, '用户导入模板')"
> >
<div class="flex items-center gap-[4px]"> <div class="flex items-center gap-[4px]">
<ExcelIcon /> <span class="icon-[vscode-icons--file-type-excel]"></span>
<span>下载模板</span> <span>下载模板</span>
</div> </div>
</a-button> </a-button>

View File

@@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { UploadFile } from 'antdv-next/es/upload/interface'; import type { UploadFile } from 'antdv-next';
import { ref } from 'vue'; import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { InBoxIcon } from '@vben/icons';
import { InboxOutlined } from '@ant-design/icons-vue';
import { Upload } from 'antdv-next'; import { Upload } from 'antdv-next';
import { workflowDefinitionImport } from '#/api/workflow/definition'; import { workflowDefinitionImport } from '#/api/workflow/definition';
@@ -65,7 +65,7 @@ function handleCancel() {
accept="application/json" accept="application/json"
> >
<p class="ant-upload-drag-icon flex items-center justify-center"> <p class="ant-upload-drag-icon flex items-center justify-center">
<InBoxIcon class="text-primary size-[48px]" /> <InboxOutlined class="size-[48px] text-primary" />
</p> </p>
<p class="ant-upload-text">点击或者拖拽到此处上传[json]文件</p> <p class="ant-upload-text">点击或者拖拽到此处上传[json]文件</p>
</UploadDragger> </UploadDragger>

View File

@@ -1,7 +1,7 @@
export { default as AuthenticationCodeLogin } from './code-login.vue'; export { default as AuthenticationCodeLogin } from './code-login.vue';
export { default as AuthenticationForgetPassword } from './forget-password.vue'; export { default as AuthenticationForgetPassword } from './forget-password.vue';
export { default as AuthenticationLogin } from './login.vue';
export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue'; export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
export { default as AuthenticationLogin } from './login.vue';
export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue'; export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
export { default as AuthenticationRegister } from './register.vue'; export { default as AuthenticationRegister } from './register.vue';
export type { export type {

View File

@@ -1,14 +1,12 @@
import { createIconifyOfflineIcon } from '@vben-core/icons'; import { createIconifyOfflineIcon } from '@vben-core/icons';
import githubOutlined from '@iconify/icons-ant-design/github-outlined'; 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 userOutlined from '@iconify/icons-ant-design/user-outlined';
import ucIcon from '@iconify/icons-arcticons/uc-browser'; import ucIcon from '@iconify/icons-arcticons/uc-browser';
import defaultFileIcon from '@iconify/icons-bx/file'; import defaultFileIcon from '@iconify/icons-bx/file';
import sqlIcon from '@iconify/icons-carbon/sql'; import sqlIcon from '@iconify/icons-carbon/sql';
import linuxIcon from '@iconify/icons-devicon/linux'; import linuxIcon from '@iconify/icons-devicon/linux';
import windowsIcon from '@iconify/icons-devicon/windows8'; import windowsIcon from '@iconify/icons-devicon/windows8';
import alipayIcon from '@iconify/icons-fa-brands/alipay';
import androidIcon from '@iconify/icons-flat-color-icons/android-os'; import androidIcon from '@iconify/icons-flat-color-icons/android-os';
import folderIcon from '@iconify/icons-flat-color-icons/folder'; import folderIcon from '@iconify/icons-flat-color-icons/folder';
import defaultOsIcon from '@iconify/icons-ic/outline-computer'; import defaultOsIcon from '@iconify/icons-ic/outline-computer';
@@ -27,14 +25,11 @@ import defaultBrowserIcon from '@iconify/icons-ph/browser-duotone';
import baiduIcon from '@iconify/icons-ri/baidu-fill'; import baiduIcon from '@iconify/icons-ri/baidu-fill';
import dingdingFill from '@iconify/icons-ri/dingding-fill'; import dingdingFill from '@iconify/icons-ri/dingding-fill';
import dingtalkIcon from '@iconify/icons-ri/dingding-line'; import dingtalkIcon from '@iconify/icons-ri/dingding-line';
import taobaoIconFill from '@iconify/icons-ri/taobao-fill';
import giteeIcon from '@iconify/icons-simple-icons/gitee'; import giteeIcon from '@iconify/icons-simple-icons/gitee';
import qqIcon from '@iconify/icons-simple-icons/tencentqq'; import qqIcon from '@iconify/icons-simple-icons/tencentqq';
import javaIcon from '@iconify/icons-skill-icons/java-light'; import javaIcon from '@iconify/icons-skill-icons/java-light';
import tsIcon from '@iconify/icons-skill-icons/typescript'; import tsIcon from '@iconify/icons-skill-icons/typescript';
import xmlIcon from '@iconify/icons-tabler/file-type-xml'; import xmlIcon from '@iconify/icons-tabler/file-type-xml';
import githubOAuthIcon from '@iconify/icons-uiw/github';
import excelIcon from '@iconify/icons-vscode-icons/file-type-excel';
import osxIcon from '@iconify/icons-wpf/macos'; import osxIcon from '@iconify/icons-wpf/macos';
import './menu-icons'; import './menu-icons';
@@ -50,27 +45,7 @@ export const UserOutlined = createIconifyOfflineIcon(
userOutlined, userOutlined,
); );
// 用户管理 导入
// Excel图标
export const ExcelIcon = createIconifyOfflineIcon(
'vscode-icons:file-type-excel',
excelIcon,
);
// 拖拽上传图标
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( export const DingdingIcon = createIconifyOfflineIcon(
'ri:dingding-fill', 'ri:dingding-fill',
dingdingFill, dingdingFill,
@@ -79,10 +54,6 @@ export const GiteeIcon = createIconifyOfflineIcon(
'simple-icons:gitee', 'simple-icons:gitee',
giteeIcon, giteeIcon,
); );
export const GithubOAuthIcon = createIconifyOfflineIcon(
'uiw:github',
githubOAuthIcon,
);
// 系统相关图标 // 系统相关图标
export const WindowsIcon = createIconifyOfflineIcon( export const WindowsIcon = createIconifyOfflineIcon(