WoT UI

https://github.com/wot-ui/wot-starter-docs
Admin
WoT UI provides user interface components and tools for developing Web of Things applications.
Tokens:16,050
Snippets:88
Trust Score:5.5
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install @uni-ku/root Plugin

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-ku-root.md

Commands to install the @uni-ku/root plugin as a development dependency using different package managers (pnpm, yarn, npm).

```bash
pnpm add -D @uni-ku/root

yarn add -D @uni-ku/root

npm install -D @uni-ku/root
```

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

### Configure Vite with UniKuRoot Plugin

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-ku-root.md

Example Vite configuration in `vite.config.ts` demonstrating how to import and integrate the UniKuRoot plugin alongside other Uni-helper plugins. Note the recommended order of plugin placement.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniHelperManifest from '@uni-helper/vite-plugin-uni-manifest'
import UniHelperPages from '@uni-helper/vite-plugin-uni-pages'
import UniHelperLayouts from '@uni-helper/vite-plugin-uni-layouts'
import UniHelperComponents from '@uni-helper/vite-plugin-uni-components'
import AutoImport from 'unplugin-auto-import/vite'
import { WotResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'
import UniKuRoot from '@uni-ku/root'
// https://vitejs.dev/config/
export default async () => {
  const UnoCSS = (await import('unocss/vite')).default
  return defineConfig({
    plugins: [
      // https://github.com/uni-helper/vite-plugin-uni-manifest
      UniHelperManifest(),
      // https://github.com/uni-helper/vite-plugin-uni-pages
      UniHelperPages({
        dts: 'src/uni-pages.d.ts',
        subPackages: [
          'src/subPages',
        ],
        /**
         * 排除的页面，相对于 dir 和 subPackages
         * @default []
         */
        exclude: ['**/components/**/*.*'],
      }),
      // https://github.com/uni-helper/vite-plugin-uni-layouts
      UniHelperLayouts(),
      // https://github.com/uni-helper/vite-plugin-uni-components
      UniHelperComponents({
        resolvers: [WotResolver()],
        dts: 'src/components.d.ts',
        dirs: ['src/components', 'src/business'],
        directoryAsNamespace: true,
      }),
      // https://github.com/uni-ku/root
      UniKuRoot(),
      Uni(),
      // https://github.com/antfu/unocss
      // see unocss.config.ts for config
      UnoCSS(),
    ],
  })
}
```

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

### Manage State with Pinia

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

This example demonstrates state management using Pinia in a Vue.js application, particularly within a uni-app context using SSR. It covers setting up Pinia, creating and using stores, and implementing a persistence plugin. Dependencies include Pinia and Vue.

```typescript
// main.ts - Pinia setup
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import { persistPlugin } from './store/persist'
import App from './App.vue'

const pinia = createPinia()
pinia.use(persistPlugin)

export function createApp() {
  const app = createSSRApp(App).use(pinia)
  return { app }
}

// Define a store
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  function increment() {
    count.value++
  }

  return { count, increment }
})

// Use store in component
import { useCounterStore } from './stores/counter'

const counterStore = useCounterStore()
counterStore.count // 0
counterStore.increment()
counterStore.count // 1

// Persistence plugin configuration
export function persistPlugin(context: PiniaPluginContext) {
  persist(context, ['temp']) // Exclude 'temp' store from persistence
}
```

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

### Manage Routing with uni-mini-router

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

This example illustrates how to manage navigation and routing in uni-app applications using uni-mini-router. It covers various navigation methods like push with string paths, objects, and query parameters, as well as implementing global navigation guards (beforeEach, afterEach). Dependencies include uni-mini-router.

```typescript
// Router usage example
import { useRouter, useRoute } from 'uni-mini-router'

const router = useRouter()
const route = useRoute()

// String path navigation
router.push('/pages/detail/index')

// Object-based navigation with params
router.push({
  name: 'detail',
  params: { id: '123' }
})

// Navigation with query parameters
router.push({
  path: '/pages/detail/index',
  query: { tab: 'info' }
})

// Global navigation guards
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next({ name: 'login' })
  } else {
    next()
  }
})

// Post-navigation hooks
router.afterEach((to, from) => {
  console.log(`从 ${from.path} 跳转到 ${to.path}`)
})
```

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

### Install echarts and uni-echarts Dependencies

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-echarts.md

Installs the necessary echarts and uni-echarts packages for uni-app projects. These are core dependencies for enabling ECharts functionality within the uni-app framework.

```bash
pnpm add echarts uni-echarts
# 或者
npm install echarts uni-echarts
```

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

### PageMeta Auto-Elevation Example

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-ku-root.md

Demonstrates the auto-elevation feature of @uni-ku/root for the `page-meta` component. The example shows how dynamically changing the `show` state affects the `page-style` property of `page-meta` to control scrolling, ensuring it's correctly applied at the page's top level.

```html
<!-- src/pages/uni-ku-root/index.vue -->
<script setup lang="ts">
definePage({
  name: 'root',
  style: {
    navigationBarTitleText: 'uni-ku/root',
  },
})

