chenh
/
imeeting
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui): 统一全局分页组件并优化布局样式 

- 新增 AppPagination 组件，统一分页样式与行为
- 将多个页面的自定义分页替换为标准分页组件
- 修复布局容器高度计算问题，确保内容区域正确滚动
- 调整表格容器样式，支持响应式布局和水平滚动
- 优化国际化配置，支持 Ant Design 组件多语言
- 统一分页边距和边框样式，提升视觉一致性
dev_na
alanpaine 2026-04-15 17:47:31 +08:00
parent 6d46998abe
commit 2b30744d2e
25 changed files with 387 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.tsx
View File

@ -1,5 +1,8 @@
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { ConfigProvider, theme, App as AntdApp } from "antd";
import zhCN from "antd/locale/zh_CN";
import enUS from "antd/locale/en_US";
import { useTranslation } from "react-i18next";
import AppRoutes from "./routes";
import { getOpenPlatformConfig } from "./api";
import { useThemeStore } from "./store/themeStore";
@ -8,6 +11,9 @@ import type { SysPlatformConfig } from "./types";
export default function App() {
const [config, setConfig] = useState<SysPlatformConfig | null>(null);
const { colorPrimary, themeMode, initTheme } = useThemeStore();
const { i18n } = useTranslation();
const antdLocale = useMemo(() => (i18n.language === "en-US" ? enUS : zhCN), [i18n.language]);
useEffect(() => {
initTheme();
const fetchConfig = async () => {
@ -37,6 +43,7 @@ export default function App() {
return (
<ConfigProvider
locale={antdLocale}
theme={{
algorithm: themeMode === 'tech' ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {

17
frontend/src/components/shared/AppPagination/index.css 100644
View File

@ -0,0 +1,17 @@
.app-pagination-container {
margin-top: auto;
flex-shrink: 0;
width: 100%;
}
.app-pagination-container .ant-pagination {
flex: 1 1 100%;
width: 100%;
display: flex;
align-items: center;
margin: 0 !important;
}
.app-pagination-container .ant-pagination-total-text {
margin-right: auto;
}

27
frontend/src/components/shared/AppPagination/index.tsx 100644
View File

@ -0,0 +1,27 @@
import React from 'react';
import { Pagination, PaginationProps } from 'antd';
import { useTranslation } from 'react-i18next';
import './index.css';
export interface AppPaginationProps extends PaginationProps {
total: number;
}
export default function AppPagination(props: AppPaginationProps) {
const { t } = useTranslation();
const mergedClassName = ['app-global-pagination', props.className].filter(Boolean).join(' ');
return (
<div className="app-pagination-container">
<Pagination
className={mergedClassName}
showSizeChanger
showQuickJumper
showTotal={(total) => t('common.total', { total })}
pageSizeOptions={['10', '20', '50', '100']}
size="default"
{...props}
/>
</div>
);
}

1
frontend/src/components/shared/ListTable/ListTable.tsx
View File

@ -62,6 +62,7 @@ function ListTable<T extends Record<string, any>>({
? false
: {
...pagination,
className: ["app-global-pagination", pagination.className].filter(Boolean).join(" "),
showTotal: (total: number) => (
<div className="table-selection-info">
{isAllPagesSelected ? (

78
frontend/src/index.css
View File

@ -182,10 +182,11 @@ body::after {
.app-page {
height: 100%;
min-height: 0;
padding: 24px;
display: flex;
flex-direction: column;
overflow: auto;
overflow: hidden;
}
.app-page--contained {
@ -210,12 +211,37 @@ body::after {
}
.app-page__content-card {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.app-page__panel-card {
display: flex;
flex-direction: column;
min-height: 0;
}
.app-page__content-card .ant-card-body,
.app-page__panel-card .ant-card-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.app-page__table-wrap {
flex: 1;
min-height: 0;
min-width: 0;
overflow: hidden;
}
.app-page__table-wrap .ant-table-wrapper {
min-width: 0;
}
.app-page__toolbar {
@ -796,3 +822,53 @@ body::after {
}
/* Global Pagination Style */
.ant-table-wrapper {
height: 100%;
}
.ant-table-wrapper .ant-spin-nested-loading {
height: 100%;
}
.ant-table-wrapper .ant-spin-container {
height: 100%;
display: flex;
flex-direction: column;
}
.ant-table-wrapper .ant-table {
flex: 1;
min-height: 0;
}
.ant-table-wrapper .ant-table-pagination.ant-pagination.app-global-pagination,
.app-global-pagination.ant-pagination {
margin: auto 0 0 0 !important;
flex-shrink: 0;
flex: 1 1 100%;
box-sizing: border-box;
padding: 12px 24px;
border-top: 1px solid var(--app-border-color);
background: var(--app-bg-card);
border-radius: 0 0 16px 16px;
display: flex;
align-items: center;
width: 100%;
}
.ant-table-wrapper .ant-table-pagination.ant-pagination.app-global-pagination .ant-pagination-total-text,
.app-global-pagination.ant-pagination .ant-pagination-total-text {
margin-right: auto;
color: var(--app-text-muted);
white-space: nowrap;
}
.app-global-pagination.ant-pagination .ant-pagination-options,
.ant-table-wrapper .ant-table-pagination.ant-pagination.app-global-pagination .ant-pagination-options {
margin-inline-start: 12px;
}
.app-global-pagination.ant-pagination .ant-pagination-options-quick-jumper,
.ant-table-wrapper .ant-table-pagination.ant-pagination.app-global-pagination .ant-pagination-options-quick-jumper {
margin-inline-start: 12px;
}

5
frontend/src/layouts/AppLayout.tsx
View File

@ -396,7 +396,7 @@ export default function AppLayout() {
</Sider>
)}
<Layout style={{ flex: 1, minWidth: 0 }}>
<Layout style={{ flex: 1, minWidth: 0, minHeight: 0 }}>
<Header
style={{
background: "var(--app-bg-card)",
@ -446,6 +446,8 @@ export default function AppLayout() {
<Content
style={{
flex: 1,
minHeight: 0,
margin: "24px 24px 12px",
padding: location.pathname === "/" || location.pathname === "/home" ? 0 : 24,
background: "var(--app-bg-card)",
@ -495,4 +497,3 @@ export default function AppLayout() {
);
}

7
frontend/src/pages/access/roles/index.less
View File

@ -207,11 +207,10 @@
.role-list-pagination {
flex-shrink: 0;
padding-top: 16px;
margin-top: auto;
border-top: 1px solid #f1f5f9;
display: flex;
justify-content: flex-end;
margin-left: -16px;
margin-right: -16px;
margin-bottom: -16px;
}
/* Detail Card Adjustments */

13
frontend/src/pages/access/roles/index.tsx
View File

@ -1,4 +1,4 @@
import { Avatar, Button, Card, Col, Drawer, Empty, Form, Input, List, Pagination, Radio, Modal, Popconfirm, Select, Space, Table, Tabs, Tag, Tooltip, Tree, Typography, Row, App } from 'antd';
import { Avatar, Button, Card, Col, Drawer, Empty, Form, Input, List, Radio, Modal, Popconfirm, Select, Space, Table, Tabs, Tag, Tooltip, Tree, Typography, Row, App } from 'antd';
import type { DataNode } from "antd/es/tree";
import { useEffect, useMemo, useState } from "react";
import {
@ -35,7 +35,9 @@ import {
} from "@/api";
import { useDict } from "@/hooks/useDict";
import { usePermission } from "@/hooks/usePermission";
import AppPagination from "@/components/shared/AppPagination";
import PageHeader from "@/components/shared/PageHeader";
import { getStandardPagination } from "@/utils/pagination";
import type { RoleDataScope, SysOrg, SysPermission, SysRole, SysTenant, SysUser } from "@/types";
import "./index.less";
@ -492,14 +494,11 @@ export default function Roles() {
/>
</div>
<div className="role-list-pagination">
<Pagination
<AppPagination
current={rolePage.current}
pageSize={rolePage.size}
total={rolePage.total}
size="small"
onChange={handleRolePageChange}
showSizeChanger
pageSizeOptions={["10", "20", "50"]}
/>
</div>
</Card>
@ -589,7 +588,7 @@ export default function Roles() {
size="small"
loading={loadingUsers}
dataSource={roleUsers}
pagination={{ pageSize: 10, size: "small" }}
pagination={getStandardPagination(roleUsers.length, 1, 10)}
columns={[
{
title: "用户信息",
@ -634,7 +633,7 @@ export default function Roles() {
<div style={{ marginBottom: 16 }}>
<Input placeholder="搜索用户名或显示名称" prefix={<SearchOutlined />} value={userSearchText} onChange={(event) => setUserSearchText(event.target.value)} allowClear />
</div>
<Table rowKey="userId" size="small" dataSource={filteredModalUsers} pagination={{ pageSize: 6 }} rowSelection={{ selectedRowKeys: selectedUserKeys, onChange: (keys) => setSelectedUserKeys(keys as number[]) }} columns={[{ title: "显示名称", dataIndex: "displayName" }, { title: "用户名", dataIndex: "username" }, { title: "手机号", dataIndex: "phone" }]} />
<Table rowKey="userId" size="small" dataSource={filteredModalUsers} pagination={getStandardPagination(filteredModalUsers.length, 1, 6)} rowSelection={{ selectedRowKeys: selectedUserKeys, onChange: (keys) => setSelectedUserKeys(keys as number[]) }} columns={[{ title: "显示名称", dataIndex: "displayName" }, { title: "用户名", dataIndex: "username" }, { title: "手机号", dataIndex: "phone" }]} />
</Modal>
<Drawer title={editing ? "编辑角色" : "新增角色"} open={drawerOpen} onClose={() => setDrawerOpen(false)} width={420} destroyOnHidden forceRender footer={<div className="app-page__drawer-footer"><Button onClick={() => setDrawerOpen(false)}>{"取消"}</Button><Button type="primary" loading={saving} onClick={() => void submitBasic()}>{"保存"}</Button></div>}>

7
frontend/src/pages/access/users/index.tsx
View File

@ -4,10 +4,10 @@ import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { ApartmentOutlined, DeleteOutlined, EditOutlined, MinusCircleOutlined, PlusOutlined, SearchOutlined, ShopOutlined, UploadOutlined, UserOutlined } from "@ant-design/icons";
import { createUser, deleteUser, getUserDetail, listOrgs, listRoles, listTenants, listUserRoles, listUsers, saveUserRoles, updateUser, uploadPlatformAsset } from "@/api";
import AppPagination from "@/components/shared/AppPagination";
import { useDict } from "@/hooks/useDict";
import { usePermission } from "@/hooks/usePermission";
import PageHeader from "@/components/shared/PageHeader";
import { getStandardPagination } from "@/utils/pagination";
import type { SysOrg, SysRole, SysTenant, SysUser } from "@/types";
import "./index.less";
@ -399,9 +399,10 @@ export default function Users() {
</Card>
<Card className="app-page__content-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
<div className="flex-1 min-h-0 h-full">
<Table rowKey="userId" columns={columns} dataSource={filteredData} loading={loading} size="middle" scroll={{ y: "calc(100vh - 420px)" }} pagination={getStandardPagination(filteredData.length, current, pageSize, (page, size) => { setCurrent(page); setPageSize(size); })} />
<div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "0 24px" }}>
<Table rowKey="userId" columns={columns} dataSource={filteredData} loading={loading} size="middle" scroll={{ x: "max-content" }} pagination={false} />
</div>
<AppPagination current={current} pageSize={pageSize} total={filteredData.length} onChange={(page, size) => { setCurrent(page); setPageSize(size); }} />
</Card>
<Drawer title={<div className="user-drawer-title"><UserOutlined className="mr-2" aria-hidden="true" />{editing ? t("users.drawerTitleEdit") : t("users.drawerTitleCreate")}</div>} open={drawerOpen} onClose={() => setDrawerOpen(false)} width={520} destroyOnHidden forceRender footer={<div className="app-page__drawer-footer"><Button onClick={() => setDrawerOpen(false)}>{t("common.cancel")}</Button><Button type="primary" loading={saving} onClick={submit}>{t("common.save")}</Button></div>}>

10
frontend/src/pages/bindings/role-permission/index.tsx
View File

@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
import { ClusterOutlined, KeyOutlined, SafetyCertificateOutlined, SaveOutlined, SearchOutlined } from "@ant-design/icons";
import { listPermissions, listRolePermissions, listRoles, saveRolePermissions } from "@/api";
import PageHeader from "@/components/shared/PageHeader";
import { getStandardPagination } from "@/utils/pagination";
import type { SysPermission, SysRole } from "@/types";
const { Text } = Typography;
@ -181,7 +182,7 @@ export default function RolePermissionBinding() {
<Row gutter={24} className="app-page__split" style={{ height: "calc(100vh - 180px)" }}>
<Col xs={24} lg={10} style={{ height: "100%" }}>
<Card title={<Space><SafetyCertificateOutlined aria-hidden="true" /><span>{t("rolePerm.roleList")}</span></Space>} className="app-page__panel-card full-height-card">
<Card title={<Space><SafetyCertificateOutlined aria-hidden="true" /><span>{t("rolePerm.roleList")}</span></Space>} className="app-page__panel-card full-height-card" styles={{ body: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }}>
<div className="mb-4">
<Input
placeholder={t("rolePerm.searchRole")}
@ -192,12 +193,13 @@ export default function RolePermissionBinding() {
aria-label={t("rolePerm.searchRole")}
/>
</div>
<div style={{ height: "calc(100% - 60px)", overflowY: "auto" }}>
<div style={{ flex: 1, minHeight: 0 }}>
<Table
rowKey="roleId"
size="middle"
loading={loadingRoles}
dataSource={filteredRoles}
scroll={{ y: "calc(100vh - 370px)" }}
rowSelection={{
type: "radio",
selectedRowKeys: selectedRoleId ? [selectedRoleId] : [],
@ -207,7 +209,7 @@ export default function RolePermissionBinding() {
onClick: () => setSelectedRoleId(record.roleId),
className: "cursor-pointer"
})}
pagination={{ pageSize: 10, showTotal: (total) => t("common.total", { total }) }}
pagination={getStandardPagination(filteredRoles.length, 1, 10)}
columns={[
{
title: t("roles.roleName"),
@ -235,6 +237,7 @@ export default function RolePermissionBinding() {
<Card
title={<Space><KeyOutlined aria-hidden="true" /><span>{t("rolePerm.permConfig")}</span></Space>}
className="app-page__panel-card full-height-card"
styles={{ body: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }}
extra={selectedRole ? <Tag color="blue">{t("rolePerm.currentRole")}: {selectedRole.roleName}</Tag> : null}
>
{selectedRoleId ? (
@ -267,4 +270,3 @@ export default function RolePermissionBinding() {
</div>
);
}

11
frontend/src/pages/bindings/user-role/index.tsx
View File

@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { listRoles, listUserRoles, listUsers, saveUserRoles } from "@/api";
import { SaveOutlined, SearchOutlined, TeamOutlined, UserOutlined } from "@ant-design/icons";
import { getStandardPagination } from "@/utils/pagination";
import type { SysRole, SysUser } from "@/types";
import PageHeader from "@/components/shared/PageHeader";
@ -101,7 +102,7 @@ export default function UserRoleBinding() {
<Row gutter={24} className="app-page__split" style={{ height: "calc(100vh - 180px)" }}>
<Col xs={24} lg={12} style={{ height: "100%" }}>
<Card title={<Space><UserOutlined aria-hidden="true" /><span>{t("userRole.userList")}</span></Space>} className="app-page__panel-card full-height-card">
<Card title={<Space><UserOutlined aria-hidden="true" /><span>{t("userRole.userList")}</span></Space>} className="app-page__panel-card full-height-card" styles={{ body: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }}>
<div className="mb-4">
<Input
placeholder={t("userRole.searchUser")}
@ -112,12 +113,13 @@ export default function UserRoleBinding() {
aria-label={t("userRole.searchUser")}
/>
</div>
<div style={{ height: "calc(100% - 60px)", overflowY: "auto" }}>
<div style={{ flex: 1, minHeight: 0 }}>
<Table
rowKey="userId"
size="middle"
loading={loadingUsers}
dataSource={filteredUsers}
scroll={{ y: "calc(100vh - 370px)" }}
rowSelection={{
type: "radio",
selectedRowKeys: selectedUserId ? [selectedUserId] : [],
@ -127,7 +129,7 @@ export default function UserRoleBinding() {
onClick: () => setSelectedUserId(record.userId),
className: "cursor-pointer"
})}
pagination={{ pageSize: 10, showTotal: (total) => t("common.total", { total }) }}
pagination={getStandardPagination(filteredUsers.length, 1, 10)}
columns={[
{
title: t("users.userInfo"),
@ -155,10 +157,11 @@ export default function UserRoleBinding() {
<Card
title={<Space><TeamOutlined aria-hidden="true" /><span>{t("userRole.grantRoles")}</span></Space>}
className="app-page__panel-card full-height-card"
styles={{ body: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }}
extra={selectedUser ? <Tag color="blue">{t("userRole.editing")}: {selectedUser.displayName}</Tag> : null}
>
{selectedUserId ? (
<div style={{ padding: "8px 0", height: "100%", overflowY: "auto" }}>
<div style={{ padding: "8px 0", flex: 1, minHeight: 0, overflowY: "auto" }}>
<Checkbox.Group style={{ width: "100%" }} value={checkedRoleIds} onChange={(values) => setCheckedRoleIds(values as number[])} disabled={loadingRoles}>
<Row gutter={[16, 16]}>
{roles.map((role) => (

24
frontend/src/pages/business/AiModels.tsx
View File

@ -22,6 +22,7 @@ import {
testLocalModelConnectivity,
updateAiModel,
} from "../../api/business/aimodel";
import AppPagination from "../../components/shared/AppPagination";
const { Option } = Select;
const { Title } = Typography;
@ -362,9 +363,11 @@ const AiModels: React.FC = () => {
];
return (
<div style={{ padding: 24 }}>
<div className="app-page">
<Card
className="app-page__content-card flex-1 flex flex-col overflow-hidden"
title="AI 模型配置"
styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}
extra={
<Space>
<Input
@ -380,6 +383,7 @@ const AiModels: React.FC = () => {
</Space>
}
>
<div style={{ padding: "16px 24px 0", flexShrink: 0 }}>
<Tabs
activeKey={activeType}
onChange={(key) => {
@ -391,20 +395,24 @@ const AiModels: React.FC = () => {
{ key: "LLM", label: "LLM 模型" },
]}
/>
</div>
<div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "0 24px" }}>
<Table
rowKey="id"
columns={columns}
dataSource={data}
loading={loading}
pagination={{
current,
pageSize: size,
total,
onChange: (page, pageSize) => {
scroll={{ x: "max-content" }}
pagination={false}
/>
</div>
<AppPagination
current={current}
pageSize={size}
total={total}
onChange={(page, pageSize) => {
setCurrent(page);
setSize(pageSize);
},
}}
/>
</Card>

12
frontend/src/pages/business/ClientManagement.tsx
View File

@ -410,7 +410,17 @@ export default function ClientManagement() {
</Card>
<Card className="app-page__content-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
<Table rowKey="id" columns={columns} dataSource={pagedRecords} loading={loading || groupLoading || platformLoading} locale={platformGroups.length === 0 ? { emptyText: <Empty description="未配置 client_platform 字典项" /> } : undefined} scroll={{ x: 960, y: "calc(100vh - 360px)" }} pagination={getStandardPagination(filteredRecords.length, page, pageSize, (nextPage, nextSize) => { setPage(nextPage); setPageSize(nextSize); })} />
<div className="app-page__table-wrap">
<Table
rowKey="id"
columns={columns}
dataSource={pagedRecords}
loading={loading || groupLoading || platformLoading}
locale={platformGroups.length === 0 ? { emptyText: <Empty description="未配置 client_platform 字典项" /> } : undefined}
scroll={{ x: "max-content", y: "calc(100vh - 360px)" }}
pagination={getStandardPagination(filteredRecords.length, page, pageSize, (nextPage: number, nextSize: number) => { setPage(nextPage); setPageSize(nextSize); })}
/>
</div>
</Card>
<Drawer title={editing ? "编辑客户端版本" : "新增客户端版本"} open={drawerOpen} onClose={() => setDrawerOpen(false)} width={680} destroyOnHidden forceRender footer={<div className="app-page__drawer-footer"><Button onClick={() => setDrawerOpen(false)}>取消</Button><Button type="primary" icon={<UploadOutlined />} loading={saving} onClick={() => void handleSubmit()}>保存</Button></div>}>

8
frontend/src/pages/business/ExternalAppManagement.tsx
View File

@ -1,4 +1,4 @@
import { App, Avatar, Button, Card, Col, Drawer, Form, Input, InputNumber, Popconfirm, Row, Select, Space, Switch, Table, Tag, Typography, Upload } from "antd";
import { App, Avatar, Button, Card, Col, Drawer, Form, Input, InputNumber, Popconfirm, Row, Select, Space, Switch, Table, Tag, Typography, Upload } from "antd";
import type { ColumnsType } from "antd/es/table";
import { AppstoreOutlined, DeleteOutlined, EditOutlined, GlobalOutlined, LinkOutlined, PictureOutlined, PlusOutlined, ReloadOutlined, RobotOutlined, SaveOutlined, SearchOutlined, UploadOutlined } from "@ant-design/icons";
import { useCallback, useEffect, useMemo, useState } from "react";
@ -31,7 +31,7 @@ const STATUS_OPTIONS = [
{ label: "已停用", value: "disabled" },
] as const;
function normalizeAppInfo(value: ExternalAppVO["appInfo"]): ExternalAppFormValues["appInfo"] {
function normalizeAppInfo(value: ExternalAppVO["appInfo"]): NonNullable<ExternalAppFormValues["appInfo"]> {
if (!value || typeof value !== "object") {
return {};
}
@ -320,7 +320,9 @@ export default function ExternalAppManagement() {
</Card>
<Card className="app-page__content-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
<Table rowKey="id" columns={columns} dataSource={pagedRecords} loading={loading} scroll={{ x: 980, y: "calc(100vh - 360px)" }} pagination={getStandardPagination(filteredRecords.length, page, pageSize, (nextPage, nextSize) => { setPage(nextPage); setPageSize(nextSize); })} />
<div className="app-page__table-wrap">
<Table rowKey="id" columns={columns} dataSource={pagedRecords} loading={loading} scroll={{ x: "max-content", y: "calc(100vh - 360px)" }} pagination={getStandardPagination(filteredRecords.length, page, pageSize, (nextPage: number, nextSize: number) => { setPage(nextPage); setPageSize(nextSize); })} />
</div>
</Card>
<Drawer title={editing ? "编辑外部应用" : "新增外部应用"} open={drawerOpen} onClose={() => setDrawerOpen(false)} width={700} destroyOnHidden forceRender footer={<div className="app-page__drawer-footer"><Button onClick={() => setDrawerOpen(false)}>取消</Button><Button type="primary" icon={<SaveOutlined />} loading={saving} onClick={() => void handleSubmit()}>保存</Button></div>}>

32
frontend/src/pages/business/HotWords.tsx
View File

@ -18,6 +18,7 @@ import {
updateHotWord,
type HotWordVO,
} from "../../api/business/hotword";
import AppPagination from "../../components/shared/AppPagination";
const { Option } = Select;
const { Text } = Typography;
@ -246,10 +247,11 @@ const HotWords: React.FC = () => {
];
return (
<div className="flex h-full flex-col overflow-hidden">
<div className="app-page">
<Card
className="flex-1 overflow-hidden shadow-sm"
styles={{ body: { padding: 24, height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }}
className="app-page__content-card shadow-sm"
style={{ flex: 1, minHeight: 0 }}
styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}
title="热词管理"
extra={
<Space wrap>
@ -296,25 +298,25 @@ const HotWords: React.FC = () => {
</Space>
}
>
<div className="min-h-0 flex-1">
<div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "24px 24px 0" }}>
<Table
columns={columns}
dataSource={data}
rowKey="id"
loading={loading}
scroll={{ y: "calc(100vh - 440px)" }}
pagination={{
current,
pageSize: size,
total,
showTotal: (value) => `共 ${value} 条`,
onChange: (page, pageSize) => {
setCurrent(page);
setSize(pageSize);
},
}}
scroll={{ x: "max-content" }}
pagination={false}
/>
</div>
<AppPagination
current={current}
pageSize={size}
total={total}
onChange={(page, pageSize) => {
setCurrent(page);
setSize(pageSize);
}}
/>
</Card>
<Modal

9
frontend/src/pages/business/Meetings.tsx
View File

@ -16,6 +16,7 @@ import { getPromptPage, PromptTemplateVO } from '../../api/business/prompt';
import { getHotWordPage, HotWordVO } from '../../api/business/hotword';
import { listUsers } from '../../api';
import { SysUser } from '../../types';
import AppPagination from '../../components/shared/AppPagination';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
@ -225,7 +226,7 @@ const Meetings: React.FC = () => {
const [data, setData] = useState<MeetingVO[]>([]);
const [total, setTotal] = useState(0);
const [current, setCurrent] = useState(1);
const [size, setSize] = useState(8);
const [size, setSize] = useState(10);
const [searchTitle, setSearchTitle] = useState('');
const [viewType, setViewType] = useState<'all' | 'created' | 'involved'>('all');
const [createDrawerVisible, setCreateDrawerVisible] = useState(false);
@ -364,11 +365,7 @@ const Meetings: React.FC = () => {
</Skeleton>
</div>
{total > 0 && (
<div style={{ flexShrink: 0, display: 'flex', justifyContent: 'center', padding: '16px 0 8px 0' }}>
<Pagination current={current} pageSize={size} total={total} onChange={(p, s) => { setCurrent(p); setSize(s); }} showTotal={(total) => <Text type="secondary" style={{ fontSize: 12 }}>为您找到 {total} 场会议</Text>} size="small" />
</div>
)}
{total > 0 && <AppPagination current={current} pageSize={size} total={total} onChange={(p, s) => { setCurrent(p); setSize(s); }} />}
</div>
<MeetingCreateDrawer

23
frontend/src/pages/business/PromptTemplates.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Card, Button, Input, Space, Drawer, Form, Select, Tag, Popconfirm, Typography, Divider, Tooltip, Row, Col, List, Empty, Skeleton, Switch, Modal, Pagination, App } from 'antd';
import { Card, Button, Input, Space, Drawer, Form, Select, Tag, Popconfirm, Typography, Divider, Tooltip, Row, Col, List, Empty, Skeleton, Switch, Modal, App } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, CopyOutlined, SearchOutlined, SaveOutlined, StarFilled } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import { useDict } from '../../hooks/useDict';
@ -12,6 +12,7 @@ import {
PromptTemplateVO,
PromptTemplateDTO
} from '../../api/business/prompt';
import AppPagination from '../../components/shared/AppPagination';
import { useTranslation } from 'react-i18next';
@ -287,8 +288,8 @@ const PromptTemplates: React.FC = () => {
};
return (
<div style={{ padding: '32px', background: 'var(--app-bg-page)', minHeight: '100%', overflowY: 'auto' }}>
<div style={{ maxWidth: 1400, margin: '0 auto' }}>
<div style={{ padding: '32px', background: 'var(--app-bg-page)', height: 'calc(100vh - 64px)', overflow: 'hidden' }}>
<div style={{ maxWidth: 1400, margin: '0 auto', height: '100%', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
<Title level={3} style={{ margin: 0 }}>提示词模板</Title>
<Button type="primary" icon={<PlusOutlined />} size="large" onClick={() => handleOpenDrawer()} style={{ borderRadius: 6 }}>
@ -313,11 +314,15 @@ const PromptTemplates: React.FC = () => {
</Form>
</Card>
<Skeleton loading={loading} active>
<Card className="app-page__content-card" style={{ flex: 1, minHeight: 0 }} styles={{ body: { padding: 0, height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' } }}>
<Skeleton loading={loading} active style={{ height: '100%' }}>
{Object.keys(groupedData).length === 0 ? (
<div className="app-page__empty-state" style={{ padding: 24 }}>
<Empty description="暂无可用模板" />
</div>
) : (
<>
<div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '24px 24px 0' }}>
{Object.keys(groupedData).map(catKey => {
const catLabel = categories.find(c => c.itemValue === catKey)?.itemLabel || catKey;
return (
@ -329,24 +334,20 @@ const PromptTemplates: React.FC = () => {
</div>
);
})}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 40, paddingBottom: 20 }}>
<Pagination
</div>
<AppPagination
current={current}
pageSize={pageSize}
total={total}
showSizeChanger
showQuickJumper
onChange={(page, size) => {
setCurrent(page);
setPageSize(size);
}}
showTotal={(total) => `共 ${total} 条模板`}
/>
</div>
</>
)}
</Skeleton>
</Card>
</div>
<Drawer

10
frontend/src/pages/business/SpeakerReg.tsx
View File

@ -14,11 +14,12 @@ import {
SoundOutlined,
SafetyCertificateOutlined
} from '@ant-design/icons';
import { Badge, Button, Col, Empty, Form, Input, List, Pagination, Popconfirm, Progress, Row, Select, Spin, Space, Tabs, Tag, Typography, Upload, Tooltip, Divider, App } from 'antd';
import { Badge, Button, Col, Empty, Form, Input, List, Popconfirm, Progress, Row, Select, Spin, Space, Tabs, Tag, Typography, Upload, Tooltip, Divider, App } from 'antd';
import type { UploadProps } from 'antd';
import dayjs from 'dayjs';
import { listUsers } from '../../api';
import { deleteSpeaker, getSpeakerPage, registerSpeaker, SpeakerVO } from '../../api/business/speaker';
import AppPagination from '../../components/shared/AppPagination';
import { useAuth } from '../../hooks/useAuth';
import type { SysUser } from '../../types';
@ -718,19 +719,16 @@ const SpeakerReg: React.FC = () => {
)}
</Spin>
</div>
<div style={{ padding: '12px 20px 16px', borderTop: '1px solid var(--app-border-color)', display: 'flex', justifyContent: 'center' }}>
<Pagination
<div style={{ flexShrink: 0 }}>
<AppPagination
current={current}
pageSize={pageSize}
total={total}
size="small"
showSizeChanger
pageSizeOptions={['8', '12', '20', '50']}
onChange={(page, size) => {
setCurrent(page);
setPageSize(size);
}}
showTotal={count => `共 ${count} 条`}
/>
</div>
</div>

4
frontend/src/pages/devices/index.tsx
View File

@ -155,12 +155,13 @@ export default function Devices() {
</Card>
<Card className="app-page__content-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
<div className="app-page__table-wrap">
<Table<DeviceInfo>
rowKey="deviceId"
dataSource={filteredData}
loading={loading}
size="middle"
scroll={{ y: "calc(100vh - 350px)" }}
scroll={{ x: "max-content", y: "calc(100vh - 350px)" }}
pagination={getStandardPagination(filteredData.length, 1, 1000)}
columns={[
{
@ -235,6 +236,7 @@ export default function Devices() {
}
]}
/>
</div>
</Card>
<Drawer

23
frontend/src/pages/organization/tenants/index.tsx
View File

@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import { DeleteOutlined, EditOutlined, PhoneOutlined, PlusOutlined, ReloadOutlined, SearchOutlined, ShopOutlined, UserOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import { createTenant, deleteTenant, listTenants, updateTenant } from "@/api";
import AppPagination from "@/components/shared/AppPagination";
import { useDict } from "@/hooks/useDict";
import { usePermission } from "@/hooks/usePermission";
import PageHeader from "@/components/shared/PageHeader";
@ -146,26 +147,24 @@ export default function Tenants() {
</Space>
</Card>
<div className="flex-1 overflow-y-auto pr-2">
<Card className="app-page__content-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
<div className="flex-1 min-h-0 overflow-y-auto" style={{ padding: "24px 24px 0" }}>
<List
grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }}
loading={loading}
dataSource={data}
renderItem={renderTenantCard}
pagination={{
total,
current: params.current,
pageSize: params.size,
onChange: (page, size) => setParams({ ...params, current: page, size: size || params.size }),
showSizeChanger: true,
showQuickJumper: true,
showTotal: (count) => t("common.total", { total: count }),
pageSizeOptions: ["10", "20", "50", "100"],
style: { marginTop: "24px", marginBottom: "24px" }
}}
pagination={false}
locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("tenantsExt.emptyText")} /> }}
/>
</div>
<AppPagination
current={params.current}
pageSize={params.size}
total={total}
onChange={(page, size) => setParams({ ...params, current: page, size: size || params.size })}
/>
</Card>
<Drawer title={<Space><ShopOutlined aria-hidden="true" /><span>{editing ? t("tenants.drawerTitleEdit") : t("tenants.drawerTitleCreate")}</span></Space>} open={drawerOpen} onClose={() => setDrawerOpen(false)} width={480} destroyOnHidden forceRender footer={<div className="app-page__drawer-footer"><Button onClick={() => setDrawerOpen(false)}>{t("common.cancel")}</Button><Button type="primary" loading={saving} onClick={submit}>{t("common.save")}</Button></div>}>
<Form form={form} layout="vertical">

7
frontend/src/pages/system/dictionaries/index.tsx
View File

@ -174,12 +174,7 @@ export default function Dictionaries() {
rowKey="dictTypeId"
loading={loadingTypes}
dataSource={types}
pagination={{
...getStandardPagination(typeTotal, typeParams.current, typeParams.size, (page, size) => setTypeParams({ ...typeParams, current: page, size })),
simple: true,
size: "small",
position: ["bottomCenter"]
}}
pagination={getStandardPagination(typeTotal, typeParams.current, typeParams.size, (page, size) => setTypeParams({ ...typeParams, current: page, size }))}
size="small"
showHeader={false}
scroll={{ y: "calc(100vh - 480px)" }}

14
frontend/src/pages/system/logs/index.tsx
View File

@ -3,10 +3,10 @@ import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { EyeOutlined, InfoCircleOutlined, ReloadOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
import { fetchLogModules, fetchLogs } from "@/api";
import AppPagination from "@/components/shared/AppPagination";
import { useDict } from "@/hooks/useDict";
import PageHeader from "@/components/shared/PageHeader";
import ListTable from "@/components/shared/ListTable/ListTable";
import { getStandardPagination } from "@/utils/pagination";
import type { SysLog, UserProfile } from "@/types";
const { RangePicker } = DatePicker;
@ -71,11 +71,10 @@ export default function Logs() {
fetchLogModules().then((items) => setModuleOptions(items || [])).catch(() => setModuleOptions([]));
}, [activeTab]);
const handleTableChange = (pagination: any, _filters: any, sorter: any) => {
const handleTableChange = (_pagination: any, _filters: any, sorter: any) => {
setParams({
...params,
current: pagination.current,
size: pagination.pageSize,
current: 1,
sortField: sorter.field || "createdAt",
sortOrder: sorter.order || "descend"
});
@ -275,7 +274,7 @@ export default function Logs() {
}
/>
<div className="flex-1 min-h-0 h-full">
<div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "0 24px" }}>
<ListTable
rowKey="id"
columns={columns}
@ -283,10 +282,11 @@ export default function Logs() {
loading={loading}
onChange={handleTableChange}
totalCount={total}
scroll={{ y: "calc(100vh - 540px)" }}
pagination={getStandardPagination(total, params.current, params.size)}
scroll={{ x: "max-content" }}
pagination={false}
/>
</div>
<AppPagination current={params.current} pageSize={params.size} total={total} onChange={(page, size) => setParams((prev) => ({ ...prev, current: page, size }))} />
</Card>
<Modal title={t("logs.detailTitle")} open={detailModalVisible} onCancel={() => setDetailModalVisible(false)} footer={[<Button key="close" onClick={() => setDetailModalVisible(false)}>{t("logsExt.close")}</Button>]} width={700}>

9
frontend/src/pages/system/sys-params/index.tsx
View File

@ -3,10 +3,10 @@ import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { DeleteOutlined, EditOutlined, InfoCircleOutlined, PlusOutlined, SearchOutlined, SettingOutlined } from "@ant-design/icons";
import { createParam, deleteParam, pageParams, updateParam } from "@/api";
import AppPagination from "@/components/shared/AppPagination";
import { useDict } from "@/hooks/useDict";
import { usePermission } from "@/hooks/usePermission";
import PageHeader from "@/components/shared/PageHeader";
import { getStandardPagination } from "@/utils/pagination";
import type { SysParamQuery, SysParamVO } from "@/types";
import "./index.less";
@ -173,15 +173,18 @@ export default function SysParams() {
</Card>
<Card className="app-page__content-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
<div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "0 24px" }}>
<Table
rowKey="paramId"
columns={columns}
dataSource={data}
loading={loading}
size="middle"
scroll={{ y: "calc(100vh - 350px)" }}
pagination={getStandardPagination(total, queryParams.pageNum || 1, queryParams.pageSize || 10, handlePageChange)}
scroll={{ x: "max-content" }}
pagination={false}
/>
</div>
<AppPagination current={queryParams.pageNum || 1} pageSize={queryParams.pageSize || 10} total={total} onChange={handlePageChange} />
</Card>
<Drawer

9
frontend/src/utils/pagination.ts
View File

@ -8,8 +8,11 @@ export const getStandardPagination = (
total: number,
current: number,
pageSize: number,
onChange?: (page: number, size: number) => void
onChange?: (page: number, size: number) => void,
overrides: TablePaginationConfig = {}
): TablePaginationConfig => {
const mergedClassName = ['app-global-pagination', overrides.className].filter(Boolean).join(' ');
return {
total,
current,
@ -20,6 +23,8 @@ export const getStandardPagination = (
showTotal: (totalCount) => i18n.t('common.total', { total: totalCount }),
pageSizeOptions: ['10', '20', '50', '100'],
size: 'default',
position: ['bottomRight']
position: ['bottomRight'],
...overrides,
className: mergedClassName
};
};