feat(payment): 移动端应用卡片图标改用自定义SVG

- 新增 src/assets/mobile-app/{merchant,admin,cashier}.svg (清理iconfont残留, 自带配色)
- MobileAppConfig.vue: IconifyIcon 单色图标 → <img> 引用 SVG (72px), 文件名与 appType 对齐
- 移除对 img 无效的 theme-color 染色规则, 保留 hover 边框配色
- 卡片入口 setting 图标仍用 IconifyIcon
This commit is contained in:
DaxPay Dev
2026-07-05 12:54:08 +08:00
parent c07e7a3657
commit 4f137e6ac9
4 changed files with 29 additions and 16 deletions

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="200" height="200"><path d="M863.232 0a127.886222 127.886222 0 0 1 127.886222 127.886222v575.488a127.886222 127.886222 0 0 1-127.886222 127.829334H639.431111v127.886222h63.943111a31.971556 31.971556 0 1 1 0 63.943111H319.715556a31.971556 31.971556 0 1 1 0-63.943111h63.943111v-127.886222H127.886222A127.886222 127.886222 0 0 1 0 703.374222V127.886222A127.886222 127.886222 0 0 1 127.886222 0h735.345778z m-287.744 831.203556H447.601778v127.886222h127.886222v-127.886222z m351.687111-191.772445H63.943111v63.943111c0 35.271111 28.615111 63.886222 63.943111 63.886222h735.345778c35.271111 0 63.943111-28.615111 63.943111-63.886222V639.431111zM863.232 63.943111H127.886222c-35.271111 0-63.943111 28.672-63.943111 64v448h863.232V127.943111c0-35.328-28.615111-64-63.943111-64zM550.229333 229.831111l5.461334 3.128889a23.324444 23.324444 0 0 1 8.078222 30.492444L477.127111 424.504889a20.48 20.48 0 0 1-26.567111 9.784889l-2.389333-1.251556h0.056889l-5.518223-3.128889a23.381333 23.381333 0 0 1-8.078222-30.549333l86.641778-160.995556a20.878222 20.878222 0 0 1 28.956444-8.533333z m141.710223 2.446222l1.820444 1.706667 75.093333 80.782222a22.584889 22.584889 0 0 1 6.542223 16.725334 25.144889 25.144889 0 0 1-4.778667 15.246222l-1.706667 2.048-75.150222 80.213333a20.764444 20.764444 0 0 1-29.468444 1.706667l-1.934223-1.877334a24.974222 24.974222 0 0 1-1.479111-31.459555l1.592889-1.934222 59.562667-63.943111-59.562667-63.886223a25.088 25.088 0 0 1 0-33.678222 20.935111 20.935111 0 0 1 29.468445-1.706667z m-373.134223 0l2.048 1.934223a25.031111 25.031111 0 0 1 1.365334 31.516444l-1.592889 1.877333-59.562667 63.886223 59.960889 63.943111a25.031111 25.031111 0 0 1 0 33.564444 20.992 20.992 0 0 1-29.468444 1.706667l-1.820445-1.706667-75.093333-80.213333a26.055111 26.055111 0 0 1-1.706667-32.540445l1.706667-1.991111 74.752-80.327111a20.935111 20.935111 0 0 1 29.411555-1.706667z" fill="#FFB219"></path><path d="M56.376889 625.095111h881.777778v170.666667H56.376889z" fill="#FFB219" opacity=".5"></path></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="200" height="200"><path d="M674 1024H350C157.5 1024 0 866.5 0 674V350C0 157.5 157.5 0 350 0h324c192.5 0 350 157.5 350 350v324c0 192.5-157.5 350-350 350z" fill="#D81E06"></path><path d="M277.1 655.5h469.8c30.4 0 55-24 56.5-53.7v-311c-1.6-30-26.8-53.7-57.2-53.7H277.1c-31.4 0-56.6 25.5-56.6 56.6v305.2c0 31.4 25.5 56.6 56.6 56.6zM407 419.2c-6.1 0-11-4.9-11-11s4.9-11 11-11h92.1l-87.6-82.4c-4.5-3.9-5.2-11-1.3-15.5 3.9-4.5 11-5.2 15.5-1l87.9 82.8 87.9-82.8c4.5-3.9 11.6-3.6 15.5 1 3.9 4.5 3.6 11.6-1.3 15.5l-87.6 82.4h92.1c6.1 0 11 4.9 11 11s-4.8 11-11 11H525v54.3h96c6.1 0 11 4.9 11 11s-4.9 11-11 11h-96V577c0 6.1-4.9 11-11 11s-11-4.9-11-11v-81.1h-96c-6.1 0-11-4.9-11-11s4.9-11 11-11h96v-54.6h-96zM433.9 683.6v47.2h-25.5c-30.4 0-55.6 24.2-56.6 55.3h324.9c-1.3-30.7-26.2-55.3-56.6-55.3h-25.5v-47.2H433.9z" fill="#FFFFFF"></path></svg>

After