const show = ref<boolean>(false)
</script>

<template>
  <page-meta :page-style="`overflow:${show ? 'hidden' : 'visible'};`" />
  <view class="min-h-200vh">
    <demo-block title="锁定滚动" transparent>
      <wd-cell-group border>
        <wd-cell title="锁定滚动" is-link @click="show = !show" />
      </wd-cell-group>
    </demo-block>

    <wd-popup
      v-model="show"
      lock-scroll
      position="bottom"
      closable
      :safe-area-inset-bottom="true"
      custom-style="height: 200px;"
      @close="show = false"
    />
  </view>
</template>
```

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

### Install @uni-ku/bundle-optimizer for Optimization

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-echarts.md

Installs the @uni-ku/bundle-optimizer package as a development dependency. This tool is used to optimize WeChat mini-program bundle sizes by implementing sub-package strategies.

```bash
pnpm add -D @uni-ku/bundle-optimizer
# 或者
npm install -D @uni-ku/bundle-optimizer
```

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

### Dark Mode Implementation (TypeScript, Vue, CSS, UnoCSS)

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

Provides system-wide theme management for dark mode. It supports automatic detection based on system preferences and manual control with user options. Includes examples for Vue templates, platform configuration (`manifest.config.ts`), theme variable definitions (`theme.json`), CSS media queries, and UnoCSS class prefixes. Dependencies include '@/composables/useTheme' and '@/composables/useManualTheme'.

```typescript
// Automatic dark mode with system preference
import { useTheme } from '@/composables/useTheme'

const { theme, isDark, themeVars } = useTheme()

// Usage in template
<template>
  <wd-config-provider :theme-vars="themeVars">
    <view :class="{ 'dark-mode': isDark }">
      <text>当前主题: {{ theme }}</text>
    </view>
  </wd-config-provider>
</template>

// Manual theme management with user control
import { useManualTheme } from '@/composables/useManualTheme'

const {
  theme,
  isDark,
  toggleTheme,
  openThemeColorPicker,
  currentThemeColor,
  themeVars
} = useManualTheme()

<template>
  <wd-config-provider :theme-vars="themeVars">
    <wd-button @click="toggleTheme">切换主题</wd-button>
    <wd-button @click="openThemeColorPicker">选择主题色</wd-button>
  </wd-config-provider>
</template>

// Platform configuration in manifest.config.ts
{
  "h5": {
    "darkmode": true,
    "themeLocation": "theme.json"
  },
  "mp-weixin": {
    "darkmode": true,
    "themeLocation": "theme.json"
  }
}

// Theme variables in theme.json
{
  "light": {
    "navBgColor": "#f8f8f8",
    "navTxtStyle": "black",
    "bgColor": "#ffffff"
  },
  "dark": {
    "navBgColor": "#000000",
    "navTxtStyle": "white",
    "bgColor": "#000000"
  }
}

// CSS media query for dark mode
@media (prefers-color-scheme: dark) {
  .some-background {
    background: #1b1b1b;
  }
}

// UnoCSS dark prefix
<view class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  内容区域
</view>
```

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

### Enable Sub-Package Optimization with vite-plugin-uni-manifest

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-echarts.md

If using the `@uni-helper/vite-plugin-uni-manifest` plugin, this TypeScript configuration in `manifest.config.ts` enables sub-package optimization. It achieves the same goal as the `manifest.json` configuration but within the plugin's setup.

```typescript
export default defineManifestConfig({
  'mp-weixin': {
    optimization: {
      subPackages: true,
    },
  },
})
```

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

### Provide ECharts Instance in Component (JavaScript)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-echarts.md

This JavaScript snippet shows the mandatory step of calling `provideEcharts(echarts)` in any component that uses ECharts when installed via npm. This function initializes ECharts for the component's scope.

```javascript
import * as echarts from 'echarts/core'
import { provideEcharts } from 'uni-echarts/shared'

// 🚨 这一行是必须的
provideEcharts(echarts)
```

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

### Use Global Toast in a Page

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-ku-root.md

Example of using the global toast functionality provided by @uni-ku/root within a Vue page component (`index.vue`). It demonstrates how to import and call the `useGlobalToast` composable to display success and error messages.

```html
<!-- src/pages/index/index.vue -->
<script setup lang="ts">
const globalToast = useGlobalToast()

function showSuccess() {
  globalToast.success('操作成功！')
}

function showError() {
  globalToast.error('操作失败！')
}
</script>

