n20-common-lib 3.1.4 → 3.1.6

package/src/components/Pivot/index.vue

@@ -2,65 +2,17 @@
   <Dialog class="n20-pivot-dialog" width="95%" max-dialog :visible.sync="visibleC" title="数据透视分析中心">
     <div class="n20-pivot-container">
       <!-- 左侧报表清单 -->
-      <div class="pivot-sidebar-left" :class="{ collapsed: isLeftSidebarCollapsed }">
-        <div class="sidebar-header">
-          <span class="sidebar-title">我的报表清单</span>
-          <div class="add-report-btn" @click="handleAddReport" title="新建">
-            <i class="v3-icon-plus"></i>
-          </div>
-        </div>
-
-        <div class="report-list">
-          <div
-            v-for="(report, index) in reportList"
-            :key="report.id"
-            class="report-item"
-            :class="{ active: currentReportIndex === index, editing: editingReportId === report.id }"
-            @click="handleSelectReport(index)"
-            @mouseenter="hoveredReportId = report.id"
-            @mouseleave="hoveredReportId = null"
-          >
-            <i :class="getChartTypeIcon(report.chartType)" class="report-icon"></i>
-            <span v-if="editingReportId !== report.id" class="report-name">{{ report.name }}</span>
-            <input
-              v-else
-              v-model="editingReportName"
-              class="report-name-input"
-              type="text"
-              @click.stop
-              @blur="handleSaveRename"
-              @keyup.enter="handleSaveRename"
-              @keyup.esc="handleCancelRename"
-            />
-            <div
-              v-if="editingReportId !== report.id"
-              class="report-more"
-              :class="{ visible: hoveredReportId === report.id || activeMenuReportId === report.id }"
-              @click.stop="handleToggleMenu(report.id)"
-            >
-              <i class="v3-icon-more"></i>
-              <div v-if="activeMenuReportId === report.id" class="report-menu">
-                <div class="report-menu-item" @click.stop="handleStartRename(report)">
-                  <i class="v3-icon-edit"></i>
-                  <span>重命名</span>
-                </div>
-                <div class="report-menu-item delete" @click.stop="handleDeleteReport(report)">
-                  <i class="v3-icon-delete"></i>
-                  <span>删除</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="scroll-bar-indicator"
-          :class="{ collapsed: isLeftSidebarCollapsed }"
-          @click="handleScrollBarIndicator"
-        >
-          <i :class="isLeftSidebarCollapsed ? 'v3-icon-right' : 'v3-icon-left'"></i>
-        </div>
-      </div>
+      <ReportSidebar
+        ref="reportSidebar"
+        :report-list="reportList"
+        :current-index="currentReportIndex"
+        :is-collapsed="isLeftSidebarCollapsed"
+        @select="handleSelectReport"
+        @add="handleAddReport"
+        @toggle-collapse="handleToggleLeftSidebar"
+        @rename="handleRenameReport"
+        @delete="handleDeleteReport"
+      />
 
       <!-- 主内容区域 -->
       <div
@@ -68,336 +20,137 @@
         :class="{ 'left-collapsed': isLeftSidebarCollapsed, 'right-collapsed': isRightSidebarCollapsed }"
       >
         <!-- 内容头部工具栏 -->
-        <div class="main-toolbar">
-          <div class="toolbar-left">
-            <div class="toolbar-left-top">
-              <h2 class="report-title">{{ currentReport.name }}</h2>
-              <div class="add-to-home-btn" @click="handleAddToHome">
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                  <path d="M7 1V13M1 7H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-                </svg>
-                <span>添加到首页</span>
-              </div>
-            </div>
-            <div class="report-stats">
-              <span class="stat-item">计算耗时：{{ calculateTime }} ms</span>
-              <span class="stat-divider"></span>
-              <span class="stat-item">数据条数：{{ dataCount }}</span>
-            </div>
-          </div>
-
-          <div class="toolbar-right">
-            <ViewToggle
-              v-model="viewMode"
-              :options="viewModeOptions"
-              :disabled="isCrossMode"
-              @change="handleViewModeChange"
-            />
-
-            <div class="action-buttons">
-              <div class="action-btn" @click="handleRefresh" title="刷新">
-                <i class="n20-icon-shuaxin"></i>
-              </div>
-              <div class="action-btn" @click="handleMore" title="更多">
-                <i class="v3-icon-more"></i>
-              </div>
-            </div>
-          </div>
-        </div>
+        <MainToolbar
+          ref="mainToolbar"
+          :report-name="currentReport.name"
+          :calculate-time="calculateTime"
+          :data-count="rawDataCount"
+          :view-mode="viewMode"
+          :view-mode-options="viewModeOptions"
+          :is-cross-mode="isCrossMode"
+          :is-right-sidebar-collapsed="isRightSidebarCollapsed"
+          @view-mode-change="handleViewModeChange"
+          @refresh="handleRefresh"
+          @config="handleConfig"
+          @export="handleExport"
+          @add-to-home="handleAddToHome"
+          @delete-report="handleDeleteCurrentReport"
+        />
 
         <!-- 内容区域 -->
         <div class="main-content">
           <!-- 图表视图 -->
-          <div v-if="viewMode === 'chart'" class="chart-view">
-            <div v-if="hasData" ref="chartContainer" class="chart-container"></div>
-            <div v-else class="empty-state">
-              <div class="empty-icon">
-                <svg width="100" height="100" viewBox="0 0 100 100" fill="none">
-                  <circle cx="50" cy="50" r="45" stroke="#E5E6EB" stroke-width="2" />
-                  <path
-                    d="M30 60V45L40 55M45 50H55M55 50H65M55 50V40"
-                    stroke="#E5E6EB"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                  <circle cx="55" cy="30" r="8" stroke="#E5E6EB" stroke-width="2" />
-                  <path d="M55 38V42M55 48V50" stroke="#E5E6EB" stroke-width="2" stroke-linecap="round" />
-                </svg>
-              </div>
-              <p class="empty-text">暂无数据</p>
-            </div>
-          </div>
+          <ChartView
+            v-if="viewMode === 'chart'"
+            ref="chartView"
+            :has-data="hasData"
+            :data-count="dataCount"
+            :dimension-label="getFirstDimensionLabel"
+            :unit-label="getChartUnitLabel"
+            :chart-option="chartOption"
+          />
 
           <!-- 表格视图 -->
