create-koa-boot 1.0.0

package/templates/example/uniapp/pages/demo/index.vue

@@ -0,0 +1,399 @@
+<template>
+	<view class="list-page">
+		<!-- 统计概览 -->
+		<view class="stats-bar">
+			<view class="stats-bar__item" v-for="s in stats" :key="s.label" @click="handleFilter(s.value)">
+				<text class="stats-bar__value" :style="{ color: s.color }">{{ s.count }}</text>
+				<text class="stats-bar__label">{{ s.label }}</text>
+			</view>
+		</view>
+
+		<!-- 骨架屏 -->
+		<view v-if="isFirstLoad" class="skeleton-container">
+			<view class="skeleton-item" v-for="i in 5" :key="i">
+				<uv-skeleton :loading="true" :animate="true" :avatar="true" :title="true" :rows="2"
+					rowsWidth="60%" avatarSize="48" titleWidth="40%" />
+			</view>
+		</view>
+
+		<!-- 空状态 -->
+		<view v-else-if="list.length === 0" class="empty-container">
+			<uv-empty mode="list" text="暂无订单数据" marginTop="120" />
+		</view>
+
+		<!-- 列表 -->
+		<view v-else class="list-container">
+			<view class="order-card" v-for="item in list" :key="item.id" @click="handleItemClick(item)">
+				<!-- 卡片头部 -->
+				<view class="order-card__header">
+					<view class="order-card__type">
+						<uv-icon :name="item.typeIcon" size="18" color="#2979ff" />
+						<text class="order-card__type-text">{{ item.typeName }}</text>
+						<text class="order-card__no">{{ item.orderNo }}</text>
+					</view>
+					<view class="order-card__status" :style="{ color: item.statusColor, borderColor: item.statusColor }">
+						{{ item.statusName }}
+					</view>
+				</view>
+
+				<!-- 卡片主体 -->
+				<view class="order-card__body">
+					<text class="order-card__title text-ellipsis">{{ item.title }}</text>
+					<text class="order-card__amount">¥{{ formatAmount(item.amount, '') }}</text>
+				</view>
+
+				<!-- 标签 -->
+				<view class="order-card__tags" v-if="item.tags.length">
+					<text class="order-card__tag" v-for="tag in item.tags" :key="tag"
+						:class="`order-card__tag--${getTagClass(tag)}`">{{ tag }}</text>
+				</view>
+
+				<!-- 卡片底部 -->
+				<view class="order-card__footer">
+					<view class="order-card__footer-left">
+						<uv-icon name="account" size="14" color="#999" />
+						<text class="order-card__meta">{{ item.customerName }}</text>
+						<uv-icon name="map" size="14" color="#999" style="margin-left: 20rpx;" />
+						<text class="order-card__meta">{{ item.warehouse }}</text>
+					</view>
+					<view class="order-card__footer-right">
+						<text class="order-card__date">{{ formatTime(item.createTime) }}</text>
+						<uv-icon name="arrow-right" size="14" color="#c0c4cc" />
+					</view>
+				</view>
+			</view>
+
+			<!-- 加载更多指示器 -->
+			<uv-load-more :status="loadMoreStatus" :loadmoreText="'上拉加载更多'" :loadingText="'正在加载...'"
+				:nomoreText="'— 共 ' + total + ' 条，已全部加载 —'" :line="true" :icon="true"
+				marginTop="24" marginBottom="32" />
+		</view>
+
+		<!-- 安全区 -->
+		<view class="safe-area-bottom" />
+	</view>
+</template>
+
+<script>
+import { getOrderList } from '@/services/mock/index'
+import { formatAmount, formatTime } from '@/utils/index'
+
+export default {
+	data() {
+		return {
+			formatAmount,
+			formatTime,
+			list: [],
+			total: 0,
+			page: 1,
+			pageSize: 10,
+			isFirstLoad: true,
+			isLoadingMore: false,
+			filterStatus: '', // 筛选状态：空为全部
+			pullDownTimer: null
+		}
+	},
+	computed: {
+		/** 加载更多状态 */
+		loadMoreStatus() {
+			if (this.isFirstLoad) return 'loadmore'
+			if (this.isLoadingMore) return 'loading'
+			if (this.list.length >= this.total) return 'nomore'
+			return 'loadmore'
+		},
+		/** 统计面板数据 */
+		stats() {
+			const all = this.total || 0
+			// 实际应从 API 获取统计数据，此处模拟
+			return [
+				{ label: '全部', value: '', count: all, color: '#2979ff' },
+				{ label: '待处理', value: 'pending', count: Math.ceil(all * 0.3), color: '#f3a73f' },
+				{ label: '处理中', value: 'processing', count: Math.ceil(all * 0.25), color: '#2979ff' },
+				{ label: '已完成', value: 'completed', count: Math.ceil(all * 0.35), color: '#18bc37' }
+			]
+		}
+	},
+	// 下拉刷新
+	onPullDownRefresh() {
+		this.handleRefresh()
+	},
+	// 上拉加载更多
+	onReachBottom() {
+		this.handleLoadMore()
+	},
+	onLoad() {
+		this.fetchList(true)
+	},
+	methods: {
+		/** 获取列表数据 */
+		async fetchList(isRefresh = false) {
+			if (isRefresh) {
+				this.page = 1
+				this.isFirstLoad = true
+			}
+
+			try {
+				const res = await getOrderList({
+					page: this.page,
+					pageSize: this.pageSize,
+					status: this.filterStatus
+				})
+
+				if (isRefresh) {
+					this.list = res.list
+				} else {
+					this.list = [...this.list, ...res.list]
+				}
+				this.total = res.total
+				this.hasMore = res.hasMore
+			} catch (e) {
+				uni.showToast({ title: '加载失败，请重试', icon: 'none' })
+			} finally {
+				this.isFirstLoad = false
+				this.isLoadingMore = false
+				uni.stopPullDownRefresh()
+			}
+		},
+
+		/** 下拉刷新 */
+		handleRefresh() {
+			this.fetchList(true)
+		},
+
+		/** 上拉加载更多 */
+		handleLoadMore() {
+			if (this.isLoadingMore || this.list.length >= this.total) return
+			this.isLoadingMore = true
+			this.page++
+			this.fetchList(false)
+		},
+
+		/** 按状态筛选 */
+		handleFilter(status) {
+			this.filterStatus = status
+			this.handleRefresh()
+		},
+
+		/** 点击列表项跳转详情 */
+		handleItemClick(item) {
+			uni.navigateTo({
+				url: `/pages/demo/detail?id=${item.id}`
+			})
+		},
+
+		/** 标签样式映射 */
+		getTagClass(tag) {
+			const map = { '加急': 'urgent', '大额': 'large', 'VIP客户': 'vip', '新客户': 'new' }
+			return map[tag] || 'default'
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.list-page {
+	min-height: 100vh;
+	background-color: #f5f6f8;
+	padding-bottom: 20rpx;
+}
+
+/* ====== 统计栏 ====== */
+.stats-bar {
+	display: flex;
+	background: linear-gradient(135deg, #2979ff, #5ba0ff);
+	padding: 24rpx 20rpx 28rpx;
+
+	&__item {
+		flex: 1;
+		text-align: center;
+		position: relative;
+
+		&:not(:last-child)::after {
+			content: '';
+			position: absolute;
+			right: 0;
+			top: 20%;
+			height: 60%;
+			width: 2rpx;
+			background: rgba(255, 255, 255, 0.25);
+		}
+	}
+
+	&__value {
+		display: block;
+		font-size: 42rpx;
+		font-weight: 700;
+		color: #fff;
+		line-height: 1.2;
+	}
+
+	&__label {
+		display: block;
+		font-size: 24rpx;
+		color: rgba(255, 255, 255, 0.85);
+		margin-top: 4rpx;
+	}
+}
+
+/* ====== 骨架屏容器 ====== */
+.skeleton-container {
+	padding: 16rpx 24rpx 0;
+}
+
+.skeleton-item {
+	margin-bottom: 20rpx;
+	border-radius: 16rpx;
+	overflow: hidden;
+	background: #fff;
+	padding: 24rpx;
+}
+
+/* ====== 空状态 ====== */
+.empty-container {
+	padding-top: 100rpx;
+}
+
+/* ====== 订单卡片 ====== */
+.order-card {
+	background: #ffffff;
+	border-radius: 16rpx;
+	margin: 16rpx 24rpx;
+	padding: 24rpx;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+	transition: all 0.15s ease;
+
+	&:active {
+		transform: scale(0.985);
+		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 16rpx;
+	}
+
+	&__type {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+	}
+
+	&__type-text {
+		font-size: 26rpx;
+		font-weight: 500;
+		color: #333;
+	}
+
+	&__no {
+		font-size: 22rpx;
+		color: #999;
+		margin-left: 12rpx;
+		font-family: 'Courier New', monospace;
+	}
+
+	&__status {
+		font-size: 22rpx;
+		padding: 4rpx 16rpx;
+		border-radius: 20rpx;
+		border: 1.5rpx solid;
+		font-weight: 500;
+	}
+
+	&__body {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		margin-bottom: 14rpx;
+	}
+
+	&__title {
+		flex: 1;
+		font-size: 30rpx;
+		font-weight: 600;
+		color: #1a1a1a;
+		margin-right: 20rpx;
+	}
+
+	&__amount {
+		font-size: 32rpx;
+		font-weight: 700;
+		color: #dd524d;
+		white-space: nowrap;
+		font-family: 'DIN', 'Helvetica Neue', sans-serif;
+	}
+
+	&__tags {
+		display: flex;
+		gap: 12rpx;
+		margin-bottom: 16rpx;
+	}
+
+	&__tag {
+		font-size: 20rpx;
+		padding: 2rpx 14rpx;
+		border-radius: 6rpx;
+		font-weight: 500;
+
+		&--urgent {
+			color: #dd524d;
+			background: rgba(221, 82, 77, 0.08);
+		}
+
+		&--large {
+			color: #f3a73f;
+			background: rgba(243, 167, 63, 0.08);
+		}
+
+		&--vip {
+			color: #8b5cf6;
+			background: rgba(139, 92, 246, 0.08);
+		}
+
+		&--new {
+			color: #18bc37;
+			background: rgba(24, 188, 55, 0.08);
+		}
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-top: 16rpx;
+		border-top: 1rpx solid #f0f0f0;
+	}
+
+	&__footer-left {
+		display: flex;
+		align-items: center;
+		gap: 6rpx;
+	}
+
+	&__meta {
+		font-size: 22rpx;
+		color: #999;
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: 6rpx;
+	}
+
+	&__date {
+		font-size: 22rpx;
+		color: #bbb;
+	}
+}
+
+/* ====== 统计栏点击态 ====== */
+.stats-bar__item {
+	transition: opacity 0.15s;
+
+	&:active {
+		opacity: 0.7;
+	}
+}
+</style>

package/templates/example/uniapp/pages/home/index.vue

@@ -0,0 +1,244 @@
+<template>
+	<view class="page-home">
+		<!-- 渐变头部：品牌 + 搜索 -->
+		<view class="home-header">
+			<uv-status-bar></uv-status-bar>
+			<app-nav-bar title="系统演示" :pills="true">
+				<template #actions>
+					<view class="nav-action-btn" @click="onSearch">
+						<uv-icon name="search" color="#ffffff" size="34rpx"></uv-icon>
+					</view>
+					<view class="nav-action-divider"></view>
+					<view class="nav-action-btn" @click="onNoticeClick">
+						<uv-icon name="bell" color="#ffffff" size="34rpx"></uv-icon>
+						<view v-if="hasUnread" class="nav-action-badge"></view>
+					</view>
+				</template>
+			</app-nav-bar>
+		</view>
+		<view class="quick-body">
+			<!-- 快捷入口 -->
+			<view class="quick-grid">
+				<view class="quick-item" v-for="item in quickList" :key="item.name" @click="onQuickClick(item)">
+					<view class="quick-icon">
+						<uv-icon :name="item.icon" color="#1F7A45" size="52rpx"></uv-icon>
+					</view>
+					<text class="quick-text">{{ item.name }}</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 功能模块 -->
+		<view class="hot-section">
+			<text class="section-title">功能模块</text>
+			<view class="module-grid" v-for="module in moduleList" :key="module.key" @click="onModuleClick(module)">
+				<view class="module-icon">
+					<uv-icon :name="module.icon" color="#1F7A45" size="40rpx"></uv-icon>
+				</view>
+				<view class="module-info">
+					<text class="module-name">{{ module.name }}</text>
+					<text class="module-desc">{{ module.desc }}</text>
+				</view>
+				<uv-icon name="arrow-right" color="#9CA3AF" size="28rpx"></uv-icon>
+			</view>
+		</view>
+
+		<view class="bottom-gap"></view>
+		<tab-bar :active="0"></tab-bar>
+	</view>
+</template>
+
+<script>
+import TabBar from '@/components/TabBar.vue'
+import AppNavBar from '@/components/NavBar.vue'
+import { useCartStore } from '@/stores/cart'
+import { useUserStore } from '@/stores/user'
+import unreadBadgeMixin from '@/mixins/unreadBadge'
+
+export default {
+	components: { TabBar, AppNavBar },
+	mixins: [unreadBadgeMixin],
+	data() {
+		return {
+			keyword: '',
+			quickList: [
+				{ name: '接口演示', icon: 'file-text', url: '/pages/demo/index' },
+				{ name: '消息中心', icon: 'bell', url: '/pages/message/index' },
+				{ name: 'AI 助手', icon: 'mic', url: '/pages/mine/help/index' },
+				{ name: '个人中心', icon: 'account', url: '/pages/mine/index' }
+			],
+			moduleList: [
+				{ key: 'demo', name: '接口演示', desc: '对接后端 /api/demos 的接口演示', icon: 'file-text', url: '/pages/demo/index' },
+				{ key: 'notification', name: '消息通知', desc: '对接后端 /api/notification 的消息中心', icon: 'bell', url: '/pages/message/index' },
+				{ key: 'profile', name: '个人资料', desc: '账号信息与基础设置', icon: 'account', url: '/pages/mine/profile/index' },
+				{ key: 'help', name: 'AI 智能助手', desc: '智能问答与操作指引', icon: 'mic', url: '/pages/mine/help/index' }
+			]
+		}
+	},
+	onLoad() {
+		useCartStore().initFromStorage()
+		useUserStore().initFromStorage()
+	},
+	methods: {
+		onSearch() {
+			uni.showToast({ title: '演示环境暂未开放搜索', icon: 'none' })
+		},
+		onQuickClick(item) {
+			if (item.url) {
+				uni.navigateTo({ url: item.url })
+				return
+			}
+			uni.showToast({ title: item.name + '开发中', icon: 'none' })
+		},
+		onModuleClick(module) {
+			if (module.url) {
+				uni.navigateTo({ url: module.url })
+				return
+			}
+			uni.showToast({ title: module.name + '开发中', icon: 'none' })
+		},
+		onNoticeClick() {
+			uni.navigateTo({ url: '/pages/message/index' })
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+$primary: #1F7A45;
+
+.page-home {
+	min-height: 100vh;
+	background-color: #F2F5F0;
+}
+
+/* ===== 渐变头部 ===== */
+.home-header {
+	background: linear-gradient(150deg, #1B6B3C 0%, #2E8B4F 55%, #6FBF5A 100%);
+	padding: 40rpx 28rpx 88rpx 28rpx;
+}
+
+/* 操作区内容样式（按钮均分 + 分隔线） */
+.nav-action-btn {
+	position: relative;
+	flex: 1;
+	min-width: 80rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 消息铃铛未读红点 */
+.nav-action-badge {
+	position: absolute;
+	top: 4rpx;
+	right: 18rpx;
+	width: 16rpx;
+	height: 16rpx;
+	border-radius: 50%;
+	background: #FF4D4F;
+	border: 2rpx solid #ffffff;
+	box-sizing: content-box;
+}
+
+.nav-action-divider {
+	width: 2rpx;
+	height: 30rpx;
+	background: rgba(255, 255, 255, 0.4);
+}
+.quick-body {
+	padding: 30rpx;
+	background-color: #fff;
+	border-radius: 14px 14px 0 0;
+}
+
+/* ===== 快捷入口 ===== */
+.quick-grid {
+	position: relative;
+	z-index: 2;
+	display: flex;
+	gap: 20rpx;
+}
+
+.quick-item {
+	flex: 1;
+	background: #ffffff;
+	border-radius: 0 0 24rpx 24rpx;
+	padding: 36rpx 0 28rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.05);
+}
+
+.quick-icon {
+	width: 88rpx;
+	height: 88rpx;
+	border: 4rpx solid $primary;
+	border-radius: 20rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 18rpx;
+}
+
+.quick-text {
+	font-size: 26rpx;
+	color: #1F2937;
+	font-weight: 500;
+}
+
+/* ===== 功能模块 ===== */
+.hot-section {
+	margin: 36rpx 24rpx 0;
+}
+
+.section-title {
+	font-size: 34rpx;
+	font-weight: 700;
+	color: #111827;
+}
+
+.module-grid {
+	margin-top: 20rpx;
+	background: #ffffff;
+	border-radius: 24rpx;
+	padding: 28rpx;
+	display: flex;
+	align-items: center;
+	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+}
+
+.module-icon {
+	width: 80rpx;
+	height: 80rpx;
+	background: #EFF6F0;
+	border-radius: 20rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 24rpx;
+}
+
+.module-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.module-name {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #1F2937;
+}
+
+.module-desc {
+	font-size: 24rpx;
+	color: #9CA3AF;
+	margin-top: 6rpx;
+}
+
+.bottom-gap {
+	height: 140rpx;
+}
+</style>