From 338d7f10651bd06ff23f78b7044d20bdb946e722 Mon Sep 17 00:00:00 2001 From: zhaoying Date: Mon, 23 Mar 2026 12:15:36 +0800 Subject: [PATCH] feat(web): table ui upgrade --- web/src/components/Table/index.tsx | 4 ++-- web/src/i18n/en.ts | 1 + web/src/i18n/zh.ts | 1 + web/src/styles/antdThemeConfig.ts | 2 ++ web/src/styles/index.css | 28 +++++++++++++++++--------- web/src/views/Index/index.tsx | 3 +-- web/src/views/UserManagement/index.tsx | 28 +++++++++++++++++--------- 7 files changed, 43 insertions(+), 24 deletions(-) diff --git a/web/src/components/Table/index.tsx b/web/src/components/Table/index.tsx index f5a487ab..719d0dee 100644 --- a/web/src/components/Table/index.tsx +++ b/web/src/components/Table/index.tsx @@ -2,7 +2,7 @@ * @Author: ZhaoYing * @Date: 2026-02-02 15:29:46 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-02-25 15:06:40 + * @Last Modified time: 2026-03-23 12:11:18 */ /** * RbTable Component @@ -199,7 +199,7 @@ const RbTable = forwardRef(({ if (scrollY !== undefined) { config.y = scrollY; } else if (isScroll) { - config.y = 'calc(100vh - 240px)'; + config.y = 'calc(100vh - 256px)'; } return Object.keys(config).length > 0 ? config : undefined; diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts index 4d6859c3..47de99a8 100644 --- a/web/src/i18n/en.ts +++ b/web/src/i18n/en.ts @@ -246,6 +246,7 @@ export const en = { zh: 'Chinese' }, user: { + userList: 'User List', searchPlaceholder: 'search user…', userId: 'User ID', username: 'Username', diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts index fce622bf..9fa8cc0d 100644 --- a/web/src/i18n/zh.ts +++ b/web/src/i18n/zh.ts @@ -943,6 +943,7 @@ export const zh = { zh: '中' }, user: { + userList: '用户列表', searchPlaceholder: '搜索用户…', userId: '用户ID', username: '用户名', diff --git a/web/src/styles/antdThemeConfig.ts b/web/src/styles/antdThemeConfig.ts index 4c58b760..bf385668 100644 --- a/web/src/styles/antdThemeConfig.ts +++ b/web/src/styles/antdThemeConfig.ts @@ -101,6 +101,8 @@ export const lightTheme: ThemeConfig = { rowSelectedHoverBg: '#F0F3F8', cellPaddingBlock: 8, cellFontSizeSM: 12, + footerBg: '#FFFFFF', + colorText: '#5B6167', // cellPaddingInline: 24, selectionColumnWidth: 48, diff --git a/web/src/styles/index.css b/web/src/styles/index.css index aec57fa6..07286966 100644 --- a/web/src/styles/index.css +++ b/web/src/styles/index.css @@ -153,18 +153,17 @@ body { border-radius: 3px; } .ant-table-container { - border: 1px solid #DFE4ED; - border-radius: 8px; - border-bottom: 0; + border-radius: 12px; + border: none; } .ant-table-wrapper table { - border-radius: 8px; + border-radius: 12px; } .ant-table-row:last-child .ant-table-cell:first-child { - border-bottom-left-radius: 8px; + border-bottom-left-radius: none; } .ant-table-row:last-child .ant-table-cell:last-child { - border-bottom-right-radius: 8px; + border-bottom-right-radius: none; } .ant-table-cell::before { display: none; @@ -177,7 +176,8 @@ body { } .ant-table-wrapper .ant-table-thead>tr>th, .ant-table-wrapper .ant-table-thead>tr>td { - font-weight: 500; + font-weight: normal; + border-bottom: none; } .ant-table-wrapper .ant-table.ant-table-small .ant-table-title, .ant-table-wrapper .ant-table.ant-table-small .ant-table-footer, @@ -190,12 +190,20 @@ body { padding: 12px 16px; } .ant-table-wrapper .ant-table-pagination.ant-pagination { - margin: 24px 0 32px 0; + padding: 13px 24px; + margin: 0; + background-color: #FFFFFF; + border-radius: 0px 0px 12px 12px; } -.table-header-has-bg.ant-table-wrapper .ant-table-thead>tr>th, -.table-header-has-bg.ant-table-wrapper .ant-table-thead>tr>td { +.ant-table-wrapper .ant-table-thead>tr>th, +.ant-table-wrapper .ant-table-thead>tr>td, +.table-header.ant-table-wrapper .ant-table-thead>tr>th, +.table-header.ant-table-wrapper .ant-table-thead>tr>td { background-color: #F6F6F6; } +.ant-table-wrapper .ant-btn { + height: 24px; +} .table-header-has-bg.ant-table-wrapper .ant-table, .table-header-has-bg.ant-table-wrapper table { diff --git a/web/src/views/Index/index.tsx b/web/src/views/Index/index.tsx index 11526b31..e5a5494a 100644 --- a/web/src/views/Index/index.tsx +++ b/web/src/views/Index/index.tsx @@ -41,6 +41,7 @@ const Index = () => { title: t('space.spaceName'), dataIndex: 'name', key: 'name', + className: 'rb:text-[#212332]' }, { title: t('space.spaceIcon'), @@ -119,8 +120,6 @@ const Index = () => { rowKey="id" bordered={false} scrollY="100%" - className="rb:-mb-3!" - // scroll={{ y: 'calc(100vh - 340px)' }} /> diff --git a/web/src/views/UserManagement/index.tsx b/web/src/views/UserManagement/index.tsx index 9629639a..3c3bfd05 100644 --- a/web/src/views/UserManagement/index.tsx +++ b/web/src/views/UserManagement/index.tsx @@ -2,7 +2,7 @@ * @Author: ZhaoYing * @Date: 2026-02-03 17:51:08 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-02-25 15:44:54 + * @Last Modified time: 2026-03-23 12:14:51 */ /** * User Management Page @@ -10,7 +10,7 @@ */ import React, { useRef } from 'react'; -import { Button, Space, App } from 'antd'; +import { Button, App, Flex } from 'antd'; import { useTranslation } from 'react-i18next'; import type { ColumnsType } from 'antd/es/table'; @@ -68,28 +68,33 @@ const UserManagement: React.FC = () => { title: t('user.userId'), dataIndex: 'id', key: 'id', - fixed: 'left', + width: 190, + className: 'rb:text-[#212332]' }, { title: <>{t('user.username')}
({t(`user.subUsername`)})
, dataIndex: 'email', key: 'email', + width: 210, }, { title: t('user.displayName'), dataIndex: 'username', key: 'username', + width: 130, }, { title: t('user.role'), dataIndex: 'is_superuser', key: 'is_superuser', + width: 70, render: (isSuperuser: boolean) => isSuperuser ? t('user.superuser') : t('user.normalUser'), }, { title: t('user.status'), dataIndex: 'is_active', key: 'is_active', + width: 80, render: (isActive: boolean) => ( { title: t('user.createTime'), dataIndex: 'created_at', key: 'created_at', + width: 110, render: (createdAt: string) => formatDateTime(createdAt, 'YYYY-MM-DD HH:mm:ss'), }, { title: t('user.lastLoginTime'), dataIndex: 'last_login_at', key: 'last_login_at', + width: 110, render: (lastLoginAt: string) => lastLoginAt ? formatDateTime(lastLoginAt, 'YYYY-MM-DD HH:mm:ss') : '-', }, { title: t('common.operation'), key: 'action', - fixed: 'right', + width: 137, render: (_, record) => ( - + {record.is_active && - + ), }, ]; return ( -
-
+
+ +
{t('user.userList')}
-
+