[improvement][headless-fe] Added term management functionality. (#990)

* [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. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. * [improvement][semantic-fe] Fixing the logic error in the dimension value setting. * [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information. * [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience. * [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. * [improvement][semantic-fe] Changing the line type for canvas connections. * [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless". * [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model. * [improvement][semantic-fe] Updating the logic for the fieldName. * [improvement][semantic-fe] Adjusting the position of the metrics tab. * [improvement][semantic-fe] Changing the 字段名称 to 英文名称. * [improvement][semantic-fe] Fix metric measurement deletion. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI adjustment for metric details page. * [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty. * [improvement][semantic-fe] Added field type and metric type to the metric creation options. * [improvement][semantic-fe] The organization structure selection feature has been added to the permission management. * [improvement][semantic-fe] Improved user experience for the metric list. * [improvement][semantic-fe] fix update the metric list. * [improvement][headless-fe] Added view management functionality. * [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system. * [improvement][headless-fe] Added model editing side effect detection. * [improvement][headless-fe] Fixed the logic error in view editing. * [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings. * [improvement][headless-fe] Added the ability to hide the Q&A settings entry point. * [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation. * [improvement][headless-fe] Added search functionality to the field list in model editing. * [improvement][headless-fe] fix the field list in model editing * [improvement][headless-fe] Restructured the data for the dimension value settings interface. * [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts. * [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function. * [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process. * [improvement][headless-fe] Replaced the term "view" with "dataset" * [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target. * [improvement][headless-fe] Enhanced dataset creation to support the tag mode. * [improvement][headless-fe] Added tag value setting. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead. * [improvement][headless-fe] Added search functionality to model management. * [improvement][headless-fe] Removed field null validation during model editing. * [improvement][headless-fe] Updated the batch operation button component. * [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings. * [improvement][headless-fe] Adjusted the length of the input field for model editing names. * [improvement][headless-fe] Lock the version of the @ant-design/pro-table component and replace it with @ant-design/pro-components. * [improvement][headless-fe] Optimized the style of the metrics market and tags market. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] Fixed the issue where the conditions for metric measurement creation were not being saved correctly. * [improvement][headless-fe] Default value setting for hiding dimensions. * [improvement][headless-fe] Updated the file imports in the project. * [improvement][headless-fe] Adjusted the logic for displaying the tab in the theme domain. * [improvement][headless-fe] Added term management functionality.
2025-12-10 11:07:06 +00:00 · 2024-05-13 17:50:50 +08:00
parent a8073f1e53
commit 51b683ae3e
11 changed files with 434 additions and 29 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
@@ -1,6 +1,7 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { message, Space, Popconfirm, Tag, Spin, Tooltip } from 'antd';
+import MetricAddClass from './components/MetricAddClass';
 import React, { useRef, useState, useEffect } from 'react';
 import type { Dispatch } from 'umi';
 import { connect, history, useModel } from 'umi';
@@ -66,6 +67,8 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {

  const actionRef = useRef<ActionType>();

+  const [addClassVisible, setAddClassVisible] = useState<boolean>(false);
+
  useEffect(() => {
    queryMetricList(filterParams);
  }, []);
@@ -382,6 +385,9 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      case 'batchStop':
        queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
        break;
+      case 'batchAddClass':
+        setAddClassVisible(true);
+        break;
      default:
        break;
    }
@@ -400,6 +406,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
                queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
              }}
              disabledList={hasAllPermission ? [] : ['batchStart', 'batchStop', 'batchDelete']}
+              extenderList={['batchAddClass']}
              onMenuClick={onMenuClick}
              onDownloadDateRangeChange={(searchDateRange, pickerType) => {
                downloadMetricQuery(selectedRowKeys, searchDateRange, pickerType);
@@ -509,6 +516,25 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
          }}
        />
      )}
+      {addClassVisible && (
+        <MetricAddClass
+          ids={selectedRowKeys as number[]}
+          createModalVisible={addClassVisible}
+          onCancel={() => {
+            setAddClassVisible(false);
+          }}
+          onSuccess={() => {
+            setAddClassVisible(false);
+            queryMetricList(filterParams);
+            dispatch({
+              type: 'domainManger/queryMetricList',
+              payload: {
+                domainId: selectDomainId,
+              },
+            });
+          }}
+        />
+      )}
    </>
  );
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
@@ -1,4 +1,4 @@
-import { Form, Input, Space, Row, Col, Switch } from 'antd';
+import { Form, Input, Space, Row, Col, Switch, Flex, Tag } from 'antd';
 import StandardFormRow from '@/components/StandardFormRow';
 import TagSelect from '@/components/TagSelect';
 import React, { ReactNode, useEffect } from 'react';
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
@@ -6,7 +6,7 @@ import { StatusEnum } from '../../enum';
 import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import type { StateType } from '../../model';
-import { deleteView, updateView, getViewList } from '../../service';
+import { deleteView, updateView, getViewList, getAllModelByDomainId } from '../../service';
 import ViewCreateFormModal from './ViewCreateFormModal';
 import moment from 'moment';
 import styles from '../../components/style.less';
@@ -21,13 +21,14 @@ type Props = {
  domainManger: StateType;
 };

-const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainManger }) => {
+const DataSetTable: React.FC<Props> = ({ disabledEdit = false, domainManger }) => {
  const { selectDomainId } = domainManger;
  const [viewItem, setViewItem] = useState<ISemantic.IViewItem>();
  const [saveLoading, setSaveLoading] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
  const [searchModalOpen, setSearchModalOpen] = useState(false);
+  const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
  const actionRef = useRef<ActionType>();

  const updateViewStatus = async (modelData: ISemantic.IViewItem) => {
@@ -47,6 +48,7 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan

  useEffect(() => {
    queryViewList();
+    queryDomainAllModel();
  }, []);

  const queryViewList = async () => {
@@ -59,6 +61,16 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
      message.error(msg);
    }
  };
+
+  const queryDomainAllModel = async () => {
+    const { code, data, msg } = await getAllModelByDomainId(selectDomainId);
+    if (code === 200) {
+      setModelList(data);
+    } else {
+      message.error(msg);
+    }
+  };
+
  const columnsConfig = ColumnsConfig();

  const columns: ProColumns[] = [
@@ -230,7 +242,6 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
        <ViewSearchFormModal
          domainId={selectDomainId}
          viewItem={viewItem}
-          modelList={modelList}
          onSubmit={() => {
            queryViewList();
            setSearchModalOpen(false);
@@ -245,4 +256,4 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
 };
 export default connect(({ domainManger }: { domainManger: StateType }) => ({
  domainManger,
-}))(ViewTable);
+}))(DataSetTable);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewCreateFormModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewCreateFormModal.tsx
@@ -5,7 +5,6 @@ import { message } from 'antd';
 import { formLayout } from '@/components/FormHelper/utils';
 import { createView, updateView, getDimensionList, queryMetric, getTagList } from '../../service';
 import { ISemantic } from '../../data';
-import { isString } from 'lodash';
 import FormItemTitle from '@/components/FormHelper/FormItemTitle';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
 import ViewModelConfigTransfer from './ViewModelConfigTransfer';
@@ -81,21 +80,6 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
    }
  };

