Cool Unix

https://unix.cool-js.com/src/
Admin
Cool Unix is a modern, open-source cross-platform application development scaffold based on the...
Tokens:131,798
Snippets:510
Trust Score:4.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Project Dependencies

Source: https://unix.cool-js.com/src/introduce/quick

These commands install the project's dependencies. It's recommended to use pnpm for faster installation and less disk space usage.

```shell
# Recommended to use pnpm (faster, saves space)
pnpm i
# Or use other package managers
npm install
# yarn
```

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

### Clone Project from GitHub

Source: https://unix.cool-js.com/src/introduce/quick

This command clones the Cool Unix project repository from GitHub using Git.

```shell
git clone https://github.com/cool-team-official/cool-unix.git
```

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

### Clone Project from Gitee

Source: https://unix.cool-js.com/src/introduce/quick

This command clones the Cool Unix project repository from Gitee using Git.

```shell
git clone https://gitee.com/cool-team-official/cool-unix.git
```

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

### Install Cool Translation Tool Globally

Source: https://unix.cool-js.com/src/introduce/i18n

Provides instructions for globally installing the Cool translation command-line tool using either pnpm or npm. This tool is essential for managing and generating translation files.

```bash
# 全局安装翻译工具
pnpm i @cool-vue/ai -g
# 或使用 npm
npm i @cool-vue/ai -g
```

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

### ListView Basic Usage Example

Source: https://unix.cool-js.com/src/components/data/list-view

Demonstrates the basic usage of the ListView component with static data. It shows how to initialize the data using `useListView` and render it in the template.

```html
<cl-list-view :data="data"> </cl-list-view>
<script lang="ts" setup>
  data.value = useListView([
    {
      index: "F",
      label: "福建",
    },
    {
      index: "G",
      label: "广东",
    },
    {
      index: "J",
      label: "江西",
    },
    {
      index: "B",
      label: "北京",
    },
  ]);
</script>
```

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

### Dictionary Store: Get Dictionary List

Source: https://unix.cool-js.com/src/guide/cool/store

Shows how to retrieve a list of dictionary items for a specific type, such as 'brand', using the `dict.get()` method. The example logs the retrieved list, which contains items with `id`, `label`, `value`, and `orderNum` properties.

```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
  }
]
*/
```

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

### Avatar Combined Example

Source: https://unix.cool-js.com/src/components/data/avatar

Presents a combined example of the Avatar component, featuring a large circular avatar with a custom icon placeholder and specific styling applied through the `pt` object. This showcases advanced customization options.

```html
<cl-avatar
  :size="150"
  rounded
  :pt="{
    className: 'custom-avatar',
    icon: {
        size: 80,
        name: 'account-circle-line'
    }
}"
></cl-avatar>
```

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

### Skeleton: Button Example

Source: https://unix.cool-js.com/src/components/status/skeleton

Illustrates how to use the Skeleton component to display a placeholder for buttons. This example shows how to render button-like skeletons for primary and plain button styles.

```html
<view class="flex flex-row">
  <cl-skeleton type="button" loading>
    <cl-button>立即购买</cl-button>
  </cl-skeleton>
  <cl-skeleton type="button" loading class="ml-3">
    <cl-button type="plain">加入购物车</cl-button>
  </cl-skeleton>
</view>
```

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

### Skeleton: Image Example

Source: https://unix.cool-js.com/src/components/status/skeleton

Shows how to use the Skeleton component to display a placeholder for rectangular images during the loading process. It includes a sample image source.

```html
<cl-skeleton type="image" loading>
  <cl-image
    src="https://uni-docs.cool-js.com/demo/pages/demo/static/bg1.png"
    width="200"
    height="150"
  ></cl-image>
</cl-skeleton>
```

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

### Cool Unix Loading Component Example

Source: https://unix.cool-js.com/src/components/basic/loading

Demonstrates the basic usage of the cl-loading component in Cool Unix. This component is used to display a loading indicator. It accepts parameters for styling and state management.

```html
<cl-loading></cl-loading>
```

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

### Vue.js Image Cropper Example

Source: https://unix.cool-js.com/src/components/other/cropper

