### Basic Usage Example

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/sign.md

A simple example demonstrating how to use the Sign component in its default configuration.

```APIDOC
## Basic Usage

### Description
Render a basic Sign component.

### Markup
```html
<cl-sign></cl-sign>
```
```

--------------------------------

### Full Waterfall Example with Image Display, Likes, and Infinite Scroll

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/data/waterfall.md

This example demonstrates a complete waterfall implementation. It includes image rendering, a like button, ad display, and infinite scrolling for loading more content. Ensure you have the necessary components and setup for a functional demo.

```html
<template>
	<cl-page back-top>
		<view class="py-2">
			<cl-waterfall ref="waterfallRef" :column="2">
				<template #item="{ item, index }">
					<view class="bg-white mb-3 rounded-xl dark:!bg-gray-800 relative">
						<!-- 图片展示 -->
						<image :src="item.image" mode="widthFix" class="w-full rounded-xl"></image>

						<!-- 广告标识 -->
						<template v-if="item.isAd">
							<cl-tag :pt="{ className: 'absolute left-1 top-1 scale-75' }">
								广告
							</cl-tag>
							<cl-icon
								color="white"
								name="close-line"
								:pt="{ className: 'absolute right-2 top-2' }"
								@tap="del(item.id as number)"
							></cl-icon>
						</template>

						<!-- 内容区域 -->
						<view class="p-3" v-else>
							<cl-text>{{ item.title }}</cl-text>

							<!-- 点赞区域 -->
							<cl-row class="mt-2" :pt="{ className: 'justify-end items-center' }">
								<cl-icon name="heart-line"></cl-icon>
								<cl-text :pt="{ className: '!text-sm ml-1' }">
									{{ item.likeCount }}
								</cl-text>
							</cl-row>
						</view>
					</view>
				</template>
			</cl-waterfall>

			<!-- 加载更多指示器 -->
			<cl-loadmore :loading="loading"></cl-loadmore>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { random } from "@/.cool";
	import { onMounted, ref } from "vue";

	const waterfallRef = ref<ClWaterfallComponentPublicInstance | null>(null);
	const loading = ref(false);

	let id = 0;

	// 生成模拟数据
	function generateMockData() {
		return [
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
				image: "/static/demo/1.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
				image: "/static/demo/2.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
				image: "/static/demo/3.jpg"
			},
			{
				id: id++,
				image: "/static/demo/4.jpg",
				isAd: true
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
				image: "/static/demo/5.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
				image: "/static/demo/6.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
				image: "/static/demo/7.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
				image: "/static/demo/8.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
				image: "/static/demo/9.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
				image: "/static/demo/10.jpg"
			}
		];
	}

	// 刷新数据
	function refresh() {
		const items = generateMockData();
		waterfallRef.value!.append(items);
	}

	// 删除指定项目
	function del(id: number) {
		waterfallRef.value!.remove(id);
	}

	// 触底加载更多
	onReachBottom(() => {
		if (loading.value) return;

		loading.value = true;

		setTimeout(() => {
			refresh();
			loading.value = false;
		}, 1000);
	});

	// 初始化数据
	onMounted(() => {
		refresh();
	});
</script>
```

--------------------------------

### Setting Width and Height Example

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/sign.md

Example of dynamically setting the width and height of the Sign component.

```APIDOC
## Setting Width and Height

### Description
Configure the `width` and `height` props to adjust the canvas size.

### Markup
```vue
<template>
  <cl-sign :width="width" :height="height"></cl-sign>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const height = ref(0);
const width = ref(0);

onMounted(() => {
  const { windowWidth, windowHeight } = uni.getWindowInfo();
  height.value = windowHeight;
  width.value = windowWidth;
});
</script>
```
```

--------------------------------

### Complete Example

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/data/waterfall.md

A full example demonstrating the Waterfall component with image display, liking functionality, and infinite scrolling.

