diff --git a/webapp/packages/supersonic-fe/config/routes.ts b/webapp/packages/supersonic-fe/config/routes.ts
index efeb253da..e867876ff 100644
--- a/webapp/packages/supersonic-fe/config/routes.ts
+++ b/webapp/packages/supersonic-fe/config/routes.ts
@@ -66,6 +66,33 @@ const ROUTES = [
       },
     ],
   },
+
+  {
+    path: '/tag',
+    name: 'tag',
+    component: './SemanticModel/Insights',
+    envEnableList: [ENV_KEY.SEMANTIC],
+    routes: [
+      {
+        path: '/tag',
+        redirect: '/tag/market',
+      },
+      {
+        path: '/tag/market',
+        component: './SemanticModel/Insights/Market',
+        hideInMenu: true,
+        envEnableList: [ENV_KEY.SEMANTIC],
+      },
+      {
+        path: '/tag/detail/:tagId',
+        name: 'tagDetail',
+        hideInMenu: true,
+        component: './SemanticModel/Insights/Detail',
+        envEnableList: [ENV_KEY.SEMANTIC],
+      },
+    ],
+  },
+
   {
     path: '/plugin',
     name: 'plugin',
diff --git a/webapp/packages/supersonic-fe/package.json b/webapp/packages/supersonic-fe/package.json
index df1cc8181..dfa6ecdcb 100644
--- a/webapp/packages/supersonic-fe/package.json
+++ b/webapp/packages/supersonic-fe/package.json
@@ -100,6 +100,7 @@
     "react-syntax-highlighter": "^15.4.3",
     "sql-formatter": "^2.3.3",
     "supersonic-chat-sdk": "0.0.0",
+    "supersonic-insights-flow-components": "^1.4.6",
     "umi": "3.5",
     "umi-request": "^1.4.0"
   },
