feat: admin 页面 UI 风格统一

[kaplax]

Description

Related Issues

[lingma-agents]

统一 Admin 页面 UI 风格并增强图标支持

变更概述

• UI/UX变更

  • 引入阿里云主题色配置 (aliyunThemeToken.ts)，统一颜色体系和设计风格。
  • 更新 Portal 和 API 产品卡片的样式，采用圆角、阴影和悬停效果提升视觉体验。
  • 在 Portal 开发者列表和发布 API 列表中添加操作按钮图标，提高界面可读性。

• 新功能

  • 新增通用产品图标渲染组件 (ProductIconRenderer.tsx)，支持 URL、Base64 图片及默认 SVG 图标。
  • 添加默认图标 SVG 组件 (index.tsx)，用于无自定义图标时展示。
  • 扩展 API 产品和类别类型定义，增加 icon 字段以支持图标存储。
  • 实现工具函数 (iconUtils.ts) 将新的图标对象结构转换为字符串格式，保证向后兼容。

• 重构

  • 替换原有简单文本链接为带图标的交互元素（如编辑、查看、复制等）。
  • 使用新引入的主题变量和 Tailwind CSS 类名重写部分组件样式。
  • 将图标处理逻辑集中到独立组件和工具函数中，便于维护和复用。

• 配置调整

  • 修改 Tailwind 配置文件，导入并扩展自定义颜色主题。

变更文件

文件路径	变更说明
himarket-web/​himarket-admin/​src/​aliyunThemeToken.​ts	新增阿里云主题色配置文件，包含主色调及其衍生色，并扩展了字体大小和边框半径等基础样式属性。
himarket-web/​himarket-admin/​src/​components/​icons/​ProductIconRenderer.​tsx	创建通用产品图标渲染组件，能够根据传入的图标类型（URL、Base64 或默认）正确显示对应图像。
himarket-web/​himarket-admin/​src/​components/​icons/​index.​tsx	添加默认 SVG 图标组件，供 `ProductIconRenderer` 在未提供有效图标时使用。
himarket-web/​himarket-admin/​src/​components/​portal/​PortalDevelopers.​tsx	更新订阅列表列的操作按钮样式，加入图标并应用主题色相关类名。
himarket-web/​himarket-admin/​src/​components/​portal/​PortalOverview.​tsx	改进 Portal 概览页面布局与样式，包括基本信息卡片、统计数据卡片以及域名链接等元素均使用新设计规范进行重构。
himarket-web/​himarket-admin/​src/​components/​portal/​PortalPublishedApis.​tsx	对已发布 API 表格中的查看按钮进行样式升级，使其具备点击反馈及图标提示功能。
himarket-web/​himarket-admin/​src/​lib/​apis/​typing.​ts	新增多个接口定义，涵盖产品图标、代理配置、模型 API 配置等相关结构；同时补充输入模式定义以便后续拓展。
himarket-web/​himarket-admin/​src/​lib/​iconUtils.​ts	实现一个辅助函数，将新版图标对象转换成旧版字符串格式，确保前后端数据传输的一致性和兼容性。
himarket-web/​himarket-admin/​src/​pages/​ApiProducts.​tsx	在 API 产品页面集成新的图标渲染机制，并全面改写产品卡片样式以匹配整体设计语言。此外还优化了搜索过滤器的行为表现。
himarket-web/​himarket-admin/​src/​pages/​PortalDetail.​tsx	微调 Portal 详情页导航栏和标签切换区域的样式细节，使整体外观更加协调一致。
himarket-web/​himarket-admin/​src/​pages/​Portals.​tsx	重新设计 Portal 卡片组件的外观，通过引入渐变背景、缩放动画和边框高亮等方式增强用户的浏览体验。
himarket-web/​himarket-admin/​src/​pages/​ProductCategories.​tsx	在产品分类页面嵌入全新的图标展示方式，并按照最新设计准则改造每个分类项的呈现形式。
himarket-web/​himarket-admin/​src/​types/​api-product.​ts	扩充 `ApiProduct` 接口定义，新增 `icon` 可选字段用来保存产品的图标信息。
himarket-web/​himarket-admin/​tailwind.​config.​js	修改 Tailwind CSS 配置文件，加载外部定义的颜色变量集，使得项目能直接使用这些预设值来构建统一的视觉风格。

---

💡 小贴士

与 lingma-agents 交流的方式

📜 直接回复评论
直接回复本条评论，lingma-agents 将自动处理您的请求。例如：

• 在当前代码中添加详细的注释说明。

• 请详细介绍一下你说的 LRU 改造方案，并使用伪代码加以说明。

📜 在代码行处标记
在文件的特定位置创建评论并 @lingma-agents。例如：

• @lingma-agents 分析这个方法的性能瓶颈并提供优化建议。

• @lingma-agents 对这个方法生成优化代码。

📜 在讨论中提问
在任何讨论中 @lingma-agents 来获取帮助。例如：

• @lingma-agents 请总结上述讨论并提出解决方案。

• @lingma-agents 请根据讨论内容生成优化代码。

[heimanba]

LGTM