<template>
  <view>
    <button @click="showSuccess">显示成功提示</button>
    <button @click="showError">显示错误提示</button>
  </view>
</template>
```

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

### Configure Vite for uni-echarts Auto-Import

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-echarts.md

Configures the Vite build tool to automatically resolve and import uni-echarts components. This setup utilizes UniHelperComponents and UniEchartsResolver for seamless integration without manual imports.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniHelperComponents from '@uni-helper/vite-plugin-uni-components'
import { UniEchartsResolver } from 'uni-echarts/resolver'

export default defineConfig({
  optimizeDeps: {
    exclude: process.env.NODE_ENV === 'development' ? ['wot-design-uni', 'uni-echarts'] : [],
  },
  plugins: [
    // 组件自动导入
    UniHelperComponents({
      resolvers: [UniEchartsResolver()],
      dts: 'src/components.d.ts',
    }),
    Uni(),
  ],
})
```

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

### 启动跨端开发服务器

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/installation.md

使用指定的包管理器启动 Wot-UI 项目的开发服务器，并指定目标平台进行跨端开发。将 `<platform>` 替换为实际的平台标识符（如 `app`, `quickapp` 等）。

```bash
pnpm dev:<platform>
```

```bash
yarn dev:<platform>
```

```bash
npm dev:<platform>
```

```bash
bun dev:<platform>
```

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

### 创建 Wot-UI 项目

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/installation.md

使用不同的包管理器和工具在本地创建新的 Wot-UI 项目。需要指定项目名称，并选择一个模板（如 wot-starter）。

```bash
pnpm create uni <project-name> -t wot-starter
```

```bash
pnpx degit wot-ui/wot-starter <project-name>
```

```bash
pnpx giget gh:wot-ui/wot-starter <project-name>
```

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

### 启动开发服务器 (H5 模式)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/installation.md

使用指定的包管理器启动 Wot-UI 项目的开发服务器，默认运行在 H5 模式下。这允许您在浏览器中实时预览和调试您的应用。

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
npm dev
```

```bash
bun dev
```

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

### 打开项目文件夹

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/installation.md

使用 VS Code 或您配置的默认编辑器在终端中打开当前项目文件夹。这可以方便地开始进行代码编辑。

```bash
code <project-name>
```

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

### Build and Deployment Scripts (JSON, Bash)

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

Defines scripts for development, building, and previewing projects using VitePress, and for type checking with TypeScript. Includes commands for running the development server, creating a production build with GZIP compression, and locally previewing the production build. The `type-check` script verifies TypeScript code without emitting output.

```json
{
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview",
    "type-check": "tsc --noEmit"
  }
}
```

```bash
# Development server on port 5173
pnpm docs:dev

# Production build with GZIP compression
pnpm docs:build

# Preview production build locally
pnpm docs:preview
```

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

### 安装项目依赖

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/installation.md

在 Wot-UI 项目中安装所有必需的依赖项。此过程会删除旧的锁文件（如 pnpm-lock.yaml）以确保使用指定的包管理器进行安装。

```bash
pnpm install
```

```bash
npx rimraf pnpm-lock.yaml
yarn install
```

```bash
npx rimraf pnpm-lock.yaml
npm install
```

```bash
npx rimraf pnpm-lock.yaml
bun install
```

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

### Configure VitePress for Wot Starter

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

Configures the VitePress static site generator for the Wot Starter project. It includes Vite plugins for compression and UnoCSS, server settings, metadata, theme configuration, navigation, and sidebar structure. Essential for customizing the documentation site's appearance and functionality.

```typescript
// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import viteCompression from 'vite-plugin-compression'
import UnoCSS from '@unocss/vite'
import llmstxt from 'vitepress-plugin-llms'

