[improvement][headless-fe] Added view management functionality. (#701)

* [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.
2025-12-20 06:34:55 +00:00 · 2024-01-30 20:35:04 +08:00
parent 26aefceb04
commit 31f8c1df35
45 changed files with 2539 additions and 423 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
@@ -6,7 +6,7 @@ import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import type { StateType } from '../model';
 import { StatusEnum } from '../enum';
-import { SENSITIVE_LEVEL_ENUM } from '../constant';
+import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../constant';
 import {
  getModelList,
  getDimensionList,
@@ -15,10 +15,11 @@ import {
 } from '../service';
 import DimensionInfoModal from './DimensionInfoModal';
 import DimensionValueSettingModal from './DimensionValueSettingModal';
-// import { updateDimension } from '../service';
 import { ISemantic, IDataSource } from '../data';
+import TableHeaderFilter from './TableHeaderFilter';
 import moment from 'moment';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
+import { ColumnsConfig } from './MetricTableColumnRender';
 import styles from './style.less';

 type Props = {
@@ -31,6 +32,8 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
  const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
  const [dataSourceList, setDataSourceList] = useState<IDataSource.IDataSourceItem[]>([]);
+  const [tableData, setTableData] = useState<ISemantic.IMetricItem[]>([]);
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
  const [loading, setLoading] = useState<boolean>(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [dimensionValueSettingList, setDimensionValueSettingList] = useState<
@@ -38,38 +41,37 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
  >([]);
  const [dimensionValueSettingModalVisible, setDimensionValueSettingModalVisible] =
    useState<boolean>(false);
-  const [pagination] = useState({
+
+  const defaultPagination = {
    current: 1,
-    pageSize: 99999,
+    pageSize: 20,
    total: 0,
-  });
+  };
+  const [pagination, setPagination] = useState(defaultPagination);

  const actionRef = useRef<ActionType>();

  const queryDimensionList = async (params: any) => {
    setLoading(true);
    const { code, data, msg } = await getDimensionList({
-      ...params,
      ...pagination,
+      ...params,
      modelId,
    });
    setLoading(false);
-    const { list } = data || {};
-    let resData: any = {};
+    const { list, pageSize, pageNum, total } = data || {};
    if (code === 200) {
-      resData = {
-        data: list || [],
-        success: true,
-      };
+      setPagination({
+        ...pagination,
+        pageSize: Math.min(pageSize, 100),
+        current: pageNum,
+        total,
+      });
+      setTableData(list);
    } else {
      message.error(msg);
-      resData = {
-        data: [],
-        total: 0,
-        success: false,
-      };
+      setTableData([]);
    }
-    return resData;
  };

  const queryDataSourceList = async () => {
@@ -81,25 +83,14 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    }
  };

+  useEffect(() => {
+    queryDimensionList({ ...filterParams, ...defaultPagination });
+  }, [filterParams]);
+
  useEffect(() => {
    queryDataSourceList();
  }, [modelId]);

-  // const updateDimensionStatus = async (dimensionData: ISemantic.IDimensionItem) => {
-  //   const { code, msg } = await updateDimension(dimensionData);
-  //   if (code === 200) {
-  //     actionRef?.current?.reload();
-  //     dispatch({
-  //       type: 'domainManger/queryDimensionList',
-  //       payload: {
-  //         modelId,
-  //       },
-  //     });
-  //     return;
-  //   }
-  //   message.error(msg);
-  // };
-
  const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
    if (Array.isArray(ids) && ids.length === 0) {
      return;
@@ -111,7 +102,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    });
    setLoading(false);
    if (code === 200) {
-      actionRef?.current?.reload();
+      queryDimensionList({ ...filterParams, ...defaultPagination });
      dispatch({
        type: 'domainManger/queryDimensionList',
        payload: {
@@ -127,6 +118,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    {
      dataIndex: 'id',
      title: 'ID',
+      fixed: 'left',
      width: 80,
      order: 100,
      search: false,
@@ -135,46 +127,26 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      dataIndex: 'key',
      title: '维度搜索',
      hideInTable: true,
-      renderFormItem: () => <Input placeholder="请输入ID/维度名称/英文名称" />,
    },
    {
      dataIndex: 'name',
-      title: '维度名称',
+      title: '维度',
+      fixed: 'left',
+      width: 280,
+      render: ColumnsConfig.dimensionInfo.render,
      search: false,
    },
-    {
-      dataIndex: 'alias',
-      title: '别名',
-      width: 150,
-      ellipsis: true,
-      search: false,
-    },
-    {
-      dataIndex: 'bizName',
-      title: '英文名称',
-      search: false,
-      // order: 9,
-    },
    {
      dataIndex: 'sensitiveLevel',
      title: '敏感度',
-      width: 80,
+      width: 150,
      valueEnum: SENSITIVE_LEVEL_ENUM,
+      render: ColumnsConfig.sensitiveLevel.render,
    },
    {
      dataIndex: 'isTag',
      title: '是否为标签',
-      // search: false,
-      renderFormItem: () => (
-        <Select
-          placeholder="请选择标签状态"
-          allowClear
-          options={[
-            { value: 1, label: '是' },
-            { value: 0, label: '否' },
-          ]}
-        />
-      ),
+      width: 120,
      render: (isTag) => {
        switch (isTag) {
          case 0:
@@ -189,27 +161,14 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    {
      dataIndex: 'status',
      title: '状态',
-      width: 80,
+      width: 150,
      search: false,
-      render: (status) => {
-        switch (status) {
-          case StatusEnum.ONLINE:
-            return <Tag color="success">已启用</Tag>;
-          case StatusEnum.OFFLINE:
-            return <Tag color="warning">未启用</Tag>;
-          case StatusEnum.INITIALIZED:
-            return <Tag color="processing">初始化</Tag>;
-          case StatusEnum.DELETED:
-            return <Tag color="default">已删除</Tag>;
-          default:
-            return <Tag color="default">未知</Tag>;
-        }
-      },
+      render: ColumnsConfig.state.render,
    },
    {
      dataIndex: 'createdBy',
      title: '创建人',
-      width: 100,
+      width: 180,
      search: false,
    },

@@ -217,6 +176,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      dataIndex: 'description',
      title: '描述',
      search: false,
+      render: ColumnsConfig.description.render,
    },

    {
@@ -233,7 +193,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      title: '操作',
      dataIndex: 'x',
      valueType: 'option',
-      width: 200,
+      width: 250,
      render: (_, record) => {
        return (
          <Space className={styles.ctrlBtnContainer}>
@@ -292,7 +252,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
                const { code, msg } = await deleteDimension(record.id);
                if (code === 200) {
                  setDimensionItem(undefined);
-                  actionRef.current?.reload();
+                  queryDimensionList({ ...filterParams, ...defaultPagination });
                } else {
                  message.error(msg);
                }
@@ -336,27 +296,102 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
  return (
    <>
      <ProTable
-        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
+        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}  ${styles.disabledSearchTable}`}
        actionRef={actionRef}
        rowKey="id"
        columns={columns}
-        request={queryDimensionList}
        loading={loading}
-        search={{
-          defaultCollapsed: false,
-          collapseRender: () => {
-            return <></>;
-          },
-        }}
+        headerTitle={
+          <TableHeaderFilter
+            components={[
+              {
+                label: '维度搜索',
+                component: (
+                  <Input.Search
+                    style={{ width: 280 }}
+                    placeholder="请输入ID/维度名称/英文名称"
+                    onSearch={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          key: value,
+                        };
+                      });
+                    }}
+                  />
+                ),
+              },
+              {
+                label: '敏感度',
+                component: (
+                  <Select
+                    style={{ width: 140 }}
+                    options={SENSITIVE_LEVEL_OPTIONS}
+                    placeholder="请选择敏感度"
+                    allowClear
+                    onChange={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          sensitiveLevel: value,
+                        };
+                      });
+                    }}
+                  />
+                ),
+              },
+              {
+                label: '标签状态',
+                component: (
+                  <Select
+                    style={{ width: 145 }}
+                    placeholder="请选择标签状态"
+                    allowClear
+                    onChange={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          isTag: value,
+                        };
+                      });
+                    }}
+                    options={[
+                      { value: 1, label: '是' },
+                      { value: 0, label: '否' },
+                    ]}
+                  />
+                ),
+              },
+            ]}
+          />
+        }
+        search={false}
+        // search={{
+        //   optionRender: false,
+        //   collapsed: false,
+        // }}
        rowSelection={{
          type: 'checkbox',
          ...rowSelection,
        }}
+        dataSource={tableData}
+        pagination={pagination}
        tableAlertRender={() => {
          return false;
        }}
-        size="small"
+        size="large"
+        scroll={{ x: 1500 }}
        options={{ reload: false, density: false, fullScreen: false }}
+        onChange={(data: any) => {
+          const { current, pageSize, total } = data;
+          const currentPagin = {
+            current,
+            pageSize,
+            total,
+          };
+          setPagination(currentPagin);
+          queryDimensionList({ ...filterParams, ...currentPagin });
+        }}
        toolBarRender={() => [
          <Button
            key="create"
@@ -388,7 +423,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
          dataSourceList={dataSourceList}
          onSubmit={() => {
            setCreateModalVisible(false);
-            actionRef?.current?.reload();
+            queryDimensionList({ ...filterParams, ...defaultPagination });
            dispatch({
              type: 'domainManger/queryDimensionList',
              payload: {
@@ -417,7 +452,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
            setDimensionValueSettingModalVisible(false);
          }}
          onSubmit={() => {
-            actionRef?.current?.reload();
+            queryDimensionList({ ...filterParams, ...defaultPagination });
            dispatch({
              type: 'domainManger/queryDimensionList',
              payload: {
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
@@ -13,9 +13,9 @@ import {
  batchUpdateMetricStatus,
  batchDownloadMetric,
 } from '../service';
-
 import MetricInfoCreateForm from './MetricInfoCreateForm';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
+import TableHeaderFilter from './TableHeaderFilter';
 import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
@@ -39,6 +39,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    total: 0,
  };
  const [pagination, setPagination] = useState(defaultPagination);
+
  const [filterParams, setFilterParams] = useState<Record<string, any>>({});

  const actionRef = useRef<ActionType>();
@@ -94,10 +95,19 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
  };

  const columns: ProColumns[] = [
+    {
+      dataIndex: 'id',
+      title: 'ID',
+      width: 80,
+      fixed: 'left',
+      search: false,
+    },
    {
      dataIndex: 'name',
      title: '指标',
-      width: '30%',
+      width: 280,
+      fixed: 'left',
+      // width: '30%',
      search: false,
      render: ColumnsConfig.metricInfo.render,
    },
@@ -105,54 +115,35 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      dataIndex: 'key',
      title: '指标搜索',
      hideInTable: true,
-      renderFormItem: () => (
-        <Input.Search
-          placeholder="请输入ID/指标名称/英文名称/标签"
-          onSearch={(value) => {
-            setFilterParams((preState) => {
-              return {
-                ...preState,
-                key: value,
-              };
-            });
-          }}
-        />
-      ),
    },
    {
      dataIndex: 'sensitiveLevel',
      title: '敏感度',
-      hideInTable: true,
+      width: 160,
      valueEnum: SENSITIVE_LEVEL_ENUM,
-      renderFormItem: () => (
-        <Select
-          options={SENSITIVE_LEVEL_OPTIONS}
-          placeholder="请选择敏感度"
-          allowClear
-          onChange={(value) => {
-            setFilterParams((preState) => {
-              return {
-                ...preState,
-                sensitiveLevel: value,
-              };
-            });
-          }}
-        />
-      ),
+      render: ColumnsConfig.sensitiveLevel.render,
    },
+
    {
      dataIndex: 'description',
      title: '描述',
+      width: 300,
      search: false,
+      render: ColumnsConfig.description.render,
    },
    {
      dataIndex: 'status',
      title: '状态',
-      width: 200,
+      width: 160,
      search: false,
      render: ColumnsConfig.state.render,
    },
-
+    {
+      dataIndex: 'createdBy',
+      title: '创建人',
+      width: 150,
+      search: false,
+    },
    {
      dataIndex: 'updatedAt',
      title: '更新时间',
@@ -274,14 +265,53 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
  return (
    <>
      <ProTable
-        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
+        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft} ${styles.disabledSearchTable} `}
        actionRef={actionRef}
+        headerTitle={
+          <TableHeaderFilter
+            components={[
+              {
+                label: '指标搜索',
+                component: (
+                  <Input.Search
+                    style={{ width: 280 }}
+                    placeholder="请输入ID/指标名称/英文名称/标签"
+                    onSearch={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          key: value,
+                        };
+                      });
+                    }}
+                  />
+                ),
+              },
+              {
+                label: '敏感度',
+                component: (
+                  <Select
+                    style={{ width: 140 }}
+                    options={SENSITIVE_LEVEL_OPTIONS}
+                    placeholder="请选择敏感度"
+                    allowClear
+                    onChange={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          sensitiveLevel: value,
+                        };
+                      });
+                    }}
+                  />
+                ),
+              },
+            ]}
+          />
+        }
        rowKey="id"
        loading={loading}
-        search={{
-          optionRender: false,
-          collapsed: false,
-        }}
+        search={false}
        rowSelection={{
          type: 'checkbox',
          ...rowSelection,
@@ -303,6 +333,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
          setPagination(currentPagin);
          queryMetricList({ ...filterParams, ...currentPagin });
        }}
+        scroll={{ x: 1500 }}
        sticky={{ offsetHeader: 0 }}
        size="large"
        options={{ reload: false, density: false, fullScreen: false }}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Database/DatabaseTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Database/DatabaseTable.tsx
@@ -120,7 +120,7 @@ const DatabaseTable: React.FC<Props> = ({}) => {
  return (
    <div style={{ margin: 20 }}>
      <ProTable
-        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
+        // className={`${styles.classTable}`}
        actionRef={actionRef}
        rowKey="id"
        columns={columns}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionAndMetricRelationModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionAndMetricRelationModal.tsx
@@ -11,6 +11,7 @@ type Props = {
  metricItem?: ISemantic.IMetricItem;
  relationsInitialValue?: ISemantic.IDrillDownDimensionItem[];
  onSubmit: (relations: ISemantic.IDrillDownDimensionItem[]) => void;
+  onRefreshRelationData?: () => void;
 };

 const DimensionAndMetricRelationModal: React.FC<Props> = ({
@@ -19,6 +20,7 @@ const DimensionAndMetricRelationModal: React.FC<Props> = ({
  relationsInitialValue,
  onCancel,
  onSubmit,
+  onRefreshRelationData,
 }) => {
  const [relationList, setRelationList] = useState<ISemantic.IDrillDownDimensionItem[]>([]);

@@ -30,9 +32,11 @@ const DimensionAndMetricRelationModal: React.FC<Props> = ({
        drillDownDimensions: relationList,
      },
    };
+
    const { code, msg } = await updateMetric(queryParams);
    if (code === 200) {
      onSubmit(relationList);
+      onRefreshRelationData?.();
      return;
    }
    message.error(msg);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionMetricRelationTableTransfer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionMetricRelationTableTransfer.tsx
@@ -1,4 +1,4 @@
-import { Table, Transfer, Checkbox, message } from 'antd';
+import { Table, Transfer, Checkbox, message, Tooltip } from 'antd';
 import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
 import type { TransferItem } from 'antd/es/transfer';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
@@ -9,13 +9,15 @@ import type { StateType } from '../model';
 import TransTypeTag from './TransTypeTag';
 import TableTitleTooltips from '../components/TableTitleTooltips';
 import { ISemantic } from '../data';
-import { getDimensionList, getDimensionInModelCluster } from '../service';
+import { EnvironmentOutlined } from '@ant-design/icons';
+import { getDimensionInModelCluster } from '../service';
 import { SemanticNodeType, TransType } from '../enum';

 interface RecordType {
  id: number;
  key: string;
  name: string;
+  disabled?: boolean;
  transType: TransType.DIMENSION | TransType.METRIC;
 }

@@ -39,7 +41,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
  );

  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
-
+  const [transferData, setTransferData] = useState<RecordType[]>([]);
  useEffect(() => {
    queryDimensionList();
  }, [metricItem, relationsInitialValue]);
@@ -53,16 +55,29 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
    }
  };

+  useEffect(() => {
+    const data = dimensionList.map((item) => {
+      const transType = TransType.DIMENSION;
+      const { id } = item;
+      return {
+        ...item,
+        transType,
+        disabled: checkedMap[id]?.inheritFromModel,
+        key: `${id}`,
+      };
+    });
+    setTransferData(data);
+  }, [checkedMap, dimensionList]);
+
  useEffect(() => {
    if (!Array.isArray(relationsInitialValue)) {
      return;
    }
    const ids = relationsInitialValue.map((item) => `${item.dimensionId}`);
    const relationMap = relationsInitialValue.reduce((relationCheckedMap, item: any) => {
-      const { dimensionId, necessary } = item;
+      const { dimensionId } = item;
      relationCheckedMap[dimensionId] = {
-        dimensionId: Number(dimensionId),
-        necessary: necessary,
+        ...item,
      };
      return relationCheckedMap;
    }, {});
@@ -101,11 +116,15 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
      (relationList: ISemantic.IDrillDownDimensionItem[], dimensionId: string) => {
        const target = relationCheckedMap[dimensionId];
        if (target) {
+          if (target.inheritFromModel === true && !target.necessary) {
+            return relationList;
+          }
          relationList.push(target);
        } else {
          relationList.push({
            dimensionId: Number(dimensionId),
            necessary: false,
+            inheritFromModel: false,
          });
        }
        return relationList;
@@ -175,15 +194,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
      <Transfer
        showSearch
        titles={['未关联维度', '已关联维度']}
-        dataSource={dimensionList.map((item) => {
-          const transType = TransType.DIMENSION;
-          const { id } = item;
-          return {
-            ...item,
-            transType,
-            key: `${id}`,
-          };
-        })}
+        dataSource={transferData}
        listStyle={{
          width: 500,
          height: 600,
@@ -207,11 +218,16 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
          onItemSelectAll,
          onItemSelect,
          selectedKeys: listSelectedKeys,
+          disabled: listDisabled,
        }) => {
          const columns = direction === 'left' ? leftColumns : rightColumns;
          const rowSelection: TableRowSelection<TransferItem> = {
+            getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),
            onSelectAll(selected, selectedRows) {
-              const treeSelectedKeys = selectedRows.map(({ key }) => key);
+              const treeSelectedKeys = selectedRows
+                .filter((item) => !item.disabled)
+                .map(({ key }) => key);
+
              const diffKeys = selected
                ? difference(treeSelectedKeys, listSelectedKeys)
                : difference(listSelectedKeys, treeSelectedKeys);
@@ -221,6 +237,16 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
              onItemSelect(key as string, selected);
            },
            selectedRowKeys: listSelectedKeys,
+            renderCell: function (checked, record, index, originNode) {
+              if (checkedMap[record.id]?.inheritFromModel === true) {
+                return (
+                  <Tooltip title="来自模型默认设置维度">
+                    <EnvironmentOutlined style={{ color: '#0958d9' }} />
+                  </Tooltip>
+                );
+              }
+              return originNode;
+            },
          };

          return (
@@ -229,10 +255,17 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
              columns={columns}
              dataSource={filteredItems as any}
              size="small"
+              rowClassName={(record) => {
+                if (checkedMap[record.id]?.inheritFromModel) {
+                  return 'inherit-from-model-row';
+                }
+                return '';
+              }}
              pagination={false}
              scroll={{ y: 450 }}
-              onRow={({ key }) => ({
+              onRow={({ key, disabled: itemDisabled }) => ({
                onClick: () => {
+                  if (itemDisabled || listDisabled) return;
                  onItemSelect(key as string, !listSelectedKeys.includes(key as string));
                },
              })}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
@@ -114,7 +114,7 @@ const DomainListTree: FC<DomainListProps> = ({
  };

  const titleRender = (node: any) => {
-    const { id, name, path, hasEditPermission } = node as any;
+    const { id, name, path, hasEditPermission, parentId } = node as any;
    return (
      <div className={styles.projectItem}>
        <span
@@ -126,7 +126,7 @@ const DomainListTree: FC<DomainListProps> = ({
          {name}
        </span>
        {createDomainBtnVisible && hasEditPermission && (
-          <span className={styles.operation}>
+          <span className={`${styles.operation} ${parentId ? styles.rowHover : ''}`}>
            {Array.isArray(path) && path.length < 2 && (
              <PlusOutlined
                className={styles.icon}
@@ -179,7 +179,7 @@ const DomainListTree: FC<DomainListProps> = ({
  return (
    <div className={styles.domainList}>
      <div className={styles.searchContainer}>
-        <Row style={{ gap: 20 }}>
+        <Row style={{ gap: 10 }}>
          <Col flex="1 1 215px">
            <Search
              allowClear
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
@@ -13,8 +13,9 @@ import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
 import { ISemantic } from '../data';
 import SemanticGraphCanvas from '../SemanticGraphCanvas';
 import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
-import CommonDimensionTable from './CommonDimension/CommonDimensionTable';
-import DatabaseTable from '../components/Database/DatabaseTable';
+import View from '../View';
+// import CommonDimensionTable from './CommonDimension/CommonDimensionTable';
+// import DatabaseTable from '../components/Database/DatabaseTable';

 import type { Dispatch } from 'umi';

@@ -54,6 +55,18 @@ const DomainManagerTab: React.FC<Props> = ({
        />
      ),
    },
+    {
+      label: '视图管理',
+      key: 'viewManange',
+      children: (
+        <View
+          modelList={modelList}
+          onModelChange={(model) => {
+            handleModelChange(model);
+          }}
+        />
+      ),
+    },
    {
      label: '画布',
      key: 'xflow',
@@ -68,11 +81,11 @@ const DomainManagerTab: React.FC<Props> = ({
      key: 'permissonSetting',
      children: <PermissionSection permissionTarget={'domain'} />,
    },
-    {
-      label: '数据库管理',
-      key: 'database',
-      children: <DatabaseTable />,
-    },
+    // {
+    //   label: '数据库管理',
+    //   key: 'database',
+    //   children: <DatabaseTable />,
+    // },
    // {
    //   label: '公共维度',
    //   key: 'commonDimension',
@@ -88,12 +101,12 @@ const DomainManagerTab: React.FC<Props> = ({

  const isModelItem = [
    {
-      label: '指标',
+      label: '指标管理',
      key: 'metric',
      children: <ClassMetricTable />,
    },
    {
-      label: '维度',
+      label: '维度管理',
      key: 'dimenstion',
      children: <ClassDimensionTable />,
    },
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx
@@ -23,12 +23,8 @@ type Props = {
  [key: string]: any;
 };

-// type TaskStateMap = Record<string, DictTaskState>;
-
 const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
-  // domainManger,
  knowledgeInfosMap,
-  // onKnowledgeInfosMapChange,
  ...restProps
 }) => {
  let rightColumns: ColumnsType<RecordType> = [
@@ -58,6 +54,11 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
        return <TransTypeTag type={type} />;
      },
    },
+
+    {
+      dataIndex: 'modelName',
+      title: '所属模型',
+    },
  ];
  if (!knowledgeInfosMap) {
    rightColumns = leftColumns;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTransfer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTransfer.tsx
@@ -3,7 +3,7 @@ import { IChatConfig } from '../../data';
 import DimensionMetricVisibleTableTransfer from './DimensionMetricVisibleTableTransfer';

 interface RecordType {
-  key: string;
+  key: React.Key;
  name: string;
  type: 'dimension' | 'metric';
 }
@@ -11,11 +11,10 @@ interface RecordType {
 type Props = {
  knowledgeInfosMap?: IChatConfig.IKnowledgeInfosItemMap;
  sourceList: any[];
-  targetList: string[];
+  targetList: React.Key[];
  titles?: string[];
  onKnowledgeInfosMapChange?: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
  onChange?: (params?: any) => void;
-  // transferProps?: Record<string, any>;
  [key: string]: any;
 };

@@ -29,25 +28,27 @@ const DimensionMetricVisibleTransfer: React.FC<Props> = ({
  ...rest
 }) => {
  const [transferData, setTransferData] = useState<RecordType[]>([]);
-  const [targetKeys, setTargetKeys] = useState<string[]>(targetList);
+  const [targetKeys, setTargetKeys] = useState<React.Key[]>(targetList);

  useEffect(() => {
    setTransferData(
-      sourceList.map(({ key, id, name, bizName, transType }) => {
+      sourceList.map(({ key, id, name, bizName, transType, modelName }) => {
        return {
          key,
          name,
          bizName,
          id,
+          modelName,
          type: transType,
        };
      }),
    );
-  }, [sourceList]);
-
-  useEffect(() => {
-    setTargetKeys(targetList);
-  }, [targetList]);
+    const keyList: React.Key[] = sourceList.map((item) => item.key);
+    const filterTargetList = targetList.filter((key: React.Key) => {
+      return keyList.includes(key);
+    });
+    setTargetKeys(filterTargetList);
+  }, [sourceList, targetList]);

  const handleChange = (newTargetKeys: string[]) => {
    setTargetKeys(newTargetKeys);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySection.tsx
@@ -1,6 +1,5 @@
 import { message, Space } from 'antd';
 import { useEffect, useState, forwardRef, useImperativeHandle, Ref } from 'react';
-import type { ForwardRefRenderFunction } from 'react';
 import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import type { StateType } from '../../model';
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
@@ -23,7 +23,7 @@ import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE } from '../constant';
 import { formLayout } from '@/components/FormHelper/utils';
 import FormItemTitle from '@/components/FormHelper/FormItemTitle';
 import styles from './style.less';
-import { getMetricsToCreateNewMetric, getModelDetail } from '../service';
+import { getMetricsToCreateNewMetric, getModelDetail, getDrillDownDimension } from '../service';
 import MetricMetricFormTable from './MetricMetricFormTable';
 import MetricFieldFormTable from './MetricFieldFormTable';
 import DimensionAndMetricRelationModal from './DimensionAndMetricRelationModal';
@@ -31,7 +31,6 @@ import TableTitleTooltips from '../components/TableTitleTooltips';
 import { createMetric, updateMetric, mockMetricAlias, getMetricTags } from '../service';
 import { ISemantic } from '../data';
 import { history } from 'umi';
-import { cloneDeep } from 'lodash';

 export type CreateFormProps = {
  datasourceId?: number;
@@ -113,7 +112,11 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({

  const [drillDownDimensions, setDrillDownDimensions] = useState<
    ISemantic.IDrillDownDimensionItem[]
-  >(metricItem?.relateDimension?.drillDownDimensions || []);
+  >([]);
+
+  const [drillDownDimensionsConfig, setDrillDownDimensionsConfig] = useState<
+    ISemantic.IDrillDownDimensionItem[]
+  >([]);

  const forward = () => setCurrentStep(currentStep + 1);
  const backward = () => setCurrentStep(currentStep - 1);
@@ -139,6 +142,17 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
    setClassMeasureList([]);
  };

+  const queryDrillDownDimension = async (metricId: number) => {
+    const { code, data, msg } = await getDrillDownDimension(metricId);
+    if (code === 200 && Array.isArray(data)) {
+      setDrillDownDimensionsConfig(data);
+    }
+    if (code !== 200) {
+      message.error(msg);
+    }
+    return [];
+  };
+
  useEffect(() => {
    queryModelDetail();
    queryMetricsToCreateNewMetric();
@@ -234,6 +248,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
    setDefineType(metricDefineType);
    setIsPercentState(isPercent);
    setIsDecimalState(isDecimal);
+    queryDrillDownDimension(metricItem?.id);
  };

  useEffect(() => {
@@ -719,7 +734,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
          </Form>
          <DimensionAndMetricRelationModal
            metricItem={metricItem}
-            relationsInitialValue={drillDownDimensions}
+            relationsInitialValue={drillDownDimensionsConfig}
            open={metricRelationModalOpenState}
            onCancel={() => {
              setMetricRelationModalOpenState(false);
@@ -728,6 +743,9 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
              setDrillDownDimensions(relations);
              setMetricRelationModalOpenState(false);
            }}
+            onRefreshRelationData={() => {
+              queryDrillDownDimension(metricItem?.id);
+            }}
          />
        </>
      ) : (
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx
@@ -1,7 +1,7 @@
 import { Space, Tag, Typography } from 'antd';
 import { StatusEnum } from '../enum';
 import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
-import { TagsOutlined, UserOutlined, FieldNumberOutlined, ReadOutlined } from '@ant-design/icons';
+import { TagsOutlined, ReadOutlined } from '@ant-design/icons';
 import { history } from 'umi';
 import { ISemantic } from '../data';
 import { isString } from 'lodash';
@@ -9,51 +9,167 @@ import { isArrayOfValues } from '@/utils/utils';
 import styles from './style.less';
 import MetricStar from '../Metric/components/MetricStar';

-const { Text, Link } = Typography;
+const { Text, Paragraph } = Typography;

 export const ColumnsConfig = {
-  metricInfo: {
+  description: {
    render: (_, record: ISemantic.IMetricItem) => {
-      const { name, alias, bizName, sensitiveLevel, createdBy, tags, id, isCollect } = record;
+      const { description } = record;
+      return (
+        <Paragraph
+          ellipsis={{ tooltip: description, rows: 3 }}
+          style={{ width: 250, marginBottom: 0 }}
+        >
+          {description}
+        </Paragraph>
+      );
+    },
+  },
+  dimensionInfo: {
+    render: (_, record: ISemantic.IDimensionItem) => {
+      const { name, alias, bizName } = record;
      return (
        <>
          <div>
            <Space>
-              <MetricStar metricId={id} initState={isCollect} />
+              <span style={{ fontWeight: 500 }}>{name}</span>
+            </Space>
+          </div>
+          <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
+            {bizName}
+          </div>

+          {alias && (
+            <div style={{ marginTop: 8 }}>
+              <Space direction="vertical" size={4}>
+                {alias && (
+                  <Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
+                    <ReadOutlined />
+                    <div style={{ width: 'max-content' }}>别名:</div>
+                    <span style={{ marginLeft: 2 }}>
+                      <Space size={[0, 8]} wrap>
+                        {isString(alias) &&
+                          alias.split(',').map((aliasName: string) => {
+                            return (
+                              <Tag
+                                color="#eee"
+                                key={aliasName}
+                                style={{
+                                  borderRadius: 44,
+                                  maxWidth: 90,
+                                  minWidth: 40,
+                                  backgroundColor: 'rgba(18, 31, 67, 0.04)',
+                                }}
+                              >
+                                <Text
+                                  style={{
+                                    maxWidth: 80,
+                                    color: 'rgb(95, 116, 141)',
+                                    textAlign: 'center',
+                                    fontSize: 12,
+                                  }}
+                                  ellipsis={{ tooltip: aliasName }}
+                                >
+                                  {aliasName}
+                                </Text>
+                              </Tag>
+                            );
+                          })}
+                      </Space>
+                    </span>
+                  </Space>
+                )}
+              </Space>
+            </div>
+          )}
+        </>
+      );
+    },
+  },
+  metricInfo: {
+    render: (_, record: ISemantic.IMetricItem) => {
+      const { name, alias, bizName, tags, id, isCollect } = record;
+      return (
+        <>
+          <div>
+            <Space>
              <a
                className={styles.textLink}
-                style={{ fontWeight: 500, marginRight: 10 }}
-                onClick={() => {
+                style={{ fontWeight: 500 }}
+                onClick={(event: any) => {
                  history.push(`/metric/detail/${id}`);
+                  event.preventDefault();
+                  event.stopPropagation();
                }}
+                href={`/webapp/metric/detail/${id}`}
              >
                {name}
              </a>
-              <Tag
+              <MetricStar metricId={id} initState={isCollect} />
+              {/* <Tag
                color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
                style={{ lineHeight: '16px', position: 'relative', top: '-1px' }}
              >
                {SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
-              </Tag>
+              </Tag> */}
            </Space>
          </div>
-          <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5 }}>{bizName}</div>
+          <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
+            {bizName}
+          </div>

-          <div style={{ marginTop: 8 }}>
-            <Space direction="vertical" size={4}>
-              {alias && (
-                <Space size={4} style={{ color: '#5f748d', fontSize: 12 }}>
-                  <ReadOutlined />
-                  <div style={{ width: 'max-content' }}>别名:</div>
-                  <span style={{ marginLeft: 2 }}>
-                    <Space size={[0, 8]} wrap>
-                      {isString(alias) &&
-                        alias.split(',').map((aliasName: string) => {
+          {(alias || isArrayOfValues(tags)) && (
+            <div style={{ marginTop: 8 }}>
+              <Space direction="vertical" size={4}>
+                {alias && (
+                  <Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
+                    <ReadOutlined />
+                    <div style={{ width: 'max-content' }}>别名:</div>
+                    <span style={{ marginLeft: 2 }}>
+                      <Space size={[0, 8]} wrap>
+                        {isString(alias) &&
+                          alias.split(',').map((aliasName: string) => {
+                            return (
+                              <Tag
+                                color="#eee"
+                                key={aliasName}
+                                style={{
+                                  borderRadius: 44,
+                                  maxWidth: 90,
+                                  minWidth: 40,
+                                  backgroundColor: 'rgba(18, 31, 67, 0.04)',
+                                }}
+                              >
+                                <Text
+                                  style={{
+                                    maxWidth: 80,
+                                    color: 'rgb(95, 116, 141)',
+                                    textAlign: 'center',
+                                    fontSize: 12,
+                                  }}
+                                  ellipsis={{ tooltip: aliasName }}
+                                >
+                                  {aliasName}
+                                </Text>
+                              </Tag>
+                            );
+                          })}
+                      </Space>
+                    </span>
+                  </Space>
+                )}
+
+                {isArrayOfValues(tags) && (
+                  <Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
+                    <TagsOutlined />
+                    <div style={{ width: 'max-content' }}>标签:</div>
+                    <span style={{ marginLeft: 2 }}>
+                      <Space size={[0, 8]} wrap>
+                        {tags.map((tag: string) => {
                          return (
                            <Tag
                              color="#eee"
-                              key={aliasName}
+                              key={tag}
                              style={{
                                borderRadius: 44,
                                maxWidth: 90,
@@ -68,93 +184,90 @@ export const ColumnsConfig = {
                                  textAlign: 'center',
                                  fontSize: 12,
                                }}
-                                ellipsis={{ tooltip: aliasName }}
+                                ellipsis={{ tooltip: tag }}
                              >
-                                {aliasName}
+                                {tag}
                              </Text>
                            </Tag>
                          );
                        })}
-                    </Space>
-                  </span>
-                </Space>
-              )}
-
-              {isArrayOfValues(tags) && (
-                <Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
-                  <TagsOutlined />
-                  <div style={{ width: 'max-content' }}>标签:</div>
-                  <span style={{ marginLeft: 2 }}>
-                    <Space size={[0, 8]} wrap>
-                      {tags.map((tag: string) => {
-                        return (
-                          <Tag
-                            color="#eee"
-                            key={tag}
-                            style={{
-                              borderRadius: 44,
-                              maxWidth: 90,
-                              minWidth: 40,
-                              backgroundColor: 'rgba(18, 31, 67, 0.04)',
-                            }}
-                          >
-                            <Text
-                              style={{
-                                maxWidth: 80,
-                                color: 'rgb(95, 116, 141)',
-                                textAlign: 'center',
-                                fontSize: 12,
-                              }}
-                              ellipsis={{ tooltip: tag }}
-                            >
-                              {tag}
-                            </Text>
-                          </Tag>
-                        );
-                      })}
-                    </Space>
-                  </span>
-                </Space>
-              )}
-              <Space size={10}>
-                <Space
-                  size={2}
-                  style={{ color: '#5f748d', fontSize: 12, position: 'relative', top: '1px' }}
-                >
-                  <FieldNumberOutlined style={{ fontSize: 16, position: 'relative', top: '1px' }} />
-                  <span>:</span>
-                  <span style={{ marginLeft: 0 }}>{id}</span>
-                </Space>
-                <Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
-                  <UserOutlined />
-                  <span>:</span>
-                  <span style={{ marginLeft: 0 }}>{createdBy}</span>
-                </Space>
+                      </Space>
+                    </span>
+                  </Space>
+                )}
+                {/* <Space size={10}>
+        <Space
+          size={2}
+          style={{ color: '#5f748d', fontSize: 12, position: 'relative', top: '1px' }}
+        >
+          <FieldNumberOutlined style={{ fontSize: 16, position: 'relative', top: '1px' }} />
+          <span>:</span>
+          <span style={{ marginLeft: 0 }}>{id}</span>
+        </Space>
+        <Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
+          <UserOutlined />
+          <span>:</span>
+          <span style={{ marginLeft: 0 }}>{createdBy}</span>
+        </Space>
+      </Space> */}
              </Space>
-            </Space>
-          </div>
+            </div>
+          )}
        </>
      );
    },
  },
+  sensitiveLevel: {
+    render: (_, record: ISemantic.IMetricItem) => {
+      const { sensitiveLevel } = record;
+      return SENSITIVE_LEVEL_COLOR[sensitiveLevel] ? (
+        <Tag
+          color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
+          style={{
+            borderRadius: '40px',
+            padding: '2px 16px',
+            fontSize: '13px',
+            // color: '#8ca3ba',
+          }}
+        >
+          {SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
+        </Tag>
+      ) : (
+        <Tag
+          style={{
+            borderRadius: '40px',
+            padding: '2px 16px',
+            fontSize: '13px',
+          }}
+        >
+          未知
+        </Tag>
+      );
+    },
+  },
  state: {
    render: (status) => {
-      let tagProps = {
+      let tagProps: { color: string; label: string; style?: any } = {
        color: 'default',
        label: '未知',
+        style: {},
      };
      switch (status) {
        case StatusEnum.ONLINE:
          tagProps = {
-            color: 'success',
-            // color: '#87d068',
+            // color: 'success',
+            color: 'geekblue',
            label: '已启用',
          };
          break;
        case StatusEnum.OFFLINE:
          tagProps = {
-            color: 'warning',
+            color: 'default',
            label: '未启用',
+            style: {
+              color: 'rgb(95, 116, 141)',
+              fontWeight: 400,
+            },
          };
          break;
        case StatusEnum.INITIALIZED:
@@ -180,6 +293,7 @@ export const ColumnsConfig = {
            padding: '2px 16px',
            fontSize: '13px',
            fontWeight: 500,
+            ...tagProps.style,
          }}
        >
          {tagProps.label}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
@@ -8,6 +8,7 @@ import { connect } from 'umi';
 import type { StateType } from '../model';
 import { deleteModel, updateModel } from '../service';
 import ClassDataSourceTypeModal from './ClassDataSourceTypeModal';
+import { ColumnsConfig } from './MetricTableColumnRender';

 import moment from 'moment';
 import styles from './style.less';
@@ -85,20 +86,7 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
      dataIndex: 'status',
      title: '状态',
      search: false,
-      render: (status) => {
-        switch (status) {
-          case StatusEnum.ONLINE:
-            return <Tag color="success">已启用</Tag>;
-          case StatusEnum.OFFLINE:
-            return <Tag color="warning">未启用</Tag>;
-          case StatusEnum.INITIALIZED:
-            return <Tag color="processing">初始化</Tag>;
-          case StatusEnum.DELETED:
-            return <Tag color="default">已删除</Tag>;
-          default:
-            return <Tag color="default">未知</Tag>;
-        }
-      },
+      render: ColumnsConfig.state.render,
    },
    {
      dataIndex: 'createdBy',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/OverView.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/OverView.tsx
@@ -15,7 +15,7 @@ type Props = {

 const OverView: React.FC<Props> = ({ modelList, disabledEdit = false, onModelChange }) => {
  return (
-    <div style={{ padding: '20px' }}>
+    <div style={{ padding: '15px 20px' }}>
      <ModelTable modelList={modelList} disabledEdit={disabledEdit} onModelChange={onModelChange} />
    </div>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx
@@ -102,7 +102,7 @@ const PermissionAdminForm: React.FC<Props> = ({
        >
          <SelectTMEPerson placeholder="请邀请团队成员" />
        </FormItem>
-        {/* {APP_TARGET === 'inner' && ( */}
+        {/* {APP_TARGET === 'inner'} */}
        <FormItem name="adminOrgs" label="按组织">
          <SelectPartner
            type="selectedDepartment"
@@ -111,7 +111,6 @@ const PermissionAdminForm: React.FC<Props> = ({
            }}
          />
        </FormItem>
-        {/* )} */}
        <Form.Item
          label={
            <FormItemTitle
@@ -128,7 +127,7 @@ const PermissionAdminForm: React.FC<Props> = ({
        </Form.Item>
        {!isOpenState && (
          <>
-            {/* {APP_TARGET === 'inner' && ( */}
+            {/* {APP_TARGET === 'inner' && } */}
            <FormItem name="viewOrgs" label="按组织">
              <SelectPartner
                type="selectedDepartment"
@@ -137,7 +136,6 @@ const PermissionAdminForm: React.FC<Props> = ({
                }}
              />
            </FormItem>
-            {/* )} */}
            <FormItem name="viewers" label="按个人">
              <SelectTMEPerson placeholder="请选择需要授权的个人" />
            </FormItem>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateDrawer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateDrawer.tsx
@@ -32,7 +32,6 @@ const PermissionCreateDrawer: React.FC<Props> = ({
  const basicInfoFormRef = useRef<any>(null);
  const [selectedDimensionKeyList, setSelectedDimensionKeyList] = useState<string[]>([]);
  const [selectedMetricKeyList, setSelectedMetricKeyList] = useState<string[]>([]);
-
  const [selectedKeyList, setSelectedKeyList] = useState<string[]>([]);

  const saveAuth = async () => {
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateForm.tsx
@@ -8,7 +8,7 @@ import styles from '../style.less';
 type Props = {
  permissonData: any;
  onSubmit?: (data?: any) => void;
-  onValuesChange?: (value, values) => void;
+  onValuesChange?: (value: any, values: any) => void;
 };

 const FormItem = Form.Item;
@@ -17,7 +17,6 @@ const PermissionCreateForm: ForwardRefRenderFunction<any, Props> = (
  { permissonData, onValuesChange },
  ref,
 ) => {
-  const { APP_TARGET } = process.env;
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
@@ -51,7 +50,6 @@ const PermissionCreateForm: ForwardRefRenderFunction<any, Props> = (
        <FormItem name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
          <Input placeholder="请输入名称" />
        </FormItem>
-        {/* {APP_TARGET === 'inner' && ( */}
        <FormItem name="authorizedDepartmentIds" label="按组织">
          <SelectPartner
            type="selectedDepartment"
@@ -60,7 +58,6 @@ const PermissionCreateForm: ForwardRefRenderFunction<any, Props> = (
            }}
          />
        </FormItem>
-        {/* )} */}

        <FormItem name="authorizedUsers" label="按个人">
          <SelectTMEPerson placeholder="请选择需要授权的个人" />
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableHeaderFilter.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableHeaderFilter.tsx
@@ -0,0 +1,28 @@
+import { Space } from 'antd';
+import React, { ReactNode } from 'react';
+
+import styles from './style.less';
+
+type Props = {
+  components: {
+    label: string;
+    component: ReactNode;
+  }[];
+};
+
+const TableHeaderFilter: React.FC<Props> = ({ components }) => {
+  return (
+    <>
+      <Space className={styles.tableHeaderTitle} size={20}>
+        {components.map(({ label, component }) => (
+          <Space size={8} key={`TableHeaderFilter-${label}`}>
+            <span className={styles.headerTitleLabel}>{label}:</span>
+            {component}
+          </Space>
+        ))}
+      </Space>
+    </>
+  );
+};
+
+export default TableHeaderFilter;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
@@ -75,44 +75,47 @@
        line-height: 34px;
        text-align: right;
        background: #fff;
-        // border-bottom: 1px solid #d9d9d9;
-    
+
        .title {
          float: left;
        }
-    
-    
      }
-    
      .search {
-        // width: calc(100% - 100px);
-        width: 100%;
-        margin: 10px 0 10px 10px;
+        width: 205px;
+        margin: 10px 0 10px 16px;
      }
    
      .tree {
        flex: 1;
        padding: 10px;
-    
+        padding-right: 18px;
        .projectItem {
          display: flex;
          width: 100%;
          cursor: auto;
-          line-height: 30px;
-          height: 30px;
+          line-height: 25px;
+          height: 25px;
+          color: rgb(95, 116, 141);
+          font-weight: 500;
          .projectItemTitle {
-            font-size: 16px;
+            font-size: 15px;
            flex: 1;
            cursor: pointer;
-
          }
-    
          .operation {
            .icon {
              margin-left: 6px;
              cursor: pointer;
            }
          }
+          .rowHover {
+            display: none;
+          }
+          &:hover {
+            .rowHover {
+              display: block;
+            }
+          }
        }
      }
    }
@@ -179,6 +182,8 @@
        }
        .ant-tabs-tab {
          padding-bottom:15px;
+          color: rgb(95, 116, 141);
+          font-weight: 500;
        }
      }
      .backBtn {
@@ -237,6 +242,10 @@
 }


+.disabledSearchTable {
+  padding-top:20px;
+}
+
 .classTable {
  // padding: 0 20px;
  :global {
@@ -419,4 +428,15 @@
  &:hover {
    color: #69b1ff;
  }
+}
+
+.tableHeaderTitle {
+  margin-left: 20px;
+  .headerTitleLabel {
+    color: #667085;
+    font-size: 14px;
+    font-weight: 400;
+    width: max-content;
+    display: flex;
+  }
 }