[improvement][semantic-fe] Optimized the frontend display and code logic of visual modeling, and updated the relevant interface of the permission management module.

2025-12-10 19:51:00 +00:00 · 2023-08-07 10:10:54 +08:00
parent aa0a100a85
commit ef7c37a8da
39 changed files with 878 additions and 454 deletions
--- a/webapp/packages/supersonic-fe/src/components/SelectPartner/index.tsx
+++ b/webapp/packages/supersonic-fe/src/components/SelectPartner/index.tsx
@@ -1,6 +1,6 @@
-import { Avatar, TreeSelect, Tag } from 'antd';
+import { TreeSelect, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
-import { getDepartmentTree, getUserByDeptid } from './service';
+import { getUserByDeptid, getOrganizationTree } from './service';
 import TMEAvatar from '@/components/TMEAvatar';

 type Props = {
@@ -11,6 +11,9 @@ type Props = {
 };

 const isDisableCheckbox = (name: string, type: string) => {
+  if (!name) {
+    return false;
+  }
  const isPersonNode = name.includes('(');
  if (type === 'selectedPerson') {
    return !isPersonNode;
@@ -25,18 +28,18 @@ const isDisableCheckbox = (name: string, type: string) => {
 };

 // 转化树结构
-export function changeTreeData(treeData: any = [], type: string) {
+export function changeTreeData(treeData: any = [], type: string, keyName = 'id') {
  return treeData.map((item: any) => {
    return {
      title: item.name,
-      value: item.key,
-      key: item.key,
-      isLeaf: !!item.emplid,
-      children: item?.subDepartments ? changeTreeData(item.subDepartments, type) : [],
-      disableCheckbox: isDisableCheckbox(item.name, type),
-      checkable: !isDisableCheckbox(item.name, type),
-      icon: item.name.includes('(') && (
-        <Avatar size={18} shape="square" src={`${item.avatarImg}`} alt="avatar" />
+      value: item[keyName],
+      key: item[keyName],
+      isLeaf: !item.subOrganizations,
+      children: item.subOrganizations ? changeTreeData(item.subOrganizations, type, keyName) : [],
+      disableCheckbox: isDisableCheckbox(item.displayName, type),
+      checkable: !isDisableCheckbox(item.displayName, type),
+      icon: (item.displayName || '').includes('(') && (
+        <TMEAvatar size="small" staffName={item.name} />
      ),
    };
  });
@@ -51,9 +54,12 @@ const SelectPartner: React.FC<Props> = ({
  const [treeData, setTreeData] = useState([]);

  const getDetpartment = async () => {
-    const res = await getDepartmentTree();
-    const data = changeTreeData(res.data, type);
-    setTreeData(data);
+    const { code, data } = await getOrganizationTree();
+    if (code === 200) {
+      const changeData = changeTreeData(data, type);
+      setTreeData(changeData);
+      return;
+    }
  };

  useEffect(() => {
@@ -78,13 +84,21 @@ const SelectPartner: React.FC<Props> = ({
  const onLoadData = (target: any) => {
    const { key } = target;
    const loadData = async () => {
-      const childData = await getUserByDeptid(key);
-      if (childData.data.length === 0) {
-        return;
+      const { code, data } = await getUserByDeptid(key);
+      if (code === 200) {
+        const list = data.reduce((userList: any[], item: any) => {
+          const { name, displayName } = item;
+          if (name && displayName) {
+            userList.push({ key: `${key}-${item.id}`, ...item });
+          }
+          return userList;
+        }, []);
+        setTimeout(() => {
+          setTreeData((origin) => {
+            return updateTreeData(origin, key, changeTreeData(list, type, 'key'));
+          });
+        }, 300);
      }
-      setTimeout(() => {
-        setTreeData((origin) => updateTreeData(origin, key, changeTreeData(childData.data, type)));
-      }, 300);
    };
    return new Promise<void>((resolve) => {
      loadData().then(() => {
--- a/webapp/packages/supersonic-fe/src/components/SelectPartner/service.ts
+++ b/webapp/packages/supersonic-fe/src/components/SelectPartner/service.ts
@@ -1,13 +1,12 @@
 import { request } from 'umi';

-export async function getDepartmentTree() {
-  return request<any>('/api/tpp/getDetpartmentTree', {
-    method: 'GET',
-  });
-}
-
 export async function getUserByDeptid(id: any) {
-  return request<any>(`/api/tpp/getUserByDeptid/${id}`, {
+  return request<any>(`${process.env.AUTH_API_BASE_URL}user/getUserByOrg/${id}`, {
+    method: 'GET',
+  });
+}
+export async function getOrganizationTree() {
+  return request<any>(`${process.env.AUTH_API_BASE_URL}user/getOrganizationTree`, {
    method: 'GET',
  });
 }
--- a/webapp/packages/supersonic-fe/src/components/SelectTMEPerson/index.tsx
+++ b/webapp/packages/supersonic-fe/src/components/SelectTMEPerson/index.tsx
@@ -30,15 +30,7 @@ const SelectTMEPerson: FC<Props> = ({ placeholder, value, isMultiple = true, onC
        }
      },
      updater: (list) => {
-        const users = list.map((item: UserItem) => {
-          const { enName, chName, name } = item;
-          return {
-            ...item,
-            enName: enName || name,
-            chName: chName || name,
-          };
-        });
-        setUserList(users);
+        setUserList(list);
      },
      cleanup: () => {
        setUserList([]);
@@ -58,8 +50,8 @@ const SelectTMEPerson: FC<Props> = ({ placeholder, value, isMultiple = true, onC
    >
      {userList.map((item) => {
        return (
-          <Select.Option key={item.enName} value={item.enName}>
-            <TMEAvatar size="small" staffName={item.enName} />
+          <Select.Option key={item.name} value={item.name}>
+            <TMEAvatar size="small" staffName={item.name} />
            <span className={styles.userText}>{item.displayName}</span>
          </Select.Option>
        );
--- a/webapp/packages/supersonic-fe/src/components/SelectTMEPerson/service.ts
+++ b/webapp/packages/supersonic-fe/src/components/SelectTMEPerson/service.ts
@@ -1,19 +1,15 @@
 import request from 'umi-request';

-export type UserItem = {
-  enName?: string;
+export interface UserItem {
+  id: number;
+  name: string;
  displayName: string;
-  chName?: string;
-  name?: string;
  email: string;
-};
+}
+
 export type GetAllUserRes = Result<UserItem[]>;

 // 获取所有用户
 export async function getAllUser(): Promise<GetAllUserRes> {
-  const { APP_TARGET } = process.env;
-  if (APP_TARGET === 'inner') {
-    return request.get('/api/oa/user/all');
-  }
  return request.get(`${process.env.AUTH_API_BASE_URL}user/getUserList`);
 }
--- a/webapp/packages/supersonic-fe/src/components/SqlEditor/index.tsx
+++ b/webapp/packages/supersonic-fe/src/components/SqlEditor/index.tsx
@@ -49,11 +49,13 @@ export interface ISqlEditorProps {
  isRightTheme?: boolean;
  editorConfig?: IAceEditorProps;
  sizeChanged?: number;
+  isFullScreen?: boolean;
  fullScreenBtnVisible?: boolean;
  onSqlChange?: (sql: string) => void;
  onChange?: (sql: string) => void;
  onSelect?: (sql: string) => void;
  onCmdEnter?: () => void;
+  triggerBackToNormal?: () => void;
 }

 /**
@@ -71,10 +73,12 @@ function SqlEditor(props: ISqlEditorProps) {
    sizeChanged,
    editorConfig,
    fullScreenBtnVisible = true,
+    isFullScreen = false,
    onSqlChange,
    onChange,
    onSelect,
    onCmdEnter,
+    triggerBackToNormal,
  } = props;
  const resize = useCallback(
    debounce(() => {
@@ -118,11 +122,15 @@ function SqlEditor(props: ISqlEditorProps) {
    setHintsPopover(hints);
  }, [hints]);

-  const [isSqlIdeFullScreen, setIsSqlIdeFullScreen] = useState<boolean>(false);
+  const [isSqlIdeFullScreen, setIsSqlIdeFullScreen] = useState<boolean>(isFullScreen);
+
+  useEffect(() => {
+    setIsSqlIdeFullScreen(isFullScreen);
+  }, [isFullScreen]);

  const handleNormalScreenSqlIde = () => {
    setIsSqlIdeFullScreen(false);
-    // setSqlEditorHeight(getDefaultSqlEditorHeight(screenSize));
+    triggerBackToNormal?.();
  };
  return (
    <div className={styles.sqlEditor} style={{ height }}>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/ChatSetting.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/ChatSetting.tsx
@@ -1,7 +1,7 @@
 import { Tabs, Popover, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { connect, Helmet, useParams, history } from 'umi';
-import ProjectListTree from './components/ProjectList';
+import DomainListTree from './components/DomainList';
 import styles from './components/style.less';
 import type { StateType } from './model';
 import { DownOutlined } from '@ant-design/icons';
@@ -20,7 +20,6 @@ type Props = {
 };

 const ChatSetting: React.FC<Props> = ({ domainManger, dispatch }) => {
-  window.RUNNING_ENV = 'chat';
  const defaultTabKey = 'metric';
  const params: any = useParams();
  const menuKey = params.menuKey ? params.menuKey : defaultTabKey;
@@ -159,7 +158,7 @@ const ChatSetting: React.FC<Props> = ({ domainManger, dispatch }) => {
              maxHeight: '800px',
            }}
            content={
-              <ProjectListTree
+              <DomainListTree
                createDomainBtnVisible={false}
                onTreeSelected={() => {
                  setOpen(false);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx
@@ -467,21 +467,16 @@ const SqlDetail: React.FC<IProps> = ({
        <Pane initialSize={exploreEditorSize || '500px'}>
          <div className={styles.sqlMain}>
            <div className={styles.sqlEditorWrapper}>
-              <FullScreen
+              <SqlEditor
+                value={sql}
                isFullScreen={isSqlIdeFullScreen}
-                top={`${DEFAULT_FULLSCREEN_TOP}px`}
                triggerBackToNormal={handleNormalScreenSqlIde}
-              >
-                <SqlEditor
-                  value={sql}
-                  // height={sqlEditorHeight}
-                  // theme="monokai"
-                  isRightTheme={isRight}
-                  sizeChanged={editorSize}
-                  onSqlChange={onSqlChange}
-                  onSelect={onSelect}
-                />
-              </FullScreen>
+                // theme="monokai"
+                isRightTheme={isRight}
+                sizeChanged={editorSize}
+                onSqlChange={onSqlChange}
+                onSelect={onSelect}
+              />
            </div>
          </div>
        </Pane>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
@@ -3,9 +3,11 @@ 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;
-const { Option } = Select;

 type Props = {
  filterValues?: any;
@@ -25,10 +27,7 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
    onFiltersChange(value, values);
  };

-  const onSearch = (value) => {
-    if (!value) {
-      return;
-    }
+  const onSearch = (value: any) => {
    onFiltersChange(value, form.getFieldsValue());
  };

@@ -57,34 +56,24 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
      form={form}
      colon={false}
      onValuesChange={(value, values) => {
-        if (value.keywords || value.keywordsType) {
+        if (value.name) {
          return;
        }
        handleValuesChange(value, values);
      }}
-      initialValues={{
-        keywordsType: 'name',
-      }}
    >
      <StandardFormRow key="search" block>
-        <Input.Group compact>
-          <FormItem name={'keywordsType'} noStyle>
-            <Select>
-              <Option value="name">中文名</Option>
-              <Option value="bizName">英文名</Option>
-              <Option value="id">ID</Option>
-            </Select>
+        <div className={styles.searchBox}>
+          <FormItem name={'name'} noStyle>
+            <div className={styles.searchInput}>
+              <Input.Search
+                placeholder="请输入需要查询指标的ID、指标名称、字段名称"
+                enterButton={<SearchOutlined style={{ marginTop: 5 }} />}
+                onSearch={onSearch}
+              />
+            </div>
          </FormItem>
-          <FormItem name={'keywords'} noStyle>
-            <Input.Search
-              placeholder="请输入需要查询的指标信息"
-              allowClear
-              onSearch={onSearch}
-              style={{ width: 300 }}
-              enterButton
-            />
-          </FormItem>
-        </Input.Group>
+        </div>
      </StandardFormRow>
      {filterList.map((item) => {
        const { title, key, options } = item;
@@ -102,6 +91,11 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
          </StandardFormRow>
        );
      })}
+      <StandardFormRow key="domainIds" title="所属主题域" block>
+        <FormItem name="domainIds">
+          <DomainTreeSelect />
+        </FormItem>
+      </StandardFormRow>
    </Form>
  );
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/index.tsx
@@ -1,6 +1,6 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
-import { message, Space } from 'antd';
+import { message } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
 import type { Dispatch } from 'umi';
 import { connect } from 'umi';
@@ -23,6 +23,7 @@ type QueryMetricListParams = {
  bizName?: string;
  sensitiveLevel?: string;
  type?: string;
+  [key: string]: any;
 };

 const ClassMetricTable: React.FC<Props> = () => {
@@ -31,8 +32,9 @@ const ClassMetricTable: React.FC<Props> = () => {
    pageSize: 20,
    total: 0,
  });
-
+  const [loading, setLoading] = useState<boolean>(false);
  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
  const actionRef = useRef<ActionType>();

  useEffect(() => {
@@ -40,11 +42,13 @@ const ClassMetricTable: React.FC<Props> = () => {
  }, []);

  const queryMetricList = async (params: QueryMetricListParams = {}) => {
+    setLoading(true);
    const { code, data, msg } = await queryMetric({
-      ...params,
      ...pagination,
+      ...params,
    });
-    const { list, pageSize, current, total } = data;
+    setLoading(false);
+    const { list, pageSize, current, total } = data || {};
    let resData: any = {};
    if (code === 200) {
      setPagination({
@@ -87,6 +91,10 @@ const ClassMetricTable: React.FC<Props> = () => {
      dataIndex: 'bizName',
      title: '字段名称',
    },
+    {
+      dataIndex: 'domainName',
+      title: '主题域',
+    },
    {
      dataIndex: 'sensitiveLevel',
      title: '敏感度',
@@ -105,7 +113,6 @@ const ClassMetricTable: React.FC<Props> = () => {
    {
      dataIndex: 'type',
      title: '指标类型',
-      // search: false,
      valueEnum: {
        ATOMIC: '原子指标',
        DERIVED: '衍生指标',
@@ -123,25 +130,18 @@ const ClassMetricTable: React.FC<Props> = () => {
  ];

  const handleFilterChange = async (filterParams: {
-    keywordsType: string;
-    keywords: string;
+    name: string;
    sensitiveLevel: string;
    type: string;
  }) => {
-    const params: QueryMetricListParams = {};
-    const { keywordsType, keywords, sensitiveLevel, type } = filterParams;
-    if (keywordsType && keywords) {
-      params[keywordsType] = keywords;
-    }
+    const { sensitiveLevel, type } = filterParams;
+    const params: QueryMetricListParams = { ...filterParams };
    const sensitiveLevelValue = sensitiveLevel?.[0];
    const typeValue = type?.[0];
-    if (sensitiveLevelValue) {
-      params.sensitiveLevel = sensitiveLevelValue;
-    }
-    if (type) {
-      params.type = typeValue;
-    }

+    params.sensitiveLevel = sensitiveLevelValue;
+    params.type = typeValue;
+    setFilterParams(params);
    await queryMetricList(params);
  };

@@ -157,7 +157,6 @@ const ClassMetricTable: React.FC<Props> = () => {
      <ProTable
        className={`${styles.metricTable}`}
        actionRef={actionRef}
-        // headerTitle="指标列表"
        rowKey="id"
        search={false}
        dataSource={dataSource}
@@ -166,27 +165,19 @@ const ClassMetricTable: React.FC<Props> = () => {
        tableAlertRender={() => {
          return false;
        }}
+        loading={loading}
        onChange={(data: any) => {
          const { current, pageSize, total } = data;
-          setPagination({
+          const pagin = {
            current,
            pageSize,
            total,
-          });
+          };
+          setPagination(pagin);
+          queryMetricList({ ...pagin, ...filterParams });
        }}
        size="small"
        options={{ reload: false, density: false, fullScreen: false }}
-        // toolBarRender={() => [
-        //   <Button
-        //     key="create"
-        //     type="primary"
-        //     onClick={() => {
-        //       setMetricItem(undefined);
-        //     }}
-        //   >
-        //     创建指标
-        //   </Button>,
-        // ]}
      />
    </>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
@@ -7,4 +7,77 @@

 .metricTable {
    margin: 20px;
+}
+
+
+
+.searchBox {
+    // margin-bottom: 12px;
+    background: #fff;
+    border-radius: 10px;
+    width: 500px;
+    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;
+                    }
+                }
+            }
+        }
+    }
 }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/ProjectManager.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/ProjectManager.tsx
@@ -1,7 +1,7 @@
 import { Tabs, Popover, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { connect, Helmet, history, useParams } from 'umi';
-import ProjectListTree from './components/ProjectList';
+import DomainListTree from './components/DomainList';
 import ClassDataSourceTable from './components/ClassDataSourceTable';
 import ClassDimensionTable from './components/ClassDimensionTable';
 import ClassMetricTable from './components/ClassMetricTable';
@@ -24,7 +24,6 @@ type Props = {
 };

 const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
-  window.RUNNING_ENV = 'semantic';
  const defaultTabKey = 'xflow';
  const params: any = useParams();
  const menuKey = params.menuKey ? params.menuKey : defaultTabKey;
@@ -203,7 +202,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
              maxHeight: '800px',
            }}
            content={
-              <ProjectListTree
+              <DomainListTree
                onTreeSelected={() => {
                  setOpen(false);
                }}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ContextMenu.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ContextMenu.tsx
@@ -6,7 +6,6 @@ import { SemanticNodeType } from '../../enum';
 import { SEMANTIC_NODE_TYPE_CONFIG } from '../../constant';

 type InitContextMenuProps = {
-  graphShowType?: string;
  onMenuClick?: (key: string, item: Item) => void;
 };

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/GraphLegend.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/GraphLegend.tsx
@@ -0,0 +1,83 @@
+import { Space, Checkbox } from 'antd';
+import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import React, { useState, useEffect } from 'react';
+
+import { connect } from 'umi';
+import type { StateType } from '../../model';
+import styles from '../style.less';
+
+type Props = {
+  legendOptions: LegendOptionsItem[];
+  value?: string[];
+  domainManger: StateType;
+  onChange?: (ids: CheckboxValueType[]) => void;
+  defaultCheckAll?: boolean;
+  [key: string]: any;
+};
+
+type LegendOptionsItem = {
+  id: string;
+  label: string;
+};
+
+const GraphLegend: React.FC<Props> = ({
+  legendOptions,
+  value,
+  defaultCheckAll = false,
+  onChange,
+}) => {
+  const [groupValue, setGroupValue] = useState<CheckboxValueType[]>(value || []);
+
+  useEffect(() => {
+    if (!defaultCheckAll) {
+      return;
+    }
+    if (!Array.isArray(legendOptions)) {
+      setGroupValue([]);
+      return;
+    }
+    setGroupValue(
+      legendOptions.map((item) => {
+        return item.id;
+      }),
+    );
+  }, [legendOptions]);
+
+  useEffect(() => {
+    if (!Array.isArray(value)) {
+      setGroupValue([]);
+      return;
+    }
+    setGroupValue(value);
+  }, [value]);
+
+  const handleChange = (checkedValues: CheckboxValueType[]) => {
+    setGroupValue(checkedValues);
+    onChange?.(checkedValues);
+  };
+
+  return (
+    <div className={styles.graphLegend}>
+      <Checkbox.Group style={{ width: '100%' }} onChange={handleChange} value={groupValue}>
+        <div style={{ width: '100%', maxWidth: '450px' }}>
+          <div className={styles.title}>可见数据源</div>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Space wrap size={[8, 16]}>
+              {legendOptions.map((item) => {
+                return (
+                  <Checkbox key={item.id} value={item.id} style={{ transform: 'scale(0.85)' }}>
+                    {item.label}
+                  </Checkbox>
+                );
+              })}
+            </Space>
+          </div>
+        </div>
+      </Checkbox.Group>
+    </div>
+  );
+};
+
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(GraphLegend);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/GraphLegendVisibleModeItem.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/GraphLegendVisibleModeItem.tsx
@@ -0,0 +1,42 @@
+import { Segmented } from 'antd';
+
+import React from 'react';
+import { SemanticNodeType } from '../../enum';
+import styles from '../style.less';
+
+type Props = {
+  value?: SemanticNodeType;
+  onChange?: (value: SemanticNodeType) => void;
+  [key: string]: any;
+};
+
+const GraphLegendVisibleModeItem: React.FC<Props> = ({ value, onChange }) => {
+  return (
+    <div className={styles.graphLegendVisibleModeItem}>
+      <Segmented
+        size="small"
+        block={true}
+        value={value}
+        onChange={(changeValue) => {
+          onChange?.(changeValue as SemanticNodeType);
+        }}
+        options={[
+          {
+            value: '',
+            label: '全部',
+          },
+          {
+            value: SemanticNodeType.DIMENSION,
+            label: '仅维度',
+          },
+          {
+            value: SemanticNodeType.METRIC,
+            label: '仅指标',
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default GraphLegendVisibleModeItem;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/NodeInfoDrawer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/NodeInfoDrawer.tsx
@@ -95,6 +95,7 @@ const NodeInfoDrawer: React.FC<Props> = ({
          },
          {
            label: '别名',
+            hideItem: !alias,
            value: alias || '-',
          },
          {
@@ -213,7 +214,34 @@ const NodeInfoDrawer: React.FC<Props> = ({
      message.error(msg);
    }
  };
+  const extraNode = (
+    <div className="ant-drawer-extra">
+      <Space>
+        <Button
+          type="primary"
+          key="editBtn"
+          onClick={() => {
+            onEditBtnClick?.(nodeData);
+          }}
+        >
+          编辑
+        </Button>

+        <Popconfirm
+          title="确认删除？"
+          okText="是"
+          cancelText="否"
+          onConfirm={() => {
+            handleDeleteConfirm();
+          }}
+        >
+          <Button danger key="deleteBtn">
+            删除
+          </Button>
+        </Popconfirm>
+      </Space>
+    </div>
+  );
  return (
    <>
      <Drawer
@@ -226,34 +254,7 @@ const NodeInfoDrawer: React.FC<Props> = ({
        placement="right"
        mask={false}
        getContainer={false}
-        footer={
-          <div className="ant-drawer-extra">
-            <Space>
-              <Button
-                type="primary"
-                key="editBtn"
-                onClick={() => {
-                  onEditBtnClick?.(nodeData);
-                }}
-              >
-                编辑
-              </Button>
-
-              <Popconfirm
-                title="确认删除？"
-                okText="是"
-                cancelText="否"
-                onConfirm={() => {
-                  handleDeleteConfirm();
-                }}
-              >
-                <Button danger key="deleteBtn">
-                  删除
-                </Button>
-              </Popconfirm>
-            </Space>
-          </div>
-        }
+        footer={false}
        {...restProps}
      >
        <div key={nodeData?.id} className={styles.nodeInfoDrawerContent}>
@@ -282,6 +283,7 @@ const NodeInfoDrawer: React.FC<Props> = ({
            );
          })}
        </div>
+        {extraNode}
      </Drawer>
    </>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ToolBar.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ToolBar.tsx
@@ -1,8 +1,9 @@
 import G6, { Graph } from '@antv/g6';
+import { IAbstractGraph as IGraph } from '@antv/g6-core';
 import { createDom } from '@antv/dom-util';
 import { ToolBarSearchCallBack } from '../../data';
 const searchIconSvgPath = `<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" />`;
-
+const visibleModeIconSvgPath = `<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656zM340 683v77c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-77c-10.1 3.3-20.8 5-32 5s-21.9-1.8-32-5zm64-198V264c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v221c10.1-3.3 20.8-5 32-5s21.9 1.8 32 5zm-64 198c10.1 3.3 20.8 5 32 5s21.9-1.8 32-5c41.8-13.5 72-52.7 72-99s-30.2-85.5-72-99c-10.1-3.3-20.8-5-32-5s-21.9 1.8-32 5c-41.8 13.5-72 52.7-72 99s30.2 85.5 72 99zm.1-115.7c.3-.6.7-1.2 1-1.8v-.1l1.2-1.8c.1-.2.2-.3.3-.5.3-.5.7-.9 1-1.4.1-.1.2-.3.3-.4.5-.6.9-1.1 1.4-1.6l.3-.3 1.2-1.2.4-.4c.5-.5 1-.9 1.6-1.4.6-.5 1.1-.9 1.7-1.3.2-.1.3-.2.5-.3.5-.3.9-.7 1.4-1 .1-.1.3-.2.4-.3.6-.4 1.2-.7 1.9-1.1.1-.1.3-.1.4-.2.5-.3 1-.5 1.6-.8l.6-.3c.7-.3 1.3-.6 2-.8.7-.3 1.4-.5 2.1-.7.2-.1.4-.1.6-.2.6-.2 1.1-.3 1.7-.4.2 0 .3-.1.5-.1.7-.2 1.5-.3 2.2-.4.2 0 .3 0 .5-.1.6-.1 1.2-.1 1.8-.2h.6c.8 0 1.5-.1 2.3-.1s1.5 0 2.3.1h.6c.6 0 1.2.1 1.8.2.2 0 .3 0 .5.1.7.1 1.5.2 2.2.4.2 0 .3.1.5.1.6.1 1.2.3 1.7.4.2.1.4.1.6.2.7.2 1.4.4 2.1.7.7.2 1.3.5 2 .8l.6.3c.5.2 1.1.5 1.6.8.1.1.3.1.4.2.6.3 1.3.7 1.9 1.1.1.1.3.2.4.3.5.3 1 .6 1.4 1 .2.1.3.2.5.3.6.4 1.2.9 1.7 1.3s1.1.9 1.6 1.4l.4.4 1.2 1.2.3.3c.5.5 1 1.1 1.4 1.6.1.1.2.3.3.4.4.4.7.9 1 1.4.1.2.2.3.3.5l1.2 1.8s0 .1.1.1a36.18 36.18 0 015.1 18.5c0 6-1.5 11.7-4.1 16.7-.3.6-.7 1.2-1 1.8 0 0 0 .1-.1.1l-1.2 1.8c-.1.2-.2.3-.3.5-.3.5-.7.9-1 1.4-.1.1-.2.3-.3.4-.5.6-.9 1.1-1.4 1.6l-.3.3-1.2 1.2-.4.4c-.5.5-1 .9-1.6 1.4-.6.5-1.1.9-1.7 1.3-.2.1-.3.2-.5.3-.5.3-.9.7-1.4 1-.1.1-.3.2-.4.3-.6.4-1.2.7-1.9 1.1-.1.1-.3.1-.4.2-.5.3-1 .5-1.6.8l-.6.3c-.7.3-1.3.6-2 .8-.7.3-1.4.5-2.1.7-.2.1-.4.1-.6.2-.6.2-1.1.3-1.7.4-.2 0-.3.1-.5.1-.7.2-1.5.3-2.2.4-.2 0-.3 0-.5.1-.6.1-1.2.1-1.8.2h-.6c-.8 0-1.5.1-2.3.1s-1.5 0-2.3-.1h-.6c-.6 0-1.2-.1-1.8-.2-.2 0-.3 0-.5-.1-.7-.1-1.5-.2-2.2-.4-.2 0-.3-.1-.5-.1-.6-.1-1.2-.3-1.7-.4-.2-.1-.4-.1-.6-.2-.7-.2-1.4-.4-2.1-.7-.7-.2-1.3-.5-2-.8l-.6-.3c-.5-.2-1.1-.5-1.6-.8-.1-.1-.3-.1-.4-.2-.6-.3-1.3-.7-1.9-1.1-.1-.1-.3-.2-.4-.3-.5-.3-1-.6-1.4-1-.2-.1-.3-.2-.5-.3-.6-.4-1.2-.9-1.7-1.3s-1.1-.9-1.6-1.4l-.4-.4-1.2-1.2-.3-.3c-.5-.5-1-1.1-1.4-1.6-.1-.1-.2-.3-.3-.4-.4-.4-.7-.9-1-1.4-.1-.2-.2-.3-.3-.5l-1.2-1.8v-.1c-.4-.6-.7-1.2-1-1.8-2.6-5-4.1-10.7-4.1-16.7s1.5-11.7 4.1-16.7zM620 539v221c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V539c-10.1 3.3-20.8 5-32 5s-21.9-1.8-32-5zm64-198v-77c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v77c10.1-3.3 20.8-5 32-5s21.9 1.8 32 5zm-64 198c10.1 3.3 20.8 5 32 5s21.9-1.8 32-5c41.8-13.5 72-52.7 72-99s-30.2-85.5-72-99c-10.1-3.3-20.8-5-32-5s-21.9 1.8-32 5c-41.8 13.5-72 52.7-72 99s30.2 85.5 72 99zm.1-115.7c.3-.6.7-1.2 1-1.8v-.1l1.2-1.8c.1-.2.2-.3.3-.5.3-.5.7-.9 1-1.4.1-.1.2-.3.3-.4.5-.6.9-1.1 1.4-1.6l.3-.3 1.2-1.2.4-.4c.5-.5 1-.9 1.6-1.4.6-.5 1.1-.9 1.7-1.3.2-.1.3-.2.5-.3.5-.3.9-.7 1.4-1 .1-.1.3-.2.4-.3.6-.4 1.2-.7 1.9-1.1.1-.1.3-.1.4-.2.5-.3 1-.5 1.6-.8l.6-.3c.7-.3 1.3-.6 2-.8.7-.3 1.4-.5 2.1-.7.2-.1.4-.1.6-.2.6-.2 1.1-.3 1.7-.4.2 0 .3-.1.5-.1.7-.2 1.5-.3 2.2-.4.2 0 .3 0 .5-.1.6-.1 1.2-.1 1.8-.2h.6c.8 0 1.5-.1 2.3-.1s1.5 0 2.3.1h.6c.6 0 1.2.1 1.8.2.2 0 .3 0 .5.1.7.1 1.5.2 2.2.4.2 0 .3.1.5.1.6.1 1.2.3 1.7.4.2.1.4.1.6.2.7.2 1.4.4 2.1.7.7.2 1.3.5 2 .8l.6.3c.5.2 1.1.5 1.6.8.1.1.3.1.4.2.6.3 1.3.7 1.9 1.1.1.1.3.2.4.3.5.3 1 .6 1.4 1 .2.1.3.2.5.3.6.4 1.2.9 1.7 1.3s1.1.9 1.6 1.4l.4.4 1.2 1.2.3.3c.5.5 1 1.1 1.4 1.6.1.1.2.3.3.4.4.4.7.9 1 1.4.1.2.2.3.3.5l1.2 1.8v.1a36.18 36.18 0 015.1 18.5c0 6-1.5 11.7-4.1 16.7-.3.6-.7 1.2-1 1.8v.1l-1.2 1.8c-.1.2-.2.3-.3.5-.3.5-.7.9-1 1.4-.1.1-.2.3-.3.4-.5.6-.9 1.1-1.4 1.6l-.3.3-1.2 1.2-.4.4c-.5.5-1 .9-1.6 1.4-.6.5-1.1.9-1.7 1.3-.2.1-.3.2-.5.3-.5.3-.9.7-1.4 1-.1.1-.3.2-.4.3-.6.4-1.2.7-1.9 1.1-.1.1-.3.1-.4.2-.5.3-1 .5-1.6.8l-.6.3c-.7.3-1.3.6-2 .8-.7.3-1.4.5-2.1.7-.2.1-.4.1-.6.2-.6.2-1.1.3-1.7.4-.2 0-.3.1-.5.1-.7.2-1.5.3-2.2.4-.2 0-.3 0-.5.1-.6.1-1.2.1-1.8.2h-.6c-.8 0-1.5.1-2.3.1s-1.5 0-2.3-.1h-.6c-.6 0-1.2-.1-1.8-.2-.2 0-.3 0-.5-.1-.7-.1-1.5-.2-2.2-.4-.2 0-.3-.1-.5-.1-.6-.1-1.2-.3-1.7-.4-.2-.1-.4-.1-.6-.2-.7-.2-1.4-.4-2.1-.7-.7-.2-1.3-.5-2-.8l-.6-.3c-.5-.2-1.1-.5-1.6-.8-.1-.1-.3-.1-.4-.2-.6-.3-1.3-.7-1.9-1.1-.1-.1-.3-.2-.4-.3-.5-.3-1-.6-1.4-1-.2-.1-.3-.2-.5-.3-.6-.4-1.2-.9-1.7-1.3s-1.1-.9-1.6-1.4l-.4-.4-1.2-1.2-.3-.3c-.5-.5-1-1.1-1.4-1.6-.1-.1-.2-.3-.3-.4-.4-.4-.7-.9-1-1.4-.1-.2-.2-.3-.3-.5l-1.2-1.8v-.1c-.4-.6-.7-1.2-1-1.8-2.6-5-4.1-10.7-4.1-16.7s1.5-11.7 4.1-16.7z"></path>`;
 // const searchNode = (graph) => {
 //   const toolBarSearchInput = document.getElementById('toolBarSearchInput') as HTMLInputElement;
 //   const searchText = toolBarSearchInput.value.trim();
@@ -90,13 +91,29 @@ const searchInputDOM = (graph: Graph, onSearch: ToolBarSearchCallBack) => {
  return searchDom;
 };

-const initToolBar = ({ onSearch }: { onSearch: ToolBarSearchCallBack }) => {
+function zoomGraph(graph, ratio) {
+  const width = graph.get('width');
+  const height = graph.get('height');
+  const centerX = width / 2;
+  const centerY = height / 2;
+  graph.zoom(ratio, { x: centerX, y: centerY });
+}
+
+const initToolBar = ({
+  onSearch,
+  onClick,
+}: {
+  onSearch: ToolBarSearchCallBack;
+  onClick?: (code: string, graph: IGraph) => void;
+}) => {
  const toolBarInstance = new G6.ToolBar();
  const config = toolBarInstance._cfgs;
  const defaultContentDomString = config.getContent();
  const defaultContentDom = createDom(defaultContentDomString);
  // @ts-ignore
-  const elements = defaultContentDom.querySelectorAll('li[code="redo"], li[code="undo"]');
+  const elements = defaultContentDom.querySelectorAll(
+    'li[code="redo"], li[code="undo"], li[code="realZoom"]',
+  );
  elements.forEach((element) => {
    element.remove();
  });
@@ -113,7 +130,21 @@ const initToolBar = ({ onSearch }: { onSearch: ToolBarSearchCallBack }) => {
    ${searchIconSvgPath}
  </svg>
 </li>`;
-  defaultContentDom.insertAdjacentHTML('afterbegin', searchBtnDom);
+  const visibleBtnDom = `<li code="visibleMode">
+  <svg
+    viewBox="64 64 896 896"
+    class="icon"
+    data-icon="visibleMode"
+    width="24"
+    height="24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    ${visibleModeIconSvgPath}
+  </svg>
+  </li>`;
+
+  defaultContentDom.insertAdjacentHTML('afterbegin', `${searchBtnDom}${visibleBtnDom}`);
  let searchInputContentVisible = true;
  const toolbar = new G6.ToolBar({
    position: { x: 20, y: 20 },
@@ -122,6 +153,16 @@ const initToolBar = ({ onSearch }: { onSearch: ToolBarSearchCallBack }) => {
      const searchInput = searchInputDOM(graph as Graph, onSearch);
      const content = `<div class="g6-component-toolbar-content">${defaultContentDom.outerHTML}</div>`;
      const contentDom = createDom(content);
+      contentDom.addEventListener('click', (event: PointerEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      });
+      contentDom.addEventListener('dblclick', (event: PointerEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      });
      contentDom.appendChild(searchInput);
      return contentDom;
    },
@@ -133,11 +174,54 @@ const initToolBar = ({ onSearch }: { onSearch: ToolBarSearchCallBack }) => {
          searchText.style.display = visible;
          searchInputContentVisible = !searchInputContentVisible;
        }
+      } else if (code === 'visibleMode') {
+        const searchText = document.getElementById('searchInputContent');
+        if (searchText) {
+          const visible = 'none';
+          searchText.style.display = visible;
+          searchInputContentVisible = false;
+        }
+      } else if (code.includes('zoom')) {
+        const sensitivity = 0.1; // 设置缩放灵敏度，值越小，缩放越不敏感，默认值为 1
+        const zoomInRatio = 1 - sensitivity;
+        const zoomOutRatio = 1 + sensitivity;
+
+        if (code === 'zoomIn') {
+          zoomGraph(graph, zoomInRatio);
+        } else if (code === 'zoomOut') {
+          zoomGraph(graph, zoomOutRatio);
+        }
+        // else if (code === 'realZoom') {
+        //   const width = graph.get('width');
+        //   const height = graph.get('height');
+        //   const centerX = width / 2;
+        //   const centerY = height / 2;
+        //   graph.moveTo(centerX, centerY);
+        //   graph.zoomTo(1, { x: centerX, y: centerY });
+        // } else if (code === 'autoZoom') {
+        //   const width = graph.get('width');
+        //   const height = graph.get('height');
+        //   const centerX = width / 2;
+        //   const centerY = height / 2;
+        //   const centerModel = graph.getPointByCanvas(centerX, centerY);
+
+        //   // 调用 fitView
+        //   graph.fitView();
+
+        //   // 在 fitView 之后获取新的画布中心点
+        //   const newCenterCanvas = graph.getCanvasByPoint(centerModel.x, centerModel.y);
+
+        //   // 计算并调整画布的偏移量，使得画布中心点保持不变
+        //   const dx = centerX - newCenterCanvas.x;
+        //   const dy = centerY - newCenterCanvas.y;
+        //   graph.translate(dx, dy);
+        // }
      } else {
        // handleDefaultOperator public方法缺失graph作为参数传入，将graph挂载在cfgs上，源码通过get会获取到graph,完成默认code的执行逻辑
        toolBarInstance._cfgs.graph = graph;
        toolBarInstance.handleDefaultOperator(code);
      }
+      onClick?.(code, graph);
    },
  });

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'umi';
 import type { StateType } from '../model';
-import { IGroup } from '@antv/g-base';
+// import { IGroup } from '@antv/g-base';
 import type { Dispatch } from 'umi';
 import {
  typeConfigs,
@@ -16,7 +16,7 @@ import { Item, TreeGraphData, NodeConfig, IItemBaseConfig } from '@antv/g6-core'
 import initToolBar from './components/ToolBar';
 import initTooltips from './components/ToolTips';
 import initContextMenu from './components/ContextMenu';
-import initLegend from './components/Legend';
+// import initLegend from './components/Legend';
 import { SemanticNodeType } from '../enum';
 import G6 from '@antv/g6';
 import { ISemantic, IDataSource } from '../data';
@@ -26,11 +26,14 @@ import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
 import DeleteConfirmModal from './components/DeleteConfirmModal';
 import ClassDataSourceTypeModal from '../components/ClassDataSourceTypeModal';
 import GraphToolBar from './components/GraphToolBar';
-import { cloneDeep } from 'lodash';
+import GraphLegend from './components/GraphLegend';
+import GraphLegendVisibleModeItem from './components/GraphLegendVisibleModeItem';
+
+// import { cloneDeep } from 'lodash';

 type Props = {
  domainId: number;
-  graphShowType?: SemanticNodeType;
+  // graphShowType?: SemanticNodeType;
  domainManger: StateType;
  dispatch: Dispatch;
 };
@@ -39,7 +42,7 @@ const DomainManger: React.FC<Props> = ({
  domainManger,
  domainId,
  // graphShowType = SemanticNodeType.DIMENSION,
-  graphShowType,
+  // graphShowType,
  dispatch,
 }) => {
  const ref = useRef(null);
@@ -53,7 +56,7 @@ const DomainManger: React.FC<Props> = ({

  const legendDataRef = useRef<any[]>([]);
  const graphRef = useRef<any>(null);
-  const legendDataFilterFunctions = useRef<any>({});
+  // const legendDataFilterFunctions = useRef<any>({});
  const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();

  const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
@@ -70,30 +73,19 @@ const DomainManger: React.FC<Props> = ({
  const [confirmModalOpenState, setConfirmModalOpenState] = useState<boolean>(false);
  const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);

-  // const toggleNodeVisibility = (graph: Graph, node: Item, visible: boolean) => {
-  //   if (visible) {
-  //     graph.showItem(node);
-  //   } else {
-  //     graph.hideItem(node);
-  //   }
-  // };
+  const visibleModeOpenRef = useRef<boolean>(false);
+  const [visibleModeOpen, setVisibleModeOpen] = useState<boolean>(false);
+
+  const graphShowTypeRef = useRef<SemanticNodeType>();
+  const [graphShowTypeState, setGraphShowTypeState] = useState<SemanticNodeType>();
+
+  const graphLegendDataSourceIds = useRef<string[]>();

  useEffect(() => {
    dimensionListRef.current = dimensionList;
    metricListRef.current = metricList;
  }, [dimensionList, metricList]);

-  // const toggleChildrenVisibility = (graph: Graph, node: Item, visible: boolean) => {
-  //   const model = node.getModel();
-  //   if (Array.isArray(model.children)) {
-  //     model.children.forEach((child) => {
-  //       const childNode = graph.findById(child.id);
-  //       toggleNodeVisibility(graph, childNode, visible);
-  //       toggleChildrenVisibility(graph, childNode, visible);
-  //     });
-  //   }
-  // };
-
  const handleSeachNode = (text: string) => {
    const filterData = dataSourceRef.current.reduce(
      (data: ISemantic.IDomainSchemaRelaList, item: ISemantic.IDomainSchemaRelaItem) => {
@@ -117,12 +109,24 @@ const DomainManger: React.FC<Props> = ({
    refreshGraphData(rootGraphData);
  };

-  const changeGraphData = (
-    dataSourceList: ISemantic.IDomainSchemaRelaList,
-    type?: SemanticNodeType,
-  ): TreeGraphData => {
-    const relationData = formatterRelationData({ dataSourceList, type, limit: 20 });
-    const legendList = relationData.map((item: any) => {
+  const changeGraphData = (dataSourceList: ISemantic.IDomainSchemaRelaList): TreeGraphData => {
+    const relationData = formatterRelationData({
+      dataSourceList,
+      type: graphShowTypeRef.current,
+      limit: 20,
+      showDataSourceId: graphLegendDataSourceIds.current,
+    });
+
+    const graphRootData = {
+      id: 'root',
+      name: domainManger.selectDomainName,
+      children: relationData,
+    };
+    return graphRootData;
+  };
+
+  const initLegendData = (graphRootData: TreeGraphData) => {
+    const legendList = graphRootData?.children?.map((item: any) => {
      const { id, name } = item;
      return {
        id,
@@ -131,13 +135,7 @@ const DomainManger: React.FC<Props> = ({
        ...typeConfigs.datasource,
      };
    });
-    legendDataRef.current = legendList;
-    const graphRootData = {
-      id: 'root',
-      name: domainManger.selectDomainName,
-      children: relationData,
-    };
-    return graphRootData;
+    legendDataRef.current = legendList as any;
  };

  const queryDataSourceList = async (params: {
@@ -153,8 +151,9 @@ const DomainManger: React.FC<Props> = ({
          }),
        );
        const graphRootData = changeGraphData(data);
-        setGraphData(graphRootData);
        dataSourceRef.current = data;
+        initLegendData(graphRootData);
+        setGraphData(graphRootData);
        return graphRootData;
      }
      return false;
@@ -164,41 +163,42 @@ const DomainManger: React.FC<Props> = ({
  };

  useEffect(() => {
+    graphLegendDataSourceIds.current = undefined;
    graphRef.current = null;
    queryDataSourceList({ domainId });
-  }, [domainId, graphShowType]);
+  }, [domainId]);

-  const getLegendDataFilterFunctions = () => {
-    legendDataRef.current.map((item: any) => {
-      const { id } = item;
-      legendDataFilterFunctions.current = {
-        ...legendDataFilterFunctions.current,
-        [id]: (d: any) => {
-          if (d.legendType === id) {
-            return true;
-          }
-          return false;
-        },
-      };
-    });
-  };
+  // const getLegendDataFilterFunctions = () => {
+  //   legendDataRef.current.map((item: any) => {
+  //     const { id } = item;
+  //     legendDataFilterFunctions.current = {
+  //       ...legendDataFilterFunctions.current,
+  //       [id]: (d: any) => {
+  //         if (d.legendType === id) {
+  //           return true;
+  //         }
+  //         return false;
+  //       },
+  //     };
+  //   });
+  // };

-  const setAllActiveLegend = (legend: any) => {
-    const legendCanvas = legend._cfgs.legendCanvas;
-    if (!legendCanvas) {
-      return;
-    }
-    // 从图例中找出node-group节点;
-    const group = legendCanvas.find((e: any) => e.get('name') === 'node-group');
-    // 数据源的图例节点在node-group中的children中；
-    const groups = group.get('children');
-    groups.forEach((itemGroup: any) => {
-      const labelText = itemGroup.find((e: any) => e.get('name') === 'circle-node-text');
-      // legend中activateLegend事件触发在图例节点的Text上，方法中存在向上溯源的逻辑：const shapeGroup = shape.get('parent');
-      // 因此复用实例方法时，在这里不能直接将图例节点传入，需要在节点的children中找任意一个元素作为入参；
-      legend.activateLegend(labelText);
-    });
-  };
+  // const setAllActiveLegend = (legend: any) => {
+  //   const legendCanvas = legend._cfgs.legendCanvas;
+  //   if (!legendCanvas) {
+  //     return;
+  //   }
+  //   // 从图例中找出node-group节点;
+  //   const group = legendCanvas.find((e: any) => e.get('name') === 'node-group');
+  //   // 数据源的图例节点在node-group中的children中；
+  //   const groups = group.get('children');
+  //   groups.forEach((itemGroup: any) => {
+  //     const labelText = itemGroup.find((e: any) => e.get('name') === 'circle-node-text');
+  //     // legend中activateLegend事件触发在图例节点的Text上，方法中存在向上溯源的逻辑：const shapeGroup = shape.get('parent');
+  //     // 因此复用实例方法时，在这里不能直接将图例节点传入，需要在节点的children中找任意一个元素作为入参；
+  //     legend.activateLegend(labelText);
+  //   });
+  // };

  const handleContextMenuClickEdit = (item: IItemBaseConfig) => {
    const targetData = item.model;
@@ -273,7 +273,6 @@ const DomainManger: React.FC<Props> = ({
    if (targetData.nodeType === SemanticNodeType.DIMENSION) {
      const targetItem = dimensionListRef.current.find((item) => item.id === targetData.uid);
      if (targetItem) {
-        // setDimensionItem({ ...targetItem });
        setCurrentNodeData(targetItem);
        setConfirmModalOpenState(true);
      } else {
@@ -283,7 +282,6 @@ const DomainManger: React.FC<Props> = ({
    if (targetData.nodeType === SemanticNodeType.METRIC) {
      const targetItem = metricListRef.current.find((item) => item.id === targetData.uid);
      if (targetItem) {
-        // setMetricItem({ ...targetItem });
        setCurrentNodeData(targetItem);
        setConfirmModalOpenState(true);
      } else {
@@ -357,6 +355,16 @@ const DomainManger: React.FC<Props> = ({
    },
  };

+  function handleToolBarClick(code: string) {
+    if (code === 'visibleMode') {
+      visibleModeOpenRef.current = !visibleModeOpenRef.current;
+      setVisibleModeOpen(visibleModeOpenRef.current);
+      return;
+    }
+    visibleModeOpenRef.current = false;
+    setVisibleModeOpen(false);
+  }
+
  useEffect(() => {
    if (!Array.isArray(graphData?.children)) {
      return;
@@ -371,17 +379,16 @@ const DomainManger: React.FC<Props> = ({
      const graphNodeList = flatGraphDataNode(graphData.children);
      const graphConfigKey = graphNodeList.length > 20 ? 'dendrogram' : 'mindmap';

-      getLegendDataFilterFunctions();
-      const toolbar = initToolBar({ onSearch: handleSeachNode });
+      // getLegendDataFilterFunctions();
+      const toolbar = initToolBar({ onSearch: handleSeachNode, onClick: handleToolBarClick });
      const tooltip = initTooltips();
      const contextMenu = initContextMenu({
-        graphShowType,
        onMenuClick: handleContextMenuClick,
      });
-      const legend = initLegend({
-        nodeData: legendDataRef.current,
-        filterFunctions: { ...legendDataFilterFunctions.current },
-      });
+      // const legend = initLegend({
+      //   nodeData: legendDataRef.current,
+      //   filterFunctions: { ...legendDataFilterFunctions.current },
+      // });

      graphRef.current = new G6.TreeGraph({
        container: 'semanticGraph',
@@ -400,7 +407,10 @@ const DomainManger: React.FC<Props> = ({
            'drag-node',
            'drag-canvas',
            // 'activate-relations',
-            'zoom-canvas',
+            {
+              type: 'zoom-canvas',
+              sensitivity: 0.3, // 设置缩放灵敏度，值越小，缩放越不敏感，默认值为 1
+            },
            {
              type: 'activate-relations',
              trigger: 'mouseenter', // 触发方式，可以是 'mouseenter' 或 'click'
@@ -429,45 +439,35 @@ const DomainManger: React.FC<Props> = ({
        layout: {
          ...graphConfigMap[graphConfigKey].layout,
        },
-        plugins: [legend, tooltip, toolbar, contextMenu],
+        plugins: [tooltip, toolbar, contextMenu],
+        // plugins: [legend, tooltip, toolbar, contextMenu],
      });
      graphRef.current.set('initGraphData', graphData);
      graphRef.current.set('initDataSource', dataSourceRef.current);

-      const legendCanvas = legend._cfgs.legendCanvas;
+      // const legendCanvas = legend._cfgs.legendCanvas;

      // legend模式事件方法bindEvents会有点击图例空白清空选中的逻辑，在注册click事件前，先将click事件队列清空；
-      legend._cfgs.legendCanvas._events.click = [];
-      // legendCanvas.on('click', (e) => {
-      //   const shape = e.target;
-      //   const shapeGroup = shape.get('parent');
-      //   const shapeGroupId = shapeGroup?.cfg?.id;
-      //   if (shapeGroupId) {
-      //     const isActive = shapeGroup.get('active');
-      //     const targetNode = graphRef.current.findById(shapeGroupId);
-      //     toggleNodeVisibility(graphRef.current, targetNode, isActive);
-      //     toggleChildrenVisibility(graphRef.current, targetNode, isActive);
-      //   }
+      // legend._cfgs.legendCanvas._events.click = [];
+      // legendCanvas.on('click', () => {
+      //   // @ts-ignore findLegendItemsByState为Legend的 private方法，忽略ts校验
+      //   const activedNodeList = legend.findLegendItemsByState('active');
+      //   // 获取当前所有激活节点后进行数据遍历筛选；
+      //   const activedNodeIds = activedNodeList.map((item: IGroup) => {
+      //     return item.cfg.id;
+      //   });
+      //   const graphDataClone = cloneDeep(graphData);
+      //   const filterGraphDataChildren = Array.isArray(graphDataClone?.children)
+      //     ? graphDataClone.children.reduce((children: TreeGraphData[], item: TreeGraphData) => {
+      //         if (activedNodeIds.includes(item.id)) {
+      //           children.push(item);
+      //         }
+      //         return children;
+      //       }, [])
+      //     : [];
+      //   graphDataClone.children = filterGraphDataChildren;
+      //   refreshGraphData(graphDataClone);
      // });
-      legendCanvas.on('click', () => {
-        // @ts-ignore findLegendItemsByState为Legend的 private方法，忽略ts校验
-        const activedNodeList = legend.findLegendItemsByState('active');
-        // 获取当前所有激活节点后进行数据遍历筛选；
-        const activedNodeIds = activedNodeList.map((item: IGroup) => {
-          return item.cfg.id;
-        });
-        const graphDataClone = cloneDeep(graphData);
-        const filterGraphDataChildren = Array.isArray(graphDataClone?.children)
-          ? graphDataClone.children.reduce((children: TreeGraphData[], item: TreeGraphData) => {
-              if (activedNodeIds.includes(item.id)) {
-                children.push(item);
-              }
-              return children;
-            }, [])
-          : [];
-        graphDataClone.children = filterGraphDataChildren;
-        refreshGraphData(graphDataClone);
-      });

      graphRef.current.node(function (node: NodeConfig) {
        return getNodeConfigByType(node, {
@@ -478,7 +478,7 @@ const DomainManger: React.FC<Props> = ({
      graphRef.current.render();
      graphRef.current.fitView([80, 80]);

-      setAllActiveLegend(legend);
+      // setAllActiveLegend(legend);

      graphRef.current.on('node:click', (evt: any) => {
        const item = evt.item; // 被操作的节点 item
@@ -513,8 +513,11 @@ const DomainManger: React.FC<Props> = ({
    }
  }, [graphData]);

-  const updateGraphData = async () => {
-    const graphRootData = await queryDataSourceList({ domainId });
+  const updateGraphData = async (params?: { graphShowType?: SemanticNodeType }) => {
+    const graphRootData = await queryDataSourceList({
+      domainId,
+      graphShowType: params?.graphShowType,
+    });
    if (graphRootData) {
      refreshGraphData(graphRootData);
    }
@@ -529,6 +532,27 @@ const DomainManger: React.FC<Props> = ({

  return (
    <>
+      <GraphLegend
+        legendOptions={legendDataRef.current}
+        defaultCheckAll={true}
+        onChange={(nodeIds: string[]) => {
+          graphLegendDataSourceIds.current = nodeIds;
+          const rootGraphData = changeGraphData(dataSourceRef.current);
+          refreshGraphData(rootGraphData);
+        }}
+      />
+      {visibleModeOpen && (
+        <GraphLegendVisibleModeItem
+          value={graphShowTypeState}
+          onChange={(showType) => {
+            graphShowTypeRef.current = showType;
+            setGraphShowTypeState(showType);
+            const rootGraphData = changeGraphData(dataSourceRef.current);
+            refreshGraphData(rootGraphData);
+          }}
+        />
+      )}
+
      <GraphToolBar
        onClick={({ eventName }: { eventName: string }) => {
          setNodeDataSource(undefined);
@@ -547,7 +571,7 @@ const DomainManger: React.FC<Props> = ({
      />
      <div
        ref={ref}
-        key={`${domainId}-${graphShowType}`}
+        key={`${domainId}`}
        id="semanticGraph"
        style={{ width: '100%', height: 'calc(100vh - 175px)', position: 'relative' }}
      />
@@ -648,7 +672,7 @@ const DomainManger: React.FC<Props> = ({
          onOkClick={() => {
            setConfirmModalOpenState(false);
            updateGraphData();
-            graphShowType === SemanticNodeType.DIMENSION
+            graphShowTypeState === SemanticNodeType.DIMENSION
              ? dispatch({
                  type: 'domainManger/queryDimensionList',
                  payload: {
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/style.less
@@ -19,4 +19,36 @@
      border: 1px solid #0e73ff;
    }
  }
+}
+
+.graphLegend {
+  padding: 15px;
+  background: #45be940d;
+  position: absolute;
+  top: 100px;
+  left: 20px;
+  z-index: 1;
+  border: 1px solid #78c16d;
+  min-width: 190px;
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 10px;
+    font-weight: 500;
+  }
+  :global {
+    .ant-form-item {
+      margin-bottom: 2px;
+    }
+  }
+}
+.graphLegendVisibleModeItem {
+  padding: 3px;
+  background: #fff;
+  position: absolute;
+  top: 58px;
+  left: 20px;
+  z-index: 1;
+  border: 1px solid #eee;
+  min-width: 190px;
 }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/utils.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/utils.ts
@@ -67,8 +67,9 @@ export const formatterRelationData = (params: {
  dataSourceList: ISemantic.IDomainSchemaRelaList;
  limit?: number;
  type?: SemanticNodeType;
+  showDataSourceId?: string[];
 }): TreeGraphData[] => {
-  const { type, dataSourceList, limit } = params;
+  const { type, dataSourceList, limit, showDataSourceId } = params;
  const relationData = dataSourceList.reduce(
    (relationList: TreeGraphData[], item: ISemantic.IDomainSchemaRelaItem) => {
      const { datasource, dimensions, metrics } = item;
@@ -86,20 +87,22 @@ export const formatterRelationData = (params: {
        const metricList = getMetricChildren(metrics, dataSourceNodeId, limit);
        childrenList = [...dimensionList, ...metricList];
      }
-      relationList.push({
-        ...datasource,
-        legendType: dataSourceNodeId,
-        id: dataSourceNodeId,
-        uid: id,
-        nodeType: SemanticNodeType.DATASOURCE,
-        size: 40,
-        children: [...childrenList],
-        style: {
-          lineWidth: 2,
-          fill: '#BDEFDB',
-          stroke: '#5AD8A6',
-        },
-      });
+      if (!showDataSourceId || showDataSourceId.includes(dataSourceNodeId)) {
+        relationList.push({
+          ...datasource,
+          legendType: dataSourceNodeId,
+          id: dataSourceNodeId,
+          uid: id,
+          nodeType: SemanticNodeType.DATASOURCE,
+          size: 40,
+          children: [...childrenList],
+          style: {
+            lineWidth: 2,
+            fill: '#BDEFDB',
+            stroke: '#5AD8A6',
+          },
+        });
+      }
      return relationList;
    },
    [],
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraphCanvas.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraphCanvas.tsx
@@ -1,10 +1,10 @@
-import { Radio } from 'antd';
+// import { Radio } from 'antd';
 import React, { useState } from 'react';
 import { connect } from 'umi';
 import styles from './components/style.less';
 import type { StateType } from './model';
 import { SemanticNodeType } from './enum';
-import SemanticFlow from './SemanticFlows';
+// import SemanticFlow from './SemanticFlows';
 import SemanticGraph from './SemanticGraph';

 type Props = {
@@ -12,7 +12,7 @@ type Props = {
 };

 const SemanticGraphCanvas: React.FC<Props> = ({ domainManger }) => {
-  const [graphShowType, setGraphShowType] = useState<SemanticNodeType>(SemanticNodeType.DIMENSION);
+  // const [graphShowType, setGraphShowType] = useState<SemanticNodeType>(SemanticNodeType.DIMENSION);
  const { selectDomainId } = domainManger;
  return (
    <div className={styles.semanticGraphCanvas}>
@@ -32,15 +32,15 @@ const SemanticGraphCanvas: React.FC<Props> = ({ domainManger }) => {
      </div> */}

      <div className={styles.canvasContainer}>
-        {graphShowType === SemanticNodeType.DATASOURCE ? (
+        {/* {graphShowType === SemanticNodeType.DATASOURCE ? (
          <div style={{ width: '100%', height: 'calc(100vh - 200px)' }}>
            <SemanticFlow />
          </div>
-        ) : (
-          <div style={{ width: '100%' }}>
-            <SemanticGraph domainId={selectDomainId} />
-          </div>
-        )}
+        ) : ( */}
+        <div style={{ width: '100%' }}>
+          <SemanticGraph domainId={selectDomainId} />
+        </div>
+        {/* )} */}
      </div>
    </div>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
@@ -42,7 +42,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      ...pagination,
      domainId: selectDomainId,
    });
-    const { list, pageSize, current, total } = data;
+    const { list, pageSize, current, total } = data || {};
    let resData: any = {};
    if (code === 200) {
      setPagination({
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
@@ -35,7 +35,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
      ...pagination,
      domainId: selectDomainId,
    });
-    const { list, pageSize, current, total } = data;
+    const { list, pageSize, current, total } = data || {};
    let resData: any = {};
    if (code === 200) {
      setPagination({
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ProjectList.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ProjectList.tsx
@@ -17,7 +17,7 @@ import { ISemantic } from '../data';

 const { Search } = Input;

-type ProjectListProps = {
+type DomainListProps = {
  selectDomainId: number;
  selectDomainName: string;
  domainList: ISemantic.IDomainItem[];
@@ -43,7 +43,7 @@ const projectTreeFlat = (projectTree: DataNode[], filterValue: string): DataNode
  return newProjectTree;
 };

-const ProjectListTree: FC<ProjectListProps> = ({
+const DomainListTree: FC<DomainListProps> = ({
  selectDomainId,
  domainList,
  createDomainBtnVisible = true,
@@ -184,7 +184,7 @@ const ProjectListTree: FC<ProjectListProps> = ({
  };

  return (
-    <div className={styles.projectList}>
+    <div className={styles.domainList}>
      <Row>
        <Col flex="1 1 200px">
          <Search
@@ -244,4 +244,4 @@ export default connect(
    selectDomainName,
    domainList,
  }),
-)(ProjectListTree);
+)(DomainListTree);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainTreeSelect.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainTreeSelect.tsx
@@ -0,0 +1,83 @@
+import { message, TreeSelect } from 'antd';
+import type { DataNode } from 'antd/lib/tree';
+import { useEffect, useState } from 'react';
+import type { FC } from 'react';
+import { connect } from 'umi';
+import type { Dispatch } from 'umi';
+import type { StateType } from '../model';
+import { getDomainList } from '../../SemanticModel/service';
+import { constructorClassTreeFromList, addPathInTreeData } from '../utils';
+import styles from './style.less';
+import { ISemantic } from '../data';
+
+type Props = {
+  value?: any;
+  onChange?: () => void;
+  treeSelectProps?: Record<string, any>;
+  domainList: ISemantic.IDomainItem[];
+  dispatch: Dispatch;
+};
+
+const DomainTreeSelect: FC<Props> = ({
+  value,
+  onChange,
+  treeSelectProps = {},
+  domainList,
+  dispatch,
+}) => {
+  const [domainTree, setDomainTree] = useState<DataNode[]>([]);
+
+  const initProjectTree = async () => {
+    const { code, data, msg } = await getDomainList();
+    if (code === 200) {
+      dispatch({
+        type: 'domainManger/setDomainList',
+        payload: { domainList: data },
+      });
+    } else {
+      message.error(msg);
+    }
+  };
+
+  useEffect(() => {
+    if (domainList.length === 0) {
+      initProjectTree();
+    }
+  }, []);
+
+  useEffect(() => {
+    const treeData = addPathInTreeData(constructorClassTreeFromList(domainList));
+    setDomainTree(treeData);
+  }, [domainList]);
+
+  return (
+    <div className={styles.domainTreeSelect}>
+      <TreeSelect
+        showSearch
+        style={{ width: '100%' }}
+        value={value}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder={'请选择主题域'}
+        allowClear
+        multiple
+        treeNodeFilterProp="title"
+        treeDefaultExpandAll
+        onChange={onChange}
+        treeData={domainTree}
+        {...treeSelectProps}
+      />
+    </div>
+  );
+};
+
+export default connect(
+  ({
+    domainManger: { selectDomainId, selectDomainName, domainList },
+  }: {
+    domainManger: StateType;
+  }) => ({
+    selectDomainId,
+    selectDomainName,
+    domainList,
+  }),
+)(DomainTreeSelect);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DefaultSettingForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DefaultSettingForm.tsx
@@ -33,8 +33,6 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
 ) => {
  const [form] = Form.useForm();
  const [metricListOptions, setMetricListOptions] = useState<any>([]);
-  const [unitState, setUnit] = useState<number | null>();
-  const [periodState, setPeriod] = useState<string>();
  const [dataItemListOptions, setDataItemListOptions] = useState<any>([]);
  const formatEntityData = formatRichEntityDataListToIds(entityData);
  const getFormValidateFields = async () => {
@@ -47,15 +45,10 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (

  useEffect(() => {
    form.resetFields();
-    setUnit(null);
-    setPeriod('');
    if (!entityData?.chatDefaultConfig) {
      return;
    }
    const { chatDefaultConfig, id } = formatEntityData;
-    const { period, unit } = chatDefaultConfig;
-    setUnit(unit);
-    setPeriod(period);
    form.setFieldsValue({
      ...chatDefaultConfig,
      id,
@@ -172,6 +165,7 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
        initialValues={{
          unit: 7,
          period: 'DAY',
+          timeMode: 'LAST',
        }}
      >
        <FormItem hidden={true} name="id" label="ID">
@@ -249,7 +243,6 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
            </FormItem> */}
          </>
        )}
-
        <FormItem
          label={
            <FormItemTitle
@@ -259,46 +252,39 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
          }
        >
          <Input.Group compact>
-            <span
-              style={{
-                display: 'inline-block',
-                lineHeight: '32px',
-                marginRight: '8px',
-              }}
-            >
-              {chatConfigType === ChatConfigType.DETAIL ? '前' : '最近'}
-            </span>
-            <InputNumber
-              value={unitState}
-              style={{ width: '120px' }}
-              onChange={(value) => {
-                setUnit(value);
-                form.setFieldValue('unit', value);
-              }}
-            />
-            <Select
-              value={periodState}
-              style={{ width: '100px' }}
-              onChange={(value) => {
-                form.setFieldValue('period', value);
-                setPeriod(value);
-              }}
-            >
-              <Option value="DAY">天</Option>
-              <Option value="WEEK">周</Option>
-              <Option value="MONTH">月</Option>
-              <Option value="YEAR">年</Option>
-            </Select>
+            {chatConfigType === ChatConfigType.DETAIL ? (
+              <span
+                style={{
+                  display: 'inline-block',
+                  lineHeight: '32px',
+                  marginRight: '8px',
+                }}
+              >
+                前
+              </span>
+            ) : (
+              <>
+                <FormItem name={'timeMode'} noStyle>
+                  <Select style={{ width: '90px' }}>
+                    <Option value="LAST">前</Option>
+                    <Option value="RECENT">最近</Option>
+                  </Select>
+                </FormItem>
+              </>
+            )}
+            <FormItem name={'unit'} noStyle>
+              <InputNumber style={{ width: '120px' }} />
+            </FormItem>
+            <FormItem name={'period'} noStyle>
+              <Select style={{ width: '90px' }}>
+                <Option value="DAY">天</Option>
+                <Option value="WEEK">周</Option>
+                <Option value="MONTH">月</Option>
+                <Option value="YEAR">年</Option>
+              </Select>
+            </FormItem>
          </Input.Group>
        </FormItem>
-
-        <FormItem name="unit" hidden={true}>
-          <InputNumber />
-        </FormItem>
-        <FormItem name="period" hidden={true}>
-          <Input />
-        </FormItem>
-
        <FormItem>
          <Button
            type="primary"
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionAndMetricVisibleModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionAndMetricVisibleModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Modal, message, Tabs } from 'antd';
+import { Modal, message, Tabs, Button } from 'antd';

 import { addDomainExtend, editDomainExtend } from '../../service';
 import DimensionMetricVisibleTransfer from './DimensionMetricVisibleTransfer';
@@ -40,6 +40,8 @@ const DimensionAndMetricVisibleModal: React.FC<Props> = ({
  const [knowledgeInfosMap, setKnowledgeInfosMap] = useState<IChatConfig.IKnowledgeInfosItemMap>(
    {},
  );
+
+  const [activeKey, setActiveKey] = useState<string>('visibleSetting');
  const formRef = useRef<any>();

  const [globalKnowledgeConfigInitialValues, setGlobalKnowledgeConfigInitialValues] =
@@ -200,10 +202,17 @@ const DimensionAndMetricVisibleModal: React.FC<Props> = ({
        title={settingTypeConfig.modalTitle}
        maskClosable={false}
        open={visible}
-        footer={renderFooter()}
+        footer={activeKey === 'visibleSetting' ? false : renderFooter()}
+        // footer={false}
        onCancel={onCancel}
      >
-        <Tabs items={tabItem} defaultActiveKey="visibleSetting" />
+        <Tabs
+          items={tabItem}
+          defaultActiveKey="visibleSetting"
+          onChange={(key) => {
+            setActiveKey(key);
+          }}
+        />
      </Modal>
    </>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx
@@ -1,4 +1,4 @@
-import { Table, Transfer, Checkbox, Button } from 'antd';
+import { Table, Transfer, Checkbox, Button, Tag } from 'antd';
 import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
 import type { TransferItem } from 'antd/es/transfer';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
@@ -9,7 +9,7 @@ import DimensionValueSettingModal from './DimensionValueSettingModal';
 import TransTypeTag from '../TransTypeTag';
 import { TransType } from '../../enum';
 import TableTitleTooltips from '../../components/TableTitleTooltips';
-
+import { SemanticNodeType } from '../../enum';
 interface RecordType {
  id: number;
  key: string;
@@ -19,8 +19,8 @@ interface RecordType {
 }

 type Props = {
-  knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap;
-  onKnowledgeInfosMapChange: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
+  knowledgeInfosMap?: IChatConfig.IKnowledgeInfosItemMap;
+  onKnowledgeInfosMapChange?: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
  [key: string]: any;
 };

@@ -56,7 +56,7 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
    onKnowledgeInfosMapChange?.(knowledgeMap);
  };

-  const rightColumns: ColumnsType<RecordType> = [
+  let rightColumns: ColumnsType<RecordType> = [
    {
      dataIndex: 'name',
      title: '名称',
@@ -65,7 +65,7 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
      dataIndex: 'type',
      width: 80,
      title: '类型',
-      render: (type) => {
+      render: (type: SemanticNodeType) => {
        return <TransTypeTag type={type} />;
      },
    },
@@ -78,11 +78,11 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
        />
      ),
      width: 120,
-      render: (_, record) => {
+      render: (_: any, record: RecordType) => {
        const { type, bizName } = record;
        return type === TransType.DIMENSION ? (
          <Checkbox
-            checked={knowledgeInfosMap[bizName]?.searchEnable}
+            checked={knowledgeInfosMap?.[bizName]?.searchEnable}
            onChange={(e: CheckboxChangeEvent) => {
              updateKnowledgeInfosMap(record, { searchEnable: e.target.checked });
            }}
@@ -98,18 +98,18 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
    {
      title: '操作',
      dataIndex: 'x',
-      render: (_, record) => {
+      render: (_: any, record: RecordType) => {
        const { type, bizName } = record;
        return type === TransType.DIMENSION ? (
          <Button
            style={{ padding: 0 }}
            key="editable"
            type="link"
-            disabled={!knowledgeInfosMap[bizName]?.searchEnable}
+            disabled={!knowledgeInfosMap?.[bizName]?.searchEnable}
            onClick={(event) => {
              setCurrentRecord(record);
              setCurrentDimensionSettingFormData(
-                knowledgeInfosMap[bizName]?.knowledgeAdvancedConfig,
+                knowledgeInfosMap?.[bizName]?.knowledgeAdvancedConfig,
              );
              setDimensionValueSettingModalVisible(true);
              event.stopPropagation();
@@ -137,6 +137,9 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
      },
    },
  ];
+  if (!knowledgeInfosMap) {
+    rightColumns = leftColumns;
+  }
  return (
    <>
      <Transfer {...restProps}>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTransfer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTransfer.tsx
@@ -1,4 +1,3 @@
-import { Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { IChatConfig } from '../../data';
 import DimensionMetricVisibleTableTransfer from './DimensionMetricVisibleTableTransfer';
@@ -10,11 +9,11 @@ interface RecordType {
 }

 type Props = {
-  knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap;
+  knowledgeInfosMap?: IChatConfig.IKnowledgeInfosItemMap;
  sourceList: any[];
  targetList: string[];
  titles?: string[];
-  onKnowledgeInfosMapChange: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
+  onKnowledgeInfosMapChange?: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
  onChange?: (params?: any) => void;
  transferProps?: Record<string, any>;
 };
@@ -75,20 +74,6 @@ const DimensionMetricVisibleTransfer: React.FC<Props> = ({
        }}
        targetKeys={targetKeys}
        onChange={handleChange}
-        render={(item) => (
-          <div style={{ display: 'flex' }}>
-            <span style={{ flex: '1' }}>{item.name}</span>
-            <span style={{ flex: '0 1 40px' }}>
-              {item.type === 'dimension' ? (
-                <Tag color="blue">{'维度'}</Tag>
-              ) : item.type === 'metric' ? (
-                <Tag color="orange">{'指标'}</Tag>
-              ) : (
-                <></>
-              )}
-            </span>
-          </div>
-        )}
        {...transferProps}
      />
    </div>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntityCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntityCreateForm.tsx
@@ -7,7 +7,7 @@ import { formLayout } from '@/components/FormHelper/utils';
 import styles from '../style.less';

 type Props = {
-  entityData?: { id: number; names: string[] };
+  domainData?: ISemantic.IDomainItem;
  dimensionList: ISemantic.IDimensionList;
  domainId: number;
  onSubmit: () => void;
@@ -16,7 +16,7 @@ type Props = {
 const FormItem = Form.Item;

 const EntityCreateForm: ForwardRefRenderFunction<any, Props> = (
-  { entityData, dimensionList, domainId, onSubmit },
+  { domainData, dimensionList, domainId, onSubmit },
  ref,
 ) => {
  const [form] = Form.useForm();
@@ -27,15 +27,15 @@ const EntityCreateForm: ForwardRefRenderFunction<any, Props> = (

  useEffect(() => {
    form.resetFields();
-    if (!entityData) {
+    if (!domainData?.entity) {
      return;
    }
-
+    const { entity } = domainData;
    form.setFieldsValue({
-      ...entityData,
-      name: entityData.names.join(','),
+      ...entity,
+      name: entity.names.join(','),
    });
-  }, [entityData]);
+  }, [domainData]);

  useImperativeHandle(ref, () => ({
    getFormValidateFields,
@@ -54,8 +54,8 @@ const EntityCreateForm: ForwardRefRenderFunction<any, Props> = (
  const saveEntity = async () => {
    const values = await form.validateFields();
    const { name } = values;
-
    const { code, msg, data } = await updateDomain({
+      ...domainData,
      entity: {
        ...values,
        names: name.split(','),
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySettingSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySettingSection.tsx
@@ -6,7 +6,7 @@ import type { StateType } from '../../model';
 import { getDomainDetail } from '../../service';
 import ProCard from '@ant-design/pro-card';
 import EntityCreateForm from './EntityCreateForm';
-import type { IChatConfig } from '../../data';
+import type { ISemantic } from '../../data';

 type Props = {
  dispatch: Dispatch;
@@ -14,9 +14,9 @@ type Props = {
 };

 const EntitySettingSection: React.FC<Props> = ({ domainManger }) => {
-  const { selectDomainId, dimensionList, metricList } = domainManger;
+  const { selectDomainId, dimensionList } = domainManger;

-  const [entityData, setEntityData] = useState<IChatConfig.IChatRichConfig>();
+  const [domainData, setDomainData] = useState<ISemantic.IDomainItem>();

  const entityCreateRef = useRef<any>({});

@@ -26,9 +26,7 @@ const EntitySettingSection: React.FC<Props> = ({ domainManger }) => {
    });

    if (code === 200) {
-      const { entity } = data;
-
-      setEntityData(entity);
+      setDomainData(data);

      return;
    }
@@ -52,7 +50,7 @@ const EntitySettingSection: React.FC<Props> = ({ domainManger }) => {
            <EntityCreateForm
              ref={entityCreateRef}
              domainId={Number(selectDomainId)}
-              entityData={entityData}
+              domainData={domainData}
              dimensionList={dimensionList}
              onSubmit={() => {
                queryDomainData();
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
@@ -20,6 +20,7 @@ import { getMeasureListByDomainId } from '../service';
 import { creatExprMetric, updateExprMetric } from '../service';
 import { ISemantic } from '../data';
 import { history } from 'umi';
+import { check } from 'prettier';

 export type CreateFormProps = {
  datasourceId?: number;
@@ -97,7 +98,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
    if (currentStep < 1) {
      forward();
    } else {
-      // onSubmit?.(submitForm);
      await saveMetric(submitForm);
    }
  };
@@ -244,7 +244,11 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
          name="isPercent"
          valuePropName="checked"
        >
-          <Switch />
+          <Switch
+            onChange={(checked) => {
+              form.setFieldValue(['dataFormat', 'needMultiply100'], checked);
+            }}
+          />
        </FormItem>
        {isPercentState && (
          <>
@@ -265,10 +269,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
                  title={'原始值是否乘以100'}
                  subTitle={'如 原始值0.001 ->展示值0.1% '}
                />
-                // <FormItemTitle
-                //   title={'仅添加百分号'}
-                //   subTitle={'开启后，会对原始数值直接加%，如0.02 -> 0.02%'}
-                // />
              }
              name={['dataFormat', 'needMultiply100']}
              valuePropName="checked"
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Form, Input, Switch, message } from 'antd';
-import SelectPartenr from '@/components/SelectPartner';
+import SelectPartner from '@/components/SelectPartner';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
 import { connect } from 'umi';
 import type { Dispatch } from 'umi';
@@ -110,7 +110,7 @@ const PermissionAdminForm: React.FC<Props> = ({ domainManger, onValuesChange })
          <>
            {APP_TARGET === 'inner' && (
              <FormItem name="viewOrgs" label="按组织">
-                <SelectPartenr
+                <SelectPartner
                  type="selectedDepartment"
                  treeSelectProps={{
                    placeholder: '请选择需要授权的部门',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateDrawer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateDrawer.tsx
@@ -6,7 +6,9 @@ import { createGroupAuth, updateGroupAuth } from '../../service';
 import PermissionCreateForm from './PermissionCreateForm';
 import type { StateType } from '../../model';
 import SqlEditor from '@/components/SqlEditor';
+import { TransType } from '../../enum';
 import DimensionMetricVisibleTransfer from '../Entity/DimensionMetricVisibleTransfer';
+import { wrapperTransTypeAndId } from '../Entity/utils';
 import styles from '../style.less';

 type Props = {
@@ -30,32 +32,10 @@ const PermissionCreateDrawer: React.FC<Props> = ({
  const { dimensionList, metricList } = domainManger;
  const [form] = Form.useForm();
  const basicInfoFormRef = useRef<any>(null);
-  const [sourceDimensionList, setSourceDimensionList] = useState<any[]>([]);
-  const [sourceMetricList, setSourceMetricList] = useState<any[]>([]);
  const [selectedDimensionKeyList, setSelectedDimensionKeyList] = useState<string[]>([]);
  const [selectedMetricKeyList, setSelectedMetricKeyList] = useState<string[]>([]);

-  useEffect(() => {
-    const list = dimensionList.reduce((highList: any[], item: any) => {
-      const { name, bizName, sensitiveLevel } = item;
-      if (sensitiveLevel === 2) {
-        highList.push({ id: bizName, name, type: 'dimension' });
-      }
-      return highList;
-    }, []);
-    setSourceDimensionList(list);
-  }, [dimensionList]);
-
-  useEffect(() => {
-    const list = metricList.reduce((highList: any[], item: any) => {
-      const { name, bizName, sensitiveLevel } = item;
-      if (sensitiveLevel === 2) {
-        highList.push({ id: bizName, name, type: 'metric' });
-      }
-      return highList;
-    }, []);
-    setSourceMetricList(list);
-  }, [metricList]);
+  const [selectedKeyList, setSelectedKeyList] = useState<string[]>([]);

  const saveAuth = async () => {
    const basicInfoFormValues = await basicInfoFormRef.current.formRef.validateFields();
@@ -103,9 +83,24 @@ const PermissionCreateDrawer: React.FC<Props> = ({
      dimensionFilterDescription,
      dimensionFilters: Array.isArray(dimensionFilters) ? dimensionFilters[0] || '' : '',
    });
+    const dimensionAuth = permissonData?.authRules?.[0]?.dimensions || [];
+    const metricAuth = permissonData?.authRules?.[0]?.metrics || [];
+    setSelectedDimensionKeyList(dimensionAuth);
+    setSelectedMetricKeyList(metricAuth);

-    setSelectedDimensionKeyList(permissonData?.authRules?.[0]?.dimensions || []);
-    setSelectedMetricKeyList(permissonData?.authRules?.[0]?.metrics || []);
+    const dimensionKeys = dimensionList.reduce((dimensionChangeList: string[], item: any) => {
+      if (dimensionAuth.includes(item.bizName)) {
+        dimensionChangeList.push(wrapperTransTypeAndId(TransType.DIMENSION, item.id));
+      }
+      return dimensionChangeList;
+    }, []);
+    const metricKeys = metricList.reduce((metricChangeList: string[], item: any) => {
+      if (metricAuth.includes(item.bizName)) {
+        metricChangeList.push(wrapperTransTypeAndId(TransType.METRIC, item.id));
+      }
+      return metricChangeList;
+    }, []);
+    setSelectedKeyList([...dimensionKeys, ...metricKeys]);
  }, [permissonData]);

  const renderFooter = () => {
@@ -138,7 +133,7 @@ const PermissionCreateDrawer: React.FC<Props> = ({
        footer={renderFooter()}
        onClose={onCancel}
      >
-        <div style={{ overflow: 'auto', margin: '0 auto', width: '1000px' }}>
+        <div style={{ overflow: 'auto', margin: '0 auto', width: '1200px' }}>
          <Space direction="vertical" style={{ width: '100%' }} size={20}>
            <ProCard title="基本信息" bordered>
              <PermissionCreateForm
@@ -148,15 +143,37 @@ const PermissionCreateDrawer: React.FC<Props> = ({
              />
            </ProCard>

-            <ProCard title="列权限" bordered>
+            <ProCard title="列权限" bordered tooltip="仅对敏感度为高的指标/维度进行授权">
              <DimensionMetricVisibleTransfer
                titles={['未授权维度/指标', '已授权维度/指标']}
-                sourceList={[...sourceDimensionList, ...sourceMetricList]}
-                targetList={[...selectedDimensionKeyList, ...selectedMetricKeyList]}
-                onChange={(bizNameList: string[]) => {
+                sourceList={[
+                  ...dimensionList.map((item) => {
+                    const transType = TransType.DIMENSION;
+                    const { id } = item;
+                    return {
+                      ...item,
+                      transType,
+                      key: wrapperTransTypeAndId(transType, id),
+                    };
+                  }),
+                  ...metricList.map((item) => {
+                    const transType = TransType.METRIC;
+                    const { id } = item;
+                    return {
+                      ...item,
+                      transType,
+                      key: wrapperTransTypeAndId(transType, id),
+                    };
+                  }),
+                ]}
+                targetList={selectedKeyList}
+                onChange={(newTargetKeys: string[]) => {
+                  setSelectedKeyList(newTargetKeys);
                  const dimensionKeyChangeList = dimensionList.reduce(
                    (dimensionChangeList: string[], item: any) => {
-                      if (bizNameList.includes(item.bizName)) {
+                      if (
+                        newTargetKeys.includes(wrapperTransTypeAndId(TransType.DIMENSION, item.id))
+                      ) {
                        dimensionChangeList.push(item.bizName);
                      }
                      return dimensionChangeList;
@@ -165,7 +182,9 @@ const PermissionCreateDrawer: React.FC<Props> = ({
                  );
                  const metricKeyChangeList = metricList.reduce(
                    (metricChangeList: string[], item: any) => {
-                      if (bizNameList.includes(item.bizName)) {
+                      if (
+                        newTargetKeys.includes(wrapperTransTypeAndId(TransType.METRIC, item.id))
+                      ) {
                        metricChangeList.push(item.bizName);
                      }
                      return metricChangeList;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateForm.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useImperativeHandle, forwardRef } from 'react';
 import { Form, Input } from 'antd';
 import type { ForwardRefRenderFunction } from 'react';
-import SelectPartenr from '@/components/SelectPartner';
+import SelectPartner from '@/components/SelectPartner';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
 import { formLayout } from '@/components/FormHelper/utils';
 import styles from '../style.less';
@@ -54,7 +54,7 @@ const PermissionCreateForm: ForwardRefRenderFunction<any, Props> = (
        </FormItem>
        {APP_TARGET === 'inner' && (
          <FormItem name="authorizedDepartmentIds" label="按组织">
-            <SelectPartenr
+            <SelectPartner
              type="selectedDepartment"
              treeSelectProps={{
                placeholder: '请选择需要授权的部门',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionTable.tsx
@@ -6,7 +6,7 @@ import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import type { StateType } from '../../model';
 import { getGroupAuthInfo, removeGroupAuth } from '../../service';
-import { getDepartmentTree } from '@/components/SelectPartner/service';
+import { getOrganizationTree } from '@/components/SelectPartner/service';
 import { getAllUser } from '@/components/SelectTMEPerson/service';
 import PermissionCreateDrawer from './PermissionCreateDrawer';
 import { findDepartmentTree } from '@/pages/SemanticModel/utils';
@@ -52,7 +52,7 @@ const PermissionTable: React.FC<Props> = ({ domainManger }) => {
  }, [selectDomainId]);

  const queryDepartmentData = async () => {
-    const { code, data } = await getDepartmentTree();
+    const { code, data } = await getOrganizationTree();
    if (code === 200 || code === '0') {
      setDepartmentTreeData(data);
    }
@@ -120,7 +120,7 @@ const PermissionTable: React.FC<Props> = ({ domainManger }) => {
      render: (_, record: any) => {
        const { authorizedUsers = [] } = record;
        const personNameList = tmePerson.reduce((enNames: string[], item: any) => {
-          const hasPerson = authorizedUsers.includes(item.enName);
+          const hasPerson = authorizedUsers.includes(item.name);
          if (hasPerson) {
            enNames.push(item.displayName);
          }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
@@ -95,7 +95,11 @@
  }
 }

-.projectList {
+.domainTreeSelect {
+  width: 300px;
+}
+
+.domainList {
  display: flex;
  flex-direction: column;
  width: 400px;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
@@ -89,6 +89,7 @@ export declare namespace ISemantic {
    admins?: string[];
    adminOrgs?: any[];
    isOpen?: number;
+    entity?: { entityId: number; names: string[] };
    dimensionCnt?: number;
    metricCnt?: number;
  }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
@@ -1,7 +1,11 @@
 import request from 'umi-request';

+const getRunningEnv = () => {
+  return window.location.pathname.includes('/chatSetting/') ? 'chat' : 'semantic';
+};
+
 export function getDomainList(): Promise<any> {
-  if (window.RUNNING_ENV === 'chat') {
+  if (getRunningEnv() === 'chat') {
    return request.get(`${process.env.CHAT_API_BASE_URL}conf/domainList`);
  }
  return request.get(`${process.env.API_BASE_URL}domain/getDomainList`);
@@ -40,10 +44,11 @@ export function updateDatasource(data: any): Promise<any> {
 }

 export function getDimensionList(data: any): Promise<any> {
+  const { domainId } = data;
  const queryParams = {
-    data: { current: 1, pageSize: 999999, ...data },
+    data: { current: 1, pageSize: 999999, ...data, ...(domainId ? { domainIds: [domainId] } : {}) },
  };
-  if (window.RUNNING_ENV === 'chat') {
+  if (getRunningEnv() === 'chat') {
    return request.post(`${process.env.CHAT_API_BASE_URL}conf/dimension/page`, queryParams);
  }
  return request.post(`${process.env.API_BASE_URL}dimension/queryDimension`, queryParams);
@@ -62,10 +67,11 @@ export function updateDimension(data: any): Promise<any> {
 }

 export function queryMetric(data: any): Promise<any> {
+  const { domainId } = data;
  const queryParams = {
-    data: { current: 1, pageSize: 999999, ...data },
+    data: { current: 1, pageSize: 999999, ...data, ...(domainId ? { domainIds: [domainId] } : {}) },
  };
-  if (window.RUNNING_ENV === 'chat') {
+  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);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
@@ -2,7 +2,7 @@ import type { API } from '@/services/API';
 import { ISemantic } from './data';
 import type { DataNode } from 'antd/lib/tree';

-export const changeTreeData = (treeData: API.ProjectList, auth?: boolean): DataNode[] => {
+export const changeTreeData = (treeData: API.DomainList, auth?: boolean): DataNode[] => {
  return treeData.map((item: any) => {
    const newItem: DataNode = {
      ...item,
@@ -14,7 +14,7 @@ export const changeTreeData = (treeData: API.ProjectList, auth?: boolean): DataN
  });
 };

-export const addPathInTreeData = (treeData: API.ProjectList, loopPath: any[] = []): any => {
+export const addPathInTreeData = (treeData: API.DomainList, loopPath: any[] = []): any => {
  return treeData.map((item: any) => {
    const { children, parentId = [] } = item;
    const path = loopPath.slice();
@@ -41,6 +41,7 @@ export const constructorClassTreeFromList = (list: any[], parentId: number = 0)
        nodeItem.children = children;
      }
      nodeItem.key = nodeItem.id;
+      nodeItem.value = nodeItem.id;
      nodeItem.title = nodeItem.name;
      nodeList.push(nodeItem);
    }
@@ -49,7 +50,7 @@ export const constructorClassTreeFromList = (list: any[], parentId: number = 0)
  return tree;
 };

-export const treeParentKeyLists = (treeData: API.ProjectList): string[] => {
+export const treeParentKeyLists = (treeData: API.DomainList): string[] => {
  let keys: string[] = [];
  treeData.forEach((item: any) => {
    if (item.children && item.children.length > 0) {
@@ -67,10 +68,10 @@ export const findDepartmentTree: any = (treeData: any[], projectId: string) => {
  }
  let newStepList: any[] = [];
  const departmentData = treeData.find((item) => {
-    if (item.subDepartments) {
-      newStepList = newStepList.concat(item.subDepartments);
+    if (item.subOrganizations) {
+      newStepList = newStepList.concat(item.subOrganizations);
    }
-    return item.key === projectId;
+    return item.id === projectId;
  });
  if (departmentData) {
    return departmentData;