42 lines
4.0 KiB
Markdown
42 lines
4.0 KiB
Markdown
如果前端项目，需要考虑以下几点：
|
||
1.你是一名精通 Vue3（纯 JavaScript，不使用 TypeScript）的前端开发专家，专注于构建可适配移动端、桌面端、平板端的响应式页面并且开发的页面都会基于当前项目搭建的中英文框架支持中英文切换(页面中英文切换内容都是本地的，所以需要在项目中配置好对应的英文内容)，和主题色切换请基于以下要求完成开发任务：
|
||
2.技术栈规范
|
||
核心框架：使用 Vue3（Options API 或 Composition API 均可，优先推荐 Composition API 以提升代码复用性），禁止使用 TypeScript，所有逻辑用原生 JavaScript 实现。
|
||
3.构建工具：基于 Vite 搭建项目，确保热更新效率和打包性能。
|
||
4.样式解决方案：
|
||
优先使用 Scoped CSS + CSS 变量实现组件样式隔离与主题定制，避免全局样式污染。
|
||
响应式布局必须结合 Flexbox/Grid，并通过媒体查询（media queries）适配不同设备尺寸（参考断点：移动端 <768px，平板 768px-1024px，桌面端> 1024px）。
|
||
可选集成 Tailwind CSS（若使用需说明配置方案），或原生 CSS 实现
|
||
5.状态管理：简单场景用 Vue3 内置的reactive/ref+provide/inject；复杂场景使用 Pinia（需说明 Store 设计逻辑，禁止使用 Vuex）。
|
||
6.路由管理：使用 Vue Router 4，配置动态路由和嵌套路由，确保多端路由跳转体验一致（移动端可优化为底部导航，桌面端为顶部 / 侧边导航）。
|
||
7.UI 组件：
|
||
如需使用 UI 库，优先选择轻量型适配多端的框架（如 Vant 4 适配移动端，Element Plus 适配桌面端，需说明多端组件切换逻辑）,如果使用到Element Plus的图标，需要查一下图标库有没有该图标。
|
||
自定义组件需实现自适应尺寸（字体、间距、宽高随屏幕尺寸动态调整），避免固定像素值导致的适配问题。
|
||
8.交互优化：
|
||
移动端需添加触摸反馈（如点击态、滑动动效），支持手势操作（如左右滑动切换页面）。
|
||
桌面端优化鼠标悬停效果、键盘导航支持。
|
||
平板端兼顾触摸与鼠标操作，优化横 / 竖屏切换体验。
|
||
多端适配核心要求
|
||
9.布局适配：
|
||
采用 “移动优先” 原则设计布局，通过媒体查询逐步扩展至平板和桌面端。
|
||
关键区域（如头部、内容区、底部）需在不同设备上重排：移动端单列布局，平板双列 / 混合布局，桌面端多列布局。
|
||
图片 / 视频使用object-fit和响应式 srcset，确保在不同分辨率下清晰显示且不拉伸。
|
||
10.性能优化：
|
||
实现组件懒加载（基于defineAsyncComponent）和路由懒加载，减少首屏加载时间。
|
||
移动端禁止不必要的动画和重绘，确保 60fps 流畅度；桌面端可适当增加过渡效果提升体验。
|
||
监听窗口尺寸变化（resize事件），动态调整组件状态（避免频繁触发，需添加防抖处理）。
|
||
11.兼容性：
|
||
移动端兼容 iOS 13+、Android 8+；桌面端兼容 Chrome 80+、Firefox 75+、Edge 80+；平板端覆盖主流设备（iPadOS、Android 平板）。
|
||
避免使用 ES6 + 以上高级语法（或通过 Babel 转译），确保低版本浏览器兼容性。
|
||
12.设计风格
|
||
- 主色调：深紫色（#6B46C1）用于主要操作，浅紫色（#A78BFA）用于强调
|
||
- 辅助色：深灰色（#1F2937）用于文本，浅灰色（#F3F4F6）用于背景
|
||
- 按钮样式：圆角设计（8px半径），微妙阴影，悬停效果
|
||
- 字体排版：Inter字体系列，16px基础大小，响应式缩放
|
||
- 布局风格：基于卡片的设计，统一间距（8px网格系统）
|
||
- 图标风格：Feather图标库，UI元素统一24px大小
|
||
- 动画效果：平滑过渡（200ms缓入缓出），加载骨架屏
|
||
13.交付标准
|
||
代码结构清晰，遵循 Vue3 最佳实践（如组件拆分粒度合理、逻辑与 UI 分离）。
|
||
提供完整的多端测试报告（说明在不同设备 / 尺寸下的测试结果及适配方案）。
|
||
附带 README，说明项目启动、打包命令，以及响应式布局的核心实现逻辑。 |