mobile-optimization

name	mobile-optimization
description	本项目（Vue 3 + Element Plus + ECharts 股票分析前端）的移动端适配规范与改造流程。当需要优化任意页面/组件在手机（≤768px）上的展示、处理图表标签重叠、表格溢出、筛选器/弹窗布局，或新增页面要保证移动端可用时使用。

移动端适配规范（Vue 3 + Element Plus + ECharts）

两条核心原则

1. 内容密度高：小屏尽量多展示。收窄外边距、图表满宽、表格列紧凑、摘要卡片多列。
2. 绝不遮挡：ECharts 轴标签/图例不重叠不裁切；表格横滑不出现固定列覆盖；悬浮元素（tooltip/toolbox/dataZoom/visualMap）不压数据。

断点统一用 768px（手机）与 959/992px（平板过渡）。

---

1. 断点检测：统一用 useIsMobile

CSS @media 改不到的地方（ECharts option、el-dialog 宽度、el-table 列 :fixed/:min-width、el-descriptions 列数、图表高度）必须用 JS 响应式判断。不要每个组件各写一份 window.innerWidth + resize 监听。

// src/composables/useIsMobile.ts —— 已存在，直接复用
import { useIsMobile } from '@/composables/useIsMobile'
const { isMobile } = useIsMobile()   // 基于 matchMedia('(max-width: 768px)') 的只读响应式 ref

组件里凡是 option 依赖 isMobile 的，用 computed 或在 watch(isMobile, ...) 里重算 + nextTick(() => chart?.resize())。

---

2. 全局 CSS（已在 src/assets/main.css 落地，新组件自动继承）

@media (max-width: 959px) / (max-width: 480px) 已统一处理，新页面通常无需重复写：

• el-main.main-content 去掉默认 20px 内边距；子元素内边距 8px（≤480 为 4px）——外框窄、内容贴边。