小程序初始提交

cool-unix/pages/demo/other/animation.uvue

@@ -0,0 +1,283 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('基础动画')">
+				<view class="row">
+					<view class="item" ref="rotateRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">rotate</cl-text>
+					</view>
+					<view class="item" ref="scaleRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">scale</cl-text>
+					</view>
+					<view class="item" ref="moveRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">move</cl-text>
+					</view>
+					<view class="item" ref="opacityRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">opacity</cl-text>
+					</view>
+				</view>
+			</demo-item>
+
+			<demo-item :label="t('淡入淡出')">
+				<view class="row">
+					<view class="item" ref="fadeInRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">fadeIn</cl-text>
+					</view>
+					<view class="item" ref="fadeOutRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">fadeOut</cl-text>
+					</view>
+				</view>
+
+				<cl-button text border @tap="onFadeToggle">{{ t("播放动画") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('滑入')">
+				<view class="row">
+					<view class="item" ref="slideLeftRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">slideLeft</cl-text>
+					</view>
+					<view class="item" ref="slideRightRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">slideRight</cl-text>
+					</view>
+					<view class="item" ref="slideUpRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">slideUp</cl-text>
+					</view>
+					<view class="item" ref="slideDownRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">slideDown</cl-text>
+					</view>
+				</view>
+
+				<cl-button text border @tap="onSlideInToggle">{{ t("播放动画") }}</cl-button>
+			</demo-item>
+
+			<demo-item label="缩放">
+				<view class="row">
+					<view class="item" ref="zoomInRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">zoomIn</cl-text>
+					</view>
+					<view class="item" ref="zoomOutRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">zoomOut</cl-text>
+					</view>
+				</view>
+
+				<cl-button text border @tap="onZoomToggle">{{ t("播放动画") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('旋转翻转')">
+				<view class="row">
+					<view class="item" ref="rotateInRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">rotateIn</cl-text>
+					</view>
+					<view class="item" ref="flipXRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">flipX</cl-text>
+					</view>
+					<view class="item" ref="flipYRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">flipY</cl-text>
+					</view>
+				</view>
+
+				<cl-button text border @tap="onRotateFlipToggle">{{ t("播放动画") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('摇摆抖动')">
+				<view class="row">
+					<view class="item" ref="shakeRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">shake</cl-text>
+					</view>
+					<view class="item" ref="swingRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">swing</cl-text>
+					</view>
+					<view class="item" ref="wobbleRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">wobble</cl-text>
+					</view>
+				</view>
+
+				<cl-button text border @tap="onShakeToggle">{{ t("播放动画") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('特殊效果')">
+				<view class="row">
+					<view class="item" ref="rollInRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">rollIn</cl-text>
+					</view>
+					<view class="item" ref="lightSpeedRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">lightSpeed</cl-text>
+					</view>
+					<view class="item" ref="rippleRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">ripple</cl-text>
+					</view>
+				</view>
+
+				<cl-button text border @tap="onSpecialToggle">{{ t("播放动画") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('组合动画')">
+				<view class="row">
+					<view class="item" ref="sequenceRef">
+						<cl-text color="white" :pt="{ className: 'text-sm' }">sequence</cl-text>
+					</view>
+				</view>
+
+				<cl-button text border @tap="onSequenceToggle">{{ t("播放动画") }}</cl-button>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { AnimationEngine, createAnimation } from "@/cool";
+import { ref } from "vue";
+import DemoItem from "../components/item.uvue";
+import { t } from "@/locale";
+
+// 基础动画引用
+const rotateRef = ref<UniElement | null>(null);
+const moveRef = ref<UniElement | null>(null);
+const scaleRef = ref<UniElement | null>(null);
+const opacityRef = ref<UniElement | null>(null);
+
+// 淡入淡出动画引用
+const fadeInRef = ref<UniElement | null>(null);
+const fadeOutRef = ref<UniElement | null>(null);
+
+// 滑入动画引用
+const slideLeftRef = ref<UniElement | null>(null);
+const slideRightRef = ref<UniElement | null>(null);
+const slideUpRef = ref<UniElement | null>(null);
+const slideDownRef = ref<UniElement | null>(null);
+
+// 缩放动画引用
+const zoomInRef = ref<UniElement | null>(null);
+const zoomOutRef = ref<UniElement | null>(null);
+
+// 旋转翻转动画引用
+const rotateInRef = ref<UniElement | null>(null);
+const flipXRef = ref<UniElement | null>(null);
+const flipYRef = ref<UniElement | null>(null);
+
+// 摇摆抖动动画引用
+const shakeRef = ref<UniElement | null>(null);
+const swingRef = ref<UniElement | null>(null);
+const wobbleRef = ref<UniElement | null>(null);
+
+// 特殊效果动画引用
+const rollInRef = ref<UniElement | null>(null);
+const lightSpeedRef = ref<UniElement | null>(null);
+const rippleRef = ref<UniElement | null>(null);
+
+// 组合动画引用
+const sequenceRef = ref<UniElement | null>(null);
+
+// 基础动画方法
+function onRotate() {
+	createAnimation(rotateRef.value, {
+		duration: 1000,
+		loop: -1
+	})
+		.rotate("0deg", "360deg")
+		.play();
+}
+
+function onMove() {
+	createAnimation(moveRef.value, {
+		duration: 1000,
+		loop: -1,
+		alternate: true
+	})
+		.translateX("0rpx", "300rpx")
+		.play();
+}
+
+function onScale() {
+	createAnimation(scaleRef.value, {
+		duration: 500,
+		loop: -1,
+		alternate: true
+	})
+		.scale("1", "1.2")
+		.play();
+}
+
+function onOpacity() {
+	createAnimation(opacityRef.value, {
+		duration: 500,
+		loop: -1,
+		alternate: true
+	})
+		.opacity("1", "0.5")
+		.play();
+}
+
+// 淡入淡出动画方法
+function onFadeToggle() {
+	createAnimation(fadeInRef.value).fadeIn(500).play();
+	createAnimation(fadeOutRef.value).fadeOut(500).play();
+}
+
+// 滑入动画方法
+function onSlideInToggle() {
+	createAnimation(slideLeftRef.value).slideInLeft(400).play();
+	createAnimation(slideRightRef.value).slideInRight(400).play();
+	createAnimation(slideUpRef.value).slideInUp(400).play();
+	createAnimation(slideDownRef.value).slideInDown(400).play();
+}
+
+// 缩放动画方法
+function onZoomToggle() {
+	createAnimation(zoomInRef.value).zoomIn(400).play();
+	createAnimation(zoomOutRef.value).zoomOut(400).play();
+}
+
+// 旋转翻转动画方法
+function onRotateFlipToggle() {
+	createAnimation(rotateInRef.value).rotateIn(600).play();
+	createAnimation(flipXRef.value).flipX(600).play();
+	createAnimation(flipYRef.value).flipY(600).play();
+}
+
+// 摇摆抖动动画方法
+function onShakeToggle() {
+	createAnimation(shakeRef.value).shake(200).play();
+	createAnimation(swingRef.value).swing(200).play();
+	createAnimation(wobbleRef.value).wobble(200).play();
+}
+
+// 特殊效果动画方法
+function onSpecialToggle() {
+	createAnimation(rollInRef.value).rollIn(600).play();
+	createAnimation(lightSpeedRef.value).lightSpeed(500).play();
+	createAnimation(rippleRef.value).ripple(600).play();
+}
+
+// 异步序列动画方法
+async function onSequenceToggle() {
+	createAnimation(sequenceRef.value)
+		.sequence([
+			(engine: AnimationEngine) => engine.fadeIn(300),
+			(engine: AnimationEngine) => engine.scale("1", "1.5").setDuration(400),
+			(engine: AnimationEngine) => engine.rotate("0deg", "360deg").setDuration(500),
+			(engine: AnimationEngine) => engine.scale("1.5", "1").setDuration(300),
+			(engine: AnimationEngine) => engine.fadeOut(300)
+		])
+		.play();
+}
+
+onReady(() => {
+	onRotate();
+	onMove();
+	onScale();
+	onOpacity();
+});
+</script>
+
+<style lang="scss" scoped>
+.row {
+	@apply flex flex-row justify-between items-center overflow-visible;
+	margin: 0 -10rpx 20rpx -10rpx;
+
+	.item {
+		@apply flex items-center justify-center h-16 bg-primary-500 rounded-xl flex-1;
+		margin: 0 10rpx;
+	}
+}
+</style>

cool-unix/pages/demo/other/canvas.uvue

@@ -0,0 +1,233 @@
+<template>
+	<cl-page>
+		<cl-canvas
+			v-if="width > 0"
+			ref="canvasRef"
+			canvas-id="test"
+			:height="height"
+			:width="width"
+			@load="onCanvasLoad"
+		></cl-canvas>
+
+		<cl-footer>
+			<!-- #ifdef H5 -->
+			<cl-button type="primary" @click="previewImage">{{ t("预览图片") }}</cl-button>
+			<!-- #endif -->
+
+			<!-- #ifndef H5 -->
+			<cl-button type="primary" @click="saveImage">{{ t("保存图片") }}</cl-button>
+			<!-- #endif -->
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { t } from "@/locale";
+import { Canvas } from "@/uni_modules/cool-canvas";
+import { useUi } from "@/uni_modules/cool-ui";
+import { ref } from "vue";
+
+const ui = useUi();
+
+const canvasRef = ref<ClCanvasComponentPublicInstance | null>(null);
+
+// 初始化为 0，避免页面未完全渲染时 getWindowInfo 获取到的高度或宽度不准确（如已知固定高宽可直接赋值）
+const height = ref(0);
+const width = ref(0);
+
+function onCanvasLoad(canvas: Canvas) {
+	canvas
+		.image({
+			x: 0,
+			y: 0,
+			width: width.value,
+			height: height.value,
+			url: "/static/demo/canvas/bg.png"
+		})
+		.image({
+			x: 0,
+			y: 0,
+			width: width.value,
+			height: height.value,
+			url: "/static/demo/canvas/light.png"
+		})
+		.image({
+			x: (width.value - 226) / 2,
+			y: 60,
+			width: 226,
+			height: 77,
+			url: "/static/demo/canvas/text-yqhy.png"
+		})
+		.image({
+			x: (width.value - 325) / 2,
+			y: 125,
+			width: 325,
+			height: 77,
+			url: "/static/demo/canvas/text-dezk.png"
+		})
+		.image({
+			x: (width.value - 196) / 2,
+			y: 190,
+			width: 196,
+			height: 62,
+			url: "/static/demo/canvas/text-xrfl.png"
+		})
+		.image({
+			x: (width.value - 374) / 2 - 1,
+			y: 500,
+			width: 374,
+			height: 220,
+			url: "/static/demo/canvas/rp-t.png"
+		})
+		.image({
+			x: (width.value - 327) / 2,
+			y: 280,
+			width: 327,
+			height: 430,
+			url: "/static/demo/canvas/bg-content.png"
+		})
+		.image({
+			x: 30,
+			y: 240,
+			width: 114,
+			height: 120,
+			url: "/static/demo/canvas/gold-l.png"
+		})
+		.image({
+			x: width.value - 106 - 50,
+			y: 240,
+			width: 106,
+			height: 107,
+			url: "/static/demo/canvas/gold-r.png"
+		})
+		.image({
+			x: (width.value - 350) / 2,
+			y: 595,
+			width: 350,
+			height: 122,
+			url: "/static/demo/canvas/rp-b.png"
+		})
+		.image({
+			x: (width.value - 208) / 2,
+			y: 631,
+			width: 208,
+			height: 89,
+			url: "/static/demo/canvas/invite-btn.png"
+		})
+		.div({
+			x: (width.value - 276) / 2,
+			y: 335,
+			width: 276,
+			height: 210,
+			backgroundColor: "#fff",
+			radius: 10
+		})
+		.text({
+			x: 0,
+			y: 350,
+			width: width.value,
+			content: "新人专享",
+			color: "#F73035",
+			textAlign: "center",
+			fontSize: 28,
+			fontWeight: "bold"
+		})
+		.text({
+			x: 0,
+			y: 390,
+			width: width.value,
+			content: "限时领券30元",
+			color: "#F73035",
+			textAlign: "center",
+			fontSize: 16
+		})
+		.image({
+			x: (width.value - 246) / 2,
+			y: 432,
+			width: 246,
+			height: 98,
+			url: "/static/demo/canvas/coupon.png"
+		})
+		.text({
+			x: (width.value - 246) / 2,
+			y: 435,
+			content: "领券",
+			width: 34,
+			color: "#fff",
+			fontSize: 11,
+			textAlign: "center"
+		})
+		.text({
+			x: (width.value - 246) / 2,
+			y: 454,
+			width: 86,
+			content: "80",
+			color: "#604E44",
+			fontSize: 46,
+			textAlign: "center",
+			fontWeight: "bold"
+		})
+		.text({
+			x: (width.value - 246) / 2 + 86,
+			y: 459,
+			width: 246 - 86,
+			content: "新人专享优惠券",
+			color: "#604E44",
+			fontSize: 18,
+			textAlign: "center"
+		})
+		.text({
+			x: (width.value - 246) / 2 + 86,
+			y: 489,
+			width: 246 - 86,
+			content: "2021.04.30-2021.06.30",
+			color: "#604E44",
+			fontSize: 12,
+			textAlign: "center"
+		})
+		.text({
+			x: 0,
+			y: 560,
+			width: width.value,
+			content: "邀请好友，双方均可获得20元优惠券",
+			color: "#756056",
+			fontSize: 15,
+			textAlign: "center"
+		})
+		.text({
+			x: 0,
+			y: 300,
+			width: width.value,
+			content: "～ 专属新人福利 ～",
+			color: "#956056",
+			textAlign: "center",
+			opacity: 0.7
+		})
+		.draw();
+}
+
+function previewImage() {
+	canvasRef.value!.previewImage();
+}
+
+function saveImage() {
+	canvasRef.value!.saveImage();
+}
+
+onReady(() => {
+	// 同上
+	height.value = uni.getWindowInfo().windowHeight;
+	width.value = uni.getWindowInfo().windowWidth;
+
+	ui.showConfirm({
+		title: t("提示"),
+		message: t("本页面内容由 canvas 渲染生成，是否立即预览图片效果？"),
+		confirmText: t("预览"),
+		callback(action) {
+			if (action == "confirm") {
+				canvasRef.value!.previewImage();
+			}
+		}
+	});
+});
+</script>

cool-unix/pages/demo/other/cropper.uvue

@@ -0,0 +1,55 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('自定义')">
+				<cl-button @tap="chooseImage">{{ t("选择图片") }}</cl-button>
+
+				<cl-list border :pt="{ className: 'mt-5' }">
+					<cl-list-item :label="t('可调节裁剪框大小')">
+						<cl-switch v-model="resizable"></cl-switch>
+					</cl-list-item>
+				</cl-list>
+			</demo-item>
+		</view>
+	</cl-page>
+
+	<cl-cropper
+		ref="cropperRef"
+		:resizable="resizable"
+		@crop="onCrop"
+		@load="onImageLoad"
+	></cl-cropper>
+</template>
+
+<script lang="ts" setup>
+import { t } from "@/locale";
+import DemoItem from "../components/item.uvue";
+import { ref } from "vue";
+
+const cropperRef = ref<ClCropperComponentPublicInstance | null>(null);
+
+const resizable = ref(true);
+
+function chooseImage() {
+	uni.chooseImage({
+		count: 1,
+		sizeType: ["original", "compressed"],
+		sourceType: ["album", "camera"],
+		success: (res) => {
+			if (res.tempFilePaths.length > 0) {
+				cropperRef.value!.open(res.tempFilePaths[0]);
+			}
+		}
+	});
+}
+
+function onCrop(url: string) {
+	uni.previewImage({
+		urls: [url]
+	});
+}
+
+function onImageLoad(e: UniImageLoadEvent) {
+	console.log("onImageLoad", e);
+}
+</script>

cool-unix/pages/demo/other/day-uts.uvue

@@ -0,0 +1,50 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('格式化')">
+				<cl-text>format("YYYY-MM-DD HH:mm:ss")</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('添加')">
+				<cl-text>add(1, "day")</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('减去')">
+				<cl-text>subtract(1, "day")</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('获取某个单位的开始时间')">
+				<cl-text>startOf("day")</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('获取某个单位的结束时间')">
+				<cl-text>endOf("month")</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('是否同一天')">
+				<cl-text>isSame(Date)</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('是否早于')">
+				<cl-text>isBefore(Date)</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('是否晚于')">
+				<cl-text>isAfter(Date)</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('差值')">
+				<cl-text>diff(Date)</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('差值（单位）')">
+				<cl-text>diffUnit(Date, "day")</cl-text>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { t } from "@/locale";
+import DemoItem from "../components/item.uvue";
+</script>

cool-unix/pages/demo/other/qrcode.uvue

@@ -0,0 +1,88 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('自定义')">
+				<view class="flex flex-row justify-center py-3">
+					<cl-qrcode
+						ref="qrcodeRef"
+						text="https://cool-js.com/"
+						:logo="isLogo ? 'https://unix.cool-js.com/logo.png' : ''"
+						:pd-radius="isPdRadius ? 50 : 0"
+						:padding="isPadding ? 10 : 5"
+						:foreground="isColor ? '#14b8a6' : '#000000'"
+						:pd-color="isColor ? '#0d9488' : '#000000'"
+						:mode="mode"
+					></cl-qrcode>
+				</view>
+
+				<cl-list border class="mt-3">
+					<cl-list-item :label="t('添加LOGO')">
+						<cl-switch v-model="isLogo"></cl-switch>
+					</cl-list-item>
+
+					<cl-list-item :label="t('圆角定位点')">
+						<cl-switch v-model="isPdRadius"></cl-switch>
+					</cl-list-item>
+
+					<cl-list-item :label="t('内间距')">
+						<cl-switch v-model="isPadding"></cl-switch>
+					</cl-list-item>
+
+					<cl-list-item :label="t('自定义颜色')">
+						<cl-switch v-model="isColor"></cl-switch>
+					</cl-list-item>
+
+					<cl-list-item :label="t('导出图片')">
+						<cl-button @tap="save">{{ t("预览") }}</cl-button>
+					</cl-list-item>
+
+					<view class="p-2">
+						<cl-tabs v-model="mode" :height="66" :list="modeList" show-slider></cl-tabs>
+					</view>
+				</cl-list>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import type { ClQrcodeMode, ClTabsItem } from "@/uni_modules/cool-ui";
+import DemoItem from "../components/item.uvue";
+import { ref } from "vue";
+import { t } from "@/locale";
+
+const isLogo = ref(true);
+const isPdRadius = ref(true);
+const isPadding = ref(false);
+const isColor = ref(false);
+
+const qrcodeRef = ref<ClQrcodeComponentPublicInstance | null>(null);
+
+const mode = ref<ClQrcodeMode>("circular");
+const modeList = [
+	{
+		label: t("矩形"),
+		value: "rect"
+	},
+	{
+		label: t("点"),
+		value: "circular"
+	},
+	{
+		label: t("线性"),
+		value: "line"
+	},
+	{
+		label: t("小方格"),
+		value: "rectSmall"
+	}
+] as ClTabsItem[];
+
+function save() {
+	qrcodeRef.value!.toPng().then((url) => {
+		uni.previewImage({
+			urls: [url]
+		});
+	});
+}
+</script>

cool-unix/pages/demo/other/router/index.uvue

@@ -0,0 +1,41 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('跳转')">
+				<cl-button @click="toPush">{{ t("跳转") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('带参数')">
+				<cl-button @click="toQuery">{{ t("跳转") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('需登录')">
+				<cl-button @click="toLogin">{{ t("跳转") }}</cl-button>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { router, uuid } from "@/cool";
+import DemoItem from "../../components/item.uvue";
+import { t } from "@/locale";
+
+function toPush() {
+	router.to("/pages/demo/other/router/query");
+}
+
+function toQuery() {
+	router.push({ path: "/pages/demo/other/router/query", query: { id: uuid() } });
+}
+
+function toLogin() {
+	router.push({
+		path: "/pages/demo/other/router/query",
+		query: { id: uuid() },
+		isAuth: true
+	});
+}
+</script>
+
+<style lang="scss" scoped></style>

cool-unix/pages/demo/other/router/query.uvue

@@ -0,0 +1,34 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('ID')">
+				<cl-text>{{ id ?? "-" }}</cl-text>
+			</demo-item>
+
+			<demo-item :label="t('用户信息')" v-if="!user.isNull()">
+				<cl-text>{{ userInfo?.nickName ?? "-" }}</cl-text>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { t } from "@/locale";
+import DemoItem from "../../components/item.uvue";
+import { router, userInfo, useStore } from "@/cool";
+
+const { user } = useStore();
+
+const props = defineProps({
+	id: {
+		type: String
+	}
+});
+
+onReady(() => {
+	const query = router.query();
+	console.log(query);
+});
+</script>
+
+<style lang="scss" scoped></style>

cool-unix/pages/demo/other/share.uvue

@@ -0,0 +1,83 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('分享文本')">
+				<cl-button @tap="shareText">{{ t("分享文本") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('分享图片')">
+				<cl-button @tap="shareImage">{{ t("分享图片") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('分享文件')">
+				<cl-button @tap="shareFile">{{ t("分享文件") }}</cl-button>
+			</demo-item>
+
+			<demo-item :label="t('分享链接')">
+				<cl-button @tap="shareLink">{{ t("分享链接") }}</cl-button>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+// #ifdef APP
+import { shareWithSystem } from "@/uni_modules/cool-share";
+// #endif
+import DemoItem from "../components/item.uvue";
+import { t } from "@/locale";
+
+function shareText() {
+	// #ifdef APP
+	shareWithSystem({
+		type: "text",
+		title: "Cool Unix",
+		summary: "Cool Unix 是一个高效的项目脚手架",
+		success: () => {
+			console.log("success");
+		},
+		fail: (error) => {
+			console.log("fail", error);
+		}
+	});
+	// #endif
+}
+
+function shareImage() {
+	// #ifdef APP
+	shareWithSystem({
+		type: "image",
+		url: "https://cool-js.com/logo.png",
+		success: () => {
+			console.log("success");
+		}
+	});
+	// #endif
+}
+
+function shareFile() {
+	// #ifdef APP
+	shareWithSystem({
+		type: "file",
+		url: "https://show.cool-admin.com/用户导入模版.xlsx",
+		success: () => {
+			console.log("success");
+		}
+	});
+	// #endif
+}
+
+function shareLink() {
+	// #ifdef APP
+	shareWithSystem({
+		type: "link",
+		url: "https://cool-js.com/",
+		success: () => {
+			console.log("success");
+		}
+	});
+	// #endif
+}
+</script>
+
+<style lang="scss" scoped></style>

cool-unix/pages/demo/other/sign.uvue

@@ -0,0 +1,54 @@
+<template>
+	<cl-page>
+		<cl-sign ref="signRef" :height="height" :width="width" :enable-brush="isBrush"></cl-sign>
+
+		<view class="p-3">
+			<cl-list>
+				<cl-list-item :label="t('操作')">
+					<cl-button type="info" @click="clear">{{ t("清空") }}</cl-button>
+					<cl-button @click="preview">{{ t("预览") }}</cl-button>
+				</cl-list-item>
+
+				<cl-list-item :label="t('设置高度')">
+					<cl-switch v-model="isFullscreen" @change="onFullscreenChange"></cl-switch>
+				</cl-list-item>
+
+				<cl-list-item :label="t('毛笔效果')">
+					<cl-switch v-model="isBrush"></cl-switch>
+				</cl-list-item>
+			</cl-list>
+		</view>
+	</cl-page>
+</template>
+
+<script setup lang="ts">
+import { t } from "@/locale";
+import { ref } from "vue";
+
+const height = ref(200);
+const width = ref(0);
+
+const isFullscreen = ref(false);
+const isBrush = ref(true);
+const signRef = ref<ClSignComponentPublicInstance | null>(null);
+
+function clear() {
+	signRef.value!.clear();
+}
+
+function preview() {
+	signRef.value!.toPng().then((url) => {
+		uni.previewImage({
+			urls: [url]
+		});
+	});
+}
+
+function onFullscreenChange() {
+	height.value = isFullscreen.value ? uni.getWindowInfo().windowHeight - 200 : 200;
+}
+
+onReady(() => {
+	width.value = uni.getWindowInfo().windowWidth;
+});
+</script>

cool-unix/pages/demo/other/slide-verify.uvue

@@ -0,0 +1,47 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('基础用法')">
+				<cl-slide-verify
+					v-model="status"
+					@success="onSuccess"
+					@fail="onFail"
+				></cl-slide-verify>
+			</demo-item>
+
+			<demo-item :label="t('没有错误提示')">
+				<cl-slide-verify :show-fail="false"></cl-slide-verify>
+			</demo-item>
+
+			<demo-item :label="t('转动图片')">
+				<cl-slide-verify
+					mode="image"
+					image-url="https://unix.cool-js.com/images/demo/avatar.jpg"
+				></cl-slide-verify>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import DemoItem from "../components/item.uvue";
+import { t } from "@/locale";
+import { useUi } from "@/uni_modules/cool-ui";
+
+const ui = useUi();
+
+const status = ref(false);
+
+function onSuccess() {
+	ui.showToast({
+		message: t("验证通过")
+	});
+}
+
+function onFail() {
+	ui.showToast({
+		message: t("验证失败")
+	});
+}
+</script>

cool-unix/pages/demo/other/svg.uvue

@@ -0,0 +1,71 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('基础用法')">
+				<view class="flex flex-row">
+					<cl-svg src="/static/demo/svg/category.svg" class="h-6 w-6"></cl-svg>
+					<cl-svg src="/static/demo/svg/shopping-cart.svg" class="h-6 w-6 ml-3"></cl-svg>
+					<cl-svg src="/static/demo/svg/points.svg" class="h-6 w-6 ml-3"></cl-svg>
+				</view>
+			</demo-item>
+
+			<demo-item :label="t('不同大小')">
+				<view class="flex flex-row">
+					<cl-svg src="/static/demo/svg/points.svg" class="h-10 w-10"></cl-svg>
+					<cl-svg src="/static/demo/svg/points.svg" class="h-8 w-8 ml-3"></cl-svg>
+					<cl-svg src="/static/demo/svg/points.svg" class="h-6 w-6 ml-3"></cl-svg>
+				</view>
+			</demo-item>
+
+			<demo-item :label="t('不同颜色')">
+				<view class="flex flex-row">
+					<!-- #ifdef MP -->
+					<cl-svg :src="svg" color="primary" class="h-6 w-6"></cl-svg>
+
+					<cl-svg :src="svg" color="#d946ef" class="h-6 w-6 ml-3"></cl-svg>
+					<!-- #endif -->
+
+					<!-- #ifndef MP -->
+					<cl-svg
+						src="/static/demo/svg/category.svg"
+						color="primary"
+						class="h-6 w-6"
+					></cl-svg>
+					<cl-svg
+						src="/static/demo/svg/shopping-cart.svg"
+						color="#eab308"
+						class="h-6 w-6 ml-3"
+					></cl-svg>
+					<cl-svg
+						src="/static/demo/svg/points.svg"
+						color="#a855f7"
+						class="h-6 w-6 ml-3"
+					></cl-svg>
+					<!-- #endif -->
+				</view>
+			</demo-item>
+
+			<!-- #ifdef APP-ANDROID || H5 -->
+			<demo-item :label="t('使用base64')">
+				<view class="flex flex-row">
+					<cl-svg :src="base64" class="h-6 w-6"></cl-svg>
+				</view>
+			</demo-item>
+			<!-- #endif -->
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { t } from "@/locale";
+import DemoItem from "../components/item.uvue";
+import { ref } from "vue";
+
+const svg = ref(
+	`<svg t="1756119341770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7779" width="64" height="64"><path d="M783.1 899.3H242.9c-97.7 0-177.3-79.5-177.3-177.3V302.6c0-97.7 79.5-177.3 177.3-177.3H783c97.7 0 177.3 79.5 177.3 177.3V722c0.1 97.7-79.5 177.3-177.2 177.3zM242.9 214.8c-48.4 0-87.8 39.4-87.8 87.8V722c0 48.4 39.4 87.8 87.8 87.8H783c48.4 0 87.8-39.4 87.8-87.8V302.6c0-48.4-39.4-87.8-87.8-87.8H242.9z" fill="#333333" p-id="7780"></path><path d="M513 600.5c-24.9 0-49.9-7.3-71.6-21.8l-2.9-2.1-214.9-170.1c-19.4-15.3-22.7-43.5-7.3-62.8 15.3-19.4 43.5-22.6 62.8-7.3l213.2 168.8c12.7 7.8 28.7 7.8 41.5 0L747 336.4c19.3-15.3 47.5-12.1 62.8 7.3 15.3 19.4 12.1 47.5-7.3 62.8L584.6 578.7c-21.7 14.5-46.7 21.8-71.6 21.8z" fill="#333333" p-id="7781"></path></svg>`
+);
+
+const base64 = ref(
+	`data:image/svg+xml;base64,PHN2ZyB0PSIxNzU2MTE2OTQxMjk0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc2MTYiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHBhdGggZD0iTTU0MS44IDkyOC41aC02MS4xYy01MC42IDAtOTEuOC00MS4yLTkxLjgtOTEuOFY2MTMuNmMwLTUwLjYgNDEuMi05MS44IDkxLjgtOTEuOGg2MS4xYzUwLjYgMCA5MS44IDQxLjIgOTEuOCA5MS44djIyMy4xYzAgNTAuNy00MS4xIDkxLjgtOTEuOCA5MS44eiBtLTYxLjEtMzE2LjJsLTEuMyAyMjQuNCA2Mi41IDEuM2MwLjcgMCAxLjMtMC42IDEuMy0xLjNWNjEzLjZsLTYyLjUtMS4zek04MzQuOSA5MjguNWgtNjEuMWMtNTAuNiAwLTkxLjgtNDEuMi05MS44LTkxLjhWNDA5LjVjMC01MC42IDQxLjItOTEuOCA5MS44LTkxLjhoNjEuMWM1MC42IDAgOTEuOCA0MS4yIDkxLjggOTEuOHY0MjcuM2MwIDUwLjYtNDEuMiA5MS43LTkxLjggOTEuN3ogbS02MS4yLTUyMC40bC0xLjMgNDI4LjYgNjIuNSAxLjNjMC43IDAgMS4zLTAuNiAxLjMtMS4zVjQwOS41bC02Mi41LTEuNHpNMjUyLjQgOTI4LjVoLTYxLjFjLTUwLjYgMC05MS44LTQxLjItOTEuOC05MS44di04MC4yYzAtNTAuNiA0MS4yLTkxLjggOTEuOC05MS44aDYxLjFjNTAuNiAwIDkxLjggNDEuMiA5MS44IDkxLjh2ODAuMmMwIDUwLjctNDEuMiA5MS44LTkxLjggOTEuOHogbS02MS4xLTE3My4zbC0xLjMgODEuNSA2Mi41IDEuM2MwLjcgMCAxLjMtMC42IDEuMy0xLjN2LTgwLjJsLTYyLjUtMS4zek0xNDQuNiA2MjUuNWMtMTEuNiAwLTIzLjItNC40LTMyLTEzLjMtMTcuNy0xNy43LTE3LjYtNDYuMyAwLTY0TDUyNiAxMzUuM2MxNy43LTE3LjYgNDYuMy0xNy42IDY0IDAgMTcuNyAxNy43IDE3LjYgNDYuMyAwIDY0TDE3Ni42IDYxMi4yYy04LjkgOC44LTIwLjUgMTMuMy0zMiAxMy4zeiIgZmlsbD0iIzMzMzMzMyIgcC1pZD0iNzYxNyI+PC9wYXRoPjxwYXRoIGQ9Ik01ODguNCAzNjQuN2MtMjUgMC00NS4yLTIwLjMtNDUuMi00NS4yVjIxOC45YzAtMjAuMy0xNi41LTM2LjgtMzYuOC0zNi44SDQwNS44Yy0yNSAwLTQ1LjItMjAuMy00NS4yLTQ1LjJzMjAuMy00NS4yIDQ1LjItNDUuMmgxMDAuNmM3MC4yIDAgMTI3LjIgNTcuMSAxMjcuMiAxMjcuMnYxMDAuNmMwIDI1LTIwLjIgNDUuMi00NS4yIDQ1LjJ6IiBmaWxsPSIjMzMzMzMzIiBwLWlkPSI3NjE4Ij48L3BhdGg+PC9zdmc+`
+);
+</script>

cool-unix/pages/demo/other/vibrate.uvue

@@ -0,0 +1,19 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('基础用法')">
+				<cl-button @tap="onVibrate">{{ t("点击触发") }}</cl-button>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { t } from "@/locale";
+import DemoItem from "../components/item.uvue";
+import { vibrate } from "@/uni_modules/cool-vibrate";
+
+function onVibrate() {
+	vibrate(1);
+}
+</script>

cool-unix/pages/demo/other/watermark.uvue

@@ -0,0 +1,147 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('自定义样式')">
+				<view class="flex">
+					<cl-watermark
+						:text="customText"
+						:font-size="fontSize"
+						:color="color"
+						:dark-color="darkColor"
+						:opacity="opacity"
+						:rotate="rotate"
+						:width="width"
+						:height="height"
+						:gap-x="gapX"
+						:gap-y="gapY"
+						:font-weight="fontWeight"
+					>
+						<view
+							class="flex flex-col p-4 rounded-xl bg-surface-50 dark:bg-surface-800 h-[400rpx]"
+						>
+							<cl-text>
+								明月几时有？把酒问青天。 不知天上宫阙，今夕是何年。
+								我欲乘风归去，又恐琼楼玉宇，高处不胜寒。 起舞弄清影，何似在人间。
+							</cl-text>
+						</view>
+					</cl-watermark>
+				</view>
+
+				<cl-list border class="mt-3">
+					<cl-list-item :label="t('水印文本')">
+						<cl-input
+							v-model="customText"
+							placeholder="请输入水印文本"
+							:pt="{ className: 'w-[300rpx]' }"
+						/>
+					</cl-list-item>
+
+					<cl-list-item :label="t('字体大小')">
+						<view class="w-[300rpx]">
+							<cl-slider v-model="fontSize" :min="12" :max="32" :step="1"></cl-slider>
+						</view>
+					</cl-list-item>
+
+					<!-- #ifndef APP -->
+					<cl-list-item :label="t('透明度')">
+						<view class="w-[300rpx]">
+							<cl-slider
+								v-model="opacity"
+								:min="0.1"
+								:max="1"
+								:step="0.05"
+							></cl-slider>
+						</view>
+					</cl-list-item>
+					<!-- #endif -->
+
+					<cl-list-item :label="t('旋转角度')">
+						<view class="w-[300rpx]">
+							<cl-slider
+								v-model="rotate"
+								:min="-180"
+								:max="180"
+								:step="5"
+							></cl-slider>
+						</view>
+					</cl-list-item>
+
+					<cl-list-item :label="t('水印宽度')">
+						<view class="w-[300rpx]">
+							<cl-slider v-model="width" :min="80" :max="300" :step="10"></cl-slider>
+						</view>
+					</cl-list-item>
+
+					<cl-list-item :label="t('水印高度')">
+						<view class="w-[300rpx]">
+							<cl-slider v-model="height" :min="40" :max="200" :step="10"></cl-slider>
+						</view>
+					</cl-list-item>
+
+					<cl-list-item :label="t('水平间距')">
+						<view class="w-[300rpx]">
+							<cl-slider v-model="gapX" :min="20" :max="200" :step="10"></cl-slider>
+						</view>
+					</cl-list-item>
+
+					<cl-list-item :label="t('垂直间距')">
+						<view class="w-[300rpx]">
+							<cl-slider v-model="gapY" :min="20" :max="200" :step="10"></cl-slider>
+						</view>
+					</cl-list-item>
+
+					<cl-list-item :label="t('字体粗细')">
+						<cl-tabs
+							v-model="fontWeight"
+							:list="fontWeightList"
+							:height="60"
+							show-slider
+						></cl-tabs>
+					</cl-list-item>
+				</cl-list>
+			</demo-item>
+
+			<demo-item :label="t('图片保护')">
+				<view class="flex">
+					<cl-watermark text="© Cool UI" :width="200" :height="80" :opacity="0.9">
+						<image
+							src="https://unix.cool-js.com/images/demo/avatar.jpg"
+							mode="aspectFit"
+							class="w-full"
+						></image>
+					</cl-watermark>
+				</view>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import DemoItem from "../components/item.uvue";
+import { ref } from "vue";
+import { t } from "@/locale";
+import type { ClTabsItem } from "@/uni_modules/cool-ui";
+
+const customText = ref("Cool UI");
+const fontSize = ref(16);
+const color = ref("rgba(0, 0, 0, 0.15)");
+const darkColor = ref("rgba(255, 255, 255, 0.15)");
+const opacity = ref(1);
+const rotate = ref(-22);
+const width = ref(120);
+const height = ref(64);
+const gapX = ref(100);
+const gapY = ref(100);
+const fontWeight = ref("normal");
+
+const fontWeightList = [
+	{
+		label: t("正常"),
+		value: "normal"
+	},
+	{
+		label: t("加粗"),
+		value: "bold"
+	}
+] as ClTabsItem[];
+</script>