diff --git a/frontend/src/components/shared/ListTable/ListTable.tsx b/frontend/src/components/shared/ListTable/ListTable.tsx index 75524ee..135a5c6 100644 --- a/frontend/src/components/shared/ListTable/ListTable.tsx +++ b/frontend/src/components/shared/ListTable/ListTable.tsx @@ -39,7 +39,7 @@ function ListTable>({ showSizeChanger: { showSearch: false }, showQuickJumper: true, }, - scroll = { x: "max-content" }, + scroll = { x: "max(100%, 960px)" }, onRowClick, selectedRow, loading = false, @@ -49,7 +49,7 @@ function ListTable>({ }: ListTableProps) { const mergedScroll = React.useMemo(() => { return { - x: "max-content", + x: "max(100%, 960px)", ...scroll, }; }, [scroll]); diff --git a/frontend/src/components/shared/LongTextPreview.css b/frontend/src/components/shared/LongTextPreview.css new file mode 100644 index 0000000..9c7ecef --- /dev/null +++ b/frontend/src/components/shared/LongTextPreview.css @@ -0,0 +1,28 @@ +.long-text-preview { + display: block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: default; +} + +.long-text-preview-popover { + max-width: min(720px, 70vw); +} + +.long-text-preview-popover__content { + max-width: min(680px, 66vw); + max-height: 360px; + margin: 0 !important; + overflow: auto; + white-space: pre-wrap; + word-break: break-word; + user-select: text; + line-height: 1.6; +} + +.long-text-preview-popover__content--code { + font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; + font-size: 12px; +} diff --git a/frontend/src/components/shared/LongTextPreview.tsx b/frontend/src/components/shared/LongTextPreview.tsx new file mode 100644 index 0000000..d7c81c7 --- /dev/null +++ b/frontend/src/components/shared/LongTextPreview.tsx @@ -0,0 +1,47 @@ +import { Popover, Typography } from "antd"; +import type { TextProps } from "antd/es/typography/Text"; +import "./LongTextPreview.css"; + +const { Paragraph, Text } = Typography; + +type LongTextPreviewProps = { + value?: string | number | null; + emptyText?: string; + code?: boolean; + copyable?: boolean; + className?: string; + textType?: TextProps["type"]; + strong?: boolean; +}; + +export default function LongTextPreview({ + value, + emptyText = "-", + code = false, + copyable = true, + className, + textType, + strong, +}: LongTextPreviewProps) { + const text = value === undefined || value === null || value === "" ? emptyText : String(value); + const contentClassName = [ + "long-text-preview-popover__content", + code ? "long-text-preview-popover__content--code" : undefined, + ].filter(Boolean).join(" "); + + return ( + + {text} + + } + > + + {text} + + + ); +} diff --git a/frontend/src/pages/access/permissions/index.less b/frontend/src/pages/access/permissions/index.less index deb91c5..de1d354 100644 --- a/frontend/src/pages/access/permissions/index.less +++ b/frontend/src/pages/access/permissions/index.less @@ -88,3 +88,26 @@ } } } + +.permissions-route-text { + font-size: 12px; +} + +.permissions-route-text--component { + font-size: 11px; +} + +.permissions-name-cell { + display: flex; + width: 100%; + min-width: 0; +} + +.permissions-name-cell .ant-space-item:last-child { + flex: 1; + min-width: 0; +} + +.permissions-name-cell .long-text-preview { + min-width: 0; +} diff --git a/frontend/src/pages/access/permissions/index.tsx b/frontend/src/pages/access/permissions/index.tsx index 0e62e3f..25ee4a3 100644 --- a/frontend/src/pages/access/permissions/index.tsx +++ b/frontend/src/pages/access/permissions/index.tsx @@ -35,6 +35,7 @@ import { usePermission } from "@/hooks/usePermission"; import PageContainer from "@/components/shared/PageContainer"; import DataListPanel from "@/components/shared/DataListPanel"; import SectionCard from "@/components/shared/SectionCard"; +import LongTextPreview from "@/components/shared/LongTextPreview"; import type { SysPermission } from "@/types"; import "./index.less"; @@ -453,18 +454,22 @@ export default function Permissions() { title: t("permissions.permName"), dataIndex: "name", key: "name", + width: 360, + ellipsis: { showTitle: false }, render: (text: string, record: TreePermission) => { let icon =