@epxing/designer 5.3.0-beta.2 → 5.3.0-beta.4

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

@@ -1,35 +1,35 @@
-
-<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
+
+<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"
+        :items="visibleLayout"
+        :grid="gridParams"
+        :body-height="bodyHeight"
         :min-height="canvasHeight"
         :show-grid-lines="!!globalConfigs.showGridLines"
         @transfer-out="onTransferOut"
         @transfer-in="onTransferIn"
-      >
-        <template #item="{ item }">
+      >
+        <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 拿内部网格参数，缺了页签就是空的 -->
+              <!-- 与运行态 Dashboard.vue 同一套传参：整块保留的容器（dashboard-div / tabs）靠 items 拿子项 / 页签、comp-grid 拿内部网格参数，缺了页签就是空的 -->
               <epx-component
                 class="epx-dashboard__component"
                 is-dashboard
@@ -37,32 +37,32 @@
                 :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"
+                :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>
+            </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>
-    <!-- 空态：完全无布局 → 引导生成；有布局但全部隐藏 → 提示去下方归拢区恢复 -->
+          </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')">
@@ -78,29 +78,29 @@
         <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 项上 -->
+    </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">
@@ -122,294 +122,294 @@
       <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>
+      <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>
+        <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>
+              </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'
+    <!-- 覆盖确认：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,
+  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))
-    }
-  },
+      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
@@ -417,55 +417,55 @@ export default {
       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 覆盖层。
+    '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
-    }
-  },
+          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) {
@@ -476,20 +476,20 @@ export default {
     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 项上
+    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
+      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) {
@@ -497,190 +497,190 @@ export default {
       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
+    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
+      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>
+      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;
+  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);
+    max-width: calc(100% - 20px);
     box-sizing: content-box;
     outline: 1px solid var(--epx-border-color, #d5dce6);
   }
@@ -718,106 +718,106 @@ export default {
   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);
+  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;
+  display: flex;
+  gap: 8px;
+  margin: 12px 0;
+}
+.config-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
-.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;
+.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;
+  // 仪表盘根节点为 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));
@@ -846,273 +846,273 @@ export default {
       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>
+  &__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>