小程序初始提交

cool-unix/uni_modules/cool-ui/components/cl-page/cl-page.uvue

@@ -0,0 +1,88 @@
+<template>
+	<!-- #ifdef APP -->
+	<scroll-view
+		:style="{ flex: 1 }"
+		:scroll-top="scrollViewTop"
+		:scroll-with-animation="true"
+		@scroll="onScroll"
+	>
+		<cl-back-top v-if="backTop"></cl-back-top>
+		<theme></theme>
+		<ui></ui>
+		<slot></slot>
+	</scroll-view>
+	<!-- #endif -->
+
+	<!-- #ifndef APP -->
+	<cl-back-top v-if="backTop"></cl-back-top>
+	<theme></theme>
+	<ui></ui>
+	<slot></slot>
+	<!-- #endif -->
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Theme from "./theme.uvue";
+import Ui from "./ui.uvue";
+import { config } from "@/config";
+import { scroller } from "@/cool";
+
+defineOptions({
+	name: "cl-page"
+});
+
+defineProps({
+	// 是否显示回到顶部按钮
+	backTop: {
+		type: Boolean,
+		default: config.backTop
+	}
+});
+
+// 滚动距离
+const scrollTop = ref(0);
+
+// scroll-view 滚动位置
+const scrollViewTop = ref(0);
+
+// view 滚动事件
+function onScroll(e: UniScrollEvent) {
+	// 触发滚动事件
+	scroller.emit(e.detail.scrollTop);
+}
+
+// 页面滚动事件
+scroller.on((top) => {
+	scrollTop.value = top;
+});
+
+// 滚动到指定位置
+function scrollTo(top: number) {
+	// #ifdef H5
+	window.scrollTo({ top, behavior: "smooth" });
+	// #endif
+
+	// #ifdef MP
+	uni.pageScrollTo({
+		scrollTop: top,
+		duration: 300
+	});
+	// #endif
+
+	// #ifdef APP
+	scrollViewTop.value = top;
+	// #endif
+}
+
+// 回到顶部
+function scrollToTop() {
+	scrollTo(0 + Math.random() / 1000);
+}
+
+defineExpose({
+	scrollTop,
+	scrollTo,
+	scrollToTop
+});
+</script>

cool-unix/uni_modules/cool-ui/components/cl-page/props.ts

@@ -0,0 +1,4 @@
+export type ClPageProps = {
+	className?: string;
+	backTop?: boolean;
+};

cool-unix/uni_modules/cool-ui/components/cl-page/theme.uvue

@@ -0,0 +1,45 @@
+<template>
+	<cl-float-view :size="40" :left="20" :bottom="20" :gap="20" v-if="config.showDarkButton">
+		<view class="theme-set" @tap="toggleTheme()">
+			<view class="theme-set__inner" :class="{ 'is-dark': isDark }">
+				<view class="theme-set__icon" v-for="item in list" :key="item">
+					<cl-icon :name="item" color="white" size="18px"></cl-icon>
+				</view>
+			</view>
+		</view>
+	</cl-float-view>
+</template>
+
+<script setup lang="ts">
+import { config } from "@/config";
+import { isDark, toggleTheme } from "@/cool";
+
+defineOptions({
+	name: "cl-page-theme"
+});
+
+const list = ["moon-fill", "sun-fill"];
+</script>
+
+<style lang="scss" scoped>
+.theme-set {
+	@apply flex flex-col items-center justify-center rounded-full h-full w-full;
+	@apply bg-primary-500;
+
+	&__inner {
+		@apply flex flex-col duration-300;
+		transform: translateY(20px);
+		transition-property: transform;
+
+		&.is-dark {
+			transform: translateY(-20px);
+		}
+	}
+
+	&__icon {
+		@apply flex items-center justify-center;
+		height: 40px;
+		width: 40px;
+	}
+}
+</style>

cool-unix/uni_modules/cool-ui/components/cl-page/ui.uvue

@@ -0,0 +1,68 @@
+<template>
+	<cl-confirm ref="confirmRef"></cl-confirm>
+	<cl-confirm ref="tipsRef"></cl-confirm>
+	<cl-toast ref="toastRef"></cl-toast>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { ClConfirmAction, ClConfirmOptions, ClToastOptions } from "../../types";
+import { createUi, type UiInstance } from "../../hooks";
+import { t } from "@/locale";
+
+defineOptions({
+	name: "cl-page-ui"
+});
+
+// 确认弹窗实例
+const confirmRef = ref<ClConfirmComponentPublicInstance | null>(null);
+
+// 提示弹窗实例
+const tipsRef = ref<ClConfirmComponentPublicInstance | null>(null);
+
+// 提示弹窗实例
+const toastRef = ref<ClToastComponentPublicInstance | null>(null);
+
+/**
+ * 显示确认弹窗
+ * @param options ClConfirmOptions 弹窗配置项
+ */
+function showConfirm(options: ClConfirmOptions) {
+	if (confirmRef.value != null) {
+		confirmRef.value!.open(options);
+	}
+}
+
+/**
+ * 显示提示弹窗
+ * @param message 提示消息
+ * @param callback 回调函数
+ */
+function showTips(message: string, callback: (action: ClConfirmAction) => void) {
+	if (tipsRef.value != null) {
+		tipsRef.value!.open({
+			title: t("提示"),
+			message,
+			callback,
+			showCancel: false
+		} as ClConfirmOptions);
+	}
+}
+
+/**
+ * 显示提示弹窗
+ * @param options ClToastOptions 弹窗配置项
+ */
+function showToast(options: ClToastOptions) {
+	if (toastRef.value != null) {
+		toastRef.value!.open(options);
+	}
+}
+
+// 注册当前页面的 UiInstance 实例
+createUi({
+	showConfirm,
+	showTips,
+	showToast
+} as UiInstance);
+</script>