feat: 页面优化

src/defines/admin.ts

@@ -9,9 +9,12 @@ export const MEMBER_TYPE_OPTIONS = [
   { label: '成员', value: 'MEMBER' },
 ];
 
+export const STATUS_ENABLED = 1;
+export const STATUS_DISABLED = 2;
+
 export const STATUS_OPTIONS = [
-  { label: '启用', value: 1 },
-  { label: '禁用', value: 2 },
+  { label: '启用', value: STATUS_ENABLED },
+  { label: '禁用', value: STATUS_DISABLED },
 ];
 
 export const MEMBER_TYPE_LABELS: Record<string, string> = {
@@ -21,7 +24,7 @@ export const MEMBER_TYPE_LABELS: Record<string, string> = {
 };
 
 export const MEMBER_TYPE_COLORS: Record<string, string> = {
-  ADMIN: 'red',
+  ADMIN: 'orange',
   DEVELOPER: 'green',
   MEMBER: 'blue',
 };

src/pages/Admin/Product/Detail/index.tsx

@@ -1,3 +1,4 @@
+import { STATUS_ENABLED } from '@/defines';
 import { fetchProductDetail } from '@/services/product';
 import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { useLocation, useNavigate, useParams } from '@umijs/max';
@@ -39,8 +40,8 @@ export default function ProductDetailPage() {
         title={
           <div className="flex items-center gap-1">
             {product?.name}
-            <Tag color={product?.status === 1 ? 'success' : 'default'} className="ml-2">
-              {product?.status === 1 ? '启用' : '禁用'}
+            <Tag color={product?.status === STATUS_ENABLED ? 'success' : 'error'} className="ml-2">
+              {product?.status === STATUS_ENABLED ? '启用' : '禁用'}
             </Tag>
           </div>
         }

src/pages/Admin/Product/Detail/tabs/MemberTab.tsx

@@ -2,6 +2,7 @@ import {
   MEMBER_TYPE_COLORS,
   MEMBER_TYPE_LABELS,
   MEMBER_TYPE_OPTIONS,
+  STATUS_ENABLED,
   STATUS_OPTIONS,
 } from '@/defines';
 import { BindRolesDrawer } from '@/pages/Admin/_shared/BindRolesDrawer';
@@ -118,7 +119,9 @@ export const MemberTab = ({ productCode, roleRefreshKey }: MemberTabProps) => {
       dataIndex: 'status',
       width: 80,
       render: (_, r) => (
-        <Tag color={r.status === 1 ? 'success' : 'default'}>{r.status === 1 ? '启用' : '禁用'}</Tag>
+        <Tag color={r.status === STATUS_ENABLED ? 'success' : 'error'}>
+          {r.status === STATUS_ENABLED ? '启用' : '禁用'}
+        </Tag>
       ),
     },
     {

src/pages/Admin/Product/Detail/tabs/RoleTab.tsx

@@ -1,4 +1,4 @@
-import { STATUS_OPTIONS } from '@/defines';
+import { STATUS_ENABLED, STATUS_OPTIONS } from '@/defines';
 import { fetchCreateRole, fetchDeleteRole, fetchRoleList, fetchUpdateRole } from '@/services/role';
 import {
   ActionType,
@@ -100,7 +100,9 @@ export const RoleTab = ({ productCode, onRoleChange }: RoleTabProps) => {
       dataIndex: 'status',
       width: 80,
       render: (_, r) => (
-        <Tag color={r.status === 1 ? 'success' : 'default'}>{r.status === 1 ? '启用' : '禁用'}</Tag>
+        <Tag color={r.status === STATUS_ENABLED ? 'success' : 'error'}>
+          {r.status === STATUS_ENABLED ? '启用' : '禁用'}
+        </Tag>
       ),
     },
     {

src/pages/Admin/Product/index.tsx

@@ -1,4 +1,6 @@
+import { STATUS_DISABLED, STATUS_ENABLED } from '@/defines';
 import { fetchInitialCredentials, fetchProductList, fetchUpdateProduct } from '@/services/product';
+import { unixTimeFormat } from '@/utils/timeUtils';
 import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
 import { useIntl, useLocation, useNavigate } from '@umijs/max';
 import { Button, Popconfirm, Tag, message } from 'antd';
@@ -36,7 +38,7 @@ export default function ProductPage() {
     const res = await fetchUpdateProduct({
       id: record.id,
       name: record.name,
-      status: record.status === 1 ? 0 : 1,
+      status: record.status === STATUS_ENABLED ? STATUS_DISABLED : STATUS_ENABLED,
     });
     if (!res.success) return;
     message.success('操作成功');
@@ -68,10 +70,17 @@ export default function ProductPage() {
       dataIndex: 'status',
       width: 80,
       render: (_, r) => (
-        <Tag color={r.status === 1 ? 'success' : 'default'}>{r.status === 1 ? '启用' : '禁用'}</Tag>
+        <Tag color={r.status === STATUS_ENABLED ? 'success' : 'error'}>
+          {r.status === STATUS_ENABLED ? '启用' : '禁用'}
+        </Tag>
       ),
     },
-    { title: '创建时间', dataIndex: 'createTime', valueType: 'dateTime', width: 180 },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      width: 180,
+      render: (_, r) => unixTimeFormat(r.createTime),
+    },
     {
       title: '操作',
       valueType: 'option',
@@ -86,10 +95,12 @@ export default function ProductPage() {
         />,
         <Popconfirm
           key="status"
-          title={r.status === 1 ? `确认禁用「${r.name}」？` : `确认启用「${r.name}」？`}
+          title={
+            r.status === STATUS_ENABLED ? `确认禁用「${r.name}」？` : `确认启用「${r.name}」？`
+          }
           onConfirm={() => handleToggleStatus(r)}
         >
-          <a>{r.status === 1 ? '禁用' : '启用'}</a>
+          <a>{r.status === STATUS_ENABLED ? '禁用' : '启用'}</a>
         </Popconfirm>,
       ],
     },

src/pages/Admin/User/index.tsx

@@ -1,4 +1,4 @@
-import { MEMBER_TYPE_COLORS, MEMBER_TYPE_LABELS } from '@/defines';
+import { MEMBER_TYPE_COLORS, MEMBER_TYPE_LABELS, STATUS_DISABLED, STATUS_ENABLED } from '@/defines';
 import { BindRolesDrawer } from '@/pages/Admin/_shared/BindRolesDrawer';
 import { UserPermDrawer } from '@/pages/Admin/_shared/UserPermDrawer';
 import {
@@ -6,6 +6,7 @@ import {
   useUserProductRoles,
 } from '@/pages/Admin/_shared/useUserProductRoles';
 import { fetchUpdateUserStatus, fetchUserList } from '@/services/user';
+import { unixTimeFormat } from '@/utils/timeUtils';
 import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { Button, Popconfirm, Tag, message } from 'antd';
@@ -31,7 +32,10 @@ export default function UserPage() {
   const { userProductInfo } = useUserProductRoles(userIds, productRolesBase, refreshKey);
 
   const handleToggleStatus = async (r: API.UserItem) => {
-    const res = await fetchUpdateUserStatus({ id: r.id, status: r.status === 1 ? 0 : 1 });
+    const res = await fetchUpdateUserStatus({
+      id: r.id,
+      status: r.status === STATUS_ENABLED ? STATUS_DISABLED : STATUS_ENABLED,
+    });
     if (!res.success) return;
     message.success('操作成功');
     actionRef.current?.reload();
@@ -45,7 +49,9 @@ export default function UserPage() {
       dataIndex: 'status',
       width: 80,
       render: (_, r) => (
-        <Tag color={r.status === 1 ? 'success' : 'default'}>{r.status === 1 ? '启用' : '禁用'}</Tag>
+        <Tag color={r.status === STATUS_ENABLED ? 'success' : 'error'}>
+          {r.status === STATUS_ENABLED ? '启用' : '禁用'}
+        </Tag>
       ),
     },
     {
@@ -90,7 +96,12 @@ export default function UserPage() {
         );
       },
     },
-    { title: '创建时间', dataIndex: 'createTime', valueType: 'dateTime', width: 180 },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      width: 180,
+      render: (_, r) => unixTimeFormat(r.createTime),
+    },
     {
       title: '操作',
       valueType: 'option',
@@ -118,11 +129,15 @@ export default function UserPage() {
         </a>,
         <Popconfirm
           key="status"
-          title={r.status === 1 ? `确认冻结「${r.username}」？` : `确认解冻「${r.username}」？`}
+          title={
+            r.status === STATUS_ENABLED
+              ? `确认冻结「${r.username}」？`
+              : `确认解冻「${r.username}」？`
+          }
           onConfirm={() => handleToggleStatus(r)}
         >
-          <a className={r.status === 1 ? 'text-(--ant-color-error)' : ''}>
-            {r.status === 1 ? '冻结' : '解冻'}
+          <a className={r.status === STATUS_ENABLED ? 'text-(--ant-color-error)' : ''}>
+            {r.status === STATUS_ENABLED ? '冻结' : '解冻'}
           </a>
         </Popconfirm>,
       ],