This example demonstrates how to use the Cool Unix Cropper component in a Vue.js application. It shows how to trigger image selection, open the cropper, handle the cropping result, and load events. It utilizes `uni.chooseImage` for selecting images and `uni.previewImage` for displaying the cropped result.

```Vue.js
<template>
  <cl-button @tap="chooseImage">{{ t("选择图片") }}</cl-button>
  <cl-cropper ref="cropperRef" @crop="onCrop" @load="onImageLoad"></cl-cropper>
</template>
<script lang="ts" setup>
const cropperRef = ref<ClCropperComponentPublicInstance | null>(null);
function chooseImage() {
  // 方法一，调用 open 方法打开
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      if (res.tempFilePaths.length > 0) {
        cropperRef.value!.open(res.tempFilePaths[0]);
      }
    },
  });
  // 方法二，调用选择图片方法打开裁剪
  cropperRef.value!.chooseImage();
}
function onCrop(url: string) {
  uni.previewImage({
    urls: [url],
  });
}
function onImageLoad(e: UniImageLoadEvent) {
  console.log("onImageLoad", e);
}
</script>
```

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

### Page State Checks - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/router

Provides examples of how to check the current state of the page using methods like `isFirstPage()`, `isHomePage()`, `isTabPage()`, and `isLoginPage()`.

```typescript
// 检查当前页面状态
if (router.isFirstPage()) {
  console.log("这是页面栈中的第一个页面");
}
if (router.isHomePage()) {
  console.log("当前在首页");
}
if (router.isTabPage()) {
  console.log("当前在标签页");
}
if (router.isLoginPage()) {
  console.log("当前在登录页");
}
```

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

### Route Guards - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/router

Explains how to implement route guards for controlling navigation. It includes examples for `router.beforeEach()` to intercept navigation and `router.afterLogin()` for handling post-login actions.

```typescript
// 注册全局路由守卫
router.beforeEach((to, next) => {
  console.log("准备跳转到：", to.url);
  // 检查登录状态
  if (user.isNull()) {
    // 跳转到登录页
    router.login();
    return;
  }
  // 继续跳转
  next();
});
// 注册登录后回调
router.afterLogin(() => {
  console.log("用户登录成功");
});
```

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

### Toast Type Examples (JavaScript)

Source: https://unix.cool-js.com/src/components/feedback/toast

Shows how to use different message types for the Toast component, including success, warning, error, and question. This helps in conveying the nature of the feedback to the user.

```javascript
import { useUi } from "@/uni_modules/cool-ui";
const ui = useUi();
// 成功提示
ui.showToast({
  message: "保存成功",
  type: "success",
});
// 警告提示
ui.showToast({
  message: "请检查输入内容",
  type: "warn",
});
// 错误提示
ui.showToast({
  message: "网络连接失败",
  type: "error",
});
// 询问提示
ui.showToast({
  message: "是否确认删除？",
  type: "question",
});
```

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

### Skeleton: Basic Text Example

Source: https://unix.cool-js.com/src/components/status/skeleton

Demonstrates the basic usage of the Skeleton component to display a text placeholder while content is loading. It shows how to conditionally render the skeleton or the actual content.

```html
<cl-skeleton loading>
  <cl-text>云想衣裳花想容，春风拂槛露华浓。</cl-text>
</cl-skeleton>
<!-- 隐藏骨架图，显示真实内容 -->
<cl-skeleton :loading="false">
  <cl-text>云想衣裳花想容，春风拂槛露华浓。</cl-text>
</cl-skeleton>
```

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

### Troubleshooting API Service Not Running

Source: https://unix.cool-js.com/src/introduce/question

This addresses the error '[cool-eps] API service is not running' which indicates that the server is not started or the proxy configuration is incorrect. It provides a common URL for the API service.

```Text
API service is not running 
出现 [cool-eps] API service is not running → http://127.0.0.1:8001/app/base/comm/eps 类似的情况，则 `服务端未开启` 或者 `proxy` 配置的地址不对
```

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

### Toast Positioning Examples (JavaScript)

Source: https://unix.cool-js.com/src/components/feedback/toast

Illustrates how to display Toast messages at different positions (top, center, bottom) using the `position` parameter. This allows for flexible placement of user feedback.

