feat(web): table ui

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-03-24 16:12:56
+ * @Last Modified time: 2026-03-25 17:11:55
  */
 /**
  * RbTable Component
@@ -30,21 +30,21 @@ import Empty from '@/components/Empty';
 interface TablePaginationConfig { pagesize: number; page: number; }
 
 /** Props interface for Table component */
-interface TableComponentProps extends Omit<TableProps, 'pagination'> {
+interface TableComponentProps<T = Record<string, unknown>, Q = Record<string, unknown>> extends Omit<TableProps<T>, 'pagination'> {
   /** Table column definitions */
-  columns: ColumnsType;
+  columns: ColumnsType<T>;
   /** API endpoint URL for data fetching */
   apiUrl?: string;
   /** Query parameters for API request */
-  apiParams?: Record<string, unknown>;
+  apiParams?: Q;
   /** Pagination configuration or boolean to enable/disable */
   pagination?: boolean | TablePaginationConfig;
   /** Key to use for row identification */
   rowKey: string;
   /** Row selection configuration */
-  rowSelection?: TableProps['rowSelection'];
+  rowSelection?: TableProps<T>['rowSelection'];
   /** Initial data to display (used when no API) */
-  initialData?: Record<string, unknown>[];
+  initialData?: T[];
   /** Size of empty state icon */
   emptySize?: number;
   /** Custom empty state text */
@@ -81,7 +81,7 @@ const dealSo = (params: any) => {
 }
 
 /** Table component with pagination and API integration */
-const RbTable = forwardRef<TableRef, TableComponentProps>(({
+const RbTable = forwardRef(<T = Record<string, unknown>, Q = Record<string, unknown>>({
   columns,
   apiUrl,
   apiParams,
@@ -96,9 +96,9 @@ const RbTable = forwardRef<TableRef, TableComponentProps>(({
   scrollY,
   currentPageKey = 'page',
   ...props
-}, ref) => {
+}: TableComponentProps<T, Q>, ref: React.Ref<TableRef>) => {
   const { t } = useTranslation();
-  const [data, setData] = useState<Record<string, unknown>[]>(initialData || [])
+  const [data, setData] = useState<T[]>(initialData || [])
   const [loading, setLoading] = useState(false)
   const [currentPagination, setCurrentPagination] = useState({
     page: 1,
@@ -122,7 +122,7 @@ const RbTable = forwardRef<TableRef, TableComponentProps>(({
       })
     }
   }
-  
+
   /** Fetch data from API with pagination */
   const getList = (pageData: TablePaginationConfig) => {
     if (!apiUrl) {
@@ -134,7 +134,7 @@ const RbTable = forwardRef<TableRef, TableComponentProps>(({
         ...currentPagination,
         ...pageData,
       })
-      params = { ...params, ...pageData, [currentPageKey]: pageData.page}
+      params = { ...params, ...pageData, [currentPageKey]: pageData.page }
     }
     setLoading(true)
     /** Build query parameters and call API */
@@ -151,7 +151,7 @@ const RbTable = forwardRef<TableRef, TableComponentProps>(({
         setLoading(false)
       })
   }
-  
+
   /** Reload data when initialized or apiParams changes */
   useEffect(() => {
     loadData()
@@ -164,7 +164,7 @@ const RbTable = forwardRef<TableRef, TableComponentProps>(({
       pagesize
     })
   }
-  
+
   /** Pagination configuration with i18n support */
   const paginationConfig = pagination ? ({
     ...(typeof pagination === 'object' ? pagination : {}),
@@ -173,7 +173,7 @@ const RbTable = forwardRef<TableRef, TableComponentProps>(({
     onChange: handlePageChange,
     showSizeChanger: true,
     showQuickJumper: true,
-    showTotal: (totalCount: number) => t('table.totalRecords', {total: totalCount})
+    showTotal: (totalCount: number) => t('table.totalRecords', { total: totalCount })
   }) : false;
 
 
@@ -186,27 +186,27 @@ const RbTable = forwardRef<TableRef, TableComponentProps>(({
   /** Calculate scroll configuration based on props */
   const getScrollConfig = () => {
     if (!isScroll && !scrollX && !scrollY) return undefined;
-    
+
     const config: { x?: number | string | true; y?: number | string } = {};
-    
+
     /** Only apply horizontal scroll when there is data */
     if (scrollX !== undefined && data.length > 0) {
       config.x = scrollX;
     } else if (isScroll) {
       config.x = 'max-content';
     }
-    
+
     if (scrollY !== undefined) {
       config.y = scrollY;
     } else if (isScroll) {
-      config.y = 'calc(100vh - 256px)';
+      config.y = 'calc(100vh - 232px)';
     }
-    
+
     return Object.keys(config).length > 0 ? config : undefined;
   };
 
   return (
-    <Table
+    <Table<T>
       {...props}
       rowKey={rowKey}
       loading={loading}
@@ -219,6 +219,6 @@ const RbTable = forwardRef<TableRef, TableComponentProps>(({
       tableLayout="auto"
     />
   );
-});
+}) as <T = Record<string, unknown>, Q = Record<string, unknown>>(props: TableComponentProps<T, Q> & { ref?: React.Ref<TableRef> }) => React.ReactElement;
 
 export default RbTable;

web/src/i18n/en.ts

@@ -1444,6 +1444,7 @@ export const en = {
       noShareAuth: 'No permission to share apps',
       appCount: '{{count}} apps shared to this space',
       resetFeaturesTip: 'Please reconfigure the [Conversation Features - File Upload] settings',
+      logTitle: 'Description',
     },
     userMemory: {
       userMemory: 'User Memory',

web/src/i18n/zh.ts

@@ -819,6 +819,7 @@ export const zh = {
       noShareAuth: '无共享应用的权限',
       appCount: '{{count}}个应用共享到此空间',
       resetFeaturesTip: '请重新配置【对话功能-文件上传】功能',
+      logTitle: '描述',
     },
     table: {
       totalRecords: '共 {{total}} 条记录'

web/src/styles/index.css

@@ -156,6 +156,19 @@ body {
   border-radius: 12px;
   border: none;
 }
+
+.ant-table-wrapper .ant-table.ant-table-bordered {
+  border-radius: 12px;
+}
+.ant-table-wrapper table.ant-table-bordered {
+  border-radius: 12px;
+}
+.ant-table-bordered .ant-table-row:last-child .ant-table-cell:first-child {
+  border-bottom-left-radius: 12px;
+}
+.ant-table-bordered .ant-table-row:last-child .ant-table-cell:last-child {
+  border-bottom-right-radius: 12px;
+}
 .ant-table-wrapper table {
   border-radius: 12px;
 }
@@ -200,6 +213,18 @@ body {
 .table-header.ant-table-wrapper .ant-table-thead>tr>th,
 .table-header.ant-table-wrapper .ant-table-thead>tr>td {
   background-color: #F6F6F6;
+  border-bottom: 1px solid #EBEBEB;
+}
+.ant-table-wrapper .ant-table-bordered .ant-table-thead>tr>th,
+.ant-table-wrapper .ant-table-bordered .ant-table-thead>tr>td,
+.table-header.ant-table-wrapper .ant-table-bordered .ant-table-thead>tr>th,
+.table-header.ant-table-wrapper .ant-table-bordered .ant-table-thead>tr>td {
+  background-color: #FFFFFF;
+  font-weight: 500;
+}
+.ant-table-wrapper .ant-table.ant-table-small.ant-table-bordered .ant-table-tbody>tr>th,
+.ant-table-wrapper .ant-table.ant-table-small.ant-table-bordered .ant-table-tbody>tr>td {
+  color: #171719;
 }
 .ant-table-wrapper .ant-btn {
   height: 24px;

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,

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>

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}

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<{
+  operations: 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[]
-  }>
 }
 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'),

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>

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

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}

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;
 }