export default defineConfig({
  vite: {
    plugins: [
      llmstxt({
        domain: 'https://wot-starter-docs.netlify.app',
      }),
      UnoCSS(),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz',
      }),
    ],
    server: {
      host: '0.0.0.0',
      port: 5173,
    },
  },
  title: "Wot Starter",
  description: "⚡️ 基于 vitesse-uni-app 由 vite & uni-app 驱动的、深度整合 Wot UI 组件库的快速启动模板",
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }],
    ['meta', { name: 'algolia-site-verification', content: '223BF8314C40C6AE' }],
  ],
  themeConfig: {
    logo: '/logo.png',
    lastUpdated: {
      text: '最后更新'
    },
    editLink: {
      pattern: 'https://github.com/wot-ui/wot-starter-docs/edit/main/:path',
      text: '为此页提供修改建议',
    },
    socialLinks: [
      { icon: 'github', link: 'https://github.com/wot-ui/wot-starter' },
    ],
    search: {
      provider: 'algolia',
      options: {
        appId: 'ITS8LMWRYB',
        apiKey: '259280bc7bfdf1686586ed7680c68a4c',
        indexName: 'wot_demo_docs_netlify_app_its8lmwryb_pages',
      },
    },
    nav: [
      { text: '首页', link: '/' },
      { text: '快速开始', link: '/guide/installation' },
      { text: 'Wot UI', link: 'https://wot-ui.cn/' },
    ],
    sidebar: [
      {
        text: '快速开始',
        items: [
          { text: '介绍', link: '/guide/introduction' },
          { text: '起步', link: '/guide/installation' },
          { text: '路由', link: '/guide/router' },
          { text: '网络请求', link: '/guide/request' },
          { text: '状态管理', link: '/guide/state-management' },
          { text: '暗黑模式', link: '/guide/dark-mode' },
        ]
      },
    ],
  }
})
```

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

### Setting Chart Dimensions with Custom Class (Vue)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-echarts.md

This Vue template and style example shows how to set the dimensions for a `uni-echarts` component. It demonstrates using utility CSS classes (like UnoCSS/Tailwind) or custom CSS classes to control the chart container's width and height.

```vue
<template>
  <!-- 使用 UnoCSS/Tailwind 类名 -->
  <uni-echarts custom-class="h-300px w-full" :option="option" />

  <!-- 或者使用自定义 CSS 类 -->
  <uni-echarts custom-class="chart-container" :option="option" />
</template>

<style>
.chart-container {
  width: 100%;
  height: 300px;
}
</style>
```

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

### Perform Network Requests with Alova

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

This snippet shows how to configure and use Alova, an HTTP request library, for making network requests in uni-app. It includes setting up the Alova instance with a custom adapter, defining API methods, and utilizing hooks like `useRequest` and `usePagination` for handling data fetching, loading states, errors, request deduplication, response caching, and pagination. Dependencies include 'alova' and '@alova/adapter-uniapp'.

```typescript
// Alova configuration
import { createAlova, useRequest, usePagination } from 'alova'
import { uniappAdapter } from '@alova/adapter-uniapp'

const alova = createAlova({
  baseURL: 'https://api.example.com',
  ...uniappAdapter(),
  responded: response => response.data
})

// Define API methods
const getUserInfo = (id: string) => alova.Get(`/user/${id}`)
const updateUser = (data: UserInfo) => alova.Post('/user', data)

// Basic request with useRequest hook
const {
  data,
  loading,
  error,
  send,
  onSuccess,
  onError,
} = useRequest(getUserInfo('123'), {
  immediate: true,
})

onSuccess((data) => {
  console.log('请求成功:', data)
})

onError((error) => {
  console.error('请求失败:', error)
})

// Request deduplication
const { data } = useRequest(getUserInfo('123'), {
  shareRequest: true
})

// Response caching
const { data } = useRequest(getUserInfo('123'), {
  cacheFor: 300000 // 5 minutes
})

// Pagination support
const {
  data: list,
  page,
  pageSize,
  total,
  isLastPage,
  loading,
  loadMore,
  refresh
} = usePagination(
  (page, pageSize) => alova.Get('/api/list', { params: { page, pageSize } }),
  {
    initialPage: 1,
    initialPageSize: 10
  }
)
```

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

### Global State Management with VueUse and uni-app Storage

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

This snippet showcases global state management using VueUse's `createGlobalState` and `useStorage`, specifically adapted for uni-app with a custom storage adapter. It demonstrates creating reactive global state for authentication, including token management and login/logout functions, with persistence to uni-app's synchronous storage. Dependencies include '@vueuse/core'.

```typescript
// Create global state with VueUse
import { createGlobalState, useStorage } from '@vueuse/core'

// Custom storage adapter for uni-app
export const uniStorage = {
  getItem(key: string) {
    return uni.getStorageSync(key) || null
  },
  setItem(key: string, value: any) {
    return uni.setStorageSync(key, value)
  },
  removeItem(key: string) {
    return uni.removeStorageSync(key)
  },
}

// Define global auth state
export const useAuth = createGlobalState(() => {
  const token = useStorage('token', '', uniStorage)
  const isLogin = computed(() => !!token.value)

  const login = (_token: string) => {
    token.value = _token
  }

  const logout = () => {
    token.value = ''
  }

  return {
    token,
    isLogin,
    login,
    logout,
  }
})

// Usage in components
const { token, isLogin, login, logout } = useAuth()
```

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

### Recommended vs. Not Recommended Style Practices

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/dark-mode.md

Illustrates the recommended way to integrate official configurations with custom styles for theme adaptation, contrasted with the non-recommended practice of hardcoding color values directly in the style attribute.

```html
<!-- ✅ 推荐：结合官方配置和自定义样式 -->
<view class="bg-white dark:bg-[var(--wot-dark-background2)]">