```APIDOC
## Complete Example

This example shows a complete waterfall implementation with image display, like functionality, and infinite scrolling:

```html
<template>
	<cl-page back-top>
		<view class="py-2">
			<cl-waterfall ref="waterfallRef" :column="2">
				<template #item="{ item, index }">
					<view class="bg-white mb-3 rounded-xl dark:!bg-gray-800 relative">
						<!-- 图片展示 -->
						<image :src="item.image" mode="widthFix" class="w-full rounded-xl"></image>

						<!-- 广告标识 -->
						<template v-if="item.isAd">
							<cl-tag :pt="{ className: 'absolute left-1 top-1 scale-75' }">
								广告
							</cl-tag>
							<cl-icon
								color="white"
								name="close-line"
								:pt="{ className: 'absolute right-2 top-2' }"
								@tap="del(item.id as number)"
							></cl-icon>
						</template>

						<!-- 内容区域 -->
						<view class="p-3" v-else>
							<cl-text>{{ item.title }}</cl-text>

							<!-- 点赞区域 -->
							<cl-row class="mt-2" :pt="{ className: 'justify-end items-center' }">
								<cl-icon name="heart-line"></cl-icon>
								<cl-text :pt="{ className: '!text-sm ml-1' }">
									{{ item.likeCount }}
								</cl-text>
							</cl-row>
						</view>
					</view>
				</template>
			</cl-waterfall>

			<!-- 加载更多指示器 -->
			<cl-loadmore :loading="loading"></cl-loadmore>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { random } from "@/.cool";
	import { onMounted, ref } from "vue";

	const waterfallRef = ref<ClWaterfallComponentPublicInstance | null>(null);
	const loading = ref(false);

	let id = 0;

	// 生成模拟数据
	function generateMockData() {
		return [
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
				image: "/static/demo/1.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
				image: "/static/demo/2.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
				image: "/static/demo/3.jpg"
			},
			{
				id: id++,
				image: "/static/demo/4.jpg",
				isAd: true
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
				image: "/static/demo/5.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
				image: "/static/demo/6.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
				image: "/static/demo/7.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
				image: "/static/demo/8.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
				image: "/static/demo/9.jpg"
			},
			{
				id: id++,
				likeCount: random(100, 1000),
				title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
				image: "/static/demo/10.jpg"
			}
		];
	}

	// 刷新数据
	function refresh() {
		const items = generateMockData();
		waterfallRef.value!.append(items);
	}

	// 删除指定项目
	function del(id: number) {
		waterfallRef.value!.remove(id);
	}

	// 触底加载更多
	onReachBottom(() => {
		if (loading.value) return;

		loading.value = true;

		setTimeout(() => {
			refresh();
			loading.value = false;
		}, 1000);
	});

	// 初始化数据
	onMounted(() => {
		refresh();
	});
</script>
```
```

--------------------------------

### Install @cool-vue/unix with npm

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/packages/unix.md

Use this command to install the package using npm.

```bash
npm install @cool-vue/unix
```

--------------------------------

### Install @cool-vue/unix with pnpm

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/packages/unix.md

Use this command to install the package using pnpm.

```bash
pnpm add @cool-vue/unix
```

--------------------------------

### Clone and Install Project Dependencies

Source: https://context7.com/cool-team-official/cool-unix-docs/llms.txt

Clone the Cool Unix project from GitHub and install its dependencies using pnpm.

```shell
# Clone from GitHub
git clone https://github.com/cool-team-official/cool-unix.git

# Install dependencies (pnpm recommended)
pnpm i

# Open in HBuilderX and run to any platform:
# - H5 (browser)
# - WeChat Mini Program
# - Android / iOS App
# - HarmonyOS
```

--------------------------------

### Usage Examples

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/basic/image.md

Examples demonstrating how to use the cl-image component, including custom slot content, image size adjustments, and enabling the preview feature.

```APIDOC
## Usage Examples

### Custom Slot Content

```html
<!-- Placeholder for empty data -->
<cl-image src="">
	<template #placeholder>
		<text>No image available</text>
	</template>
</cl-image>

<!-- Error prompt for loading failure -->
<cl-image src="invalid-url">
	<template #error>
		<text>Image failed to load</text>
	</template>
</cl-image>
```

### Custom Image Dimensions

```html
<cl-image :height="100" :width="100"></cl-image> <cl-image height="50px" width="50px"></cl-image>
```

### Image Preview Functionality

Configuring the `previewList` attribute, the component will automatically match the current `src` as the first image in the preview list.

```html
<cl-image :preview-list="previewList"></cl-image>
```
```

--------------------------------