-  // const queryTagList = async (modelId: number) => {
-  //   const { code, data, msg } = await getTagList({
-  //     modelIds: [modelId],
-  //     pageSize: 9999,
-  //   });
-
-  //   const { list } = data || {};
-  //   if (code === 200) {
-  //     setTagList(list);
-  //   } else {
-  //     message.error(msg);
-  //     setTagList([]);
-  //   }
-  // };
-
  const handleConfirm = async () => {
    const fieldsValue = await form.validateFields();
    const viewModelConfigsMap = configTableRef?.current.getViewModelConfigs() || {};
@@ -204,7 +188,8 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
                <span>切换模型: </span>
                <Select
                  style={{
-                    minWidth: 100,
+                    minWidth: 150,
+                    textAlign: 'left',
                  }}
                  value={selectedModelItem?.id}
                  placeholder="请选择模型，获取当前模型下指标维度信息"
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewSearchFormModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewSearchFormModal.tsx
@@ -7,13 +7,12 @@ import { createView, updateView, getDimensionList, queryMetric } from '../../ser
 import { ISemantic } from '../../data';
 import DefaultSettingForm from './DefaultSettingForm';
 import { isArrayOfValues } from '@/utils/utils';
-import { ProCard } from  '@ant-design/pro-components';
+import { ProCard } from '@ant-design/pro-components';
 import { ChatConfigType } from '../../enum';

 export type ModelCreateFormModalProps = {
  domainId: number;
  viewItem: any;
-  modelList: ISemantic.IModelItem[];
  onCancel: () => void;
  onSubmit: (values: any) => void;
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/index.tsx
@@ -3,7 +3,7 @@ import { ISemantic } from '../data';
 import { connect } from 'umi';
 import type { Dispatch } from 'umi';
 import type { StateType } from '../model';
-import ViewTable from './components/ViewTable';
+import DataSetTable from './components/DataSetTable';

 type Props = {
  disabledEdit?: boolean;
@@ -16,7 +16,11 @@ type Props = {
 const View: React.FC<Props> = ({ modelList, disabledEdit = false, onModelChange }) => {
  return (
    <div style={{ padding: '15px 20px' }}>
-      <ViewTable modelList={modelList} disabledEdit={disabledEdit} onModelChange={onModelChange} />
+      <DataSetTable
+        modelList={modelList}
+        disabledEdit={disabledEdit}
+        onModelChange={onModelChange}
+      />
    </div>
  );
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
@@ -7,7 +7,7 @@ import ClassMetricTable from './ClassMetricTable';
 import PermissionSection from './Permission/PermissionSection';
 // import ClassTagTable from '../Insights/components/ClassTagTable';
 import TagObjectTable from '../Insights/components/TagObjectTable';
-
+import TermTable from '../components/Term/TermTable';
 import OverView from './OverView';
 import styles from './style.less';
 import type { StateType } from '../model';
@@ -76,7 +76,7 @@ const DomainManagerTab: React.FC<Props> = ({
    },
    {
      label: '数据集管理',
-      key: 'dataSetManange',
+      key: 'dataSetManage',
      hidden: !!domainData?.parentId,
      children: (
        <View
@@ -89,10 +89,16 @@ const DomainManagerTab: React.FC<Props> = ({
    },
    {
      label: '标签对象管理',
-      key: 'tagObjectManange',
+      key: 'tagObjectManage',
      hidden: !!domainData?.parentId,
      children: <TagObjectTable />,
    },
+    {
+      label: '术语管理',
+      key: 'termManage',
+      hidden: !!domainData?.parentId,
+      children: <TermTable />,
+    },
    {
      label: '画布',
      key: 'xflow',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Term/TermCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Term/TermCreateForm.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useRef } from 'react';
+import { Form, Button, Modal, Input, Select } from 'antd';
+
+import { formLayout } from '@/components/FormHelper/utils';
+import styles from '../style.less';
+
+import { ISemantic } from '../../data';
+
+export type CreateFormProps = {
+  createModalVisible: boolean;
+  termItem?: ISemantic.ITermItem;
+  onCancel?: () => void;
+  onSubmit?: (values: any) => void;
+};
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const TermCreateForm: React.FC<CreateFormProps> = ({
+  onCancel,
+  createModalVisible,
+  termItem,
+  onSubmit,
+}) => {
+  const isEdit = !!termItem?.name;
+  const formValRef = useRef({} as any);
+  const [form] = Form.useForm();
+  const updateFormVal = (val: any) => {
+    const formVal = {
+      ...formValRef.current,
+      ...val,
+    };
+    formValRef.current = formVal;
+  };
+
+  const initData = () => {
+    if (!termItem) {
+      return;
+    }
+
+    const initValue = {
+      ...termItem,
+    };
+    const editInitFormVal = {
+      ...formValRef.current,
+      ...initValue,
+    };
+
+    updateFormVal(editInitFormVal);
+    form.setFieldsValue(initValue);
+  };
+
+  useEffect(() => {
+    if (isEdit) {
+      initData();
+    }
+  }, [termItem]);
+
+  const renderContent = () => {
+    return (
+      <>
+        <FormItem name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
+          <Input placeholder="名称不可重复" />
+        </FormItem>
+        <FormItem
+          name="similarTerms"
+          label={'近义词'}
+          rules={[{ required: true, message: '请输入业务口径' }]}
+        >
+          <Select
+            mode="tags"
+            placeholder="输入近义词后回车确认，多近义词输入、复制粘贴支持英文逗号自动分隔"
+            tokenSeparators={[',']}
+            maxTagCount={9}
+          />
+        </FormItem>
+        <FormItem name="description" label={'描述'}>
+          <TextArea placeholder="请输入描述" />
+        </FormItem>
+      </>
+    );
+  };
+  const renderFooter = () => {
+    return (
+      <>
+        <Button onClick={onCancel}>取消</Button>
+        <Button
+          type="primary"
+          onClick={async () => {
+            const fieldsValue = await form.validateFields();
+            const submitForm = {
+              ...formValRef.current,
+              ...fieldsValue,
+            };
+            updateFormVal(submitForm);
+            onSubmit?.(submitForm);
+          }}
+        >
+          完成
+        </Button>
+      </>
+    );
+  };
+  return (
+    <Modal
+      forceRender
+      width={800}
+      style={{ top: 48 }}
+      destroyOnClose
+      title={`${isEdit ? '编辑' : '新建'}术语`}
+      maskClosable={false}
+      open={createModalVisible}
+      footer={renderFooter()}
+      onCancel={onCancel}
+    >
+      <>
+        <Form
+          {...formLayout}
+          form={form}
+          initialValues={{
+            ...formValRef.current,
+          }}
+          className={styles.form}
+        >
+          {renderContent()}
+        </Form>
+      </>
+    </Modal>
+  );
+};
+
+export default TermCreateForm;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Term/TermTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Term/TermTable.tsx
@@ -0,0 +1,198 @@
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { ProTable } from '@ant-design/pro-components';
+import { message, Button, Space, Popconfirm, Typography } from 'antd';
+import React, { useRef, useState, useEffect } from 'react';
+import { connect } from 'umi';
+import type { StateType } from '../../model';
+import { getTermList, saveOrUpdate } from '../../service';
+
+import styles from '../style.less';
+import { ISemantic } from '../../data';
+import { ColumnsConfig } from '../../components/TableColumnRender';
+import TermCreateForm from './TermCreateForm';
+
+const { Paragraph } = Typography;
+
+type Props = {
+  domainManger: StateType;
+};
+
+const TermTable: React.FC<Props> = ({ domainManger }) => {
+  const { selectDomainId } = domainManger;
+  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
+  const [termItem, setTermItem] = useState<ISemantic.ITermItem>();
+
+  const [tableData, setTableData] = useState<ISemantic.ITermItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+
+  useEffect(() => {
+    queryTagList();
+  }, []);
+
+  const queryTagList = async () => {
+    setLoading(true);
+    const { code, data, msg } = await getTermList(selectDomainId);
+    setLoading(false);
+    if (code === 200) {
+      setTableData(data?.terms || []);
+    } else {
+      message.error(msg);
+      setTableData([]);
+    }
+  };
+
+  const queryTermConfig = async (terms: ISemantic.ITermItem[]) => {
+    const { code, msg } = await saveOrUpdate({
+      domainId: selectDomainId,
+      terms,
+    });
+    setLoading(false);
+    if (code === 200) {
+      setTableData(terms);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const saveTermConfig = (termItem: ISemantic.ITermItem) => {
+    const hasTerm = tableData.find((item) => item.name === termItem.name);
+    let terms = [];
+    if (hasTerm) {
+      terms = tableData.map((item) => {
+        if (item.name === termItem.name) {
+          return {
+            ...item,
+            ...termItem,
+          };
+        }
+        return item;
+      });
+    } else {
+      terms = [...tableData, termItem];
+    }
+    queryTermConfig(terms);
+  };
+
+  const deleteTermConfig = (termItem: ISemantic.ITermItem) => {
+    const terms = tableData.filter((item) => item.name !== termItem.name);
+    queryTermConfig(terms);
+  };
+
+  const columnsConfig = ColumnsConfig();
+
+  const columns: ProColumns[] = [
+    {
+      dataIndex: 'name',
+      title: '名称',
+      search: false,
+    },
+    {
+      dataIndex: 'similarTerms',
+      title: '近义词',
+      search: false,
+      render: (_: string[]) => {
+        const similarTerms = Array.isArray(_) ? _.join(',') : '-';
+        return (
+          <Paragraph
+            ellipsis={{ tooltip: similarTerms, rows: 3 }}
+            style={{ width: 350, marginBottom: 0 }}
+          >
+            {similarTerms}
+          </Paragraph>
+        );
+      },
+    },
+
+    {
+      dataIndex: 'description',
+      title: '描述',
+      search: false,
+      render: columnsConfig.description.render,
+    },
+
+    {
+      title: '操作',
+      dataIndex: 'x',
+      valueType: 'option',
+      width: 150,
+      render: (_, record) => {
+        return (
+          <Space className={styles.ctrlBtnContainer}>
+            <Button
+              type="link"
+              key="metricEditBtn"
+              onClick={() => {
+                setTermItem(record);
+                setCreateModalVisible(true);
+              }}
+            >
+              编辑
+            </Button>
+            <Popconfirm
+              title="确认删除？"
+              okText="是"
+              cancelText="否"
+              onConfirm={() => {
+                deleteTermConfig(record);
+              }}
+            >
+              <Button type="link" key="metricDeleteBtn">
+                删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        );
+      },
+    },
+  ];
+
+  return (
+    <>
+      <ProTable
+        className={`${styles.classTable}  ${styles.disabledSearchTable} `}
+        actionRef={actionRef}
+        rowKey="id"
+        loading={loading}
+        search={false}
+        columns={columns}
+        dataSource={tableData}
+        tableAlertRender={() => {
+          return false;
+        }}
+        sticky={{ offsetHeader: 0 }}
+        size="large"
+        options={false}
+        toolBarRender={() => [
+          <Button
+            key="create"
+            type="primary"
+            onClick={() => {
+              setTermItem(undefined);
+              setCreateModalVisible(true);
+            }}
+          >
+            创建术语
+          </Button>,
+        ]}
+      />
+      {createModalVisible && (
+        <TermCreateForm
+          createModalVisible={createModalVisible}
+          termItem={termItem}
+          onSubmit={(termData) => {
+            saveTermConfig(termData);
+            setCreateModalVisible(false);
+          }}
+          onCancel={() => {
+            setCreateModalVisible(false);
+          }}
+        />
+      )}
+    </>
+  );
+};
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(TermTable);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
@@ -434,6 +434,12 @@ export declare namespace ISemantic {
    domainId: number;
    ext: null;
  }
+
+  interface ITermItem {
+    name: string;
+    description: string;
+    similarTerms: string[];
+  }
 }

 export declare namespace IChatConfig {
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
@@ -429,6 +429,15 @@ export function getMetricsToCreateNewMetric(data: any): Promise<any> {
  );
 }

+export function getAllModelByDomainId(domainId: number): Promise<any> {
+  return request(`${process.env.API_BASE_URL}model/getAllModelByDomainId`, {
+    method: 'GET',
+    params: {
+      domainId,
+    },
+  });
+}
+
 export function createDictTask(data: any): Promise<any> {
  return request(`${process.env.API_BASE_URL}knowledge/task`, {
    method: 'POST',
@@ -703,3 +712,32 @@ export function getTagObjectList(data: any): Promise<any> {
    data: { pageSize: 9999, status: 1, ...data },
  });
 }
+
+export function getMetricClassifications(): Promise<any> {
+  return request(`${process.env.API_BASE_URL}metric/getMetricClassifications`, {
+    method: 'GET',
+  });
+}
+
+export function batchUpdateClassifications(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}metric/batchUpdateClassifications`, {
+    method: 'POST',
+    data: { ...data },
+  });
+}
+
+export function getTermList(domainId: number): Promise<any> {
+  return request(`${process.env.API_BASE_URL}term`, {
+    method: 'GET',
+    params: {
+      domainId,
+    },
+  });
+}
+
+export function saveOrUpdate(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}term/saveOrUpdate`, {
+    method: 'POST',
+    data: { ...data },
+  });
+}