WAI_Project_UNIX/pages/index/home.uvue

<template>
	<cl-page>
		<cl-topbar fixed :show-back="false" safe-area-top :height="isMp() ? null : 100">
			<view
				class="flex flex-row items-center p-3 flex-1 w-full"
				:class="{
					'pt-0': isMp()
				}"
			>
				<view class="bg-primary-500 rounded-lg p-[12rpx]">
					<cl-image
						src="/static/logo.png"
						:width="32"
						:height="32"
						:show-loading="false"
					></cl-image>
				</view>

				<cl-text
					color="primary"
					:pt="{
						className: '!text-xl mr-auto ml-2 flex-1'
					}"
				>
					{{ config.name }}
				</cl-text>

				<view
					class="bg-surface-500 h-8 w-8 rounded-full flex flex-row items-center justify-center mr-3"
					@tap="setSize"
				>
					<cl-icon name="font-size" color="white"></cl-icon>
				</view>

				<view
					class="bg-primary-500 h-8 w-8 rounded-full flex flex-row items-center justify-center"
					:class="{
						'mr-24': isMp()
					}"
					@tap="setLocale"
				>
					<cl-icon name="translate" color="white"></cl-icon>
				</view>
			</view>
		</cl-topbar>

		<view class="p-3">
			<view class="group" v-for="item in data" :key="item.label">
				<cl-text :pt="{ className: '!text-sm !text-surface-400 mb-2 ml-2' }">{{
					item.label
				}}</cl-text>

				<view class="list">
					<cl-row :gutter="10">
						<cl-col :span="6" v-for="child in item.children" :key="child.label">
							<view
								class="item dark:!bg-surface-800"
								hover-class="opacity-80"
								:hover-stay-time="250"
								@tap="toPath(child)"
							>
								<cl-icon :name="child.icon" :size="36"></cl-icon>
								<cl-text
									:pt="{
										className: 'mt-1 !text-xs text-center'
									}"
									>{{ child.label }}</cl-text
								>
							</view>
						</cl-col>
					</cl-row>
				</view>
			</view>
		</view>

		<!-- 自定义底部导航栏 -->
		<custom-tabbar></custom-tabbar>

		<!-- 主题设置 -->
		<locale-set :ref="refs.set('localeSet')"></locale-set>

		<!-- 字体大小设置 -->
		<size-set :ref="refs.set('sizeSet')"></size-set>
	</cl-page>
</template>

<script lang="ts" setup>
import { isMp, router, useRefs } from "@/cool";
import { t } from "@/locale";
import { computed } from "vue";
import { useUi } from "@/uni_modules/cool-ui";
import { config } from "@/config";
import LocaleSet from "@/components/locale-set.uvue";
import SizeSet from "@/components/size-set.uvue";
import CustomTabbar from "@/components/tabbar.uvue";

const ui = useUi();
const refs = useRefs();

