这是一个“页面零适配、组件零感知、样式可扩展、横竖屏自适应”的工业级平板系统架构
核心思想：设计稿驱动、变量化管理、组合式逻辑、动态样式加载
核心原理：vmin 替代 rpx + CSS 变量覆盖 + composables 封装 + 动态样式src/
├─ App.vue
├─ main.ts
│
├─ pages/
│ └─ index/
│ └─ index.vue
│
├─ components/ #页面组件(自行定义)
│ ├─ layout/ #骨架组件
│ │ ├─ AppHeader.vue #顶部固定头部
│ │ └─ PageContainer.vue #页面统一容器 padding 最大宽度 是否滚动 背景
│ │
│ └─ cards/ #卡片组件
│ └─ Card.vue
│
├─ composables/ #响应式适配逻辑（核心）
│ ├─ useScreen.ts #屏幕信息管理 作用：是否横屏 宽高 实时监听变化
│ ├─ useGridColumns.ts #专门计算 Grid 列数 作用：屏幕宽度 最小卡片宽 横竖屏策略
│
├─ utils/
│ └─ styleLoader.ts #根据设备 & 横竖屏 动态加载样式文件 处理厂商坑
│
├─ styles/ #整个项目的视觉引擎
│ ├─ tools.scss #提供函数 作用：换算
│ ├─ base-vars.scss # 基础变量层（所有页面共用）统一尺度源头
│ ├─ reset.scss #消除平台默认样式差异
│ ├─ global.scss #全局通用类 body / page 基础样式 通用 flex 工具类
│ ├─ iconfont.css
│ ├─ theme.scss
│ │
│ ├─ orientation/
│ │ ├─ portrait.scss #竖屏专属变量覆盖
│ │ └─ landscape.scss #横屏专属变量覆盖
│ │
│ └─ devices/ #特殊设备可外挂覆盖样式
│ ├─ ipad.scss
│ └─ large-pad.scss
一、核心问题
多平板横竖屏差异大
工业平板 / iPad / 华为 Pad 等屏幕宽高比不同
横屏和竖屏宽高比例完全不同
直接用 rpx / px 会导致布局失控动态元素尺寸需求
字体、按钮、间距、卡片宽高都需要随屏幕变化
竖屏和横屏下的视觉舒适度不同
单一 rpx 公式无法满足所有情况多设备特殊处理
有些设备需要特殊样式（如 iPad 字体、超大屏卡片间距）
如果把样式写死在页面，会导致代码重复、难维护页面、组件、样式耦合
页面直接写横竖屏判断、列数计算、字体大小，会让业务逻辑和适配逻辑混杂
后期扩展和维护成本高二、设计目标
适配所有平板、横竖屏切换
自动计算字体、间距、卡片尺寸
横屏和竖屏视觉舒适、比例合理样式集中管理
基础样式 + 横竖屏覆盖 + 特殊设备覆盖
页面和组件不关心设备差异可扩展、可维护
新设备、新尺寸、新设计稿只需修改基础变量或新增覆盖样式
页面和组件无需改动组合式逻辑
屏幕信息、列数计算、设备判断全部封装成 composables
页面逻辑只关注数据和组件组合三、技术手段（核心原理）
rpx → vmin / vmax 替换
rpx 会随屏幕宽度变化，但横竖屏切换时会“放大/缩小”导致比例失真
vmin / vmax 基于视口最小/最大边长 1%，更适合横竖屏自适应
结合 Sass @function，把设计稿 px 转换成 vmin，形成统一比例CSS 变量统一管理尺寸
字体、间距、圆角、卡片 gap 全部用 --var 定义
横屏 / 竖屏 / 特殊设备只覆盖变量值
页面只使用变量，不直接写数字动态样式加载
利用 uni.getSystemInfoSync() 获取屏幕宽高、型号
根据横竖屏和设备类型动态 import 对应样式
避免页面写死设备判断，减少重复组合式逻辑封装
useScreen：横竖屏状态、屏幕宽高
useGridColumns：根据最小卡片宽度和 gap 自动计算列数
useDevice：设备类型判断
页面只调用这些 composables，即可自适应组件化 / 页面解耦
页面只关心数据和组件组合
组件只关心自己的样式和结构
横竖屏适配逻辑全部在全局变量 + composables + styleLoader 完成四、架构思想（设计理念）
“数据和业务驱动页面”
页面不关心适配逻辑，只组合组件和数据“样式集中、变量化”
所有可变尺寸写进 CSS 变量
横竖屏 / 特殊设备只修改变量，不改组件“逻辑封装、可组合”
横竖屏、列数、设备判断封装成 composables
页面逻辑零感知，方便团队协作“动态加载、轻量扩展”
新平板、新设计稿只需新增 style 文件
不污染页面和组件“体系化设计”
从设计稿尺寸 → vmin → CSS 变量 → 页面组件
形成完整闭环，保证多屏、多设备一致性