@epxing/designer 0.0.0-stage → 5.3.0-beta.1

package/src/visual/config-page/Dashboard.vue

@@ -0,0 +1,2331 @@
+<template>
+<div class="config-container config-container--dashboard-designer" :class="{ 'config-container--new-window':newWindow, 'config-container--mobile-dashboard': isMobileDashboard }">
+  <!-- 头部 -->
+  <div class="page-header">
+    <i class="page-header__back el-icon-arrow-left" @click="back"></i>
+    <p class="page-title">
+      <span class="page-header__title">{{title}}</span>
+      <el-tag v-if="!chooseDesignTarget" size="small">{{ isMobileDashboard ? '移动端看板' : 'PC 看板' }}</el-tag>
+    </p>
+    <div class="page-header__operate">
+      <el-button v-if="configReady && !selectComponentList.length" size="small" :disabled="choosingDesignTarget" @click="chooseDesignTarget=true">选择设计端</el-button>
+      <template v-if="!chooseDesignTarget">
+      <p class="header-operate__item" @click="showPanel='style'"><i class="epx-icon-yangshi"></i>样式</p>
+      <p v-if="!isMobileDashboard" class="header-operate__item" @click="switchMobile"><i class="el-icon-mobile"></i>移动端设计</p>
+      <el-select v-if="isMobileDashboard" :model-value="mobileCanvasWidth" size="small" class="mobile-width-select" @change="v=>changeItemConfigs('page', { mobileCanvasWidth: v })">
+        <el-option v-for="width in [320, 375, 390, 414]" :key="width" :label="width + 'px'" :value="width"></el-option>
+      </el-select>
+      <span v-if="isMobileDashboard" class="mobile-save-status">{{ mobileDirty ? '未保存' : '已保存' }}</span>
+      <el-button v-if="isMobileDashboard" size="small" type="primary" :loading="mobileSaving" @click="saveMobileDashboard">保存</el-button>
+      <p class="header-operate__item" @click="preview"><i class="el-icon-view"></i>{{$t('preview')}}</p>
+      <p class="header-operate__item" @click="pageSettingDrawer=true"><i class="el-icon-setting"></i>全局设置</p>
+      <!-- <el-button type="primary" size="default" @click="saveConfigs">{{$t('save')}}</el-button> -->
+      </template>
+    </div>
+  </div>
+  <div v-if="chooseDesignTarget" class="design-target-picker">
+    <h2>选择看板设计端</h2>
+    <p>先选择主要展示端，再开始添加报表和组件。</p>
+    <div class="design-target-picker__options">
+      <el-button :loading="choosingDesignTarget" @click="selectDesignTarget('pc')">PC 端 · 桌面画布</el-button>
+      <el-button type="primary" :loading="choosingDesignTarget" @click="selectDesignTarget('mobile')">移动端 · 手机画布</el-button>
+    </div>
+  </div>
+  <div v-else class="page-content">
+    <!-- 导航tabs -->
+    <ul class="page-tabs">
+      <li :class="{'page-tabs__item': true}"
+          @click="openAddReportDialog">
+        <i class="epx-icon-color-tianjiabaobiao"></i>
+        <span>报表</span>
+      </li>
+      <li :class="{'page-tabs__item': true}" @click="addComponentDialog=true">
+        <i class="epx-icon-color-tianjiazujian"></i>
+        <span>组件</span>
+      </li>
+      <li :class="{'page-tabs__item': true}" @click="addTabsToDashboard">
+        <i class="epx-icon-color-tab"></i>
+        <span>标签页</span>
+      </li>
+      <li :class="{'page-tabs__item': true}" @click="copyComponentDialog=true">
+        <i class="epx-icon-color-yinyong"></i>
+        <span>引用</span>
+      </li>
+    </ul>
+    <div class="function-panel">
+      <div class="dashboard-theme" v-if="showPanel==='style'">
+        <div class="dashboard-theme__title">
+          <span>样式设置</span>
+          <el-radio-group v-model="styleType" size="small">
+            <el-radio-button label="presets" value="presets">预设</el-radio-button>
+            <el-radio-button label="custom" value="custom">自定义</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="dashboard-theme__content">
+          <template v-if="styleType==='presets'&& !editTheme">
+            <ul class="dashboard-theme__list">
+              <li :class="['dashboard-theme__item', { active: activeTheme===theme.CODE }]" v-for="theme in themeList" :key="theme.CODE" @click="selectTheme(theme)">
+                <div class="dashboard-theme__preview">
+                  <img :src="$util.getFileUrl(theme.THUMBNAIL)" alt="">
+                </div>
+                <p class="dashboard-theme__name">
+                  <span class="dashboard-theme__name-text">{{theme.NAME}}<i v-if="theme.SCOPE!=='frame'" class="dashboard-theme__name-icon el-icon-user"></i></span>
+                  <el-dropdown v-if="theme.SCOPE!=='frame' || $route.params.system==='epxing-frame'" class="fr" @click.stop @command="command=>themeHandleCommand(theme, command)">
+                    <i class="el-icon-more"></i>
+                    <template v-slot:dropdown><el-dropdown-menu>
+                      <el-dropdown-item command="edit">编辑</el-dropdown-item>
+                      <el-dropdown-item command="config">预设样式配置</el-dropdown-item>
+                      <el-dropdown-item command="remove">删除</el-dropdown-item>
+                    </el-dropdown-menu></template>
+                  </el-dropdown>
+                </p>
+                <div class="dashboard-theme__selected">
+                  <span></span>
+                  <i class="el-icon-check"></i>
+                </div>
+              </li>
+            </ul>
+          </template>
+          <template v-else>
+            <dashboard-theme-setting :editTheme="editTheme" :value="themeStyles" @change="changethemeStyles" @save="savePreset" @mobile-edit="v=>themeMobilePreview=v" ></dashboard-theme-setting>
+          </template>
+        </div>
+        <div class="dashboard-theme__footer">
+          <el-button size="default" @click="cancelThemePancel">取消</el-button>
+          <el-button size="default" type="primary" @click="setTheme">确定</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 页面预览 -->
+    <div v-if="!previewSuspended && !mobilePreviewVisible" class="page-preview">
+      <dashboard-mobile v-if="isMobileDashboard"
+        ref="dashboardDesign" standalone :source="mobileDesignSource" :canvas-width="mobileCanvasWidth"
+        :page-id="$query.id" :page-meta-id="currentMetaId" :all-component-list="componentList"
+        @select-item="selectMobileItem" @edit-data="editMobileData" @delete-item="deleteMobileItem" @add-into="addMobileInto"
+        @add-report="openAddReportDialog" @add-component="addComponentDialog=true">
+        <template #component-config>
+          <epx-visual-config-panel v-if="selectComponent" :component="selectComponent" :metaId="currentMetaId"
+            :globalConfigs="pageGlobalConfigs" :itemConfigs="allComponentConfigs" :relationList="relationList"
+            :pageParams="pageParams" :scopeConfigs="scopeConfigs" :grid-layout="true"></epx-visual-config-panel>
+        </template>
+      </dashboard-mobile>
+      <epx-visual-config-dashboard-design v-else
+        ref="dashboardDesign"
+        :up-comp-id="upCompId"
+        :component-list="this.selectComponentList"
+        :all-component-list="this.componentList"
+        :globalConfigs="pageGlobalConfigs"
+        :pageId="$query.id"
+        :pageMetaId="currentMetaId"
+        :itemConfigs="allComponentConfigs"
+        :theme="activeTheme"
+        :themeStyles="themeStyles"
+        :mobile-preview="themeMobilePreview"
+        @open-config="clickComponent"
+        @change-items="componentList=> selectComponentList=[...componentList]"
+        @add-component="addComponentDialog=true"
+        @delete-configs="deleteConfigs"
+        @add-report="openAddReportDialog"
+        @add-report-to-dashboard="addReportToDashboard"
+        @add-chart-to-dashboard="addChartToDashboard"
+        @add-component-to-dashboard="addComponentToDashboard"
+      ></epx-visual-config-dashboard-design>
+    </div>
+    <!-- 组件配置面板 v-if="selectComponent" -->
+    <el-drawer v-if="!isMobileDashboard" title="组件配置" append-to-body direction="rtl" v-model="showConfigPanel">
+      <div class="config-panel" v-if="showConfigPanel">
+      <!-- 获取组件对应的配置面板 -->
+      <epx-visual-config-panel
+        :component="selectComponent"
+        :metaId="currentMetaId"
+        :globalConfigs="pageGlobalConfigs"
+        :itemConfigs="allComponentConfigs"
+        :relationList="relationList"
+        :pageParams="pageParams"
+        :scopeConfigs="scopeConfigs"
+        :grid-layout="true"
+      ></epx-visual-config-panel>
+    </div>
+    </el-drawer>
+    <!-- 添加报表 -->
+    <el-dialog title="添加报表" append-to-body v-model="addReportDialog" width="640px">
+      <div class="add-report-body" v-if="addReportDialog">
+        <div class="add-report-item">
+          <label>报表类型：</label>
+          <ul class="report-type__list">
+            <li v-for="reportType in reportTypeList" :class="{ 'report-type__item': true, active: addReportForm.TYPE === reportType.type && (addReportForm.CHART_TYPE === reportType.chartType || addReportForm.TYPE === '1' || addReportForm.TYPE === 'numStatistic') }" :key="reportType.chartType || reportType.type" @click="setReportType(reportType)">
+              <i :class="reportType.icon"></i>
+              <span>{{reportType.text}}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="add-report-item" v-show="addReportForm.TYPE!=='dashboardTitle' && addReportForm.TYPE!=='form'">
+          <label>统计对象：</label>
+          <epx-object v-model="addReportForm.OBJECT" :fieldConfigs="{attriName: 'OBJECT',dataType: 'object',attriLabel: '统计对象', codeKey: 'FM_ENTITY', state:'EDIT'}"></epx-object>
+        </div>
+        <div class="add-report-item" v-show="addReportForm.TYPE!=='numStatistic' && addReportForm.TYPE!=='dashboardTitle' && addReportForm.TYPE!=='form'">
+          <label>统计对象视图：</label>
+          <epx-object v-model="addReportForm.OBJECT_VIEW" :fieldConfigs="{attriName: 'OBJECT_VIEW',dataType: 'object',attriLabel: '统计对象', codeKey: 'FM_ENTITY_VIEW', scopeParams: [{field: 'ENTITY',values: addReportForm.OBJECT}], state:'EDIT'}"></epx-object>
+        </div>
+        <div class="add-report-item" v-show="addReportForm.TYPE==='form'">
+          <label>表单类型：</label>
+          <el-radio-group v-model="addReportForm.FORM_TYPE">
+            <el-radio label="formReport" value="formReport">Word</el-radio>
+            <el-radio label="excelReport" value="excelReport">Excel</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="add-report-footer">
+        <el-button type="primary" @click="saveReport">保存</el-button>
+        <el-button @click="addReportDialog=false">返回</el-button>
+      </div>
+    </el-dialog>
+     <!-- 添加组件 -->
+    <el-dialog title="添加组件" append-to-body v-model="addComponentDialog" width="960px">
+      <epx-visual-component-library-dialog :initial-terminal="isMobileDashboard ? 'move' : 'pc'" @click="addComponentToDashboard"></epx-visual-component-library-dialog>
+    </el-dialog>
+    <!-- 引用组件 -->
+    <el-dialog class="dialog--noheader dialog--nopadding" append-to-body center v-model="copyComponentDialog" width="960px">
+      <el-tabs type="card">
+        <!-- <el-tab-pane label="从报表库选择">
+          <epx-search-fields class="dashboard-search" metaId="FM_REPORT_BASE" :showKeyword="false" :fields="['NAME', 'TYPE', 'CHART_TYPE', 'OBJECT']" :showFilter="false"  @search="searchReport" ></epx-search-fields>
+          <ul class="report-list" v-loading="reportLoading">
+            <li :class="['report-item', { 'selected': selectedReportList.includes(report.ID)}]" v-for="report in reportList" :key="report.ID" @click="selectReport(report)">
+              <i :class="reportIconMap[report.CHART_TYPE || report.TYPE]"></i>
+              <span>{{ report.NAME }}</span>
+              <div class="report-item__select">
+                <span></span>
+                <i class="el-icon-check"></i>
+              </div>
+            </li>
+            <div class="no-data" v-if="!reportLoading && reportTotal===0">
+              <i class="epx-icon-kong"></i>
+              <p>暂无数据</p>
+            </div>
+          </ul>
+          <el-pagination
+            class="pagination"
+            @current-change="currentReportChange"
+            v-model:current-page="currentReportPage"
+            :page-size="20"
+            layout="prev, pager, next, jumper"
+            :total="reportTotal"
+          >
+          </el-pagination>
+        </el-tab-pane> -->
+        <el-tab-pane label="从数据看板选择">
+          <div class="dashboard-search">
+            <epx-search-fields metaId="FM_PAGE_CONFIG" :showKeyword="false" :fields="['TITLE', 'META_ID']" :showFilter="false"  @search="searchDashboard" ></epx-search-fields>
+          </div>
+          <ul class="dashboard-list" v-loading="dashboardLoading">
+            <li :class="['dashboard-item', { fold: foldDashboardMap[dashboard.ID]}]" v-for="dashboard in dashboardList" :key="dashboard.ID" >
+              <div class="dashboard-header">
+                <el-checkbox :value="isDashboardSelectAll(dashboard)" :indeterminate="isDashboardSelect(dashboard)" @change="v=>changeDashboardSelect(dashboard, v)">{{ dashboard.TITLE }}</el-checkbox>
+                <i class="el-icon-arrow-up" @click="switchDashboardFoldFn(dashboard)"></i>
+              </div>
+              <div class="dashboard-body">
+                <ul class="dashboard-comp__list">
+                  <li :class="['dashboard-comp__item', { 'selected': selectedDashboardCompList.includes(dashboard.ID+'-'+comp.id)}]" v-for="comp in dashboard.children" :key="comp.id" @click="selectDashboardComp(dashboard,comp)">
+                    <i :class="compIcon(comp)"></i>
+                    <span>{{ compTitle(comp) }}</span>
+                    <div class="dashboard-comp__item__select">
+                      <span></span>
+                      <i class="el-icon-check"></i>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <div class="no-data" v-if="!dashboardLoading && dashboardTotal===0">
+              <i class="epx-icon-kong"></i>
+              <p>暂无数据</p>
+            </div>
+          </ul>
+          <el-pagination
+            class="pagination"
+            v-model:current-page="currentDashboardPage"
+            :page-size="10"
+            layout="prev, pager, next, jumper"
+            :total="dashboardTotal"
+          >
+          </el-pagination>
+        </el-tab-pane>
+      </el-tabs>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="quoteComp">引用</el-button>
+        <!-- <el-button type="primary" @click="copyComp">复制</el-button> -->
+        <el-button @click="copyComponentDialog = false">返回</el-button>
+      </div>
+    </el-dialog>
+    <!-- 保存为预设主题 -->
+    <el-dialog title="保存为预设主题" append-to-body v-model="saveThemeDialog" width="760px">
+      <epx-add-form-item v-if="saveThemeDialog" metaId="FM_CHART_THEME" :comp-configs="{componentType: 'EDIT',column: 1, fields: themeFields}" :formData="themeFormData"
+        @change="v=>themeFormData=v"
+      >
+      </epx-add-form-item>
+      <template #footer>
+        <div>
+          <el-button @click="saveThemeDialog=false">取消</el-button>
+          <el-button @click="saveTheme" type="primary">保存</el-button>
+        </div>
+      </template>
+      <!-- <epx-table-form class="epx-add-form-item__content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} pageType={this.componentType} vModel={this.data} fieldRelation={this.fieldRelation} column={this.column} labelAlign={this.$configs.labelAlign} lineSpace={lineSpace} labelWidth={labelWidth} labelFontSize={labelFontSize} valueWidth={valueWidth} valueFontSize={valueFontSize} mFormStyle={mFormStyle} mFormPadding={mFormPadding} showRelyFlag={this.$configs.showRelyFlag !== false} valueRelyFlag={this.$configs.valueRelyFlag !== false} onChange-fields-configs={this.changeFieldsConfigs}></epx-table-form> -->
+    </el-dialog>
+  </div>
+  <el-drawer
+    :withHeader="false"
+    v-model="pageSettingDrawer"
+    append-to-body
+    direction="rtl"
+    :size="360"
+  >
+    <div class="page-setting">
+      <div class="page-setting__header">
+        <span class="title">全局设置</span>
+        <i class="el-icon-close" @click="pageSettingDrawer=false"></i>
+      </div>
+      <div class="page-setting__content">
+        <component
+          :metaId="currentMetaId"
+          ref="global"
+          id="page"
+          :is="'epx-visual-config-dashboard-setting'"
+          :comp-config="pageComponentConfigs"
+          :globalConfigs="pageGlobalConfigs"
+          :pageRelationList="relationList"
+        ></component>
+      </div>
+      <div class="page-setting__footer">
+        <el-button size="default" @click="pageSettingDrawer=false">返回</el-button>
+        <!-- <el-button type="primary" size="default" @click="saveGlobalConfigs">确定</el-button> -->
+      </div>
+    </div>
+    </el-drawer>
+    <el-dialog v-if="isMobileDashboard" v-model="mobilePreviewVisible" :title="'移动端预览 · ' + mobileCanvasWidth + 'px'" class="mobile-dashboard-preview-dialog" append-to-body align-center destroy-on-close :width="(mobileCanvasWidth + 12) * mobilePreviewScale + 48 + 'px'">
+      <div class="mobile-preview-viewport" :style="{ width: (mobileCanvasWidth + 12) * mobilePreviewScale + 'px', height: mobilePreviewPhoneHeight * mobilePreviewScale + 'px' }">
+      <div class="mobile-preview-phone" :style="{ width: (mobileCanvasWidth + 12) + 'px', height: mobilePreviewPhoneHeight + 'px', transform: 'scale(' + mobilePreviewScale + ')' }">
+        <div class="mobile-preview-phone__screen">
+          <div class="mobile-preview-phone__title" :title="title">{{ title || '数据看板' }}</div>
+          <div class="mobile-dashboard-preview">
+            <dashboard-preview v-if="mobilePreviewVisible" comp-id="mobile-dashboard-preview" :comp-configs="{ ...pageGlobalConfigs, themeStyles, items: selectComponentList, itemConfigs: allComponentConfigs }"></dashboard-preview>
+          </div>
+          <div class="mobile-preview-phone__home" aria-hidden="true"><span></span></div>
+        </div>
+      </div>
+      </div>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+import DashboardThemeSetting from './dashboard-theme-setting/Index.vue'
+import { selectableChartTypes } from '@epxing/utils/src/chart-registry'
+import DashboardMobile from './DashboardMobile.vue'
+import DashboardPreview from '@epxing/dashboard/src/Dashboard.vue'
+import { DEFAULT_DASHBOARD_THEME, createDashboardConfig, getDashboardDesignTarget, removeDashboardItem } from '@epxing/dashboard/src/design-target'
+import { indexDashboardItems } from '@epxing/dashboard/src/mobile-design'
+import { mapState, mapGetters } from 'vuex'
+import { CONFIG_VERSION, normalizeDashboardConfig, stripDashboardConfig, mergeGridConfigs, rescaleItemsToColNum } from '@epxing/dashboard/src/grid/model'
+
+// 栅格项的 i 与 id 完全重复：持久化时剥离 i（stripDashboardConfig），加载/运行时再用 id 兜底补齐（网格引擎内部需要 i）
+function ensureGridItemKey (items) {
+  if (!Array.isArray(items)) return items
+  items.forEach(item => {
+    if (item && typeof item === 'object') {
+      if (item.contentType && item.i == null && item.id != null) item.i = item.id
+      if (Array.isArray(item.items)) ensureGridItemKey(item.items)
+    }
+  })
+  return items
+}
+
+export default {
+  name: 'epx-visual-config-dashboard',
+  $componentType: 'component',
+  components: {
+    DashboardThemeSetting,
+    DashboardMobile,
+    DashboardPreview
+  },
+  navConfigs: {
+    flag: false
+  },
+  provide () {
+    const { id } = this.$query
+    return {
+      pageMetaId: this.currentMetaId,
+      pageId: id,
+      pageConfigs: this.page_config,
+      getAllComponentList: () => this.componentList,
+      getItemConfigs: () => this.allComponentConfigs,
+      // 当前 items 树（含容器子项）：属性面板「布局」分组按 id 找真实 item 读初值
+      getComponentItems: () => this.selectComponentList,
+      getDefaultContainerItems: () => this.defaultContainerItems,
+      setContainerDefaultItems: this.setContainerDefaultItems,
+      changeItemConfigs: this.changeItemConfigs,
+      getPageMetaId: () => {
+        return this.currentMetaId
+      }
+    }
+  },
+  props: {
+    newWindow: Boolean
+  },
+  data () {
+    return {
+      // 页面配置版本：加载时经 normalizeDashboardConfig 升到 v3（补 grid / 容器 grid），保存时写回；这是 '3.0' 唯一的写入点
+      version: CONFIG_VERSION,
+      configReady: false,
+      chooseDesignTarget: false,
+      choosingDesignTarget: false,
+      mobileDirty: false,
+      mobileSaving: false,
+      mobileRevision: 0,
+      mobileAddParent: null,
+      mobilePreviewVisible: false,
+      previewSuspended: false,
+      previewPopupTimer: null,
+      previewViewportWidth: window.innerWidth,
+      previewViewportHeight: window.innerHeight,
+      styleType: 'presets',
+      componentList: [],
+      selectComponentList: [],
+      selectComponent: null,
+      showPanel: 'componentLibrary',
+      pageGlobalConfigs: {},
+      allComponentConfigs: {},
+      pageMetaId: null,
+      upCompId: null,
+      relationList: [],
+      pageParams: [],
+      scopeConfigs: {},
+      addReportDialog: false,
+      addComponentDialog: false,
+      copyComponentDialog: false,
+      pageSettingDrawer: false,
+      activeTheme: DEFAULT_DASHBOARD_THEME,
+      themeStyles: null,
+      themeMobilePreview: false, // 主题面板处于"移动端"编辑态：设计器加 .is-mobile-preview 预览移动端覆盖
+      themeList: [
+        { key: 'light', name: '经典白', preview: require('@/assets/images/dashboard/theme_white.png') },
+        { key: 'dark', name: '经典黑', preview: require('@/assets/images/dashboard/theme_black.png') },
+        { key: 'technology', name: '科幻大屏', preview: require('@/assets/images/dashboard/theme_technology.png') }
+      ],
+      reportList: [],
+      selectedReportList: [],
+      currentReportPage: 1,
+      reportTotal: 0,
+      dashboardList: [],
+      selectedDashboardCompList: [],
+      currentDashboardPage: 1,
+      dashboardTotal: 0,
+      foldDashboardMap: {},
+      reportIconMap: {
+        1: 'epx-icon-tongjibiao',
+        pie: 'epx-icon-bingzhuangtu',
+        line: 'epx-icon-zhexiantu',
+        column: 'epx-icon-zhuzhuangtu',
+        funnel: 'epx-icon-loudoutu'
+      },
+      selectedReportDataList: [],
+      selectedDashboardCompDataList: [],
+      reportScopeParams: [],
+      dashboardScopeParams: [],
+      reportLoading: true,
+      dashboardLoading: true,
+      addReportForm: {},
+      reportTypeList: [
+        ...selectableChartTypes.map(({ type, text, icon }) => ({ icon, text, type: type === 'table' ? '1' : '2', chartType: type === 'table' ? '' : type })),
+        { icon: 'epx-icon-a-numbercard', text: '数字统计', type: 'numStatistic' },
+        { icon: 'epx-icon-dianzibiaodan', text: '电子表单', type: 'form' },
+        { icon: 'epx-icon-biaoti', text: '标题', type: 'dashboardTitle' },
+        { icon: 'epx-icon-container', text: '容器', type: 'dashboardDiv' }
+      ],
+      reportMap: {},
+      saveThemeDialog: false,
+      themeFormData: {},
+      editTheme: null
+    }
+  },
+  computed: {
+    isMobileDashboard () {
+      return getDashboardDesignTarget(this.pageGlobalConfigs) === 'mobile'
+    },
+    mobileCanvasWidth () {
+      return Number(this.pageGlobalConfigs.mobileCanvasWidth) || 375
+    },
+    mobilePreviewPhoneHeight () {
+      return Math.round(this.mobileCanvasWidth * 812 / 375) + 12
+    },
+    mobilePreviewScale () {
+      return Math.max(0.1, Math.min(1, (this.previewViewportWidth - 80) / (this.mobileCanvasWidth + 12), (this.previewViewportHeight - 160) / this.mobilePreviewPhoneHeight))
+    },
+    mobileDesignSource () {
+      return { componentList: this.selectComponentList, itemConfigs: this.allComponentConfigs, globalConfigs: this.pageGlobalConfigs, theme: this.activeTheme, themeStyles: this.themeStyles }
+    },
+    ...mapState({
+      showMenu: state => state.config.showMenu,
+      showAppNav: state => state.config.showAppNav
+    }),
+    ...mapGetters([
+      'getMeta',
+      'getPageById'
+    ]),
+    $meta () {
+      if (this.$metaId) {
+        const meta = this.getMeta(this.$metaId)
+        return meta
+      } else {
+        return null
+      }
+    },
+    $metaKey () {
+      if (this.$meta) {
+        return this.$meta.getKey() || 'ID'
+      } else {
+        return 'ID'
+      }
+    },
+    currentPage () {
+      const page = this.getPageById(this.$query.id)
+      return page || {}
+    },
+    currentMetaId () {
+      return this.$query.entityId || this.pageMetaId
+    },
+    currentMeta () {
+      return this.metas[this.currentMetaId] || null
+    },
+    page_config () {
+      const { config = '{}' } = this.$query
+      if (typeof config === 'string') {
+        try {
+          // eslint-disable-next-line no-eval
+          return eval('(' + config + ')')
+        } catch (error) {
+          return {}
+        }
+      }
+      return config
+    },
+    pageComponentConfigs () {
+      const configs = { ...this.pageGlobalConfigs }
+      if (configs.title) {
+        configs.componentName = configs.title
+      }
+      return configs
+    },
+    title () {
+      const { title } = this.pageGlobalConfigs
+      return title || this.currentPage.title || this.$query.title
+    },
+    isDashboardSelectAll () {
+      return dashboard => {
+        return dashboard.children.every(item => this.selectedDashboardCompList.includes(dashboard.ID + '-' + item.id))
+      }
+    },
+    isDashboardSelect () {
+      return dashboard => {
+        return !dashboard.children.every(item => this.selectedDashboardCompList.includes(dashboard.ID + '-' + item.id)) && dashboard.children.some(item => this.selectedDashboardCompList.includes(dashboard.ID + '-' + item.id))
+      }
+    },
+    compTitle () {
+      return comp => {
+        if (comp.contentType === 'report-chart') {
+          const report = this.reportMap[comp.configs.id] || {}
+          return report.NAME || comp.title
+        }
+        return comp.title
+      }
+    },
+    compIcon () {
+      return comp => {
+        if (comp.contentType === 'report-chart') {
+          const report = this.reportMap[comp.configs.id] || {}
+          return this.reportIconMap[report.CHART_TYPE || report.TYPE] || 'epx-icon-component'
+        }
+        return 'epx-icon-component'
+      }
+    },
+    showConfigPanel: {
+      get () {
+        return !!this.selectComponent
+      },
+      set () {
+        this.selectComponent = null
+      }
+    },
+    themeFields () {
+      return this.$route.params.system === 'epxing-frame' ? ['CODE', 'NAME', 'THUMBNAIL', 'SCOPE'] : ['CODE', 'NAME', 'THUMBNAIL']
+    }
+  },
+  methods: {
+    async selectDesignTarget (target) {
+      if (this.choosingDesignTarget || this.selectComponentList.length) return
+      this.choosingDesignTarget = true
+      if (this.timer) { clearTimeout(this.timer); this.timer = null }
+      const previous = this.pageGlobalConfigs
+      try {
+        const firstChoice = !['pc', 'mobile'].includes(this.currentPage?.config?.designTarget)
+        const grid = firstChoice ? { ...previous.grid, colNum: 24 } : previous.grid
+        const configs = createDashboardConfig({ ...previous, grid, items: [] }, target)
+        delete configs.items
+        if (target === 'pc' && previous.designTarget === 'mobile') {
+          configs.grid = { ...normalizeDashboardConfig({}).grid, colNum: 24 }
+          configs.autoHeight = configs.grid.rowHeight === 'auto'
+        }
+        this.pageGlobalConfigs = mergeGridConfigs(configs).configs
+        await this.$nextTick()
+        if (await this.saveConfigs() !== true) {
+          this.pageGlobalConfigs = previous
+          return
+        }
+        this.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+        this.mobileDirty = false
+        this.chooseDesignTarget = false
+      } catch (e) {
+        this.pageGlobalConfigs = previous
+        this.$message.error(e.message || '保存设计端失败，请重试')
+      } finally {
+        await this.$nextTick()
+        this.choosingDesignTarget = false
+      }
+    },
+    addMobileInto (item) {
+      this.mobileAddParent = item.id
+      this.addComponentDialog = true
+    },
+    selectMobileItem (item, tab) {
+      if (!item) return
+      const info = this.componentList.find(component => component.CODE === item.contentType) || { CODE: item.contentType }
+      const configs = { ...item, ...item.configs, ...this.allComponentConfigs[item.id] }
+      this.clickComponent(item.id, info, configs, undefined, tab)
+    },
+    editMobileData (item) {
+      this.selectMobileItem(item)
+      const configs = { ...item.configs, ...this.allComponentConfigs[item.id] }
+      const callback = () => {
+        const owner = this.selectComponentList.find(root => indexDashboardItems([root]).has(String(item.id))) || item
+        this.$refs.dashboardDesign.reloadComponent[owner.id] = true
+        this.$nextTick(() => { this.$refs.dashboardDesign.reloadComponent[owner.id] = false })
+      }
+      if (item.contentType === 'report-chart') {
+        this.goPage({ openMode: '2', component: 'report-design', params: { defaultFullscreen: true, withHeader: false, id: configs.id, callback } })
+        return
+      }
+      if (item.contentType === 'report-html') {
+        if (!configs.id) return
+        return this.$http.get({ entityId: 'FM_FORM', id: configs.id })
+          .then(result => this.goPage({ component: result.data.TYPE === 'excelReport' ? 'excel-design' : 'form-design', metaId: 'FM_FORM', params: { id: configs.id, callback } }))
+          .catch(e => this.$message.error(e.message || '打开报表设计失败'))
+      }
+      if (item.contentType !== 'chart') return
+      this.$createPage({
+        metaId: 'FM_REPORT_BASE',
+        openType: '2',
+        defaultFullscreen: true,
+        withHeader: false,
+        component: 'chart-design',
+        chartConfigs: configs,
+        setChartConfig: configs => {
+          this.changeItemConfigs(item.id, this.$_.cloneDeep(configs), null, 'cover')
+          callback()
+        }
+      })
+    },
+    async deleteMobileItem (item) {
+      try {
+        await this.$confirm('删除该组件及其内部组件？', '删除组件', { type: 'warning' })
+      } catch (e) { return }
+      removeDashboardItem(this.selectComponentList, item.id, this.allComponentConfigs)
+      this.selectComponent = null
+      this.$refs.dashboardDesign.selectComponent = null
+    },
+    async saveMobileDashboard () {
+      if (this.mobileSaving) return false
+      this.mobileSaving = true
+      const revision = this.mobileRevision
+      try {
+        const saved = await this.saveConfigs()
+        if (saved) {
+          if (revision === this.mobileRevision) this.mobileDirty = false
+          this.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+          this.$message.success('移动端看板已保存')
+        }
+        return saved
+      } catch (e) {
+        this.$message.error(e.message || '保存移动端看板失败')
+        return false
+      } finally { this.mobileSaving = false }
+    },
+    warnUnsavedMobile (event) {
+      if (this.isMobileDashboard && this.mobileDirty) {
+        event.preventDefault()
+        event.returnValue = ''
+      }
+    },
+    async confirmLeaveMobile () {
+      if (!this.isMobileDashboard || !this.mobileDirty) return true
+      try {
+        await this.$confirm('移动端看板有未保存的修改，是否离开？', '未保存修改', { confirmButtonText: '离开', cancelButtonText: '继续设计', type: 'warning', customClass: 'dashboard-leave-confirm', closeOnClickModal: false })
+        return true
+      } catch (e) { return false }
+    },
+    $refesh () {
+      if (this.$refs.dashboardDesign) this.$refs.dashboardDesign.$refesh()
+    },
+    getPageInfo () {
+      return this.getPageId()
+        .then(page => {
+          const { metaId } = page
+          if (metaId) this.pageMetaId = metaId
+          this.getMetaId()
+            .then(() => {
+              this.getDefaultConfig()
+              this.getThemeList()
+                .then(() => {
+                  this.getConfigThemeStyles()
+                })
+              this.loadConfig = true
+            })
+          return page
+        })
+    },
+    getPageId () {
+      // 获取当前page
+      if (!this.$query.id || !this.$_.isEmpty(this.currentPage)) {
+        return Promise.resolve(this.currentPage)
+      }
+      return this.$store.dispatch({
+        type: 'ADD_PAGE',
+        pageId: this.$query.id
+      })
+    },
+    getMetaId () {
+      if (!this.currentMetaId || this.currentMeta) {
+        return Promise.resolve(this.currentMeta)
+      } else {
+        return this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: this.currentMetaId
+        })
+      }
+    },
+    getComponetName (component) {
+      if (component && component.PATH) {
+        let project = 'frame'
+        let pathName = ''
+        const pagePath = component.PATH
+        const rootMatch = pagePath.match(/^@\/\w+\//)
+        if (rootMatch) {
+          project = rootMatch[0].replace(/[@|/]/g, '')
+          pathName = pagePath.split(rootMatch)[1].replace('.vue', '')
+        }
+        // 根据路径定义组件名 SubList  转为 sub-list  layout/SubList 转为 layout-sub-list
+        const componentPath = pathName.replace('views/', '').replace('components/', '').replace('packages/', '').replace(/\//g, '-').replace(/(\w)([A-Z])/g, '$1-$2').toLowerCase()
+        const componentName = (project === 'frame' ? '' : (project + '-')) + componentPath
+
+        return componentName
+      }
+      return null
+    },
+    getVisualComponent (component) {
+      if (component && component.VISUAL_CONFIG_PATH) {
+        let pathName = ''
+        const pagePath = component.VISUAL_CONFIG_PATH
+        const rootMatch = pagePath.match(/^@\/(frame\/|product\/|project\/)?/)
+        if (rootMatch) {
+          pathName = pagePath.split(rootMatch[0])[1].replace('.vue', '')
+        }
+        // 根据路径定义组件名 SubList  转为 sub-list  layout/SubList 转为 layout-sub-list
+        const componentPath = pathName.replace('views/', '').replace('components/', '').replace('packages/', '').replace(/\//g, '-').replace(/(\w)([A-Z])/g, '$1-$2').toLowerCase()
+        const componentName = componentPath
+
+        return componentName
+      }
+      return null
+    },
+    getComponentList () {
+      this.$http.list({
+        entityId: 'FM_PAGE',
+        'scope.TYPE': '01',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc'
+      })
+        .then(data => {
+          const componentList = data.entitys
+          componentList.forEach(item => {
+            item.componentName = item.CODE
+            if (item.COMPONENT_TYPE === 'page') {
+              const componentName = this.getComponetName(item)
+              item.componentName = componentName
+            }
+            const visualComponentName = this.getVisualComponent(item)
+            item.visualComponentName = visualComponentName
+          })
+          this.componentList = [...componentList]
+        })
+    },
+    getDefaultConfig () {
+      // 获取默认组件
+      const { dashboardType, compId, componentInfo = {}, itemConfigs: queryItemConfigs = {} } = this.$query
+      const { config: pageConfigs = {} } = this.currentPage || {}
+      this.chooseDesignTarget = dashboardType !== 'component' && !(pageConfigs.items || []).length && !['pc', 'mobile'].includes(pageConfigs.designTarget)
+      // 加载即按 v3 规范化（深拷贝：补页面 grid、历史容器显式 grid、version '3.0'；旧字段如 autoHeight 保留），
+      // 保存时原样写回——旧页面打开设计器就会被写成 v3，运行态两种版本都能读
+      if (dashboardType === 'component') {
+        this.upCompId = compId
+        const { config = {} } = componentInfo
+        const { items = [], ...globalConfigs } = normalizeDashboardConfig({ ...config, ...(queryItemConfigs[compId] || {}) })
+        this.selectComponentList = ensureGridItemKey(items) // 已选组件
+        this.pageGlobalConfigs = mergeGridConfigs(globalConfigs).configs // 页面全局配置（autoHeight 与 grid 对齐）
+        this.allComponentConfigs = this.$_.cloneDeep(queryItemConfigs) // 组件配置
+      } else {
+        const { itemConfigs = {}, items = [], ...globalConfigs } = normalizeDashboardConfig(pageConfigs)
+        this.selectComponentList = ensureGridItemKey(items) // 已选组件
+        this.pageGlobalConfigs = mergeGridConfigs(globalConfigs).configs // 页面全局配置（autoHeight 与 grid 对齐）
+        this.allComponentConfigs = itemConfigs // 组件配置
+        if (pageConfigs.version !== this.version) {
+          this.upgradePageConfig()
+        }
+      }
+      if (!this.pageGlobalConfigs.theme) this.pageGlobalConfigs.theme = DEFAULT_DASHBOARD_THEME
+      // 如果是组件，获取组件内子组件
+      // 深度拷贝 防止修改pageConfigs参数
+      // this.pageSetting()
+      this.getScopeConfigs()
+      this.getEntityRelation()
+      this.$nextTick(() => { this.configReady = true })
+    },
+    upgradePageConfig () {
+      // 判断组件是否存在重复id，存在则重新生成，不存在则查找对应层级的配置，如果有则更新配置
+      const ids = []
+      const upgradeWidget = (arr, parentId) => {
+        arr.forEach(item => {
+          const oldId = item.id
+          if (parentId) {
+            while (ids.includes(item.id)) {
+              const code = item.contentType.replace(/-/g, '_')
+              item.id = code + '_' + this.$util.genId()
+            }
+            ids.push(item.id)
+            item.i = item.id
+            const oldWidgetConifg = this.allComponentConfigs[parentId + '-' + oldId]
+            if (oldWidgetConifg) {
+              delete this.allComponentConfigs[parentId + '-' + oldId]
+              this.allComponentConfigs = { ...this.allComponentConfigs, [item.id]: { ...oldWidgetConifg } }
+            }
+          }
+          if (item.items) {
+            upgradeWidget(item.items, parentId ? parentId + '-' + oldId : oldId)
+          }
+        })
+      }
+      upgradeWidget(this.selectComponentList)
+      this.pageGlobalConfigs.version = this.version
+    },
+    getReportList () {
+      this.reportLoading = true
+      this.$http.list({
+        entityId: 'FM_REPORT_BASE',
+        'scope.SYSTEM': this.SYSTEM,
+        scopeParams: JSON.stringify(this.reportScopeParams),
+        page: this.currentReportPage,
+        limit: 20
+      })
+        .then(data => {
+          this.reportList = data.entitys
+          this.reportTotal = data.total
+          this.reportList.forEach(item => (this.reportMap[item.ID] = item))
+          setTimeout(() => {
+            this.reportLoading = false
+          }, 300)
+        })
+        .catch(err => {
+          this.reportLoading = false
+          this.$message.error(err.message)
+        })
+    },
+    getThemeList () {
+      return this.$http.list({
+        entityId: 'FM_CHART_THEME',
+        order_field: 'SCOPE,ORDER_NUM',
+        order_mode: 'desc,asc',
+        scopeParams: [
+          { field: 'SCOPE', values: 'frame', link: 'or' },
+          { field: 'CLIENT', values: this.CLIENT }
+        ]
+      })
+        .then(data => {
+          this.themeList = data.entitys
+          return this.themeList
+          // if (this.pageGlobalConfigs.theme) this.activeTheme = this.pageGlobalConfigs.theme
+        })
+    },
+    savePreset () {
+      this.saveThemeDialog = true
+      const themeItem = this.themeList.find(item => item.CODE === this.activeTheme)
+      this.themeFormData = {
+        STYLE: themeItem?.STYLE
+      }
+    },
+    saveTheme () {
+      const formData = {
+        SCOPE: 'client'
+      }
+      for (const key in this.themeFormData) {
+        if (!key.includes('#')) {
+          formData[key] = this.themeFormData[key]
+        }
+      }
+      if (!this.isEditTheme || !this.themeFormData.ID) formData.CONTENT = JSON.stringify(this.themeStyles)
+      const params = {
+        entityId: 'FM_CHART_THEME',
+        bean: {
+          ...formData,
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM
+        }
+      }
+      if (this.themeFormData.ID) {
+        params.action = 'update'
+      }
+      return this.$http.save(params)
+        .then(() => {
+          this.$message.success(this.$t('save successfully'))
+          this.isEditTheme = false
+          this.saveThemeDialog = false
+          this.getThemeList()
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    },
+    themeHandleCommand (theme, command) {
+      if (command === 'edit') {
+        this.saveThemeDialog = true
+        this.isEditTheme = true
+        this.themeFormData = { ...theme }
+      } else if (command === 'remove') {
+        this.$confirm('是否删除该预设?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$http.removeMulti({
+            entityId: 'FM_CHART_THEME',
+            ids: theme.ID
+          })
+            .then(() => {
+              this.$message.success(this.$t('delete successfully'))
+              this.getThemeList()
+            })
+            .catch(err => {
+              this.$message.error(err.message || this.$t('fail to delete'))
+            })
+        })
+      } else if (command === 'config') {
+        this.editTheme = theme
+        this.isEditTheme = false
+      }
+    },
+    currentReportChange (v) {
+      this.currentReportPage = v
+      this.getReportList()
+    },
+    searchReport (v) {
+      this.reportScopeParams = v
+      this.currentReportPage = 1
+      this.getReportList()
+    },
+    getDashboardList () {
+      this.dashboardLoading = true
+      this.$http.list({
+        entityId: 'FM_PAGE_CONFIG',
+        'scope.SYSTEM': this.SYSTEM,
+        'scope.PAGE|CODE': 'dashboard',
+        scopeParams: JSON.stringify(this.dashboardScopeParams),
+        page: this.currentDashbaordPage,
+        limit: 10
+      })
+        .then(data => {
+          this.dashboardTotal = data.total
+          setTimeout(() => {
+            this.dashboardLoading = false
+          }, 300)
+          // 获取所有组件和配置
+          data.entitys.forEach(item => {
+            const pageConfig = item.CONTENT ? JSON.parse(item.CONTENT) : {}
+            const { items = [], itemConfigs = {} } = pageConfig
+            const children = []
+            items.forEach(comp => {
+              children.push({
+                ...comp,
+                configs: itemConfigs[comp.id] || {}
+              })
+              if (comp.items) {
+                comp.items.forEach(tab => {
+                  tab.items.forEach(child => {
+                    children.push({
+                      ...child,
+                      configs: itemConfigs[comp.id + '-' + child.id] || {}
+                    })
+                  })
+                })
+              }
+            })
+            item.children = children
+          })
+          this.dashboardList = data.entitys.map(item => {
+            item.children = item.children.filter(child => child.contentType === 'chart')
+            return item
+          })
+        })
+        .catch(err => {
+          this.dashboardLoading = false
+          this.$message.error(err.message)
+        })
+    },
+    currentDashbaordChange (v) {
+      this.currentDashboardPage = v
+      this.getDashboardList()
+    },
+    searchDashboard (v) {
+      this.dashboardScopeParams = v
+      this.currentDashboardPage = 1
+      this.getDashboardList()
+    },
+    selectReport (item) {
+      const index = this.selectedReportList.findIndex(report => report === item.ID)
+      if (index !== -1) {
+        this.selectedReportList.splice(index, 1)
+        this.selectedReportDataList.splice(index, 1)
+      } else {
+        this.selectedReportList.push(item.ID)
+        this.selectedReportDataList.push(item)
+      }
+    },
+    selectDashboardComp (dashbaord, item) {
+      const id = dashbaord.ID + '-' + item.id
+      const index = this.selectedDashboardCompList.findIndex(comp => comp === id)
+      if (index !== -1) {
+        this.selectedDashboardCompList.splice(index, 1)
+        this.selectedDashboardCompDataList.splice(index, 1)
+      } else {
+        this.selectedDashboardCompList.push(id)
+        this.selectedDashboardCompDataList.push(item)
+      }
+    },
+    changeDashboardSelect (dashboard, v) {
+      dashboard.children.forEach(item => {
+        const id = dashboard.ID + '-' + item.id
+        const index = this.selectedDashboardCompList.indexOf(id)
+        if (index !== -1) {
+          if (!v) this.selectedDashboardCompList.splice(index, 1)
+        } else {
+          if (v) this.selectedDashboardCompList.push(id)
+        }
+      })
+    },
+    switchDashboardFoldFn (dashboard) {
+      this.foldDashboardMap[dashboard.ID] = !this.foldDashboardMap[dashboard.ID]
+    },
+    quoteComp () {
+      for (let i = 0; i < this.selectedDashboardCompDataList.length; i++) {
+        const comp = this.selectedDashboardCompDataList[i]
+        if (comp) {
+          this.addComponentToDashboard({
+            w: comp.w,
+            h: comp.h,
+            TITLE: comp.title,
+            CODE: comp.contentType
+          }, { ...comp.configs })
+        }
+      }
+      this.copyComponentDialog = false
+      this.selectedDashboardCompDataList = []
+      this.selectedReportDataList = []
+      this.selectedReportList = []
+      this.selectedDashboardCompList = []
+    },
+    copyReport (id) {
+      return this.$http.save({
+        entityId: 'FM_REPORT_BASE',
+        action: 'copy',
+        oldRecordId: id
+      })
+    },
+    async copyComp () {
+      // 获取选中组件，添加
+      for (let i = 0; i < this.selectedReportDataList.length; i++) {
+        const report = this.selectedReportDataList[i]
+
+        if (report) {
+          const data = await this.copyReport(report.ID)
+          this.addReportToDashboard({ id: data.id })
+        }
+      }
+      for (let i = 0; i < this.selectedDashboardCompDataList.length; i++) {
+        const comp = this.selectedDashboardCompDataList[i]
+        if (comp) {
+          if (comp.contentType === 'report-chart') {
+            const data = await this.copyReport(comp.configs.id)
+            this.addComponentToDashboard({
+              w: comp.w,
+              h: comp.h,
+              TITLE: comp.title,
+              CODE: comp.contentType
+            }, { ...comp.configs, id: data.id })
+          } else {
+            this.addComponentToDashboard({
+              w: comp.w,
+              h: comp.h,
+              TITLE: comp.title,
+              CODE: comp.contentType
+            })
+          }
+        }
+      }
+      this.copyComponentDialog = false
+      this.selectedDashboardCompDataList = []
+      this.selectedReportDataList = []
+      this.selectedReportList = []
+      this.selectedDashboardCompList = []
+    },
+    setReportType (reportType) {
+      this.addReportForm.TYPE = reportType.type
+      if (reportType.type === '1') {
+        this.addReportForm.CHART_TYPE = null
+      } else {
+        this.addReportForm.CHART_TYPE = reportType.chartType
+      }
+    },
+    openAddReportDialog () {
+      this.addReportDialog = true
+      this.addReportForm.OBJECT = this.currentMetaId
+    },
+    saveReport () {
+      if (this.addReportForm.TYPE === 'numStatistic') {
+        const newComp = this.addComponentToDashboard({ TITLE: '数字统计', CODE: 'num-statistic' })
+        if (this.addReportForm.OBJECT) {
+          this.changeItemConfigs(newComp.id, { metaId: this.addReportForm.OBJECT.id })
+        }
+        this.addReportForm = {}
+        this.addReportDialog = false
+      } else if (this.addReportForm.TYPE === 'dashboardTitle') {
+        this.addComponentToDashboard({ TITLE: '标题', CODE: 'dashboard-title', w: 48, h: 3 })
+        this.addReportForm = {}
+        this.addReportDialog = false
+      } else if (this.addReportForm.TYPE === 'dashboardDiv') {
+        this.addComponentToDashboard({ TITLE: '容器', CODE: 'dashboard-div', w: 10, h: 10 })
+        this.addReportForm = {}
+        this.addReportDialog = false
+      } else if (this.addReportForm.TYPE === 'form') {
+        if (!this.addReportForm.FORM_TYPE) {
+          this.$message.error('请选择报表类型')
+          return
+        }
+        this.$http.save({
+          entityId: 'FM_FORM',
+          'bean.CLIENT': this.CLIENT,
+          'bean.SYSTEM': this.SYSTEM,
+          'bean.TYPE': this.addReportForm.FORM_TYPE
+        })
+          .then(data => {
+            this.addComponentToDashboard({ TITLE: '报表', CODE: 'report-html' }, { id: data })
+            this.addReportForm = {}
+            this.addReportDialog = false
+          })
+          .catch(err => this.$message.error(err.message))
+      } else {
+        const metaId = this.addReportForm.OBJECT ? this.addReportForm.OBJECT.id || this.addReportForm.OBJECT : ''
+        const metaViewId = this.addReportForm.OBJECT_VIEW ? this.addReportForm.OBJECT_VIEW.id || this.addReportForm.OBJECT_VIEW : ''
+        this.addChartToDashboard({ type: this.addReportForm.TYPE === '1' ? 'table' : this.addReportForm.CHART_TYPE, metaId, metaViewId })
+        this.addReportForm = {}
+        this.addReportDialog = false
+      }
+    },
+    async back () {
+      if (!await this.confirmLeaveMobile()) return
+      this.mobileDirty = false
+      if (this.newWindow) {
+        window.close()
+      } else if (this.upCompId) {
+        this.backPage()
+      } else {
+        this.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+        this.backPage({ reload: true })
+      }
+    },
+    getEntityRelation () {
+      this.$http.$get({
+        entityId: 'FM_ENTITY_RELATION',
+        action: 'getEntityRelationTree',
+        mainEntity: this.currentMetaId
+      })
+        .then(data => {
+          data.forEach(relation => {
+            relation.label = relation.title
+            relation.value = relation.flag
+            relation.children = relation.childrens
+            if (relation.childrens) {
+              relation.childrens.forEach(childRelation => {
+                childRelation.value = relation.flag + '#' + childRelation.flag
+                childRelation.label = childRelation.title
+              })
+            }
+          })
+          this.relationList = data
+        })
+    },
+    /**
+     * 获取查询配置
+     */
+    getScopeConfigs () {
+      this.$http.list({
+        action: 'getAllSearchConfig',
+        entityId: 'FM_SEARCH_CONFIG'
+      })
+        .then(data => {
+          this.scopeConfigs = data
+        })
+    },
+    setComponentId (str) {
+      // const formatStr = str.replace(/-/g, '_')
+      // let id = formatStr
+      // let index = 0
+      // const getIsExit = (code, arr = this.selectComponentList) => {
+      //   for (const item of arr) {
+      //     if (item.id === id) {
+      //       return true
+      //     } else if (item.items) {
+      //       const flag = getIsExit(code, item.items)
+      //       if (flag) return flag
+      //     }
+      //   }
+      // }
+      // while (getIsExit(id)) {
+      //   id = formatStr + '_' + ++index
+      // }
+      return str + '_' + this.$util.genId()
+    },
+    changeItemConfigs (key, configs = {}, type, mode) {
+      // 如果在
+      if (key === 'page') {
+        if (configs.componentName !== undefined) {
+          configs.title = configs.componentName
+          delete configs.componentName
+        }
+        // 全局面板的布局扁平键折进 grid（autoHeight 与 grid.rowHeight 'auto' 双向同步）；列数变了先问是否按比例换算现有组件
+        const { configs: next, colNum } = mergeGridConfigs(this.pageGlobalConfigs, configs)
+        if (colNum) {
+          this.confirmRescale(colNum).then(rescale => {
+            if (rescale) {
+              rescaleItemsToColNum(this.selectComponentList, colNum.from, colNum.to)
+              this.selectComponentList = [...this.selectComponentList]
+            }
+            this.pageGlobalConfigs = next
+          })
+          return
+        }
+        this.pageGlobalConfigs = next
+      } else {
+        // this.upCompId ? this.upCompId + '-' + key :
+        const compId = key
+        const itemConfig = this.allComponentConfigs[compId] || {}
+        // 组件属性
+        const { flex, layout, direction, justify, align, style, componentName: title, visualComponentName, span, xsspan, items, ...otherConfigs } = configs
+        let componentAttris = {
+          flex,
+          layout,
+          direction,
+          justify,
+          align,
+          style,
+          title,
+          span,
+          xsspan,
+          items
+        }
+        if (type !== 'component') {
+          if (mode === 'cover') {
+            this.allComponentConfigs[compId] = { ...otherConfigs }
+          } else {
+            this.allComponentConfigs[compId] = { ...itemConfig, ...otherConfigs }
+          }
+        } else {
+          componentAttris = { ...componentAttris, ...configs }
+        }
+        // 设置组件属性
+        const selectComponentList = [...this.selectComponentList]
+        const id = key
+        const changeItem = (componentList) => {
+          for (const component of componentList) {
+            if (component.id === id) {
+              for (const attri in componentAttris) {
+                if (componentAttris[attri] !== undefined) {
+                  component[attri] = componentAttris[attri]
+                  if (component[attri] === null) delete component[attri]
+                }
+              }
+              if (this.selectComponent && compId === this.selectComponent.id) {
+                this.selectComponent = { ...this.selectComponent, ...(this.isMobileDashboard ? { config: { ...component, ...component.configs, ...this.allComponentConfigs[compId] } } : { component }) }
+              }
+            } else if (component.items && component.items.length > 0) {
+              changeItem(component.items)
+            }
+            if (!component.items) component.items = []
+          }
+        }
+        changeItem(selectComponentList)
+        this.selectComponentList = [...selectComponentList]
+      }
+    },
+    // 改列数：询问是否按比例换算现有组件的位置与宽度（取消 = 只改参数、坐标不动）。resolve 布尔值，永不 reject
+    confirmRescale ({ from, to }) {
+      return this.$confirm(`列数将从 ${from} 改为 ${to}，按比例换算现有组件位置与宽度？（不换算则组件保持原网格坐标）`, '修改列数', {
+        confirmButtonText: '换算',
+        cancelButtonText: '不换算',
+        customClass: 'dashboard-grid-rescale-confirm',
+        type: 'warning',
+        closeOnClickModal: false
+      }).then(() => true).catch(() => false)
+    },
+    addComponent (component, upId = 'root') {
+      const newComp = {
+        id: component.id,
+        title: component.TITLE,
+        contentType: component.componentName || component.CODE
+      }
+      if (upId === 'root') {
+        // 增加upId配置
+        this.selectComponentList.push(newComp)
+      } else {
+        // 查找其父组件
+        const selectComponentList = [...this.selectComponentList]
+        const ids = upId.split('-')
+        const componentList = ids.reduce((componentList, id) => {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          if (!componentItem.items) componentItem.items = []
+          return componentItem.items
+        }, selectComponentList)
+        componentList.push(newComp)
+        this.selectComponentList = selectComponentList
+        this.$forceUpdate()
+      }
+    },
+    addComponentToDashboard (component, configs) {
+      this.addComponentDialog = false
+      const dashboard = this.$refs.dashboardDesign
+      // 获取最后一个元素的位置
+      let max = 0
+      // let maxItem = null
+      const parent = this.isMobileDashboard && this.mobileAddParent
+        ? indexDashboardItems(this.selectComponentList).get(String(this.mobileAddParent)) : null
+      const destination = parent ? (parent.items || (parent.items = [])) : this.selectComponentList
+      for (const item of (this.isMobileDashboard ? destination : dashboard.layout)) {
+        if (!max) {
+          max = item.y + item.h
+          // maxItem = item
+        } else if (item.y + item.h > max) {
+          max = item.y + item.h
+          // maxItem = item
+        }
+      }
+      const id = this.setComponentId(component.CODE)
+      const newComp = {
+        x: 0,
+        y: max, // puts it at the bottom
+        w: this.isMobileDashboard ? (['num-statistic', 'card-num'].includes(component.CODE) ? this.pageGlobalConfigs.grid.colNum / 2 : this.pageGlobalConfigs.grid.colNum) : component.w || 10,
+        h: component.h || (this.isMobileDashboard && ['chart', 'report-chart', 'dashboard-tabs', 'dashboard-div'].includes(component.CODE) ? 16 : 10),
+        i: id,
+        id: id,
+        title: component.TITLE,
+        contentType: component.CODE
+      }
+      if (this.isMobileDashboard) {
+        if (component.CODE === 'dashboard-tabs') newComp.items = [{ id: 'tabpane_' + this.$util.genId(), name: '标签项1', items: [] }]
+        destination.push(newComp)
+        // 配置更新会替换主布局数组；先插入再写配置，避免向旧数组添加后丢失报表。
+        if (configs) this.changeItemConfigs(id, configs)
+        this.mobileAddParent = null
+        this.$nextTick(() => dashboard.openConfig(newComp))
+        return newComp
+      }
+      dashboard.layout.push(newComp)
+      this.selectComponentList.push(newComp)
+      if (configs) this.changeItemConfigs(id, configs)
+      return newComp
+    },
+    addChartToDashboard (data, configs = {}) {
+      if (data) {
+        this.addComponentToDashboard({ CODE: 'chart', TITLE: '未命名统计报表', ...configs }, { ...data })
+      }
+    },
+    addReportToDashboard (data, configs = {}) {
+      if (data) {
+        this.addComponentToDashboard({ CODE: 'report-chart', TITLE: '报表', ...configs }, { id: data.id })
+      }
+    },
+    addTabsToDashboard () {
+      this.addComponentToDashboard({ CODE: 'dashboard-tabs', TITLE: '标签页' })
+    },
+    deleteSelectComponent (id, e) {
+      e && e.stopPropagation()
+      const selectComponentList = [...this.selectComponentList]
+      const ids = id.split('-')
+      ids.reduce((componentList, id, index) => {
+        if (index === ids.length - 1) {
+          const componentIndex = componentList.findIndex(item => item.id === id) || {}
+          componentList.splice(componentIndex, 1)
+        } else {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          return componentItem.items
+        }
+      }, selectComponentList)
+      this.selectComponentList = selectComponentList
+      this.$forceUpdate()
+    },
+    changeConfigs (id, newConfigs) {
+      const configs = this.componentConfigs[id] || {}
+      this.componentConfigs[id] = { ...configs, ...newConfigs }
+    },
+    deleteConfigs (id) {
+      delete this.allComponentConfigs[id]
+    },
+    pageSetting () {
+      const { visualConfigPath } = this.currentPage
+      const name = this.getVisualComponent({ VISUAL_CONFIG_PATH: visualConfigPath })
+      this.selectComponent = { type: 'page', id: 'page', ...this.currentPage, visualComponentName: name, config: this.pageGlobalConfigs }
+    },
+    // tab：抽屉打开时定位的 tab（chart 项操作条的「布局」按钮传 'style'，R29）；openSeq 每次打开递增，面板据此区分「打开」与配置改动引起的对象替换
+    clickComponent (componentId, componentInfo, component, upId, tab) {
+      this.openSeq = (this.openSeq || 0) + 1
+      this.selectComponent = { id: componentId, ...componentInfo, config: component, upId, openTab: tab, openSeq: this.openSeq }
+    },
+    scrollToConfig (componentId) {
+      // const component = this.$refs.visualComponent
+      // if (!component) return
+      // const configComponent = component.$refs[`config-${componentId}`]
+      // if (configComponent) {
+      //   const el = configComponent.$el || configComponent
+      //   const configContainer = this.$refs.configContainer
+      //   configContainer.scrollTop = el.offsetTop - 20
+      // }
+    },
+    setComponentConfig (componentList, itemConfigs = {}, upId) {
+      componentList.forEach(component => {
+        const componentId = upId ? upId + '-' + component.id : component.id
+        const configComponentOuter = this.$refs[`config-${component.id}`]
+        if (configComponentOuter) {
+          const configComponent = configComponentOuter.$refs.component
+          if (configComponent) {
+            const configs = configComponent.getConfigs() || {}
+            const { span, flex, componentName } = configs
+            if (span) component.span = span
+            delete component.configs
+            if (componentName) {
+              component.title = componentName
+              delete configs.componentName
+            }
+            if (flex) {
+              component.flex = flex
+              delete configs.flex
+            }
+            const defaulConfigs = itemConfigs[componentId] || {}
+            itemConfigs[componentId] = { ...defaulConfigs, ...configs }
+          }
+        }
+        const { items = [] } = component
+        if (items.length > 0) {
+          this.setComponentConfig(items, itemConfigs, componentId)
+        }
+      })
+    },
+    setContainerDefaultItems (id, items) {
+      if (id === 'page') {
+        const { config: pageConfigs = {} } = this.currentPage || {}
+        if (!pageConfigs.items) this.selectComponentList = items
+      } else {
+        const selectComponentList = [...this.selectComponentList]
+        const ids = id.split('-')
+        ids.reduce((componentList, id, index) => {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          if (!componentItem.items) {
+            if (index === ids.length - 1) componentItem.items = items
+            else componentItem.items = []
+          }
+          return componentItem.items
+        }, selectComponentList)
+
+        this.selectComponentList = selectComponentList
+      }
+    },
+    cancelThemePancel () {
+      if (this.editTheme) {
+        this.editTheme = null
+      } else {
+        this.showPanel = ''
+        this.activeTheme = this.pageGlobalConfigs.theme
+      }
+      // 还原themeStyles
+      this.getConfigThemeStyles()
+    },
+    selectTheme (theme) {
+      this.activeTheme = theme.CODE
+      this.changethemeStyles(JSON.parse(theme.CONTENT))
+    },
+    getConfigThemeStyles () {
+      const { theme, themeStyles } = this.pageGlobalConfigs
+      // 缺少主题时选择经典白；主题列表返回实际 CODE 后同步到页面配置，避免空值覆盖默认选择。
+      let selectedTheme = theme || DEFAULT_DASHBOARD_THEME
+      let themeItem = this.themeList.find(item => item.CODE === selectedTheme)
+      if (!themeItem && selectedTheme === DEFAULT_DASHBOARD_THEME) {
+        themeItem = this.themeList.find(item => item.NAME === '经典白' && item.CODE)
+        if (themeItem) selectedTheme = themeItem.CODE
+      }
+      if (this.pageGlobalConfigs.theme !== selectedTheme) this.pageGlobalConfigs.theme = selectedTheme
+      this.activeTheme = selectedTheme
+      if (themeStyles) {
+        this.styleType = 'custom'
+        this.themeStyles = themeStyles
+      } else {
+        this.styleType = 'presets'
+        this.themeStyles = themeItem?.CONTENT ? (typeof themeItem.CONTENT === 'string' ? JSON.parse(themeItem.CONTENT) : themeItem.CONTENT) : null
+      }
+    },
+    changethemeStyles (v) {
+      this.themeStyles = v
+      // this.changeItemConfigs('page', { themeStyles: v })
+    },
+    setTheme () {
+      if (this.editTheme) {
+        this.themeFormData = { ...this.editTheme }
+        this.saveTheme()
+          .then(() => {
+            this.editTheme = null
+          })
+      } else {
+        this.showPanel = ''
+        if (this.styleType === 'custom') {
+          this.changeItemConfigs('page', { themeStyles: this.themeStyles })
+        } else {
+          this.changeItemConfigs('page', { theme: this.activeTheme, themeStyles: null })
+        }
+      }
+    },
+    delaySaveConfigs () {
+      if (this.chooseDesignTarget || this.choosingDesignTarget) return
+      if (this.isMobileDashboard) {
+        if (this.configReady) {
+          this.mobileDirty = true
+          this.mobileRevision++
+        }
+        return
+      }
+      if (this.timer) {
+        clearTimeout(this.timer)
+      }
+      this.timer = setTimeout(() => {
+        this.saveConfigs()
+        clearTimeout(this.timer)
+        this.timer = null
+      }, 1000)
+    },
+    saveConfigs (event, next, errorFn) {
+      const selectComponentList = [...this.selectComponentList]
+      const rawItemConfigs = { ...this.allComponentConfigs }
+      this.setComponentConfig(selectComponentList, rawItemConfigs, '')
+      // 持久化形态（深拷贝，不影响设计器内存中正在使用的数据）：剥离与 id 重复的 i、剥掉漏进 itemConfigs 的网格项布局键（x/y/w/h/i/float/z/static/min·max、容器的 grid）；
+      // 下面的空值清洗也只在这份拷贝上做——就地删内存里的键会触发 allComponentConfigs 的 deep watch、多发一次保存
+      const { itemConfigs, ...config } = stripDashboardConfig({ ...this.pageGlobalConfigs, version: this.version, items: selectComponentList, itemConfigs: rawItemConfigs })
+      for (const key in itemConfigs) {
+        const itemConfig = itemConfigs[key]
+        for (const itemKey in itemConfig) {
+          if (itemConfig[itemKey] === null || itemConfig[itemKey] === undefined) {
+            delete itemConfig[itemKey]
+          }
+        }
+        if (this.$_.isEmpty(itemConfig)) {
+          delete itemConfigs[key]
+        }
+      }
+      // 获取所有的配置
+      this.selectComponentList = [...selectComponentList]
+      if (this.upCompId) {
+        // 设置组件和配置
+        const { setCompConfigs } = this.$query
+        setCompConfigs(config, itemConfigs)
+      } else {
+        // 更改组件名称和flex布局
+        config.itemConfigs = itemConfigs
+        return import(/* webpackChunkName: "standalone" */'@babel/standalone')
+          .then(babel => {
+            // 获取页面全局配置
+            const es5 = babel.transform(config.JS || '', { presets: ['env'] })
+            config.compileJS = es5.code
+            for (const key in config) {
+              if (config[key] === null) {
+                delete config[key]
+              }
+            }
+            return this.savePageConfigs(config, next, errorFn)
+          })
+      }
+    },
+    saveGlobalConfigs () {
+      this.pageSettingDrawer = false
+    },
+    savePageConfigs (config) {
+      // 获取全局参数
+      let formParams = {}
+      const globalConfig = this.$refs.globalConfig
+      if (globalConfig) {
+        const formComp = this.getComponentById('form', globalConfig)
+        if (formComp) {
+          formParams = formComp.getFormData()
+          if (!formParams) return
+        }
+      }
+      // 自定义保存目标：常用报表看板写回 FM_CA_REPORT_BOARD.DASHBOARD_CONFIG；
+      // 未配置 saveEntityId 时按原逻辑写 FM_PAGE_CONFIG.CONTENT
+      const saveEntityId = this.$query.saveEntityId
+      const saveField = this.$query.saveField || 'CONTENT'
+      return this.$http.update({
+        entityId: saveEntityId || this.$metaId,
+        ...formParams,
+        [`bean.${this.$metaKey}`]: this.$query.id,
+        [`bean.${saveField}`]: JSON.stringify(config, null, '\t')
+      })
+        .then(data => {
+          // this.$message.success(this.$t('save successfully'))
+          // this.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+          // 重新获取页面
+          // this.$store.dispatch('ADD_PAGE', { pageId: this.$query.id })
+          if (this.newWindow) {
+            // 直接用 URL 打开设计器时没有 opener，判空以免保存成功却弹错误提示（与 PageDesigner 一致）
+            if (window.opener) window.opener.postMessage({ pageId: this.$query.id, type: 'configPage' }, '/')
+          }
+          return true
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('fail to save'))
+          return false
+        })
+    },
+    switchMobile () {
+      const { mItems } = this.pageGlobalConfigs
+      this.openSuspendedPopup({
+        component: 'visual-config-dashboard-mobile',
+        params: {
+          withHeader: false,
+          componentList: this.selectComponentList,
+          mobileComponentList: mItems,
+          theme: this.activeTheme,
+          themeStyles: this.themeStyles,
+          itemConfigs: this.allComponentConfigs,
+          // 页面全局配置：移动端设计器据其 grid 推网格参数（行高沿用页面、间距换成移动端 [8,8]），与运行态移动端一致
+          globalConfigs: this.pageGlobalConfigs,
+          changeMItems: (v) => {
+            this.pageGlobalConfigs.mItems = v
+            this.mobileComponentList = v
+          }
+        }
+      })
+    },
+    updatePreviewViewport () {
+      this.previewViewportWidth = window.innerWidth
+      this.previewViewportHeight = window.innerHeight
+    },
+    openSuspendedPopup (page) {
+      this.previewSuspended = true
+      this.$nextTick(() => {
+        const previousPopups = new Set(window.openedPopup || [])
+        this.goPage(page)
+        const popup = (window.openedPopup || []).find(item => !previousPopups.has(item) && !item.closed)
+        if (!popup) {
+          this.previewSuspended = false
+          return
+        }
+        if (this.previewPopupTimer) clearInterval(this.previewPopupTimer)
+        this.previewPopupTimer = setInterval(() => {
+          if (!popup.disposed) return
+          clearInterval(this.previewPopupTimer)
+          this.previewPopupTimer = null
+          this.previewSuspended = false
+        }, 200)
+      })
+    },
+    preview () {
+      if (this.isMobileDashboard) {
+        this.updatePreviewViewport()
+        this.mobilePreviewVisible = true
+        return
+      }
+      this.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+      setTimeout(() => {
+        this.openSuspendedPopup({
+          pageId: this.$query.id
+        })
+      }, 100)
+    }
+  },
+  watch: {
+    pageGlobalConfigs: {
+      handler (v) {
+        if (!this.$_.isEqual(this.oldPageGlobalConfigs, v)) {
+          this.delaySaveConfigs()
+        }
+        // R21：此前误写成 oldSelectComponentList，全局配置一变就把组件列表的对账基线冲掉，保存后替换 selectComponentList 又触发一次保存（每次操作 2 条 POST）
+        this.oldPageGlobalConfigs = this.$_.cloneDeep(v)
+      },
+      deep: true
+    },
+    selectComponentList: {
+      handler (v) {
+        if (!this.$_.isEqual(this.oldSelectComponentList, v)) {
+          this.delaySaveConfigs()
+        }
+        this.oldSelectComponentList = this.$_.cloneDeep(v)
+      },
+      deep: true
+    },
+    allComponentConfigs: {
+      handler (v) {
+        if (!this.$_.isEqual(this.oldAllComponentConfigs, v)) {
+          this.delaySaveConfigs()
+        }
+        this.oldAllComponentConfigs = this.$_.cloneDeep(v)
+      },
+      deep: true
+    }
+  },
+  created () {
+    window.addEventListener('resize', this.updatePreviewViewport)
+    window.addEventListener('beforeunload', this.warnUnsavedMobile)
+    this.removeMobileRouteGuard = this.$router.beforeEach(() => this.confirmLeaveMobile())
+    if (this.showMenu) {
+      this.changeMenuFlag = true
+      this.$store.commit('SWITCH_MENU_SHOW', false)
+    }
+    if (this.showAppNav) {
+      this.changeAppNavFlag = true
+      this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+    }
+    this.getPageInfo()
+    if (this.$query.dashboardType === 'component') {
+      this.getDefaultConfig()
+    }
+    this.getComponentList()
+    this.getReportList()
+    this.getDashboardList()
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.updatePreviewViewport)
+    if (this.previewPopupTimer) clearInterval(this.previewPopupTimer)
+    if (this.timer) clearTimeout(this.timer)
+    window.removeEventListener('beforeunload', this.warnUnsavedMobile)
+    if (this.removeMobileRouteGuard) this.removeMobileRouteGuard()
+    if (this.changeMenuFlag) {
+      this.$store.commit('SWITCH_MENU_SHOW', true)
+    }
+    if (this.changeAppNavFlag) {
+      this.$store.commit('SWITCH_APP_NAV_SHOW', true)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:global(.el-message-box.dashboard-grid-rescale-confirm),
+:global(.el-message-box.dashboard-leave-confirm) {
+  width: 440px;
+  max-width: min(440px, calc(100vw - 32px));
+}
+.design-target-picker {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  background: var(--epx-bg-page, #f3f5f8);
+  p { color: var(--epx-text-secondary, #909399); }
+  &__options { display: flex; gap: 16px; }
+}
+:global(.el-dialog.mobile-dashboard-preview-dialog) {
+  max-width: calc(100vw - 32px);
+  padding: 0;
+}
+:global(.mobile-dashboard-preview-dialog .el-dialog__header) {
+  padding: 16px 24px;
+  margin-right: 0;
+}
+:global(.mobile-dashboard-preview-dialog .el-dialog__body) {
+  padding: 16px 24px 24px;
+  background: var(--epx-bg-page, #f3f5f8);
+}
+.mobile-preview-viewport { margin: 0 auto; }
+.mobile-preview-phone {
+  position: relative;
+  box-sizing: border-box;
+  transform-origin: top left;
+  padding: 6px;
+  border-radius: 40px;
+  background: #25282e;
+  box-shadow: 0 16px 40px rgba(26, 32, 44, .12), 0 2px 6px rgba(26, 32, 44, .08), 0 0 0 1px #8b9098, inset 0 0 0 1px #555b64;
+}
+.mobile-preview-phone__screen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 34px;
+  background: #fff;
+}
+.mobile-preview-phone__title {
+  flex: none;
+  padding: 0 24px;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid #eef0f3;
+  color: #20242b;
+  font-size: 16px;
+  font-weight: 600;
+}
+.mobile-preview-phone__home {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 22px;
+  span { width: 100px; height: 4px; border-radius: 4px; background: #24272d; }
+}
+.mobile-dashboard-preview {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--epx-bg-card, #fff);
+  :deep(> .epx-dashboard) { height: 100%; }
+}
+.mobile-width-select {
+  width: 100px;
+  margin-right: 12px;
+}
+.mobile-save-status {
+  font-size: 12px;
+  color: var(--epx-text-secondary, #909399);
+  margin-right: 12px;
+}
+.config-container--mobile-dashboard {
+  .page-preview {
+    padding: 0;
+    min-width: 0;
+  }
+  .function-panel:not(:has(.dashboard-theme)) {
+    display: none;
+  }
+}
+.config-container {
+  position: relative;
+  left: -10px;
+  top: -10px;
+  width: calc(100% + 20px);
+  height: calc(100% + 20px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.config-container--new-window {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: 46px;
+  background: var(--epx-bg-card);
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.page-header__left {
+  display: flex;
+}
+
+.page-header__back {
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+  line-height: 24px;
+}
+.page-header__title {
+  font-size: var(--epx-font-size-l);
+  padding: 0 20px;
+  font-weight: 600;
+  border-right: 1px solid var(--epx-border);
+}
+.page-header__subtitle {
+  font-size: var(--epx-font-size-base);
+  color: #666;
+}
+.page-header__operate {
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+}
+.header-operate__item {
+  color: #444;
+  cursor: pointer;
+  margin: 20px;
+  i {
+    margin-right: 4px;
+  }
+  &:hover {
+    @include font_color_primary
+  }
+}
+.page-content {
+  flex:1;
+  display: flex;
+  overflow: hidden;
+}
+.page-tabs {
+  width: 50px;
+  height: 100%;
+  background: var(--epx-bg-card);
+  border-right:  1px solid var(--epx-border);
+  padding:  20px 0;
+  flex-shrink: 0;
+}
+.page-tabs__item {
+  padding: 10px 0;
+  width: 100%;
+  margin-bottom: 10px;
+  text-align: center;
+  line-height: 1;
+  font-size: var(--epx-font-size-s);
+  color: #444;
+  margin-bottom: 12px;
+  >i {
+    font-size: 24px;
+    display: block;
+    margin-bottom: 8px;
+  }
+  cursor: pointer;
+  &:hover, &.active {
+    @include bg_color_primary(.2);
+    @include font_color_primary
+  }
+}
+.page-preview {
+  flex: 1;
+  overflow: hidden;
+}
+.config-panel {
+  width: 100%;
+  flex-shrink: 0;
+
+    :deep(.config-container) {
+      width: 100%;
+      left: 0;
+    }
+
+}
+.function-panel {
+  position: relative;
+  flex-shrink: 0;
+}
+.dashboard-theme {
+  position: absolute;
+  top: 0;
+  background: var(--epx-bg-card);
+  width: 340px;
+  height: 100%;
+  box-sizing: border-box;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 12px;
+}
+.dashboard-theme__title {
+  font-size: var(--epx-font-size-l);
+  line-height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding:  12px;
+  border-bottom: 1px solid #e3e3e3;
+}
+.dashboard-theme__content {
+  flex: 1;
+  overflow: auto;
+}
+.dashboard-theme__list {
+  padding: 0 12px;
+}
+.dashboard-theme__item {
+  border: 1px solid var(--epx-border);
+  margin-top: 20px;
+  cursor: pointer;
+  position: relative;
+  &:hover, &.active {
+    @include border_color_primary;
+  }
+  &.active {
+    .dashboard-theme__selected {
+      display: block;
+    }
+  }
+}
+.dashboard-theme__selected {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+  color: #fff;
+  text-align: right;
+  line-height: 24px;
+  span {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border: 12px solid;
+    @include border_color_primary;
+    border-left-color: transparent!important;
+    border-bottom-color: transparent!important;
+  }
+  i {
+    position: relative;
+    right: 2px;
+    top: -4px;
+    z-index: 1;
+  }
+}
+.dashboard-theme__preview {
+  height: 154px;
+  width: 100%;
+  background: #F2F3F7;
+  >img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.dashboard-theme__name {
+  padding: 0 16px;
+  line-height: 34px;
+  text-align: center;
+}
+.dashboard-theme__name-icon {
+  @include font_color_primary;
+  margin-left: 4px;
+}
+.dashboard-theme__footer {
+  position: relative;
+  left: -10px;
+  width: calc(100% + 20px);
+  padding-top: 12px;
+  border-top: 1px solid #e3e3e3;
+  text-align: center;
+}
+.page-setting{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.page-setting__header {
+  height: 46px;
+  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e3e3e3;
+  align-items: center;
+  >span {
+    font-size: var(--epx-font-size-l);
+    font-weight: 600;
+    color: #222222;
+    position: relative;
+    padding-left: 8px;
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      left: 0;
+      top: 50%;
+      margin-top: -8px;
+      width: 4px;
+      height: 16px;
+      border-radius: var(--epx-radius-s);
+      @include bg_color_primary;
+    }
+  }
+  >i {
+    cursor: pointer;
+  }
+}
+.page-setting__content {
+  flex: 1;
+  padding: 20px 0;
+}
+.page-setting__footer {
+  padding: 20px 0;
+  text-align: center;
+
+    :deep(.el-button) {
+      margin: 0 12px;
+    }
+
+}
+.report-list{
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  height: 400px;
+  overflow: auto;
+  padding: 0 10px;
+  position: relative;
+}
+.report-item {
+  width: calc(25% - 20px);
+  box-sizing: border-box;
+  height: 80px;
+  margin: 10px;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  background: #F5F7FA;
+  border-radius: var(--epx-radius-base);
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  i {
+    color: #666;
+    margin-right: 8px;
+  }
+  &.selected {
+    .report-item__select {
+      span {
+        @include bg_color_primary
+      }
+    }
+  }
+}
+.report-item__select {
+  position: absolute;
+  right: 0;
+  top: 0;
+  >span {
+    display: block;
+    background: #E2E4E8;
+    width: 36px;
+    height: 36px;
+    transform: rotate(45deg);
+    position: absolute;
+    top: -18px;
+    right: -18px;
+  }
+  >i {
+    position: absolute;
+    top: 2px;
+    right: -6px;
+    font-size: var(--epx-font-size-s);
+    color: #fff;
+  }
+}
+.dashboard-list {
+  padding: 0 20px;
+  height: 400px;
+  box-sizing: border-box;
+  overflow: auto;
+  position: relative;
+}
+.dashboard-item {
+  background: #F5F7FA;
+  border-radius: var(--epx-radius-s);
+  margin-bottom: 20px;
+  .el-icon-arrow-up {
+    cursor: pointer;
+    transition: all .5s;
+  }
+  &.fold {
+    .dashboard-header {
+      border: 0;
+    }
+    .el-icon-arrow-up {
+      transform: rotate(180deg);
+    }
+    .dashboard-body {
+      display: none;
+    }
+  }
+}
+.dashboard-header {
+  display: flex;
+  height: 50px;
+  padding: 0 20px;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--epx-border);
+}
+
+.dashboard-comp__list{
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+}
+.dashboard-comp__item {
+  width: calc(25% - 20px);
+  box-sizing: border-box;
+  height: 80px;
+  margin: 10px;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-base);
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  &:hover {
+    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
+  }
+  i {
+    color: #666;
+    margin-right: 8px;
+  }
+  &.selected {
+    .dashboard-comp__item__select {
+      span {
+        @include bg_color_primary
+      }
+    }
+  }
+}
+.dashboard-comp__item__select {
+  position: absolute;
+  right: 0;
+  top: 0;
+  >span {
+    display: block;
+    background: #E2E4E8;
+    width: 36px;
+    height: 36px;
+    transform: rotate(45deg);
+    position: absolute;
+    top: -18px;
+    right: -18px;
+  }
+  >i {
+    position: absolute;
+    top: 2px;
+    right: -6px;
+    font-size: var(--epx-font-size-s);
+    color: #fff;
+  }
+}
+.dialog-footer {
+  border-top: 1px solid #e3e3e3;
+  padding: 10px 0;
+  text-align: center;
+}
+.pagination {
+  padding: 10px;
+}
+.dashboard-search {
+  margin: -5px 10px 0;
+
+    :deep(.table-form-item__content) {
+      .el-input, .el-input-number--medium {
+        width: 180px;
+      }
+    }
+
+}
+.no-data {
+  width: 100%;
+  text-align: center;
+  color: #999;
+  margin-top: 60px;
+  i {
+    font-size: 100px;
+  }
+}
+.add-report-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  >label {
+    width: 120px;
+    margin-right: 4px;
+    text-align: right;
+    flex-shrink:0;
+  }
+}
+.report-type__list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.report-type__item {
+  width: 70px;
+  height: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  line-height: 20px;
+  &:hover {
+    background: #F2F3F7;
+    border-radius: var(--epx-radius-base);
+  }
+  &.active {
+    i, span {
+      @include font_color_primary;
+    }
+  }
+  i {
+    font-size: 18px;
+    color: #666;
+    margin-bottom: 8px;
+  }
+  span {
+    font-size: var(--epx-font-size-s);
+    color: #444
+  }
+}
+.add-report-footer {
+  text-align: center;
+  padding: 20px 0;
+
+    :deep(.el-button) {
+      width: 120px;
+      margin: 0 20px;
+    }
+
+}
+</style>