const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M6.31 4.32001L25.69 4.32001C27.5154 4.32001 29 5.80466 29 7.63001L29 20.85C29 22.6754 27.5154 24.15 25.69 24.15L16.66 24.15L16.66 26.35L22.17 26.35C22.5351 26.35 22.83 26.6449 22.83 27.01C22.83 27.3751 22.5351 27.68 22.17 27.68L9.83 27.68C9.46493 27.68 9.17 27.3751 9.17 27.01C9.17 26.6449 9.46493 26.35 9.83 26.35L15.34 26.35L15.34 24.15L6.31 24.15C4.48465 24.15 3 22.6754 3 20.85L3 7.63001C3 5.80466 4.48465 4.32001 6.31 4.32001ZM7.69411 10.7451L6.1817 10.7451L8.57634 18.605L10.0544 18.605L12.449 10.7451L11.0168 10.7451L9.38984 16.3708L9.34401 16.3708L7.69411 10.7451ZM16.6883 10.7451L14.9812 10.7451L12.449 18.605L13.8698 18.605L14.3395 17.0583L17.2383 17.0583L17.7195 18.605L19.2205 18.605L16.6883 10.7451ZM23.2077 10.7451L19.9194 10.7451L19.9194 18.605L21.386 18.605L21.386 15.3282L22.9098 15.3282L24.216 18.605L25.8086 18.605L24.2962 15.0073C24.2962 15.0073 24.9149 14.7553 25.2644 14.2282C25.2644 14.2282 25.6138 13.7012 25.6138 12.9908C25.6138 12.9908 25.6138 11.9825 24.9894 11.3638C24.9894 11.3638 24.365 10.7451 23.2077 10.7451ZM23.7749 13.7642C23.7749 13.7642 23.5171 14.0334 23.0015 14.0334L21.386 14.0334L21.386 12.0513L23.0588 12.0513C23.0588 12.0513 23.5515 12.0513 23.7921 12.2976C23.7921 12.2976 24.0327 12.544 24.0327 12.9908C24.0327 12.9908 24.0327 13.4949 23.7749 13.7642ZM16.0467 13.1283L16.8373 15.7521L14.7405 15.7521L15.5426 13.1283C15.5426 13.1283 15.6572 12.7846 15.7717 12.0627L15.8176 12.0627C15.8176 12.0627 15.9321 12.7387 16.0467 13.1283Z" fill-rule="evenodd"  fill="#15273C" >
</path>
</svg>`;

const svg1 = "/static/svg/upload.svg";

type Item = {
	label: string;
	icon?: string;
	path?: string;
	disabled?: boolean;
	children?: Item[];
};

const data = computed<Item[]>(() => {
	return [
		{
			label: t("基础组件"),
			children: [
				{
					label: t("文本"),
					icon: "text",
					path: "/pages/demo/basic/text"
				},
				{
					label: t("按钮"),
					icon: "mouse-line",
					path: "/pages/demo/basic/button"
				},
				{
					label: t("图片"),
					icon: "image-line",
					path: "/pages/demo/basic/image"
				},
				{
					label: t("图标"),
					icon: "puzzle-2-line",
					path: "/pages/demo/basic/icon"
				},
				{
					label: t("标签"),
					icon: "price-tag-3-line",
					path: "/pages/demo/basic/tag"
				}
			]
		},
		{
			label: t("表单组件"),
			children: [
				{
					label: t("表单验证"),
					icon: "draft-line",
					path: "/pages/demo/form/form"
				},
				{
					label: t("输入框"),
					icon: "input-field",
					path: "/pages/demo/form/input"
				},
				{
					label: t("文本域"),
					icon: "text-block",
					path: "/pages/demo/form/textarea"
				},
				{
					label: t("计数器"),
					icon: "increase-decrease-line",
					path: "/pages/demo/form/input-number"
				},
				{
					label: t("口令输入"),
					icon: "input-method-line",
					path: "/pages/demo/form/input-otp"
				},
				{
					label: t("键盘"),
					icon: "keyboard-box-line",
					path: "/pages/demo/form/keyboard"
				},
				{
					label: t("单选框"),
					icon: "radio-button-line",
					path: "/pages/demo/form/radio"
				},
				{
					label: t("多选框"),
					icon: "checkbox-line",
					path: "/pages/demo/form/checkbox"
				},
				{
					label: t("开关"),
					icon: "toggle-line",
					path: "/pages/demo/form/switch"
				},
				{
					label: t("评分"),
					icon: "star-line",
					path: "/pages/demo/form/rate"
				},
				{
					label: t("滑块"),
					icon: "equalizer-2-line",
					path: "/pages/demo/form/slider"
				},
				{
					label: t("选择器"),
					icon: "dropdown-list",
					path: "/pages/demo/form/select"
				},
				{
					label: t("日期选择器"),
					icon: "calendar-line",
					path: "/pages/demo/form/select-date"
				},
				{
					label: t("时间选择器"),
					icon: "time-line",
					path: "/pages/demo/form/select-time"
				},
				{
					label: t("级联选择器"),
					icon: "stacked-view",
					path: "/pages/demo/form/cascader"
				},
				{
					label: t("文件上传"),
					icon: "file-upload-line",
					path: "/pages/demo/form/upload"
				}
			]
		},
		{
			label: t("布局组件"),
			children: [
				{
					label: t("弹性布局"),
					icon: "layout-2-line",
					path: "/pages/demo/layout/flex"
				},
				{
					label: t("标签页"),
					icon: "function-add-line",
					path: "/pages/demo/layout/tabs"
				},
				{
					label: t("折叠面板"),
					icon: "collapse-vertical-line",
					path: "/pages/demo/layout/collapse"
				},
				{
					label: t("吸顶"),
					icon: "align-top",
					path: "/pages/demo/layout/sticky"
				},
				{
					label: t("导航栏"),
					icon: "layout-top-line",
					path: "/pages/demo/layout/topbar"
				},
				{
					label: t("底部视图"),
					icon: "layout-bottom-line",
					path: "/pages/demo/layout/footer"
				},
				{
					label: t("悬浮视图"),
					icon: "picture-in-picture-line",
					path: "/pages/demo/layout/float-view"
				}
			]
		},
		{
			label: t("数据展示"),
			children: [
				{
					label: t("头像"),
					icon: "account-circle-line",
					path: "/pages/demo/data/avatar"
				},
				{
					label: t("列表"),
					icon: "list-check",
					path: "/pages/demo/data/list"
				},
				{
					label: t("列表视图"),
					icon: "list-view",
					path: "/pages/demo/data/list-view"
				},
				{
					label: t("列表刷新"),
					icon: "refresh-line",
					path: "/pages/demo/data/list-view-refresh",
					disabled: false
				},
				{
					label: t("瀑布流"),
					icon: "layout-column-line",
					path: "/pages/demo/data/waterfall"
				},
				{
					label: t("轮播图"),
					icon: "carousel-view",
					path: "/pages/demo/data/banner"
				},
				{
					label: t("分页"),
					icon: "page-separator",
					path: "/pages/demo/data/pagination"
				},
				{
					label: t("时间轴"),
					icon: "timeline-view",
					path: "/pages/demo/data/timeline"
				},
				{
					label: t("拖拽"),
					icon: "drag-move-line",
					path: "/pages/demo/data/draggable"
				},
				{
					label: t("筛选栏"),
					icon: "filter-line",
					path: "/pages/demo/data/filter-bar"
				},
				{
					label: t("树形结构"),
					icon: "node-tree",
					path: "/pages/demo/data/tree"
				}
			]
		},
		{
			label: t("状态组件"),
			children: [
				{
					label: t("角标"),
					icon: "notification-badge-line",
					path: "/pages/demo/status/badge"
				},
				{
					label: t("通知栏"),
					icon: "error-warning-line",
					path: "/pages/demo/status/noticebar"
				},
				{
					label: t("倒计时"),
					icon: "timer-line",
					path: "/pages/demo/status/countdown"
				},
				{
					label: t("数字滚动"),
					icon: "arrow-up-box-line",
					path: "/pages/demo/status/rolling-number"
				},
				{
					label: t("进度条"),
					icon: "subtract-line",
					path: "/pages/demo/status/progress"
				},
				{
					label: t("圆形进度条"),
					icon: "circle-line",
					path: "/pages/demo/status/progress-circle"
				},
				{
					label: t("骨架图"),
					icon: "shadow-line",
					path: "/pages/demo/status/skeleton"
				},
				{
					label: t("加载更多"),
					icon: "loader-4-line",
					path: "/pages/demo/status/loadmore"
				}
			]
		},
		{
			label: t("反馈组件"),
			children: [
				{
					label: t("操作菜单"),
					icon: "menu-line",
					path: "/pages/demo/feedback/action-sheet"
				},
				{
					label: t("弹窗"),
					icon: "chat-4-line",
					path: "/pages/demo/feedback/popup"
				},
				{
					label: t("确认框"),
					icon: "chat-check-line",
					path: "/pages/demo/feedback/confirm"
				},
				{
					label: t("提示框"),
					icon: "message-2-line",
					path: "/pages/demo/feedback/toast"
				}
			]
		},
		{
			label: "其他",
			children: [
				{
					label: "QRCode",
					icon: "qr-code-line",
					path: "/pages/demo/other/qrcode"
				},
				{
					label: t("签名"),
					icon: "sketching",
					path: "/pages/demo/other/sign"
				},
				{
					label: t("图片裁剪"),
					icon: "crop-line",
					path: "/pages/demo/other/cropper"
				},
				{
					label: t("Canvas"),
					icon: "markup-line",
					path: "/pages/demo/other/canvas"
				},
				{
					label: t("富文本"),
					icon: "text-snippet",
					path: "/pages/demo/other/rict-text",
					disabled: true
				},
				{
					label: "DayUts",
					icon: "timer-2-line",
					path: "/pages/demo/other/day-uts"
				},
				{
					label: "Vibrate",
					icon: "volume-vibrate-line",
					path: "/pages/demo/other/vibrate"
				},
				{
					label: "SVG",
					icon: "bubble-chart-line",
					path: "/pages/demo/other/svg"
				},
				{
					label: "SlideVerify",
					icon: "contract-right-fill",
					path: "/pages/demo/other/slide-verify"
				}
			]
		}
	];
});

function toPath(item: Item) {
	if (item.disabled == true) {
		return ui.showToast({
			message: t("该功能正在开发中")
		});
	}

	router.to(item.path!);
}

function setLocale() {
	refs.open("localeSet");
}

function setSize() {
	refs.open("sizeSet");
}
</script>

<style lang="scss" scoped>
.group {
	@apply mb-10;

	.list {
		.item {
			@apply flex flex-col items-center;
			@apply rounded-xl bg-white px-2;
			height: 140rpx;
			margin-bottom: 10rpx;
			padding-top: 36rpx;
		}
	}
}
</style>