### Install cool-vue/unix-cli Globally

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/introduce/uni-components.md

Install the command-line interface tool globally using npm or pnpm. This tool is used for project initialization.

```shell
npm install -g @cool-vue/unix-cli
```

```shell
pnpm add -g @cool-vue/unix-cli
```

--------------------------------

### Install Dependencies Manually

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/introduce/uni-components.md

If dependencies are not automatically installed after initialization, manually run these commands. pnpm is recommended for speed and space efficiency.

```shell
# Recommended to use pnpm (faster, saves space)
pnpm i
```

```shell
# Or use other package managers
yarn
```

--------------------------------

### ListView with Pull-to-Refresh and Load More

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/data/list-view-refresh.md

This example demonstrates a complete ListView setup with pull-to-refresh and load-more functionality. It uses the usePager hook to manage data fetching and rendering. Ensure `refresher-enabled` is true to activate pull-to-refresh and `@pull` and `@bottom` events are handled for refresh and load more actions respectively.

```vue
<template>
	<cl-page>
		<cl-list-view
			ref="listViewRef"
			:data="listView"
			:virtual="false"
			:pt="{
				refresher: {
					className: 'pt-3'
				}
			}"
			:refresher-enabled="true"
			@pull="onPull"
			@bottom="loadMore"
		>
			<template #item="{ value }">
				<goods-item :value="value"></goods-item>
			</template>

			<template #bottom>
				<view class="py-3">
					<cl-loadmore :loading="loading" v-if="list.length > 0"></cl-loadmore>
				</view>
			</template>
		</cl-list-view>
	</cl-page>
</template>

<script lang="ts" setup>
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();

const listViewRef = ref<ClListViewComponentPublicInstance | null>(null);

let id = 0;

const { refresh, list, listView, loading, loadMore } = usePager((params, { render }) => {
	// 模拟请求
	setTimeout(() => {
		render({
			list: [
				{
					id: id++,
					title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
					image: "https://unix.cool-js.com/images/demo/1.jpg"
				},
				{
					id: id++,
					title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
					image: "https://unix.cool-js.com/images/demo/2.jpg"
				},
				{
					id: id++,
					title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
					image: "https://unix.cool-js.com/images/demo/3.jpg"
				}
			],
			pagination: {
				page: params["page"],
				size: params["size"],
				total: 100
			}
		});

		ui.hideLoading();
	}, 1000);
});

async function onPull() {
	await refresh({ page: 1 });
	listViewRef.value!.stopRefresh();
}

onReady(() => {
	ui.showLoading(t("加载中"));
	// 默认请求
	refresh({});
});
</script>
```

--------------------------------

### SelectSeat Component Basic Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/select-seat.md

A fundamental example demonstrating how to use the SelectSeat component with basic configuration.

```APIDOC
## Example: Basic Usage

```html
<template>
	<cl-select-seat
		v-model="selectedSeats"
		:rows="10"
		:cols="12"
		:width="350"
		:height="400"
	></cl-select-seat>
</template>

<script lang="ts" setup>
	import type { ClSelectSeatValue } from "@/uni_modules/cool-ui/types";

	const selectedSeats = ref<ClSelectSeatValue[]>([]);
</script>
```
```

--------------------------------

### UseUi Methods Examples

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/basic/page.md

Demonstrates how to use various methods of the useUi composable for showing confirmations, tips, toasts, and loading indicators.

```typescript
// 显示确认弹窗
ui.showConfirm({
	title: "提示",
	message: "确定要提交吗？"
});

// 显示提示信息
ui.showTips("订单已结算成功", () => {
	router.back();
});

// 显示 Toast 消息
ui.showToast({
	message: "Hello"
});

// 显示 Loading
ui.showLoading("加载中");

// 隐藏 Loading
ui.hideLoading();
```

--------------------------------

### Initialize Project Configuration

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/introduce/uni-components.md

Run this command in your project's root directory after installing the CLI. It automatically integrates necessary configurations and dependencies.

```shell
unix-init
```

--------------------------------

### FilterBar Combined Example with Styling

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/data/filter-bar.md

A comprehensive example combining select, sort, and switch filter items, along with a custom filter button. Demonstrates using the 'pt' prop for custom styling on the select item.

