优化细节

.vscode/template.code-snippets

@@ -0,0 +1,120 @@
+{
+	"page": {
+		"prefix": "page",
+		"scope": "vue",
+		"body": [
+			"<template>",
+			"    <cl-page>",
+			"        <view class=\"p-3\">",
+			"            $1",
+			"        </view>",
+			"    </cl-page>",
+			"</template>",
+			"",
+			"<script lang=\"ts\" setup>",
+			"import { service, router } from \"@/cool\";",
+			"",
+			"</script>",
+			"",
+			"<style lang=\"scss\" scoped>",
+			"",
+			"</style>",
+			""
+		],
+		"description": "page snippets"
+	},
+	"popup": {
+		"prefix": "popup",
+		"scope": "vue",
+		"body": [
+			"<template>",
+			"    <cl-popup v-model=\"visible\">",
+			"        <view class=\"component$1\"> </view>",
+			"    </cl-popup>",
+			"</template>",
+			"",
+			"<script lang=\"ts\" setup>",
+			"import { ref } from \"vue\";",
+			"import { service, router } from \"@/cool\";",
+			"",
+			"// 是否可见",
+			"const visible = ref(false);",
+			"",
+			"// 打开",
+			"function open() {",
+			"    visible.value = true;",
+			"}",
+			"",
+			"// 关闭",
+			"function close() {",
+			"    visible.value = false;",
+			"}",
+			"",
+			"defineExpose({",
+			"    open,",
+			"    close,",
+			"});",
+			"</script>",
+			"",
+			"<style lang=\"scss\" scoped>",
+			"",
+			"</style>",
+			""
+		],
+		"description": "popup snippets"
+	},
+	"pager": {
+		"prefix": "list-view-refresh",
+		"scope": "vue",
+		"body": [
+			"<template>",
+			"    <cl-list-view",
+			"        :data=\"listView\"",
+			"        :virtual=\"false\"",
+			"        :pt=\"{",
+			"            refresher: {",
+			"                className: 'pt-3'",
+			"            }",
+			"        }\"",
+			"        :refresher-enabled=\"true\"",
+			"        @pull=\"onPull\"",
+			"        @bottom=\"loadMore\"",
+			"    >",
+			"        <template #item=\"{ value }\">",
+			"            <view class=\"p-3\">",
+			"                $1",
+			"            </view>",
+			"        </template>",
+			"    </cl-list-view>",
+			"</template>",
+			"",
+			"<script lang=\"ts\" setup>",
+			"import { ref } from \"vue\";",
+			"import { usePager } from \"@/cool\";",
+			"import { useUi } from \"@/uni_modules/cool-ui\";",
+			"",
+			"const ui = useUi();",
+			"",
+			"const listViewRef = ref<ClListViewComponentPublicInstance | null>(null);",
+			"",
+			"const { refresh, listView, loading, loadMore } = usePager((params) => {",
+			"    return service.$1.page(params);",
+			"});",
+			"",
+			"async function onPull() {",
+			"    await refresh({ page: 1 });",
+			"    listViewRef.value!.stopRefresh();",
+			"}",
+			"",
+			"onReady(() => {",
+			"    ui.showLoading(\"加载中\");",
+			"    refresh({",
+			"        page: 1,",
+			"        size: 20,",
+			"    });",
+			"});",
+			""
+		],
+		"description": "list-view refresh snippets"
+	}
+}

pages/demo/data/list-view-refresh.uvue

@@ -2,7 +2,7 @@
 	<cl-page>
 		<cl-list-view
 			ref="listViewRef"