<!-- ❌ 不推荐：硬编码颜色 -->
<view style="background: #000; color: #fff;">
```

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

### Pinia 集成与配置 (TypeScript)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/state-management.md

集成 Pinia 状态管理库，包括安装依赖、基本设置以及使用 `createPinia` 和 `persistPlugin` 进行状态持久化。此方案适用于 `main.ts` 文件配置。

```typescript
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
pinia.use(persistPlugin)

export function createApp() {
  const app = createSSRApp(App).use(pinia);
  return {
    app,
  }
}
```

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

### 验证分包优化效果

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/bundle-optimizer.md

执行 `pnpm build:mp-weixin` 命令来构建微信小程序项目，并通过微信开发者工具的「构建分析」功能对比主包大小，以验证分包优化效果。

```bash
pnpm build:mp-weixin
```

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

### uni-mini-router 导航守卫

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/router.md

演示了 uni-mini-router 中的导航守卫用法，包括全局前置守卫 `beforeEach` 用于权限检查和全局后置钩子 `afterEach` 用于页面跳转完成后的处理。

```typescript
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查用户权限
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next({ name: 'login' })
  } else {
    next()
  }
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 页面跳转完成后的处理
  console.log(`从 ${from.path} 跳转到 ${to.path}`)
})
```

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

### Configure UnoCSS for Atomic CSS

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

Defines custom shortcuts, presets, and theme configurations for UnoCSS, an atomic CSS engine. This allows for efficient and customizable styling with predefined utility classes and responsive design options. It includes presets like `uno`, `attributify`, `icons`, and `typography`.

```typescript
// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
} from 'unocss'

export default defineConfig({
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['btn-primary', 'bg-blue-500 hover:bg-blue-600 text-white'],
    ['btn-secondary', 'bg-gray-500 hover:bg-gray-600 text-white'],
    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
    ['card', 'bg-white rounded-lg shadow-md p-6 border border-gray-200'],
    ['card-dark', 'bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700'],
    ['feature-card', 'bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700'],
  ],
  presets: [
    presetUno({
      dark: 'media',
    }),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
    presetTypography(),
  ],
  blocklist: [
    /^(sm|md|lg|xl|2xl):/,
    /^grid-cols-/, 
    'container',
  ],
  theme: {
    colors: {
      primary: {
        500: '#3b82f6',
        600: '#2563eb',
      },
    },
  },
})
```

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

### 安装 @uni-ku/bundle-optimizer 依赖

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/bundle-optimizer.md

使用 pnpm 包管理器安装 `@uni-ku/bundle-optimizer` 作为开发依赖。此命令适用于 CLI 项目，HBuilderX 项目可在终端或自定义插件中执行。

```bash
pnpm add -D @uni-ku/bundle-optimizer
```

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

### 配置 uni-pages 排除目录 (TypeScript)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-helper.md

在 `vite.config.ts` 中配置 [@uni-helper/vite-plugin-uni-pages](https://github.com/uni-helper/vite-plugin-uni-pages) 以排除特定目录（如 '**/components/**/*.*'）不被解析为路由。这有助于区分页面和组件。输入是 Vite 配置文件，输出是配置生效后的路由解析。

```typescript
// vite.config.ts
...
UniHelperPages({
  dts: 'src/uni-pages.d.ts',
  subPackages: [
    'src/subPages',
  ],
  /**
   * 排除的页面，相对于 dir 和 subPackages
   * @default []
   */
  exclude: ['**/components/**/*.*'],
})
...
```

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

### 自动注册 Uni-app 组件 (Vue)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-helper.md

使用 [@uni-helper/vite-plugin-uni-components](https://github.com/uni-helper/vite-plugin-uni-components) 插件，在 'src/components' 目录下创建的 Vue 组件将自动全局注册，无需显式导入。输入是 Vue 组件文件，输出是无需导入即可使用的组件。

```vue
<template>
  <div>
    <h1>欢迎使用 vitess-uni-app </h1>
    <AppAlert>
      这个组件会自动导入
    </AppAlert>
  </div>
</template>
```

```vue
<template>
  <span>
    <slot />
  </span>
</template>
```

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

### 配置 uni-app manifest.json (TypeScript)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-helper.md

使用 [@uni-helper/vite-plugin-uni-manifest](https://github.com/uni-helper/vite-plugin-uni-manifest)，可以使用 TypeScript 编写 `manifest.json`。在 `vite.config.ts` 中引入插件，并创建 `manifest.config.(ts|mts|cts|js|cjs|mjs|json)` 文件来定义应用配置。输入是 TypeScript 配置文件，输出是类型安全的 `manifest.json`。

```typescript
// vite.config.ts
import Uni from '@dcloudio/vite-plugin-uni'
import UniManifest from '@uni-helper/vite-plugin-uni-manifest'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [UniManifest(), Uni()],
})
```

```typescript
// manifest.config.ts
import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'

