[improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. (#404)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.
2025-12-16 06:56:57 +00:00 · 2023-11-20 12:04:08 +08:00
parent 0143b0a1b2
commit 80ad75503b
84 changed files with 9472 additions and 737 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
@@ -118,7 +118,7 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
              cover={
                <CoffeeOutlined
                  width={240}
-                  style={{ paddingTop: '45px', height: 120, fontSize: '48px', color: '#1890ff' }}
+                  style={{ paddingTop: '45px', height: 75, fontSize: '48px', color: '#1890ff' }}
                />
              }
            >
@@ -137,7 +137,7 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
              style={{ height: 220 }}
              cover={
                <ConsoleSqlOutlined
-                  style={{ paddingTop: '45px', height: 120, fontSize: '48px', color: '#1890ff' }}
+                  style={{ paddingTop: '45px', height: 75, fontSize: '48px', color: '#1890ff' }}
                />
              }
            >
@@ -185,6 +185,9 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
          onDataSourceBtnClick={() => {
            setDataSourceEditOpen(true);
          }}
+          onOpenDataSourceEdit={() => {
+            setDataSourceEditOpen(true);
+          }}
        >
          <Drawer
            width={'100%'}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
@@ -18,6 +18,7 @@ import DimensionValueSettingModal from './DimensionValueSettingModal';
 import { updateDimension } from '../service';
 import { ISemantic, IDataSource } from '../data';
 import moment from 'moment';
+import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
 import styles from './style.less';

 type Props = {
@@ -328,7 +329,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    },
  ];

-  const onMenuClick = ({ key }: { key: string }) => {
+  const onMenuClick = (key: string) => {
    switch (key) {
      case 'batchStart':
        queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
@@ -386,12 +387,14 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
          >
            创建维度
          </Button>,
-          <Dropdown.Button
+          <BatchCtrlDropDownButton
            key="ctrlBtnList"
-            menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
-          >
-            批量操作
-          </Dropdown.Button>,
+            onDeleteConfirm={() => {
+              queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
+            }}
+            hiddenList={['batchDownload']}
+            onMenuClick={onMenuClick}
+          />,
        ]}
      />

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
@@ -1,16 +1,21 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
-import { message, Button, Space, Popconfirm, Input, Tag, Dropdown } from 'antd';
+import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
 import React, { useRef, useState } from 'react';
 import type { Dispatch } from 'umi';
 import { StatusEnum } from '../enum';
 import { connect } from 'umi';
 import type { StateType } from '../model';
 import { SENSITIVE_LEVEL_ENUM } from '../constant';
-import { queryMetric, deleteMetric, updateExprMetric, batchUpdateMetricStatus } from '../service';
+import {
+  queryMetric,
+  deleteMetric,
+  batchUpdateMetricStatus,
+  batchDownloadMetric,
+} from '../service';

 import MetricInfoCreateForm from './MetricInfoCreateForm';
-
+import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
 import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
@@ -32,20 +37,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
  });
  const actionRef = useRef<ActionType>();

-  const updateStatus = async (data: ISemantic.IMetricItem) => {
-    const { code, msg } = await updateExprMetric(data);
-    if (code === 200) {
-      actionRef?.current?.reload();
-      dispatch({
-        type: 'domainManger/queryMetricList',
-        payload: {
-          modelId,
-        },
-      });
-      return;
-    }
-    message.error(msg);
-  };
+  const [downloadLoading, setDownloadLoading] = useState<boolean>(false);

  const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
    if (Array.isArray(ids) && ids.length === 0) {
@@ -268,31 +260,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    },
  };