-			:data="data"
+			:data="listView"
 			:virtual="false"
 			:pt="{
 				refresher: {
@@ -27,10 +27,11 @@
 </template>
 
 <script lang="ts" setup>
-import { useListView, useUi, type ClListViewItem } from "@/uni_modules/cool-ui";
-import { computed, ref } from "vue";
+import { useUi } from "@/uni_modules/cool-ui";
+import { ref } from "vue";
 import { usePager } from "@/cool";
 import GoodsItem from "../components/goods-item.uvue";
+import { t } from "@/locale";
 
 const ui = useUi();
 
@@ -38,8 +39,9 @@ const listViewRef = ref<ClListViewComponentPublicInstance | null>(null);
 
 let id = 0;
 
-const { refresh, list, loading, loadMore } = usePager((params) => {
+const { refresh, list, listView, loading, loadMore } = usePager((params) => {
 	return new Promise((resolve) => {
+		// 模拟请求
 		setTimeout(() => {
 			resolve({
 				list: [
@@ -101,17 +103,14 @@ const { refresh, list, loading, loadMore } = usePager((params) => {
 	});
 });
 
-const data = computed<ClListViewItem[]>(() => {
-	return useListView(list.value);
-});
-
 async function onPull() {
 	await refresh({ page: 1 });
 	listViewRef.value!.stopRefresh();
 }
 
 onReady(() => {
-	ui.showLoading("加载中");
+	ui.showLoading(t("加载中"));
+	// 默认请求
 	refresh({});
 });
 </script>

uni_modules/cool-ui/components/cl-loadmore/cl-loadmore.uvue

@@ -16,6 +16,8 @@
 				>{{ message }}</cl-text
 			>
 		</view>
+
+		<cl-safe-area type="bottom" v-if="safeAreaBottom"></cl-safe-area>
 	</view>
 </template>
 
@@ -53,6 +55,11 @@ const props = defineProps({
 	finishText: {
 		type: String,
 		default: () => t("没有更多了")
+	},
+	// 是否显示底部安全区
+	safeAreaBottom: {
+		type: Boolean,
+		default: true
 	}
 });
 
@@ -80,7 +87,7 @@ const message = computed(() => {
 
 <style lang="scss" scoped>
 .cl-loadmore-wrapper {
-	@apply flex flex-row items-center justify-center py-2;
+	@apply flex flex-col items-center justify-center py-2;
 }
 
 .cl-loadmore {

uni_modules/cool-ui/components/cl-page/back-top.uvue

@@ -1,64 +0,0 @@
-<template>
-	<view class="back-top-wrapper" :style="{ bottom }">
-		<view
-			class="back-top"
-			:class="{
-				'is-show': visible
-			}"
-		>
-			<cl-icon name="skip-up-line" color="white" size="25px"></cl-icon>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { usePage } from "@/cool";
-
-defineOptions({
-	name: "cl-page-back-top"
-});
-
-const page = usePage();
-const { screenHeight } = uni.getWindowInfo();
-
-// 是否显示回到顶部按钮
-const visible = ref(false);
-
-// 底部距离
-const bottom = computed(() => {
-	let h = 20;
-
-	if (page.hasCustomTabBar()) {
-		h += page.getTabBarHeight();
-	}
-
-	return h + "px";
-});
-
-// 监听页面滚动
-page.onPageScroll((top) => {
-	// 控制是否显示回到顶部按钮
-	visible.value = top > screenHeight - 100;
-});
-</script>
-
-<style lang="scss" scoped>
-.back-top {
-	@apply flex flex-row items-center justify-center bg-primary-500 rounded-full;
-	width: 40px;
-	height: 40px;
-	transition-property: transform;
-	transition-duration: 0.3s;
-	transform: translateX(160rpx);
-
-	&.is-show {
-		transform: translateX(-20px);
-	}
-
-	&-wrapper {
-		@apply fixed z-50 overflow-visible;
-		right: 0;
-	}
-}
-</style>

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

@@ -6,7 +6,7 @@
 		:scroll-with-animation="true"
 		@scroll="onScroll"
 	>
-		<back-top v-if="backTop" @tap="scrollToTop"></back-top>
+		<cl-back-top v-if="backTop" @tap="scrollToTop"></cl-back-top>
 		<theme></theme>
 		<ui></ui>
 		<slot></slot>
@@ -14,7 +14,7 @@
 	<!-- #endif -->
 
 	<!-- #ifndef APP -->
-	<back-top v-if="backTop" @tap="scrollToTop"></back-top>
+	<cl-back-top v-if="backTop" @tap="scrollToTop"></cl-back-top>
 	<theme></theme>
 	<ui></ui>
 	<slot></slot>
@@ -24,7 +24,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
 import { router, usePage } from "@/cool";
-import BackTop from "./back-top.uvue";
 import Theme from "./theme.uvue";
 import Ui from "./ui.uvue";
 import { locale, t } from "@/locale";
@@ -34,7 +33,7 @@ defineOptions({
 	name: "cl-page"
 });
 
-const props = defineProps({
+defineProps({
 	// 是否显示回到顶部按钮
 	backTop: {
 		type: Boolean,

uni_modules/cool-ui/types/index.ts

@@ -111,6 +111,22 @@ export type ClListViewItem = {
 	children?: ClListViewItem[];
 };
 
+export type ClListViewGroup = {
+	index: string;
+	children: ClListViewItem[];
+};
+
+export type ClListViewVirtualItem = {
+	key: string;
+	type: "header" | "item";
+	index: number;
+	top: number;
+	height: number;
+	data: ClListViewItem;
+};
+
+export type ClListViewRefresherStatus = "default" | "pulling" | "refreshing";
+
 export type ClCascaderOption = ClListViewItem;
 
 export type ClPopupDirection = "top" | "right" | "bottom" | "center" | "left";