[improvement][semantic-fe] UI optimization for metric details page. (#610)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.

* [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information.

* [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience.

* [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas.

* [improvement][semantic-fe] Changing the line type for canvas connections.

* [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless".

* [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model.

* [improvement][semantic-fe] Updating the logic for the fieldName.

* [improvement][semantic-fe] Adjusting the position of the metrics tab.

* [improvement][semantic-fe] Changing the 字段名称 to 英文名称.

* [improvement][semantic-fe] Fix metric measurement deletion.

* [improvement][semantic-fe] UI optimization for metric details page.

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx

@@ -251,7 +251,7 @@ const TrendChart: React.FC<Props> = ({
       <Skeleton
         className={styles.chart}
         style={{ height, display: loading ? 'table' : 'none' }}
-        paragraph={{ rows: height && height > 300 ? 15 : 6 }}
+        paragraph={{ rows: height && height > 300 ? 10 : 6 }}
       />
       <div
         className={styles.chart}

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx

@@ -5,23 +5,12 @@ import {
   getDrillDownDimension,
   getDimensionList,
 } from '@/pages/SemanticModel/service';
-import {
-  InfoCircleOutlined,
-  LineChartOutlined,
-  TableOutlined,
-  DownloadOutlined,
-  PoweroffOutlined,
-} from '@ant-design/icons';
+import { InfoCircleOutlined, DownloadOutlined, PoweroffOutlined } from '@ant-design/icons';
 import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
 import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
 import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
 import MDatePicker from '@/components/MDatePicker';
-import {
-  DateRangeType,
-  DateSettingType,
-  DynamicAdvancedConfigType,
-  DatePeriodType,
-} from '@/components/MDatePicker/type';
+import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type';
 import { getDatePickerDynamicInitialValues } from '@/components/MDatePicker/utils';
 import StandardFormRow from '@/components/StandardFormRow';
 import MetricTable from './Table';
@@ -29,9 +18,11 @@ import { ColumnConfig } from '../data';
 import dayjs from 'dayjs';
 import { ISemantic } from '../../data';
 import { DateFieldMap } from '@/pages/SemanticModel/constant';
+import ProCard from '@ant-design/pro-card';
+
+import styles from '../style.less';
 
 const FormItem = Form.Item;
-const { Option } = Select;
 
 type Props = {
   metircData?: ISemantic.IMetricItem;
@@ -191,11 +182,11 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
       initDimensionData(metircData);
       setDrillDownDimensions(metircData?.relateDimension?.drillDownDimensions || []);
     }
-  }, [metircData?.id, periodDate]);
+  }, [metircData, periodDate]);
 
   return (
-    <div style={{ backgroundColor: '#fff', marginTop: 20 }}>
-      <div style={{ marginBottom: 25 }}>
+    <div className={styles.metricTrendSection}>
+      <div className={styles.sectionBox}>
         <Row>
           <Col flex="1 1 200px">
             <Form
@@ -276,159 +267,83 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
               </StandardFormRow>
             </Form>
           </Col>
-          <Col flex="0 1">
-            <Space>
-              {metircData?.hasAdminRes && (
-                <Button
-                  type="primary"
-                  key="addDimension"
-                  onClick={() => {
-                    setMetricRelationModalOpenState(true);
-                  }}
-                >
-                  <Space>
-                    下钻维度配置
-                    <Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
-                      <InfoCircleOutlined />
-                    </Tooltip>
-                  </Space>
-                </Button>
-              )}
-
-              <Space.Compact block>
-                <Button
-                  type="primary"
-                  key="download"
-                  loading={downloadLoding}
-                  disabled={downloadBtnDisabledState}
-                  onClick={() => {
-                    getMetricTrendData({ download: true, ...queryParams });
-                  }}
-                >
-                  <Space>
-                    <DownloadOutlined />
-                    下载
-                  </Space>
-                </Button>
-
-                <Tooltip title="开启转置">
-                  <Button
-                    type={transformState ? 'primary' : 'default'}
-                    icon={<PoweroffOutlined />}
-                    onClick={() => {
-                      setTransformState(!transformState);
-                    }}
-                  />
-                </Tooltip>
-              </Space.Compact>
-            </Space>
-          </Col>
+          <Col flex="0 1" />
         </Row>
       </div>
       {authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
-      <Row style={{ marginBottom: 20 }}>
-        <Col flex="1 1 300px">
-          <Radio.Group
-            size="small"
-            buttonStyle="solid"
-            options={[
-              {
-                label: (
-                  <Tooltip title="折线图">
-                    <LineChartOutlined />
-                  </Tooltip>
-                ),
-                value: 'chart',
-              },
-              {
-                label: (
-                  <Tooltip title="表格">
-                    <TableOutlined />
-                  </Tooltip>
-                ),
-                value: 'table',
-              },
-            ]}
-            onChange={(e) => {
-              setChartType(e.target.value);
-            }}
-            value={chartType}
-            optionType="button"
+      <div className={styles.sectionBox}>
+        <ProCard size="small" title="数据趋势">
+          <TrendChart
+            data={metricTrendData}
+            isPer={
+              metricColumnConfig?.dataFormatType === 'percent' &&
+              metricColumnConfig?.dataFormat?.needMultiply100 === false
+                ? true
+                : false
+            }
+            isPercent={
+              metricColumnConfig?.dataFormatType === 'percent' &&
+              metricColumnConfig?.dataFormat?.needMultiply100 === true
+                ? true
+                : false
+            }
+            rowNumber={rowNumber}
+            fields={indicatorFields.current}
+            loading={metricTrendLoading}
+            dateFieldName={periodDate.dateField}
+            groupByDimensionFieldName={groupByDimensionFieldName}
+            height={400}
+            renderType="clear"
+            decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
           />
-          {/* <Space>
-            <Select
-              style={{ minWidth: 150, maxWidth: 200 }}
-              options={showDimensionOptions}
-              value={groupByDimensionFieldName}
-              showSearch
-              filterOption={(input, option) =>
-                ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
-              }
-              placeholder="展示维度切换"
-              onChange={(value) => {
-                setGroupByDimensionFieldName(value);
-              }}
+        </ProCard>
+      </div>
+
+      <div className={styles.sectionBox}>
+        <ProCard
+          size="small"
+          title="源数据"
+          collapsible
+          extra={
+            <Space.Compact block>
+              <Button
+                size="middle"
+                type="primary"
+                key="download"
+                loading={downloadLoding}
+                disabled={downloadBtnDisabledState}
+                onClick={() => {
+                  getMetricTrendData({ download: true, ...queryParams });
+                }}
+              >
+                <Space>
+                  <DownloadOutlined />下 载
+                </Space>
+              </Button>
+
+              <Tooltip title="开启转置">
+                <Button
+                  size="middle"
+                  type={transformState ? 'primary' : 'default'}
+                  icon={<PoweroffOutlined />}
+                  onClick={() => {
+                    setTransformState(!transformState);
+                  }}
+                />
+              </Tooltip>
+            </Space.Compact>
+          }
+        >
+          <div style={{ minHeight: '528px' }}>
+            <MetricTable
+              loading={metricTrendLoading}
+              columnConfig={tableColumnConfig}
+              dataSource={metricTrendData}
+              dateFieldName={periodDate.dateField}
+              metricFieldName={indicatorFields.current?.[0]?.column}
             />
-          </Space> */}
-        </Col>
-        <Col flex="0 1 100px">
-          <Space>
-            <Select
-              defaultValue={rowNumber}
-              style={{
-                width: 120,
-                display:
-                  Array.isArray(queryParams.dimensionGroup) &&
-                  queryParams.dimensionGroup.length > 0 &&
-                  chartType === 'chart'
-                    ? 'block'
-                    : 'none',
-              }}
-              onChange={(value) => {
-                setRowNumber(value);
-              }}
-            >
-              <Option value={5}>前5项</Option>
-              <Option value={10}>前10项</Option>
-              <Option value={15}>前15项</Option>
-              <Option value={20}>前20项</Option>
-            </Select>
-          </Space>
-        </Col>
-      </Row>
-      {chartType === 'chart' && (
-        <TrendChart
-          data={metricTrendData}
-          isPer={
-            metricColumnConfig?.dataFormatType === 'percent' &&
-            metricColumnConfig?.dataFormat?.needMultiply100 === false
-              ? true
-              : false
-          }
-          isPercent={
-            metricColumnConfig?.dataFormatType === 'percent' &&
-            metricColumnConfig?.dataFormat?.needMultiply100 === true
-              ? true
-              : false
-          }
-          rowNumber={rowNumber}
-          fields={indicatorFields.current}
-          loading={metricTrendLoading}
-          dateFieldName={periodDate.dateField}
-          groupByDimensionFieldName={groupByDimensionFieldName}
-          height={500}
-          renderType="clear"
-          decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
-        />
-      )}
-      <div style={{ display: chartType === 'table' ? 'block' : 'none', marginBottom: 45 }}>
-        <MetricTable
-          loading={metricTrendLoading}
-          columnConfig={tableColumnConfig}
-          dataSource={metricTrendData}
-          dateFieldName={periodDate.dateField}
-          metricFieldName={indicatorFields.current?.[0]?.column}
-        />
+          </div>
+        </ProCard>
       </div>
 
       <DimensionAndMetricRelationModal