export default defineManifestConfig({
  // code here...
})
```

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

### Pinia Store 使用 (Vue SFC)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/state-management.md

在 Vue 组件中导入并使用 Pinia Store。通过 `useCounterStore` 获取 Store 实例，然后可以访问 `count` 状态并调用 `increment` 方法。适用于 Vue 单文件组件中调用 Pinia Store。

```vue
<script setup lang="ts">
import { useCounterStore } from '../../stores/counter'

const counterStore = useCounterStore()
counterStore.count // 0
counterStore.increment()
counterStore.count // 1
</script>
```

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

### Global Message Dialogs (TypeScript)

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

Handles alert, confirm, and prompt dialogs for user interaction. It supports custom titles, messages, and callback functions for success and failure actions. The prompt dialog includes an input field with configurable placeholder and default values. Dependencies include '@/composables/useGlobalMessage'.

```typescript
import { useGlobalMessage } from '@/composables/useGlobalMessage'

const message = useGlobalMessage()

// Alert dialog - single button
message.alert('操作完成')
message.alert({
  title: '提醒',
  message: '请注意查看结果',
  success: (res) => {
    console.log('用户确认了')
  }
})

// Confirm dialog - confirm/cancel buttons
message.confirm('确定要删除吗?')
message.confirm({
  title: '确认删除',
  message: '删除后不可恢复,确定要删除吗?',
  success: (res) => {
    if (res.action === 'confirm') {
      console.log('用户确认删除')
      // Execute delete operation
    }
  },
  fail: (res) => {
    console.log('用户取消删除')
  }
})

// Prompt dialog - input field with confirm/cancel
message.prompt('请输入您的姓名')
message.prompt({
  title: '输入信息',
  message: '请输入新的名称',
  inputValue: '默认值',
  inputPlaceholder: '请输入内容',
  success: (res) => {
    if (res.action === 'confirm') {
      console.log('用户输入:', res.value)
    }
  },
  fail: (res) => {
    console.log('用户取消输入')
  }
})

// Manual close
message.close()
```

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

### uni-mini-router 基础用法

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/router.md

展示了如何使用 uni-mini-router 进行编程式导航，包括字符串路径跳转、对象路径跳转、命名路由跳转，以及如何传递 params 和 query 参数。

```typescript
const router = useRouter()
const route = useRoute()

// 字符串路径跳转
router.push('/pages/detail/index')

// 对象路径跳转
router.push({ path: '/pages/detail/index' })

// 命名路由跳转
router.push({ name: 'detail' })

// 带参数跳转
router.push({
  name: 'detail',
  params: { id: '123' }
})

// 带查询参数跳转
router.push({
  path: '/pages/detail/index',
  query: { tab: 'info' }
})
```

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

### Create Virtual Root Component (App.ku.vue)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-ku-root.md

Template structure for the virtual root component (`App.ku.vue`) used by @uni-ku/root. It includes global configuration providers and essential components like notifications and popups, with conditional rendering for WeChat Mini Program specific elements.

```html
<script setup lang="ts">
const { themeVars, theme } = useManualTheme()
</script>

<template>
  <wd-config-provider :theme-vars="themeVars" :theme="theme" :custom-class="`page-wraper ${theme}`">
    <ku-root-view />
    <wd-notify />
    <wd-message-box />
    <wd-toast />
    <global-loading />
    <global-toast />
    <global-message />
    <!-- #ifdef MP-WEIXIN -->
    <privacy-popup />
    <!-- #endif -->
  </wd-config-provider>
</template>
```

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

### Extend VitePress Default Theme with Custom Components

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

This snippet demonstrates how to extend the default VitePress theme by importing and registering custom Vue components. It shows how to override default layouts and enhance the application with new components. Requires VitePress and Vue.

```typescript
// .vitepress/theme/index.ts
import { h } from 'vue'
import Theme from 'vitepress/theme'
import 'uno.css'
import './styles/vars.css'
import './styles/custom.css'

import SvgImage from './components/SvgImage.vue'
import HomeStar from './components/HomeStar.vue'
import VPIframe from './components/VPIframe.vue'
import Banner from './components/Banner.vue'

