514 lines
10 KiB
Plaintext
514 lines
10 KiB
Plaintext
<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 }}（{{ item.children?.length ?? 0 }}）</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();
|
||
|
||
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("日历"),
|
||
icon: "calendar-line",
|
||
path: "/pages/demo/form/calendar"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
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: "menu-add-line",
|
||
path: "/pages/demo/data/read-more"
|
||
},
|
||
{
|
||
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: "film-line",
|
||
path: "/pages/demo/data/marquee"
|
||
},
|
||
{
|
||
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: "copyright-line",
|
||
path: "/pages/demo/other/watermark"
|
||
},
|
||
{
|
||
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"
|
||
},
|
||
{
|
||
label: "Animation",
|
||
icon: "instance-line",
|
||
path: "/pages/demo/other/animation"
|
||
},
|
||
{
|
||
label: "Router",
|
||
icon: "compass-discover-line",
|
||
path: "/pages/demo/other/router/index"
|
||
}
|
||
]
|
||
}
|
||
];
|
||
});
|
||
|
||
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>
|