diff --git a/frontend/src/assets/icons/alibabacloud.svg b/frontend/src/assets/icons/alibabacloud.svg new file mode 100644 index 0000000..c1d8e4f --- /dev/null +++ b/frontend/src/assets/icons/alibabacloud.svg @@ -0,0 +1 @@ +Alibaba Cloud \ No newline at end of file diff --git a/frontend/src/assets/icons/amazonaws.svg b/frontend/src/assets/icons/amazonaws.svg new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/assets/icons/docker.svg b/frontend/src/assets/icons/docker.svg new file mode 100644 index 0000000..e68a661 --- /dev/null +++ b/frontend/src/assets/icons/docker.svg @@ -0,0 +1 @@ +Docker \ No newline at end of file diff --git a/frontend/src/assets/icons/googlecloud.svg b/frontend/src/assets/icons/googlecloud.svg new file mode 100644 index 0000000..9c06957 --- /dev/null +++ b/frontend/src/assets/icons/googlecloud.svg @@ -0,0 +1 @@ +Google Cloud \ No newline at end of file diff --git a/frontend/src/assets/icons/huaweicloud.svg b/frontend/src/assets/icons/huaweicloud.svg new file mode 100644 index 0000000..a239f02 --- /dev/null +++ b/frontend/src/assets/icons/huaweicloud.svg @@ -0,0 +1 @@ +Huawei \ No newline at end of file diff --git a/frontend/src/assets/icons/kafka.svg b/frontend/src/assets/icons/kafka.svg new file mode 100644 index 0000000..dc2b7b8 --- /dev/null +++ b/frontend/src/assets/icons/kafka.svg @@ -0,0 +1 @@ +Apache Kafka \ No newline at end of file diff --git a/frontend/src/assets/icons/kubernetes.svg b/frontend/src/assets/icons/kubernetes.svg new file mode 100644 index 0000000..b2dded3 --- /dev/null +++ b/frontend/src/assets/icons/kubernetes.svg @@ -0,0 +1 @@ +Kubernetes \ No newline at end of file diff --git a/frontend/src/assets/icons/microsoftazure.svg b/frontend/src/assets/icons/microsoftazure.svg new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/assets/icons/mysql.svg b/frontend/src/assets/icons/mysql.svg new file mode 100644 index 0000000..0948dc4 --- /dev/null +++ b/frontend/src/assets/icons/mysql.svg @@ -0,0 +1 @@ +MySQL \ No newline at end of file diff --git a/frontend/src/assets/icons/nginx.svg b/frontend/src/assets/icons/nginx.svg new file mode 100644 index 0000000..e52ea9f --- /dev/null +++ b/frontend/src/assets/icons/nginx.svg @@ -0,0 +1 @@ +NGINX \ No newline at end of file diff --git a/frontend/src/assets/icons/rabbitmq.svg b/frontend/src/assets/icons/rabbitmq.svg new file mode 100644 index 0000000..f8b90f5 --- /dev/null +++ b/frontend/src/assets/icons/rabbitmq.svg @@ -0,0 +1 @@ +RabbitMQ \ No newline at end of file diff --git a/frontend/src/assets/icons/redis.svg b/frontend/src/assets/icons/redis.svg new file mode 100644 index 0000000..61480c9 --- /dev/null +++ b/frontend/src/assets/icons/redis.svg @@ -0,0 +1 @@ +Redis \ No newline at end of file diff --git a/frontend/src/assets/icons/tencentcloud.svg b/frontend/src/assets/icons/tencentcloud.svg new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/cloud/CloudAccountManager.tsx b/frontend/src/components/cloud/CloudAccountManager.tsx index abb472a..75e9bcc 100644 --- a/frontend/src/components/cloud/CloudAccountManager.tsx +++ b/frontend/src/components/cloud/CloudAccountManager.tsx @@ -25,21 +25,15 @@ import { Loader2, } from 'lucide-react'; import { cloudApi } from '@/services/api'; +import { CloudBrandIcon, getProviderColor } from '@/components/icons/CloudBrandIcon'; -const providerIcons: Record = { +const providerLabels: Record = { aws: 'AWS', aliyun: '阿里云', tencent: '腾讯云', huawei: '华为云', azure: 'Azure', -}; - -const providerColors: Record = { - 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() {
-
- {providerIcons[account.provider]?.slice(0, 2) || (account.provider || '').slice(0, 2).toUpperCase()} +
+

{account.name}

-

{providerIcons[account.provider]}

+

{providerLabels[account.provider] || account.provider}

{accessKey && ( diff --git a/frontend/src/components/icons/CloudBrandIcon.tsx b/frontend/src/components/icons/CloudBrandIcon.tsx new file mode 100644 index 0000000..4a9d408 --- /dev/null +++ b/frontend/src/components/icons/CloudBrandIcon.tsx @@ -0,0 +1,78 @@ +/** + * CloudBrandIcon — 云厂商品牌 SVG 图标 + * 数据来源: simple-icons (TechIcons.dev / VectorLogo.zone 同源) + * 用法: + */ + +interface BrandIcon { + viewBox: string; + path: string; + color: string; +} + +const ICONS: Record = { + 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 ( + + + + ); +} + +/** 返回 provider 对应的品牌色 */ +export function getProviderColor(provider: string): string { + const map: Record = { + aws: '#FF9900', + azure: '#0078D4', + gcp: '#4285F4', + aliyun: '#FF6A00', + tencent: '#006EFF', + huawei: '#FF0000', + }; + return map[provider] || '#64748B'; +}