优化后台UI与开放文档排版设计

frontend/src/pages/MerchantCenter.tsx

@@ -1096,11 +1096,31 @@ function moneyWithSign(value?: number | null) {
 }
 
 function productStatusTag(value: string) {
-  return value === 'active' ? <Tag color="green">上架</Tag> : <Tag>下架</Tag>
+  return value === 'active' ? (
+    <span className="status-tag status-tag--green">
+      <span className="status-dot"></span>
+      已上架
+    </span>
+  ) : (
+    <span className="status-tag status-tag--gray">
+      <span className="status-dot"></span>
+      已下架
+    </span>
+  )
 }
 
 function activeStatusTag(value: string) {
-  return value === 'active' ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>
+  return value === 'active' ? (
+    <span className="status-tag status-tag--green">
+      <span className="status-dot"></span>
+      已启用
+    </span>
+  ) : (
+    <span className="status-tag status-tag--gray">
+      <span className="status-dot"></span>
+      已禁用
+    </span>
+  )
 }
 
 function productOptionLabel(item: MerchantProduct) {
@@ -1110,7 +1130,20 @@ function productOptionLabel(item: MerchantProduct) {
 
 function orderStatusTag(value: string) {
   const item = orderStatusMap[value] || { color: 'default', text: value }
-	return <Tag color={item.color}>{item.text}</Tag>
+  const tagClassMap: Record<string, string> = {
+    paid: 'status-tag--blue',
+    delivering: 'status-tag--cyan',
+    delivered: 'status-tag--green',
+    ship_failed: 'status-tag--red',
+    cancelled: 'status-tag--gray',
+  }
+  const tagClass = tagClassMap[value] || 'status-tag--gray'
+  return (
+    <span className={`status-tag ${tagClass}`}>
+      <span className="status-dot"></span>
+      {item.text}
+    </span>
+  )
 }
 
 function ledgerTypeTag(value: string) {