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

feat: 移动端开发规范重大更新

Browse Source 
- 🔥 完全重写 .cursor/cursorrules-mobile.md (940行)
  * 基于实际mobile工程Vue 3.4.21+uniapp+uview-plus架构
  * 移除所有JeeSite相关内容，精准匹配实际项目
  * 新增11个完整章节：技术栈、项目结构、页面开发、组件规范等

- 📚 创建完整规范文档 docs/开发文档/移动端开发规范总结.md (800+行)
  * 涵盖从项目架构到部署的全流程指导
  * 提供可直接使用的页面和组件模板
  * 包含现代CSS变量设计系统和用户体验优化

- 🔄 同步更新主配置文件 .cursorrules
  * 更新移动端技术栈描述
  * 调整为Vue 3.4.21+uniapp+uview-plus 3.4.45架构

- 📝 完善变更记录
  * 详细记录规范更新背景和技术价值
  * 为后续维护提供完整历史记录

核心价值：解决规范与实际项目不匹配问题，为Cursor AI提供准确的移动端开发上下文，确保生成代码完全符合实际项目架构。
This commit is contained in:
zlwu committed 2025-07-04 15:51:33 +08:00
1 parent e8ece1b612
commit 28232d5d46
131 files changed
+17170 -5479
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

mobile/src/components/Card.vue
+103
View File
@@ -0,0 +1,103 @@
<template>
<view class="card touchable" @click="handleClick">
<view v-if="title || $slots.header" class="card-header">
<slot name="header">
<text class="card-title">{{ title }}</text>
<slot name="action"></slot>
</slot>
</view>
<view class="card-content" :class="{ 'no-padding': noPadding }">
<slot></slot>
</view>
<view v-if="$slots.footer" class="card-footer">
<slot name="footer"></slot>
</view>
</view>
</template>
<script>
export default {
name: 'Card',
props: {
title: {
type: String,
default: '',
},
noPadding: {
type: Boolean,
default: false,
},
clickable: {
type: Boolean,
default: false,
},
},
methods: {
handleClick() {
if (this.clickable) {
this.$emit('click');
uni.vibrateShort();
}
},
},
};
</script>
<style lang="scss" scoped>
.card {
background: $uni-bg-color;
border-radius: $uni-border-radius-lg;
box-shadow: $uni-shadow;
transition: $uni-transition;
overflow: hidden;
margin: $uni-spacing-col-lg;
&:hover {
box-shadow: $uni-shadow-hover;
transform: translateY(-2px);
}
}
.card-header {
padding: $uni-spacing-col-lg $uni-spacing-row-xl;
border-bottom: 1px solid $uni-border-color;
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
font-size: $uni-font-size-lg;
font-weight: 600;
color: $uni-text-color;
margin: 0;
}
.card-content {
padding: $uni-spacing-col-xl;
&.no-padding {
padding: 0;
}
}
.card-footer {
padding: $uni-spacing-col-lg $uni-spacing-row-xl;
border-top: 1px solid $uni-border-color;
background: rgba(0, 0, 0, 0.02);
}
/* 响应式设计 */
@media (max-width: 375px) {
.card {
margin: $uni-spacing-col-base;
}
.card-header,
.card-content,
.card-footer {
padding-left: $uni-spacing-row-lg;
padding-right: $uni-spacing-row-lg;
}
}
</style>
mobile/src/components/GridLayout.vue
+70
View File
@@ -0,0 +1,70 @@
<template>
<view class="grid-layout" :class="gridClass">
<slot></slot>
</view>
</template>
<script>
export default {
name: 'GridLayout',
props: {
columns: {
type: Number,
default: 2,
validator: (value) => [2, 3, 4].includes(value),
},
gap: {
type: String,
default: '12px',
},
},
computed: {
gridClass() {
return `grid-${this.columns}`;
},
},
};
</script>
<style lang="scss" scoped>
.grid-layout {
display: grid;
gap: v-bind(gap);
width: 100%;
}
.grid-2 {
grid-template-columns: 1fr 1fr;
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
/* 响应式调整 */
@media (max-width: 375px) {
.grid-4 {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.grid-3 {
gap: 8px;
}
.grid-2 {
gap: 8px;
}
}
@media (max-width: 320px) {
.grid-4,
.grid-3 {
grid-template-columns: 1fr 1fr;
}
}
</style>
mobile/src/components/NavBar.vue
+176
View File
@@ -0,0 +1,176 @@
<template>
<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="navbar-content">
<text class="navbar-title">{{ title }}</text>
<view class="navbar-actions">
<slot name="actions">
<view
v-if="showRefresh"
class="btn-icon refresh-btn touchable"
@click="handleRefresh"
:aria-label="refreshLabel"
>
<text class="icon">🔄</text>
</view>
<view
v-if="showSearch"
class="btn-icon touchable"
@click="handleSearch"
:aria-label="searchLabel"
>
<text class="icon">🔍</text>
</view>
<view
v-if="showSettings"
class="btn-icon touchable"
@click="handleSettings"
:aria-label="settingsLabel"
>
<text class="icon">⚙️</text>
</view>
</slot>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'NavBar',
props: {
title: {
type: String,
default: '智慧校园',
},
showRefresh: {
type: Boolean,
default: false,
},
showSearch: {
type: Boolean,
default: false,
},
showSettings: {
type: Boolean,
default: false,
},
refreshLabel: {
type: String,
default: '刷新',
},
searchLabel: {
type: String,
default: '搜索',
},
settingsLabel: {
type: String,
default: '设置',
},
},
data() {
return {
statusBarHeight: 20,
};
},
mounted() {
// 获取状态栏高度
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight || 20;
},
methods: {
handleRefresh() {
this.$emit('refresh');
// 触觉反馈
uni.vibrateShort();
},
handleSearch() {
this.$emit('search');
uni.vibrateShort();
},
handleSettings() {
this.$emit('settings');
uni.vibrateShort();
},
},
};
</script>
<style lang="scss" scoped>
.navbar {
background: linear-gradient(135deg, $uni-color-primary, $uni-color-primary-dark);
color: $uni-text-color-inverse;
padding-bottom: 16px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: $uni-shadow;
}
.navbar-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 $uni-spacing-row-lg;
min-height: 44px;
}
.navbar-title {
font-size: $uni-font-size-xl;
font-weight: 600;
color: $uni-text-color-inverse;
}
.navbar-actions {
display: flex;
gap: $uni-spacing-row-base;
}
.btn-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: $uni-border-radius-circle;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transition: $uni-transition;
&:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.icon {
font-size: 18px;
color: $uni-text-color-inverse;
}
}
/* 动画效果 */
.refresh-btn {
animation: none;
&:active {
animation: spin 0.6s ease-in-out;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 无障碍支持 */
.btn-icon[aria-label] {
position: relative;
&:focus {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
}
</style>
mobile/src/components/ServiceItem.vue
+169
View File
@@ -0,0 +1,169 @@
<template>
<view
class="service-item touchable"
@click="handleClick"
:aria-label="`${title}服务`"
role="button"
tabindex="0"
>
<view class="service-icon">
<text class="icon" v-if="icon">{{ icon }}</text>
<slot v-else name="icon"></slot>
</view>
<text class="service-title">{{ title }}</text>
<view v-if="badge" class="service-badge">
<text class="badge-text">{{ badge }}</text>
</view>
</view>
</template>
<script>
export default {
name: 'ServiceItem',
props: {
title: {
type: String,
required: true,
},
icon: {
type: String,
default: '',
},
badge: {
type: [String, Number],
default: '',
},
},
methods: {
handleClick() {
this.$emit('click', { title: this.title });
uni.vibrateShort();
},
},
};
</script>
<style lang="scss" scoped>
.service-item {
background: $uni-bg-color;
border-radius: $uni-border-radius-lg;
padding: $uni-spacing-col-xl;
text-align: center;
box-shadow: $uni-shadow;
transition: $uni-transition;
cursor: pointer;
border: 1px solid transparent;
position: relative;
&:hover {
transform: translateY(-3px);
box-shadow: $uni-shadow-hover;
border-color: $uni-color-primary;
}
&:focus {
outline: 2px solid $uni-color-primary;
outline-offset: 2px;
}
}
.service-icon {
width: 48px;
height: 48px;
background: $uni-color-primary-light;
border-radius: $uni-border-radius-circle;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto $uni-spacing-col-base;
color: $uni-color-primary;
transition: $uni-transition;
.icon {
font-size: 24px;
}
}
.service-item:hover .service-icon {
background: $uni-color-primary;
color: $uni-text-color-inverse;
transform: scale(1.1);
}
.service-title {
font-size: $uni-font-size-base;
font-weight: 500;
color: $uni-text-color;
display: block;
line-height: 1.4;
}
.service-badge {
position: absolute;
top: -4px;
right: -4px;
background: #ff4757;
border-radius: $uni-border-radius-lg;
min-width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
.badge-text {
color: $uni-text-color-inverse;
font-size: 11px;
font-weight: 500;
padding: 0 6px;
}
}
/* 网格布局支持 */
.grid-2 .service-item {
flex: 1;
}
.grid-3 .service-item {
flex: 1;
}
.grid-4 .service-item {
flex: 1;
}
/* 动画效果 */
.service-item {
animation: fadeInUp 0.6s ease-out backwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 375px) {
.service-item {
padding: $uni-spacing-col-lg;
}
.service-icon {
width: 40px;
height: 40px;
.icon {
font-size: 20px;
}
}
.service-title {
font-size: $uni-font-size-sm;
}
}
</style>
mobile/src/components/StatCard.vue
+174
View File
@@ -0,0 +1,174 @@
<template>
<view class="stat-card touchable" @click="handleClick">
<text class="stat-number">{{ number }}</text>
<text class="stat-label">{{ label }}</text>
<view v-if="trend" class="stat-trend" :class="trendClass">
<text class="trend-icon">{{ trendIcon }}</text>
<text class="trend-text">{{ trend }}</text>
</view>
</view>
</template>
<script>
export default {
name: 'StatCard',
props: {
number: {
type: [String, Number],
required: true,
},
label: {
type: String,
required: true,
},
trend: {
type: String,
default: '',
},
trendType: {
type: String,
default: 'neutral', // 'up', 'down', 'neutral'
validator: (value) => ['up', 'down', 'neutral'].includes(value),
},
},
computed: {
trendClass() {
return `trend-${this.trendType}`;
},
trendIcon() {
switch (this.trendType) {
case 'up':
return '↗️';
case 'down':
return '↘️';
default:
return '➖';
}
},
},
methods: {
handleClick() {
this.$emit('click', { number: this.number, label: this.label });
uni.vibrateShort();
},
},
};
</script>
<style lang="scss" scoped>
.stat-card {
background: $uni-bg-color;
border-radius: $uni-border-radius-lg;
padding: $uni-spacing-col-xl;
text-align: center;
box-shadow: $uni-shadow;
transition: $uni-transition;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
&:hover {
transform: translateY(-2px);
box-shadow: $uni-shadow-hover;
}
}
.stat-number {
font-size: 24px;
font-weight: 700;
color: $uni-color-primary;
margin-bottom: $uni-spacing-col-sm;
line-height: 1.2;
}
.stat-label {
font-size: $uni-font-size-sm;
color: $uni-text-color-secondary;
line-height: 1.4;
margin: 0;
}
.stat-trend {
display: flex;
align-items: center;
gap: 4px;
margin-top: $uni-spacing-col-sm;
font-size: $uni-font-size-sm;
&.trend-up {
color: $uni-color-success;
}
&.trend-down {
color: $uni-color-error;
}
&.trend-neutral {
color: $uni-text-color-grey;
}
}
.trend-icon {
font-size: 12px;
}
.trend-text {
font-size: 11px;
font-weight: 500;
}
/* 动画效果 */
.stat-card {
animation: bounceIn 0.6s ease-out backwards;
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* 数字计数动画 */
.stat-number {
animation: countUp 1s ease-out;
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 375px) {
.stat-card {
padding: $uni-spacing-col-lg;
}
.stat-number {
font-size: 20px;
}
.stat-label {
font-size: 11px;
}
}
</style>