-          <div v-else class="table-view">
-            <div v-if="hasData" class="table-container">
-              <table class="pivot-table">
-                <thead>
-                  <tr>
-                    <th v-for="col in tableColumns" :key="col.key">{{ col.title }}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(row, index) in tableData" :key="index">
-                    <td v-for="col in tableColumns" :key="col.key">
-                      {{ row[col.key] }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div v-else class="empty-state">
-              <div class="empty-icon">
-                <svg width="100" height="100" viewBox="0 0 100 100" fill="none">
-                  <rect x="15" y="20" width="70" height="60" rx="4" stroke="#E5E6EB" stroke-width="2" />
-                  <path d="M15 35H85" stroke="#E5E6EB" stroke-width="2" />
-                  <path d="M40 35V80" stroke="#E5E6EB" stroke-width="2" />
-                </svg>
-              </div>
-              <p class="empty-text">暂无数据</p>
-            </div>
-          </div>
+          <TableView
+            v-else
+            ref="tableView"
+            :has-data="hasData"
+            :data-count="dataCount"
+            :dimension-label="getFirstDimensionLabel"
+            :is-cross-mode="isCrossMode"
+            :row-dimension-label="getRowDimensionLabel"
+            :column-dimension-label="getColumnDimensionLabel"
+            :table-columns="tableColumns"
+            :cross-table-columns="crossTableColumns"
+            :table-data="paginatedTableData"
+            :total-count="dataCount"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-size-options="pageSizeOptions"
+            :total-pages="totalPages"
+            @prev-page="handlePrevPage"
+            @next-page="handleNextPage"
+            @jump-page="handleJumpToPage"
+            @page-size-change="handlePageSizeChange"
+          />
         </div>
       </div>
 
       <!-- 右侧维度配置 -->
-      <div class="pivot-sidebar-right" :class="{ collapsed: isRightSidebarCollapsed }">
-        <div class="sidebar-header">
-          <template v-if="!isRightSidebarCollapsed">
-            <i class="v3-icon-move-right sidebar-header-collapse" @click="handleToggleRightSidebar"></i>
-            <span class="sidebar-title">维度配置</span>
-          </template>
-        </div>
-
-        <div class="config-form">
-          <!-- 报表名称 -->
-          <div class="form-item">
-            <label class="form-label">报表标题</label>
-
-            <div class="input-wrapper">
-              <input class="form-input" type="text" v-model="currentReport.name" placeholder="请输入报表名称" />
-            </div>
-          </div>
-          <!-- 统计类型 -->
-          <div class="form-item">
-            <label class="form-label">统计类型</label>
-
-            <div class="radio-group">
-              <ViewToggle
-                v-model="currentReport.statType"
-                :itemWidth="120"
-                :options="totalModeOptions"
-                @change="handleStatTypeChange"
-              />
-            </div>
-          </div>
-
-          <!-- 展示形式 -->
-          <div v-if="!isCrossMode" class="form-item">
-            <label class="form-label">展示形式</label>
-            <div class="select-wrapper" @click="showChartTypeDropdown = !showChartTypeDropdown">
-              <div class="select-value">
-                <i :class="getChartTypeIcon(currentReport.chartType)" class="report-icon"></i>
-                <span>{{ getChartTypeLabel(currentReport.chartType) }}</span>
-              </div>
-              <svg class="select-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none">
-                <path
-                  d="M2 3L5 7L8 3"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-              <div v-if="showChartTypeDropdown" class="dropdown-menu">
-                <div
-                  v-for="type in chartTypes"
-                  :key="type.value"
-                  class="dropdown-item"
-                  :class="{ active: currentReport.chartType === type.value }"
-                  @click.stop="handleChartTypeChange(type.value)"
-                >
-                  {{ type.label }}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-divider"></div>
-
-          <!-- 分组维度 -->
-          <div class="form-item">
-            <label class="form-label">
-              分组维度
-              <svg class="label-tip" width="12" height="12" viewBox="0 0 12 12" fill="none">
-                <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1" />
-                <path d="M6 5V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-                <circle cx="6" cy="3.5" r="0.5" fill="currentColor" />
-              </svg>
-            </label>
-            <div class="select-wrapper" @click="showDimensionDropdown = !showDimensionDropdown">
-              <div class="select-value">
-                <span v-if="currentReport.dimensions.length === 0" class="placeholder">请选择</span>
-                <span v-else>{{ currentReport.dimensions.join(', ') }}</span>
-              </div>
-              <svg class="select-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none">
-                <path
-                  d="M2 3L5 7L8 3"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-              <div v-if="showDimensionDropdown" class="dropdown-menu dimension-dropdown">
-                <div
-                  v-for="dim in availableDimensions"
-                  :key="dim.key"
-                  class="dropdown-item checkbox-item"
-                  @click.stop="handleDimensionToggle(dim.key)"
-                >
-                  <div class="checkbox" :class="{ checked: currentReport.dimensions.includes(dim.key) }">
-                    <svg
-                      v-if="currentReport.dimensions.includes(dim.key)"
-                      width="10"
-                      height="10"
-                      viewBox="0 0 10 10"
-                      fill="none"
-                    >
-                      <path
-                        d="M2 5L4 7L8 3"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </div>
-                  <span>{{ dim.label }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-divider"></div>
-
-          <!-- 计算指标 -->
-          <div class="form-item">
-            <div class="form-label-row">
-              <label class="form-label">
-                计算指标
-                <svg class="label-tip" width="12" height="12" viewBox="0 0 12 12" fill="none">
-                  <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1" />
-                  <path d="M6 5V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-                  <circle cx="6" cy="3.5" r="0.5" fill="currentColor" />
-                </svg>
-              </label>
-              <div class="aggregate-dropdown" @click="showAggregateDropdown = !showAggregateDropdown">
-                <span>{{ getAggregateLabel(currentReport.aggregateType) }}</span>
-                <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-                  <path
-                    d="M2 3L5 7L8 3"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-                <div v-if="showAggregateDropdown" class="dropdown-menu aggregate-dropdown-menu">
-                  <div
-                    v-for="agg in aggregateTypes"
-                    :key="agg.value"
-                    class="dropdown-item"
-                    :class="{ active: currentReport.aggregateType === agg.value }"
-                    @click.stop="handleAggregateChange(agg.value)"
-                  >
-                    {{ agg.label }}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="select-wrapper" @click="showMetricDropdown = !showMetricDropdown">
-              <div class="select-value">
-                <span v-if="currentReport.metrics.length === 0" class="placeholder">请选择</span>
-                <span v-else>{{ currentReport.metrics.join(', ') }}</span>
-              </div>
-              <div class="select-tag" v-if="currentReport.metrics.length > 0">
-                {{ getAggregateLabel(currentReport.aggregateType) }}
-              </div>
-              <svg class="select-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none">
-                <path
-                  d="M2 3L5 7L8 3"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-              <div v-if="showMetricDropdown" class="dropdown-menu">
-                <div
-                  v-for="metric in availableMetrics"
-                  :key="metric.key"
-                  class="dropdown-item checkbox-item"
-                  @click.stop="handleMetricToggle(metric.key)"
-                >
-                  <div class="checkbox" :class="{ checked: currentReport.metrics.includes(metric.key) }">
-                    <svg
-                      v-if="currentReport.metrics.includes(metric.key)"
-                      width="10"
-                      height="10"
-                      viewBox="0 0 10 10"
-                      fill="none"
-                    >
-                      <path
-                        d="M2 5L4 7L8 3"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </div>
-                  <span>{{ metric.label }}</span>
-                </div>
-              </div>
-            </div>
-
-            <div class="add-field-btn" @click="handleAddMetric">
-              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                <path d="M7 1V13M1 7H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-              </svg>
-              <span>添加字段</span>
-            </div>
-          </div>
-        </div>
-      </div>
+      <ConfigSidebar
+        ref="configSidebar"
+        :is-collapsed="isRightSidebarCollapsed"
+        :report-name="currentReport.name"
+        :stat-type="currentReport.statType"
+        :stat-type-options="totalModeOptions"
+        :chart-type="currentReport.chartType"
+        :chart-types="chartTypes"
+        :is-cross-mode="isCrossMode"
+        :view-mode="viewMode"
+        :selected-dimension="currentReport.selectedDimension"
+        :row-dimension="currentReport.rowDimension"
+        :column-dimension="currentReport.columnDimension"
+        :metrics="validMetrics"
+        :available-dimensions="availableDimensions"
+        :available-metrics="availableMetrics"
+        :available-metrics-for-add="availableMetricsForAdd"
+        :global-aggregate-type="getGlobalAggregateType()"
+        :aggregate-types="aggregateTypes"
+        @toggle-collapse="handleToggleRightSidebar"
+        @name-change="handleNameChange"
+        @stat-type-change="handleStatTypeChange"
+        @chart-type-change="handleChartTypeChange"
+        @dimension-select="handleDimensionSelect"
+        @row-dimension-change="handleRowDimensionChange"
+        @column-dimension-change="handleColumnDimensionChange"
+        @metric-aggregate-change="handleMetricAggregateChange"
+        @global-aggregate-change="handleGlobalAggregateChange"
+        @add-metric="handleAddSpecificMetric"
+        @remove-metric="handleRemoveMetric"
+      />
     </div>
   </Dialog>
 </template>
 
 <script>
-import Dialog from '../Dialog/index.vue'
-import ViewToggle from '../ViewToggle/index.vue'
 import XEUtils from 'xe-utils'
-import importG from '../../utils/importGlobal.js'
+import Dialog from '../Dialog/index.vue'
+import ReportSidebar from './ReportSidebar.vue'
+import MainToolbar from './MainToolbar.vue'
+import ChartView from './ChartView.vue'
+import TableView from './TableView.vue'
+import ConfigSidebar from './ConfigSidebar.vue'
 
 const STORAGE_KEY = 'pivot_report_configs'
+const DEBOUNCE_DELAY = 300
+
+// 防抖函数
+function debounce(func, wait) {
+  let timeout
+  return function (...args) {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func.apply(this, args), wait)
+  }
+}
 
 export default {
   name: 'Pivot',
   components: {
     Dialog,
-    ViewToggle
+    ReportSidebar,
+    MainToolbar,
+    ChartView,
+    TableView,
+    ConfigSidebar
   },
   props: {
+    // 对话框可见性
     visible: {
       type: Boolean,
       default: false
     },
     // 数据源
-    dataSource: {
+    data: {
       type: Array,
       default: () => []
     },
@@ -406,46 +159,51 @@ export default {
       type: Array,
       default: () => []
     },
-    // 组件宽度
-    width: {
-      type: [Number, String],
-      default: 1360
+    // 行维度字段
+    rowFields: {
+      type: Array,
+      default: () => []
+    },
+    // 列维度字段
+    colFields: {
+      type: Array,
+      default: () => []
+    },
+    // 计算指标字段
+    valueFields: {
+      type: Array,
+      default: () => []
     },
-    // 组件高度
-    height: {
-      type: [Number, String],
-      default: 820
+    // 图表类型
+    chartType: {
+      type: String,
+      default: 'bar',
+      validator: (val) => ['bar', 'line', 'pie', 'area'].includes(val)
     }
   },
 
   data() {
     return {
+      // 错误状态
+      error: null,
+      // 加载状态
+      isProcessing: false,
       // 报表列表
       reportList: [],
       // 当前选中的报表索引
       currentReportIndex: 0,
-      // 视图模式: chart / table
-      viewMode: 'chart',
       // 计算耗时
       calculateTime: 0,
       // 数据条数
       dataCount: 0,
-      // 图表实例
-      chartInstance: null,
-      // 下拉框显示状态
-      showCustomAggregateDropdown: false,
       // 左侧边栏是否折叠
       isLeftSidebarCollapsed: false,
       // 右侧边栏是否折叠
       isRightSidebarCollapsed: false,
-      // 报表项悬停ID
-      hoveredReportId: null,
-      // 当前显示菜单的报表ID
-      activeMenuReportId: null,
-      // 正在编辑的报表ID
-      editingReportId: null,
-      // 编辑中的报表名称
-      editingReportName: '',
+      // 分页状态
+      currentPage: 1,
+      pageSize: 10,
+      pageSizeOptions: [10, 20, 50, 100],
       // 视图模式选项
       viewModeOptions: [
         { label: '图表视图', value: 'chart' },
@@ -474,6 +232,16 @@ export default {
   },
 
   computed: {
+    // 数据源兼容性处理
+    actualData() {
+      return this.data || []
+    },
+
+    // 原始数据条数（用于工具栏显示）
+    rawDataCount() {
+      return this.actualData.length
+    },
+
     visibleC: {
       get() {
         return this.visible
@@ -483,6 +251,7 @@ export default {
         return v
       }
     },
+
     // 当前报表配置
     currentReport() {
       if (this.reportList.length === 0) {
@@ -496,143 +265,390 @@ export default {
       return this.currentReport.statType === 'cross'
     },
 
+    // 视图模式：从报表配置中读取，交叉统计强制为 table
+    viewMode() {
+      // 交叉统计模式强制使用表格视图
+      if (this.isCrossMode) {
+        return 'table'
+      }
+      // 从报表配置中读取，默认为 chart
+      return this.currentReport.viewMode || 'chart'
+    },
+
     // 是否有数据
     hasData() {
       return this.processedData.length > 0
     },
 
-    // 可用维度
+    // 当前报表有效的指标列表
+    validMetrics() {
+      return (this.currentReport.metrics || []).filter((m) => m && m.prop)
+    },
+
+    // 可用维度（根据数据源值类型判断，过滤掉 checkbox 和无 prop 的列）
     availableDimensions() {
-      return this.columns.filter((col) => col.type !== 'number' && col.type !== 'date')
+      return this.columns.filter((col) => {
+        // 过滤掉 checkbox 类型和没有 prop 的列
+        if (col.type === 'checkbox' || !col.prop) return false
+        // 数值类型不作为维度
+        return this.getColumnType(col.prop) !== 'number'
+      })
     },
 
-    // 可用指标
+    // 可用指标（根据数据源值类型判断，过滤掉 checkbox 和无 prop 的列）
     availableMetrics() {
-      return this.columns.filter((col) => col.type === 'number')
+      return this.columns.filter((col) => {
+        // 过滤掉 checkbox 类型和没有 prop 的列
+        if (col.type === 'checkbox' || !col.prop) return false
+        // 仅数值类型作为指标
+        return this.getColumnType(col.prop) === 'number'
+      })
+    },
+
+    // 可添加的指标
+    availableMetricsForAdd() {
+      const selectedProps = (this.currentReport.metrics || []).filter((m) => m && m.prop).map((m) => m.prop)
+      return this.availableMetrics.filter((m) => !selectedProps.includes(m.prop))
     },
 
     // 处理后的数据
     processedData() {
       const startTime = performance.now()
-      const data = this.dataSource
-      const result = []
+      this.error = null
+      this.isProcessing = true
 
-      if (!data || data.length === 0) {
-        this.calculateTime = 0
-        this.dataCount = 0
-        return []
-      }
+      try {
+        const data = this.actualData
+        const result = []
+
+        if (!data || data.length === 0) {
+          this.calculateTime = 0
+          this.dataCount = 0
+          this.isProcessing = false
+          return []
+        }
 
-      const { dimensions, metrics, aggregateType, chartType } = this.currentReport
+        // 交叉统计模式
+        if (this.isCrossMode) {
+          const { rowDimension, columnDimension, metrics: rawMetrics } = this.currentReport
+          const metrics = (rawMetrics || []).filter((m) => m && m.prop)
 
-      if (dimensions.length === 0 || metrics.length === 0) {
-        this.calculateTime = Math.round(performance.now() - startTime)
-        this.dataCount = data.length
-        return []
-      }
+          if (!rowDimension || !columnDimension || metrics.length === 0) {
+            this.calculateTime = Math.round(performance.now() - startTime)
+            this.dataCount = data.length
+            this.isProcessing = false
+            return []
+          }
 
-      // 按维度分组
-      const groupedData = XEUtils.groupBy(data, dimensions)
-
-      // 计算聚合值
-      for (const key in groupedData) {
-        const group = groupedData[key]
-        const row = {}
-
-        // 设置维度值
-        if (dimensions.length === 1) {
-          row[dimensions[0]] = key
-        } else {
-          const keyParts = key.split(',')
-          dimensions.forEach((dim, i) => {
-            row[dim] = keyParts[i]
-          })
-        }
+          // 使用枚举显示值进行分组
+          const groupedByRow = XEUtils.groupBy(data, (item) => this.getEnumDisplayValue(item, rowDimension))
+
+          for (const rowKey in groupedByRow) {
+            const rowGroup = groupedByRow[rowKey]
+            const row = {}
+
+            row[rowDimension] = rowKey
+            row._rowKey = rowKey
+
+            const groupedByColumn = XEUtils.groupBy(rowGroup, (item) => this.getEnumDisplayValue(item, columnDimension))
+
+            for (const colKey in groupedByColumn) {
+              const colGroup = groupedByColumn[colKey]
+
+              metrics.forEach((metric) => {
+                const metricProp = metric.prop
+                const values = colGroup.map((item) => parseFloat(item[metricProp]) || 0)
+                const colMetricKey = `${colKey}_${metricProp}`
+
+                switch (metric.aggregateType) {
+                  case 'sum':
+                    row[colMetricKey] = XEUtils.sum(values)
+                    break
+                  case 'count':
+                    row[colMetricKey] = values.length
+                    break
+                  case 'avg':
+                    row[colMetricKey] = XEUtils.mean(values)
+                    break
+                  case 'max':
+                    row[colMetricKey] = XEUtils.max(values)
+                    break
+                  case 'min':
+                    row[colMetricKey] = XEUtils.min(values)
+                    break
+                  default:
+                    row[colMetricKey] = XEUtils.sum(values)
+                }
+              })
+            }
+
+            row._groupCount = rowGroup.length
+            row._groupKey = rowKey
 
-        // 计算指标值
-        metrics.forEach((metric) => {
-          const values = group.map((item) => parseFloat(item[metric]) || 0)
-          switch (aggregateType) {
-            case 'sum':
-              row[metric] = XEUtils.sum(values)
-              break
-            case 'count':
-              row[metric] = values.length
-              break
-            case 'avg':
-              row[metric] = XEUtils.mean(values)
-              break
-            case 'max':
-              row[metric] = XEUtils.max(values)
-              break
-            case 'min':
-              row[metric] = XEUtils.min(values)
-              break
-            default:
-              row[metric] = XEUtils.sum(values)
+            result.push(row)
           }
+
+          this.calculateTime = Math.round(performance.now() - startTime)
+          this.dataCount = result.length
+          this.isProcessing = false
+
+          return result
+        }
+
+        // 分组统计模式
+        const { selectedDimension, metrics: rawMetrics } = this.currentReport
+        const metrics = (rawMetrics || []).filter((m) => m && m.prop)
+
+        if (!selectedDimension || metrics.length === 0) {
+          this.calculateTime = Math.round(performance.now() - startTime)
+          this.dataCount = data.length
+          this.isProcessing = false
+          return []
+        }
+
+        // 使用枚举显示值进行分组（单维度）
+        const groupedData = XEUtils.groupBy(data, (item) => {
+          return this.getEnumDisplayValue(item, selectedDimension)
         })
 
-        result.push(row)
-      }
+        for (const key in groupedData) {
+          const group = groupedData[key]
+          const row = {}
+
+          row[selectedDimension] = key
+
+          metrics.forEach((metric) => {
+            const metricProp = metric.prop
+            const values = group.map((item) => parseFloat(item[metricProp]) || 0)
+            switch (metric.aggregateType) {
+              case 'sum':
+                row[metricProp] = XEUtils.sum(values)
+                break
+              case 'count':
+                row[metricProp] = values.length
+                break
+              case 'avg':
+                row[metricProp] = XEUtils.mean(values)
+                break
+              case 'max':
+                row[metricProp] = XEUtils.max(values)
+                break
+              case 'min':
+                row[metricProp] = XEUtils.min(values)
+                break
+              default:
+                row[metricProp] = XEUtils.sum(values)
+            }
+          })
 
-      this.calculateTime = Math.round(performance.now() - startTime)
-      this.dataCount = result.length
+          row._groupCount = group.length
+          row._groupKey = key
+
+          result.push(row)
+        }
 
-      return result
+        this.calculateTime = Math.round(performance.now() - startTime)
+        this.dataCount = result.length
+        this.isProcessing = false
+
+        return result
+      } catch (err) {
+        console.error('数据透视计算失败:', err)
+        this.error = {
+          code: 'AGGREGATION_ERROR',
+          message: err.message || '数据计算过程中发生错误',
+          stack: err.stack
+        }
+        this.calculateTime = 0
+        this.dataCount = 0
+        this.isProcessing = false
+        return []
+      }
     },
 
     // 表格列定义
     tableColumns() {
+      if (this.isCrossMode) {
+        return this.crossTableColumns
+      }
       const cols = []
-      const { dimensions, metrics } = this.currentReport
+      const { selectedDimension, metrics: rawMetrics } = this.currentReport
+      const metrics = (rawMetrics || []).filter((m) => m && m.prop)
 
-      dimensions.forEach((dim) => {
-        const colDef = this.columns.find((c) => c.key === dim)
+      // 维度列
+      if (selectedDimension) {
+        const colDef = this.columns.find((c) => c.prop === selectedDimension)
         cols.push({
-          key: dim,
-          title: colDef ? colDef.label : dim
+          key: selectedDimension,
+          title: colDef ? colDef.label : selectedDimension,
+          type: 'dimension',
+          width: '37.5%'
         })
-      })
+      }
 
+      // 指标列
+      const totalMetricWidth = 62.5
+      const metricWidth = metrics.length > 0 ? totalMetricWidth / metrics.length + '%' : null
       metrics.forEach((metric) => {
-        const colDef = this.columns.find((c) => c.key === metric)
+        const colDef = this.columns.find((c) => c.prop === metric.prop)
         cols.push({
-          key: metric,
-          title: colDef ? colDef.label : metric
+          key: metric.prop,
+          title: colDef ? colDef.label : metric.prop,
+          type: 'metric',
+          width: metricWidth,
+          aggregateType: metric.aggregateType
         })
       })
 
       return cols
     },
 
-    // 表格数据
-    tableData() {
-      return this.processedData
+    // 交叉表列定义（支持多级表头）
+    crossTableColumns() {
+      const { rowDimension, columnDimension, metrics: rawMetrics } = this.currentReport
+      const metrics = (rawMetrics || []).filter((m) => m && m.prop)
+      if (!rowDimension || !columnDimension || metrics.length === 0) return []
+
+      const cols = []
+
+      // 行维度列（第一列）
+      const rowDimDef = this.columns.find((c) => c.prop === rowDimension)
+      cols.push({
+        key: rowDimension,
+        title: rowDimDef ? rowDimDef.label : rowDimension,
+        type: 'dimension',
+        isPrimary: true
+      })
+
+      // 获取列维度的唯一值，使用 getEnumDisplayValue 处理枚举和对象类型
+      const uniqueColumnValues = [
+        ...new Set(
+          this.actualData.map((item) => this.getEnumDisplayValue(item, columnDimension))
+        )
+      ]
+
+      // 如果有多个指标，使用多级表头结构
+      if (metrics.length > 1) {
+        // 每个列维度值作为一个父列
+        uniqueColumnValues.forEach((colValue) => {
+          const safeColValue = String(colValue)
+          const children = metrics.map((metric) => {
+            const metricDef = this.columns.find((c) => c.prop === metric.prop)
+            const colMetricKey = `${safeColValue}_${metric.prop}`
+            return {
+              key: colMetricKey,
+              title: metricDef ? metricDef.label : metric.prop,
+              type: 'metric',
+              aggregateType: metric.aggregateType,
+              columnValue: colValue,
+              metricKey: metric.prop
+            }
+          })
+          cols.push({
+            key: `group_${safeColValue}`,
+            title: colValue,
+            type: 'group',
+            children
+          })
+        })
+      } else {
+        // 单个指标时，使用原来的扁平结构
+        uniqueColumnValues.forEach((colValue) => {
+          metrics.forEach((metric) => {
+            const metricDef = this.columns.find((c) => c.prop === metric.prop)
+            const safeColValue = String(colValue)
+            const colMetricKey = `${safeColValue}_${metric.prop}`
+            cols.push({
+              key: colMetricKey,
+              title: `${colValue} - ${metricDef ? metricDef.label : metric.prop}`,
+              type: 'metric',
+              aggregateType: metric.aggregateType,
+              columnValue: colValue,
+              metricKey: metric.prop
+            })
+          })
+        })
+      }
+
+      return cols
+    },
+
+    // 分页后的表格数据
+    paginatedTableData() {
+      const allData = this.processedData
+      if (!allData || allData.length === 0) return []
+
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      return allData.slice(start, end)
+    },
+
+    // 总页数
+    totalPages() {
+      const total = this.dataCount
+      if (!total || total === 0) return 1
+      return Math.ceil(total / this.pageSize)
+    },
+
+    // 图表单位标签
+    getChartUnitLabel() {
+      const metrics = (this.currentReport.metrics || []).filter((m) => m && m.prop)
+      if (metrics.length === 0) return ''
+      const firstMetric = this.columns.find((c) => c.prop === metrics[0].prop)
+      return firstMetric ? `${firstMetric.label}（人民币）` : ''
+    },
+
+    // 获取第一个维度标签
+    getFirstDimensionLabel() {
+      const dim = this.currentReport.selectedDimension
+      if (!dim) return '未选择'
+      const dimDef = this.columns.find((c) => c.prop === dim)
+      return dimDef ? dimDef.label : dim
+    },
+
+    // 获取行维度标签（交叉统计用）
+    getRowDimensionLabel() {
+      const dim = this.currentReport.rowDimension
+      if (!dim) return '未选择'
+      const dimDef = this.columns.find((c) => c.prop === dim)
+      return dimDef ? dimDef.label : dim
+    },
+
+    // 获取列维度标签（交叉统计用）
+    getColumnDimensionLabel() {
+      const dim = this.currentReport.columnDimension
+      if (!dim) return '未选择'
+      const dimDef = this.columns.find((c) => c.prop === dim)
+      return dimDef ? dimDef.label : dim
     },
 
     // 图表配置
     chartOption() {
       if (!this.hasData) return {}
 
-      const { chartType, dimensions, metrics, aggregateType } = this.currentReport
+      const { chartType, selectedDimension, metrics: rawMetrics } = this.currentReport
+      const metrics = (rawMetrics || []).filter((m) => m && m.prop)
       const data = this.processedData
 
-      // 获取标签和数值
-      const labels = data.map((row) => row[dimensions[0]] || '')
-      const labelCol = this.columns.find((c) => c.key === dimensions[0])
-      const labelName = labelCol ? labelCol.label : dimensions[0]
+      const labels = data.map((row) => row[selectedDimension] || '')
+
+      const gridConfig = {
+        left: '3%',
+        right: '4%',
+        bottom: '15%',
+        top: '10%',
+        containLabel: true
+      }
 
       if (chartType === 'pie') {
-        // 饼图配置
-        const metric = metrics[0] || ''
-        const metricCol = this.columns.find((c) => c.key === metric)
-        const metricName = metricCol ? metricCol.label : metric
+        const metricProp = metrics[0]?.prop || ''
+        const metricCol = this.columns.find((c) => c.prop === metricProp)
+        const metricName = metricCol ? metricCol.label : metricProp
 
         return {
           tooltip: {
             trigger: 'item',
-            formatter: `{b}: {c} ({d}%)`
+            formatter: '{b}: {c} ({d}%)'
           },
           legend: {
             orient: 'horizontal',
@@ -662,25 +678,24 @@ export default {
                 }
               },
               data: data.map((row) => ({
-                name: row[dimensions[0]],
-                value: row[metric]
+                name: row[selectedDimension],
+                value: row[metricProp]
               }))
             }
           ],
-          color: ['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#5856D6', '#AF52DE', '#00C7BE', '#FF2D55']
+          color: ['#165DFF', '#14C9C9', '#F7BA1E', '#F53F3F', '#86909C', '#00B42A', '#FF7D00', '#F5319D']
         }
       }
 
-      // 柱状图/折线图配置
-      const series = metrics.map((metric, index) => {
-        const metricCol = this.columns.find((c) => c.key === metric)
-        const metricName = metricCol ? metricCol.label : metric
+      const series = metrics.map((metric) => {
+        const metricCol = this.columns.find((c) => c.prop === metric.prop)
+        const metricName = metricCol ? metricCol.label : metric.prop
 
         return {
           name: metricName,
           type: chartType === 'line' ? 'line' : 'bar',
-          data: data.map((row) => row[metric]),
-          barMaxWidth: 32,
+          data: data.map((row) => row[metric.prop]),
+          barMaxWidth: 24,
           smooth: true
         }
       })
@@ -688,40 +703,197 @@ export default {
       return {
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
+          backgroundColor: '#fff',
+          borderColor: '#e5e6eb',
+          borderWidth: 1,
+          padding: [12, 12],
+          textStyle: {
+            color: '#1d2129'
+          },
+          extraCssText: 'box-shadow: 0px 8px 10px rgba(0,0,0,0.1); border-radius: 4px;',
+          formatter: (params) => {
+            const title = params[0].axisValue
+            const dataIndex = params[0].dataIndex
+            const rowData = this.processedData[dataIndex] || {}
+            const groupCount = rowData._groupCount || 0
+            let html = `<div style="font-size:14px;font-weight:500;margin-bottom:8px;color:#1d2129;">${title}</div>`
+            params.forEach((p) => {
+              const color = p.color
+              const value =
+                typeof p.value === 'number' ? p.value.toLocaleString('en-US', { minimumFractionDigits: 2 }) : p.value
+              html += `<div style="display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:4px;">`
+              html += `<div style="display:flex;align-items:center;gap:4px;">`
+              html += `<span style="display:inline-block;width:8px;height:3px;background:${color};"></span>`
+              html += `<span style="font-size:12px;color:#4e5969;font-family:'PingFang SC',sans-serif;">${p.seriesName}</span>`
+              html += `</div>`
+              html += `<div style="display:flex;align-items:center;gap:8px;">`
+              html += `<span style="font-size:12px;color:#1d2129;font-weight:600;font-family:'Open Sans',sans-serif;">${value}</span>`
+              html += `<span style="font-size:12px;color:#4e5969;font-family:'PingFang SC',sans-serif;">${groupCount} 笔</span>`
+              html += `</div>`
+              html += `</div>`
+            })
+            return html
           }
         },
         legend: {
           data: series.map((s) => s.name),
-          bottom: 10,
-          left: 'center'
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '15%',
-          top: '10%',
-          containLabel: true
+          top: 0,
+          right: 0,
+          itemWidth: 8,
+          itemHeight: 3,
+          textStyle: {
+            fontSize: 12,
+            color: '#4e5969',
+            fontFamily: "'PingFang SC', sans-serif"
+          }
         },
+        grid: gridConfig,
         xAxis: {
           type: 'category',
           data: labels,
           axisLabel: {
             interval: 0,
-            rotate: labels.length > 6 ? 30 : 0
+            rotate: labels.length > 6 ? 30 : 0,
+            color: '#86909c',
+            fontSize: 12
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#e5e6eb'
+            }
+          },
+          axisTick: {
+            alignWithLabel: true,
+            lineStyle: {
+              color: '#e5e6eb'
+            }
           }
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLabel: {
+            color: '#86909c',
+            fontSize: 12,
+            formatter: (value) => {
+              if (value >= 1000000) {
+                return (value / 1000000).toFixed(0) + ',000,000.00'
+              }
+              return value.toLocaleString('en-US', { minimumFractionDigits: 2 })
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#e5e6eb',
+              type: [4, 4]
+            }
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
         },
         series,
-        color: ['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#5856D6']
+        color: ['#165DFF', '#14C9C9', '#F7BA1E', '#F53F3F', '#86909C']
       }
     }
   },
 
   watch: {
+    // 弹窗打开时重新加载数据
+    visible(newVal) {
+      if (newVal) {
+        // 弹窗打开时重新加载持久化数据
+        this.loadFromStorage()
+        // 如果没有报表则新建
+        if (this.reportList.length === 0) {
+          this.addNewReport()
+        }
+        // 初始化图表
+        if (this.viewMode === 'chart') {
+          this.$nextTick(() => {
+            this.initChart()
+          })
+        }
+      } else {
+        // 弹窗关闭时保存数据
+        this.saveToStorage()
+      }
+    },
+
+    actualData: {
+      handler(newData) {
+        if (newData && newData.length > 0) {
+          this.currentPage = 1
+          this.error = null
+          if (this.viewMode === 'chart') {
+            this.$nextTick(() => {
+              this.initChart()
+            })
+          }
+        }
+      },
+      deep: true
+    },
+
+    columns: {
+      handler(newColumns) {
+        if (newColumns && newColumns.length > 0) {
+          // 仅在首次初始化或没有配置时调用
+          if (!this.currentReport.selectedDimension && !this.currentReport.rowDimension) {
+            this.initDefaultConfig()
+          }
+        }
+      },
+      immediate: true
+    },
+
+    rowFields: {
+      handler(fields) {
+        if (fields && fields.length > 0 && this.currentReport) {
+          this.currentReport.selectedDimension = fields[0]
+        }
+      },
+      immediate: true
+    },
+
+    colFields: {
+      handler(fields) {
+        if (fields && fields.length > 0 && this.currentReport) {
+          if (fields.length >= 1) {
+            this.currentReport.rowDimension = fields[0]
+          }
+          if (fields.length >= 2) {
+            this.currentReport.columnDimension = fields[1]
+          }
+        }
+      },
+      immediate: true
+    },
+
+    valueFields: {
+      handler(fields) {
+        if (fields && fields.length > 0 && this.currentReport) {
+          this.currentReport.metrics = fields.map((prop) => ({
+            prop,
+            aggregateType: 'sum'
+          }))
+        }
+      },
+      immediate: true
+    },
+
+    chartType: {
+      handler(type) {
+        if (type && this.currentReport) {
+          this.currentReport.chartType = type
+        }
+      },
+      immediate: true
+    },
+
+    // 视图模式变化时初始化图表
     viewMode(newVal) {
       if (newVal === 'chart') {
         this.$nextTick(() => {
@@ -729,11 +901,14 @@ export default {
         })
       }
     },
+
     chartOption: {
       deep: true,
       handler() {
-        if (this.viewMode === 'chart' && this.chartInstance) {
-          this.chartInstance.setOption(this.chartOption, true)
+        if (this.viewMode === 'chart') {
+          this.$nextTick(() => {
+            this.initChart()
+          })
         }
       }
     },
@@ -743,6 +918,9 @@ export default {
           this.initChart()
         })
       }
+    },
+    'currentReport.statType'() {
+      this.currentPage = 1
     }
   },
 
@@ -752,43 +930,186 @@ export default {
       this.addNewReport()
     }
     document.addEventListener('click', this.handleOutsideClick)
+
+    this.handleResize = debounce(() => {
+      if (this.$refs.chartView) {
+        this.$refs.chartView.resizeChart()
+      }
+    }, DEBOUNCE_DELAY)
+    window.addEventListener('resize', this.handleResize)
   },
 
   beforeDestroy() {
     document.removeEventListener('click', this.handleOutsideClick)
+    window.removeEventListener('resize', this.handleResize)
     this.saveToStorage()
-    if (this.chartInstance) {
-      this.chartInstance.dispose()
-      this.chartInstance = null
-    }
   },
 
   methods: {
+    // 获取列的数据类型（遍历数据找到第一个有效值判断）
+    getColumnType(prop) {
+      if (!this.actualData || this.actualData.length === 0) return 'unknown'
+      // 遍历数据找到第一个有效值
+      for (const row of this.actualData) {
+        const value = row[prop]
+        if (value !== null && value !== undefined && value !== '') {
+          if (typeof value === 'number') return 'number'
+          return 'string'
+        }
+      }
+      return 'unknown'
+    },
+
+    // 获取字段的枚举选项（filters 或 options）
+    getEnumOptions(prop) {
+      const col = this.columns.find((c) => c.prop === prop)
+      if (!col) return null
+      // 优先使用 filters，其次 options
+      if (col.filters && col.filters.length > 0) return col.filters
+      if (col.options && col.options.length > 0) return col.options
+      return null
+    },
+
+    // 获取枚举字段的显示值（用于分组）
+    getEnumDisplayValue(row, prop) {
+      const enumOptions = this.getEnumOptions(prop)
+      const rawValue = row[prop]
+
+      // 如果没有枚举配置，直接返回原始值
+      if (!enumOptions) {
+        // 处理对象类型的值（如 txType.name）
+        if (rawValue && typeof rawValue === 'object') {
+          return rawValue.name || rawValue.label || JSON.stringify(rawValue)
+        }
+        return rawValue
+      }
+
+      // 根据 rawValue 查找对应的枚举标签
+      // rawValue 可能是对象 { code, name } 或直接是值
+      const codeValue = rawValue && typeof rawValue === 'object' ? rawValue.code || rawValue.value : rawValue
+
+      // 在枚举选项中查找匹配项
+      const matchedOption = enumOptions.find((opt) => {
+        const optValue = opt.value !== undefined ? opt.value : opt.code
+        return optValue === codeValue || optValue === rawValue
+      })
+
+      if (matchedOption) {
+        return matchedOption.label || matchedOption.name || matchedOption.text || codeValue
+      }
+
+      // 未匹配到，返回原始值的显示形式
+      if (rawValue && typeof rawValue === 'object') {
+        return rawValue.name || rawValue.label || JSON.stringify(rawValue)
+      }
+      return rawValue
+    },
+
+    // 初始化默认配置
+    initDefaultConfig() {
+      if (!this.currentReport) return
+
+      const allColumns = this.availableDimensions
+      const numericCols = this.availableMetrics
+
+      // 分组统计模式：初始化分组维度
+      if (
+        this.currentReport.statType === 'group' &&
+        !this.currentReport.selectedDimension &&
+        allColumns.length > 0
+      ) {
+        this.currentReport.selectedDimension = allColumns[0].prop
+      }
+
+      // 交叉统计模式：初始化行列维度
+      if (this.currentReport.statType === 'cross') {
+        if (!this.currentReport.rowDimension && allColumns.length > 0) {
+          this.currentReport.rowDimension = allColumns[0].prop
+        }
+        if (!this.currentReport.columnDimension && allColumns.length > 1) {
+          this.currentReport.columnDimension = allColumns[1].prop
+        }
+      }
+
+      // 初始化指标（仅当没有任何指标时）
+      if (numericCols.length > 0 && this.currentReport.metrics.length === 0) {
+        this.currentReport.metrics = [
+          {
+            prop: numericCols[0].prop,
+            aggregateType: 'sum'
+          }
+        ]
+      }
+    },
+
     // 获取默认报表配置
     getDefaultReport() {
       return {
         id: this.generateId(),
         name: '报表清单',
         statType: 'group',
-        chartType: 'bar',
-        dimensions: [],
-        metrics: [] // 每项格式: { key: '字段名', aggregateType: 'sum' }
+        chartType: this.chartType || 'bar',
+        selectedDimension: null,
+        rowDimension: null,
+        columnDimension: null,
+        metrics: [],
+        // 添加视图模式持久化
+        viewMode: 'chart'
       }
     },
 
-    // 迁移旧格式报表数据（metrics 从 string[] 迁移为 { key, aggregateType }[]）
+    // 迁移旧格式报表数据
     migrateReportFormat(report) {
-      if (report.metrics && report.metrics.length > 0 && typeof report.metrics[0] === 'string') {
-        const aggregateType = report.aggregateType || 'sum'
-        report.metrics = report.metrics.map((key) => ({ key, aggregateType }))
+      if (!report) return this.getDefaultReport()
+
+      // 确保 statType 存在，默认为 'group'
+      if (!report.statType) {
+        report.statType = 'group'
+      }
+
+      if (!report.metrics) {
+        report.metrics = []
+      }
+      report.metrics = report.metrics
+        .filter((m) => m !== null && m !== undefined)
+        .map((m) => {
+          if (typeof m === 'string') {
+            return { prop: m, aggregateType: report.aggregateType || 'sum' }
+          }
+          if (m && m.key && !m.prop) {
+            return { prop: m.key, aggregateType: m.aggregateType || 'sum' }
+          }
+          return m
+        })
+      if (!report.rowDimension) {
+        report.rowDimension = null
+      }
+      if (!report.columnDimension) {
+        report.columnDimension = null
+      }
+      // 兼容旧的 dimensions 数组，迁移为 selectedDimension
+      if (report.dimensions && report.dimensions.length > 0 && !report.selectedDimension) {
+        report.selectedDimension = report.dimensions[0]
+      }
+      if (!report.selectedDimension) {
+        report.selectedDimension = null
+      }
+      // 确保图表类型存在
+      if (!report.chartType) {
+        report.chartType = 'bar'
+      }
+      // 确保 viewMode 存在，交叉统计默认为 table，分组统计默认为 chart
+      if (!report.viewMode) {
+        report.viewMode = report.statType === 'cross' ? 'table' : 'chart'
       }
       delete report.aggregateType
+      delete report.dimensions
       return report
     },
 
     // 生成唯一ID
     generateId() {
-      return 'report_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
+      return 'report_' + Date.now() + '_' + Math.random().toString(36).substring(2, 11)
     },
 
     // 添加新报表
@@ -800,141 +1121,68 @@ export default {
       this.saveToStorage()
     },
 
-    // 选择报表
+    // ========== ReportSidebar 事件处理 ==========
     handleSelectReport(index) {
       this.currentReportIndex = index
     },
 
-    // 添加报表
     handleAddReport() {
       this.addNewReport()
     },
 
-    // 统计类型变更
-    handleStatTypeChange(type) {
-      this.currentReport.statType = type
-      // 交叉统计模式下强制切换到表格视图
-      if (type === 'cross') {
-        this.viewMode = 'table'
-      }
-      this.saveToStorage()
-    },
-
-    // 图表类型变更
-    handleChartTypeChange(type) {
-      this.currentReport.chartType = type
-      this.showChartTypeDropdown = false
-      this.saveToStorage()
+    handleToggleLeftSidebar() {
+      this.isLeftSidebarCollapsed = !this.isLeftSidebarCollapsed
+      this.$nextTick(() => {
+        if (this.viewMode === 'chart' && this.$refs.chartView) {
+          this.$refs.chartView.resizeChart()
+        }
+      })
     },
 
-    // 维度选择变更
-    handleDimensionToggle(key) {
-      const index = this.currentReport.dimensions.indexOf(key)
-      if (index > -1) {
-        this.currentReport.dimensions.splice(index, 1)
-      } else {
-        this.currentReport.dimensions.push(key)
+    handleRenameReport({ id, name }) {
+      const report = this.reportList.find((r) => r.id === id)
+      if (report) {
+        report.name = name
+        this.saveToStorage()
       }
-      this.saveToStorage()
     },
 
-    // 指标选择变更
-    handleMetricToggle(key) {
-      const index = this.currentReport.metrics.indexOf(key)
-      if (index > -1) {
-        this.currentReport.metrics.splice(index, 1)
-      } else {
-        this.currentReport.metrics.push(key)
-      }
-      this.saveToStorage()
+    handleDeleteReport(report) {
+      this.$confirm(`确定要删除报表"${report.name}"吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          const index = this.reportList.findIndex((r) => r.id === report.id)
+          if (index > -1) {
+            this.reportList.splice(index, 1)
+            if (this.currentReportIndex >= index && this.currentReportIndex > 0) {
+              this.currentReportIndex--
+            }
+            if (this.reportList.length === 0) {
+              this.addNewReport()
+            }
+            this.saveToStorage()
+            this.$message.success('删除成功')
+          }
+        })
+        .catch(() => {})
     },
 
-    // 聚合类型变更
-    handleAggregateChange(type) {
-      this.currentReport.aggregateType = type
-      this.showAggregateDropdown = false
+    // ========== MainToolbar 事件处理 ==========
+    handleViewModeChange(val) {
+      // 将视图模式保存到报表配置中
+      this.currentReport.viewMode = val
       this.saveToStorage()
+      // 切换到图表视图时初始化图表
+      if (val === 'chart') {
+        this.$nextTick(() => {
+          this.initChart()
+        })
+      }
     },
 
-    // 添加指标字段
-    handleAddMetric() {
-      // 默认选中第一个可用指标
-      if (this.availableMetrics.length > 0 && !this.currentReport.metrics.includes(this.availableMetrics[0].key)) {
-        this.currentReport.metrics.push(this.availableMetrics[0].key)
-        this.saveToStorage()
-      }
-    },
-
-    // 配置变更
-    handleConfigChange() {
-      this.saveToStorage()
-    },
-
-    // 获取图表类型标签
-    getChartTypeLabel(type) {
-      const chart = this.chartTypes.find((t) => t.value === type)
-      return chart ? chart.label : '柱状图'
-    },
-
-    // 获取图表类型图标
-    getChartTypeIcon(type) {
-      const iconMap = {
-        bar: 'v3-icon-chart-histogram',
-        line: 'v3-icon-chart-line',
-        pie: 'v3-icon-chart-pie',
-        horizontalBar: 'v3-icon-histogram'
-      }
-      return iconMap[type] || 'v3-icon-chart-histogram'
-    },
-
-    // 获取聚合类型标签
-    getAggregateLabel(type) {
-      const agg = this.aggregateTypes.find((t) => t.value === type)
-      return agg ? agg.label : '求和'
-    },
-
-    // 初始化图表
-    async initChart() {
-      if (!this.$refs.chartContainer) return
-      if (!this.hasData) return
-
-      const echarts = await importG('echarts', () => import(/*webpackChunkName "echarts"*/ 'echarts'))
-
-      if (!this.chartInstance) {
-        this.chartInstance = echarts.init(this.$refs.chartContainer)
-      }
-
-      if (this.chartOption) {
-        this.chartInstance.setOption(this.chartOption, true)
-      }
-    },
-
-    // 从本地存储加载
-    loadFromStorage() {
-      try {
-        const saved = localStorage.getItem(STORAGE_KEY)
-        if (saved) {
-          const configs = JSON.parse(saved)
-          if (Array.isArray(configs) && configs.length > 0) {
-            // 迁移旧格式数据
-            this.reportList = configs.map((report) => this.migrateReportFormat(report))
-          }
-        }
-      } catch (e) {
-        console.warn('Failed to load pivot configs from storage:', e)
-      }
-    },
-
-    // 保存到本地存储
-    saveToStorage() {
-      try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(this.reportList))
-      } catch (e) {
-        console.warn('Failed to save pivot configs to storage:', e)
-      }
-    },
-
-    // 刷新数据
     handleRefresh() {
       if (this.viewMode === 'chart') {
         this.$nextTick(() => {
@@ -944,7 +1192,10 @@ export default {
       this.$emit('refresh')
     },
 
-    // 导出数据
+    handleConfig() {
+      this.handleToggleRightSidebar()
+    },
+
     handleExport() {
       const data = this.processedData
       if (data.length === 0) {
@@ -952,7 +1203,6 @@ export default {
         return
       }
 
-      // 生成CSV
       const headers = this.tableColumns.map((col) => col.title).join(',')
       const rows = data.map((row) => {
         return this.tableColumns
@@ -973,891 +1223,205 @@ export default {
       this.$emit('export', data)
     },
 
-    // 添加到首页
     handleAddToHome() {
       this.$emit('add-to-home', this.currentReport)
       this.$message.success('已添加到首页')
     },
 
-    // 新建报表
-    handleNewReport() {
-      this.addNewReport()
+    handleDeleteCurrentReport() {
+      this.handleDeleteReport(this.currentReport)
     },
 
-    // 关闭
-    handleClose() {
-      this.$emit('close')
+    // ========== TableView 事件处理 ==========
+    handlePrevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--
+      }
     },
 
-    // 点击外部关闭下拉框
-    handleOutsideClick(e) {
-      if (
-        !e.target.closest('.select-wrapper') &&
-        !e.target.closest('.aggregate-dropdown') &&
-        !e.target.closest('.report-more')
-      ) {
-        this.showChartTypeDropdown = false
-        this.showDimensionDropdown = false
-        this.showMetricDropdown = false
-        this.showAggregateDropdown = false
-        this.activeMenuReportId = null
+    handleNextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++
       }
     },
 
-    // 处理左侧边栏折叠/展开
-    handleScrollBarIndicator() {
-      this.isLeftSidebarCollapsed = !this.isLeftSidebarCollapsed
-      this.$nextTick(() => {
-        if (this.viewMode === 'chart' && this.chartInstance) {
-          this.chartInstance.resize()
-        }
-      })
+    handleJumpToPage(page) {
+      this.currentPage = page
+    },
+
+    handlePageSizeChange(size) {
+      this.pageSize = size
+      this.currentPage = 1
     },
 
-    // 处理右侧边栏折叠/展开
+    // ========== ConfigSidebar 事件处理 ==========
     handleToggleRightSidebar() {
       this.isRightSidebarCollapsed = !this.isRightSidebarCollapsed
       this.$nextTick(() => {
-        if (this.viewMode === 'chart' && this.chartInstance) {
-          this.chartInstance.resize()
+        if (this.viewMode === 'chart' && this.$refs.chartView) {
+          this.$refs.chartView.resizeChart()
         }
       })
     },
 
-    // 切换报表菜单显示
-    handleToggleMenu(reportId) {
-      this.activeMenuReportId = this.activeMenuReportId === reportId ? null : reportId
-    },
-
-    // 开始重命名
-    handleStartRename(report) {
-      this.editingReportId = report.id
-      this.editingReportName = report.name
-      this.activeMenuReportId = null
-      this.$nextTick(() => {
-        const input = this.$el.querySelector('.report-name-input')
-        if (input) {
-          input.focus()
-          input.select()
-        }
-      })
+    handleNameChange(value) {
+      this.currentReport.name = value
+      this.saveToStorage()
     },
 
-    // 保存重命名
-    handleSaveRename() {
-      if (this.editingReportId && this.editingReportName.trim()) {
-        const report = this.reportList.find((r) => r.id === this.editingReportId)
-        if (report) {
-          report.name = this.editingReportName.trim()
-          this.saveToStorage()
+    handleStatTypeChange(type) {
+      this.currentReport.statType = type
+      if (type === 'cross') {
+        // 切换到交叉统计时清除分组维度，并强制使用表格视图
+        this.currentReport.selectedDimension = null
+        this.currentReport.viewMode = 'table'
+      } else {
+        // 切换到分组统计时清除行列维度
+        this.currentReport.rowDimension = null
+        this.currentReport.columnDimension = null
+        // 如果之前是表格视图，可以保持；否则默认图表视图
+        if (!this.currentReport.viewMode || this.currentReport.viewMode === 'table') {
+          this.currentReport.viewMode = 'chart'
         }
       }
-      this.editingReportId = null
-      this.editingReportName = ''
+      this.saveToStorage()
     },
 
-    // 取消重命名
-    handleCancelRename() {
-      this.editingReportId = null
-      this.editingReportName = ''
+    handleChartTypeChange(type) {
+      this.currentReport.chartType = type
+      this.saveToStorage()
     },
 
-    // 删除报表
-    handleDeleteReport(report) {
-      this.activeMenuReportId = null
-      this.$confirm(`确定要删除报表"${report.name}"吗？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
-          const index = this.reportList.findIndex((r) => r.id === report.id)
-          if (index > -1) {
-            this.reportList.splice(index, 1)
-            if (this.currentReportIndex >= index && this.currentReportIndex > 0) {
-              this.currentReportIndex--
-            }
-            if (this.reportList.length === 0) {
-              this.addNewReport()
-            }
-            this.saveToStorage()
-            this.$message.success('删除成功')
-          }
-        })
-        .catch(() => {})
+    handleDimensionSelect(dimKey) {
+      this.currentReport.selectedDimension = dimKey
+      this.saveToStorage()
     },
 
-    // 处理视图模式切换
-    handleViewModeChange(val) {
-      if (val === 'chart') {
-        this.$nextTick(() => {
-          this.initChart()
-        })
+    handleRowDimensionChange(dimKey) {
+      if (this.currentReport.columnDimension === dimKey) {
+        this.currentReport.columnDimension = null
       }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.n20-pivot-dialog {
-  .el-dialog {
-    box-sizing: border-box;
-    margin-top: 3vh !important;
-    max-height: 94vh;
-    display: flex;
-    flex-direction: column;
-    .el-dialog__body {
-      padding: 0;
-      flex: 1;
-      min-height: 0;
-      overflow: hidden;
-    }
-  }
-}
-.n20-pivot-container {
-  display: flex;
-  background: #fff;
-  height: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  position: relative;
-}
-
-/* 左侧边栏 */
-.pivot-sidebar-left {
-  width: 280px;
-  background: #f2f3f5;
-  border-right: 1px solid #e5e6eb;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  transition: width 0.3s ease;
-}
-
-.pivot-sidebar-left.collapsed {
-  width: 8px;
-}
-
-.pivot-sidebar-left.collapsed .sidebar-header,
-.pivot-sidebar-left.collapsed .report-list {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.pivot-sidebar-left .sidebar-header {
-  height: 48px;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e5e6eb;
-  background: #f2f3f5;
-}
-
-.pivot-sidebar-left .sidebar-title {
-  color: var(--text-2, #4e5969);
-  /* 13/CN-Regular */
-  font-family: 'PingFang SC';
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22px; /* 169.231% */
-}
-
-.add-report-btn {
-  padding: 9px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  border: 1px solid var(--border-2, #e5e6eb);
-  background: var(--bg-white, #fff);
-  cursor: pointer;
-  color: var(--text-primary, #4e5969);
-  transition: all 0.2s;
-  i {
-    font-size: 14px;
-    line-height: 14px;
-  }
-}
-
-.add-report-btn:hover {
-  background: #fff;
-  color: #007aff;
-}
-
-.report-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.report-item {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.report-item:hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-.report-item.active {
-  border-radius: 4px;
-  background: var(--bg-white, #fff);
-}
-
-.report-item.editing {
-  background: var(--bg-white, #fff);
-}
-
-.report-name-input {
-  flex: 1;
-  height: 24px;
-  padding: 0 8px;
-  border: 1px solid #007aff;
-  border-radius: 2px;
-  font-size: 14px;
-  color: #1d2129;
-  outline: none;
-}
-
-.report-more {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: #86909c;
-  position: relative;
-}
-
-.report-more.visible {
-  display: flex;
-}
-
-.report-more:hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: #4e5969;
-}
-
-.report-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 4px;
-  background: #fff;
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  z-index: 100;
-  min-width: 100px;
-  padding: 4px 0;
-}
-
-.report-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: #1d2129;
-  cursor: pointer;
-  transition: background 0.2s;
-  white-space: nowrap;
-}
-
-.report-menu-item:hover {
-  background: #f7f8fa;
-}
-
-.report-menu-item.delete {
-  color: #f53f3f;
-}
-
-.report-menu-item.delete:hover {
-  background: #fff2f0;
-}
-
-.report-icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  color: #4e5969;
-}
-
-.report-item.active .report-icon {
-  color: #007aff;
-}
-
-.report-name {
-  font-size: 14px;
-  color: #1d2129;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.scroll-bar-indicator {
-  position: absolute;
-  right: -8px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  border: 1px solid var(--border-2, #e5e6eb);
-  background: var(--bg-white, #fff);
-  color: #4e5969;
-  cursor: pointer;
-  // transition: right 0.3s ease, color 0.2s;
-  // z-index: 10;
-}
-
-.scroll-bar-indicator:hover {
-  color: #007aff;
-}
-
-.scroll-bar-indicator.collapsed {
-  right: -8px;
-}
-
-/* 主内容区域 */
-.pivot-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  padding: 16px;
-  transition: margin-left 0.3s ease, margin-right 0.3s ease;
-}
-
-.pivot-main.left-collapsed {
-  margin-left: 8px;
-}
-
-.pivot-main.right-collapsed {
-  margin-right: 8px;
-}
-
-.main-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 16px;
-  border-bottom: 1px solid #e5e6eb;
-}
-
-.toolbar-left {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 4px;
-}
-
-.toolbar-left-top {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.report-title {
-  color: var(--text-1, #1d2129);
-  /* 18/CN-Medium */
-  font-family: 'PingFang SC';
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 26px; /* 144.444% */
-}
-
-.add-to-home-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: 2px;
-  cursor: pointer;
-  color: #007aff;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.add-to-home-btn:hover {
-  background: rgba(0, 122, 255, 0.08);
-}
-
-.report-stats {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.stat-item {
-  font-size: 12px;
-  color: #4e5969;
-}
-
-.stat-divider {
-  width: 0;
-  height: 12px;
-  border-left: 1px solid #e5e6eb;
-}
-
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-
-.action-btn {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-  cursor: pointer;
-  color: #4e5969;
-  transition: all 0.2s;
-}
-
-.action-btn:hover {
-  color: #007aff;
-  border-color: #007aff;
-}
-
-/* 主内容 */
-.main-content {
-  flex: 1;
-  padding: 16px;
-  overflow: hidden;
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-}
-
-.chart-view,
-.table-view {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.chart-container {
-  width: 100%;
-  height: 100%;
-}
-
-.table-container {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-
-.pivot-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.pivot-table th,
-.pivot-table td {
-  padding: 12px 16px;
-  text-align: left;
-  border: 1px solid #e5e6eb;
-}
-
-.pivot-table th {
-  background: #f2f3f5;
-  font-weight: 500;
-  color: #1d2129;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.pivot-table tbody tr:hover {
-  background: #f7f8fa;
-}
-
-.empty-state {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty-icon {
-  opacity: 0.5;
-}
-
-.empty-text {
-  margin-top: 16px;
-  font-size: 12px;
-  color: #4e5969;
-}
-
-/* 新建按钮 */
-.new-report-btn {
-  position: absolute;
-  top: 56px;
-  right: 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-
-.new-report-btn > span {
-  background: #1d2129;
-  color: #fff;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.btn-arrow {
-  color: #1d2129;
-}
-
-/* 右侧边栏 */
-.pivot-sidebar-right {
-  width: 280px;
-  background: #fff;
-  border-left: 1px solid #e5e6eb;
-  display: flex;
-  flex-direction: column;
-  transition: width 0.3s ease;
-}
-
-.pivot-sidebar-right.collapsed {
-  width: 8px;
-}
-
-.pivot-sidebar-right.collapsed .sidebar-header,
-.pivot-sidebar-right.collapsed .config-form {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.pivot-sidebar-right .sidebar-header {
-  height: 48px;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-bottom: 1px solid #e5e6eb;
-  white-space: nowrap;
-}
-
-.pivot-sidebar-right .sidebar-title {
-  color: var(--text-1, #1d2129);
-
-  /* 14/CN-Medium */
-  font-family: 'PingFang SC';
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 22px; /* 157.143% */
-}
-
-.pivot-sidebar-right .sidebar-header-collapse {
-  font-size: 14px;
-  color: #86909c;
-  cursor: pointer;
-  transition: color 0.2s;
-  &:hover {
-    color: #1d2129;
-  }
-}
-
-.config-form {
-  flex: 1;
-  padding: 0 16px;
-  overflow-y: auto;
-
-  .form-item:first-child {
-    margin-top: 16px;
-  }
-}
-
-.form-item {
-  margin-bottom: 16px;
-}
-
-.form-divider {
-  height: 1px;
-  background-color: #e5e6eb;
-  margin: 16px 0;
-}
-
-.form-label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 14px;
-  color: #4e5969;
-  margin-bottom: 8px;
-}
-
-.label-tip {
-  color: #86909c;
-}
-
-.form-label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.form-label-row .form-label {
-  margin-bottom: 0;
-}
+      this.currentReport.rowDimension = dimKey
+      this.saveToStorage()
+    },
 
-.input-wrapper {
-  width: 100%;
-}
+    handleColumnDimensionChange(dimKey) {
+      if (this.currentReport.rowDimension === dimKey) {
+        this.currentReport.rowDimension = null
+      }
+      this.currentReport.columnDimension = dimKey
+      this.saveToStorage()
+    },
 
-.form-input {
-  width: 224px;
-  height: 32px;
-  padding: 0 12px;
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #1d2129;
-  outline: none;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
+    handleMetricAggregateChange({ prop, aggregateType }) {
+      const index = this.currentReport.metrics.findIndex((m) => m && m.prop === prop)
+      if (index > -1) {
+        this.$set(this.currentReport.metrics, index, {
+          ...this.currentReport.metrics[index],
+          aggregateType
+        })
+        this.saveToStorage()
+      }
+    },
 
-.form-input:focus {
-  border-color: #007aff;
-  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
-}
+    handleGlobalAggregateChange(type) {
+      this.currentReport.metrics.forEach((metric, index) => {
+        if (metric && metric.prop) {
+          this.$set(this.currentReport.metrics, index, { ...metric, aggregateType: type })
+        }
+      })
+      this.saveToStorage()
+    },
 
-.form-input::placeholder {
-  color: #86909c;
-}
+    getGlobalAggregateType() {
+      const firstValid = (this.currentReport.metrics || []).find((m) => m && m.prop)
+      return firstValid ? firstValid.aggregateType : 'sum'
+    },
 
-/* 单选组 */
-.radio-group {
-  display: flex;
-  background: #f2f3f5;
-  border-radius: 4px;
-  padding: 3px;
-}
+    handleAddSpecificMetric(metricProp) {
+      this.currentReport.metrics.push({
+        prop: metricProp,
+        aggregateType: this.getGlobalAggregateType()
+      })
+      this.saveToStorage()
+    },
 
-.radio-item {
-  flex: 1;
-  height: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: #4e5969;
-  cursor: pointer;
-  border-radius: 2px;
-  transition: all 0.2s;
-}
+    handleRemoveMetric(metricProp) {
+      const index = this.currentReport.metrics.findIndex((m) => m && m.prop === metricProp)
+      if (index > -1) {
+        this.currentReport.metrics.splice(index, 1)
+        this.saveToStorage()
+      }
+    },
 
-.radio-item.active {
-  background: #fff;
-  color: #007aff;
-  font-weight: 500;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
-}
+    // ========== 其他方法 ==========
+    initChart() {
+      if (this.$refs.chartView) {
+        this.$refs.chartView.initChart()
+      }
+    },
 
-/* 选择框 */
-.select-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 12px;
-  background: #fff;
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: border-color 0.2s;
-}
+    loadFromStorage() {
+      try {
+        const saved = localStorage.getItem(STORAGE_KEY)
+        if (saved) {
+          const configs = JSON.parse(saved)
+          if (Array.isArray(configs) && configs.length > 0) {
+            // 迁移格式并加载报表列表
+            this.reportList = configs.map((report) => this.migrateReportFormat(report))
+            // 确保 currentReportIndex 有效
+            if (this.currentReportIndex >= this.reportList.length) {
+              this.currentReportIndex = 0
+            }
+          }
+        }
+      } catch (e) {
+        console.warn('Failed to load pivot configs from storage:', e)
+        // 加载失败时清空报表列表
+        this.reportList = []
+      }
+    },
 
-.select-wrapper:hover {
-  border-color: #007aff;
-}
+    saveToStorage() {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(this.reportList))
+      } catch (e) {
+        console.warn('Failed to save pivot configs to storage:', e)
+      }
+    },
 
-.select-value {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #1d2129;
-  .report-icon {
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
-    line-height: 16px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 0;
-    color: #007aff;
+    handleOutsideClick(e) {
+      const dropdownSelectors = [
+        '.select-wrapper',
+        '.aggregate-dropdown',
+        '.add-field-btn',
+        '.metric-add-dropdown',
+        '.metric-select-tag',
+        '.report-more',
+        '.more-btn',
+        '.pagination-size-select'
+      ]
+      const isInsideDropdown = dropdownSelectors.some((sel) => e.target.closest(sel))
+      if (!isInsideDropdown) {
+        // 关闭所有子组件的下拉菜单
+        if (this.$refs.reportSidebar) {
+          this.$refs.reportSidebar.closeMenu()
+        }
+        if (this.$refs.mainToolbar) {
+          this.$refs.mainToolbar.closeMenu()
+        }
+        if (this.$refs.tableView) {
+          this.$refs.tableView.closeDropdown()
+        }
+        if (this.$refs.configSidebar) {
+          this.$refs.configSidebar.closeAllDropdowns()
+        }
+      }
+    }
   }
 }
+</script>
 
-.select-value .placeholder {
-  color: #86909c;
-}
-
-.select-arrow {
-  color: #4e5969;
-  transition: transform 0.2s;
-}
-
-.select-tag {
-  padding: 2px 8px;
-  background: rgba(78, 89, 105, 0.08);
-  border-radius: 2px;
-  font-size: 12px;
-  color: #4e5969;
-  margin-right: 8px;
-}
-
-/* 下拉菜单 */
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: 4px;
-  background: #fff;
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  z-index: 100;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.dropdown-item {
-  padding: 8px 12px;
-  font-size: 14px;
-  color: #1d2129;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.dropdown-item:hover {
-  background: #f7f8fa;
-}
-
-.dropdown-item.active {
-  color: #007aff;
-}
-
-.checkbox-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.checkbox {
-  width: 16px;
-  height: 16px;
-  border: 1px solid #e5e6eb;
-  border-radius: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.checkbox.checked {
-  background: #007aff;
-  border-color: #007aff;
-  color: #fff;
-}
-
-/* 聚合类型下拉 */
-.aggregate-dropdown {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: 2px;
-  cursor: pointer;
-  color: #007aff;
-  font-size: 12px;
-  transition: background 0.2s;
-}
-
-.aggregate-dropdown:hover {
-  background: rgba(0, 122, 255, 0.08);
-}
-
-.aggregate-dropdown-menu {
-  right: 0;
-  left: auto;
-  min-width: 80px;
-}
-
-/* 添加字段按钮 */
-.add-field-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 8px;
-  padding: 4px 8px;
-  font-size: 14px;
-  color: #007aff;
-  cursor: pointer;
-  border-radius: 2px;
-  transition: background 0.2s;
-}
-
-.add-field-btn:hover {
-  background: rgba(0, 122, 255, 0.08);
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #c9cdd4;
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #a1a7b3;
-}
-</style>
+<style lang="scss">
+@import '../../assets/css/pivot.scss';
+</style>