```html
<cl-filter-bar>
  <!-- 下拉框 -->
  <cl-filter-item
    label="综合排序"
    type="select"
    :value="1"
    :options="coreOptions"
    :pt="{
        className: 'w-[220rpx] !flex-none'
    }"
    @change="onOptionsChange"
  ></cl-filter-item>

  <!-- 排序 -->
  <cl-filter-item
    label="销量"
    type="sort"
    value="desc"
    @change="onSortChange"
  ></cl-filter-item>

  <!-- 开关 -->
  <cl-filter-item
    label="国补"
    type="switch"
    :value="false"
    @change="onSwitchChange"
  ></cl-filter-item>

  <!-- 自定义 -->
  <view
    class="flex flex-row items-center justify-center flex-1"
    @tap="openFilter"
  >
    <cl-text>筛选</cl-text>
    <cl-icon name="filter-line"></cl-icon>
  </view>
</cl-filter-bar>

<script lang="ts" setup>
  // 下拉框的必须定义类型 ClSelectOption[]
  const coreOptions = ref<ClSelectOption[]>([
    {
      label: "综合排序",
      value: 1,
    },
    {
      label: "价格从高到底",
      value: 2,
    },
    {
      label: "价格从低到高",
      value: 3,
    },
  ]);
</script>
```

--------------------------------

### Calling Component Methods Example

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/sign.md

Demonstrates how to call the `clear` and `toPng` methods on the Sign component instance.

```APIDOC
## Calling Component Methods

### Description
Access and invoke methods of the Sign component instance using a template ref.

### Markup
```vue
<template>
  <cl-sign ref="signRef"></cl-sign>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Assuming ClSignComponentPublicInstance is defined elsewhere
// import type { ClSignComponentPublicInstance } from './types'; 

const signRef = ref<any | null>(null); // Use 'any' if type is not available

function clearSignature() {
  if (signRef.value) {
    signRef.value.clear();
  }
}

function generateAndPreview() {
  if (signRef.value) {
    signRef.value.toPng().then((url: string) => {
      uni.previewImage({
        urls: [url],
      });
    });
  }
}
</script>
```
```

--------------------------------

### Basic SelectSeat Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/select-seat.md

Demonstrates the basic setup of the SelectSeat component with specified rows, columns, and dimensions. Ensure to import the necessary type for v-model.

```html
<template>
	<cl-select-seat
		v-model="selectedSeats"
		:rows="10"
		:cols="12"
		:width="350"
		:height="400"
	></cl-select-seat>
</template>

<script lang="ts" setup>
	import type { ClSelectSeatValue } from "@/uni_modules/cool-ui/types";

	const selectedSeats = ref<ClSelectSeatValue[]>([]);
</script>
```

--------------------------------

### Basic Pagination Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/data/pagination.md

Use this for the simplest pagination setup. Set the total number of data items to automatically calculate the number of pages.

```html
<cl-pagination v-model="page" :total="24"></cl-pagination>
```

--------------------------------

### SelectSeat Component with Image Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/select-seat.md

An example illustrating how to use custom images for seat selection, including normal and selected states.

```APIDOC
## Example: Using Images

This example shows how to replace the default seat graphics with custom images for both normal and selected states.

```html
<cl-select-seat
	v-model="selectedSeats"
	:rows="8"
	:cols="10"
	:width="350"
	:height="300"
	image="/static/seat-normal.png"
	selected-image="/static/seat-selected.png"
></cl-select-seat>
```
```

--------------------------------

### first

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/comm.md

Gets the first element of an array.

```APIDOC
## first

### Description
Gets the first element of an array.

### Usage
```ts
first([1, 2, 3]); // 1
first([]); // null
```
```

--------------------------------

### cl-form and cl-form-item: Form Structure and Validation Setup

Source: https://context7.com/cool-team-official/cool-unix-docs/llms.txt

Sets up a form using cl-form and cl-form-item components, defining data models, validation rules using a Map, and integrating cl-upload and cl-input.

