Merge pull request #124 from kaplax/main

feat: admin 页面 UI 风格统一

Author: heimanba

himarket-web/himarket-admin/src/aliyunThemeToken.ts

@@ -1,16 +1,26 @@
-export default  {
-  "colorPrimary": "#0064c8",
-  "colorPrimaryBg": "#F0F7FF",
-  "colorPrimaryBgHover": "#CAE3FD",
-  "colorPrimaryBorder": "#90C0EF",
-  "colorPrimaryBorderHover": "#589ADB",
-  "colorPrimaryHover": "#2A7DD1",
-  "colorPrimaryActive": "#0057AD",
-  "colorPrimaryTextHover": "#2A7DD1",
-  "colorPrimaryText": "#0064c8",
-  "colorPrimaryTextActive": "#0057AD",
+
+export const colors = {
+  "colorPrimary": "#6366F1",
+  "colorPrimaryBg": "#EEF2FF",
+  "colorPrimaryHover": "#E0E7FF",
+  "colorPrimaryBgHover": "#E0E7FF",
+  "colorPrimarySecondary": "#C7D2FE",
+  "colorPrimaryHoverLight": "#EFF4FF",
+  "colorTextSecondaryCustom": "#A3A3A3",
+  "colorPrimaryBorderHover": "#A5B4FC",
+  "subTitle": "#737373",
+  "mainTitle": "#404040"
+}
+
+export default {
+  ...colors,
+  "colorPrimaryBorder": "#C7D2FE",
+  "colorPrimaryActive": "#4F46E5",
+  "colorPrimaryTextHover": "#818CF8",
+  "colorPrimaryText": "#6366F1",
+  "colorPrimaryTextActive": "#4F46E5",
   "fontSize": 12,
-  "borderRadius": 2,
+  "borderRadius": 8,
   "fontSizeSM": 12,
   "lineHeight": 1.5,
   "lineHeightSM": 1.5,

himarket-web/himarket-admin/src/components/icons/ProductIconRenderer.tsx

@@ -0,0 +1,25 @@
+import { DefaultModel } from "./index";
+
+interface ProductIconRendererProps {
+  iconType?: string;
+  className?: string;
+}
+
+/**
+ * 通用的产品图标渲染组件
+ * 支持：URL 图片、Base64 图片、默认图标
+ */
+export function ProductIconRenderer({ iconType, className = "w-4 h-4" }: ProductIconRendererProps) {
+  // 如果是默认图标或空值
+  if (!iconType || iconType === "default") {
+    return <DefaultModel className={className} />;
+  }
+
+  // 如果是 URL 或 base64 图片
+  if (iconType.startsWith('http') || iconType.startsWith('data:image')) {
+    return <img src={iconType} alt="icon" className={`${className} object-cover rounded`} />;
+  }
+
+  // 其他情况使用默认图标
+  return <DefaultModel className={className} />;
+}

himarket-web/himarket-admin/src/components/icons/index.tsx

@@ -0,0 +1,21 @@
+export const DefaultModel = ({ className = "" }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      fill="none"
+      version="1.1"
+      viewBox="0 0 32 32"
+      className={className}
+    >
+      <defs><clipPath id="master_svg0_97_16530"><rect x="0" y="0" width="32" height="32" rx="0" /></clipPath></defs>
+      <g clipPath="url(#master_svg0_97_16530)">
+        <g><path d="M28,10.666459453125C27.999,9.714729453124999,27.4909,8.835649453125,26.6667,8.359789453125L17.3333,3.026455453125C16.5083,2.550101453125,15.4917,2.550101453125,14.6667,3.026455453125L5.33333,8.359789453125C4.5091090000000005,8.835649453125,4.000975927,9.714729453124999,4,10.666459453125L4,21.333089453125C4.000976562,22.284889453125,4.5091090000000005,23.163889453125,5.33333,23.639789453125L14.6667,28.973089453125C15.4917,29.449489453125,16.5083,29.449489453125,17.3333,28.973089453125L26.6667,23.639789453125C27.4909,23.163889453125,27.999,22.284889453125,28,21.333089453125L28,10.666459453125Z" fill="#EFF2F8" fillOpacity="1" /></g>
+        <g><path d="M16,22.999926567077637C15.999,22.048226567077634,16.824199999999998,17.475796567077637,16,16.999926567077637L15.5,15.499926567077637C14.6749,15.023576567077637,8.5,11.499926567077637,7.5,10.666546567077637L5,9.500045776077636C4.175776,9.975911567077636,4.000975927,9.714725567077636,4,10.666456567077637L4,21.333126567077635C4.000976562,22.284826567077637,4.5091090000000005,23.163926567077638,5.33333,23.639826567077638L14.6667,28.973126567077635C15.4917,29.449526567077637,15.1749,29.449426567077637,16,28.973026567077635L16,27.499926567077637C16,26.499926567077637,15.999,25.951626567077636,16,24.999926567077637L16,22.999926567077637Z" fill="#FFFFFF" fillOpacity="1" /></g>
+        <g><path d="M26.9147,24.073889453125Q28.4981,23.159789453125,28.5,21.333589453125L28.5,10.666459453125Q28.4981,8.839829453124999,26.9167,7.926779453125L17.581400000000002,2.592333653125Q16,1.679303453125,14.4167,2.593442553125L5.08526,7.925669453125Q3.501873,8.839829453124999,3.5,10.665939453124999L3.5,21.333089453125Q3.501874,23.159789453125,5.08333,24.072789453125L14.4186,29.407289453125Q16,30.320289453125,17.5833,29.406089453125L26.9147,24.073889453125ZM27.5,21.332589453125L27.5,21.333089453125Q27.4985,22.582189453125,26.4186,23.205689453125L17.0833,28.540089453125Q16,29.165589453125,14.9147,28.538989453125L5.58333,23.206789453125Q4.501282,22.582089453125,4.5,21.333089453125L4.5,10.666969453124999Q4.501281,9.417519453125,5.5814,8.793909453125L14.9167,3.459467453125Q16,2.834004453125,17.0853,3.460576453125L26.4167,8.792799453125Q27.4987,9.417519453125,27.5,10.666459453125L27.5,21.332589453125Z" fillRule="evenodd" fill="#E2E5EB" fillOpacity="1" /></g>
+        <g><path d="M4.6492977111816405,8.899835953125L15.99999771118164,15.423231953125L27.350597711181642,8.899902953125L27.35089771118164,8.899744953125Q27.46659771118164,8.833251953125,27.59999771118164,8.833251953125Q27.64919771118164,8.833251953125,27.69749771118164,8.842858953125Q27.74579771118164,8.852466953124999,27.79129771118164,8.871311953125Q27.836797711181642,8.890157953125,27.87779771118164,8.917516953125Q27.91869771118164,8.944876953125,27.95359771118164,8.979698953125Q27.98839771118164,9.014520953125,28.01569771118164,9.055466953125Q28.04309771118164,9.096412953125,28.06189771118164,9.141909953125Q28.080797711181642,9.187406953125,28.09039771118164,9.235706853125Q28.09999771118164,9.284006253125,28.09999771118164,9.333251953125Q28.09999771118164,9.399203953125,28.08289771118164,9.462899953125Q28.06579771118164,9.526596953125,28.03279771118164,9.583679953125Q27.99969771118164,9.640763953125,27.95299771118164,9.687328953125Q27.90629771118164,9.733894953125,27.849097711181642,9.766757953125L16.24909771118164,16.433421953125Q16.192297711181638,16.466101953125,16.12889771118164,16.483011953125Q16.06559771118164,16.499921953125,15.99999771118164,16.499921953125Q15.93439771118164,16.499921953125,15.87109771118164,16.483011953125Q15.80769771118164,16.466101953125,15.75089771118164,16.433421953125L4.151014711181641,9.766849953125L4.150855711181641,9.766758953125Q4.093674711181641,9.733895953125,4.0469697111816405,9.687329953125Q4.00026571118164,9.640763953125,3.967232711181641,9.583680953125Q3.9341997111816407,9.526596953125,3.9170987111816404,9.462900953125Q3.8999977111816406,9.399204153125,3.8999977111816406,9.333251953125Q3.8999977111816406,9.284006253125,3.9096047111816405,9.235706853125Q3.9192127111816406,9.187406953125,3.9380577111816404,9.141909953125Q3.9569037111816407,9.096412953125,3.9842627111816404,9.055466953125Q4.011622711181641,9.014520953125,4.046444711181641,8.979698953125Q4.081266711181641,8.944876953125,4.122212711181641,8.917516953125Q4.163158711181641,8.890157953125,4.208655711181641,8.871311953125Q4.254152711181641,8.852466953124999,4.302452611181641,8.842858953125Q4.3507520111816405,8.833251953125,4.399997711181641,8.833251953125Q4.5334417111816405,8.833251953125,4.649139711181641,8.899744953125L4.6492977111816405,8.899835953125Z" fillRule="evenodd" fill="#E2E5EB" fillOpacity="1" /></g>
+        <g><path d="M15.5,16Q15.5,15.9507543,15.509607,15.9024549Q15.519214999999999,15.854155,15.53806,15.808658Q15.556906,15.763161,15.584265,15.722215Q15.611625,15.681269,15.646447,15.646447Q15.681269,15.611625,15.722215,15.584265Q15.763161,15.556906,15.808658,15.53806Q15.854155,15.519214999999999,15.9024549,15.509607Q15.9507543,15.5,16,15.5Q16.0492457,15.5,16.0975451,15.509607Q16.145845,15.519214999999999,16.191342,15.53806Q16.236839,15.556906,16.277785,15.584265Q16.318731,15.611625,16.353553,15.646447Q16.388375,15.681269,16.415735,15.722215Q16.443094,15.763161,16.46194,15.808658Q16.480785,15.854155,16.490393,15.9024549Q16.5,15.9507543,16.5,16L16.5,29.3333Q16.5,29.3826,16.490393,29.4309Q16.480785,29.4792,16.46194,29.5247Q16.443094,29.5702,16.415735,29.6111Q16.388375,29.6521,16.353553,29.6869Q16.318731,29.7217,16.277785,29.7491Q16.236839,29.776400000000002,16.191342,29.795299999999997Q16.145845,29.8141,16.0975451,29.823700000000002Q16.0492457,29.8333,16,29.8333Q15.9507543,29.8333,15.9024549,29.823700000000002Q15.854155,29.8141,15.808658,29.795299999999997Q15.763161,29.776400000000002,15.722215,29.7491Q15.681269,29.7217,15.646447,29.6869Q15.611625,29.6521,15.584265,29.6111Q15.556906,29.5702,15.53806,29.5247Q15.519214999999999,29.4792,15.509607,29.4309Q15.5,29.3826,15.5,29.3333L15.5,16Z" fillRule="evenodd" fill="#E2E5EB" fillOpacity="1" /></g>
+      </g>
+    </svg>
+  )
+}

himarket-web/himarket-admin/src/components/portal/PortalDevelopers.tsx

@@ -284,13 +284,13 @@ export function PortalDevelopers({portal}: PortalDevelopersProps) {
             key: 'action',
             width: 120,
             render: (_: any, record: Consumer) => (
-                <Button
+                <div
+                  className='text-colorPrimary/80 text-colorPrimary flex items-center gap-2'
                     onClick={() => handleViewSubscriptions(record)}
-                    type="link"
-                    icon={<UnorderedListOutlined/>}
                 >
+                  <UnorderedListOutlined/>
                     订阅列表
-                </Button>
+                </div>
             ),
         },
     ]
