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

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

@@ -0,0 +1,1118 @@
+
+<template>
+  <div :class="['config-container', { 'config-container--editing': showConfig && !standalone, 'config-container--standalone': standalone }]">
+  <div v-if="!standalone" class="page-header">
+    <i class="page-header__back el-icon-arrow-left" @click="backPage"></i>
+    <p class="page-title">
+      <span class="page-header__title">移动端设计</span>
+    </p>
+    <div class="page-header__operate">
+      <p class="header-operate__item" @click="generateFromPc"><i class="el-icon-magic-stick"></i>按PC布局生成</p>
+      <p class="header-operate__item" @click="saveLayout"><i class="epx-icon-save"></i>保存移动端设计</p>
+    </div>
+  </div>
+    <!-- 可滚动内容区：手机框 + 已隐藏归拢区一起纵向滚动（config-container 自身 overflow:hidden 保住机身圆角裁切） -->
+    <div class="mobile-body">
+    <!-- 手机画布：单层网格（无容器嵌套、无外部拖入），网格参数与运行态移动端同一取法 -->
+    <div ref="canvas" :class="['epx-dashboard', themeScope, 'is-mobile-preview', 'dashboard-design__mobile', 'dashboard-design--'+ theme]" :style="{ ...dashboardStyle, ...(standalone ? { width: canvasWidth + 'px' } : {}) }" @click.capture="selectPreviewChart">
+      <epx-dashboard-design-grid
+        v-if="visibleLayout.length > 0 || standalone"
+        :items="visibleLayout"
+        :grid="gridParams"
+        :body-height="bodyHeight"
+        :min-height="canvasHeight"
+        :show-grid-lines="!!globalConfigs.showGridLines"
+        @transfer-out="onTransferOut"
+        @transfer-in="onTransferIn"
+      >
+        <template #item="{ item }">
+          <!-- 在 PC 上设计手机尺寸看板，独立设计时使用与 PC 一致的组件操作条。 -->
+          <epx-dashboard-design-item :item="item" :data-mobile-item-id="item.id" :active="design.isActive(item)" :floatable="standalone && gridParams.mode !== 'float'" @select="openConfig">
+            <div v-if="item.contentType && !reloadComponent[item.id]" :class="['drag-component', { 'drag-component--container': standalone && isContainerType(item.contentType) }]">
+              <!-- 与运行态 Dashboard.vue 同一套传参：整块保留的容器（dashboard-div / tabs）靠 items 拿子项 / 页签、comp-grid 拿内部网格参数，缺了页签就是空的 -->
+              <epx-component
+                class="epx-dashboard__component"
+                is-dashboard
+                :design-mode="standalone"
+                :mode="standalone ? 'design' : undefined"
+                :comp-item="item"
+                :all-component-list="allComponentList"
+                :name="item.contentType"
+                :comp-id="item.id"
+                :comp-title="item.title"
+                :items="previewItem(item).items"
+                :item-configs="designQuery.itemConfigs"
+                :comp-configs="getCompConfigs(item, item.id)"
+                :comp-grid="containerGrid(item)"
+                :comp-style="compStyle(item)"
+                :theme="theme"
+                :theme-chart-config="themeChartConfig"
+                :mobile-appearance="item.mobileAppearance"
+                @open-config="openNestedConfig"
+                @changeItems="v=>item.items=v"
+              ></epx-component>
+              <i v-if="!standalone" class="drag-component__edit el-icon-setting" title="编辑移动端显示/样式"></i>
+            </div>
+            <span v-else>{{item.i}}</span>
+            <template v-if="standalone" #operates>
+              <button v-if="['chart', 'report-chart', 'report-html'].includes(item.contentType)" class="mobile-item-action" type="button" title="编辑报表" aria-label="编辑报表" @click.stop="openConfig(item); $emit('edit-data', item)"><i class="el-icon-edit-outline"></i></button>
+              <button class="mobile-item-action" type="button" title="组件设置" aria-label="组件设置" @click.stop="openConfig(item)"><i class="el-icon-setting"></i></button>
+              <button class="mobile-item-action" type="button" title="删除组件" aria-label="删除组件" @click.stop="$emit('delete-item', item)"><i class="el-icon-delete"></i></button>
+            </template>
+          </epx-dashboard-design-item>
+        </template>
+      </epx-dashboard-design-grid>
+    <!-- 空态：完全无布局 → 引导生成；有布局但全部隐藏 → 提示去下方归拢区恢复 -->
+    <div v-if="!visibleLayout.length" class="mobile-empty">
+      <div v-if="!layout.length && standalone" class="mobile-empty__actions">
+        <button class="mobile-empty__action mobile-empty__add-report" type="button" @click="$emit('add-report')">
+          <i class="epx-icon-color-tianjiabaobiao" aria-hidden="true"></i>
+          <span>添加报表</span>
+        </button>
+        <button class="mobile-empty__action mobile-empty__add-component" type="button" @click="$emit('add-component')">
+          <i class="epx-icon-color-tianjiazujian" aria-hidden="true"></i>
+          <span>添加组件</span>
+        </button>
+      </div>
+      <template v-else>
+        <p class="mobile-empty__text">{{ layout.length ? '组件已全部隐藏' : '移动端布局为空' }}</p>
+        <el-button v-if="!layout.length && !standalone" type="primary" size="small" icon="el-icon-magic-stick" @click="generateFromPc">按 PC 布局生成</el-button>
+      </template>
+    </div>
+    </div>
+    <!-- 已隐藏组件归拢区：隐藏项不占画布，收在这里，点一下恢复到画布 -->
+    <div v-if="hiddenItems.length" class="mobile-hidden-tray">
+      <div class="mobile-hidden-tray__title"><i class="el-icon-folder-opened"></i>已隐藏组件（{{ hiddenItems.length }}）</div>
+      <div class="mobile-hidden-tray__list">
+        <div v-for="item in hiddenItems" :key="item.id" class="mobile-hidden-tray__item" @click="setHidden(item, false)">
+          <span class="mobile-hidden-tray__name">{{ item.title || item.contentType || item.i }}</span>
+          <i class="mobile-hidden-tray__restore el-icon-refresh-left" title="恢复显示"></i>
+        </div>
+      </div>
+    </div>
+    <!-- 容器策略：PC 里的容器默认拆开成子组件参与堆叠；打开「保留整块」则整块独占一行（写在 PC 容器项 mobileExpand 上、随页面配置自动保存），下次「按 PC 布局生成」生效 -->
+    <div v-if="!standalone && pcContainers.length" class="mobile-container-tray">
+      <div class="mobile-container-tray__title"><i class="el-icon-s-grid"></i>容器策略（{{ pcContainers.length }}）<span class="mobile-container-tray__tip">改后点「按PC布局生成」生效</span></div>
+      <div v-for="c in pcContainers" :key="c.id" class="mobile-container-tray__row">
+        <span class="mobile-container-tray__name">{{ c.title || c.contentType }}</span>
+        <span class="mobile-container-tray__mode">{{ c.mobileExpand === false ? '保留整块' : '拆开堆叠' }}</span>
+        <el-switch :model-value="c.mobileExpand === false" size="small" @change="v=>setContainerKeep(c, v)"></el-switch>
+      </div>
+    </div>
+    </div>
+    <!-- 移动端显示/样式编辑：改动直接写在该组件的 mItems 项上 -->
+    <aside v-if="standalone" class="mobile-properties">
+      <div class="mobile-config-header mobile-properties__header"><strong>组件配置</strong></div>
+      <template v-if="selectComponent">
+        <slot name="component-config"></slot>
+        <div class="mobile-config">
+          <div v-if="selectComponent.contentType === 'dashboard-div'" class="mobile-config__actions">
+            <el-button size="small" @click="$emit('add-into', selectComponent)">向容器添加组件</el-button>
+          </div>
+          <div v-if="selectComponent.contentType === 'dashboard-tabs'" class="mobile-config__children">
+            <div v-for="tab in selectComponent.items || []" :key="tab.id" class="mobile-config__actions">
+              <span>{{ tab.name }}</span><el-button size="small" @click="$emit('add-into', tab)">添加组件</el-button>
+            </div>
+          </div>
+          <div v-if="selectComponent.items?.length" class="mobile-config__children">
+            <el-button v-for="child in [...indexItems([selectComponent]).values()].filter(child => child.contentType && child.id !== selectComponent.id)" :key="child.id" size="small" @click="openConfig(child)">{{ componentLabel(child) }}</el-button>
+          </div>
+        </div>
+      </template>
+      <div v-else class="mobile-config mobile-config__hint">选择组件，配置属性、样式和布局。</div>
+    </aside>
+    <el-drawer v-else title="移动端外观" class="mobile-appearance-drawer" append-to-body direction="rtl" size="min(400px, 44vw)" :modal="false" modal-penetrable :lock-scroll="false" :close-on-click-modal="false" v-model="showConfig">
+      <template #header>
+        <div class="mobile-config-header">
+          <strong>移动端外观</strong>
+          <p>在左侧滚动、点击组件即可切换设置</p>
+        </div>
+      </template>
+      <div class="mobile-config" v-if="selectComponent">
+        <div class="mobile-config__title">{{componentLabel(selectComponent)}} <span class="mobile-config__type">{{ componentTypeLabel }}</span></div>
+        <p class="mobile-config__hint">仅影响手机端；未设置的属性继承 PC，数据与权限共用。</p>
+        <div class="mobile-config__group-title">布局与显示</div>
+        <div class="mobile-config__row">
+          <span>移动端显示</span>
+          <el-switch :model-value="!selectComponent.mobileHidden" @change="v=>setHidden(selectComponent, !v)"></el-switch>
+        </div>
+        <template v-if="!selectComponent.mobileHidden">
+          <!-- 列宽快捷：整行 / 半宽 / 三分之一 -->
+          <div class="mobile-config__row">
+            <span>列宽</span>
+            <el-radio-group :model-value="spanLevel(selectComponent)" size="small" @change="v=>setSpan(selectComponent, v)">
+              <el-radio-button label="full">整行</el-radio-button>
+              <el-radio-button label="half">半宽</el-radio-button>
+              <el-radio-button label="third">三分之一</el-radio-button>
+            </el-radio-group>
+          </div>
+          <!-- 高度快捷（网格行数） -->
+          <div class="mobile-config__row">
+            <span>高度（行）</span>
+            <el-input-number :model-value="selectComponent.h" :min="2" :max="200" size="small" controls-position="right" @change="v=>setMHeight(selectComponent, v)"></el-input-number>
+          </div>
+          <!-- 排序快捷键：置顶 / 上移 / 下移 / 置底 -->
+          <div class="mobile-config__row">
+            <span>位置</span>
+            <el-button-group>
+              <el-button size="small" icon="el-icon-upload2" title="置顶" @click="reorder('top')"></el-button>
+              <el-button size="small" icon="el-icon-top" title="上移" @click="reorder('up')"></el-button>
+              <el-button size="small" icon="el-icon-bottom" title="下移" @click="reorder('down')"></el-button>
+              <el-button size="small" icon="el-icon-download" title="置底" @click="reorder('bottom')"></el-button>
+            </el-button-group>
+          </div>
+          <template v-if="appearanceTargets.length">
+            <div class="mobile-config__group-title">移动端图表外观</div>
+            <el-select v-if="appearanceTargets.length > 1 || appearanceTarget !== selectComponent" :model-value="appearanceTarget.id" size="small" @change="v=>appearanceTargetId=v">
+              <el-option v-for="target in appearanceTargets" :key="target.id" :label="componentLabel(target)" :value="target.id"></el-option>
+            </el-select>
+            <p v-if="appearanceTarget !== selectComponent" class="mobile-config__chart-type">{{ appearanceTypeLabel }}</p>
+            <p v-if="!appearanceFields.length" class="mobile-config__hint">{{ appearanceChartType ? '当前类型可通过下方卡片样式调整外观。' : '正在读取图表类型…' }}</p>
+            <template v-for="group in appearanceGroups" :key="group.label">
+            <div class="mobile-config__section-title">{{ group.label }}</div>
+            <div v-for="field in group.fields" :key="field.key" class="mobile-appearance" :data-appearance="field.key">
+              <div class="mobile-appearance__heading">
+                <span>{{ field.label }}</span>
+                <span :class="['mobile-appearance__status', { 'is-independent': hasAppearance(field.key) }]">{{ hasAppearance(field.key) ? '移动端独立' : (standalone ? '默认样式' : '继承 PC') }}</span>
+                <el-button v-if="hasAppearance(field.key)" size="small" link @click="setAppearance(field.key, undefined)">{{ standalone ? '恢复默认' : '恢复继承' }}</el-button>
+              </div>
+              <el-select v-if="field.options" :model-value="appearanceTarget.mobileAppearance?.[field.key]" size="small" clearable :placeholder="standalone ? '默认样式' : '继承 PC'" @change="v=>setAppearance(field.key, v)">
+                <el-option v-for="option in field.options" :key="String(option.value)" :label="option.label" :value="option.value"></el-option>
+              </el-select>
+              <el-input-number v-else :model-value="appearanceTarget.mobileAppearance?.[field.key]" :min="field.min" :max="field.max" size="small" controls-position="right" :placeholder="standalone ? '默认样式' : '继承 PC'" @change="v=>setAppearance(field.key, v)"></el-input-number>
+            </div>
+            </template>
+            <el-button v-if="appearanceFields.length" size="small" @click="restoreAppearance">图表全部恢复继承</el-button>
+          </template>
+          <details :key="selectComponent.id" class="mobile-card-style" :open="!appearanceFields.length">
+          <summary>卡片样式 <span class="mobile-appearance__status">{{ standalone ? '未设置的属性使用默认样式' : '未设置的属性继承 PC' }}</span></summary>
+          <div v-for="(value, key) in selectComponent.style || {}" :key="key" class="mobile-appearance__heading">
+            <span>{{ styleLabel(key) }}：{{ value }}</span>
+            <span class="mobile-appearance__status is-independent">移动端独立</span>
+            <el-button size="small" link @click="restoreStyle(key)">恢复继承</el-button>
+          </div>
+          <epx-component-style-config
+            :key="'mstyle-'+selectComponent.id"
+            :value="selectComponent.style || {}"
+            @change="v=>onStyleChange(selectComponent, v)"
+          ></epx-component-style-config>
+          </details>
+        </template>
+      </div>
+    </el-drawer>
+    <!-- 覆盖确认：MessageBox 默认样式与页面设计语言不统一，换页内轻确认（图标 + 文案 + 双按钮），复用全局 dialog--noheader 隐藏标题栏 -->
+    <el-dialog v-model="confirmRegenerate" width="340px" append-to-body :show-close="false" :close-on-click-modal="false" class="dialog--noheader">
+      <div class="mobile-confirm">
+        <i class="el-icon-warning-outline mobile-confirm__icon"></i>
+        <p class="mobile-confirm__text">将按 PC 布局重新生成手机端位置和尺寸，覆盖当前移动端布局。保留移动端图表外观、卡片样式和隐藏设置，是否继续？</p>
+        <div class="mobile-confirm__actions">
+          <el-button size="small" @click="confirmRegenerate = false">取消</el-button>
+          <el-button size="small" type="primary" @click="regenerateFromConfirm">生成</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import { getChartType } from '@epxing/utils/src/chart-registry'
+import { stackMobileLayout, reorderStack, normalizeGridItem } from '@epxing/dashboard/src/layout-util'
+import { getPageGrid, getContainerGrid, isLegacyConfig, MOBILE_GRID, isContainerType } from '@epxing/dashboard/src/grid/model'
+import { createDesignState } from '@epxing/dashboard/src/grid/designState'
+import { buildThemeCss, buildThemeChartConfig } from '@epxing/dashboard/src/theme-style'
+import { indexDashboardItems, resolveMobileItem, regenerateMobileDesign } from '@epxing/dashboard/src/mobile-design'
+import { getMobileAppearanceFields, normalizeMobileAppearance } from '@epxing/utils/src/mobile-chart-appearance'
+import DesignItem from '@epxing/dashboard/src/DesignItem.vue'
+import StyleConfig from './StyleConfig.vue'
+export default {
+  name: 'epx-visual-config-dashboard-mobile',
+  components: {
+    'epx-component-style-config': StyleConfig,
+    // 设计态画布（gridstack 封装）按需加载，与页面级画布 DashboardDesign 同一组件；移动端只用单层、不接跨网格事件
+    'epx-dashboard-design-grid': defineAsyncComponent(() => import('@epxing/dashboard/src/DesignGrid.vue')),
+    'epx-dashboard-design-item': DesignItem
+  },
+  props: {
+    standalone: Boolean,
+    canvasWidth: { type: Number, default: 375 },
+    source: { type: Object, default: null },
+    pageMetaId: String,
+    pageId: String,
+    allComponentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    componentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  provide () {
+    return {
+      upPage: this,
+      pageMetaId: this.pageMetaId,
+      pageId: this.pageId,
+      // 设计态共享选中态：画布按它给选中项的壳置顶
+      epxDashboardDesign: this.design,
+      // 手机框预览标记：本设计器跑在 PC 端（$isMobile 为 false），保留整块的容器（dashboard-div / tabs）内部要和真机一样按堆叠渲染（containerGridMixin 注入）
+      epxMobilePreview: true,
+      getMobileDashboard: () => this.standalone,
+      getThemeChartConfig: () => this.themeChartConfig,
+      registerMobileChartLabel: (id, label, type) => {
+        if (label) this.chartLabels[id] = label
+        if (type) this.chartTypes[id] = type
+      }
+    }
+  },
+  data () {
+    return {
+      reloadComponent: {},
+      oldItemConfigs: {},
+      layout: [],
+      // 选中态（activeComponent 由它派生），provide 给画布
+      design: createDesignState(),
+      // 'auto' 行高（旧 autoHeight）的换算基准：document.body 高度
+      bodyHeight: 0,
+      // 手机画布可视高度：根网格按它撑满画布
+      canvasHeight: 0,
+      selectComponent: null, // 当前编辑移动端设置的组件（mItems 项的引用）
+      appearanceTargetId: null,
+      chartLabels: {},
+      chartTypes: {},
+      confirmRegenerate: false // 「按PC布局生成」覆盖确认弹窗
+    }
+  },
+  computed: {
+    designQuery () {
+      return this.source || this.$query
+    },
+    pcItemIndex () {
+      return indexDashboardItems(this.designQuery.componentList || [])
+    },
+    previewItem () {
+      return item => this.standalone ? item : resolveMobileItem(item, this.pcItemIndex)
+    },
+    appearanceTargets () {
+      return [...indexDashboardItems(this.selectComponent ? [this.selectComponent] : []).values()]
+        .filter(item => item.contentType === 'chart' || item.contentType === 'report-chart')
+    },
+    appearanceTarget () {
+      return this.appearanceTargets.find(item => item.id === this.appearanceTargetId) || this.appearanceTargets[0]
+    },
+    appearanceFields () {
+      return getMobileAppearanceFields(this.appearanceChartType)
+    },
+    appearanceChartType () {
+      const target = this.appearanceTarget
+      return target ? (this.chartTypes[target.id] || this.getCompConfigs(target).type || '') : ''
+    },
+    appearanceTypeLabel () {
+      return getChartType(this.appearanceChartType)?.text || '图表'
+    },
+    componentTypeLabel () {
+      if (this.appearanceTarget === this.selectComponent) return this.appearanceTypeLabel
+      const labels = { 'dashboard-tabs': '标签页', 'dashboard-div': '容器', 'num-statistic': '数字卡', 'card-num': '数字卡', text: '文本', 'dashboard-title': '标题' }
+      return labels[this.selectComponent?.contentType] || '组件'
+    },
+    appearanceGroups () {
+      const sections = [
+        { label: '标题', keys: ['showTitle', 'titleFontSize'] },
+        { label: '图例', keys: ['legendPosition', 'legendFontSize'] },
+        { label: '坐标轴', keys: ['axisFontSize', 'axisLabelRotate'] },
+        { label: '绘图区', keys: ['gridTop', 'gridBottom', 'gridLeft', 'gridRight'] },
+        { label: '数据标签', keys: ['showLabel', 'labelFontSize'] },
+        { label: '饼图', keys: ['pieRadius'] }
+      ]
+      return sections.map(section => ({ label: section.label, fields: this.appearanceFields.filter(field => section.keys.includes(field.key)) })).filter(group => group.fields.length)
+    },
+    showConfig: {
+      get () {
+        return !!this.selectComponent
+      },
+      set (v) {
+        if (!v) this.selectComponent = null
+      }
+    },
+    getCompConfigs () {
+      return (component) => {
+      // 如果是页面 查找页面默认配置
+        const { configs = {}, id, title, contentType, ...otherConfigs } = this.previewItem(component)
+        const { itemConfigs = {} } = this.designQuery
+        const itemConfig = itemConfigs[id] || {}
+        const _configs = { ...otherConfigs, ...configs, ...itemConfig }
+        if (title) {
+          _configs.componentName = title
+        }
+        return _configs
+      }
+    },
+    theme () {
+      return this.designQuery.theme
+    },
+    // 使用独立作用域，手机框主题覆盖不影响仍挂载的 PC 画布。
+    themeScope () {
+      return `epx-dashboard-mobile-${this.pageId || this.designQuery.id || this.$.uid}`
+    },
+    themeStyles () {
+      return this.designQuery.themeStyles || this.globalConfigs.themeStyles || {}
+    },
+    themeChartConfig () {
+      return buildThemeChartConfig(this.themeStyles, true)
+    },
+    dashboardStyle () {
+      const { backgroundColor, backgroundImage } = this.globalConfigs
+      return {
+        backgroundColor,
+        backgroundImage: backgroundImage ? `url(${this.$util.getFileUrl(backgroundImage)})` : null
+      }
+    },
+    // 页面全局配置（外壳 switchMobile 传入）：网格与背景均沿用页面配置。
+    globalConfigs () {
+      return this.designQuery.globalConfigs || {}
+    },
+    // 与运行态 pageGridMixin 的移动端分支同一取法：行高沿用页面、间距换成堆叠参数 [8,8]、内边距跟随间距，几何才能一致
+    gridParams () {
+      return { ...getPageGrid(this.globalConfigs), gap: MOBILE_GRID.gap, padding: null }
+    },
+    // 行高按视口等比（旧 autoHeight）时才需要随窗口维护 bodyHeight（间距已固定，不会是 'auto'）
+    autoGrid () {
+      return this.gridParams.rowHeight === 'auto'
+    },
+    // 整块保留的容器项的内部网格参数（与运行态 pageGridMixin.containerGrid 同一取法）；非容器返回 undefined
+    containerGrid () {
+      return item => (isContainerType(item.contentType)
+        ? getContainerGrid(item, this.gridParams, isLegacyConfig(this.globalConfigs))
+        : undefined)
+    },
+    activeComponent () {
+      return this.design.state.activeItem
+    },
+    // 移动端列数（与运行态移动端网格一致）：列宽档位 整行 = colNum / 半宽 = colNum/2 / 三分之一 = colNum/3
+    colNum () {
+      return this.gridParams.colNum || 48
+    },
+    // 画布只渲染「未隐藏」的项：隐藏项移出网格、不再半透明占位，改由下方「已隐藏」区归拢
+    visibleLayout () {
+      return this.layout.filter(i => i && !i.mobileHidden)
+    },
+    // 已隐藏组件：归拢到画布下方，一键恢复
+    hiddenItems () {
+      return this.layout.filter(i => i && i.mobileHidden)
+    },
+    // PC 布局里的顶层容器（dashboard-div / dashboard-tabs）：每个可单独设「移动端保留整块」。
+    // 取的是外壳 selectComponentList 的引用（goPage params 内存传递），开关直接写在容器项上，外壳 deep watch 自动保存
+    pcContainers () {
+      return (this.designQuery.componentList || []).filter(i => i && isContainerType(i.contentType))
+    }
+  },
+  watch: {
+    activeComponent (item) {
+      if (!this.standalone || !item || String(item.id) === String(this.selectComponent?.id)) return
+      this.selectComponent = item
+      this.appearanceTargetId = null
+      this.$emit('select-item', item)
+    },
+    'source.componentList': {
+      handler (items) {
+        if (!this.standalone) return
+        this.layout = items || []
+        if (this.selectComponent && !indexDashboardItems(this.layout).has(String(this.selectComponent.id))) this.selectComponent = null
+      },
+      immediate: true
+    },
+    themeStyles: {
+      immediate: true,
+      deep: true,
+      handler (v) {
+        const styleId = this.themeScope
+        let styleElement = document.getElementById(styleId)
+        if (!styleElement) {
+          styleElement = document.createElement('style')
+          styleElement.id = styleId
+          document.head.appendChild(styleElement)
+        }
+        // 手机框在桌面视口内，显式启用 mobile 覆盖层。
+        styleElement.textContent = buildThemeCss(v, `.epx-dashboard.dashboard-design__mobile.${this.themeScope}`, path => this.$util.getFileUrl(path), {
+          containerSelector: '', hoverAncestor: '.drag-component', mobilePreview: true
+        })
+      }
+    },
+    layout: {
+      // Vue3 起浅层 watcher 不响应 push/splice；deep: 1 只看数组层
+      deep: 1,
+      handler (v) {
+        for (const item of v) {
+          if (!item) continue
+          // x/y/w/h 必须是数字（网格引擎按数值布局）
+          normalizeGridItem(item)
+        }
+      },
+      immediate: true
+    },
+    autoGrid: {
+      handler (v) {
+        if (v) {
+          this.calculateHeight()
+          window.addEventListener('resize', this.calculateHeight)
+        } else {
+          window.removeEventListener('resize', this.calculateHeight)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    isContainerType,
+    onTransferOut (item) {
+      if (!this.standalone) return
+      const index = this.layout.findIndex(node => String(node.id) === String(item.id))
+      if (index !== -1) this.layout.splice(index, 1)
+    },
+    onTransferIn (item) {
+      if (this.standalone && !this.layout.some(node => String(node.id) === String(item.id))) this.layout.push(item)
+    },
+    indexItems: indexDashboardItems,
+    // upPage 契约：设计器内组件 $refeshPage() 会调到这里；画布由网格引擎维护，无需刷新
+    $refesh () {
+    },
+    saveLayout () {
+      const { changeMItems } = this.$query
+      changeMItems && changeMItems(this.layout)
+      this.backPage()
+    },
+    // 点击组件 → 选中并打开移动端设置（显示/隐藏 + 样式），改动直接落在该 mItems 项上
+    openConfig (item, tab) {
+      this.design.select(item, 'mobile')
+      this.selectComponent = item
+      this.appearanceTargetId = null
+      if (this.standalone) this.$emit('select-item', item, tab)
+    },
+    openNestedConfig (id, info, configs, upId, tab) {
+      if (!this.standalone) return
+      const item = indexDashboardItems(this.layout).get(String(id))
+      if (item) this.openConfig(item, tab)
+    },
+    selectPreviewChart (event) {
+      const chart = event.target.closest?.('[data-mobile-chart-id]')
+      if (!chart) return
+      const id = chart.dataset.mobileChartId
+      const owner = this.layout.find(item => indexDashboardItems([item]).has(id))
+      if (!owner) return
+      event.stopPropagation()
+      if (this.standalone) {
+        this.openConfig(indexDashboardItems([owner]).get(String(id)))
+        return
+      }
+      this.openConfig(owner)
+      this.appearanceTargetId = indexDashboardItems([owner]).get(id).id
+      if (this.standalone) this.$emit('select-item', this.appearanceTarget)
+    },
+    hasAppearance (key) {
+      return Object.prototype.hasOwnProperty.call(this.appearanceTarget?.mobileAppearance || {}, key)
+    },
+    componentLabel (item) {
+      const config = this.designQuery.itemConfigs?.[item.id] || {}
+      return this.chartLabels[item.id] || config.title || config.componentName || item.title || item.contentType || item.id
+    },
+    setAppearance (key, value) {
+      const target = this.appearanceTarget
+      if (!target) return
+      const next = { ...target.mobileAppearance }
+      if (value === undefined || value === null || value === '') delete next[key]
+      else next[key] = value
+      target.mobileAppearance = normalizeMobileAppearance(next)
+    },
+    restoreAppearance () {
+      if (!this.appearanceTarget) return
+      delete this.appearanceTarget.mobileAppearance
+    },
+    styleLabel (key) {
+      const labels = { color: '文字颜色', fontSize: '字号', backgroundColor: '背景颜色', backgroundImage: '背景图片', borderRadius: '圆角', padding: '内边距', margin: '外边距', height: '高度', width: '宽度', boxShadow: '阴影' }
+      return labels[key] || key
+    },
+    restoreStyle (key) {
+      const style = { ...this.selectComponent.style }
+      delete style[key]
+      this.onStyleChange(this.selectComponent, style)
+    },
+    setHidden (item, hidden) {
+      item.mobileHidden = hidden
+    },
+    // 容器「移动端保留整块」开关：写 PC 容器项的 mobileExpand（=== false 保留整块，其它 / 无键 = 默认拆开）。
+    // 只影响「按 PC 布局生成」的结果，当前 mItems 不动；关掉时删键、不留 true 冗余
+    setContainerKeep (container, keep) {
+      if (keep) container.mobileExpand = false
+      else delete container.mobileExpand
+    },
+    // 当前列宽档位：整行 full / 半宽 half / 三分之一 third（按与 colNum 的比例判定，供列宽单选回显）
+    spanLevel (item) {
+      if (!item) return 'full'
+      const w = Number(item.w) || 0
+      if (w >= this.colNum) return 'full'
+      if (w <= Math.floor(this.colNum / 3)) return 'third'
+      return 'half'
+    },
+    // 列宽快捷：整行 / 半宽 / 三分之一，直接改 item.w（layoutKey 变化驱动画布同步、碰撞层重排邻居）
+    setSpan (item, level) {
+      if (!item) return
+      const map = { full: this.colNum, half: Math.floor(this.colNum / 2), third: Math.floor(this.colNum / 3) }
+      item.w = map[level] || this.colNum
+    },
+    // 高度快捷：直接改 item.h（网格行数），至少 2 行
+    setMHeight (item, h) {
+      if (!item) return
+      item.h = Math.max(2, Number(h) || 2)
+    },
+    // 排序快捷键：把选中项在阅读序里 置顶 / 上移 / 下移 / 置底，按各项当前列宽重新堆叠；
+    // 只把重算出的 x/y 写回原项（保持引用，选中态与画布同步不丢）
+    reorder (dir) {
+      if (!this.selectComponent) return
+      const siblings = this.standalone ? this.findSiblings(this.layout, this.selectComponent.id) || this.layout : this.layout
+      const packed = reorderStack(siblings.filter(item => !item.mobileHidden), this.selectComponent.id, dir, this.colNum)
+      const byId = new Map(packed.map(p => [String(p.id), p]))
+      for (const it of siblings) {
+        const p = byId.get(String(it.id))
+        if (p) { it.x = p.x; it.y = p.y }
+      }
+    },
+    findSiblings (items, id) {
+      if (items.some(item => item.id === id)) return items
+      for (const item of items) {
+        const found = item.items && this.findSiblings(item.items, id)
+        if (found) return found
+      }
+      return null
+    },
+    // PC 组件样式（合并预览的基础），来自 PC 组件列表
+    pcStyle (id) {
+      const pcItem = this.pcItemIndex.get(String(id)) || {}
+      return pcItem.style || {}
+    },
+    // 预览用样式：PC 样式为基础 + 移动端覆盖（空值不覆盖）
+    compStyle (item) {
+      const cur = item.style || {}
+      const override = {}
+      for (const k in cur) {
+        if (cur[k] !== undefined && cur[k] !== null && cur[k] !== '') override[k] = cur[k]
+      }
+      return { ...this.pcStyle(item.id), ...override }
+    },
+    // 样式配置产出真实 CSS：只把"有值的键"作为移动端覆盖存到该 mItems 项（空值不存，运行时沿用 PC）
+    onStyleChange (item, style) {
+      const override = {}
+      for (const k in (style || {})) {
+        if (style[k] !== undefined && style[k] !== null && style[k] !== '') override[k] = style[k]
+      }
+      item.style = override
+      this.reloadComponent[item.id] = true
+      this.$nextTick(() => { this.reloadComponent[item.id] = false })
+    },
+    // 按 PC 布局一键生成移动端堆叠布局；已有布局时先打开页内覆盖确认
+    generateFromPc () {
+      if (this.layout && this.layout.length) {
+        this.confirmRegenerate = true
+      } else {
+        this.regenerate()
+      }
+    },
+    // 确认覆盖：关弹窗后执行生成；生成本身抛错给提示
+    regenerateFromConfirm () {
+      this.confirmRegenerate = false
+      try {
+        this.regenerate()
+      } catch (e) {
+        this.$message.error((e && (e.msg || e.message)) || '生成移动端布局失败')
+      }
+    },
+    // 重新生成：先清空让画布把旧壳全部移除、下一拍再整体放入。直接替换数组时画布会对同 id 的旧节点逐项 update，
+    // gridstack 碰撞层在中间态推挤，会把算好的紧凑堆叠搅乱（真机实测：两张统计卡被甩到最底下）
+    regenerate () {
+      const next = regenerateMobileDesign(this.$_.cloneDeep(this.designQuery.componentList || []), this.$_.cloneDeep(this.layout), this.colNum)
+      this.selectComponent = null
+      this.layout = []
+      this.$nextTick(() => { this.layout = next })
+    },
+    calculateHeight () {
+      this.bodyHeight = document.body.offsetHeight
+    },
+    measureCanvas () {
+      if (this.$refs.canvas) this.canvasHeight = this.$refs.canvas.clientHeight
+    }
+  },
+  mounted () {
+    const { mobileComponentList, componentList } = this.designQuery
+    if (this.standalone) {
+      this.layout = componentList || []
+    } else if (mobileComponentList) {
+      this.layout = this.$_.cloneDeep(mobileComponentList.filter(item => this.pcItemIndex.has(String(item.id))))
+    } else {
+      this.layout = stackMobileLayout(this.$_.cloneDeep(componentList || []))
+    }
+    this.measureCanvas()
+    if (typeof ResizeObserver !== 'undefined') {
+      this.canvasObserver = new ResizeObserver(() => this.measureCanvas())
+      this.canvasObserver.observe(this.$refs.canvas)
+    }
+  },
+  beforeUnmount () {
+    document.getElementById(this.themeScope)?.remove()
+    window.removeEventListener('resize', this.calculateHeight)
+    if (this.canvasObserver) this.canvasObserver.disconnect()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.config-container--standalone {
+  flex-direction: row !important;
+  .mobile-body {
+    flex: 1;
+    min-width: 0;
+    padding: 0 16px;
+    background: color-mix(in srgb, var(--epx-bg-page, #f3f5f8) 90%, var(--epx-text-primary, #303133));
+  }
+  .dashboard-design__mobile {
+    position: relative;
+    height: calc(100% - 24px);
+    margin: 12px auto;
+    max-width: calc(100% - 20px);
+    box-sizing: content-box;
+    outline: 1px solid var(--epx-border-color, #d5dce6);
+  }
+  .mobile-empty {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    button { pointer-events: auto; }
+  }
+  .drag-component--container > * { pointer-events: auto; }
+  :deep(.epx-dashboard-design-item:hover > .epx-dashboard-design-item__operates),
+  :deep(.epx-dashboard-design-item:focus-within > .epx-dashboard-design-item__operates) { display: flex; }
+  // 子组件悬停时只显示最内层操作条，即使外层容器仍处于选中状态。
+  :deep(.epx-dashboard-design-item:has(.epx-dashboard-design-item:hover) > .epx-dashboard-design-item__operates) { display: none; }
+  :deep(.epx-dashboard-design-item__float) { width: 32px; height: 32px; line-height: 32px; }
+  :deep(.component-operate__item) { width: 28px; line-height: 28px; }
+}
+.mobile-item-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+  font-size: 16px;
+  &:hover, &:focus-visible { background: rgba(255, 255, 255, .2); }
+}
+.mobile-properties__header {
+  padding: 16px;
+  border-bottom: 1px solid var(--epx-border-color, #e5e7eb);
+}
+.mobile-properties {
+  flex: 0 0 340px;
+  width: 340px;
+  max-width: 40%;
+  overflow-y: auto;
+  background: var(--epx-bg-card, #fff);
+  border-left: 1px solid var(--epx-border-color, #e5e7eb);
+  :deep(.config-container) { height: auto; }
+}
+.mobile-config__actions {
+  display: flex;
+  gap: 8px;
+  margin: 12px 0;
+}
+.config-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.page-header {
+  display: flex;
+  flex-shrink: 0;
+  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-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;
+}
+.header-operate__item {
+  color: #444;
+  cursor: pointer;
+  margin: 20px;
+  i {
+    margin-right: 4px;
+  }
+  &:hover {
+    @include font_color_primary
+  }
+}
+// 可滚动内容区：撑满 header 以下，手机框 + 归拢区超出时纵向滚动
+.mobile-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  transition: padding-right .2s;
+}
+.config-container--editing .mobile-body {
+  padding-right: min(400px, 44vw);
+}
+.dashboard-design__mobile {
+  width: 375px;
+  height: 670px;
+  margin: 24px auto;
+  overflow-y: auto;
+  background: var(--epx-bg-card, #fff);
+  border-radius: 0;
+  border: 0;
+  box-shadow: none;
+  // 仪表盘根节点为 flex 容器，长画布保持原高度并在手机框内滚动。
+  > .epx-dashboard-design-grid {
+    flex: none;
+  }
+}
+.mobile-empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #909399;
+  &__actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    width: 252px;
+    max-width: calc(100% - 40px);
+  }
+  &__action {
+    width: 100%;
+    height: 112px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    background: var(--epx-bg-card, #fff);
+    border: 1px solid var(--epx-border-color, #e5e7eb);
+    border-radius: var(--epx-radius-l, 12px);
+    font-family: inherit;
+    font-size: 14px;
+    color: var(--epx-text-primary, #444);
+    cursor: pointer;
+    transition: box-shadow .2s;
+    i { font-size: 32px; }
+    &:hover {
+      box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
+    }
+  }
+  &__text {
+    font-size: 14px;
+    margin-bottom: 16px;
+  }
+}
+.dashboard-design--dark {
+  background: #151C3D;
+}
+.dashboard-design--technology {
+  background: url('@/assets/images/dashboard/technology_bg.jpg') no-repeat center;
+  background-size: cover;
+}
+.drag-component {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  cursor: pointer;
+  >*  {
+    pointer-events: none;
+  }
+  // 图表根节点接收选中点击，内部图表交互不触发钻取；标签页仍可切换与滚动。
+  :deep([data-mobile-chart-id]),
+  :deep(.el-tabs__header),
+  :deep(.el-tab-pane) {
+    pointer-events: auto;
+  }
+  :deep([data-mobile-chart-id] *) {
+    pointer-events: none;
+  }
+  &__edit {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    z-index: 2;
+    padding: 4px;
+    font-size: 14px;
+    color: #fff;
+    background: rgba(8, 116, 231, .85);
+    border-radius: 4px;
+    opacity: 0;
+    transition: opacity .2s;
+  }
+  &:hover &__edit {
+    opacity: 1;
+  }
+}
+// 已隐藏组件归拢区：手机框下方，收纳隐藏项，点一下恢复到画布
+.mobile-hidden-tray {
+  width: 375px;
+  margin: 0 auto 16px;
+  padding: 10px 12px;
+  background: var(--epx-bg-card);
+  border: 1px solid var(--epx-border);
+  border-radius: 8px;
+  &__title {
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 8px;
+    i {
+      margin-right: 4px;
+    }
+  }
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    max-width: 160px;
+    padding: 4px 8px;
+    font-size: 12px;
+    color: #444;
+    background: var(--epx-bg-page, #f5f7fa);
+    border: 1px solid var(--epx-border);
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+      @include font_color_primary;
+      border-color: rgba(var(--color-primary), .5);
+    }
+  }
+  &__name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &__restore {
+    margin-left: 6px;
+    font-size: 13px;
+  }
+}
+// 容器策略区：与归拢区同宽同风格，每行 容器名 + 当前模式 + 「保留整块」开关
+.mobile-container-tray {
+  width: 375px;
+  margin: 0 auto 16px;
+  padding: 10px 12px;
+  background: var(--epx-bg-card);
+  border: 1px solid var(--epx-border);
+  border-radius: 8px;
+  &__title {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 6px;
+    i {
+      margin-right: 4px;
+    }
+  }
+  &__tip {
+    margin-left: auto;
+    font-size: 12px;
+    color: #909399;
+  }
+  &__row {
+    display: flex;
+    align-items: center;
+    padding: 6px 0;
+    font-size: 13px;
+    color: #444;
+    border-top: 1px solid #f0f0f0;
+  }
+  &__name {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &__mode {
+    margin: 0 10px;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+.mobile-config {
+  padding: 16px;
+  &__hint {
+    font-size: 12px;
+    line-height: 1.7;
+    color: var(--epx-text-secondary, #909399);
+    background: var(--epx-bg-page, #f5f7fa);
+    border-radius: 6px;
+    padding: 10px;
+  }
+  &__title {
+    font-weight: 600;
+    font-size: 15px;
+    margin-bottom: 12px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  &__type {
+    font-size: 12px;
+    font-weight: normal;
+    padding: 3px 8px;
+    border-radius: 4px;
+    background: var(--epx-bg-page, #f5f7fa);
+    color: var(--epx-text-secondary, #909399);
+  }
+  &__chart-type {
+    margin: 8px 0;
+    font-size: 12px;
+    color: var(--epx-text-secondary, #909399);
+  }
+  &__section-title {
+    margin-top: 16px;
+    font-size: 12px;
+    color: var(--epx-text-secondary, #909399);
+  }
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+  }
+  &__group-title {
+    margin: 16px 0 8px;
+    font-weight: 600;
+    color: #666;
+  }
+}
+.mobile-config-header {
+  strong {
+    font-size: 16px;
+    color: var(--epx-text);
+  }
+  p {
+    margin: 6px 0 0;
+    font-size: 12px;
+    color: var(--epx-text-secondary, #909399);
+  }
+}
+.mobile-card-style {
+  margin-top: 20px;
+  border-top: 1px solid var(--epx-border);
+  summary {
+    padding: 16px 0;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+  }
+}
+.mobile-appearance {
+  padding: 10px 0;
+  border-bottom: 1px solid var(--epx-border);
+  &__heading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+    font-size: 13px;
+    > .el-button {
+      margin-left: auto;
+    }
+  }
+  &__status {
+    font-size: 12px;
+    font-weight: normal;
+    color: var(--epx-text-secondary, #909399);
+    &.is-independent {
+      @include font_color_primary;
+    }
+  }
+}
+// 覆盖确认弹窗：居中轻量卡片（图标 + 文案 + 双按钮），替代 MessageBox 默认样式
+.mobile-confirm {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 8px 8px 4px;
+  &__icon {
+    font-size: 40px;
+    color: #e6a23c;
+    margin-bottom: 12px;
+  }
+  &__text {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--epx-text, #333);
+  }
+  &__actions {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin-top: 20px;
+  }
+}
+</style>
+
+<style lang="scss">
+// 抽屉传送到 body，只通过专用类调整，不影响其它抽屉。
+.mobile-appearance-drawer {
+  .el-drawer__header {
+    padding: 16px;
+    margin: 0;
+    border-bottom: 1px solid var(--epx-border);
+  }
+  .el-drawer__body {
+    padding: 0;
+    min-height: 0;
+  }
+}
+</style>