```vue
<template>
  <cl-form ref="formRef" v-model="formData" :rules="rules">
    <cl-form-item label="Avatar" prop="avatarUrl">
      <cl-upload v-model="formData.avatarUrl"></cl-upload>
    </cl-form-item>

    <cl-form-item label="Username" prop="nickName" required>
      <cl-input v-model="formData.nickName" placeholder="Enter username" clearable></cl-input>
    </cl-form-item>

    <cl-form-item label="Email" prop="email" required>
      <cl-input v-model="formData.email" placeholder="Enter email"></cl-input>
    </cl-form-item>

    <cl-button @tap="submit" type="primary">Submit</cl-button>
    <cl-button @tap="reset" type="light">Reset</cl-button>
  </cl-form>
</template>

<script setup lang="ts">
import { ref, type Ref } from "vue";
import { type ClFormRule, useForm } from "@/uni_modules/cool-ui";

type FormData = {
  avatarUrl: string;
  nickName: string;
  email: string;
};

const formData = ref<FormData>({
  avatarUrl: "",
  nickName: "",
  email: ""
}) as Ref<FormData>;

const rules = new Map<string, ClFormRule[]>([
  ["nickName", [
    { required: true, message: "Username is required" },
    { min: 3, max: 20, message: "Username must be 3-20 characters" }
  ]],
  ["email", [
    { required: true, message: "Email is required" },
    { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: "Invalid email format" }
  ]]
]);

const { formRef, validate, clearValidate } = useForm();

function submit() {
  validate((valid, errors) => {
    if (valid) {
      console.log("Form data:", formData.value);
    } else {
      console.log("Validation errors:", errors);
    }
  });
}

function reset() {
  formData.value = { avatarUrl: "", nickName: "", email: "" };
  clearValidate();
}
</script>
```

--------------------------------

### Passing Parameters During Navigation

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/router.md

Shows how to pass query parameters when navigating to a new page using the `push` method. It also includes an example of how to receive these parameters in the target page.

```typescript
router.push({
	path: "/pages/user/profile",
	query: {
		id: 123,
		name: "张三"
	}
});

// 在目标页面接收参数
const query = router.query();
console.log(query.id); // 123
console.log(query.name); // '张三'
```

--------------------------------

### Upload Multiple Files with Progress

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/upload.md

Batch upload multiple files by iterating through the selected files and calling `uploadFile` for each. This example demonstrates how to monitor the upload progress for each individual file.

```typescript
import { uploadFile } from "@/.cool";

function handleAdvancedUpload() {
	uni.chooseImage({
		count: 9, // 最多选择9个文件
		success(res) {
			if (Array.isArray(res.tempFiles)) {
				// 批量上传多个文件
				res.tempFiles.forEach((file, index) => {
					uploadFile(file, {
						// 监听上传进度
						onProgressUpdate: ({ progress,
							totalBytesSent,
							totalBytesExpectedToSend
						}) => {
							console.log(`文件${index + 1}上传进度：${progress}%`);
							console.log(
								`已上传：${totalBytesSent} / 总大小：${totalBytesExpectedToSend}`
						);
						}
					})
						.then((url) => {
							console.log(`文件${index + 1}上传成功：`, url);
						})
						.catch((error) => {
							console.error(`文件${index + 1}上传失败：`, error);
						});
				});
			}
		},
		fail(error) {
			console.error("选择文件失败：", error);
		}
	});
}
```

--------------------------------

### SelectSeat Component with Custom Seat Data

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/select-seat.md

Example showcasing how to customize individual seat properties like sold status, empty seats, or disabled seats.

```APIDOC
## Example: Custom Seat Data

This example demonstrates how to set specific seats as sold (disabled), empty, or with custom background colors.

```html
<template>
	<cl-select-seat
		v-model="selectedSeats"
		:rows="5"
		:cols="8"
		:width="350"
		:height="250"
		:seats="seats"
	></cl-select-seat>
</template>

<script lang="ts" setup>
	import type { ClSelectSeatItem, ClSelectSeatValue } from "@/uni_modules/cool-ui/types";

	const selectedSeats = ref<ClSelectSeatValue[]>([]);

	const seats = ref<ClSelectSeatItem[]>([]);

	// Initialize seats
	for (let row = 0; row < 5; row++) {
		for (let col = 0; col < 8; col++) {
			const seat: ClSelectSeatItem = { row, col };

			// Set some seats as sold (disabled)
			if ((row === 2 && col === 3) || (row === 2 && col === 4)) {
				seat.disabled = true;
				seat.bgColor = "#ef4444";
			}

			// Set corridor (empty seat)
			if (col === 4 && row < 2) {
				seat.empty = true;
			}

			seats.value.push(seat);
		}
	}
