小程序初始提交

cool-unix/pages/demo/components/goods-item.uvue

@@ -0,0 +1,32 @@
+<template>
+	<view class="p-3 pb-0">
+		<view class="w-full p-3 bg-white rounded-xl dark:bg-surface-800">
+			<cl-image :src="item?.image" mode="aspectFill" width="100%" height="280rpx"></cl-image>
+			<cl-text :pt="{ className: 'mt-2' }">{{ item?.title }}</cl-text>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { parse } from "@/cool";
+
+defineOptions({
+	name: "goods-item"
+});
+
+type GoodsItem = {
+	id: number;
+	title: string;
+	image: string;
+};
+
+const props = defineProps({
+	value: {
+		type: Object,
+		default: () => ({})
+	}
+});
+
+const item = computed(() => parse<GoodsItem>(props.value));
+</script>

cool-unix/pages/demo/components/item.uvue

@@ -0,0 +1,28 @@
+<template>
+	<view class="demo-item dark:!bg-surface-800">
+		<cl-text :pt="{ className: 'text-sm text-surface-400 mb-2' }" v-if="label != ''">{{
+			label
+		}}</cl-text>
+
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+	name: "demo-item"
+});
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: ""
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.demo-item {
+	@apply p-3 rounded-xl bg-white mb-3;
+}
+</style>

cool-unix/pages/demo/components/tips.uvue

@@ -0,0 +1,17 @@
+<template>
+	<view class="bg-surface-100 dark:!bg-surface-700 rounded-lg p-3 mb-3">
+		<cl-text
+			:pt="{
+				className: 'text-sm'
+			}"
+		>
+			<slot></slot>
+		</cl-text>
+	</view>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+	name: "demo-tips"
+});
+</script>