export default {
  ...Theme,
  Layout() {
    return h(Theme.Layout, null, {
      'home-hero-info-after': () => h(HomeStar),
      'layout-top': () => h(Banner),
    })
  },
  enhanceApp({ app }: { app: any }) {
    app.component('SvgImage', SvgImage)
    app.component('VPIframe', VPIframe)
  },
}
```

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

### 启用微信小程序分包优化配置

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/bundle-optimizer.md

在 `manifest.json` 文件中为 `mp-weixin` 配置项添加 `optimization.subPackages: true`，以开启微信小程序的分包优化。

```jsonc
{
  "mp-weixin": {
    "optimization": { "subPackages": true }
  }
}
```

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

### uni-app manifest.json 暗黑模式配置

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/dark-mode.md

通过修改 `manifest.config.ts` 中的 `h5` 和 `mp-weixin` 配置来开启 uni-app 的暗黑模式支持，并指定主题配置文件位置。

```json
// H5 配置
"h5": {
  "darkmode": true,
  "themeLocation": "theme.json"
}

// 微信小程序配置
"mp-weixin": {
  "darkmode": true,
  "themeLocation": "theme.json"
}
```

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

### Global Loading Component (TypeScript)

Source: https://context7.com/wot-ui/wot-starter-docs/llms.txt

Implements an application-wide loading indicator with an overlay. It allows showing messages and configuring display options like covering the entire screen or centering the message. It can be integrated with network interceptors to automatically show and hide the loading state during requests. Dependencies include '@/composables/useGlobalLoading' and axios.

```typescript
import { useGlobalLoading } from '@/composables/useGlobalLoading'

const loading = useGlobalLoading()

// Show loading with string parameter
loading.loading('加载中...')

// Show loading with configuration object
loading.loading({
  msg: '数据加载中',
  cover: true,
  position: 'middle'
})

// Close loading
loading.close()

// Use in network interceptors
axios.interceptors.request.use(config => {
  loading.loading('请求中...')
  return config
})

axios.interceptors.response.use(
  response => {
    loading.close()
    return response
  },
  error => {
    loading.close()
    return Promise.reject(error)
  }
)
```

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

### Wot UI 全局暗黑模式配置 (Vue)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/dark-mode.md

在 `App.vue` 中，通过 `wd-config-provider` 组件全局配置 `theme` 和 `themeVars` 来启用 Wot UI 组件的暗黑模式支持，通常结合 `useTheme` 或 `useManualTheme`。

```vue
<!-- App.vue -->
<script setup>
// 根据需求选择合适的主题管理方案
import { useTheme } from '@/composables/useTheme' // 简化版
// 或者
// import { useManualTheme } from '@/composables/useManualTheme' // 完整版

const { theme, themeVars } = useTheme()
</script>

<template>
  <wd-config-provider :theme="theme" :theme-vars="themeVars">
    <!-- 你的应用内容 -->
  </wd-config-provider>
</template>
```

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

### Pinia Store 定义 (TypeScript)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/state-management.md

使用 Pinia 的 `defineStore` 函数定义一个计数器 Store。该 Store 包含一个 `count` 状态和一个 `increment` 方法，用于修改状态。适用于定义 Pinia Store 的逻辑。

```typescript
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
})
```

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

### Pinia 持久化插件配置 (TypeScript)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/state-management.md

配置 Pinia 持久化插件，用于将 Store 数据持久化到本地存储。代码展示了如何通过 `persist` 函数传入排除列表，以避免持久化特定 Store。适用于 `src/store/persist.ts` 文件。

```typescript
// src/store/persist.ts
...
export function persistPlugin(context: PiniaPluginContext) {
  // 传入排除列表(store 名单)
  persist(context, ['temp'])
}
...
```

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

### useTabbar() API Reference - TypeScript

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/tabbar.md

提供了 useTabbar() Hook 返回的方法和属性，用于管理自定义 Tabbar 的列表、激活状态以及徽标值的获取和设置。

```typescript
const {
  tabbarList, // 计算属性：Tabbar项列表
  activeTabbar, // 计算属性：当前激活的Tabbar项
  getTabbarItemValue, // 方法：获取指定项的徽标值
  setTabbarItem, // 方法：设置指定项的徽标值
  setTabbarItemActive, // 方法：设置指定项为激活状态
} = useTabbar()
```

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

### 约定式路由 (Pages) (Vue)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/uni-helper.md

借助 [@uni-helper/vite-plugin-uni-pages](https://github.com/uni-helper/vite-plugin-uni-pages)，'src/pages' 目录下的 Vue 文件会自动映射为应用路由。此插件支持排除特定目录，如 'components'，以避免将组件误识别为页面。输入是 Vue 页面文件，输出是可访问的路由。

```vue
<template>
  <div>
    <h1>欢迎使用 vitess-uni-app </h1>
    <AppAlert>
      这个组件会自动导入
    </AppAlert>
  </div>
</template>
```

```vue
<template>
  <section>
    <p>通过 `/pages/about` 来访问这个页面</p>
  </section>
