feat(web): table ui

2026-03-25 17:13:54 +08:00
parent 0380c13a3b
commit 56fd5680cf
12 changed files with 91 additions and 53 deletions
--- a/web/src/views/ApplicationConfig/Logs.tsx
+++ b/web/src/views/ApplicationConfig/Logs.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-03-24 15:41:20 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 16:06:44
+ * @Last Modified time: 2026-03-25 16:20:32
 */
 import { type FC, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -26,7 +26,7 @@ const Statistics: FC = () => {
  }

  /** Table column configuration */
-  const columns: ColumnsType = [
+  const columns: ColumnsType<LogItem> = [
    {
      title: t('application.logTitle'),
      dataIndex: 'title',
@@ -62,7 +62,7 @@ const Statistics: FC = () => {
  ];
  return (
    <div className="rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
-      <Table
+      <Table<LogItem>
        apiUrl={getAppLogsUrl(id || '')}
        apiParams={{
          is_draft: false,
--- a/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
+++ b/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:26:32 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-25 15:09:09
+ * @Last Modified time: 2026-03-25 17:10:30
 */
 /**
 * Variable List Component
@@ -78,9 +78,10 @@ interface VariableListProps {
            <>
              {fields.length > 0 ? (
                <div className="rb:mt-3">
-                  <Table
+                  <Table<Variable>
                    size="small"
                    rowKey="index"
+                    bordered={true}
                    pagination={false}
                    columns={[
                      {
@@ -123,7 +124,7 @@ interface VariableListProps {
                        ),
                      },
                    ]}
-                    initialData={value as unknown as Record<string, unknown>[]}
+                    initialData={value}
                    emptySize={88}
                  />
                </div>
--- a/web/src/views/MemberManagement/index.tsx
+++ b/web/src/views/MemberManagement/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:42:12 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 16:49:45
+ * @Last Modified time: 2026-03-25 16:25:23
 */
 /**
 * Member Management Page
@@ -13,7 +13,6 @@ import React, { useRef } from 'react';
 import { App, Button, Space, Flex } from 'antd';
 import { useTranslation } from 'react-i18next';
 import type { ColumnsType } from 'antd/es/table';
-import type { AnyObject } from 'antd/es/_util/type';

 import { deleteMember, memberListUrl } from '@/api/member';
 import MemberModal from './components/MemberModal';
@@ -61,7 +60,7 @@ const MemberManagement: React.FC = () => {
  };

  /** Table column configuration */
-  const columns: ColumnsType = [
+  const columns: ColumnsType<Member> = [
    {
      title: t('member.username'),
      dataIndex: 'username',
@@ -89,15 +88,15 @@ const MemberManagement: React.FC = () => {
    {
      title: t('common.operation'),
      key: 'action',
-      render: (_, record: AnyObject) => (
+      render: (_, record) => (
        <Space size="large">
          <Button
            type="link"
-            onClick={() => handleEdit(record as Member)}
+            onClick={() => handleEdit(record)}
          >
            {t('common.edit')}
          </Button>
-          <Button type="link" danger onClick={() => handleDelete(record as Member)}>
+          <Button type="link" danger onClick={() => handleDelete(record)}>
            {t('common.delete')}
          </Button>
        </Space>
@@ -112,7 +111,7 @@ const MemberManagement: React.FC = () => {
          {t('member.createMember')}
        </Button>
      </Flex>
-      <Table
+      <Table<Member>
        ref={tableRef}
        apiUrl={memberListUrl}
        columns={columns}
--- a/web/src/views/ToolManagement/components/CustomToolModal.tsx
+++ b/web/src/views/ToolManagement/components/CustomToolModal.tsx
@@ -12,21 +12,23 @@ const FormItem = Form.Item;
 interface CustomToolModalProps {
  refresh: () => void;
 }
+
+interface OperationItem {
+  method: string;
+  path: string;
+  summary: string;
+  description: string;
+  parameters: Record<string, Record<string, string | null>>
+  request_body: null | string;
+  responses: Record<string, Record<string, string | null>>
+  tags: string[]
+}
 interface ParseSchemaData {
  title: string;
  description: string;
  version: string;
  base_url: string;
-  operations: Array<{
-    method: string;
-    path: string;
-    summary: string;
-    description: string;
-    parameters: Record<string, Record<string, string | null>>
-    request_body: null | string;
-    responses: Record<string, Record<string, string | null>>
-    tags: string[]
-  }>
+  operations: OperationItem[]
 }
 const authTypeList = ['none', 'api_key', 'basic_auth']
 const CustomToolModal = forwardRef<CustomToolModalRef, CustomToolModalProps>(({
@@ -170,9 +172,10 @@ const CustomToolModal = forwardRef<CustomToolModalRef, CustomToolModalProps>(({
        <Form.Item
          label={t('tool.availableTools')}
        >
-          <Table
+          <Table<OperationItem>
            rowKey="summary"
            pagination={false}
+            bordered={true}
            columns={[
              {
                title: t('tool.name'),
--- a/web/src/views/ToolManagement/components/McpServiceModal.tsx
+++ b/web/src/views/ToolManagement/components/McpServiceModal.tsx
@@ -355,9 +355,10 @@ const McpServiceModal = forwardRef<McpServiceModalRef, McpServiceModalProps>(({
          {requestHeaderList.length === 0
            ? <Empty size={88} />
            : 
-            <Table
+            <Table<RequestHeader>
              rowKey="key"
              pagination={false}
+              bordered={true}
              columns={[
                {
                  title: t('tool.requestHeaderName'),
@@ -381,7 +382,7 @@ const McpServiceModal = forwardRef<McpServiceModalRef, McpServiceModalProps>(({
                    <Space size="middle">
                      <Button
                        type="link"
-                        onClick={() => handleEditRequestHeader(index, record as RequestHeader)}
+                        onClick={() => handleEditRequestHeader(index, record)}
                      >
                        {t('common.edit')}
                      </Button>
--- 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-03-25 10:41:25
+ * @Last Modified time: 2026-03-25 16:45:18
 */
 /**
 * User Management Page
@@ -63,7 +63,7 @@ const UserManagement: React.FC = () => {
  };

  /** Table column configuration */
-  const columns: ColumnsType = [
+  const columns: ColumnsType<User> = [
    {
      title: t('user.userId'),
      dataIndex: 'id',
@@ -150,7 +150,7 @@ const UserManagement: React.FC = () => {
        </Button>
      </Flex>

-      <Table
+      <Table<User>
        ref={tableRef}
        apiUrl={getUserListUrl}
        apiParams={{
@@ -159,6 +159,7 @@ const UserManagement: React.FC = () => {
        columns={columns}
        rowKey="id"
        isScroll={true}
+        scrollY="calc(100vh - 256px)"
      />

      <CreateModal
--- a/web/src/views/Workflow/components/Properties/VariableSelect.tsx
+++ b/web/src/views/Workflow/components/Properties/VariableSelect.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:40:13 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 16:03:59
+ * @Last Modified time: 2026-03-25 16:54:44
 */
 import { type FC } from 'react'
 import clsx from 'clsx';
@@ -40,6 +40,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
  onChange,
  size = 'middle',
  filterBooleanType = false,
+  mode,
  ...resetPorps
 }) => {

@@ -63,9 +64,10 @@ const VariableSelect: FC<VariableSelectProps> = ({
    if (filterOption) {
      return (
        <span
-          className={clsx("rb:max-w-full rb:wrap-break-word rb:line-clamp-1 rb-border rb:rounded-md rb:bg-white rb:text-[12px] rb:inline-flex rb:items-center rb:px-1.5 rb:cursor-pointer", {
+          className={clsx("rb:max-w-full rb:wrap-break-word rb:line-clamp-1 rb:rounded-md rb:bg-white rb:text-[12px] rb:inline-flex rb:items-center rb:px-1.5 rb:cursor-pointer", {
            'rb:leading-5.5!': size !== 'small',
-            'rb:leading-4! rb:text-[10px]!': size === 'small'
+            'rb:leading-4! rb:text-[10px]!': size === 'small',
+            'rb-border': mode !== "multiple"
          })}
          contentEditable={false}
        >
@@ -131,6 +133,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
  return (
    <Select
      {...resetPorps}
+      mode={mode}
      size={size}
      placeholder={placeholder}
      value={value}
--- a/web/src/views/Workflow/components/Properties/properties.module.css
+++ b/web/src/views/Workflow/components/Properties/properties.module.css
@@ -15,6 +15,9 @@
 .properties :global(.ant-select-multiple.ant-select-sm .ant-select-selector) {
  min-height: 28px;
 }
+.properties :global(.ant-select-multiple.ant-select-sm .ant-select-selection-item) {
+  height: 18px;
+}
 .properties :global(:not(.select).ant-select-single.ant-select-sm.ant-select-borderless) {
  height: 22px;
 }