fix(web): 优化web端table展示效果，调整列的宽度 (#958)

# 做了什么： ### 优化table宽度，将列宽以百分比设置以优化大屏/小屏视觉效果，将操作列固定在table右侧，不随滚动条滚动，去掉了不会渲染的列： ### 门户系统列表： - 未结束的作业 - 所有作业 - 已创建的应用 ### 管理系统列表： - 未结束的作业 - 已结束的作业 - 用户列表 - 账户列表 - 充值记录
PKUHPC · Nov 8, 2023 · 62c7f32 · 62c7f32
1 parent a3d2f44
commit 62c7f32
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 119 deletions.
diff --git a/.changeset/beige-crabs-design.md b/.changeset/beige-crabs-design.md
@@ -0,0 +1,6 @@
+---
+"@scow/portal-web": patch
+"@scow/mis-web": patch
+---
+
+优化 web 端 table，调整列的宽度以百分比固定，使其在大屏/小屏下展示更友好
diff --git a/apps/mis-web/src/pageComponents/accounts/AccountTable.tsx b/apps/mis-web/src/pageComponents/accounts/AccountTable.tsx
@@ -146,30 +146,26 @@ export const AccountTable: React.FC<Props> = ({
         />
         <Table.Column<AdminAccountInfo>
           dataIndex="ownerName"
-          width={280}
+          width="25%"
           title={t(p("owner"))}
           render={(_, r) => `${r.ownerName}（ID: ${r.ownerId}）`}
         />
         <Table.Column<AdminAccountInfo>
           dataIndex="userCount"
-          width={90}
+          width="8%"
           title={t(pCommon("userCount"))}
         />
         {/* 只在平台管理下的账户列表中显示 */}
         {showedTab === "PLATFORM" && (
           <Table.Column<AdminAccountInfo>
             dataIndex="tenantName"
-            width={110}
+            width="10%"
             title={t(p("tenant"))}
           />
         )}
-        <Table.Column<AdminAccountInfo>
-          dataIndex="comment"
-          title={t(p("comment"))}
-        />
         <Table.Column<AdminAccountInfo>
           dataIndex="balance"
-          width={150}
+          width="13%"
           title={t(pCommon("balance"))}
           sorter={(a, b) => (moneyToNumber(a.balance)) - (moneyToNumber(b.balance))}
           sortDirections={["ascend", "descend"]}
@@ -178,17 +174,23 @@ export const AccountTable: React.FC<Props> = ({
         />
         <Table.Column<AdminAccountInfo>
           dataIndex="blocked"
-          width={80}
+          width="7%"
           title={t(p("status"))}
           sorter={(a, b) => (a.blocked ? 1 : 0) - (b.blocked ? 1 : 0)}
           sortDirections={["ascend", "descend"]}
           sortOrder={currentSortInfo.field === "blocked" ? currentSortInfo.order : null}
           render={(blocked) => blocked ? <Tag color="red">{t(p("block"))}</Tag> :
             <Tag color="green">{t(p("normal"))}</Tag>}
         />
+        <Table.Column<AdminAccountInfo>
+          dataIndex="comment"
+          ellipsis
+          title={t(p("comment"))}
+        />
         <Table.Column<AdminAccountInfo>
           title={t(pCommon("operation"))}
-          width={180}
+          width="15%"
+          fixed="right"
           render={(_, r) => (
             <Space split={<Divider type="vertical" />}>
               {/* 只在租户管理下的账户列表中显示管理成员 */}

diff --git a/apps/mis-web/src/pageComponents/admin/AllUsersTable.tsx b/apps/mis-web/src/pageComponents/admin/AllUsersTable.tsx
@@ -222,7 +222,7 @@ const UserInfoTable: React.FC<UserInfoTableProps> = ({
           sortDirections={["ascend", "descend"]}
           sortOrder={sortInfo.sortField === "name" ? sortInfo.sortOrder : null}
         />
-        <Table.Column<PlatformUserInfo> dataIndex="tenantName" title={t(p("tenant"))} />
+        <Table.Column<PlatformUserInfo> dataIndex="tenantName" ellipsis title={t(p("tenant"))} />
         <Table.Column<PlatformUserInfo>
           dataIndex="availableAccounts"
           width="25%"
@@ -231,7 +231,7 @@ const UserInfoTable: React.FC<UserInfoTableProps> = ({
         />
         <Table.Column<PlatformUserInfo>
           dataIndex="createTime"
-          width={160}
+          width="13.5%"
           title={t(pCommon("createTime"))}
           sorter={true}
           sortDirections={["ascend", "descend"]}
@@ -240,7 +240,7 @@ const UserInfoTable: React.FC<UserInfoTableProps> = ({
         />
         <Table.Column<PlatformUserInfo>
           dataIndex="roles"
-          width={175}
+          width="15%"
           title={t(p("roles"))}
           render={(_, r) => (
             <PlatformRoleSelector reload={reload} roles={r.platformRoles} userId={r.userId} currentUser={user} />
@@ -249,7 +249,8 @@ const UserInfoTable: React.FC<UserInfoTableProps> = ({
 
         <Table.Column<PlatformUserInfo>
           dataIndex="changePassword"
-          width={90}
+          width="7.5%"
+          fixed="right"
           title={t(pCommon("operation"))}
           render={(_, r) => (
             <Space split={<Divider type="vertical" />}>

diff --git a/apps/mis-web/src/pageComponents/common/PaymentTable.tsx b/apps/mis-web/src/pageComponents/common/PaymentTable.tsx
@@ -176,18 +176,13 @@ export const PaymentTable: React.FC<Props> = ({
         {
           showTenantName ? <Table.Column dataIndex="tenantName" title={t(pCommon("tenant"))} /> : undefined
         }
-        <Table.Column dataIndex="time" title={t(p("paymentDate"))} render={(v) => formatDateTime(v)} />
-        <Table.Column dataIndex="amount" title={t(p("paymentAmount"))} render={(v) => v.toFixed(3)} />
+        <Table.Column dataIndex="time" title={t(p("paymentDate"))} width="13.5%" render={(v) => formatDateTime(v)} />
+        <Table.Column dataIndex="amount" title={t(p("paymentAmount"))} width="10%" render={(v) => v.toFixed(3)} />
         <Table.Column
           dataIndex="type"
           title={t(pCommon("type"))}
           width="15%"
         />
-        <Table.Column
-          dataIndex="comment"
-          title={t(pCommon("comment"))}
-          width="25%"
-        />
         {
           showAuditInfo ? (
             <>
@@ -196,6 +191,11 @@ export const PaymentTable: React.FC<Props> = ({
             </>
           ) : undefined
         }
+        <Table.Column
+          dataIndex="comment"
+          title={t(pCommon("comment"))}
+          width="20%"
+        />
       </Table>
     </div>
 

diff --git a/apps/mis-web/src/pageComponents/job/HistoryJobTable.tsx b/apps/mis-web/src/pageComponents/job/HistoryJobTable.tsx
@@ -294,37 +294,39 @@ export const JobInfoTable: React.FC<JobInfoTableProps> = ({
           total: data?.totalCount,
           onChange: (page, pageSize) => setPageInfo({ page, pageSize }),
         } : false}
-        scroll={{ x: data?.jobs?.length ? 1200 : true }}
+        tableLayout="fixed"
+        scroll={{ x: data?.jobs?.length ? 1450 : true }}
       >
-        <Table.Column<JobInfo> dataIndex="idJob" width={100} title={t(pCommon("clusterWorkId"))} />
+        <Table.Column<JobInfo> dataIndex="idJob" width="7%" title={t(pCommon("clusterWorkId"))} />
+        <Table.Column<JobInfo> dataIndex="jobName" ellipsis title={t(pCommon("workName"))} />
         {
           showAccount ? (
-            <Table.Column<JobInfo> dataIndex="account" width={120} title={t(pCommon("account"))} />
+            <Table.Column<JobInfo> dataIndex="account" width="13%" ellipsis title={t(pCommon("account"))} />
           ) : undefined
         }
         {
           showUser ? (
-            <Table.Column<JobInfo> dataIndex="user" width={120} title={t(pCommon("user"))} />
+            <Table.Column<JobInfo> dataIndex="user" width="12%" ellipsis title={t(pCommon("user"))} />
           ) : undefined
         }
         <Table.Column<JobInfo>
           dataIndex="cluster"
           title={t(pCommon("clusterName"))}
-          width={150}
+          width="12%"
+          ellipsis
           render={(cluster) => getClusterName(cluster, languageId)}
         />
-        <Table.Column<JobInfo> dataIndex="partition" width={80} title={t(pCommon("partition"))} />
-        <Table.Column<JobInfo> dataIndex="qos" width={80} title="QOS" />
-        <Table.Column<JobInfo> dataIndex="jobName" ellipsis={true} title={t(pCommon("workName"))} />
+        <Table.Column<JobInfo> dataIndex="partition" width="8.5%" ellipsis title={t(pCommon("partition"))} />
+        <Table.Column<JobInfo> dataIndex="qos" width="8.5%" ellipsis title="QOS" />
         <Table.Column
           dataIndex="timeSubmit"
-          width={160}
+          width="11.5%"
           title={t(pCommon("timeSubmit"))}
           render={(time: string) => formatDateTime(time)}
         />
         <Table.Column<JobInfo>
           dataIndex="timeEnd"
-          width={160}
+          width="11.5%"
           title={t(pCommon("timeEnd"))}
           render={(time: string) => formatDateTime(time)}
         />
@@ -333,15 +335,16 @@ export const JobInfoTable: React.FC<JobInfoTableProps> = ({
             <Table.Column<JobInfo>
               key={i}
               dataIndex={`${v}Price`}
-              width={110}
+              width="8%"
               title={finalPriceText[v]}
               render={(price: Money) => moneyToString(price) + " " + t(pCommon("unit"))}
             />
           ))
         }
         <Table.Column<JobInfo>
           title={t(pCommon("more"))}
-          width={60}
+          width="4.5%"
+          fixed="right"
           render={(_, r) => <a onClick={() => setPreviewItem(r)}>{t(pCommon("detail"))}</a>}
         />
       </Table>

diff --git a/apps/mis-web/src/pageComponents/job/RunningJobTable.tsx b/apps/mis-web/src/pageComponents/job/RunningJobTable.tsx
@@ -214,7 +214,7 @@ type JobInfoTableProps = {
 const ChangeJobTimeLimitModalLink = ModalLink(ChangeJobTimeLimitModal);
 
 export const RunningJobInfoTable: React.FC<JobInfoTableProps> = ({
-  data, isLoading, reload, showAccount, showCluster, showUser, selection,
+  data, isLoading, reload, showAccount, showUser, showCluster, selection,
 }) => {
 
   const [previewItem, setPreviewItem] = useState<RunningJobInfo | undefined>(undefined);
@@ -253,38 +253,39 @@ export const RunningJobInfoTable: React.FC<JobInfoTableProps> = ({
         pagination={{ showSizeChanger: true }}
         rowKey={runningJobId}
         scroll={{ x: data?.length ? 1800 : true }}
+        tableLayout="fixed"
       >
         {
           showCluster && (
             <Table.Column<RunningJobInfo>
               dataIndex="cluster"
-              width={150}
+              width="9.5%"
               title={t(pCommon("cluster"))}
               render={(_, r) => getI18nConfigCurrentText(r.cluster.name, languageId)}
             />
           )
         }
-        <Table.Column<RunningJobInfo> dataIndex="jobId" width={80} title={t(pCommon("workId"))} />
+        <Table.Column<RunningJobInfo> dataIndex="jobId" width="5%" title={t(pCommon("workId"))} />
         {
           showUser && (
-            <Table.Column<RunningJobInfo> dataIndex="user" width={120} title={t(pCommon("user"))} />
+            <Table.Column<RunningJobInfo> dataIndex="user" width="8%" ellipsis title={t(pCommon("user"))} />
           )
         }
         {
           showAccount && (
-            <Table.Column<RunningJobInfo> dataIndex="account" width={120} title={t(pCommon("account"))} />
+            <Table.Column<RunningJobInfo> dataIndex="account" width="9.5%" ellipsis title={t(pCommon("account"))} />
           )
         }
-        <Table.Column<RunningJobInfo> dataIndex="name" width={200} ellipsis={true} title={t(pCommon("workName"))} />
-        <Table.Column<RunningJobInfo> dataIndex="partition" width={80} title={t(pCommon("partition"))} />
-        <Table.Column<RunningJobInfo> dataIndex="qos" width={80} title="QOS" />
-        <Table.Column<RunningJobInfo> dataIndex="nodes" width={80} title={t(p("nodes"))} />
-        <Table.Column<RunningJobInfo> dataIndex="cores" width={80} title={t(p("cores"))} />
-        <Table.Column<RunningJobInfo> dataIndex="gpus" width={90} title={t(p("gpus"))} />
-        <Table.Column<RunningJobInfo> dataIndex="state" width={110} title={t(pCommon("status"))} />
+        <Table.Column<RunningJobInfo> dataIndex="name" ellipsis title={t(pCommon("workName"))} />
+        <Table.Column<RunningJobInfo> dataIndex="partition" width="6.3%" ellipsis title={t(pCommon("partition"))} />
+        <Table.Column<RunningJobInfo> dataIndex="qos" width="6.3%" ellipsis title="QOS" />
+        <Table.Column<RunningJobInfo> dataIndex="nodes" width="4.4%" title={t(p("nodes"))} />
+        <Table.Column<RunningJobInfo> dataIndex="cores" width="4.4%" title={t(p("cores"))} />
+        <Table.Column<RunningJobInfo> dataIndex="gpus" width="4.4%" title={t(p("gpus"))} />
+        <Table.Column<RunningJobInfo> dataIndex="state" width="6%" title={t(pCommon("status"))} />
         <Table.Column
           dataIndex="runningOrQueueTime"
-          width={120}
+          width="6.3%"
           title={t(p("time"))}
         />
         <Table.Column
@@ -293,11 +294,12 @@ export const RunningJobInfoTable: React.FC<JobInfoTableProps> = ({
           title={t(p("reason"))}
           render={(d: string) => d.startsWith("(") && d.endsWith(")") ? d.substring(1, d.length - 1) : d}
         />
-        <Table.Column<RunningJobInfo> dataIndex="timeLimit" width={120} title={t(p("limit"))} />
+        <Table.Column<RunningJobInfo> dataIndex="timeLimit" width="6.5%" title={t(p("limit"))} />
 
         <Table.Column<RunningJobInfo>
           title={t(pCommon("more"))}
-          width={180}
+          width="9%"
+          fixed="right"
           render={(_, r) => (
             <Space>
               <a onClick={() => setPreviewItem(r)}>{t(pCommon("detail"))}</a>

diff --git a/apps/mis-web/src/pageComponents/tenant/AdminJobTable.tsx b/apps/mis-web/src/pageComponents/tenant/AdminJobTable.tsx
@@ -260,41 +260,49 @@ const JobInfoTable: React.FC<JobInfoTableProps> = ({
           total: data?.totalCount,
           onChange: (page, pageSize) => setPageInfo({ page, pageSize }),
         } : false}
-        scroll={{ x: true }}
+        tableLayout="fixed"
+        scroll={{ x: data?.jobs?.length ? 1800 : true }}
       >
-        <Table.Column<JobInfo> dataIndex="idJob" title={t(pCommon("clusterWorkId"))} />
-        <Table.Column<JobInfo> dataIndex="account" title={t(pCommon("account"))} />
-        <Table.Column<JobInfo> dataIndex="user" title={t(pCommon("user"))} />
+        <Table.Column<JobInfo> dataIndex="idJob" width="5.2%" title={t(pCommon("clusterWorkId"))} />
+        <Table.Column<JobInfo> dataIndex="jobName" ellipsis title={t(pCommon("workName"))} />
+        <Table.Column<JobInfo> dataIndex="account" ellipsis title={t(pCommon("account"))} />
+        <Table.Column<JobInfo> dataIndex="user" ellipsis title={t(pCommon("user"))} />
         <Table.Column<JobInfo>
           dataIndex="cluster"
+          ellipsis
           title={t(pCommon("cluster"))}
           render={(cluster) => getClusterName(cluster, languageId)}
         />
-        <Table.Column<JobInfo> dataIndex="partition" title={t(pCommon("partition"))} />
-        <Table.Column<JobInfo> dataIndex="qos" title="QOS" />
-        <Table.Column<JobInfo> dataIndex="jobName" title={t(pCommon("workName"))} />
+        <Table.Column<JobInfo> dataIndex="partition" width="6.7%" ellipsis title={t(pCommon("partition"))} />
+        <Table.Column<JobInfo> dataIndex="qos" width="6.7%" ellipsis title="QOS" />
         <Table.Column<JobInfo>
           dataIndex="timeSubmit"
+          width="8.9%"
           title={t(pCommon("timeSubmit"))}
           render={(time: string) => formatDateTime(time)}
         />
         <Table.Column<JobInfo>
           dataIndex="timeEnd"
+          width="8.9%"
           title={t(pCommon("timeEnd"))}
           render={(time: string) => formatDateTime(time)}
         />
         <Table.Column<JobInfo>
           dataIndex="accountPrice"
+          width="6.1%"
           title={t(p("tenantPrice"))}
           render={(price: Money) => moneyToString(price)}
         />
         <Table.Column<JobInfo>
           dataIndex="tenantPrice"
+          width="6.1%"
           title={t(p("platformPrice"))}
           render={(price: Money) => moneyToString(price)}
         />
         <Table.Column<JobInfo>
           title={t(pCommon("more"))}
+          fixed="right"
+          width="4%"
           render={(_, r) => <a onClick={() => setPreviewItem(r)}>{t(pCommon("detail"))}</a>}
         />
       </Table>

diff --git a/apps/mis-web/src/pageComponents/tenant/AdminUserTable.tsx b/apps/mis-web/src/pageComponents/tenant/AdminUserTable.tsx
@@ -135,6 +135,7 @@ export const AdminUserTable: React.FC<Props> = ({
       </FilterFormContainer>
 
       <Table
+        tableLayout="fixed"
         dataSource={filteredData}
         loading={isLoading}
         pagination={{
@@ -143,7 +144,7 @@ export const AdminUserTable: React.FC<Props> = ({
           onChange: (page) => setCurrentPageNum(page),
         }}
         rowKey="id"
-        scroll={{ x: true }}
+        scroll={{ x: filteredData?.length ? 1200 : true }}
         onChange={handleTableChange}
       >
         <Table.Column<FullUserInfo>
@@ -190,6 +191,8 @@ export const AdminUserTable: React.FC<Props> = ({
         <Table.Column<FullUserInfo>
           dataIndex="changePassword"
           title={t(pCommon("operation"))}
+          width="8%"
+          fixed="right"
           render={(_, r) => (
             <Space split={<Divider type="vertical" />}>
               <ChangePasswordModalLink

diff --git a/apps/portal-web/src/i18n/en.ts b/apps/portal-web/src/i18n/en.ts
@@ -138,7 +138,6 @@ export default {
         jobInfoTable: {
           cluster: "Cluster",
           jobId: "Job ID",
-          user: "User",
           account: "Account",
           name: "Job Name",
           partition: "Partition",

diff --git a/apps/portal-web/src/i18n/zh_cn.ts b/apps/portal-web/src/i18n/zh_cn.ts
@@ -138,7 +138,6 @@ export default {
         jobInfoTable: {
           cluster: "集群",
           jobId: "作业ID",
-          user: "用户",
           account: "账户",
           name: "作业名",
           partition: "分区",