diff --git a/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.tsx b/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.tsx
index 7a6a76bda..dab146284 100644
--- a/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.tsx
+++ b/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.tsx
@@ -5,6 +5,7 @@ import {
   StopOutlined,
   CloudDownloadOutlined,
   DeleteOutlined,
+  ExportOutlined,
 } from '@ant-design/icons';
 
 export type BatchCtrlDropDownButtonProps = {
@@ -14,6 +15,7 @@ export type BatchCtrlDropDownButtonProps = {
   downloadLoading?: boolean;
   disabledList?: string[];
   hiddenList?: string[];
+  extenderEnable?: boolean;
 };
 const { RangePicker } = DatePicker;
 
@@ -24,10 +26,21 @@ const BatchCtrlDropDownButton: FC<BatchCtrlDropDownButtonProps> = ({
   downloadLoading,
   disabledList = [],
   hiddenList = [],
+  extenderEnable = false,
 }) => {
   const [popoverOpenState, setPopoverOpenState] = useState<boolean>(false);
   const [pickerType, setPickerType] = useState<string>('day');
   const dateRangeRef = useRef<any>([]);
+
+  const exportTagButton = {
+    key: 'exportTagButton',
+    label: '导出为标签',
+    icon: <ExportOutlined />,
+    disabled: disabledList?.includes('exportTagButton'),
+  };
+
+  const extenderList: any[] = extenderEnable ? [exportTagButton] : [];
+
   const dropdownButtonItems: any[] = [
     {
       key: 'batchStart',
@@ -55,6 +68,11 @@ const BatchCtrlDropDownButton: FC<BatchCtrlDropDownButtonProps> = ({
       icon: <CloudDownloadOutlined />,
       disabled: disabledList?.includes('batchDownload'),
     },
+    {
+      key: 'divider',
+      type: 'divider',
+    },
+    ...extenderList,
     {
       key: 'batchDeleteDivider',
       type: 'divider',
diff --git a/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts b/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
index 7e6b5a776..9e216dfa3 100644
--- a/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
+++ b/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
@@ -10,6 +10,8 @@ export default {
   'menu.semanticModel': '语义建模',
   'menu.metric': '指标市场',
   'menu.metric.metricDetail': '指标详情页',
+  'menu.tag': '标签市场',
+  'menu.tag.tagDetail': '标签详情页',
   'menu.database': '数据库管理',
   'menu.chatSetting': '问答设置',
   'menu.plugin': '插件市场',
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Detail.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Detail.tsx
new file mode 100644
index 000000000..05ad5e1f5
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Detail.tsx
@@ -0,0 +1,151 @@
+import { message, Tabs, Button, Space } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { getTagData } from '../service';
+import { connect, useParams, history } from 'umi';
+import type { StateType } from '../model';
+import styles from './style.less';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import TagTrendSection from './components/TagTrendSection';
+import { ISemantic } from '../data';
+import TagInfoSider from './components/TagInfoSider';
+import { getDimensionList, queryMetric } from '../service';
+import type { TabsProps } from 'antd';
+
+type Props = Record<string, any>;
+
+const TagDetail: React.FC<Props> = () => {
+  const params: any = useParams();
+  const tagId = params.tagId;
+  const [tagData, setTagData] = useState<ISemantic.IMetricItem>();
+  const [dimensionMap, setDimensionMap] = useState<Record<string, ISemantic.IDimensionItem>>({});
+
+  const [metricMap, setMetricMap] = useState<Record<string, ISemantic.IMetricItem>>({});
+
+  const [relationDimensionOptions, setRelationDimensionOptions] = useState<
+    { value: string; label: string; modelId: number }[]
+  >([]);
+
+  useEffect(() => {
+    queryTagData(tagId);
+  }, [tagId]);
+
+  const queryTagData = async (tagId: number) => {
+    const { code, data, msg } = await getTagData(tagId);
+    if (code === 200) {
+      queryDimensionList(data.modelId);
+      queryMetricList(data.modelId);
+      setTagData({ ...data });
+      return;
+    }
+    message.error(msg);
+  };
+
+  const tabItems: TabsProps['items'] = [
+    {
+      key: 'trend',
+      label: '图表',
+      children: (
+        // <></>
+        <TagTrendSection
+          tagData={tagData}
+          relationDimensionOptions={relationDimensionOptions}
+          dimensionList={[]}
+        />
+      ),
+    },
+    // {
+    //   key: 'metricCaliberInput',
+    //   label: '基础信息',
+    //   children: <></>,
+    // },
+    // {
+    //   key: 'metricDataRemark',
+    //   label: '备注',
+    //   children: <></>,
+    // },
+  ];
+
+  const queryDimensionList = async (modelId: number) => {
+    const { code, data, msg } = await getDimensionList({ modelId });
+    if (code === 200 && Array.isArray(data?.list)) {
+      const { list } = data;
+      setDimensionMap(
+        list.reduce(
+          (infoMap: Record<string, ISemantic.IDimensionItem>, item: ISemantic.IDimensionItem) => {
+            infoMap[`${item.id}`] = item;
+            return infoMap;
+          },
+          {},
+        ),
+      );
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const queryMetricList = async (modelId: number) => {
+    const { code, data, msg } = await queryMetric({
+      modelId: modelId,
+    });
+    const { list } = data || {};
+    if (code === 200) {
+      setMetricMap(
+        list.reduce(
+          (infoMap: Record<string, ISemantic.IMetricItem>, item: ISemantic.IMetricItem) => {
+            infoMap[`${item.id}`] = item;
+            return infoMap;
+          },
+          {},
+        ),
+      );
+    } else {
+      message.error(msg);
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.tagDetailWrapper}>
+        <div className={styles.tagDetail}>
+          <div className={styles.tabContainer}>
+            <Tabs
+              defaultActiveKey="trend"
+              items={tabItems}
+              tabBarExtraContent={{
+                right: (
+                  <Button
+                    size="middle"
+                    type="link"
+                    key="backListBtn"
+                    onClick={() => {
+                      history.push('/tag/market');
+                    }}
+                  >
+                    <Space>
+                      <ArrowLeftOutlined />
+                      返回列表页
+                    </Space>
+                  </Button>
+                ),
+              }}
+              size="large"
+              className={styles.tagDetailTab}
+            />
+          </div>
+          <div className={styles.siderContainer}>
+            <TagInfoSider
+              dimensionMap={dimensionMap}
+              metricMap={metricMap}
+              // relationDimensionOptions={relationDimensionOptions}
+              tagData={tagData}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(TagDetail);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Market.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Market.tsx
new file mode 100644
index 000000000..ef10ff3c1
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Market.tsx
@@ -0,0 +1,375 @@
+import type { ActionType, ProColumns } from '@ant-design/pro-table';
+import ProTable from '@ant-design/pro-table';
+import { message, Space, Popconfirm } from 'antd';
+import React, { useRef, useState, useEffect } from 'react';
+import type { Dispatch } from 'umi';
+import { connect, useModel } from 'umi';
+import type { StateType } from '../model';
+import { SENSITIVE_LEVEL_ENUM } from '../constant';
+import { getTagList, deleteTag, batchUpdateTagStatus } from '../service';
+import TagFilter from './components/TagFilter';
+import TagInfoCreateForm from './components/TagInfoCreateForm';
+import { SemanticNodeType, StatusEnum } from '../enum';
+import moment from 'moment';
+import styles from './style.less';
+import { ISemantic } from '../data';
+import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
+import { ColumnsConfig } from '../components/TableColumnRender';
+
+type Props = {
+  dispatch: Dispatch;
+  domainManger: StateType;
+};
+
+type QueryMetricListParams = {
+  id?: string;
+  name?: string;
+  bizName?: string;
+  sensitiveLevel?: string;
+  type?: string;
+  [key: string]: any;
+};
+
+const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
+  const { initialState = {} } = useModel('@@initialState');
+
+  const { currentUser = {} } = initialState as any;
+  const { selectDomainId, selectModelId: modelId } = domainManger;
+  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
+  const defaultPagination = {
+    current: 1,
+    pageSize: 20,
+    total: 0,
+  };
+  const [pagination, setPagination] = useState(defaultPagination);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<ISemantic.ITagItem[]>([]);
+  const [tagItem, setTagItem] = useState<ISemantic.ITagItem>();
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({
+    showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
+  });
+
+  const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
+
+  const [hasAllPermission, setHasAllPermission] = useState<boolean>(true);
+
+  const actionRef = useRef<ActionType>();
+
+  useEffect(() => {
+    queryTagList(filterParams);
+  }, []);
+
+  const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
+    if (Array.isArray(ids) && ids.length === 0) {
+      return;
+    }
+    const { code, msg } = await batchUpdateTagStatus({
+      ids,
+      status,
+    });
+    if (code === 200) {
+      queryTagList(filterParams);
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryTagList = async (params: QueryMetricListParams = {}, disabledLoading = false) => {
+    if (!disabledLoading) {
+      setLoading(true);
+    }
+    const { code, data, msg } = await getTagList({
+      ...pagination,
+      ...params,
+      createdBy: params.onlyShowMe ? currentUser.name : null,
+      pageSize: params.showType ? 100 : params.pageSize || pagination.pageSize,
+    });
+    setLoading(false);
+    const { list, pageSize, pageNum, total } = data || {};
+    let resData: any = {};
+    if (code === 200) {
+      if (!params.showType) {
+        setPagination({
+          ...pagination,
+          pageSize: Math.min(pageSize, 100),
+          current: pageNum,
+          total,
+        });
+      }
+
+      setDataSource(list);
+      resData = {
+        data: list || [],
+        success: true,
+      };
+    } else {
+      message.error(msg);
+      setDataSource([]);
+      resData = {
+        data: [],
+        total: 0,
+        success: false,
+      };
+    }
+    return resData;
+  };
+
+  const deleteMetricQuery = async (id: number) => {
+    const { code, msg } = await deleteTag(id);
+    if (code === 200) {
+      setTagItem(undefined);
+      queryTagList(filterParams);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const handleMetricEdit = (tagItem: ISemantic.ITagItem) => {
+    setTagItem(tagItem);
+    setCreateModalVisible(true);
+  };
+
+  const columnsConfig = ColumnsConfig({
+    indicatorInfo: {
+      url: '/tag/detail/',
+      starType: 'tag',
+    },
+  });
+
+  const columns: ProColumns[] = [
+    {
+      dataIndex: 'id',
+      title: 'ID',
+      width: 80,
+      fixed: 'left',
+      search: false,
+    },
+    {
+      dataIndex: 'name',
+      title: '标签',
+      width: 280,
+      fixed: 'left',
+      render: columnsConfig.indicatorInfo.render,
+    },
+    {
+      dataIndex: 'sensitiveLevel',
+      title: '敏感度',
+      width: 150,
+      valueEnum: SENSITIVE_LEVEL_ENUM,
+      render: columnsConfig.sensitiveLevel.render,
+    },
+
+    {
+      dataIndex: 'description',
+      title: '描述',
+      search: false,
+      width: 300,
+      render: columnsConfig.description.render,
+    },
+    {
+      dataIndex: 'status',
+      title: '状态',
+      width: 180,
+      search: false,
+      render: columnsConfig.state.render,
+    },
+    {
+      dataIndex: 'createdBy',
+      title: '创建人',
+      // width: 150,
+      search: false,
+    },
+    {
+      dataIndex: 'updatedAt',
+      title: '更新时间',
+      search: false,
+      render: (value: any) => {
+        return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
+      },
+    },
+    {
+      title: '操作',
+      dataIndex: 'x',
+      valueType: 'option',
+      width: 180,
+      render: (_, record) => {
+        if (record.hasAdminRes) {
+          return (
+            <Space>
+              <a
+                key="metricEditBtn"
+                onClick={() => {
+                  handleMetricEdit(record);
+                }}
+              >
+                编辑
+              </a>
+
+              <Popconfirm
+                title="确认删除？"
+                okText="是"
+                cancelText="否"
+                onConfirm={async () => {
+                  deleteMetricQuery(record.id);
+                }}
+              >
+                <a
+                  key="metricDeleteBtn"
+                  onClick={() => {
+                    setTagItem(record);
+                  }}
+                >
+                  删除
+                </a>
+              </Popconfirm>
+            </Space>
+          );
+        } else {
+          return <></>;
+        }
+      },
+    },
+  ];
+
+  const handleFilterChange = async (filterParams: {
+    key: string;
+    sensitiveLevel: string[];
+    showFilter: string[];
+    type: string;
+  }) => {
+    const { sensitiveLevel, type, showFilter } = filterParams;
+    const params: QueryMetricListParams = { ...filterParams };
+    const sensitiveLevelValue = sensitiveLevel?.[0];
+    const showFilterValue = showFilter?.[0];
+    const typeValue = type?.[0];
+    showFilterValue ? (params[showFilterValue] = true) : null;
+    params.sensitiveLevel = sensitiveLevelValue;
+    params.type = typeValue;
+    setFilterParams(params);
+    await queryTagList(
+      {
+        ...params,
+        ...defaultPagination,
+      },
+      filterParams.key ? false : true,
+    );
+  };
+
+  const rowSelection = {
+    onChange: (selectedRowKeys: React.Key[]) => {
+      const permissionList: boolean[] = [];
+      selectedRowKeys.forEach((id: React.Key) => {
+        const target = dataSource.find((item) => {
+          return item.id === id;
+        });
+        if (target) {
+          permissionList.push(target.hasAdminRes);
+        }
+      });
+      if (permissionList.includes(false)) {
+        setHasAllPermission(false);
+      } else {
+        setHasAllPermission(true);
+      }
+      setSelectedRowKeys(selectedRowKeys);
+    },
+    // getCheckboxProps: (record: ISemantic.ITagItem) => ({
+    //   disabled: !record.hasAdminRes,
+    // }),
+  };
+
+  const onMenuClick = (key: string) => {
+    switch (key) {
+      case 'batchStart':
+        queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
+        break;
+      case 'batchStop':
+        queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.TagFilterWrapper}>
+        <TagFilter
+          initFilterValues={filterParams}
+          onFiltersChange={(_, values) => {
+            if (_.showType !== undefined) {
+              setLoading(true);
+              setDataSource([]);
+            }
+            handleFilterChange(values);
+          }}
+        />
+      </div>
+      <>
+        <ProTable
+          className={`${styles.tagTable}`}
+          actionRef={actionRef}
+          rowKey="id"
+          search={false}
+          dataSource={dataSource}
+          columns={columns}
+          pagination={pagination}
+          size="large"
+          scroll={{ x: 1500 }}
+          tableAlertRender={() => {
+            return false;
+          }}
+          sticky={{ offsetHeader: 0 }}
+          rowSelection={{
+            type: 'checkbox',
+            ...rowSelection,
+          }}
+          toolBarRender={() => [
+            <BatchCtrlDropDownButton
+              key="ctrlBtnList"
+              downloadLoading={downloadLoading}
+              onDeleteConfirm={() => {
+                queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
+              }}
+              hiddenList={['batchDownload']}
+              disabledList={hasAllPermission ? [] : ['batchStart', 'batchStop', 'batchDelete']}
+              onMenuClick={onMenuClick}
+            />,
+          ]}
+          loading={loading}
+          onChange={(data: any) => {
+            const { current, pageSize, total } = data;
+            const pagin = {
+              current,
+              pageSize,
+              total,
+            };
+            setPagination(pagin);
+            queryTagList({ ...pagin, ...filterParams });
+          }}
+          options={{ reload: false, density: false, fullScreen: false }}
+        />
+      </>
+
+      {createModalVisible && (
+        <TagInfoCreateForm
+          domainId={selectDomainId}
+          modelId={Number(modelId)}
+          createModalVisible={createModalVisible}
+          tagItem={tagItem}
+          onSubmit={() => {
+            setCreateModalVisible(false);
+            queryTagList({ ...filterParams, ...defaultPagination });
+          }}
+          onCancel={() => {
+            setCreateModalVisible(false);
+          }}
+        />
+      )}
+    </>
+  );
+};
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(ClassMetricTable);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/ClassTagTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/ClassTagTable.tsx
new file mode 100644
index 000000000..9d24be86f
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/ClassTagTable.tsx
@@ -0,0 +1,349 @@
+import type { ActionType, ProColumns } from '@ant-design/pro-table';
+import ProTable from '@ant-design/pro-table';
+import { message, Button, Space, Popconfirm, Input, Select } from 'antd';
+import React, { useRef, useState, useEffect } from 'react';
+import type { Dispatch } from 'umi';
+import { StatusEnum } from '../../enum';
+import { connect } from 'umi';
+import type { StateType } from '../../model';
+import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../../constant';
+import { getTagList, deleteTag, batchUpdateTagStatus } from '../../service';
+import TagInfoCreateForm from './TagInfoCreateForm';
+import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
+import TableHeaderFilter from '../../components/TableHeaderFilter';
+import moment from 'moment';
+import styles from '../style.less';
+import { ISemantic } from '../../data';
+import { ColumnsConfig } from '../../components/TableColumnRender';
+
+type Props = {
+  dispatch: Dispatch;
+  domainManger: StateType;
+};
+
+const ClassTagTable: React.FC<Props> = ({ domainManger, dispatch }) => {
+  const { selectModelId: modelId, selectDomainId } = domainManger;
+  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
+  const [tagItem, setTagItem] = useState<ISemantic.ITagItem>();
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [tableData, setTableData] = useState<ISemantic.ITagItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const defaultPagination = {
+    current: 1,
+    pageSize: 20,
+    total: 0,
+  };
+  const [pagination, setPagination] = useState(defaultPagination);
+
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
+
+  const actionRef = useRef<ActionType>();
+
+  const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
+    if (Array.isArray(ids) && ids.length === 0) {
+      return;
+    }
+    const { code, msg } = await batchUpdateTagStatus({
+      ids,
+      status,
+    });
+    if (code === 200) {
+      queryTagList({ ...filterParams, ...defaultPagination });
+      return;
+    }
+    message.error(msg);
+  };
+
+  useEffect(() => {
+    queryTagList({ ...filterParams, ...defaultPagination });
+  }, [filterParams]);
+
+  const queryTagList = async (params: any) => {
+    setLoading(true);
+    const { code, data, msg } = await getTagList({
+      ...pagination,
+      ...params,
+      modelIds: [modelId],
+    });
+    setLoading(false);
+    const { list, pageSize, pageNum, total } = data || {};
+    if (code === 200) {
+      setPagination({
+        ...pagination,
+        pageSize: Math.min(pageSize, 100),
+        current: pageNum,
+        total,
+      });
+      setTableData(list);
+    } else {
+      message.error(msg);
+      setTableData([]);
+    }
+  };
+
+  const columnsConfig = ColumnsConfig();
+
+  const columns: ProColumns[] = [
+    {
+      dataIndex: 'id',
+      title: 'ID',
+      width: 80,
+      fixed: 'left',
+      search: false,
+    },
+    {
+      dataIndex: 'name',
+      title: '标签',
+      width: 280,
+      fixed: 'left',
+      // width: '30%',
+      search: false,
+      render: columnsConfig.indicatorInfo.render,
+    },
+    {
+      dataIndex: 'key',
+      title: '标签搜索',
+      hideInTable: true,
+    },
+    {
+      dataIndex: 'sensitiveLevel',
+      title: '敏感度',
+      width: 160,
+      valueEnum: SENSITIVE_LEVEL_ENUM,
+      render: columnsConfig.sensitiveLevel.render,
+    },
+
+    {
+      dataIndex: 'description',
+      title: '描述',
+      width: 300,
+      search: false,
+      render: columnsConfig.description.render,
+    },
+    {
+      dataIndex: 'status',
+      title: '状态',
+      width: 160,
+      search: false,
+      render: columnsConfig.state.render,
+    },
+    {
+      dataIndex: 'createdBy',
+      title: '创建人',
+      width: 150,
+      search: false,
+    },
+    {
+      dataIndex: 'updatedAt',
+      title: '更新时间',
+      width: 180,
+      search: false,
+      render: (value: any) => {
+        return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
+      },
+    },
+    {
+      title: '操作',
+      dataIndex: 'x',
+      valueType: 'option',
+      width: 150,
+      render: (_, record) => {
+        return (
+          <Space className={styles.ctrlBtnContainer}>
+            <Button
+              type="link"
+              key="metricEditBtn"
+              onClick={() => {
+                setTagItem(record);
+                setCreateModalVisible(true);
+              }}
+            >
+              编辑
+            </Button>
+            {record.status === StatusEnum.ONLINE ? (
+              <Button
+                type="link"
+                key="editStatusOfflineBtn"
+                onClick={() => {
+                  queryBatchUpdateStatus([record.id], StatusEnum.OFFLINE);
+                }}
+              >
+                停用
+              </Button>
+            ) : (
+              <Button
+                type="link"
+                key="editStatusOnlineBtn"
+                onClick={() => {
+                  queryBatchUpdateStatus([record.id], StatusEnum.ONLINE);
+                }}
+              >
+                启用
+              </Button>
+            )}
+            <Popconfirm
+              title="确认删除？"
+              okText="是"
+              cancelText="否"
+              onConfirm={async () => {
+                const { code, msg } = await deleteTag(record.id);
+                if (code === 200) {
+                  setTagItem(undefined);
+                  queryTagList({ ...filterParams, ...defaultPagination });
+                } else {
+                  message.error(msg);
+                }
+              }}
+            >
+              <Button
+                type="link"
+                key="metricDeleteBtn"
+                onClick={() => {
+                  setTagItem(record);
+                }}
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        );
+      },
+    },
+  ];
+
+  const rowSelection = {
+    onChange: (selectedRowKeys: React.Key[]) => {
+      setSelectedRowKeys(selectedRowKeys);
+    },
+  };
+
+  const onMenuClick = (key: string) => {
+    switch (key) {
+      case 'batchStart':
+        queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
+        break;
+      case 'batchStop':
+        queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <ProTable
+        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={false}
+        rowSelection={{
+          type: 'checkbox',
+          ...rowSelection,
+        }}
+        columns={columns}
+        params={{ modelId }}
+        dataSource={tableData}
+        pagination={pagination}
+        tableAlertRender={() => {
+          return false;
+        }}
+        onChange={(data: any) => {
+          const { current, pageSize, total } = data;
+          const currentPagin = {
+            current,
+            pageSize,
+            total,
+          };
+          setPagination(currentPagin);
+          queryTagList({ ...filterParams, ...currentPagin });
+        }}
+        scroll={{ x: 1500 }}
+        sticky={{ offsetHeader: 0 }}
+        size="large"
+        options={{ reload: false, density: false, fullScreen: false }}
+        toolBarRender={() => [
+          <Button
+            key="create"
+            type="primary"
+            onClick={() => {
+              setTagItem(undefined);
+              setCreateModalVisible(true);
+            }}
+          >
+            创建标签
+          </Button>,
+          <BatchCtrlDropDownButton
+            key="ctrlBtnList"
+            onDeleteConfirm={() => {
+              queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
+            }}
+            onMenuClick={onMenuClick}
+            hiddenList={['batchDownload']}
+          />,
+        ]}
+      />
+      {createModalVisible && (
+        <TagInfoCreateForm
+          domainId={selectDomainId}
+          modelId={Number(modelId)}
+          createModalVisible={createModalVisible}
+          tagItem={tagItem}
+          onSubmit={() => {
+            setCreateModalVisible(false);
+            queryTagList({ ...filterParams, ...defaultPagination });
+          }}
+          onCancel={() => {
+            setCreateModalVisible(false);
+          }}
+        />
+      )}
+    </>
+  );
+};
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(ClassTagTable);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/Table.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/Table.tsx
new file mode 100644
index 000000000..8730b9146
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/Table.tsx
@@ -0,0 +1,28 @@
+import { Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+
+type Props = {
+  columnConfig?: ColumnConfig[];
+  dataSource: any;
+  loading?: boolean;
+};
+
+const TagTable: React.FC<Props> = ({ columnConfig, dataSource, loading = false }) => {
+  return (
+    <div style={{ height: '100%' }}>
+      {/* {Array.isArray(columns) && columns.length > 0 && ( */}
+      <Table
+        columns={columnConfig}
+        dataSource={dataSource}
+        scroll={{ x: 200, y: 700 }}
+        loading={loading}
+        onChange={() => {}}
+      />
+      {/* )} */}
+    </div>
+  );
+};
+
+export default TagTable;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagFilter.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagFilter.tsx
new file mode 100644
index 000000000..2fd760623
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagFilter.tsx
@@ -0,0 +1,138 @@
+import { Form, Input, Space, Row, Col, Switch } from 'antd';
+import StandardFormRow from '@/components/StandardFormRow';
+import TagSelect from '@/components/TagSelect';
+import React, { useEffect } from 'react';
+import { SENSITIVE_LEVEL_OPTIONS } from '../../constant';
+import { SearchOutlined } from '@ant-design/icons';
+import DomainTreeSelect from '../../components/DomainTreeSelect';
+import styles from '../style.less';
+
+const FormItem = Form.Item;
+
+type Props = {
+  initFilterValues?: any;
+  onFiltersChange: (_: any, values: any) => void;
+};
+
+const TagFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange }) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    form.setFieldsValue({
+      ...initFilterValues,
+    });
+  }, [form]);
+
+  const handleValuesChange = (value: any, values: any) => {
+    localStorage.setItem('metricMarketShowType', !!values.showType ? '1' : '0');
+    onFiltersChange(value, values);
+  };
+
+  const onSearch = (value: any) => {
+    onFiltersChange(value, form.getFieldsValue());
+  };
+
+  const filterList = [
+    {
+      title: '展示类型',
+      key: 'showFilter',
+      options: [
+        {
+          label: '我创建的',
+          value: 'onlyShowMe',
+        },
+        {
+          label: '我收藏的',
+          value: 'hasCollect',
+        },
+      ],
+    },
+    {
+      title: '敏感度',
+      key: 'sensitiveLevel',
+      options: SENSITIVE_LEVEL_OPTIONS,
+    },
+  ];
+
+  return (
+    <Form
+      layout="inline"
+      form={form}
+      colon={false}
+      onValuesChange={(value, values) => {
+        if (value.key) {
+          return;
+        }
+        handleValuesChange(value, values);
+      }}
+    >
+      <StandardFormRow key="search" block>
+        <div className={styles.searchBox}>
+          <Row>
+            <Col flex="100px">
+              <span
+                style={{
+                  fontSize: '18px',
+                  fontWeight: 'bold',
+                  position: 'relative',
+                  top: '12px',
+                }}
+              >
+                标签搜索
+              </span>
+            </Col>
+            <Col flex="auto">
+              <FormItem name="key" noStyle>
+                <div className={styles.searchInput}>
+                  <Input.Search
+                    placeholder="请输入需要查询标签的ID、标签名称、英文名称"
+                    enterButton={<SearchOutlined style={{ marginTop: 5 }} />}
+                    onSearch={(value) => {
+                      onSearch(value);
+                    }}
+                  />
+                </div>
+              </FormItem>
+            </Col>
+          </Row>
+        </div>
+      </StandardFormRow>
+      <Space size={40}>
+        {/* <StandardFormRow key="showType" title="切换为卡片" block>
+          <FormItem name="showType" valuePropName="checked">
+            <Switch size="small" />
+          </FormItem>
+        </StandardFormRow> */}
+        {/* <StandardFormRow key="onlyShowMe" title="仅显示我的" block>
+          <FormItem name="onlyShowMe" valuePropName="checked">
+            <Switch size="small" />
+          </FormItem>
+        </StandardFormRow> */}
+
+        {filterList.map((item) => {
+          const { title, key, options } = item;
+          return (
+            <StandardFormRow key={key} title={title} block>
+              <FormItem name={key}>
+                <TagSelect reverseCheckAll single>
+                  {options.map((item: any) => (
+                    <TagSelect.Option key={item.value} value={item.value}>
+                      {item.label}
+                    </TagSelect.Option>
+                  ))}
+                </TagSelect>
+              </FormItem>
+            </StandardFormRow>
+          );
+        })}
+        <StandardFormRow key="domainIds" title="所属主题域" block>
+          <FormItem name="domainIds">
+            <DomainTreeSelect />
+          </FormItem>
+        </StandardFormRow>
+      </Space>
+    </Form>
+  );
+};
+
+export default TagFilter;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoCreateForm.tsx
new file mode 100644
index 000000000..631de09ae
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoCreateForm.tsx
@@ -0,0 +1,565 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Form, Button, Modal, Steps, Input, Select, Radio, message, Tag } from 'antd';
+
+import { SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../../constant';
+import { formLayout } from '@/components/FormHelper/utils';
+import styles from '../../components/style.less';
+import { getModelDetail } from '../../service';
+import { isArrayOfValues } from '@/utils/utils';
+import MetricFieldFormTable from '../../components/MetricFieldFormTable';
+import TagDimensionFormTable from '../../components/TagDimensionFormTable';
+import MetricMetricFormTable from '../../components/MetricMetricFormTable';
+import TableTitleTooltips from '../../components/TableTitleTooltips';
+import { createTag, updateTag, getDimensionList, queryMetric } from '../../service';
+import { ISemantic } from '../../data';
+
+export type CreateFormProps = {
+  datasourceId?: number;
+  domainId: number;
+  modelId: number;
+  createModalVisible: boolean;
+  tagItem?: ISemantic.ITagItem;
+  onCancel?: () => void;
+  onSubmit?: (values: any) => void;
+};
+
+const { Step } = Steps;
+const FormItem = Form.Item;
+const { TextArea } = Input;
+const { Option } = Select;
+
+const TagInfoCreateForm: React.FC<CreateFormProps> = ({
+  modelId,
+  onCancel,
+  createModalVisible,
+  tagItem,
+  onSubmit,
+}) => {
+  const isEdit = !!tagItem?.id;
+  const [currentStep, setCurrentStep] = useState(0);
+  const formValRef = useRef({} as any);
+  const [form] = Form.useForm();
+  const updateFormVal = (val: any) => {
+    const formVal = {
+      ...formValRef.current,
+      ...val,
+    };
+    formValRef.current = formVal;
+  };
+
+  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
+
+  const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>([]);
+  const [metricMap, setMetricMap] = useState<Record<string, ISemantic.IMetricItem>>({});
+
+  const [exprTypeParamsState, setExprTypeParamsState] = useState<{
+    [TAG_DEFINE_TYPE.DIMENSION]: ISemantic.ITagDefineParams;
+    [TAG_DEFINE_TYPE.METRIC]: ISemantic.ITagDefineParams;
+    [TAG_DEFINE_TYPE.FIELD]: ISemantic.ITagDefineParams;
+  }>({
+    [TAG_DEFINE_TYPE.DIMENSION]: {
+      dependencies: [],
+      expr: '',
+    },
+    [TAG_DEFINE_TYPE.METRIC]: {
+      dependencies: [],
+      expr: '',
+    },
+    [TAG_DEFINE_TYPE.FIELD]: {
+      dependencies: [],
+      expr: '',
+    },
+  } as any);
+
+  const [defineType, setDefineType] = useState<TAG_DEFINE_TYPE>(TAG_DEFINE_TYPE.DIMENSION);
+
+  const [fieldList, setFieldList] = useState<ISemantic.IFieldTypeParamsItem[]>([]);
+
+  const forward = () => setCurrentStep(currentStep + 1);
+  const backward = () => setCurrentStep(currentStep - 1);
+
+  const queryModelDetail = async () => {
+    const { code, data } = await getModelDetail({ modelId: modelId || tagItem?.modelId });
+    if (code === 200) {
+      if (Array.isArray(data?.modelDetail?.fields)) {
+        if (Array.isArray(tagItem?.tagDefineParams?.dependencies)) {
+          const fieldList = data.modelDetail.fields.map((item: ISemantic.IFieldTypeParamsItem) => {
+            const { fieldName } = item;
+            if (tagItem?.tagDefineParams?.dependencies.includes(fieldName)) {
+              return {
+                ...item,
+                orderNumber: 9999,
+              };
+            }
+            return {
+              ...item,
+              orderNumber: 0,
+            };
+          });
+
+          const sortList = fieldList.sort(
+            (
+              a: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
+              b: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
+            ) => b.orderNumber - a.orderNumber,
+          );
+          setFieldList(sortList);
+        } else {
+          setFieldList(data.modelDetail.fields);
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    queryModelDetail();
+    queryDimensionList(modelId);
+    queryMetricList(modelId);
+  }, [modelId]);
+
+  const handleNext = async () => {
+    const fieldsValue = await form.validateFields();
+    const submitForm = {
+      ...formValRef.current,
+      ...fieldsValue,
+      tagDefineType: defineType,
+      tagDefineParams: exprTypeParamsState[defineType],
+    };
+    updateFormVal(submitForm);
+    if (currentStep < 1) {
+      forward();
+    } else {
+      await saveTag(submitForm);
+    }
+  };
+
+  const initData = () => {
+    if (!tagItem) {
+      return;
+    }
+    const { id, name, bizName, description, sensitiveLevel, tagDefineType, tagDefineParams } =
+      tagItem;
+
+    const initValue = {
+      id,
+      name,
+      bizName,
+      sensitiveLevel,
+      description,
+      tagDefineType,
+      tagDefineParams,
+    };
+    const editInitFormVal = {
+      ...formValRef.current,
+      ...initValue,
+    };
+    const { dependencies, expr } = tagDefineParams || {};
+    setExprTypeParamsState({
+      ...exprTypeParamsState,
+      [tagDefineType]: {
+        dependencies: dependencies || [],
+        expr: expr || '',
+      },
+    });
+    updateFormVal(editInitFormVal);
+    form.setFieldsValue(initValue);
+    if (tagDefineType) {
+      setDefineType(tagDefineType);
+    }
+  };
+
+  useEffect(() => {
+    if (isEdit) {
+      initData();
+    }
+  }, [tagItem]);
+
+  const isEmptyConditions = (
+    tagDefineType: TAG_DEFINE_TYPE,
+    metricDefineParams: ISemantic.ITagDefineParams,
+  ) => {
+    const { dependencies, expr } = metricDefineParams || {};
+    if (!expr) {
+      message.error('请输入度量表达式');
+      return true;
+    }
+    if (tagDefineType === TAG_DEFINE_TYPE.DIMENSION) {
+      if (!(Array.isArray(dependencies) && dependencies.length > 0)) {
+        message.error('请添加一个维度');
+        return true;
+      }
+    }
+    if (tagDefineType === TAG_DEFINE_TYPE.FIELD) {
+      if (!(Array.isArray(dependencies) && dependencies.length > 0)) {
+        message.error('请添加一个字段');
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const saveTag = async (fieldsValue: any) => {
+    const queryParams = {
+      modelId: isEdit ? tagItem.modelId : modelId,
+      ...fieldsValue,
+    };
+    if (isEmptyConditions(defineType, queryParams.tagDefineParams)) {
+      return;
+    }
+    let saveTagQuery = createTag;
+    if (queryParams.id) {
+      saveTagQuery = updateTag;
+    }
+    const { code, msg } = await saveTagQuery(queryParams);
+    if (code === 200) {
+      message.success('编辑标签成功');
+      onSubmit?.(queryParams);
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryDimensionList = async (modelId: number) => {
+    const { code, data, msg } = await getDimensionList({ modelId: modelId || tagItem?.modelId });
+    if (code === 200 && Array.isArray(data?.list)) {
+      const { list } = data;
+      if (isArrayOfValues(tagItem?.tagDefineParams?.dependencies)) {
+        const fieldList = list.map((item: ISemantic.IDimensionItem) => {
+          const { id } = item;
+          if (tagItem.tagDefineParams.dependencies.includes(id)) {
+            return {
+              ...item,
+              orderNumber: 9999,
+            };
+          }
+          return {
+            ...item,
+            orderNumber: 0,
+          };
+        });
+
+        const sortList = fieldList.sort(
+          (
+            a: ISemantic.IDimensionItem & { orderNumber: number },
+            b: ISemantic.IDimensionItem & { orderNumber: number },
+          ) => b.orderNumber - a.orderNumber,
+        );
+        setDimensionList(sortList);
+      } else {
+        setDimensionList(list);
+      }
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const queryMetricList = async (modelId: number) => {
+    const { code, data, msg } = await queryMetric({
+      modelId: modelId || tagItem?.modelId,
+    });
+    const { list } = data || {};
+    if (code === 200) {
+      if (isArrayOfValues(tagItem?.tagDefineParams?.dependencies)) {
+        const fieldList = list.map((item: ISemantic.IMetricItem) => {
+          const { id } = item;
+          if (tagItem.tagDefineParams.dependencies.includes(id)) {
+            return {
+              ...item,
+              orderNumber: 9999,
+            };
+          }
+          return {
+            ...item,
+            orderNumber: 0,
+          };
+        });
+
+        const sortList = fieldList.sort(
+          (
+            a: ISemantic.IMetricItem & { orderNumber: number },
+            b: ISemantic.IMetricItem & { orderNumber: number },
+          ) => b.orderNumber - a.orderNumber,
+        );
+        setMetricList(sortList);
+      } else {
+        setMetricList(list);
+      }
+
+      setMetricMap(
+        list.reduce(
+          (infoMap: Record<string, ISemantic.IMetricItem>, item: ISemantic.IMetricItem) => {
+            infoMap[`${item.id}`] = item;
+            return infoMap;
+          },
+          {},
+        ),
+      );
+    } else {
+      message.error(msg);
+      setMetricList([]);
+    }
+  };
+
+  const renderContent = () => {
+    if (currentStep === 1) {
+      return (
+        <div>
+          <div
+            style={{
+              padding: '0 0 20px 24px',
+              // borderBottom: '1px solid #eee',
+            }}
+          >
+            <Radio.Group
+              buttonStyle="solid"
+              value={defineType}
+              onChange={(e) => {
+                setDefineType(e.target.value);
+              }}
+            >
+              <Radio.Button value={TAG_DEFINE_TYPE.DIMENSION}>按维度</Radio.Button>
+              <Radio.Button value={TAG_DEFINE_TYPE.METRIC}>按指标</Radio.Button>
+              <Radio.Button value={TAG_DEFINE_TYPE.FIELD}>按字段</Radio.Button>
+            </Radio.Group>
+          </div>
+
+          {defineType === TAG_DEFINE_TYPE.DIMENSION && (
+            <>
+              <p className={styles.desc}>
+                基于
+                <Tag color="#2499ef14" className={styles.markerTag}>
+                  维度
+                </Tag>
+                来生成新的标签
+              </p>
+
+              <TagDimensionFormTable
+                typeParams={exprTypeParamsState[TAG_DEFINE_TYPE.DIMENSION]}
+                dimensionList={dimensionList}
+                onFieldChange={(dimension: ISemantic.IDimensionTypeParamsItem[]) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [TAG_DEFINE_TYPE.DIMENSION]: {
+                        ...prevState[TAG_DEFINE_TYPE.DIMENSION],
+                        dependencies: dimension.map((item) => item.id),
+                      },
+                    };
+                  });
+                }}
+                onSqlChange={(expr: string) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [TAG_DEFINE_TYPE.DIMENSION]: {
+                        ...prevState[TAG_DEFINE_TYPE.DIMENSION],
+                        expr,
+                      },
+                    };
+                  });
+                }}
+              />
+            </>
+          )}
+          {defineType === TAG_DEFINE_TYPE.METRIC && (
+            <>
+              <p className={styles.desc}>
+                基于
+                <Tag color="#2499ef14" className={styles.markerTag}>
+                  指标
+                </Tag>
+                来生成新的标签
+              </p>
+
+              <MetricMetricFormTable
+                typeParams={{
+                  ...exprTypeParamsState[TAG_DEFINE_TYPE.METRIC],
+                  metrics: exprTypeParamsState[TAG_DEFINE_TYPE.METRIC].dependencies.map((id) => {
+                    return { id: Number(id), bizName: metricMap[id]?.bizName || '' };
+                  }),
+                }}
+                metricList={metricList}
+                onFieldChange={(metrics: ISemantic.IMetricTypeParamsItem[]) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [TAG_DEFINE_TYPE.METRIC]: {
+                        ...prevState[TAG_DEFINE_TYPE.METRIC],
+                        dependencies: metrics.map((item) => item.id),
+                      },
+                    };
+                  });
+                }}
+                onSqlChange={(expr: string) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [TAG_DEFINE_TYPE.METRIC]: {
+                        ...prevState[TAG_DEFINE_TYPE.METRIC],
+                        expr,
+                      },
+                    };
+                  });
+                }}
+              />
+            </>
+          )}
+          {defineType === TAG_DEFINE_TYPE.FIELD && (
+            <>
+              <MetricFieldFormTable
+                typeParams={{
+                  ...exprTypeParamsState[TAG_DEFINE_TYPE.FIELD],
+                  fields: exprTypeParamsState[TAG_DEFINE_TYPE.FIELD].dependencies.map(
+                    (fieldName) => {
+                      return { fieldName: `${fieldName}` };
+                    },
+                  ),
+                }}
+                fieldList={fieldList}
+                onFieldChange={(fields: ISemantic.IFieldTypeParamsItem[]) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [TAG_DEFINE_TYPE.FIELD]: {
+                        ...prevState[TAG_DEFINE_TYPE.FIELD],
+                        dependencies: fields.map((item) => item.fieldName),
+                      },
+                    };
+                  });
+                }}
+                onSqlChange={(expr: string) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [TAG_DEFINE_TYPE.FIELD]: {
+                        ...prevState[TAG_DEFINE_TYPE.FIELD],
+                        expr,
+                      },
+                    };
+                  });
+                }}
+              />
+            </>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <>
+        <FormItem hidden={true} name="id" label="ID">
+          <Input placeholder="id" />
+        </FormItem>
+        <FormItem
+          name="name"
+          label="标签名称"
+          rules={[{ required: true, message: '请输入标签名称' }]}
+        >
+          <Input placeholder="名称不可重复" />
+        </FormItem>
+        <FormItem
+          name="bizName"
+          label="英文名称"
+          rules={[{ required: true, message: '请输入英文名称' }]}
+        >
+          <Input placeholder="名称不可重复" disabled={isEdit} />
+        </FormItem>
+        <FormItem
+          name="sensitiveLevel"
+          label="敏感度"
+          rules={[{ required: true, message: '请选择敏感度' }]}
+        >
+          <Select placeholder="请选择敏感度">
+            {SENSITIVE_LEVEL_OPTIONS.map((item) => (
+              <Option key={item.value} value={item.value}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        </FormItem>
+        <FormItem
+          name="description"
+          label={
+            <TableTitleTooltips
+              title="业务口径"
+              overlayInnerStyle={{ width: 600 }}
+              tooltips={
+                <>
+                  <p>
+                    在录入标签时，请务必详细填写标签口径。口径描述对于理解标签的含义、计算方法和使用场景至关重要。一个清晰、准确的口径描述可以帮助其他用户更好地理解和使用该标签，避免因为误解而导致错误的数据分析和决策。在填写口径时，建议包括以下信息：
+                  </p>
+                  <p>1. 标签的计算方法：详细说明标签是如何计算的，包括涉及的公式、计算步骤等。</p>
+                  <p>2. 数据来源：描述标签所依赖的数据来源，包括数据表、字段等信息。</p>
+                  <p>3. 使用场景：说明该标签适用于哪些业务场景，以及如何在这些场景中使用该标签。</p>
+                  <p>4. 任何其他相关信息：例如数据更新频率、数据质量要求等。</p>
+                  <p>
+                    请确保口径描述清晰、简洁且易于理解，以便其他用户能够快速掌握标签的核心要点。
+                  </p>
+                </>
+              }
+            />
+          }
+          rules={[{ required: true, message: '请输入业务口径' }]}
+        >
+          <TextArea placeholder="请输入业务口径" />
+        </FormItem>
+      </>
+    );
+  };
+  const renderFooter = () => {
+    if (currentStep === 1) {
+      return (
+        <>
+          <Button style={{ float: 'left' }} onClick={backward}>
+            上一步
+          </Button>
+          <Button onClick={onCancel}>取消</Button>
+          <Button type="primary" onClick={handleNext}>
+            完成
+          </Button>
+        </>
+      );
+    }
+    return (
+      <>
+        <Button onClick={onCancel}>取消</Button>
+        <Button type="primary" onClick={handleNext}>
+          下一步
+        </Button>
+      </>
+    );
+  };
+  return (
+    <Modal
+      forceRender
+      width={800}
+      style={{ top: 48 }}
+      // styles={{ padding: '32px 40px 48px' }}
+      destroyOnClose
+      title={`${isEdit ? '编辑' : '新建'}标签`}
+      maskClosable={false}
+      open={createModalVisible}
+      footer={renderFooter()}
+      onCancel={onCancel}
+    >
+      <>
+        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
+          <Step title="基本信息" />
+          <Step title="表达式" />
+        </Steps>
+        <Form
+          {...formLayout}
+          form={form}
+          initialValues={{
+            ...formValRef.current,
+          }}
+          className={styles.form}
+        >
+          {renderContent()}
+        </Form>
+      </>
+    </Modal>
+  );
+};
+
+export default TagInfoCreateForm;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoSider.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoSider.tsx
new file mode 100644
index 000000000..2e2fc1ee8
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoSider.tsx
@@ -0,0 +1,258 @@
+import { Tag, Space, Tooltip, Typography } from 'antd';
+import React, { ReactNode } from 'react';
+import { connect } from 'umi';
+import type { StateType } from '../../model';
+import dayjs from 'dayjs';
+import {
+  ExportOutlined,
+  SolutionOutlined,
+  ContainerOutlined,
+  PartitionOutlined,
+  AreaChartOutlined,
+} from '@ant-design/icons';
+import styles from '../style.less';
+import {
+  SENSITIVE_LEVEL_ENUM,
+  SENSITIVE_LEVEL_COLOR,
+  TAG_DEFINE_TYPE,
+  TagDefineTypeMap,
+} from '../../constant';
+
+import { ISemantic } from '../../data';
+import IndicatorStar from '../../components/IndicatorStar';
+
+const { Text } = Typography;
+
+type Props = {
+  tagData: ISemantic.ITagItem;
+  domainManger: StateType;
+  onNodeChange: (params?: { eventName?: string }) => void;
+  onEditBtnClick?: (tagData: any) => void;
+  onDimensionRelationBtnClick?: () => void;
+  dimensionMap: Record<string, ISemantic.IDimensionItem>;
+  metricMap: Record<string, ISemantic.IMetricItem>;
+  [key: string]: any;
+};
+
+const TagInfoSider: React.FC<Props> = ({ tagData, dimensionMap, metricMap }) => {
+  const tagDefineDependenciesRender = () => {
+    if (!tagData) {
+      return <></>;
+    }
+    const { tagDefineType, tagDefineParams } = tagData;
+    const { dependencies } = tagDefineParams;
+    if (!Array.isArray(dependencies)) {
+      return <></>;
+    }
+
+    if (tagDefineType === TAG_DEFINE_TYPE.DIMENSION) {
+      return dependencies.reduce((nodes: ReactNode[], id) => {
+        const target = dimensionMap[id];
+        if (target) {
+          nodes.push(
+            <Tag color="blue" key={id}>
+              {target.name}
+            </Tag>,
+          );
+        }
+        return nodes;
+      }, []);
+    }
+
+    if (tagDefineType === TAG_DEFINE_TYPE.METRIC) {
+      return dependencies.reduce((nodes: ReactNode[], id) => {
+        const target = metricMap[id];
+        if (target) {
+          nodes.push(
+            <Tag color="blue" key={id}>
+              {target.name}
+            </Tag>,
+          );
+        }
+        return nodes;
+      }, []);
+    }
+
+    if (tagDefineType === TAG_DEFINE_TYPE.FIELD) {
+      return dependencies.map((fieldName) => (
+        <Tag color="blue" key={fieldName}>
+          {fieldName}
+        </Tag>
+      ));
+    }
+    return <></>;
+  };
+
+  return (
+    <div className={styles.metricInfoSider}>
+      <div className={styles.title}>
+        <div className={styles.name}>
+          <Space>
+            <IndicatorStar indicatorId={tagData?.id} initState={tagData?.isCollect} />
+            {tagData?.name}
+            {tagData?.hasAdminRes && (
+              <span
+                className={styles.gotoMetricListIcon}
+                onClick={() => {
+                  window.open(`/webapp/model/${tagData.domainId}/${tagData.modelId}/`);
+                }}
+              >
+                <Tooltip title="前往所属模型指标列表">
+                  <ExportOutlined />
+                </Tooltip>
+              </span>
+            )}
+          </Space>
+        </div>
+        {tagData?.bizName && <div className={styles.bizName}>{tagData.bizName}</div>}
+      </div>
+
+      <div className={styles.sectionContainer}>
+        <hr className={styles.hr} />
+        <div className={styles.section}>
+          <div className={styles.sectionTitleBox}>
+            <span className={styles.sectionTitle}>
+              <Space>
+                <ContainerOutlined />
+                基本信息
+              </Space>
+            </span>
+          </div>
+
+          <div className={styles.item}>
+            <span className={styles.itemLable}>敏感度: </span>
+            <span className={styles.itemValue}>
+              {tagData?.sensitiveLevel !== undefined && (
+                <span>
+                  <Tag color={SENSITIVE_LEVEL_COLOR[tagData.sensitiveLevel]}>
+                    {SENSITIVE_LEVEL_ENUM[tagData.sensitiveLevel]}
+                  </Tag>
+                </span>
+              )}
+            </span>
+          </div>
+
+          <div className={styles.item}>
+            <span className={styles.itemLable}>所属模型: </span>
+            <span className={styles.itemValue}>
+              <Space>
+                <Tag icon={<PartitionOutlined />} color="#3b5999">
+                  {tagData?.modelName || '模型名为空'}
+                </Tag>
+                {tagData?.hasAdminRes && (
+                  <span
+                    className={styles.gotoMetricListIcon}
+                    onClick={() => {
+                      window.open(`/webapp/model/${tagData.domainId}/0/overview`);
+                    }}
+                  >
+                    <Tooltip title="前往模型设置页">
+                      <ExportOutlined />
+                    </Tooltip>
+                  </span>
+                )}
+              </Space>
+            </span>
+          </div>
+
+          <div className={styles.item}>
+            <span className={styles.itemLable}>描述: </span>
+            <span className={styles.itemValue}>{tagData?.description}</span>
+          </div>
+        </div>
+        <hr className={styles.hr} />
+        <div className={styles.section}>
+          <div className={styles.sectionTitleBox}>
+            <span className={styles.sectionTitle}>
+              <Space>
+                <SolutionOutlined />
+                创建信息
+              </Space>
+            </span>
+          </div>
+
+          <div className={styles.item}>
+            <span className={styles.itemLable}>创建人: </span>
+            <span className={styles.itemValue}>{tagData?.createdBy}</span>
+          </div>
+          <div className={styles.item}>
+            <span className={styles.itemLable}>创建时间: </span>
+            <span className={styles.itemValue}>
+              {tagData?.createdAt ? dayjs(tagData?.createdAt).format('YYYY-MM-DD HH:mm:ss') : ''}
+            </span>
+          </div>
+          <div className={styles.item}>
+            <span className={styles.itemLable}>更新时间: </span>
+            <span className={styles.itemValue}>
+              {tagData?.createdAt ? dayjs(tagData?.updatedAt).format('YYYY-MM-DD HH:mm:ss') : ''}
+            </span>
+          </div>
+        </div>
+        <hr className={styles.hr} />
+
+        <div className={styles.section}>
+          <div className={styles.sectionTitleBox}>
+            <span className={styles.sectionTitle}>
+              <Space>
+                <AreaChartOutlined />
+                应用信息
+              </Space>
+            </span>
+          </div>
+
+          <div className={styles.item}>
+            <span className={styles.itemLable}>创建来源:</span>
+            <span className={styles.itemValue}>
+              <span style={{ color: '#3182ce' }}>
+                {TagDefineTypeMap[TAG_DEFINE_TYPE[tagData?.tagDefineType]]}
+              </span>
+            </span>
+          </div>
+
+          <div className={styles.item}>
+            <span className={styles.itemValue}>
+              <Space size={2} wrap>
+                {tagDefineDependenciesRender()}
+              </Space>
+            </span>
+          </div>
+        </div>
+
+        {/* <div className={styles.ctrlBox}>
+          <ul className={styles.ctrlList}>
+            <Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
+              <li
+                style={{ display: 'block' }}
+                onClick={() => {
+                  onDimensionRelationBtnClick?.();
+                }}
+              >
+                <Space style={{ width: '100%' }}>
+                  <div className={styles.subTitle}>下钻维度</div>
+                  <span className={styles.ctrlItemIcon}>
+                    <PlusOutlined />
+                  </span>
+                </Space>
+                {isArrayOfValues(relationDimensionOptions) && (
+                  <div style={{ marginLeft: 0, marginTop: 20 }}>
+                    <Space size={5} wrap>
+                      {relationDimensionOptions.map((item) => (
+                        <Tag color="blue" key={item.value} style={{ marginRight: 0 }}>
+                          {item.label}
+                        </Tag>
+                      ))}
+                    </Space>
+                  </div>
+                )}
+              </li>
+            </Tooltip>
+          </ul>
+        </div> */}
+      </div>
+    </div>
+  );
+};
+
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(TagInfoSider);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagTrendSection.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagTrendSection.tsx
new file mode 100644
index 000000000..f676a919a
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagTrendSection.tsx
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+
+import { getTagValueDistribution } from '@/pages/SemanticModel/service';
+
+import TagTable from './Table';
+
+import { ISemantic } from '../../data';
+
+import ProCard from '@ant-design/pro-card';
+import { TagGraph } from 'supersonic-insights-flow-components';
+import styles from '../style.less';
+
+const { TagValueBar } = TagGraph;
+
+type Props = {
+  relationDimensionOptions: { value: string; label: string; modelId: number }[];
+  dimensionList: ISemantic.IDimensionItem[];
+  tagData?: ISemantic.ITagItem;
+  [key: string]: any;
+};
+
+const TagTrendSection: React.FC<Props> = ({ tagData }) => {
+  const [tagTrendLoading, setTagTrendLoading] = useState<boolean>(false);
+
+  const [barData, setBarData] = useState<any[]>([]);
+  const [tableColumnConfig, setTableColumnConfig] = useState<ColumnConfig[]>([]);
+
+  const queryTagValueDistribution = async (params: any) => {
+    setTagTrendLoading(true);
+    const { data, code } = await getTagValueDistribution({
+      itemId: params.id,
+    });
+    setTagTrendLoading(false);
+    if (code === 200 && Array.isArray(data?.valueDistributionList)) {
+      const { valueDistributionList, name } = data;
+      const distributionOptions = valueDistributionList.map((item) => {
+        const { valueMap, valueCount } = item;
+        return {
+          type: valueMap,
+          value: valueCount,
+        };
+      });
+      const columns = [
+        {
+          dataIndex: 'type',
+          title: name,
+        },
+        {
+          dataIndex: 'value',
+          title: '标签值',
+        },
+      ];
+      setTableColumnConfig(columns);
+      setBarData(distributionOptions);
+    }
+  };
+
+  useEffect(() => {
+    if (tagData?.id) {
+      queryTagValueDistribution({
+        ...tagData,
+      });
+    }
+  }, [tagData]);
+
+  return (
+    <div className={styles.metricTrendSection}>
+      <div className={styles.sectionBox}>
+        <ProCard
+          size="small"
+          title={
+            <>
+              <span>数据趋势</span>
+              {/* {authMessage && <div style={{ color: '#d46b08' }}>{authMessage}</div>} */}
+            </>
+          }
+        >
+          <TagValueBar height={400} data={barData} />
+        </ProCard>
+      </div>
+
+      <div className={styles.sectionBox} style={{ paddingBottom: 0 }}>
+        <ProCard size="small" title="数据明细" collapsible>
+          <div style={{ minHeight: '450px' }}>
+            <TagTable
+              loading={tagTrendLoading}
+              columnConfig={tableColumnConfig}
+              dataSource={barData}
+            />
+          </div>
+        </ProCard>
+      </div>
+    </div>
+  );
+};
+
+export default TagTrendSection;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/constants.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/constants.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/data.d.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/data.d.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/index.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/index.tsx
new file mode 100644
index 000000000..3a4c6c82c
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const market: React.FC = ({ children }) => {
+  return <>{children}</>;
+};
+
+export default market;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/model.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/model.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/service.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/service.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/style.less b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/style.less
new file mode 100644
index 000000000..647fa3e24
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/style.less
@@ -0,0 +1,340 @@
+.TagFilterWrapper {
+    margin: 20px;
+    padding: 20px;
+    border-radius: 10px;
+    padding-bottom: 5px;
+    background: #fff;
+}
+
+.tagTable {
+    margin: 20px;
+}
+
+
+
+.searchBox {
+    // margin-bottom: 12px;
+    background: #fff;
+    border-radius: 10px;
+    width: 540px;
+    margin: 0 auto;
+    .searchInput {
+        width: 100%;
+        border: 1px solid rgba(35, 104, 184, 0.6);
+        border-radius: 10px;
+    }
+    :global {
+
+        .ant-select-auto-complete {
+            width: 100%;
+        }
+        .ant-input {
+            height: 50px;
+            padding: 0 15px;
+            color: #515a6e;
+            font-size: 14px;
+            line-height: 50px;
+            background: hsla(0, 0%, 100%, 0.2);
+            border: none;
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+            caret-color: #296df3;
+  
+            &:focus {
+                border-right-width: 0 !important;
+                box-shadow: none;
+            }
+        }
+  
+        .ant-input-group-addon {
+            left: 0 !important;
+            padding: 0;
+            background: hsla(0, 0%, 100%, 0.2);
+            border: none;
+            border-top-left-radius: 0;
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+            border-bottom-left-radius: 0;
+  
+            .ant-btn {
+                width: 72px;
+                height: 50px;
+                margin: 0;
+                color: rgba(35, 104, 184, 0.6);
+                font-size: 16px;
+                background-color: transparent;
+                background-color: transparent;
+                border: none;
+                box-shadow: none !important;
+  
+                &::after {
+                    box-shadow: none !important;
+                }
+  
+                .anticon {
+                    font-size: 28px;
+  
+                    &:hover {
+                        color: @primary-color;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+.tagDetailWrapper {
+    height: calc(100vh - 56px);
+    overflow: scroll;
+    .tagDetailTab {
+        :global {
+            .ant-tabs-nav {
+                background-color: rgb(255, 255, 255);
+                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+                margin: 10px 20px 0 20px;
+                padding: 0 20px;
+                border-radius: 8px;
+            }
+            .ant-tabs-tab {
+                padding: 12px 0;
+                color: #344767;
+                font-weight: 500;
+            }
+        }
+
+    }
+    .tagDetail {
+        display: flex;
+        padding: 0px;
+        width: 100%;
+        background-color: transparent;
+        position: relative;
+        flex-direction: row;
+        .tabContainer {
+            background-color: rgb(240, 242, 245);
+            width: calc(100vw - 450px);
+        }
+        .metricInfoContent {
+            padding:25px;
+            .title {
+                margin-bottom: 12px;
+                font-size: 16px;
+                color: #0e73ff;
+                font-weight: bold;
+                position: relative;
+                &::before {
+                    display: block;
+                    position: absolute;
+                    content: "";
+                    left: -10px;
+                    top: 10px;
+                    height: 14px;
+                    width: 3px;
+                    font-size: 0;
+                    background: #0e73ff;
+                    border-radius: 2px;
+                    border: 1px solid #0e73ff;
+                }
+            }
+        }
+        .siderContainer {
+            background-color: rgb(255, 255, 255);
+            width: 450px;
+            min-height: calc(100vh - 78px);
+            margin: 10px 20px 20px 0; 
+            border-radius: 6px;
+            box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px, rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
+        }
+    }
+}
+
+.sectionBox {
+    margin: 20px;
+    padding: 10px;
+    box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
+    background-color: rgb(255, 255, 255);
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 6px;
+    background-image: none;
+    overflow: hidden;
+    position: relative;
+}
+
+
+.metricInfoSider{
+    padding: 24px;
+    color: #344767;
+    .gotoMetricListIcon {
+        color: #3182ce;
+        cursor: pointer;
+        &:hover {
+            color: #5493ff;
+        }
+    }
+    .title {
+        .name {
+            font-size: 18px;
+            font-weight: 600;
+        }
+        .bizName {
+            margin: 5px 0 0 25px;
+            color: #7b809a;
+            font-weight: 400;
+        }
+    }
+    .desc {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 1.9;
+        margin-top: 8px;
+        display: block;
+        color: #7b809a;
+    }
+    .subTitle {
+        margin: 0px;
+        font-size: 14px;
+        line-height: 1.25;
+        letter-spacing: 0.03333em;
+        opacity: 1;
+        text-transform: uppercase;
+        vertical-align: unset;
+        text-decoration: none;
+        color: rgb(123, 128, 154);
+        font-weight: 700;
+    }
+    .sectionContainer{
+        // transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        border-radius: 6px;
+        // box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
+        background-image: none;
+        margin-top: 20px;
+        overflow: hidden;
+        .section {
+            padding: 16px;
+            line-height: 1.25;
+            opacity: 1;
+            background: transparent;
+            color: rgb(52, 71, 103);
+            box-shadow: none;
+            .sectionTitleBox {
+                padding: 8px 0;
+                opacity: 1;
+                background: transparent;
+                color: rgb(52, 71, 103);
+                box-shadow: none;
+                .sectionTitle {
+                    margin: 0px;
+                    font-size: 16px;
+                    line-height: 1.625;
+                    letter-spacing: 0.0075em;
+                    opacity: 1;
+                    text-transform: capitalize;
+                    vertical-align: unset;
+                    text-decoration: none;
+                    color: rgb(52, 71, 103);
+                    font-weight: 600;
+                }
+            }
+
+            .item {
+                display: flex;
+                padding-top: 8px;
+                padding-bottom: 8px;
+                padding-right: 16px;
+                opacity: 1;
+                background: transparent;
+                color: rgb(52, 71, 103);
+                box-shadow: none;
+                .itemLable {
+                    margin: 0px;
+                    font-size: 14px;
+                    line-height: 1.5;
+                    letter-spacing: 0.02857em;
+                    opacity: 1;
+                    text-transform: capitalize;
+                    vertical-align: unset;
+                    text-decoration: none;
+                    color: #344767;
+                    margin-right: 10px;
+                    min-width: fit-content;
+                    font-weight: 700;
+                }
+                .itemValue{
+                    margin: 0px;
+                    font-size: 14px;
+                    line-height: 1.5;
+                    letter-spacing: 0.02857em;
+                    opacity: 1;
+                    text-transform: none;
+                    vertical-align: unset;
+                    text-decoration: none;
+                    color: #7b809a;
+                    font-weight: 400; 
+                }
+            }
+        }
+        .hr {
+            margin: 0px;
+            flex-shrink: 0;
+            // border-width: 0px 0px thin;
+            border-style: solid;
+            border-color: rgb(242, 244, 247);
+        }
+        .ctrlBox{
+            .ctrlList{
+                list-style: none;
+                margin: 0px;
+                padding: 8px 0px;
+                position: relative;
+                background-color: rgb(249, 250, 251);
+                li {
+                    -webkit-tap-highlight-color: transparent;
+                    background-color: transparent;
+                    outline: 0px;
+                    border: 0px;
+                    margin: 4px;
+                    border-radius: 0px;
+                    cursor: pointer;
+                    user-select: none;
+                    vertical-align: middle;
+                    appearance: none;
+                    color: inherit;
+                    display: flex;
+                    -webkit-box-flex: 1;
+                    flex-grow: 1;
+                    -webkit-box-pack: start;
+                    justify-content: flex-start;
+                    -webkit-box-align: center;
+                    align-items: center;
+                    position: relative;
+                    text-decoration: none;
+                    min-width: 0px;
+                    box-sizing: border-box;
+                    text-align: left;
+                    padding: 4px 16px;
+                    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+                    &:hover {
+                        text-decoration: none;
+                        background-color: rgba(16, 24, 40, 0.04);
+                        color: #3182ce;
+                    } 
+                }
+                .ctrlItemIcon {
+                    flex-shrink: 0;
+                    font-size: 14px;
+                    margin-right: 5px;
+                    min-width: unset;
+                }
+                .styles.ctrlItemLable {
+                    margin: 0px;
+                    line-height: 1.6;
+                    font-weight: 400;
+                    font-size: 14px;
+                    display: block;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/utils.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/utils.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
index 190d1511c..4b38ce7e3 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
@@ -21,7 +21,7 @@ import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
-import { ColumnsConfig } from '../components/MetricTableColumnRender';
+import { ColumnsConfig } from '../components/TableColumnRender';
 
 type Props = {
   dispatch: Dispatch;
@@ -159,6 +159,8 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     setCreateModalVisible(true);
   };
 
+  const columnsConfig = ColumnsConfig();
+
   const columns: ProColumns[] = [
     {
       dataIndex: 'id',
@@ -173,7 +175,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       // width: '20%',
       width: 280,
       fixed: 'left',
-      render: ColumnsConfig.metricInfo.render,
+      render: columnsConfig.indicatorInfo.render,
     },
     // {
     //   dataIndex: 'modelName',
@@ -200,7 +202,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       title: '敏感度',
       width: 150,
       valueEnum: SENSITIVE_LEVEL_ENUM,
-      render: ColumnsConfig.sensitiveLevel.render,
+      render: columnsConfig.sensitiveLevel.render,
     },
 
     {
@@ -208,14 +210,14 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       title: '描述',
       search: false,
       width: 300,
-      render: ColumnsConfig.description.render,
+      render: columnsConfig.description.render,
     },
     {
       dataIndex: 'status',
       title: '状态',
       width: 180,
       search: false,
-      render: ColumnsConfig.state.render,
+      render: columnsConfig.state.render,
     },
     {
       dataIndex: 'createdBy',
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
index 2fa8e9ede..bcf56b944 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
@@ -16,7 +16,7 @@ import styles from './style.less';
 import { isString } from 'lodash';
 import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
 import { ISemantic } from '../data';
-import MetricStar from './components/MetricStar';
+import IndicatorStar from '../components/IndicatorStar';
 
 const { Text } = Typography;
 
@@ -40,7 +40,7 @@ const MetricInfoSider: React.FC<Props> = ({
       <div className={styles.title}>
         <div className={styles.name}>
           <Space>
-            <MetricStar metricId={metircData?.id} initState={metircData?.isCollect} />
+            <IndicatorStar indicatorId={metircData?.id} initState={metircData?.isCollect} />
             {metircData?.name}
             {metircData?.hasAdminRes && (
               <span
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewTable.tsx
index 2c4faf696..b1daf8a3c 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewTable.tsx
@@ -11,7 +11,7 @@ import ViewCreateFormModal from './ViewCreateFormModal';
 import moment from 'moment';
 import styles from '../../components/style.less';
 import { ISemantic } from '../../data';
-import { ColumnsConfig } from '../../components/MetricTableColumnRender';
+import { ColumnsConfig } from '../../components/TableColumnRender';
 import ViewSearchFormModal from './ViewSearchFormModal';
 
 type Props = {
@@ -59,6 +59,7 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
       message.error(msg);
     }
   };
+  const columnsConfig = ColumnsConfig();
 
   const columns: ProColumns[] = [
     {
@@ -88,7 +89,7 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
       dataIndex: 'status',
       title: '状态',
       search: false,
-      render: ColumnsConfig.state.render,
+      render: columnsConfig.state.render,
     },
     {
       dataIndex: 'createdBy',
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
index a02a343ae..bdd2824d5 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
@@ -200,7 +200,6 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
             <DataSource
               initialValues={dataSourceItem}
               onSubmitSuccess={(dataSourceInfo) => {
-                console.log('onSubmitSuccess', dataSourceInfo);
                 const { columns, sql, databaseId, sqlParams } = dataSourceInfo;
                 setSql(sql);
                 setScriptColumns(columns);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
index 62859432b..7c3f62768 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
@@ -6,12 +6,13 @@ import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import type { StateType } from '../model';
 import { StatusEnum } from '../enum';
-import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../constant';
+import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
 import {
   getModelList,
   getDimensionList,
   deleteDimension,
   batchUpdateDimensionStatus,
+  batchCreateTag,
 } from '../service';
 import DimensionInfoModal from './DimensionInfoModal';
 import DimensionValueSettingModal from './DimensionValueSettingModal';
@@ -19,7 +20,7 @@ import { ISemantic, IDataSource } from '../data';
 import TableHeaderFilter from './TableHeaderFilter';
 import moment from 'moment';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
-import { ColumnsConfig } from './MetricTableColumnRender';
+import { ColumnsConfig } from './TableColumnRender';
 import styles from './style.less';
 
 type Props = {
@@ -114,6 +115,32 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     message.error(msg);
   };
 
+  const queryBatchExportTag = async (ids: React.Key[]) => {
+    if (Array.isArray(ids) && ids.length === 0) {
+      return;
+    }
+    setLoading(true);
+    const { code, msg } = await batchCreateTag({
+      itemIds: ids,
+      type: TAG_DEFINE_TYPE.DIMENSION,
+      modelId,
+    });
+    setLoading(false);
+    if (code === 200) {
+      queryDimensionList({ ...filterParams, ...defaultPagination });
+      dispatch({
+        type: 'domainManger/queryDimensionList',
+        payload: {
+          modelId,
+        },
+      });
+      return;
+    }
+    message.error(msg);
+  };
+
+  const columnsConfig = ColumnsConfig();
+
   const columns: ProColumns[] = [
     {
       dataIndex: 'id',
@@ -133,7 +160,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       title: '维度',
       fixed: 'left',
       width: 280,
-      render: ColumnsConfig.dimensionInfo.render,
+      render: columnsConfig.dimensionInfo.render,
       search: false,
     },
     {
@@ -141,7 +168,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       title: '敏感度',
       width: 150,
       valueEnum: SENSITIVE_LEVEL_ENUM,
-      render: ColumnsConfig.sensitiveLevel.render,
+      render: columnsConfig.sensitiveLevel.render,
     },
     {
       dataIndex: 'isTag',
@@ -163,7 +190,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       title: '状态',
       width: 150,
       search: false,
-      render: ColumnsConfig.state.render,
+      render: columnsConfig.state.render,
     },
     {
       dataIndex: 'createdBy',
@@ -176,7 +203,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       dataIndex: 'description',
       title: '描述',
       search: false,
-      render: ColumnsConfig.description.render,
+      render: columnsConfig.description.render,
     },
 
     {
@@ -288,6 +315,9 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       case 'batchStop':
         queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
         break;
+      case 'exportTagButton':
+        queryBatchExportTag(selectedRowKeys);
+        break;
       default:
         break;
     }
@@ -405,6 +435,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           </Button>,
           <BatchCtrlDropDownButton
             key="ctrlBtnList"
+            extenderEnable={true}
             onDeleteConfirm={() => {
               queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
             }}
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
index 034d89281..249b0d274 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
@@ -1,17 +1,18 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
-import { message, Button, Space, Popconfirm, Input, Select } from 'antd';
+import { message, Button, Space, Popconfirm, Input, Select, Tag } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
 import type { Dispatch } from 'umi';
 import { StatusEnum } from '../enum';
 import { connect } from 'umi';
 import type { StateType } from '../model';
-import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../constant';
+import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
 import {
   queryMetric,
   deleteMetric,
   batchUpdateMetricStatus,
   batchDownloadMetric,
+  batchCreateTag,
 } from '../service';
 import MetricInfoCreateForm from './MetricInfoCreateForm';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
@@ -19,7 +20,7 @@ import TableHeaderFilter from './TableHeaderFilter';
 import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
-import { ColumnsConfig } from './MetricTableColumnRender';
+import { ColumnsConfig } from './TableColumnRender';
 
 type Props = {
   dispatch: Dispatch;
@@ -67,6 +68,30 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     message.error(msg);
   };
 
+  const queryBatchExportTag = async (ids: React.Key[]) => {
+    if (Array.isArray(ids) && ids.length === 0) {
+      return;
+    }
+    setLoading(true);
+    const { code, msg } = await batchCreateTag({
+      itemIds: ids,
+      type: TAG_DEFINE_TYPE.METRIC,
+      modelId,
+    });
+    setLoading(false);
+    if (code === 200) {
+      queryMetricList({ ...filterParams, ...defaultPagination });
+      dispatch({
+        type: 'domainManger/queryMetricList',
+        payload: {
+          modelId,
+        },
+      });
+      return;
+    }
+    message.error(msg);
+  };
+
   useEffect(() => {
     queryMetricList({ ...filterParams, ...defaultPagination });
   }, [filterParams]);
@@ -94,6 +119,8 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     }
   };
 
+  const columnsConfig = ColumnsConfig();
+
   const columns: ProColumns[] = [
     {
       dataIndex: 'id',
@@ -109,7 +136,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       fixed: 'left',
       // width: '30%',
       search: false,
-      render: ColumnsConfig.metricInfo.render,
+      render: columnsConfig.indicatorInfo.render,
     },
     {
       dataIndex: 'key',
@@ -121,7 +148,23 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       title: '敏感度',
       width: 160,
       valueEnum: SENSITIVE_LEVEL_ENUM,
-      render: ColumnsConfig.sensitiveLevel.render,
+      render: columnsConfig.sensitiveLevel.render,
+    },
+
+    {
+      dataIndex: 'isTag',
+      title: '是否为标签',
+      width: 120,
+      render: (isTag) => {
+        switch (isTag) {
+          case 0:
+            return '否';
+          case 1:
+            return <span style={{ color: '#1677ff' }}>是</span>;
+          default:
+            return <Tag color="default">未知</Tag>;
+        }
+      },
     },
 
     {
@@ -129,14 +172,14 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       title: '描述',
       width: 300,
       search: false,
-      render: ColumnsConfig.description.render,
+      render: columnsConfig.description.render,
     },
     {
       dataIndex: 'status',
       title: '状态',
       width: 160,
       search: false,
-      render: ColumnsConfig.state.render,
+      render: columnsConfig.state.render,
     },
     {
       dataIndex: 'createdBy',
@@ -236,6 +279,9 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       case 'batchStop':
         queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
         break;
+      case 'exportTagButton':
+        queryBatchExportTag(selectedRowKeys);
+        break;
       default:
         break;
     }
@@ -351,6 +397,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           <BatchCtrlDropDownButton
             key="ctrlBtnList"
             downloadLoading={downloadLoading}
+            extenderEnable={true}
             onDeleteConfirm={() => {
               queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
             }}
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonDimension/CommonDimensionInfoModal.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonDimension/CommonDimensionInfoModal.tsx
deleted file mode 100644
index 6c33a76c8..000000000
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonDimension/CommonDimensionInfoModal.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Form, Input, Modal, Select } from 'antd';
-
-import { formLayout } from '@/components/FormHelper/utils';
-import { ISemantic } from '../../data';
-import { saveCommonDimension, getDimensionList } from '../../service';
-import FormItemTitle from '@/components/FormHelper/FormItemTitle';
-import { message } from 'antd';
-
-export type CreateFormProps = {
-  domainId: number;
-  dimensionItem?: ISemantic.IDimensionItem;
-  onCancel: () => void;
-  bindModalVisible: boolean;
-  dimensionList: ISemantic.IDimensionItem[];
-  onSubmit: (values?: any) => void;
-};
-
-const FormItem = Form.Item;
-
-const { TextArea } = Input;
-
-const CommonDimensionInfoModal: React.FC<CreateFormProps> = ({
-  domainId,
-  onCancel,
-  bindModalVisible,
-  dimensionItem,
-  onSubmit: handleUpdate,
-}) => {
-  const isEdit = !!dimensionItem?.id;
-  const [form] = Form.useForm();
-  const { setFieldsValue, resetFields } = form;
-  const [saveLoading, setSaveLoading] = useState<boolean>(false);
-  const [dimensionOptions, setDimensionOptions] = useState([]);
-
-  useEffect(() => {
-    queryDimensionList();
-  }, []);
-
-  const queryDimensionList = async () => {
-    setSaveLoading(true);
-    const { code, data, msg } = await getDimensionList({ domainId });
-    setSaveLoading(false);
-    const dimensionList = data?.list;
-    if (code === 200 && Array.isArray(dimensionList)) {
-      const dimensionMap = dimensionList.reduce(
-        (
-          dataMap: Record<
-            string,
-            { label: string; options: { label: string; value: number; disabled?: boolean }[] }
-          >,
-          item: ISemantic.IDimensionItem,
-        ) => {
-          const { modelId, modelName, name, id, commonDimensionId } = item;
-          const target = dataMap[modelId];
-          if (target) {
-            target.options.push({
-              label: name,
-              value: id,
-              disabled: !!commonDimensionId,
-            });
-          } else {
-            dataMap[modelId] = {
-              label: modelName || `${modelId}`,
-              options: [
-                {
-                  label: name,
-                  value: id,
-                  disabled: !!commonDimensionId,
-                },
-              ],
-            };
-          }
-          return dataMap;
-        },
-        {},
-      );
-      setDimensionOptions(Object.values(dimensionMap));
-    } else {
-      message.error(msg);
-    }
-  };
-
-  const handleSubmit = async (isSilenceSubmit = false) => {
-    const fieldsValue = await form.validateFields();
-    await saveDimension(
-      {
-        ...fieldsValue,
-      },
-      isSilenceSubmit,
-    );
-  };
-
-  const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
-    const queryParams = {
-      domainId: isEdit ? dimensionItem.domainId : domainId,
-      type: 'categorical',
-      ...fieldsValue,
-    };
-
-    const { code, msg } = await saveCommonDimension(queryParams);
-    if (code === 200) {
-      if (!isSilenceSubmit) {
-        message.success('编辑公共维度成功');
-        handleUpdate(fieldsValue);
-      }
-      return;
-    }
-    message.error(msg);
-  };
-
-  useEffect(() => {
-    if (dimensionItem) {
-      setFieldsValue({ ...dimensionItem });
-    } else {
-      resetFields();
-    }
-  }, [dimensionItem]);
-
-  const renderFooter = () => {
-    return (
-      <>
-        <Button onClick={onCancel}>取消</Button>
-        <Button
-          type="primary"
-          loading={saveLoading}
-          onClick={() => {
-            handleSubmit();
-          }}
-        >
-          完成
-        </Button>
-      </>
-    );
-  };
-
-  const renderContent = () => {
-    return (
-      <>
-        <FormItem hidden={true} name="id" label="ID">
-          <Input placeholder="id" />
-        </FormItem>
-        <FormItem
-          name="name"
-          label="公共维度名称"
-          rules={[{ required: true, message: '请输入公共维度名称' }]}
-        >
-          <Input placeholder="名称不可重复" />
-        </FormItem>
-        <FormItem
-          name="bizName"
-          label="英文名称"
-          rules={[{ required: true, message: '请输入字段名称' }]}
-        >
-          <Input placeholder="名称不可重复" disabled={isEdit} />
-        </FormItem>
-        <FormItem
-          // label="关联维度"
-          label={
-            <FormItemTitle
-              title={`关联维度`}
-              subTitle={`维度不能关联多个公共维度，已关联的维度会被禁用`}
-            />
-          }
-          name="dimensionIds"
-          // rules={[{ required: true, message: '请选择所要关联的维度' }]}
-        >
-          <Select
-            showSearch
-            mode="multiple"
-            allowClear
-            placeholder="选择所要关联的维度"
-            options={dimensionOptions}
-            filterOption={(input, option: any) =>
-              ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
-            }
-          />
-        </FormItem>
-        <FormItem name="description" label="维度描述">
-          <TextArea placeholder="请输入维度描述" />
-        </FormItem>
-      </>
-    );
-  };
-
-  return (
-    <>
-      <Modal
-        width={800}
-        destroyOnClose
-        title="公共维度信息"
-        style={{ top: 48 }}
-        maskClosable={false}
-        open={bindModalVisible}
-        footer={renderFooter()}
-        onCancel={onCancel}
-      >
-        <Form {...formLayout} form={form}>
-          {renderContent()}
-        </Form>
-      </Modal>
-    </>
-  );
-};
-
-export default CommonDimensionInfoModal;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonDimension/CommonDimensionTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonDimension/CommonDimensionTable.tsx
deleted file mode 100644
index 536a5df54..000000000
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonDimension/CommonDimensionTable.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import type { ActionType, ProColumns } from '@ant-design/pro-table';
-import ProTable from '@ant-design/pro-table';
-import { message, Button, Space, Popconfirm, Input } from 'antd';
-import React, { useRef, useState } from 'react';
-import type { Dispatch } from 'umi';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
-import { getCommonDimensionList, deleteCommonDimension } from '../../service';
-import CommonDimensionInfoModal from './CommonDimensionInfoModal';
-import { ISemantic } from '../../data';
-import moment from 'moment';
-import styles from '../style.less';
-
-type Props = {
-  dispatch: Dispatch;
-  domainManger: StateType;
-};
-
-const CommonDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
-  const { selectDomainId: domainId, dimensionList } = domainManger;
-  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
-  const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const actionRef = useRef<ActionType>();
-
-  const queryDimensionList = async () => {
-    setLoading(true);
-    const { code, data, msg } = await getCommonDimensionList(domainId);
-    setLoading(false);
-    let resData: any = {};
-    if (code === 200) {
-      resData = {
-        data: data || [],
-        success: true,
-      };
-    } else {
-      message.error(msg);
-      resData = {
-        data: [],
-        total: 0,
-        success: false,
-      };
-    }
-    return resData;
-  };
-
-  const columns: ProColumns[] = [
-    {
-      dataIndex: 'id',
-      title: 'ID',
-      width: 80,
-      order: 100,
-      search: false,
-    },
-    {
-      dataIndex: 'key',
-      title: '维度搜索',
-      hideInTable: true,
-      renderFormItem: () => <Input placeholder="请输入ID/维度名称/英文名称" />,
-    },
-    {
-      dataIndex: 'name',
-      title: '维度名称',
-      search: false,
-    },
-    {
-      dataIndex: 'bizName',
-      title: '英文名称',
-      search: false,
-      // order: 9,
-    },
-    {
-      dataIndex: 'createdBy',
-      title: '创建人',
-      width: 100,
-      search: false,
-    },
-
-    {
-      dataIndex: 'description',
-      title: '描述',
-      search: false,
-    },
-
-    {
-      dataIndex: 'updatedAt',
-      title: '更新时间',
-      width: 180,
-      search: false,
-      render: (value: any) => {
-        return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
-      },
-    },
-
-    {
-      title: '操作',
-      dataIndex: 'x',
-      valueType: 'option',
-      width: 200,
-      render: (_, record) => {
-        return (
-          <Space className={styles.ctrlBtnContainer}>
-            <Button
-              key="dimensionEditBtn"
-              type="link"
-              onClick={() => {
-                setDimensionItem(record);
-                setCreateModalVisible(true);
-              }}
-            >
-              编辑
-            </Button>
-            <Popconfirm
-              title="删除会自动解除所关联的维度，是否确认？"
-              okText="是"
-              cancelText="否"
-              placement="left"
-              onConfirm={async () => {
-                const { code, msg } = await deleteCommonDimension(record.id);
-                if (code === 200) {
-                  setDimensionItem(undefined);
-                  actionRef.current?.reload();
-                } else {
-                  message.error(msg);
-                }
-              }}
-            >
-              <Button
-                type="link"
-                key="dimensionDeleteEditBtn"
-                onClick={() => {
-                  setDimensionItem(record);
-                }}
-              >
-                删除
-              </Button>
-            </Popconfirm>
-          </Space>
-        );
-      },
-    },
-  ];
-
-  return (
-    <>
-      <ProTable
-        style={{ marginTop: 15 }}
-        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
-        actionRef={actionRef}
-        rowKey="id"
-        columns={columns}
-        request={queryDimensionList}
-        loading={loading}
-        search={false}
-        tableAlertRender={() => {
-          return false;
-        }}
-        size="small"
-        options={{ reload: false, density: false, fullScreen: false }}
-        toolBarRender={() => [
-          <Button
-            key="create"
-            type="primary"
-            onClick={() => {
-              setDimensionItem(undefined);
-              setCreateModalVisible(true);
-            }}
-          >
-            创建公共维度
-          </Button>,
-        ]}
-      />
-
-      {createModalVisible && (
-        <CommonDimensionInfoModal
-          domainId={domainId}
-          bindModalVisible={createModalVisible}
-          dimensionItem={dimensionItem}
-          dimensionList={dimensionList}
-          onSubmit={() => {
-            setCreateModalVisible(false);
-            actionRef?.current?.reload();
-            return;
-          }}
-          onCancel={() => {
-            setCreateModalVisible(false);
-          }}
-        />
-      )}
-    </>
-  );
-};
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(CommonDimensionTable);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoModal.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoModal.tsx
index 12b3646bb..d01e9f062 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoModal.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Input, Modal, Select, Row, Col, Space, Tooltip, Switch } from 'antd';
-import { SENSITIVE_LEVEL_OPTIONS } from '../constant';
+import { SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
+import { StatusEnum } from '../enum';
 import { formLayout } from '@/components/FormHelper/utils';
 import SqlEditor from '@/components/SqlEditor';
 import InfoTagList from './InfoTagList';
@@ -10,7 +11,8 @@ import {
   createDimension,
   updateDimension,
   mockDimensionAlias,
-  getCommonDimensionList,
+  batchCreateTag,
+  batchUpdateTagStatus,
 } from '../service';
 import FormItemTitle from '@/components/FormHelper/FormItemTitle';
 
@@ -47,7 +49,6 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
   const [form] = Form.useForm();
   const { setFieldsValue, resetFields } = form;
   const [llmLoading, setLlmLoading] = useState<boolean>(false);
-  const [commonDimensionOptions, setCommonDimensionOptions] = useState([]);
 
   const handleSubmit = async (
     isSilenceSubmit = false,
@@ -64,26 +65,6 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
     );
   };
 
-  useEffect(() => {
-    queryCommonDimensionList();
-  }, [domainId]);
-
-  const queryCommonDimensionList = async () => {
-    const { code, data, msg } = await getCommonDimensionList(domainId);
-    // const { list, pageSize, pageNum, total } = data || {};
-    if (code === 200) {
-      const options = data.map((item) => {
-        return {
-          value: item.id,
-          label: item.name,
-        };
-      });
-      setCommonDimensionOptions(options);
-    } else {
-      message.error(msg);
-    }
-  };
-
   const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
     const queryParams = {
       modelId: isEdit ? dimensionItem.modelId : modelId,
@@ -94,8 +75,14 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
     if (queryParams.id) {
       saveDimensionQuery = updateDimension;
     }
-    const { code, msg } = await saveDimensionQuery(queryParams);
+    const { code, msg, data } = await saveDimensionQuery(queryParams);
     if (code === 200) {
+      if (!queryParams.id && queryParams.isTag) {
+        queryBatchExportTag(data.id);
+      }
+      if (dimensionItem?.id && !queryParams.isTag) {
+        queryBatchUpdateStatus(dimensionItem.bizName, StatusEnum.DELETED);
+      }
       if (!isSilenceSubmit) {
         message.success('编辑维度成功');
         handleUpdate(fieldsValue);
@@ -105,6 +92,31 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
     message.error(msg);
   };
 
+  const queryBatchUpdateStatus = async (bizName: string, status: StatusEnum) => {
+    const { code, msg } = await batchUpdateTagStatus({
+      bizNames: [bizName],
+      modelId: [modelId],
+      status,
+    });
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryBatchExportTag = async (id: number) => {
+    const { code, msg } = await batchCreateTag({
+      itemIds: [id],
+      type: TAG_DEFINE_TYPE.DIMENSION,
+      modelId,
+    });
+
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
   const setFormVal = () => {
     if (dimensionItem) {
       const { alias } = dimensionItem;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
index e11b74e1b..89dfb0a57 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
@@ -5,7 +5,7 @@ import { connect, history } from 'umi';
 import ClassDimensionTable from './ClassDimensionTable';
 import ClassMetricTable from './ClassMetricTable';
 import PermissionSection from './Permission/PermissionSection';
-import ChatSettingSection from '../ChatSetting/ChatSettingSection';
+import ClassTagTable from '../Insights/components/ClassTagTable';
 import OverView from './OverView';
 import styles from './style.less';
 import type { StateType } from '../model';
@@ -14,7 +14,6 @@ import { ISemantic } from '../data';
 import SemanticGraphCanvas from '../SemanticGraphCanvas';
 import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
 import View from '../View';
-// import CommonDimensionTable from './CommonDimension/CommonDimensionTable';
 // import DatabaseTable from '../components/Database/DatabaseTable';
 
 import type { Dispatch } from 'umi';
@@ -86,11 +85,6 @@ const DomainManagerTab: React.FC<Props> = ({
     //   key: 'database',
     //   children: <DatabaseTable />,
     // },
-    // {
-    //   label: '公共维度',
-    //   key: 'commonDimension',
-    //   children: <CommonDimensionTable />,
-    // },
   ].filter((item) => {
     const target = domainList.find((domain) => domain.id === selectDomainId);
     if (target?.hasEditPermission) {
@@ -110,6 +104,11 @@ const DomainManagerTab: React.FC<Props> = ({
       key: 'dimenstion',
       children: <ClassDimensionTable />,
     },
+    {
+      label: '标签管理',
+      key: 'tag',
+      children: <ClassTagTable />,
+    },
 
     {
       label: '权限管理',
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricStar.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/IndicatorStar.tsx
similarity index 64%
rename from webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricStar.tsx
rename to webapp/packages/supersonic-fe/src/pages/SemanticModel/components/IndicatorStar.tsx
index 36d6eed9a..15023fc5d 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricStar.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/IndicatorStar.tsx
@@ -1,22 +1,25 @@
 import { Tooltip, message } from 'antd';
 import React, { useState, useEffect } from 'react';
-import { metricStarState } from '../../service';
+import { indicatorStarState } from '../service';
 import MStar from '@/components/MStar';
 
+export type StarType = 'tag' | 'metric' | 'dimension';
+
 type Props = {
-  metricId: number;
+  indicatorId: number;
   initState?: boolean;
+  type?: StarType;
   onChange?: (state: boolean) => void;
 };
 
-const MetricStar: React.FC<Props> = ({ metricId, initState = false }) => {
+const IndicatorStar: React.FC<Props> = ({ indicatorId, type = 'metric', initState = false }) => {
   const [star, setStar] = useState<boolean>(initState);
   useEffect(() => {
     setStar(initState);
   }, [initState]);
 
   const starStateChange = async (id: number, state: boolean) => {
-    const { code, msg } = await metricStarState({ id, state });
+    const { code, msg } = await indicatorStarState({ id, type, state });
     if (code === 200) {
       setStar(state);
     } else {
@@ -30,7 +33,7 @@ const MetricStar: React.FC<Props> = ({ metricId, initState = false }) => {
         <MStar
           star={star}
           onToggleCollect={(star: boolean) => {
-            starStateChange(metricId, star);
+            starStateChange(indicatorId, star);
           }}
         />
       </div>
@@ -38,4 +41,4 @@ const MetricStar: React.FC<Props> = ({ metricId, initState = false }) => {
   );
 };
 
-export default MetricStar;
+export default IndicatorStar;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricFieldFormTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricFieldFormTable.tsx
index 06bf488bf..602a775fc 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricFieldFormTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricFieldFormTable.tsx
@@ -25,7 +25,7 @@ const MetricFieldFormTable: React.FC<Props> = ({
   const [defineTypeParams, setDefineTypeParams] = useState(
     typeParams || {
       expr: '',
-      metrics: [],
+      fields: [],
     },
   );
 
@@ -44,16 +44,19 @@ const MetricFieldFormTable: React.FC<Props> = ({
   const [exprString, setExprString] = useState(typeParams?.expr || '');
 
   const [selectedKeys, setSelectedKeys] = useState<string[]>(() => {
-    return defineTypeParams.fields.map((item: any) => {
+    return defineTypeParams.fields.map((item: ISemantic.IFieldTypeParamsItem) => {
       return item.fieldName;
     });
   });
 
   const [selectedKeysMap, setSelectedKeysMap] = useState<Record<string, boolean>>(() => {
-    return defineTypeParams.fields.reduce((keyMap, item: any) => {
-      keyMap[item.fieldName] = true;
-      return keyMap;
-    }, {});
+    return defineTypeParams.fields.reduce(
+      (keyMap: Record<string, boolean>, item: ISemantic.IFieldTypeParamsItem) => {
+        keyMap[item.fieldName] = true;
+        return keyMap;
+      },
+      {},
+    );
   });
 
   const columns = [
@@ -141,7 +144,7 @@ const MetricFieldFormTable: React.FC<Props> = ({
           rowSelection={rowSelection}
         />
         <ProCard
-          title={<FormLabelRequire title="字段表达式" />}
+          title={<FormLabelRequire title="表达式" />}
           // tooltip="度量表达式由上面选择的度量组成，如选择了度量A和B，则可将表达式写成A+B"
         >
           <div>
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
index 7f273f1f2..18be48aff 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
@@ -17,13 +17,20 @@ import {
   Tooltip,
   Tag,
 } from 'antd';
+import { StatusEnum } from '../enum';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import MetricMeasuresFormTable from './MetricMeasuresFormTable';
-import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE } from '../constant';
+import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE, TAG_DEFINE_TYPE } from '../constant';
 import { formLayout } from '@/components/FormHelper/utils';
 import FormItemTitle from '@/components/FormHelper/FormItemTitle';
 import styles from './style.less';
-import { getMetricsToCreateNewMetric, getModelDetail, getDrillDownDimension } from '../service';
+import {
+  getMetricsToCreateNewMetric,
+  getModelDetail,
+  getDrillDownDimension,
+  batchCreateTag,
+  batchUpdateTagStatus,
+} from '../service';
 import MetricMetricFormTable from './MetricMetricFormTable';
 import MetricFieldFormTable from './MetricFieldFormTable';
 import DimensionAndMetricRelationModal from './DimensionAndMetricRelationModal';
@@ -239,6 +246,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
       description,
       sensitiveLevel,
       typeParams,
+      isTag,
       dataFormat,
       dataFormatType,
       alias,
@@ -257,6 +265,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
       sensitiveLevel,
       description,
       tags,
+      isTag,
       // isPercent,
       dataFormatType: dataFormatType || '',
       alias: alias && alias.trim() ? alias.split(',') : [],
@@ -370,8 +379,14 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
     if (queryParams.id) {
       saveMetricQuery = updateMetric;
     }
-    const { code, msg } = await saveMetricQuery(queryParams);
+    const { code, msg, data } = await saveMetricQuery(queryParams);
     if (code === 200) {
+      if (!queryParams.id && queryParams.isTag) {
+        queryBatchExportTag(data.id);
+      }
+      if (metricItem?.id && !queryParams.isTag) {
+        queryBatchUpdateStatus(metricItem.bizName, StatusEnum.DELETED);
+      }
       message.success('编辑指标成功');
       onSubmit?.(queryParams);
       return;
@@ -379,6 +394,31 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
     message.error(msg);
   };
 
+  const queryBatchUpdateStatus = async (bizName: string, status: StatusEnum) => {
+    const { code, msg } = await batchUpdateTagStatus({
+      bizNames: [bizName],
+      modelId: [modelId],
+      status,
+    });
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryBatchExportTag = async (id: number) => {
+    const { code, msg } = await batchCreateTag({
+      itemIds: [id],
+      type: TAG_DEFINE_TYPE.METRIC,
+      modelId,
+    });
+
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
   const generatorMetricAlias = async () => {
     setLlmLoading(true);
     const { code, data } = await mockMetricAlias({ ...metricItem });
@@ -440,7 +480,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
       } else {
         setCreateNewMetricList(data);
       }
-      // setCreateNewMetricList(data);
     } else {
       message.error('获取指标标签失败');
     }
@@ -672,6 +711,28 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
         >
           <TextArea placeholder="请输入业务口径" />
         </FormItem>
+
+        <Form.Item
+          label={
+            <FormItemTitle
+              title={`设为标签`}
+              subTitle={`如果勾选，代表取值都是一种'标签'，可用作对实体的圈选`}
+            />
+          }
+          name="isTag"
+          valuePropName="checked"
+          getValueFromEvent={(value) => {
+            return value === true ? 1 : 0;
+          }}
+          getValueProps={(value) => {
+            return {
+              checked: value === 1,
+            };
+          }}
+        >
+          <Switch />
+        </Form.Item>
+
         <FormItem
           label={
             <FormItemTitle
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMeasuresFormTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMeasuresFormTable.tsx
index 6f8719e54..778501d31 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMeasuresFormTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMeasuresFormTable.tsx
@@ -196,7 +196,7 @@ const MetricMeasuresFormTable: React.FC<Props> = ({
           rowSelection={rowSelection}
         />
         <ProCard
-          title={<FormLabelRequire title="度量表达式" />}
+          title={<FormLabelRequire title="表达式" />}
           // tooltip="由于度量已自带聚合函数，因此通过度量创建指标时，表达式中无需再写聚合函数，如
           // 通过度量a和度量b来创建指标，由于建模的时候度量a和度量b被指定了聚合函数SUM，因此创建指标时表达式只需要写成 a+b, 而不需要带聚合函数"
         >
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMetricFormTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMetricFormTable.tsx
index c9659c6c9..66e79d561 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMetricFormTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMetricFormTable.tsx
@@ -10,14 +10,12 @@ import { ISemantic } from '../data';
 type Props = {
   typeParams: ISemantic.IMetricTypeParams;
   metricList: ISemantic.IMetricItem[];
-  // selectedMeasuresList: any;
   onFieldChange: (metrics: ISemantic.IMetricTypeParamsItem[]) => void;
   onSqlChange: (sql: string) => void;
 };
 
 const MetricMetricFormTable: React.FC<Props> = ({
   typeParams,
-  // selectedMeasuresList = [],
   metricList,
   onFieldChange,
   onSqlChange,
@@ -150,7 +148,7 @@ const MetricMetricFormTable: React.FC<Props> = ({
           scroll={{ y: 500 }}
           rowSelection={rowSelection}
         />
-        <ProCard title={<FormLabelRequire title="指标表达式" />} tooltip="">
+        <ProCard title={<FormLabelRequire title="表达式" />} tooltip="">
           <p
             className={styles.desc}
             style={{ border: 'unset', padding: 0, marginBottom: 20, marginLeft: 2 }}
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx
deleted file mode 100644
index 6b17ffb2d..000000000
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-import { Space, Tag, Typography } from 'antd';
-import { StatusEnum } from '../enum';
-import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
-import { TagsOutlined, ReadOutlined } from '@ant-design/icons';
-import { history } from 'umi';
-import { ISemantic } from '../data';
-import { isString } from 'lodash';
-import { isArrayOfValues } from '@/utils/utils';
-import styles from './style.less';
-import MetricStar from '../Metric/components/MetricStar';
-
-const { Text, Paragraph } = Typography;
-
-export const ColumnsConfig = {
-  description: {
-    render: (_, record: ISemantic.IMetricItem) => {
-      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>
-              <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 }}
-                onClick={(event: any) => {
-                  history.push(`/metric/detail/${id}`);
-                  event.preventDefault();
-                  event.stopPropagation();
-                }}
-                href={`/webapp/metric/detail/${id}`}
-              >
-                {name}
-              </a>
-              <MetricStar metricId={id} initState={isCollect} />
-              {/* <Tag
-                color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
-                style={{ lineHeight: '16px', position: 'relative', top: '-1px' }}
-              >
-                {SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
-              </Tag> */}
-            </Space>
-          </div>
-          <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
-            {bizName}
-          </div>
-
-          {(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={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> */}
-              </Space>
-            </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: { color: string; label: string; style?: any } = {
-        color: 'default',
-        label: '未知',
-        style: {},
-      };
-      switch (status) {
-        case StatusEnum.ONLINE:
-          tagProps = {
-            // color: 'success',
-            color: 'geekblue',
-            label: '已启用',
-          };
-          break;
-        case StatusEnum.OFFLINE:
-          tagProps = {
-            color: 'default',
-            label: '未启用',
-            style: {
-              color: 'rgb(95, 116, 141)',
-              fontWeight: 400,
-            },
-          };
-          break;
-        case StatusEnum.INITIALIZED:
-          tagProps = {
-            color: 'processing',
-            label: '初始化',
-          };
-          break;
-        case StatusEnum.DELETED:
-          tagProps = {
-            color: 'default',
-            label: '已删除',
-          };
-          break;
-        case StatusEnum.UNAVAILABLE:
-          tagProps = {
-            color: 'default',
-            label: '不可用',
-          };
-          break;
-        default:
-          break;
-      }
-      return (
-        <Tag
-          color={tagProps.color}
-          style={{
-            borderRadius: '40px',
-            padding: '2px 16px',
-            fontSize: '13px',
-            fontWeight: 500,
-            ...tagProps.style,
-          }}
-        >
-          {tagProps.label}
-        </Tag>
-      );
-    },
-  },
-};
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
index ad7becc15..ca076b1e5 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
@@ -8,7 +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 { ColumnsConfig } from './TableColumnRender';
 
 import moment from 'moment';
 import styles from './style.less';
@@ -41,6 +41,8 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
     }
   };
 
+  const columnsConfig = ColumnsConfig();
+
   const columns: ProColumns[] = [
     {
       dataIndex: 'id',
@@ -86,7 +88,7 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
       dataIndex: 'status',
       title: '状态',
       search: false,
-      render: ColumnsConfig.state.render,
+      render: columnsConfig.state.render,
     },
     {
       dataIndex: 'createdBy',
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx
new file mode 100644
index 000000000..57eb88497
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx
@@ -0,0 +1,336 @@
+import { Space, Tag, Typography } from 'antd';
+import { StatusEnum } from '../enum';
+import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
+import { TagsOutlined, ReadOutlined } from '@ant-design/icons';
+import { history } from 'umi';
+import { ISemantic } from '../data';
+import { isString } from 'lodash';
+import { isArrayOfValues } from '@/utils/utils';
+import styles from './style.less';
+import IndicatorStar, { StarType } from '../components/IndicatorStar';
+
+const { Text, Paragraph } = Typography;
+
+export const ColumnsConfig = (params?: {
+  indicatorInfo?: {
+    url?: string;
+    starType?: StarType;
+  };
+}) => {
+  return {
+    description: {
+      render: (_, record: ISemantic.IMetricItem) => {
+        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>
+                <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>
+            )}
+          </>
+        );
+      },
+    },
+    indicatorInfo: {
+      render: (_, record: ISemantic.IMetricItem) => {
+        const { name, alias, bizName, tags, id, isCollect } = record;
+        let url = `/metric/detail/`;
+        let starType: StarType = 'metric';
+        if (params) {
+          if (params?.indicatorInfo?.url) {
+            url = params.indicatorInfo.url;
+          }
+          if (params?.indicatorInfo?.starType) {
+            starType = params.indicatorInfo.starType;
+          }
+        }
+        return (
+          <>
+            <div>
+              <Space>
+                <a
+                  className={styles.textLink}
+                  style={{ fontWeight: 500 }}
+                  onClick={(event: any) => {
+                    history.push(`${url}${id}`);
+                    event.preventDefault();
+                    event.stopPropagation();
+                  }}
+                  href={`/webapp${url}${id}`}
+                >
+                  {name}
+                </a>
+                <IndicatorStar indicatorId={id} type={starType} initState={isCollect} />
+                {/* <Tag
+                color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
+                style={{ lineHeight: '16px', position: 'relative', top: '-1px' }}
+              >
+                {SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
+              </Tag> */}
+              </Space>
+            </div>
+            <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
+              {bizName}
+            </div>
+
+            {(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={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> */}
+                </Space>
+              </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: { color: string; label: string; style?: any } = {
+          color: 'default',
+          label: '未知',
+          style: {},
+        };
+        switch (status) {
+          case StatusEnum.ONLINE:
+            tagProps = {
+              // color: 'success',
+              color: 'geekblue',
+              label: '已启用',
+            };
+            break;
+          case StatusEnum.OFFLINE:
+            tagProps = {
+              color: 'default',
+              label: '未启用',
+              style: {
+                color: 'rgb(95, 116, 141)',
+                fontWeight: 400,
+              },
+            };
+            break;
+          case StatusEnum.INITIALIZED:
+            tagProps = {
+              color: 'processing',
+              label: '初始化',
+            };
+            break;
+          case StatusEnum.DELETED:
+            tagProps = {
+              color: 'default',
+              label: '已删除',
+            };
+            break;
+          case StatusEnum.UNAVAILABLE:
+            tagProps = {
+              color: 'default',
+              label: '不可用',
+            };
+            break;
+          default:
+            break;
+        }
+        return (
+          <Tag
+            color={tagProps.color}
+            style={{
+              borderRadius: '40px',
+              padding: '2px 16px',
+              fontSize: '13px',
+              fontWeight: 500,
+              ...tagProps.style,
+            }}
+          >
+            {tagProps.label}
+          </Tag>
+        );
+      },
+    },
+  };
+};
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TagDimensionFormTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TagDimensionFormTable.tsx
new file mode 100644
index 000000000..9fdbcfed3
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TagDimensionFormTable.tsx
@@ -0,0 +1,174 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Tag, Space } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import ProCard from '@ant-design/pro-card';
+import SqlEditor from '@/components/SqlEditor';
+import FormLabelRequire from './FormLabelRequire';
+import styles from './style.less';
+import { ISemantic } from '../data';
+
+type Props = {
+  typeParams: ISemantic.ITagDefineParams;
+  dimensionList: ISemantic.IDimensionItem[];
+  onFieldChange: (metrics: ISemantic.IMetricTypeParamsItem[]) => void;
+  onSqlChange: (sql: string) => void;
+};
+
+const TagDimensionFormTable: React.FC<Props> = ({
+  typeParams,
+  dimensionList,
+  onFieldChange,
+  onSqlChange,
+}) => {
+  const actionRef = useRef<ActionType>();
+
+  const [tableData, setTableData] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (!Array.isArray(dimensionList)) {
+      setTableData([]);
+      return;
+    }
+    setTableData(dimensionList);
+  }, [dimensionList]);
+
+  const [defineTypeParams, setDefineTypeParams] = useState<ISemantic.ITagDefineParams>({
+    expr: typeParams?.expr || '',
+    dependencies: typeParams?.dependencies || [],
+  });
+
+  useEffect(() => {
+    setDefineTypeParams({ ...typeParams });
+  }, [typeParams]);
+
+  const [exprString, setExprString] = useState(typeParams?.expr || '');
+
+  const [selectedKeys, setSelectedKeys] = useState<any[]>(() => {
+    return defineTypeParams.dependencies;
+  });
+
+  const [selectedKeysMap, setSelectedKeysMap] = useState<Record<string, boolean>>(() => {
+    return defineTypeParams.dependencies.reduce(
+      (keyMap: Record<string, boolean>, dimensionId: string | number) => {
+        keyMap[`${dimensionId}`] = true;
+        return keyMap;
+      },
+      {},
+    );
+  });
+
+  const columns = [
+    {
+      dataIndex: 'name',
+      title: '维度名称',
+    },
+    {
+      dataIndex: 'bizName',
+      title: '英文名称',
+    },
+  ];
+
+  const handleUpdateKeys = (updateKeys: Record<string, boolean>) => {
+    setSelectedKeysMap(updateKeys);
+    const selectedKeys: number[] = [];
+    const dimenisons = dimensionList.reduce((list: any[], item) => {
+      const { bizName, id } = item;
+      if (updateKeys[id] === true) {
+        selectedKeys.push(id);
+        list.push({
+          bizName,
+          id,
+        });
+      }
+      return list;
+    }, []);
+    setSelectedKeys(selectedKeys);
+    onFieldChange(dimenisons);
+  };
+
+  const rowSelection = {
+    selectedRowKeys: selectedKeys,
+    onSelect: (record: ISemantic.IDimensionItem, selected: boolean) => {
+      const updateKeys = { ...selectedKeysMap, [record.id]: selected };
+      handleUpdateKeys(updateKeys);
+    },
+    onSelectAll: (
+      selected: boolean,
+      selectedRows: ISemantic.IDimensionItem[],
+      changeRows: ISemantic.IDimensionItem[],
+    ) => {
+      const updateKeys = changeRows.reduce(
+        (keyMap: Record<string, boolean>, item: ISemantic.IDimensionItem) => {
+          keyMap[item.id] = selected;
+          return keyMap;
+        },
+        {},
+      );
+      handleUpdateKeys({ ...selectedKeysMap, ...updateKeys });
+    },
+  };
+
+  return (
+    <>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <ProTable
+          actionRef={actionRef}
+          headerTitle={<FormLabelRequire title="维度列表" />}
+          rowKey="id"
+          columns={columns}
+          dataSource={tableData}
+          // pagination={false}
+          search={false}
+          toolbar={{
+            search: {
+              placeholder: '请输入维度名称',
+              onSearch: (value: string) => {
+                setTableData(
+                  dimensionList.reduce(
+                    (data: ISemantic.IDimensionItem[], item: ISemantic.IDimensionItem) => {
+                      if (item.name.includes(value)) {
+                        data.push(item);
+                      }
+                      return data;
+                    },
+                    [],
+                  ),
+                );
+              },
+            },
+          }}
+          pagination={{ defaultPageSize: 10 }}
+          size="small"
+          options={false}
+          tableAlertRender={false}
+          scroll={{ y: 500 }}
+          rowSelection={rowSelection}
+        />
+        <ProCard title={<FormLabelRequire title="表达式" />} tooltip="">
+          <p
+            className={styles.desc}
+            style={{ border: 'unset', padding: 0, marginBottom: 20, marginLeft: 2 }}
+          >
+            已创建的维度已经过聚合，因此通过这些维度来创建新的维度无需指定
+            <Tag color="#2499ef14" className={styles.markerTag}>
+              聚合函数
+            </Tag>
+            ，如根据维度c和维度d来创建新的维度，因为维度本身带有聚合函数，因此表达式可以写成:
+            c+d-100
+          </p>
+          <SqlEditor
+            value={exprString}
+            onChange={(sql: string) => {
+              const expr = sql;
+              setExprString(expr);
+              onSqlChange?.(expr);
+            }}
+            height={'150px'}
+          />
+        </ProCard>
+      </Space>
+    </>
+  );
+};
+
+export default TagDimensionFormTable;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
index 09fdca184..f9a88c0a3 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
@@ -302,37 +302,6 @@
   }
 }
 
-.overviewExtraContainer {
-  display: flex;
-  font-size: 14px;
-  .extraWrapper {
-    display: flex;
-    width: 100%;
-    .extraStatistic {
-      display: inline-flex;
-      color: rgba(42, 46, 54, 0.65);
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      font-size: 14px;
-      line-height: 1.5714285714285714;
-      list-style: none;
-      .extraTitle {
-        font-size: 12px;
-        margin-inline-end: 6px;
-        margin-block-end: 0;
-        margin-bottom: 4px;
-        color: rgba(42, 46, 54, 0.45);
-      }
-      .extraValue {
-        font-size: 12px;
-        color: rgba(42, 46, 54, 0.65);
-        display: inline-block;
-        direction: ltr;
-      }
-    }
-  }
-}
 
 .infoTagList{
   .siteTagPlus {
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/constant.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/constant.ts
index fbc457d97..0b7f549e8 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/constant.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/constant.ts
@@ -79,3 +79,15 @@ export enum METRIC_DEFINE_TYPE {
   MEASURE = 'MEASURE',
   METRIC = 'METRIC',
 }
+
+export enum TAG_DEFINE_TYPE {
+  FIELD = 'FIELD',
+  DIMENSION = 'DIMENSION',
+  METRIC = 'METRIC',
+}
+
+export const TagDefineTypeMap = {
+  [TAG_DEFINE_TYPE.FIELD]: '字段',
+  [TAG_DEFINE_TYPE.DIMENSION]: '维度',
+  [TAG_DEFINE_TYPE.METRIC]: '指标',
+};
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
index d9717d4f7..c88e06421 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
@@ -1,5 +1,6 @@
 import { TreeGraphData } from '@antv/g6-core';
 import { StatusEnum } from './enum';
+import { SENSITIVE_LEVEL, TAG_DEFINE_TYPE } from './constant';
 
 export type ISODateString =
   `${number}-${number}-${number}T${number}:${number}:${number}.${number}+${number}:${number}`;
@@ -230,6 +231,11 @@ export declare namespace ISemantic {
     bizName: string;
   }
 
+  interface IDimensionTypeParamsItem {
+    id: number;
+    bizName: string;
+  }
+
   interface IMeasureTypeParams {
     measures: IMeasure[];
     expr: string;
@@ -265,7 +271,7 @@ export declare namespace ISemantic {
     description: string;
     status: StatusEnum;
     typeEnum: string;
-    sensitiveLevel: number;
+    sensitiveLevel: SENSITIVE_LEVEL;
     domainId: number;
     domainName: string;
     modelName: string;
@@ -377,6 +383,33 @@ export declare namespace ISemantic {
     elapsedMs: number | null;
     nature: string;
   }
+
+  interface ITagDefineParams {
+    expr: string;
+    dependencies: (number | string)[];
+  }
+  interface ITagItem {
+    createdBy: string;
+    updatedBy: string;
+    createdAt: string;
+    updatedAt: string;
+    id: number;
+    name: string;
+    modelName: string;
+    bizName: string;
+    description: string;
+    status: number;
+    typeEnum: null;
+    sensitiveLevel: SENSITIVE_LEVEL;
+    modelId: number;
+    type: string;
+    isCollect: boolean;
+    hasAdminRes: boolean;
+    ext: any;
+    tagDefineType: TAG_DEFINE_TYPE;
+    tagDefineParams: ITagDefineParams;
+    expr: string;
+  }
 }
 
 export declare namespace IChatConfig {
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
index ad8808d0b..9995bf67b 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
@@ -59,10 +59,6 @@ export function getDimensionList(data: any): Promise<any> {
   return request.post(`${process.env.API_BASE_URL}dimension/queryDimension`, queryParams);
 }
 
-export function getCommonDimensionList(domainId: number): Promise<any> {
-  return request.get(`${process.env.API_BASE_URL}commonDimension/getList?domainId=${domainId}`);
-}
-
 export function saveCommonDimension(data: any): Promise<any> {
   if (data.id) {
     return request(`${process.env.API_BASE_URL}commonDimension`, {
@@ -120,9 +116,6 @@ export function queryMetric(data: any): Promise<any> {
       ...(modelId ? { modelIds: [modelId] } : {}),
     },
   };
-  if (getRunningEnv() === 'chat') {
-    return request.post(`${process.env.CHAT_API_BASE_URL}conf/metric/page`, queryParams);
-  }
   return request.post(`${process.env.API_BASE_URL}metric/queryMetric`, queryParams);
 }
 
@@ -563,16 +556,24 @@ export async function queryStruct({
   }
 }
 
-export function metricStarState(data: { id: number; state: boolean }): Promise<any> {
-  const { id, state } = data;
+export function indicatorStarState(data: {
+  id: number;
+  type: string;
+  state: boolean;
+}): Promise<any> {
+  const { id, state, type } = data;
   if (state) {
     return request(`${process.env.API_BASE_URL}collect/createCollectionIndicators`, {
       method: 'POST',
-      data: { id },
+      data: { collectId: id, type },
     });
   } else {
-    return request(`${process.env.API_BASE_URL}collect/deleteCollectionIndicators/${id}`, {
-      method: 'DELETE',
+    // return request(`${process.env.API_BASE_URL}collect/deleteCollectionIndicators/${id}`, {
+    //   method: 'DELETE',
+    // });
+    return request(`${process.env.API_BASE_URL}collect/deleteCollectionIndicators`, {
+      method: 'POST',
+      data: { collectId: id, type },
     });
   }
 }
@@ -610,3 +611,56 @@ export function deleteView(viewId: number): Promise<any> {
     method: 'DELETE',
   });
 }
+
+export function getTagList(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}tag/queryTag`, {
+    method: 'POST',
+    data,
+  });
+}
+
+export function deleteTag(tagId: number): Promise<any> {
+  return request(`${process.env.API_BASE_URL}tag/delete/${tagId}`, {
+    method: 'DELETE',
+  });
+}
+
+export function batchUpdateTagStatus(data: any): Promise<any> {
+  return request.post(`${process.env.API_BASE_URL}tag/batchUpdateStatus`, {
+    data,
+  });
+}
+
+export function createTag(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}tag/create`, {
+    method: 'POST',
+    data,
+  });
+}
+
+export function updateTag(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}tag/update`, {
+    method: 'POST',
+    data,
+  });
+}
+
+export function getTagData(tagId: number): Promise<any> {
+  return request(`${process.env.API_BASE_URL}tag/getTag/${tagId}`, {
+    method: 'GET',
+  });
+}
+
+export function getTagValueDistribution(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}tag/value/distribution`, {
+    method: 'POST',
+    data,
+  });
+}
+
+export function batchCreateTag(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}tag/create/batch`, {
+    method: 'POST',
+    data,
+  });
+}