zlwu
afe3e234e9
✨ 新增功能: - 全局路由守卫模块 (route-guard.js) - 多层次权限验证 (登录状态+Token存在+Token过期检查) - 自动拦截机制 (页面级+跳转级+HTTP级+应用级) - 401响应自动处理和跳转 - 路由守卫测试页面 🔧 技术实现: - checkPageAccess() 全局页面权限检查 - guardedNavigate/guardedSwitchTab 带权限检查的跳转 - handleUnauthorized() HTTP拦截器401处理 - 公开页面配置管理 - 优雅的错误提示和跳转逻辑 📱 页面集成: - App.vue 初始化路由守卫 - profile/workbench 页面添加权限检查 - index 页面优化跳转逻辑 - 新增测试页面验证功能 📚 文档完善: - 移动端路由守卫使用指南 - 详细的变更记录和技术说明 - 最佳实践和注意事项 🎯 核心效果: 用户登录失效或未登录时，访问任何需要权限的页面都自动跳转到登录页，提升安全性和用户体验。
352 lines
7.8 KiB
Markdown
352 lines
7.8 KiB
Markdown
# 移动端 iconfont 图标使用指南
|
||
|
||
## 📋 概述
|
||
|
||
本项目已集成 iconfont.cn 图标字体库，提供丰富的矢量图标，替代 emoji 和 uview-plus 图标，确保跨平台兼容性。
|
||
|
||
## 🎯 解决的问题
|
||
|
||
- **uview-plus 图标显示异常**：u-icon 组件在某些环境下显示为横线
|
||
- **emoji 兼容性问题**：不同设备和系统 emoji 显示效果不一致
|
||
- **图标扩展性**：iconfont 提供更丰富的图标选择
|
||
|
||
## 📦 安装配置
|
||
|
||
### 1. 字体文件配置
|
||
|
||
**文件位置**：`mobile/src/static/fonts/iconfont.css`
|
||
|
||
```css
|
||
@font-face {
|
||
font-family: 'iconfont';
|
||
src: url('//at.alicdn.com/t/c/font_4793979_9m3yqql3ybj.woff2?t=1704153600') format('woff2'), url('//at.alicdn.com/t/c/font_4793979_9m3yqql3ybj.woff?t=1704153600')
|
||
format('woff'),
|
||
url('//at.alicdn.com/t/c/font_4793979_9m3yqql3ybj.ttf?t=1704153600') format('truetype');
|
||
}
|
||
|
||
.iconfont {
|
||
font-family: 'iconfont' !important;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
```
|
||
|
||
### 2. 全局引入
|
||
|
||
**文件位置**：`mobile/src/main.js`
|
||
|
||
```javascript
|
||
// 导入 iconfont 样式
|
||
import '@/static/fonts/iconfont.css';
|
||
```
|
||
|
||
## 🎨 可用图标列表
|
||
|
||
### 基础图标
|
||
|
||
| 图标 | 类名 | 说明 | 编码 |
|
||
| ---- | ---------------- | -------- | ------- |
|
||
| 👤 | `icon-user` | 用户 | `\e7ae` |
|
||
| 🔒 | `icon-lock` | 锁定 | `\e60e` |
|
||
| 👁️ | `icon-eye` | 显示密码 | `\e61c` |
|
||
| 🙈 | `icon-eye-close` | 隐藏密码 | `\e61d` |
|
||
|
||
### 操作图标
|
||
|
||
| 图标 | 类名 | 说明 | 编码 |
|
||
| ---- | ------------- | ---- | ------- |
|
||
| 🚪 | `icon-login` | 登录 | `\e612` |
|
||
| 🔍 | `icon-search` | 搜索 | `\e6b4` |
|
||
| ➕ | `icon-add` | 添加 | `\e6a4` |
|
||
| ✅ | `icon-check` | 确认 | `\e6a8` |
|
||
| ❌ | `icon-close` | 关闭 | `\e6a9` |
|
||
|
||
### 导航图标
|
||
|
||
| 图标 | 类名 | 说明 | 编码 |
|
||
| ---- | ------------------ | ------ | ------- |
|
||
| 🏠 | `icon-home` | 首页 | `\e65e` |
|
||
| 💬 | `icon-message` | 消息 | `\e6a7` |
|
||
| ⚙️ | `icon-setting` | 设置 | `\e6b8` |
|
||
| ➡️ | `icon-arrow-right` | 箭头右 | `\e6a3` |
|
||
|
||
### 联系图标
|
||
|
||
| 图标 | 类名 | 说明 | 编码 |
|
||
| ---- | ------------ | ---- | ------- |
|
||
| 📞 | `icon-phone` | 电话 | `\e69a` |
|
||
| 📧 | `icon-mail` | 邮箱 | `\e692` |
|
||
|
||
## 🚀 使用方法
|
||
|
||
### 1. 基础用法
|
||
|
||
```vue
|
||
<template>
|
||
<!-- 基础图标 -->
|
||
<text class="iconfont icon-user"></text>
|
||
<text class="iconfont icon-lock"></text>
|
||
|
||
<!-- 带样式的图标 -->
|
||
<text class="iconfont icon-home custom-icon"></text>
|
||
</template>
|
||
|
||
<style>
|
||
.custom-icon {
|
||
font-size: 24px;
|
||
color: #5d87ff;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 2. 登录表单中的应用
|
||
|
||
```vue
|
||
<template>
|
||
<view class="input-group">
|
||
<!-- 用户名输入框 -->
|
||
<text class="iconfont icon-user input-icon"></text>
|
||
<input class="login-input" type="text" placeholder="账号" />
|
||
</view>
|
||
|
||
<view class="input-group">
|
||
<!-- 密码输入框 -->
|
||
<text class="iconfont icon-lock input-icon"></text>
|
||
<input class="login-input" type="password" placeholder="密码" />
|
||
</view>
|
||
|
||
<!-- 登录按钮 -->
|
||
<button class="login-btn">
|
||
<text class="iconfont icon-login"></text>
|
||
<text>登录</text>
|
||
</button>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
.input-group {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.input-icon {
|
||
position: absolute;
|
||
left: 14px;
|
||
z-index: 2;
|
||
font-size: 18px;
|
||
color: #b0b8c9;
|
||
}
|
||
|
||
.login-input {
|
||
width: 100%;
|
||
height: 44px;
|
||
padding: 0 12px 0 44px;
|
||
border: 1px solid #e3e8f0;
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
}
|
||
|
||
.login-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
background: #5d87ff;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 3. 动态图标切换
|
||
|
||
```vue
|
||
<template>
|
||
<view class="password-toggle">
|
||
<text
|
||
:class="['iconfont', showPassword ? 'icon-eye-close' : 'icon-eye']"
|
||
@click="togglePassword"
|
||
></text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
showPassword: false,
|
||
};
|
||
},
|
||
methods: {
|
||
togglePassword() {
|
||
this.showPassword = !this.showPassword;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
```
|
||
|
||
## 🎨 样式自定义
|
||
|
||
### 1. 基础样式属性
|
||
|
||
```css
|
||
.iconfont {
|
||
/* 字体大小 */
|
||
font-size: 16px;
|
||
|
||
/* 颜色 */
|
||
color: #333;
|
||
|
||
/* 其他样式 */
|
||
opacity: 0.8;
|
||
transition: all 0.3s ease;
|
||
}
|
||
```
|
||
|
||
### 2. 响应式设计
|
||
|
||
```css
|
||
/* 小屏幕 */
|
||
@media (max-width: 375px) {
|
||
.iconfont {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
/* 大屏幕 */
|
||
@media (min-width: 768px) {
|
||
.iconfont {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 主题适配
|
||
|
||
```css
|
||
/* 亮色主题 */
|
||
.light-theme .iconfont {
|
||
color: #333;
|
||
}
|
||
|
||
/* 暗色主题 */
|
||
.dark-theme .iconfont {
|
||
color: #fff;
|
||
}
|
||
```
|
||
|
||
## 🔧 扩展图标
|
||
|
||
### 1. 从 iconfont.cn 添加新图标
|
||
|
||
1. **访问项目**：打开 [iconfont.cn](https://www.iconfont.cn/) 的项目页面
|
||
2. **选择图标**：浏览并添加需要的图标到项目
|
||
3. **生成代码**：下载新的字体文件和 CSS 代码
|
||
4. **更新项目**：替换 `iconfont.css` 中的字体链接和图标类名
|
||
|
||
### 2. 图标命名规范
|
||
|
||
```css
|
||
/* 建议的命名格式 */
|
||
.icon-[功能]-[状态]
|
||
|
||
例如：
|
||
.icon-user /* 用户图标 */
|
||
.icon-eye-open /* 眼睛打开 */
|
||
.icon-eye-close /* 眼睛关闭 */
|
||
.icon-arrow-left /* 左箭头 */
|
||
.icon-arrow-right; /* 右箭头 */
|
||
```
|
||
|
||
## 📱 演示页面
|
||
|
||
**页面位置**：`mobile/src/pages/iconfont-demo/index.vue`
|
||
|
||
访问路径：`/pages/iconfont-demo/index`
|
||
|
||
演示页面包含：
|
||
|
||
- 所有可用图标的预览
|
||
- 图标分类展示（基础、操作、导航、联系）
|
||
- 使用代码示例
|
||
- 自定义样式演示
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### 1. 兼容性
|
||
|
||
- ✅ **支持平台**：H5、微信小程序、App、支付宝小程序
|
||
- ✅ **浏览器支持**：Chrome、Safari、Firefox、Edge
|
||
- ✅ **设备支持**：iOS、Android、HarmonyOS
|
||
|
||
### 2. 性能优化
|
||
|
||
```css
|
||
/* 字体预加载 */
|
||
.iconfont {
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
```
|
||
|
||
### 3. 缓存策略
|
||
|
||
- 字体文件使用 CDN 加载，自动缓存
|
||
- 本地 CSS 文件确保离线可用
|
||
- 建议定期更新字体链接时间戳
|
||
|
||
### 4. 回退方案
|
||
|
||
```vue
|
||
<template>
|
||
<!-- 图标 + 文字回退 -->
|
||
<view class="icon-with-fallback">
|
||
<text class="iconfont icon-user"></text>
|
||
<text class="icon-fallback">用户</text>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
.icon-fallback {
|
||
display: none;
|
||
}
|
||
|
||
/* 当字体加载失败时显示文字 */
|
||
@font-face {
|
||
font-family: 'iconfont-fallback';
|
||
src: local('Arial'), local('sans-serif');
|
||
}
|
||
|
||
.iconfont:before {
|
||
font-family: 'iconfont', 'iconfont-fallback';
|
||
}
|
||
</style>
|
||
```
|
||
|
||
## 📚 相关文件
|
||
|
||
- **样式文件**：`mobile/src/static/fonts/iconfont.css`
|
||
- **演示页面**：`mobile/src/pages/iconfont-demo/index.vue`
|
||
- **登录页面**：`mobile/src/pages/login/index.vue`
|
||
- **配置文件**：`mobile/src/main.js`
|
||
|
||
## 🎯 最佳实践
|
||
|
||
1. **统一使用**：项目中统一使用 iconfont，避免混用多种图标方案
|
||
2. **语义化命名**：使用有意义的类名，便于维护
|
||
3. **适当大小**：根据使用场景选择合适的字体大小
|
||
4. **颜色一致**：遵循设计规范，保持图标颜色的一致性
|
||
5. **性能考虑**：避免一次性加载过多不使用的图标
|
||
|
||
## 📝 更新日志
|
||
|
||
- **2025-07-01**：初始版本，集成 iconfont 字体库
|
||
- **预计扩展**：根据业务需求持续添加新图标
|
||
|
||
---
|
||
|
||
**维护者**：移动端开发团队
|
||
**更新时间**：2025-07-01
|