Add dashboard jump and open pop-up window to customize size

frontend/src/app/components/FormGenerator/Customize/Interaction/DialogSizeConfigDrillThrough.tsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useState } from 'react';
+import { InputNumber, message, Radio, Select, Tooltip } from 'antd';
+import { InteractionDialogType } from '../../constants';
+import { I18nTranslator } from './types';
+
+interface DialogSizeConfigProps {
+  value: any;
+  recordId: string;
+  onRuleChange: (id: string, prop: string, value: any) => void;
+  translate: I18nTranslator['translate'];
+}
+
+const DialogSizeConfigDrillThrough: React.FC<DialogSizeConfigProps> = ({
+  value,
+  recordId,
+  onRuleChange,
+  translate: t,
+}) => {
+  const [selectedRatio, setSelectedRatio] = useState<string>('middle');
+  useEffect(() => {
+    // 根据传入的 value 来判断选择哪个大小
+    if (value.dialogSize) {
+      const { weight, height, contentHeight } = value.dialogSize;
+      // 根据 weight, height 和 contentHeight 来判断
+      for (const size in ratioSize) {
+        if (
+          ratioSize[size].weight === weight &&
+          ratioSize[size].height === height &&
+          ratioSize[size].contentHeight === contentHeight
+        ) {
+          setSelectedRatio(size); // 设置对应的 size
+          break;
+        }
+      }
+    }
+  }, [value.dialogSize]);
+
+  const ratioType = [
+    {
+      value: 'small',
+      label: t('drillThrough.rule.dialogSizeConfig.ratioType.small'),
+    },
+    {
+      value: 'middle',
+      label: t('drillThrough.rule.dialogSizeConfig.ratioType.middle'),
+    },
+    {
+      value: 'big',
+      label: t('drillThrough.rule.dialogSizeConfig.ratioType.big'),
+    },
+  ];
+
+  const ratioSize = {
+    small: {
+      weight: 70,
+      height: 500,
+      contentHeight: 500,
+    },
+    middle: {
+      weight: 80,
+      height: 600,
+      contentHeight: 600,
+    },
+    big: {
+      weight: 90,
+      height: 800,
+      contentHeight: 770,
+    },
+  };
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px', // 控制每个元素之间的间距
+        marginTop: 10,
+      }}
+    >
+      {/* Radio.Group */}
+      <Radio.Group
+        size="small"
+        style={{
+          display: 'flex',
+          flexDirection: 'column', // 垂直排列
+          flexShrink: 0, // 防止被挤压
+          marginLeft: 5,
+        }}
+        value={value.configType}
+        onChange={e => {
+          if (e.target.value === InteractionDialogType.Ratio) {
+            onRuleChange(recordId, 'dialogSize', {
+              dialogSize: ratioSize[selectedRatio],
+              configType: e.target.value,
+            });
+          } else {
+            onRuleChange(recordId, 'dialogSize', {
+              dialogSize: ratioSize['middle'],
+              configType: e.target.value,
+            });
+          }
+        }}
+      >
+        <Radio value={InteractionDialogType.Ratio}>
+          {t('drillThrough.rule.dialogSizeConfig.ratio')}
+        </Radio>
+        <Radio value={InteractionDialogType.Customize}>
+          {t('drillThrough.rule.dialogSizeConfig.customize')}
+        </Radio>
+      </Radio.Group>
+      {value.configType === InteractionDialogType.Ratio && (
+        <Select
+          style={{ width: 150 }}
+          options={ratioType}
+          value={selectedRatio} // 设置默认值
+          onChange={newValue =>
+            onRuleChange(recordId, 'dialogSize', {
+              dialogSize: ratioSize[newValue],
+              configType: InteractionDialogType.Ratio,
+            })
+          }
+        />
+      )}
+      {value.configType === InteractionDialogType.Customize && (
+        <>
+          <Tooltip placement="topLeft" title={t('drillThrough.rule.dialogSizeConfig.widthRatio')}>
+            <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+              <InputNumber
+                style={{ width: 65 }}
+                value={value.dialogSize?.weight}
+                placeholder={t('drillThrough.rule.dialogSizeConfig.widthRatio')}
+                onBlur={e => {
+                  const v = e.target.value;
+                  const weight = Number(v);
+                  if (
+                    !isNaN(weight) &&
+                    weight > 0 &&
+                    weight <= 100 // 校验规则
+                  ) {
+                    onRuleChange(recordId, 'dialogSize', {
+                      dialogSize: {
+                        ...value.dialogSize,
+                        weight,
+                      },
+                      configType: InteractionDialogType.Customize,
+                    });
+                  } else {
+                    message.warn(t('drillThrough.rule.dialogSizeConfig.widthTips'));
+                  }
+                }}
+              />
+              <span
+                style={{
+                  border: '1px solid #d9d9d9',
+                  backgroundColor: '#f0f0f0',
+                  padding: '0 8px',
+                  height: '32px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  fontSize: '14px',
+                }}
+              >
+                %
+              </span>
+            </div>
+          </Tooltip>
+          <Tooltip placement="topLeft" title={t('drillThrough.rule.dialogSizeConfig.dialogHeight')}>
+            <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+              <InputNumber
+                style={{ width: 75 }}
+                value={value.dialogSize?.height}
+                placeholder={t('drillThrough.rule.dialogSizeConfig.dialogHeight')}
+                onBlur={e => {
+                  const v = e.target.value;
+                  const height = Number(v);
+                  const { dialogSize } = value;
+                  if (!isNaN(height) && height > 0) {
+                    onRuleChange(recordId, 'dialogSize', {
+                      dialogSize: {
+                        ...dialogSize,
+                        contentHeight: Math.min(
+                          dialogSize.contentHeight,
+                          height,
+                        ),
+                        height,
+                      },
+                      configType: InteractionDialogType.Customize,
+                    });
+                  } else {
+                    message.warn(t('drillThrough.rule.dialogSizeConfig.heightTips'));
+                  }
+                }}
+              />
+              <span
+                style={{
+                  border: '1px solid #d9d9d9',
+                  backgroundColor: '#f0f0f0',
+                  padding: '0 8px',
+                  height: '32px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  fontSize: '14px',
+                }}
+              >
+                PX
+              </span>
+            </div>
+          </Tooltip>
+          <Tooltip placement="topLeft" title={t('drillThrough.rule.dialogSizeConfig.contentHeight')}>
+            <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+              <InputNumber
+                style={{ width: 75 }}
+                value={value.dialogSize?.contentHeight}
+                placeholder={t('drillThrough.rule.dialogSizeConfig.contentHeight')}
+                onBlur={e => {
+                  const v = e.target.value;
+                  const contentHeight = Number(v);
+                  const dialogHeight = value.dialogSize?.height || 0;
+                  if (!isNaN(contentHeight) && contentHeight > 0) {
+                    if (contentHeight > dialogHeight) {
+                      message.warn(t('drillThrough.rule.dialogSizeConfig.contentTips2'));
+                    } else {
+                      onRuleChange(recordId, 'dialogSize', {
+                        dialogSize: {
+                          ...value.dialogSize,
+                          contentHeight,
+                        },
+                        configType: InteractionDialogType.Customize,
+                      });
+                    }
+                  } else {
+                    message.warn(t('drillThrough.rule.dialogSizeConfig.contentTips1'));
+                  }
+                }}
+              />
+              <span
+                style={{
+                  border: '1px solid #d9d9d9',
+                  backgroundColor: '#f0f0f0',
+                  padding: '0 8px',
+                  height: '32px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  fontSize: '14px',
+                }}
+              >
+                PX
+              </span>
+            </div>
+          </Tooltip>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default DialogSizeConfigDrillThrough;

frontend/src/app/components/FormGenerator/Customize/Interaction/DrillThroughPanel.tsx

@@ -26,6 +26,7 @@ import { ItemLayoutProps } from '../../types';
 import { itemLayoutComparer } from '../../utils';
 import RuleList from './RuleList';
 import { DrillThroughSetting, InteractionRule } from './types';
+import { InteractionDialogType } from '../../constants';
 
 const DrillThroughPanel: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
   ({ ancestors, translate: t = title => title, data, onChange, context }) => {
@@ -37,6 +38,14 @@ const DrillThroughPanel: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
       const newRules = (drillThroughRules || []).concat([
         {
           id: uuidv4(),
+          dialogSize: {
+            configType: InteractionDialogType.Ratio,
+            dialogSize: {
+              weight: 80,
+              height: 600,
+              contentHeight: 600,
+            },
+          },
         },
       ]);
       handleDrillThroughSettingChange(newRules);
@@ -72,12 +81,7 @@ const DrillThroughPanel: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
 
     return (
       <StyledDrillThroughPanel direction="vertical">
-        <Form
-          labelCol={{ offset: 2, span: 2 }}
-          wrapperCol={{ span: 18 }}
-          layout="horizontal"
-          size="middle"
-        >
+        <Form labelCol={{ span: 24 }} size="middle">
           <Form.Item
             label={t('drillThrough.rule.title')}
             name="rule"

frontend/src/app/components/FormGenerator/Customize/Interaction/RuleList.tsx

@@ -16,20 +16,17 @@
  * limitations under the License.
  */
 
-import { Button, Input, Select, Table } from 'antd';
+import { Button, Dropdown, Form, Input, Select, Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import ChartDataView from 'app/types/ChartDataView';
-import { FC } from 'react';
-import styled from 'styled-components/macro';
-import {
-  InteractionAction,
-  InteractionCategory,
-  InteractionMouseEvent,
-} from '../../constants';
+import { FC, useState } from 'react';
+import { InteractionAction, InteractionCategory, InteractionDialogType, InteractionMouseEvent } from '../../constants';
 import JumpToChart from './JumpToChart';
 import JumpToDashboard from './JumpToDashboard';
 import JumpToUrl from './JumpToUrl';
 import { I18nTranslator, InteractionRule, VizType } from './types';
+import DialogSizeConfigDrillThrough from './DialogSizeConfigDrillThrough';
+import styled from 'styled-components/macro';
 
 const RuleList: FC<
   {
@@ -41,6 +38,16 @@ const RuleList: FC<
   } & I18nTranslator
 > = ({ rules, vizs, dataview, onRuleChange, onDeleteRule, translate: t }) => {
   const tableColumnStyle = { width: '150px' };
+  const [dropdownVisibleMap, setDropdownVisibleMap] = useState<
+    Record<string, boolean>
+  >({});
+
+  const toggleDropdownVisible = (id: string, visible: boolean) => {
+    setDropdownVisibleMap(prev => ({
+      ...prev,
+      [id]: visible,
+    }));
+  };
 
   const columns: ColumnsType<InteractionRule> = [
     {
@@ -150,12 +157,52 @@ const RuleList: FC<
     {
       title: t('drillThrough.rule.header.operation'),
       key: 'operation',
+      dataIndex: 'dialogSize',
       width: 50,
       fixed: 'right',
-      render: (_, record) => (
-        <Button type="link" onClick={() => onDeleteRule(record.id)}>
-          {t('drillThrough.rule.operation.delete')}
-        </Button>
+      render: (value, record) => (
+        <>
+          <Dropdown
+            trigger={['click']}
+            visible={dropdownVisibleMap[record.id] || false}
+            onVisibleChange={visible =>
+              toggleDropdownVisible(record.id, visible)
+            }
+            disabled={record.action !== InteractionAction.Dialog}
+            overlay={() => (
+              <Form style={{ width: 440 }}>
+                <DialogSizeConfigDrillThrough
+                  value={
+                    value
+                      ? value
+                      : {
+                        configType: InteractionDialogType.Ratio,
+                        dialogSize: {
+                          weight: 80,
+                          height: 600,
+                          contentHeight: 600,
+                        },
+                      }
+                  }
+
+                  recordId={record.id}
+                  onRuleChange={onRuleChange}
+                  translate={t}
+                />
+              </Form>
+            )}
+            placement={'bottomLeft'}
+            arrow>
+            <Button type={'link'}>
+              {t('drillThrough.rule.operation.dialogSizeConfig')}
+            </Button>
+          </Dropdown>
+          <Button
+            type={'link'}
+            onClick={() => onDeleteRule(record.id)}>
+            {t('drillThrough.rule.operation.delete')}
+          </Button>
+        </>
       ),
     },
   ];