create-koa-boot 1.0.0

package/templates/example/uniapp/components/MapView.vue

@@ -0,0 +1,219 @@
+<template>
+	<view v-if="hasCoord" class="mv-card" @click="openLocation">
+		<!-- 地图区域（中心固定 = 机构坐标） -->
+		<view class="mv-map-wrap">
+			<map
+				id="mv-map"
+				class="mv-map"
+				:latitude="lat"
+				:longitude="lng"
+				:scale="scale"
+				:enable-scroll="false"
+				:enable-zoom="false">
+			</map>
+			<!-- 中心定位图钉（CSS 叠加，标识机构坐标） -->
+			<view class="mv-pin">
+				<text class="mv-pin-icon">📍</text>
+				<view class="mv-pin-shadow"></view>
+			</view>
+			<!-- 查看位置提示 -->
+			<view class="mv-open-tip">
+				<text class="mv-open-tip-text">点击查看位置</text>
+			</view>
+		</view>
+
+		<!-- 底部地址信息 -->
+		<view class="mv-footer">
+			<view class="mv-addr-row">
+				<text class="mv-addr-icon">📍</text>
+				<text class="mv-addr-text">{{ address || '未获取到地址' }}</text>
+			</view>
+			<text class="mv-coord">{{ lngText }}, {{ latText }}</text>
+		</view>
+	</view>
+	<view v-else class="mv-empty">
+		<text class="mv-empty-text">未设置门店位置</text>
+	</view>
+</template>
+
+<script>
+/**
+ * MapView — 地图展示组件（只读）
+ *
+ * 参考 MapPicker 的地图渲染方式，仅用于展示机构/门店位置，不做选点交互。
+ * 地图中心固定为传入坐标，CSS 图钉标识位置；点击卡片调用 uni.openLocation
+ * 打开系统地图查看大图/导航。
+ *
+ * @props {Number|String} latitude  - 纬度
+ * @props {Number|String} longitude - 经度
+ * @props {String}        address   - 展示的地址文本（缺省显示坐标）
+ * @props {String}        name      - 位置名称（openLocation 展示用）
+ * @props {Number}        scale     - 地图缩放级别
+ */
+export default {
+	name: 'MapView',
+	props: {
+		latitude: { type: [Number, String], default: 0 },
+		longitude: { type: [Number, String], default: 0 },
+		address: { type: String, default: '' },
+		name: { type: String, default: '位置' },
+		scale: { type: Number, default: 16 }
+	},
+	computed: {
+		/** 有效纬度 */
+		lat() {
+			const v = parseFloat(this.latitude)
+			return isNaN(v) ? 0 : v
+		},
+		/** 有效经度 */
+		lng() {
+			const v = parseFloat(this.longitude)
+			return isNaN(v) ? 0 : v
+		},
+		/** 是否具备有效坐标 */
+		hasCoord() {
+			return this.lat !== 0 && this.lng !== 0
+		},
+		/** 坐标展示文本 */
+		latText() {
+			return this.lat.toFixed(6)
+		},
+		lngText() {
+			return this.lng.toFixed(6)
+		}
+	},
+	methods: {
+		/** 点击打开系统地图查看位置 */
+		openLocation() {
+			if (!this.hasCoord) return
+			uni.openLocation({
+				latitude: this.lat,
+				longitude: this.lng,
+				name: this.name,
+				address: this.address,
+				fail: () => {
+					uni.showToast({ title: '无法打开地图', icon: 'none' })
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+$primary: #1F7A45;
+$radius: 16rpx;
+$border: #e8ecf1;
+
+.mv-card {
+	background: #ffffff;
+	border-radius: $radius;
+	overflow: hidden;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
+}
+
+/* ========== 地图区域 ========== */
+.mv-map-wrap {
+	position: relative;
+	height: 320rpx;
+	overflow: hidden;
+}
+
+.mv-map {
+	width: 100%;
+	height: 100%;
+}
+
+/* 中心图钉（CSS 叠加层，标识机构坐标点） */
+.mv-pin {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -100%);
+	z-index: 5;
+	pointer-events: none;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.mv-pin-icon {
+	font-size: 48rpx;
+	line-height: 1;
+	filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3));
+}
+
+.mv-pin-shadow {
+	width: 12rpx;
+	height: 12rpx;
+	background: rgba(0, 0, 0, 0.15);
+	border-radius: 50%;
+	margin-top: -8rpx;
+}
+
+/* 查看位置提示 */
+.mv-open-tip {
+	position: absolute;
+	right: 16rpx;
+	top: 16rpx;
+	z-index: 6;
+	background: rgba(255, 255, 255, 0.92);
+	border-radius: 24rpx;
+	padding: 8rpx 20rpx;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.mv-open-tip-text {
+	font-size: 22rpx;
+	color: $primary;
+}
+
+/* ========== 底部地址信息 ========== */
+.mv-footer {
+	padding: 20rpx 24rpx;
+}
+
+.mv-addr-row {
+	display: flex;
+	align-items: flex-start;
+	margin-bottom: 8rpx;
+}
+
+.mv-addr-icon {
+	font-size: 26rpx;
+	margin-right: 10rpx;
+	margin-top: 2rpx;
+	flex-shrink: 0;
+}
+
+.mv-addr-text {
+	flex: 1;
+	font-size: 28rpx;
+	color: #333333;
+	font-weight: 500;
+	line-height: 1.5;
+	word-break: break-all;
+}
+
+.mv-coord {
+	font-size: 22rpx;
+	color: #aaaaaa;
+	margin-left: 36rpx;
+}
+
+/* ========== 空状态 ========== */
+.mv-empty {
+	padding: 60rpx 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 1rpx dashed $border;
+	border-radius: $radius;
+	background: #fafbfc;
+}
+
+.mv-empty-text {
+	font-size: 26rpx;
+	color: #999999;
+}
+</style>

package/templates/example/uniapp/components/NavBar.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="app-nav-bar">
+		<!-- 可选状态栏占位（navigationStyle: custom 页面使用） -->
+		<view v-if="statusBar" class="status-bar-placeholder"></view>
+
+		<view class="nav-bar">
+			<!-- 左侧：Logo + 标题（可通过 left / title 插槽自定义） -->
+			<view class="nav-left">
+				<slot name="left">
+					<view v-if="showLogo" class="logo-box">
+						<image src="/static/koa-boot-3.png" mode="scaleToFill" class="logo-image" />
+					</view>
+					<slot name="title">
+						<text class="nav-title" :style="{ color: titleColor }">{{ title }}</text>
+					</slot>
+				</slot>
+			</view>
+
+			<!-- 右侧操作区：具名插槽，可插入按钮、图标等任意交互元素 -->
+			<view class="nav-actions" :class="{ 'nav-actions--pills': pills }">
+				<slot name="actions">
+					<slot />
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * 通用导航栏组件（兼容 H5 / App / 微信小程序等）
+ *
+ * 功能：
+ * - title 参数控制标题内容（也可通过 title 插槽传入自定义内容）
+ * - 右侧 actions 具名插槽，灵活插入按钮、图标等交互元素
+ * - showLogo 控制是否展示品牌 Logo，left 插槽可完全自定义左侧区域
+ * - pills 为操作区添加胶囊背景样式
+ *
+ * 布局：
+ * - flex 两端对齐，标题区域 flex: 1 自适应占满剩余空间
+ * - 标题过长自动省略号截断，不挤压右侧操作区
+ * - 基于 rpx 单位，自动适配不同屏幕尺寸
+ */
+export default {
+	name: 'AppNavBar',
+	props: {
+		// 标题文本
+		title: {
+			type: String,
+			default: ''
+		},
+		// 标题颜色
+		titleColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 是否显示左侧 Logo
+		showLogo: {
+			type: Boolean,
+			default: true
+		},
+		// 是否以胶囊背景样式展示操作区
+		pills: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示状态栏占位（自定义导航页面使用）
+		statusBar: {
+			type: Boolean,
+			default: false
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.app-nav-bar {
+	width: 100%;
+}
+
+/* ===== 状态栏占位 ===== */
+.status-bar-placeholder {
+	height: var(--status-bar-height, 44px);
+}
+
+/* ===== 导航条 ===== */
+.nav-bar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 88rpx;
+	min-width: 0;
+}
+
+/* ===== 左侧标题区 ===== */
+.nav-left {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+	margin-right: 16rpx;
+}
+
+.logo-box {
+	width: 48rpx;
+	height: 48rpx;
+	background: rgba(255, 255, 255, 0.8);
+	border-radius: 12rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 16rpx;
+	flex-shrink: 0;
+
+	.logo-image {
+		width: 90%;
+		height: 90%;
+	}
+}
+
+.nav-title {
+	font-size: 34rpx;
+	font-weight: 600;
+	/* 响应式：标题过长自动省略，避免挤压右侧操作区 */
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* ===== 右侧操作区 ===== */
+.nav-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 60rpx;
+	flex-shrink: 0;
+}
+
+/* 胶囊背景样式（可选） */
+.nav-actions--pills {
+	height: 60rpx;
+	min-width: 160rpx;
+	padding: 0 12rpx;
+	background: rgba(255, 255, 255, 0.22);
+	border-radius: 100rpx;
+}
+</style>

package/templates/example/uniapp/components/PageHeader.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="page-header" :class="{ 'page-header--fixed': fixed }"
+		:style="{ paddingTop: statusBarHeight + 'px' }">
+		<view class="header-top">
+			<view class="header-left">
+				<view v-if="showBack && !$slots.left" class="header-back" @click="handleBack">
+					<uv-icon name="arrow-left" color="#ffffff" size="20"></uv-icon>
+				</view>
+				<slot name="left">
+					<text class="header-title">{{ title }}</text>
+				</slot>
+			</view>
+			<view class="header-actions">
+				<slot name="actions"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'PageHeader',
+	props: {
+		/** 左侧标题 */
+		title: {
+			type: String,
+			default: ''
+		},
+		/** 是否显示返回按钮（默认显示） */
+		showBack: {
+			type: Boolean,
+			default: true
+		},
+		/** 是否固定到顶部 */
+		fixed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ['heightChange'],
+	data() {
+		return {
+	statusBarHeight: 20
+	}
+},
+methods: {
+	handleBack() {
+		const pages = getCurrentPages()
+		if (pages.length > 1) {
+			uni.navigateBack()
+		} else {
+			// 无上级页面时回退到业务主页
+			uni.reLaunch({ url: '/pages/home/index' })
+		}
+	}
+},
+mounted() {
+		const sys = uni.getSystemInfoSync()
+		this.statusBarHeight = sys.statusBarHeight || 20
+		// 通知父组件实际渲染高度，便于做占位
+		this.$nextTick(() => {
+			uni.createSelectorQuery()
+				.in(this)
+				.select('.page-header')
+				.boundingClientRect(rect => {
+					if (rect) {
+						this.$emit('heightChange', rect.height)
+					}
+				})
+				.exec()
+		})
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.page-header {
+	position: relative;
+	overflow: hidden;
+	background: linear-gradient(135deg, #1F7A45 0%, #0A8A4E 100%);
+	// border-radius: 0 0 40rpx 40rpx;
+	padding-bottom: 24rpx;
+	box-shadow: 0 12rpx 32rpx rgba(31, 122, 69, 0.18);
+
+	&--fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 100;
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: -60rpx;
+		right: -60rpx;
+		width: 240rpx;
+		height: 240rpx;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.08);
+		pointer-events: none;
+	}
+}
+
+.header-top {
+	position: relative;
+	z-index: 1;
+	height: 92rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 28rpx;
+}
+
+.header-title {
+	color: #ffffff;
+	font-size: 38rpx;
+	font-weight: 700;
+	letter-spacing: 2rpx;
+	text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.12);
+}
+
+.header-left {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	flex: 1;
+}
+
+.header-back {
+	width: 64rpx;
+	height: 64rpx;
+	margin-right: 4rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.12);
+	transition: opacity 0.2s;
+
+	&:active {
+		opacity: 0.7;
+	}
+}
+
+.header-actions {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+	flex-shrink: 0;
+}
+</style>

package/templates/example/uniapp/components/TabBar.vue

@@ -0,0 +1,116 @@
+<template>
+	<view class="app-tab-bar safe-area-bottom">
+		<view
+			class="tab-item"
+			v-for="(item, index) in list"
+			:key="item.pagePath"
+			@click="switchTab(item, index)"
+		>
+			<view class="tab-icon-wrap">
+				<uv-icon
+					:name="active === index ? item.activeIcon : item.icon"
+					:color="active === index ? '#0A8A4E' : '#9CA3AF'"
+					size="44rpx"
+				></uv-icon>
+			</view>
+			<text class="tab-text" :class="{ 'tab-active': active === index }">
+				{{ item.text }}
+			</text>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * 自定义底部 TabBar（兼容 H5/App/微信小程序）
+ * 不依赖标准 tabBar 图片资源，使用 uv-icon 字体图标，避免多端路径差异。
+ * 通过 uni.redirectTo 切换页面，避免导航栈累积。
+ */
+export default {
+	name: 'AppTabBar',
+	props: {
+		active: {
+			type: Number,
+			default: 0
+		}
+	},
+	data() {
+		return {
+			list: [
+				{
+					pagePath: '/pages/home/index',
+					text: '首页',
+					icon: 'home',
+					activeIcon: 'home-fill'
+				},
+				{
+					pagePath: '/pages/message/index',
+					text: '消息',
+					icon: 'bell',
+					activeIcon: 'bell-fill'
+				},
+				{
+					pagePath: '/pages/mine/index',
+					text: '我的',
+					icon: 'account',
+					activeIcon: 'account-fill'
+				}
+			]
+		}
+	},
+	methods: {
+		switchTab(item, index) {
+			if (this.active === index) return
+			uni.redirectTo({ url: item.pagePath })
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.app-tab-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 100rpx;
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+	background-color: #ffffff;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
+	z-index: 999;
+}
+
+.tab-item {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	padding: 8rpx 0;
+}
+
+.tab-icon-wrap {
+	width: 52rpx;
+	height: 52rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 6rpx;
+}
+
+.tab-text {
+	font-size: 22rpx;
+	color: #9CA3AF;
+	line-height: 1;
+}
+
+.tab-active {
+	color: #0A8A4E;
+	font-weight: 500;
+}
+</style>

package/templates/example/uniapp/components/empty-state.vue

@@ -0,0 +1,82 @@
+<template>
+	<view class="empty-state">
+		<view class="empty-state__icon">
+			<view class="empty-state__icon-circle" />
+			<view class="empty-state__icon-line" />
+		</view>
+		<text class="empty-state__text">{{ text }}</text>
+		<text v-if="subText" class="empty-state__sub-text">{{ subText }}</text>
+		<view v-if="$slots.default" class="empty-state__action">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * 空状态组件
+ * 用于列表无数据、搜索无结果等场景
+ *
+ * @props {string} text - 主提示文字，默认 '暂无数据'
+ * @props {string} subText - 副提示文字
+ */
+export default {
+	name: 'EmptyState',
+	props: {
+		text: { type: String, default: '暂无数据' },
+		subText: { type: String, default: '' }
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 120rpx 60rpx;
+
+	&__icon {
+		position: relative;
+		width: 160rpx;
+		height: 160rpx;
+		margin-bottom: 32rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__icon-circle {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 50%;
+		border: 4rpx dashed #d0d0d0;
+	}
+
+	&__icon-line {
+		position: absolute;
+		bottom: 20rpx;
+		width: 60rpx;
+		height: 4rpx;
+		background: #d0d0d0;
+		border-radius: 2rpx;
+	}
+
+	&__text {
+		font-size: 28rpx;
+		color: #999999;
+		line-height: 1.5;
+	}
+
+	&__sub-text {
+		font-size: 24rpx;
+		color: #cccccc;
+		margin-top: 8rpx;
+	}
+
+	&__action {
+		margin-top: 40rpx;
+	}
+}
+</style>