```javascript
import { useUi } from "@/uni_modules/cool-ui";
const ui = useUi();
// 顶部显示
ui.showToast({
  message: "操作成功",
  position: "top",
});
// 中间显示（默认）
ui.showToast({
  message: "操作成功",
  position: "center",
});
// 底部显示
ui.showToast({
  message: "操作成功",
  position: "bottom",
});
```

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

### Page Stack Operations - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/router

Demonstrates how to interact with the page stack, including getting the current page information using `router.route()` and retrieving all page instances with `router.getPages()`.

```typescript
// 获取当前页面信息
const current = router.route();
console.log("当前页面信息：", current);
// 获取所有页面实例
const pages = router.getPages();
console.log("页面栈深度：", pages.length);
```

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

### Day Utility: Start of Unit

Source: https://unix.cool-js.com/src/guide/cool/utils/day

Gets the start of a specified time unit (e.g., month, year) for a given date. This is a core function of the Day utility.

```ts
dayUts().startOf("month");
```

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

### ActionSheet with Icons Example

Source: https://unix.cool-js.com/src/components/feedback/action-sheet

Illustrates how to enhance the ActionSheet by including icons alongside the menu items. This example shows the setup in Vue.js, where each list item is configured with a label and a corresponding icon name.

```vue
<template>
  <cl-button @tap="open">打开带图标的菜单</cl-button>
  <cl-action-sheet ref="actionSheetRef" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";
const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);
function open() {
  actionSheetRef.value?.open({
    list: [
      {
        label: "反馈",
        icon: "feedback-line",
      },
      {
        label: "设置",
        icon: "settings-line",
      },
    ],
  } as ClActionSheetOptions);
}
</script>
```

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

### Main Application Entry Point

Source: https://unix.cool-js.com/src/introduce/index

This snippet shows the main.ts file, the entry point for the Cool Unix application. It initializes the Vue application, sets up global components, and configures the router and store, demonstrating the core setup for a uni-app x project.

```typescript
import { createSSRApp } from 'vue'
import App from './App.vue'
import uViewPlus from './uni_modules/vk-uview-ui'
import router from './router'
import store from './store'

export function createApp() {
  const app = createSSRApp(App)

  // UniApp global components
  app.use(uViewPlus)
  app.use(router)
  app.use(store)

  return {
    app,
    router,
    store
  }
}
```

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

### Main Application Entry Point

Source: https://unix.cool-js.com/src/introduce

This snippet shows the main.ts file, the entry point for the Cool Unix application. It initializes the Vue application, sets up global components, and configures the router and store, demonstrating the core setup for a uni-app x project.

```typescript
import { createSSRApp } from 'vue'
import App from './App.vue'
import uViewPlus from './uni_modules/vk-uview-ui'
import router from './router'
import store from './store'

export function createApp() {
  const app = createSSRApp(App)

  // UniApp global components
  app.use(uViewPlus)
  app.use(router)
  app.use(store)

  return {
    app,
    router,
    store
  }
}
```

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

### Configure Gradle, JDK, and Android SDK for Mac

Source: https://unix.cool-js.com/src/introduce/question

This section provides configuration paths for Gradle, JDK, and Android SDK on a Mac system, likely for setting up a development environment for Uniapp or related projects. It addresses a specific console warning related to uni_modules and third-party dependencies.

```Shell
Mac` 运行配置参考如下：
  * Gradle（8.5 版本）：`/Users/icssoa/Desktop/coding/env/gradle-8.5/bin/gradle`
  * JDK 路径：`/Library/Java/JavaVirtualMachines/amazon-corretto-21.jdk/Contents/Home`
  * 安卓 SDK 路径：`/Users/icssoa/Library/Android/sdk`
```

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

### Use Translation Functions in Scripts

Source: https://unix.cool-js.com/src/introduce/i18n

Shows how to import and utilize the `t()` and `$t()` translation functions within a Vue `<script setup>` block. This allows for translations in component logic, such as displaying toast messages with dynamic content.

```javascript
<script setup lang="ts">
  import { t, $t } from "/@/locale";
  // 基础翻译
  ui.showToast({
    message: t("操作成功"),
  });
  // 参数化翻译
  ui.showToast({
    message: $t("欢迎回来，{name}", { name: "李四" }),
  });