</script>
```
```

--------------------------------

### get

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/comm.md

Gets the value at `path` of `object`. If the resolved value is `undefined`, the `defaultValue` is returned.

```APIDOC
## get

### Description
Gets the value at `path` of `object`. If the resolved value is `undefined`, the `defaultValue` is returned.

### Usage
```ts
get({ a: { b: 1 } }, "a.b"); // 1
get({ a: { b: 1 } }, "a.c", "default"); // 'default'
```
```

--------------------------------

### Brush Effect Example

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/sign.md

Example of enabling the brush effect for a more natural drawing experience.

```APIDOC
## Brush Effect

### Description
Enable the brush effect by setting the `enable-brush` prop.

### Markup
```html
<cl-sign enable-brush></cl-sign>
```
```

--------------------------------

### Correctly Get Window Height in uni-app

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/introduce/help.md

Retrieve window dimensions after the component has mounted to ensure accurate values. Avoid getting 0 by accessing `uni.getWindowInfo()` in `onReady` or `onMounted`.

```typescript
// ❌ 问题：获取的高度为 0
const { windowHeight } = uni.getWindowInfo();
```

```typescript
// ✅ 解决方案1：使用屏幕高度
onReady(() => {
	const { screenHeight } = uni.getWindowInfo();
});
```

```typescript
// ✅ 解决方案2：使用屏幕高度，手动减去导航了、安全区域等
const { screenHeight } = uni.getWindowInfo();
```

--------------------------------

### 获取对象的属性值

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/comm.md

使用 get 函数安全地获取对象嵌套的属性值。支持路径字符串和默认值。

```ts
get({ a: { b: 1 } }, "a.b"); // 1
get({ a: { b: 1 } }, "a.c", "default"); // 'default'
```

--------------------------------

### Basic Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/feedback/confirm.md

Demonstrates how to open a basic confirmation dialog and handle user actions through the `callback` parameter. The `action` parameter in the callback indicates whether the user confirmed, canceled, or closed the dialog.

```APIDOC
## ui.showConfirm

### Description
Opens a confirmation dialog to get user confirmation for an important action.

### Method
`ui.showConfirm(options: ClConfirmOptions)`

### Parameters
#### Request Body
- **title** (string) - Required - The title of the confirmation dialog.
- **message** (string) - Required - The message content to display to the user.
- **confirmText** (string) - Optional - The text for the confirm button. Defaults to "确认".
- **showConfirm** (boolean) - Optional - Whether to show the confirm button. Defaults to true.
- **cancelText** (string) - Optional - The text for the cancel button. Defaults to "取消".
- **showCancel** (boolean) - Optional - Whether to show the cancel button. Defaults to true.
- **duration** (number) - Optional - The duration in milliseconds for the dialog to auto-close. Defaults to 0 (no auto-close).
- **callback** (function) - Optional - A callback function that is executed when the dialog is closed. It receives the action performed ('confirm', 'cancel', or 'close').
- **beforeClose** (function) - Optional - A hook function executed before the dialog closes. It receives the action and an event object with methods to control the closing process.

### Request Example
```javascript
import { useUi } from "@/uni_modules/cool-ui";

const ui = useUi();

ui.showConfirm({
  title: "删除确认",
  message: "确定要删除这条记录吗？删除后不可恢复。",
  callback(action) {
    if (action === "confirm") {
      console.log("用户确认删除");
      // 执行删除操作
    }
  },
});
```
```

--------------------------------

### Basic Button Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/basic/button.md

Demonstrates the simplest way to use the button component with default styling.

```html
<cl-button>普通按钮</cl-button>
```

--------------------------------

### last

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/comm.md

Gets the last element of an array.

```APIDOC
## last

### Description
Gets the last element of an array.

### Usage
```ts
last([1, 2, 3]); // 3
last([]); // null
```
```

--------------------------------

### Basic Popup Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/feedback/popup.md

Demonstrates the fundamental usage of the Popup component, including how to open it via a button click and display basic content.

