[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-15 14:36:47 +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/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();