feat: 云账号卡片改用品牌SVG图标替代纯文字色块
- 新建 CloudBrandIcon 组件: AWS/Azure/GCP/阿里云/腾讯云/华为云 官方品牌色+SVG路径 - 图标数据源同 TechIcons.dev / VectorLogo.zone (simple-icons 开源项目) - CloudAccountManager: providerIcons纯文字→CloudBrandIcon SVG品牌图标 - 卡片底部品牌色描边替代满色背景块 - 新增 GCP 到 provider 列表
This commit is contained in:
attacker committed
1 parent
011f3d6b51
commit
8c4b59510d
15 files changed
+94
-12
No files matched your search
@@ -25,21 +25,15 @@ import {
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { cloudApi } from '@/services/api';
|
||||
import { CloudBrandIcon, getProviderColor } from '@/components/icons/CloudBrandIcon';
|
||||
|
||||
const providerIcons: Record<string, string> = {
|
||||
const providerLabels: Record<string, string> = {
|
||||
aws: 'AWS',
|
||||
aliyun: '阿里云',
|
||||
tencent: '腾讯云',
|
||||
huawei: '华为云',
|
||||
azure: 'Azure',
|
||||
};
|
||||
|
||||
const providerColors: Record<string, string> = {
|
||||
aws: 'bg-orange-500',
|
||||
aliyun: 'bg-orange-600',
|
||||
tencent: 'bg-blue-500',
|
||||
huawei: 'bg-red-500',
|
||||
azure: 'bg-blue-600',
|
||||
gcp: 'GCP',
|
||||
};
|
||||
|
||||
export function CloudAccountManager() {
|
||||
@@ -283,12 +277,12 @@ export function CloudAccountManager() {
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg ${providerColors[account.provider] || 'bg-blue-500'} flex items-center justify-center text-white font-bold text-xs`}>
|
||||
{providerIcons[account.provider]?.slice(0, 2) || (account.provider || '').slice(0, 2).toUpperCase()}
|
||||
<div className="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center" style={{ borderBottom: `2px solid ${getProviderColor(account.provider)}` }}>
|
||||
<CloudBrandIcon provider={account.provider} className="h-6 w-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-slate-100">{account.name}</h3>
|
||||
<p className="text-sm text-slate-400 mt-0.5">{providerIcons[account.provider]}</p>
|
||||
<p className="text-sm text-slate-400 mt-0.5">{providerLabels[account.provider] || account.provider}</p>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
{accessKey && (
|
||||
<Badge variant="secondary" className="bg-slate-700 text-slate-300">
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* CloudBrandIcon — 云厂商品牌 SVG 图标
|
||||
* 数据来源: simple-icons (TechIcons.dev / VectorLogo.zone 同源)
|
||||
* 用法: <CloudBrandIcon provider="aws" className="h-5 w-5" />
|
||||
*/
|
||||
|
||||
interface BrandIcon {
|
||||
viewBox: string;
|
||||
path: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const ICONS: Record<string, BrandIcon> = {
|
||||
aws: {
|
||||
viewBox: '0 0 24 24',
|
||||
color: '#FF9900',
|
||||
path: 'M6.763 10.036c0 .296.032.535.088.71.064.176.144.368.256.576.04.063.056.127.056.183 0 .08-.048.16-.152.24l-.503.335a.383.383 0 0 1-.208.072c-.08 0-.16-.04-.24-.112a2.47 2.47 0 0 1-.288-.375 6.18 6.18 0 0 1-.248-.471c-.622.734-1.405 1.101-2.347 1.101-.671 0-1.205-.191-1.596-.574-.391-.384-.59-.894-.59-1.533 0-.678.239-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583c0-.607-.127-1.03-.375-1.277-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103-.295.072-.583.16-.862.272a2.287 2.287 0 0 1-.28.104.488.488 0 0 1-.127.023c-.112 0-.168-.08-.168-.247v-.391c0-.128.016-.224.056-.28a.597.597 0 0 1 .224-.167c.279-.144.614-.264 1.005-.36a4.84 4.84 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647.439.43.662 1.085.662 1.963v2.586zm-3.24 1.21c.265 0 .538-.048.822-.144.283-.096.535-.271.742-.51.128-.152.224-.32.264-.512.04-.191.072-.423.072-.694v-.335a6.66 6.66 0 0 0-.735-.136 6.02 6.02 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.654.295.846.191.2.47.296.838.296zm3.89.527c-.073 0-.12-.016-.152-.048-.032-.024-.064-.08-.088-.152L6.155 5.563a.715.715 0 0 1-.032-.16c0-.128.064-.2.192.2h.703c.08 0 .136.016.168.048.032.024.064.08.088.152l1.348 5.298 1.252-5.298c.024-.08.056-.128.088-.152a.355.355 0 0 1 .176-.048h.575c.08 0 .136.016.176.048.032.024.072.08.088.152l1.268 5.362 1.39-5.362c.024-.08.056-.128.088-.152a.344.344 0 0 1 .168-.048h.67c.128 0 .2.072.2.2 0 .04-.008.072-.016.112 0 0-.04.128-.088.152l-1.916 6.15c-.032.08-.064.128-.096.152a.355.355 0 0 1-.176.048h-.622c-.08 0-.136-.016-.176-.048-.032-.024-.064-.08-.088-.152l-1.26-5.186-1.252 5.178c-.024.08-.056.128-.088.152a.355.355 0 0 1-.176.048h-.623zm9.166.215c-.367 0-.734-.04-1.094-.127-.359-.088-.638-.184-.822-.296-.112-.064-.191-.136-.223-.2a.498.498 0 0 1-.032-.128v-.399c0-.167.064-.247.183-.247a.45.45 0 0 1 .144.024c.048.016.12.048.2.08.271.12.566.215.878.279.319.064.63.096.95.096.502 0 .893-.088 1.164-.264a.86.86 0 0 0 .415-.758.777.777 0 0 0-.215-.55c-.144-.151-.423-.287-.83-.415l-1.188-.367c-.598-.192-1.044-.471-1.316-.838a1.95 1.95 0 0 1-.415-1.205c0-.351.072-.662.215-.918.144-.255.335-.479.575-.654.24-.184.51-.319.822-.415.311-.096.638-.136.982-.136.176 0 .36.008.535.032.184.024.351.056.518.088.152.04.303.08.439.127.136.048.24.096.311.144a.66.66 0 0 1 .176.144.298.298 0 0 1 .048.184v.359c0 .168-.064.256-.183.256a.83.83 0 0 1-.304-.096 3.68 3.68 0 0 0-1.548-.311c-.463 0-.83.072-1.085.231-.255.16-.39.4-.39.743 0 .351.128.59.383.758.255.168.702.335 1.331.48.583.135 1.005.311 1.268.518.263.207.39.495.39.862 0 .367-.128.662-.375.902-.247.247-.67.375-1.26.375zm2.004 1.332c-2.637 1.948-6.488 2.984-9.793 2.984-4.635 0-8.81-1.715-11.966-4.566-.255-.224-.024-.335.271-.144 3.41 1.987 7.622 3.183 11.966 3.183 2.936 0 6.158-.61 9.119-1.876.44-.207.815.287.383.615zm1.078-1.23c-.336-.431-2.223-.2-3.073-.103-.255.024-.295-.192-.064-.351 1.5-1.053 3.962-.75 4.246-.4.287.359-.08 2.824-1.484 4.004-.215.184-.423.088-.319-.151.311-.774 1.005-2.51.662-2.956v-.443z',
|
||||
},
|
||||
azure: {
|
||||
viewBox: '0 0 24 24',
|
||||
color: '#0078D4',
|
||||
path: 'M5.483 21.3H24L14.025 4.013l-3.022 5.915 5.99 9.357H8.787l-3.304 6.015zM8.7 3.197L0 21.3h6.395l4.49-8.51L8.7 3.196z',
|
||||
},
|
||||
gcp: {
|
||||
viewBox: '0 0 24 24',
|
||||
color: '#4285F4',
|
||||
path: 'M12.19 2.38a9.344 9.344 0 0 0-9.234 6.893c.053-.02-.055.013 0 0-3.875 2.551-3.922 8.11-.247 10.941l.006-.007-.007.03a6.717 6.717 0 0 0 4.077 1.356h5.173l.03.03h5.192c6.687.053 9.376-8.605 3.835-12.35a9.365 9.365 0 0 0-2.821-4.552l-.043.043.006-.05A9.344 9.344 0 0 0 12.19 2.38zm-.358 4.146c1.244-.04 2.518.368 3.486 1.15a5.186 5.186 0 0 1 1.862 4.078v.518c3.53-.07 3.53 5.262 0 5.193h-5.193l-.008.009v-.04H6.785a2.59 2.59 0 0 1-1.067-.23h.001a2.597 2.597 0 1 1 3.437-3.437l3.013-3.012A6.747 6.747 0 0 0 8.11 8.24c.018-.01.04-.026.054-.023a5.186 5.186 0 0 1 3.67-1.69z',
|
||||
},
|
||||
aliyun: {
|
||||
viewBox: '0 0 24 24',
|
||||
color: '#FF6A00',
|
||||
path: 'M3.996 4.517h5.291L8.01 6.324 4.153 7.506a1.668 1.668 0 0 0-1.165 1.601v5.786a1.668 1.668 0 0 0 1.165 1.6l3.857 1.183 1.277 1.807H3.996A3.996 3.996 0 0 1 0 15.487V8.513a3.996 3.996 0 0 1 3.996-3.996m16.008 0h-5.291l1.277 1.807 3.857 1.182c.715.227 1.17.889 1.165 1.601v5.786a1.668 1.668 0 0 1-1.165 1.6l-3.857 1.183-1.277 1.807h5.291A3.996 3.996 0 0 0 24 15.487V8.513a3.996 3.996 0 0 0-3.996-3.996m-4.007 8.345H8.002v-1.804h7.995Z',
|
||||
},
|
||||
tencent: {
|
||||
viewBox: '0 0 24 24',
|
||||
color: '#006EFF',
|
||||
path: 'M11.984.142a11.8 11.8 0 0 0-11.79 11.842 11.78 11.78 0 0 0 3.692 8.55l2.001-1.999a8.98 8.98 0 0 1-2.74-6.551 8.99 8.99 0 0 1 8.837-9.034 8.992 8.992 0 1 1-.096 17.983l-3.866 3.86c1.21.189 2.45.285 3.702.285A11.8 11.8 0 0 0 11.984.142zm-.197 7.453a4.402 4.402 0 0 0-4.366 4.405 4.4 4.4 0 0 0 4.4 4.403 4.405 4.405 0 0 0 4.405-4.403 4.406 4.406 0 0 0-4.405-4.405h-.034z',
|
||||
},
|
||||
huawei: {
|
||||
viewBox: '0 0 24 24',
|
||||
color: '#FF0000',
|
||||
path: 'M3.67 6.14S1.82 7.91 1.72 9.78v.35c.08 1.51 1.22 2.4 1.22 2.4 1.83 1.79 6.26 4.04 7.3 4.55 0 0 .06.03.1-.01l.02-.04v-.04C7.52 10.8 3.67 6.14 3.67 6.14zM9.65 18.6c-.02-.08-.1-.08-.1-.08l-7.38.26c.8 1.43 2.15 2.53 3.56 2.2.96-.25 3.16-1.78 3.88-2.3.06-.05.04-.09.04-.09zm.08-.78C6.49 15.63.21 12.28.21 12.28c-.15.46-.2.9-.21 1.3v.07c0 1.07.4 1.82.4 1.82.8 1.69 2.34 2.2 2.34 2.2.7.3 1.4.31 1.4.31.12.02 4.4 0 5.54 0 .05 0 .08-.05.08-.05v-.06c0-.03-.03-.05-.03-.05zM9.06 3.19a3.42 3.42 0 00-2.57 3.15v.41c.03.6.16 1.05.16 1.05.66 2.9 3.86 7.65 4.55 8.65.05.05.1.03.1.03a.1.1 0 00.06-.1c1.06-10.6-1.11-13.42-1.11-13.42-.32.02-1.19.23-1.19.23zm8.299 2.27s-.49-1.8-2.44-2.28c0 0-.57-.14-1.17-.22 0 0-2.18 2.81-1.12 13.43.01.07.06.08.06.08.07.03.1-.03.1-.03.72-1.03 3.9-5.76 4.55-8.64 0 0 .36-1.4.02-2.34zm-2.92 13.07s-.07 0-.09.05c0 0-.01.07.03.1.7.51 2.85 2 3.88 2.3 0 0 .16.05.43.06h.14c.69-.02 1.9-.37 3-2.26l-7.4-.25zm7.83-8.41c.14-2.06-1.94-3.97-1.94-3.98 0 0-3.85 4.66-6.67 10.8 0 0-.03.08.02.13l.04.01h.06c1.06-.53 5.46-2.77 7.28-4.54 0 0 1.15-.93 1.21-2.42zm1.52 2.14s-6.28 3.37-9.52 5.55c0 0-.05.04-.03.11 0 0 .03.06.07.06 1.16 0 5.56 0 5.67-.02 0 0 .57-.02 1.27-.29 0 0 1.56-.5 2.37-2.27 0 0 .73-1.45.17-3.14z',
|
||||
},
|
||||
};
|
||||
|
||||
interface Props {
|
||||
provider: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CloudBrandIcon({ provider, className = 'h-5 w-5' }: Props) {
|
||||
const icon = ICONS[provider] || ICONS.aliyun;
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox={icon.viewBox}
|
||||
fill="currentColor"
|
||||
style={{ color: icon.color }}
|
||||
role="img"
|
||||
aria-label={provider}
|
||||
>
|
||||
<path d={icon.path} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** 返回 provider 对应的品牌色 */
|
||||
export function getProviderColor(provider: string): string {
|
||||
const map: Record<string, string> = {
|
||||
aws: '#FF9900',
|
||||
azure: '#0078D4',
|
||||
gcp: '#4285F4',
|
||||
aliyun: '#FF6A00',
|
||||
tencent: '#006EFF',
|
||||
huawei: '#FF0000',
|
||||
};
|
||||
return map[provider] || '#64748B';
|
||||
}
|
||||
Reference in new issue
Block a user