</script>
```

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

### Initialize uni-app with Cool Framework

Source: https://unix.cool-js.com/src/guide/main

This TypeScript code snippet demonstrates the core initialization process for a uni-app application using the Cool framework. It imports necessary functions from 'vue' and './cool', creates a SSR app instance with the main App.vue component, and then bootstraps the application using the 'bootstrap' function.

```ts
import { createSSRApp } from "vue";
import { bootstrap } from "./cool";
import App from "./App.vue";
import "./router";
export function createApp() {
  const app = createSSRApp(App);
  bootstrap(app);
  return {
    app,
  };
}
```

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

### Simple Page Navigation - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/router

Demonstrates the basic usage of the router for navigating to a new page. It shows both the `router.to()` method for simple navigation and `router.push()` which is equivalent to `uni.navigateTo`.

```typescript
import { router } from "@/cool";
// 最简单的页面跳转
router.to("/pages/user/profile");
// 等同于 uni.navigateTo
router.push({
  url: "/pages/user/profile",
});
```

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

### Skeleton: Circle/Avatar Example

Source: https://unix.cool-js.com/src/components/status/skeleton

Demonstrates the use of the Skeleton component for circular placeholders, suitable for avatars or icons. This example shows how to set the radius for a circular shape.

```html
<cl-skeleton type="circle" loading>
  <cl-image
    :radius="100"
    src="https://uni-docs.cool-js.com/demo/pages/demo/static/bg1.png"
    width="80"
    height="80"
  ></cl-image>
</cl-skeleton>
```

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

### Cool Translation CLI Commands

Source: https://unix.cool-js.com/src/introduce/i18n

Lists the primary commands for the Cool translation CLI tool: `create` for generating or updating translation files and `clear` for removing all existing translation files.

```bash
# 创建/更新翻译文件
npx cool-i18n create
# 清除所有翻译文件
npx cool-i18n clear
```

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

### Skeleton: Complex Layout Example

Source: https://unix.cool-js.com/src/components/status/skeleton

Provides an example of how to combine different types of Skeleton components to create a placeholder for a more complex content structure, such as an image with accompanying text.

```html
<view class="flex flex-row">
  <cl-skeleton type="image" loading> </cl-skeleton>
  <view class="flex-1 ml-2">
    <cl-skeleton type="text" loading> </cl-skeleton>
    <cl-skeleton type="text" loading class="mt-2 !w-[160rpx]"> </cl-skeleton>
  </view>
</view>
```

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

### Basic cl-input Usage

Source: https://unix.cool-js.com/src/components/form/input

Demonstrates the most basic implementation of the `cl-input` component without any additional configurations.

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

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

### Main Application Entry Point (main.ts)

Source: https://unix.cool-js.com/src/introduce/src

This snippet shows the main entry point for the application, typically where the Vue application is created and mounted. It imports necessary libraries like Vue and the root component.

```typescript
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

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

### Loadmore Component - Dynamic Loading State

Source: https://unix.cool-js.com/src/components/status/loadmore

Illustrates how to dynamically manage the loading and finish states of the Loadmore component. This example simulates data loading over 3 seconds, transitioning from a loading state to a finished state.

```html
<cl-loadmore :loading="loading" :finish="finish"></cl-loadmore>
```

```javascript
import { ref } from "vue";
const loading = ref(true);
const finish = ref(false);
setTimeout(() => {
  loading.value = false;
  finish.value = true;
}, 3000);
```

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

### Install Vite Plugin for Cool Unix

Source: https://unix.cool-js.com/src/introduce/clean

This command installs or updates the `@cool-vue/vite-plugin` to version `8.2.6` or higher, which is required for versions prior to `8.0.7` to enable the clean version functionality.

```bash
pnpm add @cool-vue/vite-plugin@8.2.6
```

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

### Uniapp Main Entry Point

Source: https://unix.cool-js.com/src/guide/locale

The main entry point for a Uniapp application. It typically initializes the Vue application and mounts it to the DOM.

```javascript
import { createSSRApp } from "vue"
import App from "./App.vue"
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
```

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

### InputNumber Custom Styling with PassThrough

Source: https://unix.cool-js.com/src/components/form/input-number

Provides an example of customizing the appearance of the cl-input-number component using the PassThrough configuration. This example specifically makes the buttons and value display area circular.

