style(web): 优化表格样式和布局

- 为表格添加自定义样式类 m-table - 设置表头背景渐变和透明度 - 调整模态框样式，包括按钮、头部和内容区域 - 在多个组件中应用这些样式，如 flow-template-modal、arguments-modal、prompt 等
5 months ago · 5eb93b5c84
parent a6691ead8c
commit 5eb93b5c84
18 changed files with 321 additions and 19 deletions
--- a/web/components/flow/canvas-modal/flow-template-modal.tsx
+++ b/web/components/flow/canvas-modal/flow-template-modal.tsx
@ -4,7 +4,8 @@ import type { TableProps } from 'antd';
 import { Button, Modal, Space, Table } from 'antd';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import cls from 'classnames';
+import './index.scss';
 type Props = {
  isFlowTemplateModalOpen: boolean;
  setIsFlowTemplateModalOpen: (value: boolean) => void;
@ -87,7 +88,8 @@ export const FlowTemplateModal: React.FC<Props> = ({ isFlowTemplateModalOpen, se
        okButtonProps={{ className: 'hidden' }}
      >
        <Table
-          className='w-full'
+        className={cls('m-table w-full')}
+          // className='w-full'
          // scroll={{ x: 'max-content' }}
          dataSource={dataSource}
          columns={columns}
--- a/web/components/flow/canvas-modal/index.scss
+++ b/web/components/flow/canvas-modal/index.scss
@ -0,0 +1,35 @@
+.m-btn {
+    background: #0f4debba;
+    border-radius: 10px;
+    color: #fff;
+    padding: 20px 12px;
+
+    &:hover {
+        background: #1060FF !important;
+    }
+}
+
+.m-table{
+
+    thead{
+        background: linear-gradient(180deg, #1060FF20 0%, rgba(16,96,255,0) 100%);
+    }
+
+    .ant-table-thead >tr>th{
+        background-color: transparent;
+    }
+}
+
+.ant-modal{
+    padding-bottom: 0;
+    background-color: #fff;
+    border-radius: 15px;
+
+    .ant-modal-header{
+        background-color: transparent;
+    }
+
+    .ant-modal-content {
+        background: linear-gradient(180deg, #1060FF15 0%, rgba(16, 96, 255, 0) 100%);
+    }
+}
--- a/web/components/knowledge/arguments-modal.tsx
+++ b/web/components/knowledge/arguments-modal.tsx
@ -30,7 +30,7 @@ export default function ArgumentsModal({ space, argumentsShow, setArgumentsShow

  const renderEmbeddingForm = () => {
    return (
-      <Row gutter={24}>
+      <Row gutter={24} className='pt-[80px]'>
        <Col span={12} offset={0}>
          <Form.Item<IArguments>
            tooltip={t(`the_top_k_vectors`)}
@ -97,7 +97,7 @@ export default function ArgumentsModal({ space, argumentsShow, setArgumentsShow

  const renderPromptForm = () => {
    return (
-      <>
+      <div className='pt-[80px]'>
        <Form.Item<IArguments> tooltip={t(`A_contextual_parameter`)} label={t('scene')} name={['prompt', 'scene']}>
          <TextArea rows={4} className='mb-2' />
        </Form.Item>
@ -111,13 +111,13 @@ export default function ArgumentsModal({ space, argumentsShow, setArgumentsShow
        >
          <Input className='mb-2' />
        </Form.Item>
-      </>
+      </div>
    );
  };

  const renderSummary = () => {
    return (
-      <>
+      <div className='pt-[80px]'>
        <Form.Item<IArguments>
          rules={[{ required: true }]}
          label={t('max_iteration')}
@ -132,7 +132,7 @@ export default function ArgumentsModal({ space, argumentsShow, setArgumentsShow
        >
          <Input className='mb-2' />
        </Form.Item>
-      </>
+      </div>
    );
  };

@ -199,7 +199,18 @@ export default function ArgumentsModal({ space, argumentsShow, setArgumentsShow
          autoComplete='off'
          onFinish={handleSubmit}
        >
-          <Tabs items={items}></Tabs>
+          <Tabs
+            tabBarStyle={{
+              background: 'transparent',
+              border: 'none',
+              height: '2.4rem',
+              padding: '0 0.5rem',
+            }}
+            size='small'
+            indicator={{ size: origin => origin - 80, align: 'center' }}
+            items={items}>
+
+          </Tabs>
          <div className='mt-3 mb-3'>
            <Button htmlType='submit' type='primary' className='mr-6'>
              {t('Submit')}
--- a/web/pages/construct/app/index.scss
+++ b/web/pages/construct/app/index.scss
@ -7,4 +7,30 @@
    &:hover {
        background: #1060FF !important;
    }
+}
+
+.m-table{
+
+    thead{
+        background: linear-gradient(180deg, #1060FF20 0%, rgba(16,96,255,0) 100%);
+    }
+
+    .ant-table-thead >tr>th{
+        background-color: transparent;
+    }
+}
+
+
+.ant-modal{
+    padding-bottom: 0;
+    background-color: #fff;
+    border-radius: 15px;
+
+    .ant-modal-header{
+        background-color: transparent;
+    }
+
+    .ant-modal-content {
+        background: linear-gradient(180deg, #1060FF15 0%, rgba(16, 96, 255, 0) 100%);
+    }
 }
--- a/web/pages/construct/prompt/[type]/index.tsx
+++ b/web/pages/construct/prompt/[type]/index.tsx
@ -41,18 +41,18 @@ const TypeOptions = [
    value: 'Agent',
    label: '智能体',
  },
-  {
-    value: 'Scene',
-    label: '场景',
-  },
+  // {
+  //   value: 'Scene',
+  //   label: '场景',
+  // },
  {
    value: 'Normal',
    label: '常规',
  },
-  // {
-  //   value: 'Evaluate',
-  //   label: '评价',
-  // },
+  {
+    value: 'Evaluate',
+    label: '评价',
+  },
 ];

 interface BottomFormProps {
--- a/web/pages/construct/prompt/index.scss
+++ b/web/pages/construct/prompt/index.scss
@ -0,0 +1,35 @@
+.m-btn {
+    background: #0f4debba;
+    border-radius: 10px;
+    color: #fff;
+    padding: 20px 12px;
+
+    &:hover {
+        background: #1060FF !important;
+    }
+}
+
+.m-table{
+
+    thead{
+        background: linear-gradient(180deg, #1060FF20 0%, rgba(16,96,255,0) 100%);
+    }
+
+    .ant-table-thead >tr>th{
+        background-color: transparent;
+    }
+}
+
+.ant-modal{
+    padding-bottom: 0;
+    background-color: #fff;
+    border-radius: 15px;
+
+    .ant-modal-header{
+        background-color: transparent;
+    }
+
+    .ant-modal-content {
+        background: linear-gradient(180deg, #1060FF15 0%, rgba(16, 96, 255, 0) 100%);
+    }
+}
--- a/web/pages/construct/prompt/index.tsx
+++ b/web/pages/construct/prompt/index.tsx
@ -13,7 +13,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

 import cls from 'classnames';
-import '../app/index.scss';
+import './index.scss';
 import styles from './styles.module.css';
 const LangMap = { zh: '中文', en: 'English' };

@ -185,6 +185,7 @@ const Prompt = () => {
          </div>
        </div>
        <Table
+          className={cls('m-table')}
          columns={getColumns(t, handleEditBtn)}
          dataSource={promptList?.items || []}
          loading={loading}
--- a/web/pages/construct/prompt/styles.module.css
+++ b/web/pages/construct/prompt/styles.module.css
@ -16,4 +16,4 @@
  display: flex;
  flex-direction: column;
  justify-content: space-between;
-}
+}
--- a/web/pages/evaluation/index.scss
+++ b/web/pages/evaluation/index.scss
@ -0,0 +1,35 @@
+.m-btn {
+    background: #0f4debba;
+    border-radius: 10px;
+    color: #fff;
+    padding: 20px 12px;
+
+    &:hover {
+        background: #1060FF !important;
+    }
+}
+
+.m-table{
+
+    thead{
+        background: linear-gradient(180deg, #1060FF20 0%, rgba(16,96,255,0) 100%);
+    }
+
+    .ant-table-thead >tr>th{
+        background-color: transparent;
+    }
+}
+
+.ant-modal{
+    padding-bottom: 0;
+    background-color: #fff;
+    border-radius: 15px;
+
+    .ant-modal-header{
+        background-color: transparent;
+    }
+
+    .ant-modal-content {
+        background: linear-gradient(180deg, #1060FF15 0%, rgba(16, 96, 255, 0) 100%);
+    }
+}
--- a/web/pages/evaluation/index.tsx
+++ b/web/pages/evaluation/index.tsx
@ -38,6 +38,8 @@ import {
 } from 'antd';
 import { valueType } from 'antd/es/statistic/utils';
 import { useMemo, useState } from 'react';
+import cls from 'classnames';
+import './index.scss';

 const { TextArea } = Input;
 const { useWatch } = Form;
@ -583,6 +585,7 @@ const Evaluation = () => {
                </Button>
              </div>
              <Table
+              className={cls('m-table')}
                pagination={{
                  total: dataSetsTotal,
                  onChange(page) {
@ -609,6 +612,7 @@ const Evaluation = () => {
                </Button>
              </div>
              <Table
+              className={cls('m-table')}
                pagination={{
                  total: evaluationTotal,
                  onChange(page) {
@ -914,6 +918,7 @@ const Evaluation = () => {
            ]}
          >
            <Table
+            className={cls('m-table')}
              columns={Object.keys(evaluationShowData?.[0]).map(key => ({
                title: key,
                dataIndex: key,
--- a/web/pages/system/menu/index.scss
+++ b/web/pages/system/menu/index.scss
@ -0,0 +1,35 @@
+.m-btn {
+    background: #0f4debba;
+    border-radius: 10px;
+    color: #fff;
+    padding: 20px 12px;
+
+    &:hover {
+        background: #1060FF !important;
+    }
+}
+
+.m-table{
+
+    thead{
+        background: linear-gradient(180deg, #1060FF20 0%, rgba(16,96,255,0) 100%);
+    }
+
+    .ant-table-thead >tr>th{
+        background-color: transparent;
+    }
+}
+
+.ant-modal{
+    padding-bottom: 0;
+    background-color: #fff;
+    border-radius: 15px;
+
+    .ant-modal-header{
+        background-color: transparent;
+    }
+
+    .ant-modal-content {
+        background: linear-gradient(180deg, #1060FF15 0%, rgba(16, 96, 255, 0) 100%);
+    }
+}
--- a/web/pages/system/menu/index.tsx
+++ b/web/pages/system/menu/index.tsx
@ -29,6 +29,8 @@ import { TFunction } from 'i18next';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './index.module.scss';
+import cls from 'classnames';
+import './index.scss';

 const { Option } = Select;

@ -411,6 +413,7 @@ const Prompt = () => {
        </Modal>

        <Table
+        className={cls('m-table')}
          columns={getMenuColumns(t)}
          dataSource={menuList}
          rowKey='id'
--- a/web/pages/system/organization/index.scss
+++ b/web/pages/system/organization/index.scss
@ -0,0 +1,35 @@
+.m-btn {
+    background: #0f4debba;
+    border-radius: 10px;
+    color: #fff;
+    padding: 20px 12px;
+
+    &:hover {
+        background: #1060FF !important;
+    }
+}
+
+.m-table{
+
+    thead{
+        background: linear-gradient(180deg, #1060FF20 0%, rgba(16,96,255,0) 100%);
+    }
+
+    .ant-table-thead >tr>th{
+        background-color: transparent;
+    }
+}
+
+.ant-modal{
+    padding-bottom: 0;
+    background-color: #fff;
+    border-radius: 15px;
+
+    .ant-modal-header{
+        background-color: transparent;
+    }
+
+    .ant-modal-content {
+        background: linear-gradient(180deg, #1060FF15 0%, rgba(16, 96, 255, 0) 100%);
+    }
+}
--- a/web/pages/system/organization/index.tsx
+++ b/web/pages/system/organization/index.tsx
@ -22,6 +22,8 @@ import { TFunction } from 'i18next';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './index.module.scss';
+import cls from 'classnames';
+import './index.scss';

 const { Option } = Select;
 type LayoutType = Parameters<typeof Form>[0]['layout'];
@ -369,7 +371,8 @@ const Prompt = () => {
        </Modal>

        <Table
-          columns={getColumns(t, handleEditBtn)}
+  className={cls('m-table')}
+  columns={getColumns(t, handleEditBtn)}
          dataSource={promptList?.dept_list || []}
          rowKey={record => record.id}
          loading={loadingOrgs}
--- a/web/pages/system/role/index.scss
+++ b/web/pages/system/role/index.scss
@ -0,0 +1,34 @@
+.m-btn {
+    background: #0f4debba;
+    border-radius: 10px;
+    color: #fff;
+    padding: 20px 12px;
+
+    &:hover {
+        background: #1060FF !important;
+    }
+}
+
+.m-table {
+
+    thead {
+        background: linear-gradient(180deg, #1060FF20 0%, rgba(16, 96, 255, 0) 100%);
+    }
+
+    .ant-table-thead>tr>th {
+        background-color: transparent;
+    }
+}
+.ant-modal{
+    padding-bottom: 0;
+    background-color: #fff;
+    border-radius: 15px;
+
+    .ant-modal-header{
+        background-color: transparent;
+    }
+
+    .ant-modal-content {
+        background: linear-gradient(180deg, #1060FF15 0%, rgba(16, 96, 255, 0) 100%);
+    }
+}
--- a/web/pages/system/role/index.tsx
+++ b/web/pages/system/role/index.tsx
@ -37,6 +37,8 @@ import { TFunction } from 'i18next';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './index.module.scss';
+import cls from 'classnames';
+import './index.scss';
 dayjs.locale('zh-cn');
 const { Option } = Select;
 const { RangePicker } = DatePicker;
@ -384,6 +386,7 @@ const Prompt = () => {
          </div>
        </Form>
        <Modal
+        className={cls('a')}
          title={modalType === 'add' ? '新增角色' : '编辑角色'}
          open={modalVisible}
          onCancel={() => {
@ -519,6 +522,7 @@ const Prompt = () => {
          </div>
        </Modal>
        <Table
+        className={cls('m-table')}
          columns={getColumns(t, handleEditBtn)}
          dataSource={promptList?.roles || []} // 改为使用roles字段
          rowKey={record => record.id}
--- a/web/pages/system/user/index.scss
+++ b/web/pages/system/user/index.scss
@ -0,0 +1,35 @@
+.m-btn {
+    background: #0f4debba;
+    border-radius: 10px;
+    color: #fff;
+    padding: 20px 12px;
+
+    &:hover {
+        background: #1060FF !important;
+    }
+}
+
+.m-table{
+
+    thead{
+        background: linear-gradient(180deg, #1060FF20 0%, rgba(16,96,255,0) 100%);
+    }
+
+    .ant-table-thead >tr>th{
+        background-color: transparent;
+    }
+}
+
+.ant-modal{
+    padding-bottom: 0;
+    background-color: #fff;
+    border-radius: 15px;
+
+    .ant-modal-header{
+        background-color: transparent;
+    }
+
+    .ant-modal-content {
+        background: linear-gradient(180deg, #1060FF15 0%, rgba(16, 96, 255, 0) 100%);
+    }
+}
--- a/web/pages/system/user/index.tsx
+++ b/web/pages/system/user/index.tsx
@ -26,6 +26,8 @@ import styles from './index.module.scss';
 dayjs.locale('zh-cn');
 const { Option } = Select;
 type LayoutType = Parameters<typeof Form>[0]['layout'];
+import cls from 'classnames';
+import './index.scss';

 const Prompt = () => {
  const { message } = App.useApp();
@ -645,6 +647,7 @@ const Prompt = () => {
          </Form>
        </Modal>
        <Table
+          className={cls('m-table')}
          columns={getColumns(t, handleEditBtn)}
          dataSource={promptList?.user_list || []}
          rowKey='id'