-  const dropdownButtonItems = [
-    {
-      key: 'batchStart',
-      label: '批量启用',
-    },
-    {
-      key: 'batchStop',
-      label: '批量停用',
-    },
-    {
-      key: 'batchDelete',
-      label: (
-        <Popconfirm
-          title="确定批量删除吗？"
-          onConfirm={() => {
-            queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
-          }}
-        >
-          <a>批量删除</a>
-        </Popconfirm>
-      ),
-    },
-  ];
-
-  const onMenuClick = ({ key }: { key: string }) => {
+  const onMenuClick = (key: string) => {
    switch (key) {
      case 'batchStart':
        queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
@@ -305,6 +273,27 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    }
  };

+  const downloadMetricQuery = async (
+    ids: React.Key[],
+    dateStringList: string[],
+    pickerType: string,
+  ) => {
+    if (Array.isArray(ids) && ids.length > 0) {
+      setDownloadLoading(true);
+      const [startDate, endDate] = dateStringList;
+      await batchDownloadMetric({
+        metricIds: ids,
+        dateInfo: {
+          dateMode: 'BETWEEN',
+          startDate,
+          endDate,
+          period: pickerType.toUpperCase(),
+        },
+      });
+      setDownloadLoading(false);
+    }
+  };
+
  return (
    <>
      <ProTable
@@ -350,12 +339,17 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
          >
            创建指标
          </Button>,
-          <Dropdown.Button
+          <BatchCtrlDropDownButton
            key="ctrlBtnList"
-            menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
-          >
-            批量操作
-          </Dropdown.Button>,
+            downloadLoading={downloadLoading}
+            onDeleteConfirm={() => {
+              queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
+            }}
+            onMenuClick={onMenuClick}
+            onDownloadDateRangeChange={(searchDateRange, pickerType) => {
+              downloadMetricQuery(selectedRowKeys, searchDateRange, pickerType);
+            }}
+          />,
        ]}
      />
      {createModalVisible && (
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
@@ -179,32 +179,33 @@ const DomainListTree: FC<DomainListProps> = ({

  return (
    <div className={styles.domainList}>
-      <Row>
-        <Col flex="1 1 auto">
-          {/* <Space> */}
-          <Search
-            allowClear
-            className={styles.search}
-            placeholder="请输入主题域名称进行查询"
-            onSearch={onSearch}
-          />
-          {/* </Space> */}
-        </Col>
-        {createDomainBtnVisible && (
-          <Col flex="0 0 40px" style={{ display: 'flex', alignItems: 'center' }}>
-            <Tooltip title="新增顶级域">
-              <Button
-                type="primary"
-                icon={<PlusOutlined />}
-                size="small"
-                onClick={() => {
-                  setProjectInfoParams({ type: 'top', modelType: 'add' });
-                  setProjectInfoModalVisible(true);
-                  onCreateDomainBtnClick?.();
-                }}
-              />
-            </Tooltip>
-            {/* <Tooltip title="新增顶级域">
+      <div className={styles.searchContainer}>
+        <Row>
+          <Col flex="1 1 auto">
+            {/* <Space> */}
+            <Search
+              allowClear
+              className={styles.search}
+              placeholder="请输入主题域名称进行查询"
+              onSearch={onSearch}
+            />
+            {/* </Space> */}
+          </Col>
+          {createDomainBtnVisible && (
+            <Col flex="0 0 40px" style={{ display: 'flex', alignItems: 'center' }}>
+              <Tooltip title="新增顶级域">
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  size="small"
+                  onClick={() => {
+                    setProjectInfoParams({ type: 'top', modelType: 'add' });
+                    setProjectInfoModalVisible(true);
+                    onCreateDomainBtnClick?.();
+                  }}
+                />
+              </Tooltip>
+              {/* <Tooltip title="新增顶级域">
              <PlusCircleOutlined
                onClick={() => {
                  setProjectInfoParams({ type: 'top', modelType: 'add' });
@@ -214,10 +215,10 @@ const DomainListTree: FC<DomainListProps> = ({
                className={styles.addBtn}
              />
            </Tooltip> */}
-          </Col>
-        )}
-      </Row>
-
+            </Col>
+          )}
+        </Row>
+      </div>
      <Tree
        expandedKeys={expandedKeys}
        onExpand={handleExpand}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
@@ -1,6 +1,6 @@
-import { Tabs, Button } from 'antd';
+import { Tabs, Breadcrumb, Space } from 'antd';
 import React from 'react';
-import { connect } from 'umi';
+import { connect, history } from 'umi';

 import ClassDataSourceTable from './ClassDataSourceTable';
 import ClassDimensionTable from './ClassDimensionTable';
@@ -11,7 +11,7 @@ import ChatSettingSection from '../ChatSetting/ChatSettingSection';
 import OverView from './OverView';
 import styles from './style.less';
 import type { StateType } from '../model';
-import { LeftOutlined } from '@ant-design/icons';
+import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
 import { ISemantic } from '../data';
 import SemanticGraphCanvas from '../SemanticGraphCanvas';
 import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
@@ -39,7 +39,9 @@ const DomainManagerTab: React.FC<Props> = ({
  onMenuChange,
 }) => {
  const defaultTabKey = 'xflow';
-  const { selectDomainId, domainList, selectModelId } = domainManger;
+  const { selectDomainId, domainList, selectModelId, selectModelName, selectDomainName } =
+    domainManger;
+
  const tabItem = [
    {
      label: '模型管理',
@@ -126,40 +128,49 @@ const DomainManagerTab: React.FC<Props> = ({

  return (
    <>
+      <Breadcrumb
+        className={styles.breadcrumb}
+        separator=""
+        items={[
+          {
+            path: `/webapp/model/${selectDomainId}/0/overview`,
+            title: (
+              <Space
+                onClick={() => {
+                  onBackDomainBtnClick?.();
+                }}
+                style={selectModelName ? {} : { color: '#296df3', fontWeight: 'bold' }}
+              >
+                <HomeOutlined />
+                <span>{selectDomainName}</span>
+              </Space>
+            ),
+          },
+          {
+            type: 'separator',
+            separator: selectModelName ? '/' : '',
+          },
+          {
+            title: selectModelName ? (
+              <Space
+                onClick={() => {
+                  history.push(`/model/${selectDomainId}/${selectModelId}/`);
+                }}
+                style={{ color: '#296df3' }}
+              >
+                <FundViewOutlined style={{ position: 'relative', top: '2px' }} />
+                <span>{selectModelName}</span>
+              </Space>
+            ) : undefined,
+          },
+        ]}
+      />
      <Tabs
        className={styles.tab}
        items={!isModel ? tabItem : isModelItem}
        activeKey={activeKey || defaultTabKey}
        destroyInactiveTabPane
        size="large"
-        tabBarExtraContent={{
-          left: (
-            <>
-              {!!selectModelId && (
-                <div
-                  className={styles.backBtn}
-                  onClick={() => {
-                    onBackDomainBtnClick?.();
-                  }}
-                >
-                  <LeftOutlined />
-                </div>
-              )}
-            </>
-          ),
-          // right: isModel ? (
-          //   <Button
-          //     type="primary"
-          //     icon={<LeftOutlined />}
-          //     onClick={() => {
-          //       onBackDomainBtnClick?.();
-          //     }}
-          //     style={{ marginRight: 10, marginBottom: 5 }}
-          //   >
-          //     返回主题域
-          //   </Button>
-          // ) : undefined,
-        }}
        onChange={(menuKey: string) => {
          onMenuChange?.(menuKey);
        }}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
@@ -455,7 +455,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
      forceRender
      width={1300}
      style={{ top: 48 }}
-      bodyStyle={{ padding: '32px 40px 48px' }}
+      styles={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={`${isEdit ? '编辑' : '新建'}指标`}
      maskClosable={false}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelCreateFormModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelCreateFormModal.tsx
@@ -96,7 +96,7 @@ const ModelCreateFormModal: React.FC<ModelCreateFormModalProps> = (props) => {
  return (
    <Modal
      width={640}
-      bodyStyle={{ padding: '32px 40px 48px' }}
+      styles={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={'模型信息'}
      open={true}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionTable.tsx
@@ -192,24 +192,6 @@ const PermissionTable: React.FC<Props> = ({ domainManger }) => {
            >
              编辑
            </a>
-            {/* <a
-              key="dimensionEditBtn"
-              onClick={() => {
-                setPermissonData(record);
-                setDimensionModalVisible(true);
-              }}
-            >
-              维度授权
-            </a>
-            <a
-              key="metricEditBtn"
-              onClick={() => {
-                setPermissonData(record);
-                setMetricModalVisible(true);
-              }}
-            >
-              指标授权
-            </a> */}
            <Popconfirm
              title="确认删除？"
              okText="是"
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ProjectInfoForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ProjectInfoForm.tsx
@@ -62,7 +62,7 @@ const ProjectInfoForm: React.FC<ProjectInfoFormProps> = (props) => {
  return (
    <Modal
      width={640}
-      bodyStyle={{ padding: '32px 40px 48px' }}
+      styles={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={titleRender()}
      open={true}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
@@ -2,13 +2,12 @@
  display: flex;
  flex-direction: row;
  background-color: #fff;
-  height: calc(100vh - 48px);
+  height: calc(100vh - 56px);


  .projectManger {
    width: 100%;
-    min-height: calc(100vh - 48px);
-    // background: #f8f9fb;
+    min-height: calc(100vh - 56px);
    background-color: #fff;
    display: flex;
    position: relative;
@@ -126,6 +125,8 @@
    //   }
    // }
    .tab {
+      border-top: 1px solid #eee;
+      margin-top: 10px;
      :global {
        .ant-tabs-tab-btn {
          font-size: 16px;
@@ -186,31 +187,18 @@
 .domainList {
  display: flex;
  flex-direction: column;
-  // width: 400px;
  width: 100%;
  overflow: hidden;
-
+  .searchContainer {
+    padding:3px 0;
+    border-bottom: 1px solid #eee;
+  }
 }

-// .user {
-//   display: grid;
-// }
-
-// .search{
-//   width: 50%;
-//   margin-bottom: 20px;
-// }
-
-
-
-// .authBtn{
-//   cursor: pointer;
-// }

 .classTable {
  :global {
    .ant-pro-table-search-query-filter {
-      // padding-left: 0 !important;
      margin-bottom: 0;
    }
    .ant-pro-table-list-toolbar-container {
@@ -335,4 +323,17 @@
      padding: 0;
    }
  }
+}
+
+.breadcrumb{
+  font-size: 18px;
+  margin: 20px 0 0 20px;
+  :global {
+    .ant-breadcrumb-link {
+      height: 28px;
+    }
+    .anticon {
+      font-size: 18px;
+    }
+  }
 }