```vue
<cl-input-number
  :pt="{
    op: {
      className: '!rounded-full',
    },
    value: {
      className: '!rounded-full',
    },
  }"
></cl-input-number>
```

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

### Different Navigation Modes - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/router

Illustrates the various navigation modes supported by the router: `navigateTo` (default), `redirectTo`, `reLaunch`, and `switchTab`, showing how to use `router.push()` with the `type` option.

```typescript
// 保留当前页面，跳转到新页面（默认）
router.push({
  url: "/pages/detail",
  type: "navigateTo",
});
// 关闭当前页面，跳转到新页面
router.push({
  url: "/pages/detail",
  type: "redirectTo",
});
// 关闭所有页面，跳转到新页面
router.push({
  url: "/pages/home",
  type: "reLaunch",
});
// 跳转到 tab 页面
router.push({
  url: "/pages/tabbar/home",
  type: "switchTab",
});
```

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

### ActionSheet with Title and Description Example

Source: https://unix.cool-js.com/src/components/feedback/action-sheet

Demonstrates how to provide additional context to the ActionSheet by including a title and a descriptive text. This Vue.js example configures the component with these elements, along with actionable items that include icons.

```vue
<template>
  <cl-button @tap="open">打开带标题的菜单</cl-button>
  <cl-action-sheet ref="actionSheetRef" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";
const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);
function open() {
  actionSheetRef.value?.open({
    title: "操作提示",
    description: "删除好友会同时删除所有聊天记录，此操作不可恢复",
    list: [
      {
        label: "删除好友",
        icon: "user-unfollow-line",
      },
      {
        label: "举报用户",
        icon: "flag-line",
      },
    ],
  } as ClActionSheetOptions);
}
</script>
```

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

### 鸿蒙平台：窗口高度获取时机

Source: https://unix.cool-js.com/src/introduce/help

解决了在鸿蒙平台中获取窗口高度可能出现 0 的问题。建议在 `onReady` 或 `onMounted` 生命周期钩子之后获取窗口信息，或者使用屏幕高度并手动调整。

```ts
// ❌ 问题：获取的高度为 0
const { windowHeight } = uni.getWindowInfo();
// ✅ 解决方案1：使用屏幕高度
onReady(() => {
  const { screenHeight } = uni.getWindowInfo();
});
// ✅ 解决方案2：使用屏幕高度，手动减去导航了、安全区域等
const { screenHeight } = uni.getWindowInfo();
```

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

### FilterBar: Combined and Styled Example

Source: https://unix.cool-js.com/src/components/data/filter-bar

A comprehensive example demonstrating the combination of different filter item types (select, sort, switch) within a single cl-filter-bar. It also shows how to apply custom styles using the 'pt' property for elements like the select filter.

```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>
```

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

### Uniapp Main Entry File (Uniapp)

Source: https://unix.cool-js.com/src/todo/update

The main entry point (`main.ts`) for a Uniapp application. This file typically initializes the Vue application, mounts it to the DOM, and sets up global configurations or plugins.

```typescript
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

```

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

### Pages Configuration

Source: https://unix.cool-js.com/src/introduce/index

This snippet shows the pages.json file, which configures the navigation and pages for the uni-app application. It defines the application's pages, including their paths, component names, and navigation bar styles.

```json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Cool Unix"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Cool Unix",
    "navigationBarBackgroundColor": "#f8f8f8",
    "backgroundColor": "#f8f8f8"
  },
  "easycom": {
    "autoscan": true,
    "custom": {
      "" : "^uv-ui/(.*)/index.vue"
    }
  },
  "tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#1890ff",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabs/home.png",
        "selectedIconPath": "static/tabs/home_active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/index",
        "iconPath": "static/tabs/user.png",
        "selectedIconPath": "static/tabs/user_active.png",
        "text": "我的"
      }
    ]
  }
}
```

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

### Get Object Keys

Source: https://unix.cool-js.com/src/guide/cool/utils/comm

Retrieves an array containing all the keys (property names) of an object.

```ts
keys({ a: 1, b: 2 }); // ['a', 'b']
```

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

### Slice Array

Source: https://unix.cool-js.com/src/guide/cool/utils/comm

Extracts a section of an array and returns a new array. Can specify start and end indices.

