六、跨平台响应式方案
6.1 TinyPro 移动端适配
TinyPro 作为基于 TinyVue 的后台管理系统模板，在 2024-2025 年完成了移动端适配，实现了“从桌面到掌心”的统一体验。
适配目标：
保持桌面端功能完整性
优化移动端触摸交互
自动适配不同屏幕尺寸
支持横竖屏切换
保持视觉风格一致性
技术选型：UnoCSS + Less 的混合架构
6.2 UnoCSS 原子化方案
UnoCSS 是一个按需生成的原子化 CSS 引擎，最大的特点是零冗余与高度可定制。它会在构建阶段根据实际使用的类名即时生成样式规则，从而显著提升构建性能与灵活性。
与传统原子化框架（如 Tailwind CSS）相比，UnoCSS 具有以下优势：
按需生成：只生成实际使用的类，没有冗余代码
极速构建：通过预扫描和即时生成，构建速度极快
高度可配置：支持自定义规则、变体、预置
UnoCSS 配置示例：
// uno.config.ts
import { defineConfig, presetUno, presetAttributify } from 'unocss'
// 定义响应式断点（与 TinyPro 保持一致）
const breakpoints = {
sm: '641px', // 手机（小屏）
md: '769px', // 平板竖屏
lg: '1025px', // 平板横屏 / 小型笔电
xl: '1367px', // 常规笔电
'2xl': '1441px', // 高清笔电
'3xl': '1921px', // 桌面大屏
}
export default defineConfig({
presets: [
presetUno(),
presetAttributify({ prefix: 'un-' })
],
theme: {
breakpoints,
colors: {
primary: '#5E7CE0',
success: '#3DBE60',
warning: '#F7B23C',
error: '#F55E5E'
}
},
shortcuts: [
['flex-center', 'flex justify-center items-center'],
['absolute-center', 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2']
]
})
6.3 桌面端优先策略
TinyPro 采用「桌面端优先（max-width）」的布局策略，默认以桌面端布局为基础，在移动设备上再进行针对性优化。相比常见的「移动端优先（min-width）」方式，这种做法更符合中后台系统的特性：
中后台系统主要使用场景仍是桌面端
移动端是补充场景，不需要同等复杂的功能
保持桌面端功能的完整性
<!-- 默认宽度为 50%，在小屏设备上改为 100% -->
<div class="w-1/2 max-md:w-full"></div>
<!-- 默认显示 4 列，在小屏设备上改为 2 列 -->
<div class="grid grid-cols-4 max-md:grid-cols-2"></div>
<!-- 桌面端显示，移动端隐藏 -->
<div class="block max-md:hidden">桌面端专属内容</div>
<!-- 移动端显示，桌面端隐藏 -->
<div class="hidden max-md:block">移动端专属内容</div>
6.4 组件级响应式适配
除了布局层面的响应式，TinyPro 还对复杂组件进行了移动端适配：
表格组件适配：
<!-- 桌面端：标准表格 -->
<tiny-table :data="tableData" :columns="columns" class="hidden max-md:hidden" />
<!-- 移动端：卡片式列表 -->
<div class="hidden max-md:block">
<div v-for="item in tableData" :key="item.id" class="mobile-card">
<div class="card-row"><span class="label">姓名：</span>{
{ item.name }}</div>
<div class="card-row"><span class="label">部门：</span>{
{ item.department }}</div>
<div class="card-row"><span class="label">状态：</span>{
{ item.status }}</div>
<div class="card-actions">
<tiny-button size="small">编辑</tiny-button>
<tiny-button size="small" type="danger">删除</tiny-button>
</div>
</div>
</div>
表单组件适配：
<!-- 桌面端：多列布局 -->
<div class="grid grid-cols-2 gap-4 max-md:grid-cols-1">
<tiny-form-item label="姓名">
<tiny-input v-model="formData.name" />
</tiny-form-item>
<tiny-form-item label="部门">
<tiny-select v-model="formData.department" />
</tiny-form-item>
</div>
6.5 触摸交互优化
移动端适配不仅仅是视觉上的调整，还包括交互层面的优化：
// 触摸事件处理
const handleTouchStart = (e) => {
// 记录触摸起始位置
startX.value = e.touches[0].clientX
startY.value = e.touches[0].clientY
}
const handleTouchMove = (e) => {
// 计算滑动距离，实现滑动删除等交互
const deltaX = e.touches[0].clientX - startX.value
if (Math.abs(deltaX) > 50) {
// 触发滑动操作
onSwipe(deltaX > 0 ? 'right' : 'left')
}
}
6.6 性能监控与优化
在移动端适配过程中，TinyPro 引入了性能监控方案：
首屏加载时间：监控 FCP、LCP 指标
交互响应时间：监控点击响应延迟
滚动性能：监控滚动帧率
内存占用：监控页面内存使用情况
# 七、核心组件与常用特性
7.1 组件数量与迭代
TinyVue 目前提供 104 个组件，且保持每月发布策略，持续迭代更新。
组件分类统计：
版本迭代示例：
以 v3.30.0/v2.30.0 版本为例，新增了以下组件的适配和优化：
Button、Button-Group：新增 loading 状态优化
Link、Breadcrumb、Steps：优化响应式表现
Cascader、Search：新增远程搜索功能
Dialog-Box、Drawer、Popover、Notify、Modal：优化动画性能
Form、Radio、Checkbox、Numeric、Select：完善表单校验
Dropdown、Action-Menu：新增右键菜单支持
Alert、CalendarView：新增移动端适配
7.2 核心组件解析
Button 按钮组件：
<template>
<!-- 按钮类型 -->
<tiny-button type="primary">主要按钮</tiny-button>
<tiny-button type="success">成功按钮</tiny-button>
<tiny-button type="warning">警告按钮</tiny-button>
<tiny-button type="danger">危险按钮</tiny-button>
<tiny-button type="info">信息按钮</tiny-button>
<!-- 按钮尺寸 -->
<tiny-button size="large">大按钮</tiny-button>
<tiny-button size="medium">中按钮</tiny-button>
<tiny-button size="small">小按钮</tiny-button>
<tiny-button size="mini">迷你按钮</tiny-button>
<!-- 按钮状态 -->
<tiny-button disabled>禁用按钮</tiny-button>
<tiny-button loading>加载中</tiny-button>
<!-- 图标按钮 -->
<tiny-button icon="icon-home">首页</tiny-button>
<tiny-button :icon="SearchIcon" />
</template>
Grid 表格组件（PC 端核心组件）：
<template>
<tiny-grid
:data="tableData"
:columns="columns"
:pager-config="pagerConfig"
:loading="loading"
@cell-click="handleCellClick"
@sort-change="handleSortChange"
>
<!-- 自定义列模板 -->
<tiny-grid-column
field="status"
title="状态"
:cell-renderer="{ name: 'CellStatus' }"
/>
<!-- 操作列 -->
<tiny-grid-column
field="action"
title="操作"
width="150"
fixed="right"
>
<template #default="{ row }">
<tiny-button type="text" @click="editRow(row)">编辑</tiny-button>
<tiny-button type="text" @click="deleteRow(row)">删除</tiny-button>
</template>
</tiny-grid-column>
</tiny-grid>
</template>
Table 表格组件（通用表格）：
<template>
<tiny-table
:data="tableData"
:columns="columns"
:border="true"
:stripe="true"
:highlight-current-row="true"
@current-change="handleCurrentChange"
>
<tiny-table-column
type="selection"
width="55"
/>
<tiny-table-column
prop="name"
label="姓名"
sortable
/>
<tiny-table-column
prop="age"
label="年龄"
sortable
/>
<tiny-table-column
label="操作"
width="150"
>
<template #default="scope">
<tiny-button size="mini" @click="handleEdit(scope.row)">编辑</tiny-button>
<tiny-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</tiny-button>
</template>
</tiny-table-column>
</tiny-table>
</template>
Form 表单组件：
<template>
<tiny-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
@submit="handleSubmit"
>
<tiny-form-item label="用户名" prop="username">
<tiny-input v-model="formData.username" placeholder="请输入用户名" />
</tiny-form-item>
<tiny-form-item label="邮箱" prop="email">
<tiny-input v-model="formData.email" placeholder="请输入邮箱" />
</tiny-form-item>
<tiny-form-item label="角色" prop="role">
<tiny-select v-model="formData.role" placeholder="请选择角色">
<tiny-option label="管理员" value="admin" />
<tiny-option label="普通用户" value="user" />
</tiny-select>
</tiny-form-item>
<tiny-form-item label="状态" prop="status">
<tiny-switch v-model="formData.status" />
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" native-type="submit">提交</tiny-button>
<tiny-button @click="resetForm">重置</tiny-button>
</tiny-form-item>
</tiny-form>
</template>
7.3 开源生态与集成
TinyVue 在构建过程中借鉴并集成了多个优秀的开源项目：
7.4 配置式开发
TinyVue 支持配置式开发模式，特别适合表单密集型的后台管理系统。基于 JSON Schema 的表单生成器配合数据驱动视图的特性，实现了动态表单的分钟级搭建。
// 表单配置 JSON
const formConfig = {
formItems: [
{
type: 'input',
field: 'username',
label: '用户名',
props: {
placeholder: '请输入用户名'
},
rules: [
{ required: true, message: '用户名不能为空' }
]
},
{
type: 'select',
field: 'role',
label: '角色',
options: [
{ label: '管理员', value: 'admin' },
{ label: '普通用户', value: 'user' }
]
}
]
}
<template>
<tiny-dynamic-form :config="formConfig" v-model="formData" />
</template>