```html
<cl-button @tap="open">打开弹窗</cl-button>

<cl-popup v-model="visible" title="诗词欣赏">
  <view class="p-4">
    <cl-text>
      春江花月夜，花草复青青。<br />
      江水流不尽，月光照无情。<br />
      夜来风雨急，愁思满心头。<br />
      何时再相见，共赏月明楼。
    </cl-text>
  </view>
</cl-popup>

<script lang="ts" setup>
  import { ref } from "vue";

  const visible = ref(false);

  function open() {
    visible.value = true;
  }
</script>
```

--------------------------------

### nth

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/comm.md

Gets the element at index `n` from an array.

```APIDOC
## nth

### Description
Gets the element at index `n` from an array.

### Usage
```ts
nth([1, 2, 3], 1); // 2
nth([1, 2, 3], -1); // 3
```
```

--------------------------------

### Different Navigation Modes

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/router.md

Explains how to use different navigation modes like `navigateTo`, `redirectTo`, `reLaunch`, and `switchTab`.

```APIDOC
## Different Navigation Modes

### Description
Supports various navigation modes for different routing scenarios.

### Modes
- `navigateTo`: Keep the current page and navigate to a new page (default).
- `redirectTo`: Close the current page and navigate to a new page.
- `reLaunch`: Close all pages and navigate to a new page.
- `switchTab`: Navigate to a tab page.

### Request Example
```typescript
// Navigate to a new page, keeping the current one
router.push({
	path: "/pages/detail",
	mode: "navigateTo"
});

// Close the current page and navigate
router.push({
	path: "/pages/detail",
	mode: "redirectTo"
});

// Close all pages and navigate
router.push({
	path: "/pages/home",
	mode: "reLaunch"
});

// Navigate to a tab page
router.push({
	path: "/pages/tabbar/home",
	mode: "switchTab"
});
```
```

--------------------------------

### Get Basename

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/path.md

Use this function to extract the last part of a path.

```typescript
basename("a/b/c.txt"); // "c.txt"
```

--------------------------------

### Basic List Item Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/data/list.md

Demonstrates the simplest way to use the cl-list-item component, displaying a label and associated text content.

```html
<cl-list-item label="用户名">
	<cl-text>神仙都没用</cl-text>
</cl-list-item>
```

--------------------------------

### Extract Filename

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/path.md

Use this function to get the filename from a given path.

```typescript
filename("a/b/c.txt"); // "c"
```

--------------------------------

### Get File Extension

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/path.md

Use this function to retrieve the extension of a file from its path.

```typescript
extname("a/b/c.txt"); // "txt"
```

--------------------------------

### Basic Footer Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/layout/footer.md

Demonstrates the basic implementation of the Footer component with a primary action button.

```html
<cl-list>
	<cl-list-item :label="`列表项 ${i}`" v-for="i in 50" :key="i"></cl-list-item>
</cl-list>

<cl-footer>
	<cl-button type="primary" size="large" @tap="handleSubmit"> 提交 </cl-button>
</cl-footer>
```

--------------------------------

### get

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/storage.md

Retrieves stored data by its key. Returns null if the data does not exist or has expired.

```APIDOC
## get

### Description
Retrieves stored data by its key.

### Method
`storage.get(key: string): any | null`

### Parameters
#### Path Parameters
- **key** (string) - Required - The key of the data to retrieve.

### Response
#### Success Response (200)
- **data** (any) - The retrieved data, or null if not found or expired.

### Request Example
```ts
const userData = storage.get("user");
if (userData != null) {
  console.log(userData);
}
```
```

--------------------------------

### Get URL Parameter

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/path.md

Use this function to retrieve the value of a specific URL parameter.

```typescript
getUrlParam("a"); // "1"
```

--------------------------------

### Basic SelectTime Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/form/select-time.md

Demonstrates the most basic usage of the SelectTime component. Requires a ref to bind the selected time value.

```html
<template>
  <cl-select-time v-model="selectedTime"></cl-select-time>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const selectedTime = ref("");
</script>
```

--------------------------------

### Get Stored Data

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/storage.md

Retrieves data from storage. Check for null to ensure data exists before use.

```typescript
const userData = storage.get("user");
if (userData != null) {
  console.log(userData);
}
```

--------------------------------

### Basic Page Navigation

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/router.md

Demonstrates how to perform simple page navigation using the `to` and `push` methods.