@@ -358,4 +358,4 @@ export function PortalDevelopers({portal}: PortalDevelopersProps) {
 
         </div>
     )
-} 
+}

himarket-web/himarket-admin/src/components/portal/PortalOverview.tsx

@@ -26,7 +26,7 @@ export function PortalOverview({portal, onEdit}: PortalOverviewProps) {
 
     useEffect(() => {
         if (!portal.portalId) return;
-        
+
         portalApi.getDeveloperList(portal.portalId, {
             page: 1,
             size: 10
@@ -51,13 +51,13 @@ export function PortalOverview({portal, onEdit}: PortalOverviewProps) {
             </div>
 
             {/* 基本信息 */}
-            <Card 
+            <Card
                 title="基本信息"
                 extra={
                     onEdit && (
-                        <Button 
-                            type="primary" 
-                            icon={<EditOutlined />} 
+                        <Button
+                            type="primary"
+                            icon={<EditOutlined />}
                             onClick={onEdit}
                         >
                             编辑
@@ -72,8 +72,8 @@ export function PortalOverview({portal, onEdit}: PortalOverviewProps) {
                         <span className="text-xs text-gray-600">Portal ID:</span>
                         <div className="col-span-2 flex items-center gap-2">
                             <span className="text-xs text-gray-700">{portal.portalId}</span>
-                            <CopyOutlined 
-                                className="text-gray-400 hover:text-blue-600 cursor-pointer transition-colors ml-1" 
+                            <CopyOutlined
+                                className="text-gray-400 hover:text-colorPrimary cursor-pointer transition-colors ml-1"
                                 style={{ fontSize: '12px' }}
                                 onClick={async () => {
                                     try {
@@ -86,16 +86,16 @@ export function PortalOverview({portal, onEdit}: PortalOverviewProps) {
                             />
                         </div>
                     </div>
-                    
+
                     <div className="grid grid-cols-6 gap-8 items-center pt-2 pb-2">
                         <span className="text-xs text-gray-600">域名:</span>
                         <div className="col-span-2 flex items-center gap-2">
-                            <LinkOutlined className="text-blue-500" />
-                            <a 
-                                href={`http://${portal.portalDomainConfig?.[portal.portalDomainConfig.length - 1]?.domain}`} 
+                            <LinkOutlined className="text-colorPrimary" />
+                            <a
+                                href={`http://${portal.portalDomainConfig?.[portal.portalDomainConfig.length - 1]?.domain}`}
                                 target="_blank"
-                                rel="noopener noreferrer" 
-                                className="text-xs text-blue-600 hover:underline"
+                                rel="noopener noreferrer"
+                                className="text-xs text-colorPrimary hover:underline"
                             >
                                 {portal.portalDomainConfig?.[portal.portalDomainConfig.length - 1]?.domain}
                             </a>
@@ -112,7 +112,7 @@ export function PortalOverview({portal, onEdit}: PortalOverviewProps) {
                             </span>
                         </div>
                     </div>
-                    
+
                     <div className="grid grid-cols-6 gap-8 items-center pt-2 pb-2">
                         <span className="text-xs text-gray-600">开发者自动审批:</span>
                         <div className="col-span-2 flex items-center">
@@ -150,36 +150,38 @@ export function PortalOverview({portal, onEdit}: PortalOverviewProps) {
             {/* 统计数据 */}
             <Row gutter={[16, 16]}>
                 <Col xs={24} sm={12} lg={12}>
-                    <Card 
+                    <Card
                         className="cursor-pointer hover:shadow-md transition-shadow"
                         onClick={() => {
                             navigate(`/portals/detail?id=${portal.portalId}&tab=developers`)
                         }}
                     >
-                        <Statistic
-                            title="注册开发者"
-                            value={developerCount}
-                            prefix={<UserOutlined className="text-blue-500" />}
-                            valueStyle={{ color: '#1677ff', fontSize: '24px' }}
-                        />
+                      <div className='flex flex-col gap-2 text-subTitle'>
+                        <div>注册开发者</div>
+                        <div className='flex items-center gap-2'>
+                          <UserOutlined className="text-xl text-colorPrimary" />
+                          <div className='text-colorPrimary text-2xl'>{developerCount}</div>
+                        </div>
+                      </div>
                     </Card>
                 </Col>
                 <Col xs={24} sm={12} lg={12}>
-                    <Card 
+                    <Card
                         className="cursor-pointer hover:shadow-md transition-shadow"
                         onClick={() => {
                             navigate(`/portals/detail?id=${portal.portalId}&tab=published-apis`)
                         }}
                     >
-                        <Statistic
-                            title="已发布的API"
-                            value={apiCount}
-                            prefix={<ApiOutlined className="text-blue-500" />}
-                            valueStyle={{ color: '#1677ff', fontSize: '24px' }}
-                        />
+                      <div className='flex flex-col gap-2 text-subTitle'>
+                        <div>已发布的API</div>
+                        <div className='flex items-center gap-2'>
+                          <ApiOutlined className="text-xl text-colorPrimary" />
+                          <div className='text-colorPrimary text-2xl'>{apiCount}</div>
+                        </div>
+                      </div>
                     </Card>
                 </Col>
             </Row>
         </div>
     )
-} 
+}

himarket-web/himarket-admin/src/components/portal/PortalPublishedApis.tsx

@@ -18,12 +18,12 @@ export function PortalPublishedApis({ portal }: PortalApiProductsProps) {
   const [selectedApiIds, setSelectedApiIds] = useState<string[]>([])
   const [loading, setLoading] = useState(false)
   const [modalLoading, setModalLoading] = useState(false)
-  
+
   // 分页状态
   const [currentPage, setCurrentPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
   const [total, setTotal] = useState(0)
-  
+
   useEffect(() => {
     if (portal.portalId) {
       fetchApiProducts()
@@ -53,7 +53,7 @@ export function PortalPublishedApis({ portal }: PortalApiProductsProps) {
         status: 'READY'
       }).then((res) => {
         // 过滤掉已发布在该门户里的api
-        setApiProductsOptions(res.data.content.filter((api: ApiProduct) => 
+        setApiProductsOptions(res.data.content.filter((api: ApiProduct) =>
           !apiProducts.some((a: ApiProduct) => a.productId === api.productId)
         ))
       }).finally(() => {
@@ -105,14 +105,16 @@ export function PortalPublishedApis({ portal }: PortalApiProductsProps) {
       width: 180,
       render: (_: any, record: ApiProduct) => (
         <Space size="middle">
-          <Button
+          <div
             onClick={() => {
               navigate(`/api-products/detail?productId=${record.productId}`)
             }}
-            type="link" icon={<EyeOutlined />}>
+            className='flex gap-2 text-colorPrimary/80 cursor-pointer hover:text-colorPrimary'
+          >
+            <EyeOutlined />
             查看
-          </Button>
-          
+          </div>
+
           <Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.productId, record.name)}>
             移除
           </Button>
@@ -214,8 +216,8 @@ export function PortalPublishedApis({ portal }: PortalApiProductsProps) {
       </div>
 
       <Card>
-        <Table 
-          columns={columns} 
+        <Table
+          columns={columns}
           dataSource={apiProducts}
           rowKey="productId"
           loading={loading}
@@ -272,4 +274,4 @@ export function PortalPublishedApis({ portal }: PortalApiProductsProps) {
       </Modal>
     </div>
   )
-} 
+}