```ts
slice([1, 2, 3], 1); // [2, 3]
slice([1, 2, 3], 1, 2); // [2]
```

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

### User Store: Token Management (Set and Logout)

Source: https://unix.cool-js.com/src/guide/cool/store

Demonstrates the token management capabilities of the user store. It shows how to set authentication tokens (access and refresh tokens) with their expiration times using `user.setToken()` and how to log out and clear all user data using `user.logout()`.

```typescript
import { useStore } from "@/cool";
const { user } = useStore();
// 设置登录 token
user.setToken({
  token: "access_token_here",
  expire: Date.now() + 7200000, // 2小时后过期
  refreshToken: "refresh_token_here",
  refreshExpire: Date.now() + 2592000000, // 30天后过期
});
// 退出登录
user.logout();
```

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

### Get Last Element of Array

Source: https://unix.cool-js.com/src/guide/cool/utils/comm

Retrieves the last element of an array. Returns null if the array is empty.

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

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

### Pages Configuration

Source: https://unix.cool-js.com/src/introduce

This snippet shows the pages.json file, which configures the navigation and pages for the uni-app application. It defines the application's pages, including their paths, component names, and navigation bar styles.

```json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Cool Unix"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Cool Unix",
    "navigationBarBackgroundColor": "#f8f8f8",
    "backgroundColor": "#f8f8f8"
  },
  "easycom": {
    "autoscan": true,
    "custom": {
      "" : "^uv-ui/(.*)/index.vue"
    }
  },
  "tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#1890ff",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabs/home.png",
        "selectedIconPath": "static/tabs/home_active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/index",
        "iconPath": "static/tabs/user.png",
        "selectedIconPath": "static/tabs/user_active.png",
        "text": "我的"
      }
    ]
  }
}
```

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

### HarmonyOS Payment Integration

Source: https://unix.cool-js.com/src/todo/plan

Deep adaptation for HarmonyOS, providing native payment and login support.

```javascript
HarmonyOS Payment
```

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

### Get First Element of Array

Source: https://unix.cool-js.com/src/guide/cool/utils/comm

Returns the first element of an array. Returns null if the array is empty.

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

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

### Countdown: Specify Hour Unit

Source: https://unix.cool-js.com/src/components/status/countdown

Demonstrates how to set a countdown specifically for hours. This example sets a 2-hour countdown.

```html
<!-- 2 小时倒计时 -->
<cl-countdown :hour="2"></cl-countdown>

```

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

### App.vue Root Component Configuration

Source: https://unix.cool-js.com/src/guide/App

This snippet shows the configuration for the App.vue file, which serves as the root component for a uni-app-x application. It includes lifecycle hooks like onLaunch, onShow, onHide, and onExit, along with global data and method definitions. It also demonstrates how to import and apply global styles.

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

export default {
  // 应用启动时触发
  onLaunch: function () {
    console.log("App Launch");
  },
  // 应用显示时触发（从后台切换到前台）
  onShow: function () {
    console.log("App Show");
    const { dict, user } = useStore();
    // 获取用户信息（仅在用户已登录状态下执行）
    user.get();
    // 刷新数据字典缓存
    dict.refresh(null);
  },
  // 应用隐藏时触发（切换到后台）
  onHide: function () {
    console.log("App Hide");
  },
  // 应用退出时触发
  onExit: function () {
    console.log("App Exit");
  },
};

```

```scss
@import url("static/index.scss");
@import url("uni_modules/cool-ui/index.scss");
.safe-area-top {
  margin-top: env(safe-area-inset-top);
}
.uni-tabbar {
  // #ifdef H5
  display: none;
  // #endif
  .uni-tabbar__icon {
    margin-top: 0;
  }
}

```

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

### Get Nth Element of Array

Source: https://unix.cool-js.com/src/guide/cool/utils/comm

Retrieves the element at the specified index in an array. Supports negative indices to count from the end.

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

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

### Page Return - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/router

Shows how to navigate back to the previous page using `router.back()`. It covers simple back navigation and returning multiple pages by specifying a `delta` value.

```typescript
// 简单返回上一页
router.back();
// 返回多个页面
router.back({
  delta: 2, // 返回上2个页面
});
// 如果是首页，返回时会跳转到首页
// 如果不是首页，正常返回上一页
```

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

### Countdown: Specify Second Unit

Source: https://unix.cool-js.com/src/components/status/countdown

Illustrates setting a countdown for a specific number of seconds. This example configures a 10-second countdown.

```html
<!-- 10 秒倒计时 -->
<cl-countdown :second="10"></cl-countdown>

