cykj/hzdyjs
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代码

Browse Source
This commit is contained in:
zlwu committed 2025-08-09 19:00:56 +08:00
1 parent 8bd0d081ec
commit 8b76fa349b
27 files changed
+8205 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.cursor/cursorrules-mobile.md
+463 -2
View File
@@ -435,7 +435,304 @@ export default Vue.extend({
</template>
```
## 6. 🌐 API 接口规范
## 6. 📱 移动端UI组件规范
### 列表操作按钮设计规范 (2025-01-03 新增)
#### 🎯 设计原则
移动端列表中的操作按钮统一采用**图标+文字垂直排列**的无边框设计，提升用户体验和界面美观度。
#### 📋 标准按钮模板
```vue
<!-- 标准操作按钮容器 -->
<view class="card-actions">
<!-- 查看详细按钮 -->
<view class="action-btn info-btn" @click="handleView(item)">
<u-icon name="eye" size="16" color="#3c9cff"></u-icon>
<text class="btn-text">查看详细</text>
</view>
<!-- 编辑修改按钮 -->
<view class="action-btn success-btn" @click="handleEdit(item)">
<u-icon name="edit-pen" size="16" color="#5ac725"></u-icon>
<text class="btn-text">编辑</text>
</view>
<!-- 历史记录按钮 -->
<view class="action-btn warning-btn" @click="handleHistory(item)">
<u-icon name="clock" size="16" color="#ff9900"></u-icon>
<text class="btn-text">历史记录</text>
</view>
<!-- 删除操作按钮 -->
<view class="action-btn error-btn" @click="handleDelete(item)">
<u-icon name="trash" size="16" color="#f56c6c"></u-icon>
<text class="btn-text">删除</text>
</view>
</view>
```
#### 🎨 标准样式定义
```scss
/* 操作按钮容器 */
.card-actions {
display: flex;
justify-content: space-around;
padding: 20rpx;
border-top: 1px solid #f0f0f0;
gap: 16rpx;
}
/* 统一按钮样式 */
.action-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16rpx 20rpx;
border-radius: 12rpx;
background-color: #f8f9fa;
min-width: 120rpx;
transition: all 0.3s ease;
/* 点击动画效果 */
&:active {
transform: scale(0.95);
opacity: 0.8;
}
}
/* 按钮文字样式 */
.btn-text {
font-size: 24rpx;
margin-top: 8rpx;
color: #303133;
font-weight: 500;
}
/* 主题色彩方案 */
.info-btn {
background-color: rgba(60, 156, 255, 0.1);
.btn-text { color: #3c9cff; }
}
.success-btn {
background-color: rgba(90, 199, 37, 0.1);
.btn-text { color: #5ac725; }
}
.warning-btn {
background-color: rgba(255, 153, 0, 0.1);
.btn-text { color: #ff9900; }
}
.error-btn {
background-color: rgba(245, 108, 108, 0.1);
.btn-text { color: #f56c6c; }
}
.primary-btn {
background-color: rgba(51, 102, 255, 0.1);
.btn-text { color: #3366ff; }
}
.default-btn {
background-color: rgba(144, 147, 153, 0.1);
.btn-text { color: #909399; }
}
```
#### 🔧 图标选择规范
| 功能类型 | 推荐图标 | 颜色 | 样式类 | 使用场景 |
|---------|---------|------|--------|----------|
| 查看详细 | `eye` | #3c9cff | info-btn | 查看、预览、详情 |
| 编辑修改 | `edit-pen` | #5ac725 | success-btn | 编辑、修改、更新 |
| 历史记录 | `clock` | #ff9900 | warning-btn | 时间、历史、记录 |
| 删除操作 | `trash` | #f56c6c | error-btn | 删除、移除、清空 |
| 下载导出 | `download` | #3c9cff | info-btn | 下载、导出、保存 |
| 上传提交 | `upload` | #5ac725 | success-btn | 上传、提交、发送 |
| 审核通过 | `checkmark` | #5ac725 | success-btn | 通过、确认、同意 |
| 审核拒绝 | `close` | #f56c6c | error-btn | 拒绝、关闭、取消 |
| 详情信息 | `info-circle` | #3c9cff | info-btn | 信息、说明、帮助 |
| 设置配置 | `setting` | #909399 | default-btn | 设置、配置、管理 |
| 分享转发 | `share` | #3366ff | primary-btn | 分享、转发、推送 |
| 收藏点赞 | `heart` | #f56c6c | error-btn | 收藏、点赞、喜欢 |
#### 💡 使用指导
1. **✅ 强制使用场景**
- 所有移动端列表页面的操作按钮
- 卡片组件中的操作按钮
- 表格行操作按钮
2. **🎨 设计要求**
- 图标大小统一为16px
- 文字大小统一为24rpx(12px)
- 按钮最小宽度120rpx
- 圆角半径12rpx
3. **🔄 交互要求**
- 必须包含点击动画效果(:active伪类)
- 缩放比例0.95，透明度0.8
- 过渡动画时间0.3s
4. **📏 布局要求**
- 使用flex布局，space-around分布
- 按钮间距16rpx
- 容器内边距20rpx
- 顶部边框分割线
#### 🚨 注意事项
- **禁止使用传统边框按钮**: 移动端列表不再使用`<u-button>`组件
- **图标组件规范**: 统一使用`<u-icon />`组件
- **颜色主题一致**: 严格按照表格中的颜色方案
- **响应式适配**: 确保在不同屏幕尺寸下正常显示
- **无障碍访问**: 文字描述清晰，图标语义明确
#### 📝 完整示例
```vue
<template>
<view class="list-container">
<!-- 列表项 -->
<view class="list-item" v-for="item in dataList" :key="item.id">
<!-- 主要内容 -->
<view class="item-content">
<text class="item-title">{{ item.title }}</text>
<text class="item-desc">{{ item.description }}</text>
</view>
<!-- 操作按钮 -->
<view class="card-actions">
<view class="action-btn info-btn" @click="handleView(item)">
<u-icon name="eye" size="16" color="#3c9cff"></u-icon>
<text class="btn-text">查看详细</text>
</view>
<view v-if="item.canEdit" class="action-btn success-btn" @click="handleEdit(item)">
<u-icon name="edit-pen" size="16" color="#5ac725"></u-icon>
<text class="btn-text">编辑</text>
</view>
<view class="action-btn warning-btn" @click="handleHistory(item)">
<u-icon name="clock" size="16" color="#ff9900"></u-icon>
<text class="btn-text">历史记录</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
dataList: [
{ id: 1, title: '示例标题1', description: '示例描述', canEdit: true },
{ id: 2, title: '示例标题2', description: '示例描述', canEdit: false }
]
}
},
methods: {
handleView(item) {
console.log('查看详细:', item);
// 跳转到详情页面
},
handleEdit(item) {
console.log('编辑项目:', item);
// 跳转到编辑页面
},
handleHistory(item) {
console.log('查看历史:', item);
// 跳转到历史页面
}
}
}
</script>
<style lang="scss" scoped>
.list-container {
padding: 20rpx;
}
.list-item {
background-color: #ffffff;
border-radius: 12rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.item-content {
padding: 30rpx 30rpx 20rpx;
}
.item-title {
font-size: 32rpx;
font-weight: 600;
color: #303133;
margin-bottom: 10rpx;
}
.item-desc {
font-size: 28rpx;
color: #606266;
}
/* 引入标准按钮样式 */
.card-actions {
display: flex;
justify-content: space-around;
padding: 20rpx;
border-top: 1px solid #f0f0f0;
gap: 16rpx;
}
.action-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16rpx 20rpx;
border-radius: 12rpx;
background-color: #f8f9fa;
min-width: 120rpx;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
opacity: 0.8;
}
}
.btn-text {
font-size: 24rpx;
margin-top: 8rpx;
color: #303133;
font-weight: 500;
}
.info-btn {
background-color: rgba(60, 156, 255, 0.1);
.btn-text { color: #3c9cff; }
}
.success-btn {
background-color: rgba(90, 199, 37, 0.1);
.btn-text { color: #5ac725; }
}
.warning-btn {
background-color: rgba(255, 153, 0, 0.1);
.btn-text { color: #ff9900; }
}
</style>
```
## 7. 🌐 API 接口规范
### 网络请求工具 (common/request.js)
@@ -1330,8 +1627,172 @@ npm run build:app-plus
遵循本规范能够确保代码质量、提升开发效率，并为用户提供优秀的移动端体验。
## 13. 🔧 uView 2.0 组件使用规范
### uview-ui 图标组件规范（2025-01-03 更新）
- 移动端UI开发中，图标组件统一使用 <u-icon />（uview-ui 2.x 官方标准），同时支持iconfont自定义图标。
- 推荐通过 easycom 自动全局注册，无需手动 import。
- 标准用法示例：
```vue
<u-icon name="account" size="22" color="#b0b8c9" />
<u-icon name="lock-open" size="22" color="#b0b8c9" />
```
- 图标名称请参考 uview-ui 官方文档：https://www.uviewui.com/components/icon.html
### uview-ui 选择器组件规范（2025-01-03 新增）
**⚠️ 重要：u-picker组件必须严格按照以下规范使用，否则会出现数据显示空白问题！**
#### 1. 组件属性规范
```vue
<!-- ✅ 正确用法 -->
<u-picker
:columns="[optionsArray]" <!-- 必须是二维数组格式 -->
keyName="label" <!-- 指定显示字段名 -->
v-model="indexArray" <!-- 选中项索引数组 -->
:show="showPicker" <!-- 控制显示/隐藏 -->
@confirm="onConfirm" <!-- 确认事件 -->
@close="showPicker = false" <!-- 关闭事件 -->
></u-picker>
<!-- ❌ 错误用法（旧版本写法）-->
<u-picker
:range="optionsArray" <!-- 错误：应该用columns -->
range-key="label" <!-- 错误：应该用keyName -->
@change="onChange" <!-- 错误：应该用confirm -->
></u-picker>
```
#### 2. 数据格式要求
```javascript
// ✅ 正确的数据格式
data() {
return {
// 对象数组数据
optionsArray: [
{ label: "选项1", value: "1" },
{ label: "选项2", value: "2" },
{ label: "选项3", value: "3" }
],
// 选中索引（必须是数组格式）
indexArray: [0],
// 控制显示
showPicker: false
}
}
// 在模板中使用时，columns必须包装成二维数组
:columns="[optionsArray]" // 注意中括号包装
```
#### 3. 事件处理规范
```javascript
// ✅ 正确的事件处理
onConfirm(e) {
console.log('picker选择结果:', e);
const index = e.value[0]; // uview2格式：e.value
const selectedItem = this.optionsArray[index];
this.form.fieldName = selectedItem.value;
this.indexArray = [index];
this.showPicker = false;
}
// ❌ 错误的事件处理
onConfirm(e) {
const index = e.detail.value[0]; // 错误：小程序原生格式
}
```
#### 4. 完整使用示例
```vue
<template>
<view>
<!-- 显示区域 -->
<view class="picker-input" @click="showPicker = true">
{{ getSelectedLabel() || '请选择' }}
</view>
<!-- picker组件 -->
<u-picker
:columns="[optionsArray]"
keyName="label"
v-model="indexArray"
:show="showPicker"
@confirm="onConfirm"
@close="showPicker = false"
></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
optionsArray: [
{ label: "汉族", value: "01" },
{ label: "蒙古族", value: "02" },
{ label: "回族", value: "03" }
],
indexArray: [0],
showPicker: false,
form: {
nationality: ''
}
}
},
methods: {
onConfirm(e) {
const index = e.value[0];
this.indexArray = [index];
this.form.nationality = this.optionsArray[index]?.value || '';
this.showPicker = false;
},
getSelectedLabel() {
const index = this.indexArray[0];
return this.optionsArray[index]?.label || '';
}
}
}
</script>
```
#### 5. 常见错误及解决
- **问题1**: picker弹出后数据区域空白
- **原因**: 使用了`:range`而非`:columns`，或数据格式不是二维数组
- **解决**: 改用`:columns="[dataArray]"`格式
- **问题2**: 事件处理获取不到正确数据
- **原因**: 使用了`e.detail.value`而非`e.value`
- **解决**: 改用`e.value[0]`获取索引
- **问题3**: 无法显示中文选项文本
- **原因**: 未指定`keyName`属性
- **解决**: 添加`keyName="label"`指定显示字段
- 详细文档参考：https://www.uviewui.com/components/picker.html
### uview-ui 弹窗组件规范（2025-01-03 新增）
- 移动端弹窗开发统一使用 <u-popup />（uview-ui 2.x 官方标准）
- 推荐通过 easycom 自动全局注册，无需手动 import。
- 标准用法示例：
```vue
<u-popup v-model="show" mode="bottom" height="500">
<view class="popup-content">
<!-- 弹窗内容 -->
</view>
</u-popup>
```
- 常用属性：
- `v-model`: 控制弹窗显示/隐藏
- `mode`: 弹出方向（bottom、top、left、right、center）
- `height`: 弹窗高度（bottom/top模式）
- `width`: 弹窗宽度（left/right模式）
- `border-radius`: 圆角大小
- `closeable`: 是否显示关闭图标
- `mask-close`: 是否允许点击遮罩关闭
- 详细文档参考：https://www.uviewui.com/components/popup.html
---
**📝 维护**: 移动端开发规范文档
**🔄 更新**: 2025-01-03 (调整为Vue 2 + uview-ui技术栈)
**🔄 更新**: 2025-01-03 (调整为Vue 2 + uview-ui技术栈，新增弹窗组件规范)
**📁 文件**: .cursor/cursorrules-mobile.md