提交新的移动端框架
This commit is contained in:
zlwu committed
1 parent
134f711349
commit
9bda3717fe
75 files changed
+5283
-9011
No files matched your search
@@ -358,6 +358,51 @@ export default {
|
||||
|
||||
## 5. 🎨 图标使用规范 (SVG Data URI 方案)
|
||||
|
||||
### 🚨 强制性图标使用规范（2025-08-06 新增）
|
||||
|
||||
**⚠️ 重要说明**: 移动端项目已全面禁用 uview-plus 的 u-icon 组件，强制使用 iconfont 图标系统！
|
||||
|
||||
#### 📋 强制要求
|
||||
|
||||
1. **🚫 禁止使用 u-icon 组件**
|
||||
```vue
|
||||
<!-- ❌ 禁止这样写 -->
|
||||
<u-icon name="search" size="20" color="#666"></u-icon>
|
||||
<u-icon name="account" size="24"></u-icon>
|
||||
<u-icon name="close" @click="handleClose"></u-icon>
|
||||
```
|
||||
|
||||
2. **✅ 必须使用 iconfont 图标**
|
||||
```vue
|
||||
<!-- ✅ 正确写法 -->
|
||||
<text class="iconfont icon-search" style="font-size: 20px; color: #666;"></text>
|
||||
<text class="iconfont icon-account-circle" style="font-size: 24px;"></text>
|
||||
<text class="iconfont icon-close" @click="handleClose"></text>
|
||||
```
|
||||
|
||||
3. **🔄 动态图标类名**
|
||||
```vue
|
||||
<!-- ✅ 动态切换图标 -->
|
||||
<text
|
||||
:class="'iconfont ' + (expanded ? 'icon-arrow-down' : 'icon-arrow-right')"
|
||||
style="font-size: 16px; color: #999;"
|
||||
@click="toggleExpand"
|
||||
></text>
|
||||
```
|
||||
|
||||
#### 🎯 替换映射表
|
||||
|
||||
| u-icon name | iconfont class | 说明 |
|
||||
|-------------|----------------|------|
|
||||
| `search` | `icon-search` | 搜索图标 |
|
||||
| `account` | `icon-account-circle` | 用户账户图标 |
|
||||
| `close` | `icon-close` | 关闭图标 |
|
||||
| `email` | `icon-email` | 邮件图标 |
|
||||
| `arrow-right` | `icon-arrow-right` | 右箭头图标 |
|
||||
| `arrow-down` | `icon-arrow-down` | 下箭头图标 |
|
||||
| `home` | `icon-home` | 首页图标 |
|
||||
| `setting` | `icon-setting` | 设置图标 |
|
||||
|
||||
### 背景说明
|
||||
|
||||
由于 uview-plus 的 u-icon 组件在某些环境下存在显示异常（显示为横线），项目采用 **SVG Data URI** 方案实现图标系统，确保跨平台兼容性和显示稳定性。
|
||||
@@ -369,6 +414,7 @@ export default {
|
||||
- ✅ **加载稳定**: 无 404 错误，无网络请求，性能优异
|
||||
- ✅ **样式灵活**: 通过 CSS filter 实现颜色自定义
|
||||
- ✅ **维护简单**: 基于 Material Design，图标清晰美观
|
||||
- ✅ **显示稳定**: 彻底解决 u-icon 组件显示异常问题
|
||||
|
||||
### 图标配置文件
|
||||
|
||||
@@ -1784,3 +1830,152 @@ npm run lint:fix
|
||||
**📝 维护**: 移动端开发规范文档
|
||||
**🔄 更新**: 2025-01-03 (新增登录状态管理规范)
|
||||
**📁 文件**: .cursor/cursorrules-mobile.md
|
||||
|
||||
# uview-plus 图标组件规范（2025-07-01 新增）
|
||||
- 移动端UI开发中，图标组件统一使用 <u-icon />（uview-plus 3.x 官方标准），禁止使用 <up-icon /> 或 <uv-icon />。
|
||||
- 推荐通过 easycom 自动全局注册，无需手动 import。
|
||||
- 标准用法示例：
|
||||
```vue
|
||||
<u-icon name="account" size="22" color="#b0b8c9" />
|
||||
<u-icon name="lock-open" size="22" color="#b0b8c9" />
|
||||
```
|
||||
- 图标名称请参考 uview-plus 官方文档：https://v3.uviewui.com/components/icon.html
|
||||
|
||||
## uview-plus 图标字体配置规范（2025-08-06 更新）
|
||||
|
||||
### 📦 版本升级经验总结
|
||||
|
||||
**升级记录**: uview-plus 3.4.45 → 3.4.73 (+28个版本)
|
||||
**升级时间**: 2025-08-06
|
||||
**配置优化**: 采用官方推荐的字体加载机制
|
||||
|
||||
### 🔧 官方推荐配置方案
|
||||
|
||||
#### 方案1: 自托管字体配置（官方推荐 ⭐）
|
||||
|
||||
**参考文档**: https://uview-plus.jiangruyi.com/components/icon.html#自定义默认字体图标自托管资源
|
||||
|
||||
```javascript
|
||||
// main.js - 官方推荐配置方式
|
||||
app.use(uviewPlus, () => {
|
||||
return {
|
||||
options: {
|
||||
config: {
|
||||
// 🔧 自托管字体图标资源地址，避免CDN依赖问题
|
||||
iconUrl: '/static/fonts/uview-plus-official.ttf'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 方案2: 手动加载字体（官方兼容性方案）
|
||||
|
||||
**参考文档**: https://uview-plus.jiangruyi.com/components/icon.html#新版本全局加载兼容性
|
||||
|
||||
```javascript
|
||||
// App.vue - 如果在小程序等场景出现图标无法全局加载
|
||||
import { fontUtil } from 'uview-plus';
|
||||
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
// 官方推荐：手动加载uview-plus字体图标
|
||||
fontUtil.loadFont();
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 方案3: CSS备用方案（平台兼容）
|
||||
|
||||
```css
|
||||
/* App.vue - 其他平台如抖音/QQ/百度小程序的备用方案 */
|
||||
@font-face {
|
||||
font-family: 'uicon-iconfont';
|
||||
src: url('/static/fonts/uview-plus-official.ttf') format('truetype');
|
||||
}
|
||||
```
|
||||
|
||||
### 🏆 最佳实践配置
|
||||
|
||||
```javascript
|
||||
// main.js - 完整配置示例
|
||||
import { createSSRApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import uviewPlus from 'uview-plus';
|
||||
import 'uview-plus/index.scss';
|
||||
import '@/static/fonts/iconfont.css'; // 自定义SVG图标库
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App);
|
||||
|
||||
// 🔧 官方推荐：uview-plus配置
|
||||
app.use(uviewPlus, () => {
|
||||
return {
|
||||
options: {
|
||||
config: {
|
||||
iconUrl: '/static/fonts/uview-plus-official.ttf'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return { app };
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
// App.vue - 兼容性配置
|
||||
import { fontUtil } from 'uview-plus';
|
||||
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
// 🔧 官方推荐：手动加载字体图标
|
||||
try {
|
||||
fontUtil.loadFont();
|
||||
console.log('✅ 手动加载uview-plus字体成功');
|
||||
} catch (error) {
|
||||
console.error('❌ 手动加载uview-plus字体失败:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 混合图标使用策略
|
||||
- **uview-plus图标**: 使用 `<u-icon name="home" />` 系统通用图标
|
||||
- **项目iconfont**: 使用 `<text class="iconfont icon-user"></text>` 业务专用图标
|
||||
- **优先级**: 项目iconfont > uview-plus图标 > CDN字体
|
||||
|
||||
### ⚠️ 重要注意事项
|
||||
|
||||
#### 升级前检查
|
||||
1. **字体文件**: 确保本地字体文件存在且可访问
|
||||
2. **网络环境**: 测试CDN地址访问性
|
||||
3. **版本兼容**: 检查字体版本与组件版本匹配
|
||||
|
||||
#### 最佳实践
|
||||
1. **优先级**: 项目iconfont > 本地字体 > CDN字体
|
||||
2. **测试覆盖**: 在不同网络环境下测试图标显示
|
||||
3. **回退机制**: 准备备用图标方案
|
||||
4. **文档记录**: 及时更新字体配置变更
|
||||
|
||||
### 📚 相关文件位置
|
||||
- **字体配置**: `mobile/src/main.js`
|
||||
- **测试页面**: `mobile/src/pages/demo/uview-icon-test/index.vue`
|
||||
- **字体文件**: `mobile/src/static/fonts/`
|
||||
- **项目图标**: `mobile/src/static/fonts/iconfont.css`
|
||||
|
||||
### 🧪 测试验证
|
||||
```bash
|
||||
# 启动开发服务器
|
||||
npm run dev:h5
|
||||
|
||||
# 访问测试页面
|
||||
http://localhost:3000/#/pages/demo/uview-icon-test/index
|
||||
```
|
||||
|
||||
### 📖 参考文档
|
||||
- uview-plus官方文档: https://uview-plus.jiangruyi.com/
|
||||
- 字体图标组件: https://uview-plus.jiangruyi.com/components/icon.html
|
||||
- 自托管配置: https://uview-plus.jiangruyi.com/components/icon.html#自定义默认字体图标自托管资源
|
||||
- 兼容性配置: https://uview-plus.jiangruyi.com/components/icon.html#新版本全局加载兼容性
|
||||
- 项目图标文档: `docs/开发文档/API/u-icon替换映射表.md`
|
||||
Reference in new issue
Block a user