```

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

### Cool UI Development Guidelines

Source: https://unix.cool-js.com/src/guide/uni-modules/cool-ui

This section details the development guidelines for Cool UI, covering component naming conventions (e.g., `cl-` prefix, hyphenated words, self-closing tags), style specifications (SCSS, theme customization, dark mode, mobile design), and event specifications (unified naming, parameter passing, common interactive events).

```markdown
## Development Guide 

### Component Naming Convention 
  * All components are named with the `cl-` prefix
  * Use hyphens to connect words, e.g., `cl-input-number`
  * All tags must use self-closing tags


### Style Convention 
  * Styles are written using SCSS
  * Supports theme customization and dark mode
  * Follows mobile design specifications


### Event Convention 
  * Unified event naming and parameter passing
  * Supports common interactive events
  * Provides detailed event documentation
```

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

### Get Extension Name - JavaScript/TypeScript

Source: https://unix.cool-js.com/src/guide/cool/utils/path

Extracts the file extension from a path string. This function is commonly used to determine the type of a file.

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

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

### Cool Unix Main Project Repository

Source: https://unix.cool-js.com/src/introduce/src

This snippet provides the repository links for the main Cool Unix project, a cross-platform application development scaffold based on the uni-app x technology stack. It's available on GitHub and Gitee.

```markdown
Platform | Repository Address
---|---
**GitHub** | cool-team-official/cool-unix
**Gitee** | cool-team-official/cool-unix
```

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

### Listening to Upload Events

Source: https://unix.cool-js.com/src/components/form/upload

Provides examples of listening to various upload events such as progress, success, and error to enhance user experience.

```vue
<template>
  <cl-upload
    v-model="url"
    @progress="handleProgress"
    @success="handleSuccess"
    @error="handleError"
  ></cl-upload>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const url = ref<string>("");
function handleProgress(progress: number) {
  console.log("上传进度:", progress);
}
function handleSuccess(url: string) {
  console.log("上传成功:", url);
}
function handleError(message: string) {
  console.error("上传失败:", message);
}
</script>
```

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

### Uniapp Vite Configuration

Source: https://unix.cool-js.com/src/guide/locale

Configuration file for Vite, a build tool used for Uniapp projects. It specifies plugins and build options.

```javascript
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
})
```

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

### Textarea with Custom Styles

Source: https://unix.cool-js.com/src/components/form/textarea

Provides an example of customizing the cl-textarea's appearance using the 'pt' (PassThrough) property for both the root and inner elements.

```vue
<cl-textarea
  :pt="{
    className: '!bg-sky-100 !border-sky-700',
    inner: {
      className: '!text-sky-700',
    },
  }"