Width:  |  Height:  |  Size: 903 B

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="200" height="200"><path d="M64.421449 508.387582c0 247.450611 200.609595 447.939793 447.939793 447.939793 247.450611 0 447.939793-200.609595 447.939793-447.939793 0-247.450611-200.609595-447.939793-447.939793-447.939793-247.450611-0.120414-447.939793 200.489182-447.939793 447.939793z m0 0" fill="#FF6B6B"></path><path d="M696.353716 550.291627a74.993791 74.993791 0 0 1-14.690499 0c-2.167451-0.240828-4.214487-0.481656-6.261524-0.842897-0.481656 0-0.963311-0.120414-1.324553-0.240828-0.963311-0.120414-1.926623-0.481656-2.76952-0.602069l-3.251176-0.722484c-4.334901-1.083725-8.428975 2.287865-8.428975 6.622766v30.585136c0 7.586077-6.14111 13.727187-13.727187 13.727187H378.942615c-7.586077 0-13.727187-6.14111-13.727187-13.727187v-30.585136c0-4.455315-4.214487-7.826905-8.428975-6.622766l-3.251175 0.722484c-0.963311 0.120414-1.806209 0.481656-2.769521 0.602069-0.481656 0.120414-0.842897 0.120414-1.324553 0.240828-2.047037 0.361242-4.094073 0.60207-6.261524 0.842897-2.408278 0.240828-4.816557 0.361242-7.345249 0.361242-2.528692 0-4.936971-0.120414-7.345249-0.361242-3.973659-0.361242-7.345249 2.889934-7.34525 6.863594v135.947319c0 11.800564 9.873942 21.433678 22.035748 21.433678h338.603951c12.161806 0 22.035748-9.5127 22.035748-21.433678V557.155221c-0.120414-3.973659-3.492004-7.224835-7.465663-6.863594zM350.404516 346.430856h323.913452c12.161806 0 22.035748-9.873942 22.035748-22.035748 0-12.161806-9.873942-22.035748-22.035748-22.035748H350.404516c-12.161806 0-22.035748 9.873942-22.035748 22.035748 0 12.161806 9.873942 22.035748 22.035748 22.035748zM733.441204 457.693321L708.033866 394.355597c-6.261524-15.65381-21.433678-25.888993-38.291627-25.888993H354.980245c-16.857949 0-32.030103 10.235183-38.291628 25.888993l-25.407338 63.337724c-3.130762 7.826905-3.853246 16.617121-1.565381 24.805268 6.74318 23.480715 28.417686 40.699906 54.065852 40.699906 24.444026 0 45.155221-15.533396 52.982126-37.328316 1.083725-3.130762 5.418627-3.130762 6.502352 0 7.826905 21.674506 28.5381 37.328316 52.982126 37.328316s45.155221-15.533396 52.982126-37.328316c1.083725-3.130762 5.418627-3.130762 6.502352 0 7.826905 21.674506 28.5381 37.328316 52.982126 37.328316s45.155221-15.533396 52.982126-37.328316c1.083725-3.130762 5.418627-3.130762 6.502352 0 7.826905 21.674506 28.5381 37.328316 52.982126 37.328316 25.648166 0 47.322672-17.219191 54.065851-40.699906 2.047037-8.188147 1.324553-16.978363-1.806209-24.805268z" fill="#FFFFFF"></path></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -9,29 +9,25 @@
const router = useRouter();
// 三种端类型卡片配置(收银台本期灰显)
// 三种端类型卡片配置(收银台本期灰显), 图标文件名与 appType 一致
const cards: {
appType: string;
disabled: boolean;
icon: string;
theme: string;
}[] = [
{
appType: 'merchant',
disabled: false,
icon: 'ant-design:shop-filled',
theme: 'blue',
},
{
appType: 'admin',
disabled: false,
icon: 'ant-design:control-filled',
theme: 'green',
},
{
appType: 'cashier',
disabled: true,
icon: 'ant-design:qrcode-outlined',
theme: 'amber',
},
];
@@ -43,6 +39,20 @@
if (disabled) return;
router.push({ path: `/payment/config/mobile-app/detail/${appType}` });
}
/**
* 获取端图标资源地址(文件名与 appType 一致)
*/
function getLogoSrc(appType: string): string | undefined {
try {
return new URL(
`/src/assets/mobile-app/${appType}.svg`,
import.meta.url,
).href;
} catch {
return undefined;
}
}
</script>
<template>
@@ -71,7 +81,12 @@
</div>
<div class="card-icon">
<IconifyIcon :icon="card.icon" class="text-5xl" />
<img
v-if="getLogoSrc(card.appType)"
:src="getLogoSrc(card.appType)"
:alt="card.appType"
class="card-logo-img"
/>
</div>
<div class="card-name">
@@ -141,16 +156,11 @@
margin-bottom: 16px;
}
.theme-blue .card-icon {
color: hsl(var(--primary));
}
.theme-green .card-icon {
color: hsl(142 71% 45%);
}
.theme-amber .card-icon {
color: hsl(38 92% 50%);
.card-logo-img {
display: block;
width: 72px;
height: 72px;
object-fit: contain;
}
.card-name {