yunzerwebsiteallinone/uniapp/pages/features/features.vue

<template>
	<view class="page">
		<view class="search-wrap">
			<view class="search-bar">
				<FaIcon name="magnifying-glass" color="#909399" :size="16" />
				<input
					class="search-input"
					v-model="keyword"
					type="text"
					placeholder="搜索功能名称"
					placeholder-class="search-placeholder"
					confirm-type="search"
				/>
				<view v-if="keyword" class="search-clear" @tap="keyword = ''">
					<FaIcon name="circle-xmark" color="#c0c4cc" :size="16" />
				</view>
			</view>
		</view>

		<view class="body">
			<view class="sidebar">
				<view
					v-for="(cat, index) in categories"
					:key="cat.id"
					class="category-item"
					:class="{ active: activeIndex === index }"
					@tap="selectCategory(index)"
				>
					<text class="category-text">{{ cat.title }}</text>
				</view>
			</view>

			<view class="content">
				<view v-if="displayItems.length === 0" class="empty">
					<FaIcon name="magnifying-glass" color="#c0c4cc" :size="32" />
					<text class="empty-text">未找到相关功能</text>
				</view>
				<view
					v-for="item in displayItems"
					:key="item.id"
					class="item-card"
					:class="{ active: activeItemId === item.id }"
					@tap="onItemTap(item)"
				>
					<text class="item-name">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<AppTabbar current="features" />
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { isLoggedIn } from '@/utils/auth.js'
import AppTabbar from '@/components/AppTabbar.vue'

const keyword = ref('')
const activeIndex = ref(0)
const activeItemId = ref('')

const routeMap = {
	notepad: '/pages/tools/notepad/index',
	schedule: '/pages/tools/schedule/index'
}

const categories = ref([
	{
		id: 'handy',
		title: '便捷工具',
		items: [
			{ id: 'notepad', name: '记事本', route: routeMap.notepad },
			{ id: 'schedule', name: '日程提醒', route: routeMap.schedule }
		]
	},
	{
		id: 'tools',
		title: '常用工具',
		items: [
			{ id: 't1', name: '扫一扫' },
			{ id: 't2', name: '收付款' },
			{ id: 't3', name: '卡包管理' },
			{ id: 't4', name: '出行服务' },
			{ id: 't5', name: '二维码生成' },
			{ id: 't6', name: '发票助手' }
		]
	},
	{
		id: 'life',
		title: '生活服务',
		items: [
			{ id: 'l1', name: '外卖订餐' },
			{ id: 'l2', name: '电影购票' },
			{ id: 'l3', name: '酒店预订' },
			{ id: 'l4', name: '快递查询' },
			{ id: 'l5', name: '家政预约' },
			{ id: 'l6', name: '更多服务' }
		]
	},
	{
		id: 'office',
		title: '办公效率',
		items: [
			{ id: 'o1', name: '文档协作' },
			{ id: 'o2', name: '日程管理' },
			{ id: 'o3', name: '云盘存储' },
			{ id: 'o4', name: '视频会议' },
			{ id: 'o5', name: '任务看板' },
			{ id: 'o6', name: '审批流程' }
		]
	},
	{
		id: 'data',
		title: '数据报表',
		items: [
			{ id: 'd1', name: '销售统计' },
			{ id: 'd2', name: '用户分析' },
			{ id: 'd3', name: '访问趋势' },
			{ id: 'd4', name: '转化报表' },
			{ id: 'd5', name: '导出数据' }
		]
	},
	{
		id: 'system',
		title: '系统设置',
		items: [
			{ id: 's1', name: '账号管理' },
			{ id: 's2', name: '权限配置' },
			{ id: 's3', name: '消息通知' },
			{ id: 's4', name: '安全中心' },
			{ id: 's5', name: '关于系统' }
		]
	}
])

const currentCategory = computed(() => categories.value[activeIndex.value])

const displayItems = computed(() => {
	const items = currentCategory.value?.items || []
	const q = keyword.value.trim().toLowerCase()
	if (!q) return items
	return items.filter(item => item.name.toLowerCase().includes(q))
})

onMounted(() => {
	if (!isLoggedIn()) {
		uni.reLaunch({ url: '/pages/login/login' })
	}
})

function selectCategory(index) {
	activeIndex.value = index
	activeItemId.value = ''
}

function onItemTap(item) {
	activeItemId.value = item.id
	if (item.route) {
		uni.navigateTo({ url: item.route })
		return
	}
	uni.showToast({ title: item.name, icon: 'none' })
}
</script>

<style lang="scss" scoped>
@import '@/src/styles/page-common.scss';

.page {
	@include page-shell;
}

.search-wrap {
	flex-shrink: 0;
	padding: calc(var(--status-bar-height, 44px) + 16rpx) 24rpx 20rpx;
	background: $color-card;
}

.search-bar {
	display: flex;
	align-items: center;
	gap: 12rpx;
	height: 72rpx;
	padding: 0 24rpx;
	background: $color-bg-page;
	border-radius: $radius-full;
}

.search-input {
	flex: 1;
	height: 72rpx;
	font-size: 28rpx;
	color: $color-text;
}

.search-placeholder {
	color: $color-text-muted;
	font-size: 28rpx;
}

.search-clear {
	display: flex;
	align-items: center;
	padding: 8rpx;
}

.body {
	flex: 1;
	display: flex;
	min-height: 0;
	overflow: hidden;
	background: $color-card;
}

.sidebar {
	width: 200rpx;
	flex-shrink: 0;
	background: $color-bg-page;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.category-item {
	position: relative;
	padding: 32rpx 16rpx;
	text-align: center;

	&.active {
		background: $color-card;

		.category-text {
			color: $color-primary;
			font-weight: 500;
		}

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 6rpx;
			height: 36rpx;
			background: $color-primary;
			border-radius: 0 4rpx 4rpx 0;
		}
	}
}

.category-text {
	font-size: 26rpx;
	color: $color-text-secondary;
	line-height: 1.4;
}

.content {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20rpx 24rpx;
	background: $color-card;
}

.item-card {
	padding: 28rpx 24rpx;
	margin-bottom: 16rpx;
	background: $color-bg-page;
	border-radius: $radius-md;

	&.active {
		background: $color-primary-bg;

		.item-name {
			color: $color-primary;
		}
	}

	&:active {
		opacity: 0.85;
	}
}

.item-name {
	font-size: 28rpx;
	color: $color-text;
	line-height: 1.4;
}

.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 0;
	gap: 20rpx;
}

.empty-text {
	font-size: 26rpx;
	color: $color-text-muted;
}
</style>