></cl-textarea>
```

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

### Basic Application Configuration (TypeScript)

Source: https://unix.cool-js.com/src/guide/config

Defines the core application parameters and environment switching logic. It includes settings like application name, version, locale, website, and UI-related options such as dark mode and custom tab bar.

```typescript
import { isMp } from "@/cool";
import { dev } from "./dev";
import { prod } from "./prod";
// 判断当前是否为开发环境
export const isDev = process.env.NODE_ENV == "development";
// 忽略 token 校验的接口路径
export const ignoreTokens: string[] = [];
// 配置类型定义
type Config = {
  name: string; // 应用名称
  version: string; // 应用版本号
  locale: string; // 国际化语言设置
  website: string; // 官方网站地址
  host: string; // 服务器主机地址
  baseUrl: string; // API 基础路径
  showDarkButton: boolean; // 是否显示暗色模式切换按钮
  isCustomTabBar: boolean; // 是否使用自定义 TabBar
  backTop: boolean; // 是否显示回到顶部按钮
};
// 应用配置导出
export const config = {
  name: "cool-unix",
  version: "1.0.0",
  locale: "zh",
  website: "https://cool-js.com",
  showDarkButton: isMp() ? false : true, // 小程序端隐藏暗色模式按钮
  isCustomTabBar: true,
  backTop: true,
  ...(isDev ? dev() : prod()), // 根据环境合并对应配置
} as Config;
```

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

### InputNumber Basic Usage

Source: https://unix.cool-js.com/src/components/form/input-number

Demonstrates the basic usage of the cl-input-number component with default settings. The counter starts at 0 and increments/decrements by 1.

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

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

### Uni-app Pages Configuration (pages.json)

Source: https://unix.cool-js.com/src/introduce/src

This snippet represents the configuration file for uni-app, defining the application's pages, navigation styles, and other routing-related settings. It's crucial for uni-app project structure.

```json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}
```

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

### Get Object Property Value

Source: https://unix.cool-js.com/src/guide/cool/utils/comm

Retrieves the value of a property from an object, supporting nested paths. Provides a default value if the path is not found.

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

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

### Passing Parameters - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/router

Explains how to pass query parameters when navigating to a page using `router.push()` and how to retrieve these parameters in the destination page using `router.params`.

```typescript
router.push({
  url: "/pages/user/profile",
  query: {
    id: 123,
    name: "张三",
  },
});
// 在目标页面接收参数
const params = router.params;
console.log(params.id); // 123
console.log(params.name); // '张三'
```

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

### Day Utility: Get Timestamp

Source: https://unix.cool-js.com/src/guide/cool/utils/day

Returns the Unix timestamp (milliseconds since epoch) for a given date. This is a common utility for date representation.

```ts
dayUts().valueOf();
```

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

### Get Storage Data - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/utils/storage

Retrieves data from storage using a specified key. It handles null values if the data does not exist or has expired.

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

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

### Cool Unix Button - Basic Usage

Source: https://unix.cool-js.com/src/components/basic/button

Demonstrates the fundamental usage of the Cool Unix Button component, displaying a standard button with default styling.

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

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

### Get Basename - JavaScript/TypeScript

Source: https://unix.cool-js.com/src/guide/cool/utils/path

Retrieves the last part of a path, which is typically the filename with its extension. This is helpful when you need the complete file identifier from a path.

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

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

### Vite Configuration for Cool Unix

Source: https://unix.cool-js.com/src/introduce

This snippet shows the vite.config.ts file, which is used to configure the Vite build tool for the Cool Unix project. It includes settings for plugins, server configuration, and build options, leveraging Tailwind CSS for styling.

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/theme/variables.scss";`
      }
    }
  },
  server: {
    proxy: {
      // with options
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace('^/api', '')
      }
    }
  }
})
```

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

### Java Backend for Cool Admin

Source: https://unix.cool-js.com/src/introduce/src

This snippet links to the GitHub, Gitee, and GitCode repositories for the Cool Admin backend project, which is built using the Spring Boot framework. It's an enterprise-grade Java backend solution.

```markdown
Platform | Repository Address
---|---
**GitHub** | cool-team-official/cool-admin-java
**Gitee** | cool-team-official/cool-admin-java
**GitCode** | cool_team/cool-admin-java
```

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

### Get Filename - JavaScript/TypeScript

Source: https://unix.cool-js.com/src/guide/cool/utils/path

Extracts the filename from a given path string. This function is useful for isolating the file's name from its directory structure.

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

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

### Uniapp Vite Configuration (Uniapp)

Source: https://unix.cool-js.com/src/todo/update

Configuration file for Vite, the build tool used in this Uniapp project. It defines settings for development server, build output, plugins, and other build-related configurations.

```typescript
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
})

```

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

### Countdown: Specify Minute Unit

Source: https://unix.cool-js.com/src/components/status/countdown

Shows how to configure the Countdown component to count down a specific number of minutes. This example sets a 2-minute countdown.

```html
<!-- 2 分钟倒计时 -->
<cl-countdown :minute="2"></cl-countdown>

```

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

### Get All Storage Info - TypeScript

Source: https://unix.cool-js.com/src/guide/cool/utils/storage

Retrieves information about all stored data, including keys and potentially their expiration status. This is useful for monitoring storage usage.

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

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

### UniApp X Support for Short Drama System

Source: https://unix.cool-js.com/src/todo/plan

UniApp X version support for the 'Short Drama System', a content management and playback system for short videos.

```javascript
UniApp X Short Drama System
```
Tokens:
Raw