```APIDOC
## Basic Page Navigation

### Description
Provides methods for simple page navigation.

### Methods
- `to(path: string)`: Quickly navigates to a page using the default navigation mode.
- `push(options: PushOptions)`: Performs a full-featured route jump with various modes and parameters.

### Request Example
```typescript
import { router } from "@/.cool";

// Simple page navigation
router.to("/pages/user/profile");

// Equivalent to uni.navigateTo
router.push({
	path: "/pages/user/profile"
});
```
```

--------------------------------

### Basic Usage of InputOtp

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/form/input-otp.md

This is the default configuration for the InputOtp component.

```html
<cl-input-otp></cl-input-otp>
```

--------------------------------

### SelectSeat Component Methods

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/select-seat.md

This section details the methods available for interacting with the SelectSeat component programmatically.

```APIDOC
## Methods

| Method Name | Description | Parameters | Returns |
|---|---|---|---|
| `setSeat` | Sets the properties of a specific seat. | `(row: number, col: number, data: UTSJSONObject)` | - |
| `getSeats` | Retrieves the data for all seats. | - | `ClSelectSeatItem[]` |
| `draw` | Redraws the canvas. | - | -
```

--------------------------------

### Get All Storage Info

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/utils/storage.md

Retrieves information about all currently stored data. Useful for debugging or monitoring storage usage.

```typescript
const allData = storage.info();
console.log("所有存储数据：", allData);
```

--------------------------------

### Page Stack Operations

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/router.md

Methods for interacting with the page stack, including getting current page info and all page instances.

```APIDOC
## Page Stack Operations

### Description
Provides access to information about the current page and the entire page stack.

### Methods
- `route()`: Gets the current active route page instance.
- `getPages()`: Retrieves all page instances in the current page stack.

### Usage Example
```typescript
// Get current page information
const current = router.route();
console.log("Current page info:", current);

// Get all page instances
const pages = router.getPages();
console.log("Page stack depth:", pages.length);
```
```

--------------------------------

### Basic SlideVerify Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/other/slide-verify.md

Demonstrates basic integration using v-model for status binding and event listeners for success and failure callbacks.

```html
<cl-slide-verify v-model="status" @success="onSuccess" @fail="onFail"></cl-slide-verify>
```

--------------------------------

### Get Dictionary List

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/guide/cool/store.md

Retrieve a list of dictionary items for a specific type, such as 'brand', using `dict.get()`. Requires `useStore` import.

```typescript
import { useStore } from "@/.cool";

const { dict } = useStore();

// 获取品牌字典列表
const brandList = dict.get("brand");
console.log(brandList);

/* 输出示例：
[
  {
    id: 1,
    label: "COOL",
    value: 1,
    orderNum: 1
  },
  {
    id: 2,
    label: "闪酷",
    value: 2,
    orderNum: 2
  }
]
*/
```

--------------------------------

### Basic Image with Aspect Fill Mode

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/basic/image.md

Demonstrates the basic usage of the cl-image component with the 'aspectFill' mode for image cropping and scaling.

```html
<cl-image mode="aspectFill"></cl-image>
```

--------------------------------

### Initialize usePage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/basic/page.md

Import and initialize the usePage composable function for page-related operations such as getting the scroll position or scrolling to a specific point.

```typescript
import { usePage } from "@/uni_modules/cool-ui";

const page = usePage();
```

--------------------------------

### cl-input: Basic Usage and Password Mode

Source: https://context7.com/cool-team-official/cool-unix-docs/llms.txt

Illustrates the basic usage of the cl-input component for text input and password fields, including placeholder and v-model binding.

```html
<!-- Basic usage -->
<cl-input v-model="value" placeholder="Enter text"></cl-input>
```

```html
<!-- Password -->
<cl-input v-model="password" password placeholder="Password"></cl-input>
```

--------------------------------

### Basic Upload Usage

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/form/upload.md

Demonstrates the simplest way to use the upload component, binding a string variable to store the file URL.

```html
<cl-upload v-model="url"></cl-upload>
```

--------------------------------

### InputOtp with Custom Length

Source: https://github.com/cool-team-official/cool-unix-docs/blob/main/src/components/form/input-otp.md

Customize the number of digits for the OTP input using the `length` prop. This example sets the length to 6.

```html
<cl-input-otp :length="6"></cl-input-otp>
```