</template>
```

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

### Wot UI 组件级暗黑模式配置 (Vue)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/dark-mode.md

在特定页面或组件中，通过 `wd-config-provider` 组件的 `theme` 属性设置为 "dark"，来单独启用该组件或其子组件的暗黑模式。

```vue
<!-- 单个页面或组件 -->
<template>
  <wd-config-provider theme="dark">
    <wd-button type="primary">
      暗黑模式按钮
    </wd-button>
    <wd-cell title="暗黑模式单元格" />
  </wd-config-provider>
</template>
```

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

### 配置 TypeScript 以识别新语法

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/bundle-optimizer.md

在 `tsconfig.json` 文件中，将生成的 `async-import.d.ts` 和 `async-component.d.ts` 类型定义文件包含到 `include` 数组中，以支持 TypeScript 对新语法的识别。这两个文件可以被添加到 `.gitignore`。

```jsonc
{
  "include": ["async-import.d.ts", "async-component.d.ts"]
}
```

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

### useTabbar() Method Details - TypeScript

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/tabbar.md

详细展示了 useTabbar() Hook 中用于获取和设置徽标值以及激活状态的方法签名。

```typescript
// 获取徽标值
getTabbarItemValue(name: string): number | null

// 设置徽标值
setTabbarItem(name: string, value: number): void

// 设置激活状态
setTabbarItemActive(name: string): void
```

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

### 配置 Vite 以集成 bundle-optimizer

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/bundle-optimizer.md

将 `@uni-ku/bundle-optimizer` 插件添加到 `vite.config.ts` 文件中。若 `vite.config.ts` 不存在，需新建。此配置启用插件的所有默认功能。

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

export default defineConfig({
  plugins: [
    uni(),
    optimizer({ logger: true }) // 所有功能默认开启
  ]
})
```

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

### 简单状态管理 - reactive 使用 (Vue SFC)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/state-management.md

在 Vue 组件的模板中直接使用通过 `reactive` 创建的 `countStore` 对象。通过 `countStore.increment()` 调用方法，并通过 `countStore.count` 显示状态。适用于 Vue 单文件组件直接使用 `reactive` 状态。

```vue
<template>
  <!-- 自动导入 -->
  <button @click="countStore.increment()">
    {{ countStore.count }}
  </button>
</template>
```

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

### useTabbar() Hook

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/tabbar.md

Provides access to Tabbar related data and methods. It returns `tabbarList`, `activeTabbar`, `getTabbarItemValue`, `setTabbarItem`, and `setTabbarItemActive`.

```APIDOC
## useTabbar()

### Description
Provides access to Tabbar related data and methods.

### Method
Composition API Hook

### Endpoint
N/A

### Parameters
None

### Request Example
```typescript
const {
  tabbarList,
  activeTabbar,
  getTabbarItemValue,
  setTabbarItem,
  setTabbarItemActive
} = useTabbar()
```

### Response
#### Properties
- **tabbarList** (Computed Property) - The list of Tabbar items.
- **activeTabbar** (Computed Property) - The currently active Tabbar item.

#### Methods
- **getTabbarItemValue(name: string): number | null** - Retrieves the badge value for a specific Tabbar item.
- **setTabbarItem(name: string, value: number): void** - Sets the badge value for a specific Tabbar item.
- **setTabbarItemActive(name: string): void** - Sets a specific Tabbar item as active.

### Response Example
```json
{
  "tabbarList": [
    {
      "name": "home",
      "text": "Home",
      "icon": "home-icon",
      "activeIcon": "home-active-icon"
    }
  ],
  "activeTabbar": "home"
}
```
```

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

### uni-app 获取和监听主题变化 (JavaScript)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/dark-mode.md

使用 `uni.getSystemInfoSync()` 获取当前系统主题，并注册 `uni.onThemeChange` 监听器来响应主题切换事件。

```javascript
// 获取系统主题信息
const systemInfo = uni.getSystemInfoSync()
console.log('当前主题:', systemInfo.theme) // 'light' 或 'dark'

// 监听主题变化
uni.onThemeChange((res) => {
  console.log('主题已切换到:', res.theme)
})
```

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

### 简单状态管理 - ref 使用 (Vue SFC)

Source: https://github.com/wot-ui/wot-starter-docs/blob/main/guide/state-management.md

在 Vue 组件中导入并使用通过 `ref` 实现的状态管理。直接解构 `useCount` 返回的 `globalCount`, `localCount`, 和 `increment` 函数，并在模板中使用。适用于 Vue 单文件组件调用 `ref` 状态。

```vue
<script setup lang="ts">
// 自动导入
const { globalCount, localCount, increment } = useCount()
</script>

<template>
  <button @click="increment()">
    {{ globalCount }}
    {{ localCount }}
  </button>
</template>
```
Tokens:
Raw