feat 配置skill
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -12,6 +12,7 @@ node_modules
|
|||||||
dist
|
dist
|
||||||
*.local
|
*.local
|
||||||
.opencode
|
.opencode
|
||||||
|
.claude
|
||||||
.omo
|
.omo
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
|
|||||||
@@ -1,436 +0,0 @@
|
|||||||
# Project Structure Skill
|
|
||||||
|
|
||||||
本 skill 定义项目的分层架构和文件组织规范,用于指导 Agent 在创建新页面、组件时遵循统一的目录结构。
|
|
||||||
|
|
||||||
## 核心原则
|
|
||||||
|
|
||||||
1. **页面放在 `pages/`** - 每个页面一个目录,包含 `index.vue`
|
|
||||||
2. **组件放在 `components/`** - 公共组件直接放目录下,页面专属组件按页面名分子目录
|
|
||||||
3. **页面专属组件与页面同名** - 如 `home` 页面的组件放在 `components/home/`
|
|
||||||
4. **使用 easycom 自动加载** - 无需手动 import,组件通过文件路径自动生成标签名
|
|
||||||
|
|
||||||
## 组件放置规则(重要)
|
|
||||||
|
|
||||||
### 公共组件(跨页面复用)
|
|
||||||
当用户要求创建**公共组件**时,直接放在 `components/` 根目录下:
|
|
||||||
|
|
||||||
```
|
|
||||||
components/
|
|
||||||
├── backNav.vue # 通用返回导航栏
|
|
||||||
├── tabBar.vue # 通用底部栏
|
|
||||||
├── modal.vue # 通用弹窗
|
|
||||||
└── ...
|
|
||||||
```
|
|
||||||
|
|
||||||
标签名:`<back-nav />`、`<tab-bar />`、`<modal />`
|
|
||||||
|
|
||||||
### 页面专属组件(仅特定页面使用)
|
|
||||||
当组件只在某个页面内使用时,放在 `components/{pageName}/` 子目录下:
|
|
||||||
|
|
||||||
```
|
|
||||||
components/
|
|
||||||
├── home/ # 首页专属组件
|
|
||||||
│ ├── status.vue
|
|
||||||
│ └── overview.vue
|
|
||||||
├── message/ # 消息页专属组件
|
|
||||||
│ └── list.vue
|
|
||||||
└── bluetooth/ # 蓝牙页专属组件
|
|
||||||
└── device.vue
|
|
||||||
```
|
|
||||||
|
|
||||||
标签名:`<home-status />`、`<message-list />`、`<bluetooth-device />`
|
|
||||||
|
|
||||||
### 判断依据
|
|
||||||
|
|
||||||
| 需求描述 | 放置位置 | 示例 |
|
|
||||||
|----------|----------|------|
|
|
||||||
| "做一个通用的返回导航" | `components/backNav.vue` | `<back-nav />` |
|
|
||||||
| "做一个通用的弹窗组件" | `components/modal.vue` | `<modal />` |
|
|
||||||
| "首页的项目列表组件" | `components/home/projectList.vue` | `<home-projectList />` |
|
|
||||||
| "消息页的消息列表" | `components/message/list.vue` | `<message-list />` |
|
|
||||||
| "蓝牙页的设备卡片" | `components/bluetooth/device.vue` | `<bluetooth-device />` |
|
|
||||||
|
|
||||||
## 目录结构
|
|
||||||
|
|
||||||
```
|
|
||||||
src/
|
|
||||||
├── pages/ # 页面目录
|
|
||||||
│ ├── home/ # 首页
|
|
||||||
│ │ └── index.vue
|
|
||||||
│ ├── report/ # 报告页
|
|
||||||
│ │ └── index.vue
|
|
||||||
│ ├── message/ # 消息页
|
|
||||||
│ │ └── index.vue
|
|
||||||
│ ├── bluetooth/ # 蓝牙页
|
|
||||||
│ │ └── index.vue
|
|
||||||
│ └── work/ # 工作页
|
|
||||||
│ └── index.vue
|
|
||||||
│
|
|
||||||
├── components/ # 组件目录
|
|
||||||
│ ├── backNav.vue # 公共组件:通用返回导航栏
|
|
||||||
│ │
|
|
||||||
│ ├── home/ # 首页专属组件
|
|
||||||
│ │ ├── homeNav.vue # 首页导航栏
|
|
||||||
│ │ ├── overview.vue # 今日作业概览
|
|
||||||
│ │ ├── status.vue # 实时作业状态
|
|
||||||
│ │ ├── projectList.vue # 项目列表容器
|
|
||||||
│ │ ├── list.vue # 项目列表项
|
|
||||||
│ │ ├── progress.vue # 项目作业进度
|
|
||||||
│ │ ├── construction.vue # 当前施工段
|
|
||||||
│ │ ├── warning.vue # 异常警告容器
|
|
||||||
│ │ └── warning_list.vue # 异常警告项
|
|
||||||
│ │
|
|
||||||
│ ├── message/ # 消息页专属组件
|
|
||||||
│ │ └── list.vue # 消息列表项
|
|
||||||
│ │
|
|
||||||
│ └── bluetooth/ # 蓝牙页专属组件
|
|
||||||
│ └── device.vue # 蓝牙设备卡片
|
|
||||||
│
|
|
||||||
├── composables/ # 组合式函数
|
|
||||||
├── store/ # Pinia 状态管理
|
|
||||||
├── api/ # 接口请求
|
|
||||||
├── utils/ # 工具函数
|
|
||||||
├── static/ # 静态资源
|
|
||||||
└── layouts/ # 布局组件
|
|
||||||
```
|
|
||||||
|
|
||||||
## 命名规范
|
|
||||||
|
|
||||||
### 文件命名
|
|
||||||
- **页面**: `index.vue`(固定)
|
|
||||||
- **组件**: `camelCase.vue`(如 `projectList.vue`)
|
|
||||||
- **组合式函数**: `useXxx.ts`(如 `useCount.ts`)
|
|
||||||
|
|
||||||
### 组件标签名(easycom 规则)
|
|
||||||
- **公共组件**: `backNav.vue` → `<back-nav />`
|
|
||||||
- **页面专属组件**: `home/status.vue` → `<home-status />`
|
|
||||||
- **嵌套组件**: `home/list.vue` → `<home-list />`
|
|
||||||
|
|
||||||
### easycom 自动扫描规则
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"easycom": {
|
|
||||||
"autoscan": true,
|
|
||||||
"custom": {
|
|
||||||
"^wd-(.*)": "@wot-ui/ui/components/wd-$1/wd-$1.vue",
|
|
||||||
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### easycom 自动生成标签名规则
|
|
||||||
| 文件路径 | 自动生成标签名 |
|
|
||||||
|----------|----------------|
|
|
||||||
| `components/backNav.vue` | `<back-nav />` |
|
|
||||||
| `components/modal.vue` | `<modal />` |
|
|
||||||
| `components/home/status.vue` | `<home-status />` |
|
|
||||||
| `components/message/list.vue` | `<message-list />` |
|
|
||||||
| `components/bluetooth/device.vue` | `<bluetooth-device />` |
|
|
||||||
|
|
||||||
## 组件拆分原则
|
|
||||||
|
|
||||||
### 何时拆分组件
|
|
||||||
1. **模板超过 100 行** - 拆分为子组件
|
|
||||||
2. **重复使用的 UI 块** - 提取为独立组件
|
|
||||||
3. **逻辑独立的功能块** - 拆分便于维护
|
|
||||||
|
|
||||||
### 拆分模式
|
|
||||||
```
|
|
||||||
页面容器组件(如 projectList.vue)
|
|
||||||
└── 列表项组件(如 projectList_list.vue)
|
|
||||||
|
|
||||||
页面容器组件(如 warning.vue)
|
|
||||||
└── 列表项组件(如 warning_list.vue)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 示例:项目列表
|
|
||||||
```
|
|
||||||
components/home/
|
|
||||||
├── projectList.vue # 容器:卡片标题 + card-body
|
|
||||||
└── projectList_list.vue # 内容:项目信息 + 参数 + 操作按钮
|
|
||||||
```
|
|
||||||
|
|
||||||
使用方式:
|
|
||||||
```vue
|
|
||||||
<home-projectList>
|
|
||||||
<home-projectList_list />
|
|
||||||
</home-projectList>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 创建新页面步骤
|
|
||||||
|
|
||||||
1. **创建页面目录**
|
|
||||||
```
|
|
||||||
src/pages/{pageName}/index.vue
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **创建页面专属组件目录**(如需要)
|
|
||||||
```
|
|
||||||
src/components/{pageName}/
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **配置路由**(如需要)
|
|
||||||
```json
|
|
||||||
// src/pages.json
|
|
||||||
{
|
|
||||||
"path": "pages/{pageName}/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "页面标题"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
4. **使用组件**
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view class="page">
|
|
||||||
<!-- 示例:替换为具体组件名,如 <home-component /> -->
|
|
||||||
<home-component />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 页面专属组件 vs 公共组件
|
|
||||||
|
|
||||||
| 类型 | 位置 | 标签名 | 示例 |
|
|
||||||
|------|------|--------|------|
|
|
||||||
| 公共组件 | `components/` 根目录 | `{name}` | `<back-nav />` |
|
|
||||||
| 页面专属组件 | `components/{pageName}/` | `{pageName}-{name}` | `<home-status />` |
|
|
||||||
|
|
||||||
## 页面样式规范
|
|
||||||
|
|
||||||
### 内容区域样式
|
|
||||||
所有使用自定义导航栏(`<back-nav />`)的页面,`.content` 容器必须使用以下样式:
|
|
||||||
|
|
||||||
```css
|
|
||||||
.content {
|
|
||||||
padding: 16px;
|
|
||||||
padding-top: 72px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
- `padding-top: 72px` 为导航栏预留空间,避免内容被遮挡
|
|
||||||
- `padding: 16px` 保持左右边距一致
|
|
||||||
|
|
||||||
### 卡片样式规范(重要)
|
|
||||||
每个组件自身就是一个卡片,**页面不要用额外的 `.card` 容器包裹组件**,否则多个组件会合并成一个卡片。
|
|
||||||
|
|
||||||
**卡片间距规则**:
|
|
||||||
- 卡片之间间距统一为 **12px**
|
|
||||||
- 页面通过 `gap: 12px` 设置间距,**组件内部不要添加 margin**
|
|
||||||
- 组件只负责自身样式(背景、圆角、内边距),不负责与其他组件的间距
|
|
||||||
|
|
||||||
**正确做法** - 页面用 gap 设置间距:
|
|
||||||
```vue
|
|
||||||
<!-- 页面 -->
|
|
||||||
<template>
|
|
||||||
<view class="page">
|
|
||||||
<back-nav title="页面标题" />
|
|
||||||
<view class="content">
|
|
||||||
<component-a />
|
|
||||||
<component-b />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view class="card">
|
|
||||||
<!-- 内容 -->
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 组件 a.vue -->
|
|
||||||
<style scoped>
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px; /* 卡片间距 */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.card {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
/* 不要添加 margin */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
**错误做法** - 组件添加 margin 影响间距:
|
|
||||||
```css
|
|
||||||
/* 错误:组件添加 margin */
|
|
||||||
.card {
|
|
||||||
margin-bottom: 16px; /* 不要用 margin */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**组件卡片统一样式:**
|
|
||||||
```css
|
|
||||||
.card {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**例外情况** - 多个子组件需要合并展示时:
|
|
||||||
当明确要求将多个组件放在同一个卡片内时,由最外层容器组件统一设置卡片样式,子组件背景透明:
|
|
||||||
```css
|
|
||||||
/* 容器组件 */
|
|
||||||
.container {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 子组件 */
|
|
||||||
.child {
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 页面模板示例
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view class="page">
|
|
||||||
<back-nav title="页面标题" />
|
|
||||||
|
|
||||||
<view class="content">
|
|
||||||
<view class="card">
|
|
||||||
<!-- 卡片内容 -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.page {
|
|
||||||
min-height: 100vh;
|
|
||||||
background-color: #EAEFF9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 16px;
|
|
||||||
padding-top: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 字体规范
|
|
||||||
项目使用三级字体体系:
|
|
||||||
|
|
||||||
| 级别 | 字号 | 用途 | 示例 |
|
|
||||||
|------|------|------|------|
|
|
||||||
| 一级 | 22px | 最大标题 | 页面标题、卡片大标题 |
|
|
||||||
| 二级 | 18px | 次级正常字体 | 正文、列表项、表单标签 |
|
|
||||||
| 三级 | 14px | 最小描述字体 | 辅助说明、placeholder、元信息 |
|
|
||||||
|
|
||||||
**CSS 变量:**
|
|
||||||
```css
|
|
||||||
/* 一级标题 */
|
|
||||||
--font-size-title: 22px;
|
|
||||||
|
|
||||||
/* 二级正文 */
|
|
||||||
--font-size-body: 18px;
|
|
||||||
|
|
||||||
/* 三级描述 */
|
|
||||||
--font-size-caption: 14px;
|
|
||||||
```
|
|
||||||
|
|
||||||
**使用示例:**
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view class="card">
|
|
||||||
<text class="title">
|
|
||||||
项目名称
|
|
||||||
</text>
|
|
||||||
<text class="body">
|
|
||||||
项目描述内容
|
|
||||||
</text>
|
|
||||||
<text class="caption">
|
|
||||||
辅助说明文字
|
|
||||||
</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.title {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caption {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 注意事项
|
|
||||||
|
|
||||||
1. **不要在页面中直接写大段模板** - 超过 100 行考虑拆分
|
|
||||||
2. **组件样式使用 scoped** - 避免样式污染
|
|
||||||
3. **组件 props 要有默认值** - 提高组件易用性
|
|
||||||
4. **事件命名使用 kebab-case** - 如 `@handle-click`
|
|
||||||
5. **插槽优先于 props 传内容** - 灵活性更高
|
|
||||||
6. **禁止使用 git 提交** - 代码的改动必须经过手动提交
|
|
||||||
|
|
||||||
## UI 组件库使用规范(重要)
|
|
||||||
|
|
||||||
项目使用两套 UI 组件库,按场景分工:
|
|
||||||
|
|
||||||
### uni-ui(表单/表格场景)
|
|
||||||
**仅用于**表单、表格相关的组件:
|
|
||||||
- 下拉选择:`<uni-data-select>`
|
|
||||||
- 单选框:`<uni-radio>` / `<uni-radio-group>`
|
|
||||||
- 多选框:`<uni-checkbox>` / `<uni-checkbox-group>`
|
|
||||||
- 日期选择:`<uni-datetime-picker>`
|
|
||||||
- 输入框:`<uni-easyinput>`
|
|
||||||
- 数据选择器:`<uni-data-picker>`
|
|
||||||
- 图标:`<uni-icons>`
|
|
||||||
|
|
||||||
官网:https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html
|
|
||||||
|
|
||||||
### wot-ui(其他所有场景)
|
|
||||||
**除表单表格外**,其他所有 UI 组件统一使用 wot-ui:
|
|
||||||
- 按钮:`<wd-button>`
|
|
||||||
- 图标:`<wd-icon>`
|
|
||||||
- 弹窗:`<wd-dialog>`
|
|
||||||
- 导航栏:`<wd-nav-bar>`
|
|
||||||
- 标签:`<wd-tag>`
|
|
||||||
- 步骤条:`<wd-steps>`
|
|
||||||
- 加载:`<wd-loading>`
|
|
||||||
- 等等
|
|
||||||
|
|
||||||
### 快速判断
|
|
||||||
|
|
||||||
| 场景 | 使用库 | 组件示例 |
|
|
||||||
|------|--------|----------|
|
|
||||||
| 输入框 | uni-ui | `<uni-easyinput>` |
|
|
||||||
| 下拉选择 | uni-ui | `<uni-data-select>` |
|
|
||||||
| 单选/多选 | uni-ui | `<uni-radio>` / `<uni-checkbox>` |
|
|
||||||
| 日期时间选择 | uni-ui | `<uni-datetime-picker>` |
|
|
||||||
| 按钮 | wot-ui | `<wd-button>` |
|
|
||||||
| 图标 | wot-ui | `<wd-icon>` |
|
|
||||||
| 弹窗/通知 | wot-ui | `<wd-dialog>` / `<wd-toast>` |
|
|
||||||
| 导航栏 | wot-ui | `<wd-nav-bar>` |
|
|
||||||
| 标签/徽标 | wot-ui | `<wd-tag>` / `<wd-badge>` |
|
|
||||||
| 表格展示 | uni-ui | `<uni-table>` |
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
---
|
|
||||||
name: wot-ui-v2
|
|
||||||
description: '回答、生成、重构、排查 wot-ui v2 相关代码时使用。关键词:wot-ui、uni-app、Vue3、wd-、ConfigProvider、useToast、useDialog、Form、Popup、theme、llms-full。适用于组件选型、API 查询、示例页面生成、主题定制、常见坑排查。'
|
|
||||||
argument-hint: '组件名、页面场景、问题描述或主题定制需求'
|
|
||||||
---
|
|
||||||
|
|
||||||
# Wot UI V2 Skill
|
|
||||||
|
|
||||||
这个 skill 用于让 Agent 在处理 wot-ui v2 相关任务时,优先采用组件库既有能力、遵守 uni-app 场景限制,并结合本仓库提供的 `wot` CLI 查询离线知识。
|
|
||||||
|
|
||||||
## 适用场景
|
|
||||||
|
|
||||||
- 用户询问某个 `wd-*` 组件的基础用法、属性、事件、插槽或样式变量。
|
|
||||||
- 需要生成或重构 `uni-app + Vue 3 + TypeScript` 的 wot-ui 页面或组件代码。
|
|
||||||
- 需要在 `ConfigProvider`、主题变量、暗黑模式、国际化、反馈类 hooks、表单等场景下给出正确做法。
|
|
||||||
- 需要排查文档中常见的 `Toast`、`Dialog`、`Popup`、`Tabs`、`Slider`、样式覆盖问题。
|
|
||||||
- 用户只是泛化地提到主题定制,但还没有明确要求按“单文件主题 SCSS + App.vue 只 `@use`”的结构生成时。
|
|
||||||
|
|
||||||
## 推荐流程
|
|
||||||
|
|
||||||
1. 先用本仓库 CLI 或 MCP 工具查组件知识。
|
|
||||||
2. 再根据项目实际安装方式决定导入路径与集成方式。
|
|
||||||
3. 优先复用现成的 `wd-*` 组件、hooks、主题变量与组合模式,不要退化成原生标签堆砌。
|
|
||||||
4. 如果问题涉及约束或坑位,再查阅 [参考知识](./references/overview.md)。
|
|
||||||
5. 如果用户明确要求生成 `src/themes/styles/{主题名}.scss` 单文件主题,并把挂载逻辑收进主题文件,优先切换到 `create-wot-ui-theme` skill。
|
|
||||||
|
|
||||||
## 查询顺序
|
|
||||||
|
|
||||||
1. `wot list` 找组件名。
|
|
||||||
2. `wot info <Component>` 看 props、events、slots、CSS 变量。
|
|
||||||
3. `wot demo <Component>` 看 demo 名称或具体 demo 代码。
|
|
||||||
4. `wot doc <Component>` 看完整 markdown 文档。
|
|
||||||
5. `wot token <Component>` 看主题变量。
|
|
||||||
|
|
||||||
## 工作规则
|
|
||||||
|
|
||||||
- 默认把 wot-ui 视为 `uni-app + Vue 3 + TypeScript` 组件库。
|
|
||||||
- 写页面时优先输出 `script setup` 风格。
|
|
||||||
- 反馈类能力如 `useToast`、`useDialog`、`useNotify`、`useImagePreview`、`useVideoPreview`,除了 hook 调用外,通常还需要页面内显式声明对应组件实例。
|
|
||||||
- 文档里经常出现 `@/uni_modules/wot-ui` 导入路径;如果用户项目采用 npm 安装,应切换成 `@wot-ui/ui`。
|
|
||||||
- 主题定制优先走 `ConfigProvider` 和 CSS 变量,不优先建议深度覆盖内部类名。
|
|
||||||
- 生成代码时尽量沿用组件库文档里的命名和交互模式,例如 `v-model:visible`、`before-confirm`、`confirm`、`change`、`custom-class`、`custom-style`。
|
|
||||||
|
|
||||||
## 参考资料
|
|
||||||
|
|
||||||
- [Wot UI V2 概览](./references/overview.md)
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
# Wot UI V2 Overview
|
|
||||||
|
|
||||||
本文件根据 wot-ui v2 的 `llms-full.txt` 与本仓库现有 CLI 工作流提炼,目标是帮助 Agent 快速掌握适合生成代码与回答问题的高价值知识,而不是逐字复制官方文档。
|
|
||||||
|
|
||||||
## Product Positioning
|
|
||||||
|
|
||||||
- Wot UI v2 是面向 `uni-app` 的 `Vue 3 + TypeScript` 组件库。
|
|
||||||
- 覆盖微信小程序、支付宝小程序、钉钉小程序、H5、APP 等平台。
|
|
||||||
- 组件命名统一为 `wd-*`。
|
|
||||||
- 组件库强调 AI 友好、主题定制、暗黑模式、国际化与跨端一致性。
|
|
||||||
|
|
||||||
## Installation And Integration
|
|
||||||
|
|
||||||
- npm 安装:`pnpm add @wot-ui/ui`
|
|
||||||
- 使用前需要安装 `sass`。
|
|
||||||
- `uni_modules` 安装模式天然支持 easycom 自动引入。
|
|
||||||
- npm 安装模式通常需要配置 vite resolver 或 easycom。
|
|
||||||
- CLI 项目在 npm 模式下可在 `tsconfig.json` 中加入 `@wot-ui/ui/global` 以增强全局组件类型提示。
|
|
||||||
|
|
||||||
## Import Rules
|
|
||||||
|
|
||||||
- npm 安装项目:组合式函数、类型和工具优先从 `@wot-ui/ui` 导入。
|
|
||||||
- `uni_modules` 安装项目:文档中的 `@/uni_modules/wot-ui` 路径通常可直接使用。
|
|
||||||
- 官方文档示例很多基于 `uni_modules` 路径,回答时要按用户项目实际安装方式转换。
|
|
||||||
|
|
||||||
## High Value Conventions
|
|
||||||
|
|
||||||
- 反馈类组件不能依赖全局挂载。页面内通常需要显式写出 `wd-toast`、`wd-dialog`、`wd-notify`、`wd-image-preview`、`wd-video-preview` 等实例。
|
|
||||||
- `useToast`、`useDialog`、`useNotify`、`useQueue` 等 hooks 基于 `provide/inject`,应在 `setup` 中调用。
|
|
||||||
- 页面内如果存在多个 `wd-dialog` 或 `wd-toast`,需要通过 `selector` 区分,否则可能出现实例冲突或重复弹出。
|
|
||||||
- 自定义组件中如果要覆盖 wot-ui 内部样式,小程序环境通常需要把组件配置为 `styleIsolation: 'shared'`。
|
|
||||||
- 在 `Popup`、`ActionSheet`、`DropDownItem` 等延迟渲染弹层里使用 `Slider`、`Tabs` 等依赖尺寸计算的组件时,打开后应调用实例方法重新初始化,例如 `initSlider()` 或 `updateLineStyle()`。
|
|
||||||
|
|
||||||
## Theme And Styling
|
|
||||||
|
|
||||||
- 主题定制优先走 CSS 变量。
|
|
||||||
- Design Token 分三层:基础变量、语义变量、组件变量。
|
|
||||||
- 局部或全局主题可通过 `wd-config-provider` 的 `theme` 和 `theme-vars` 控制。
|
|
||||||
- 深色模式通过 `wd-config-provider theme="dark"` 开启。
|
|
||||||
- 更推荐覆盖语义变量或组件变量,不推荐优先依赖深层 class 选择器覆盖。
|
|
||||||
|
|
||||||
## Common UI Patterns
|
|
||||||
|
|
||||||
- 表单场景优先组合 `wd-form`、`wd-form-item`、`wd-input`、`wd-textarea`、`wd-picker`、`wd-calendar`、`wd-select-picker`。
|
|
||||||
- 弹层类场景优先使用 `wd-popup`、`wd-dialog`、`wd-action-sheet`、`wd-tooltip`、`wd-popover`。
|
|
||||||
- 反馈类场景优先使用 `useToast`、`useDialog`、`useNotify`,不要直接手写临时弹层。
|
|
||||||
- 列表和展示类场景优先考虑 `wd-cell`、`wd-card`、`wd-tag`、`wd-badge`、`wd-empty`、`wd-loadmore`、`wd-skeleton`。
|
|
||||||
- 导航与布局类场景优先考虑 `wd-navbar`、`wd-tabs`、`wd-tabbar`、`wd-sidebar`、`wd-row`、`wd-col`、`wd-gap`。
|
|
||||||
|
|
||||||
## Interaction Patterns
|
|
||||||
|
|
||||||
- 大量组件采用 `v-model` 或 `v-model:visible` 控制状态。
|
|
||||||
- 表单和选择类组件普遍提供 `confirm`、`change`、`close` 等事件。
|
|
||||||
- 反馈组件常通过 hook 返回方法对象,例如 `toast.success()`、`dialog.confirm()`。
|
|
||||||
- `Popover`、`Tooltip`、`SwipeAction` 等场景常与 `useQueue().closeOutside()` 配合,实现点击外部关闭。
|
|
||||||
|
|
||||||
## Component Selection Hints
|
|
||||||
|
|
||||||
- 需要主操作按钮时用 `wd-button`,不要先写原生 `button`。
|
|
||||||
- 需要列表入口、设置页、表单容器时优先用 `wd-cell` 和 `wd-cell-group`。
|
|
||||||
- 需要轻量提示时优先用 `useToast`;需要确认交互时优先用 `useDialog`。
|
|
||||||
- 需要单选或多选弹层时优先用 `wd-select-picker`、`wd-picker`、`wd-cascader`。
|
|
||||||
- 需要统一主题或暗黑模式时优先用 `wd-config-provider`。
|
|
||||||
|
|
||||||
## Common Pitfalls
|
|
||||||
|
|
||||||
- `Toast`、`Dialog` 等函数式调用没有效果,先检查页面里是否声明了对应组件实例。
|
|
||||||
- 同一个页面里多个无 `selector` 的反馈组件可能相互干扰。
|
|
||||||
- npm 模式使用国际化时,开发态可能需要在 Vite 的 `optimizeDeps.exclude` 中排除 `@wot-ui/ui`。
|
|
||||||
- 文档里的导入路径和项目实际安装方式不一致时,回答要主动修正。
|
|
||||||
- 在弹层中直接渲染依赖尺寸测量的组件时,初始化时机往往比 API 本身更关键。
|
|
||||||
|
|
||||||
## AI Response Heuristics
|
|
||||||
|
|
||||||
- 回答基础用法时,优先给最小可运行模板,再补充常用 props。
|
|
||||||
- 生成页面时,优先给完整的 `template + script setup + style` 结构。
|
|
||||||
- 如果项目已使用 wot-ui,不要建议换用其他 UI 库。
|
|
||||||
- 如果 wot-ui 已有现成组件,就不要用原生结构重复造轮子。
|
|
||||||
- 如果用户只问某个组件,优先给该组件最常见 3 到 5 个用法,不要把整份文档全部展开。
|
|
||||||
|
|
||||||
## Repo-Specific Workflow
|
|
||||||
|
|
||||||
- 在本仓库中,优先使用 `wot list`、`wot info`、`wot doc`、`wot demo`、`wot token` 获取组件知识。
|
|
||||||
- 当仓库数据与线上文档不一致时,以用户目标为准,并明确指出仓库离线数据可能需要重新提取。
|
|
||||||
- 若要补数据或修提取逻辑,关注 `scripts/extract.ts`、`data/v2.json`、`src/data/*` 与相应命令实现。
|
|
||||||
@@ -1,83 +1,79 @@
|
|||||||
{
|
{
|
||||||
"name" : "Road_roller",
|
"name": "Road_roller",
|
||||||
"appid" : "__UNI__BA80270",
|
"appid": "__UNI__BA80270",
|
||||||
"description" : "",
|
"description": "",
|
||||||
"versionName" : "0.0.0",
|
"versionName": "0.0.0",
|
||||||
"versionCode" : 0,
|
"versionCode": "000",
|
||||||
"transformPx" : false,
|
"transformPx": false,
|
||||||
"app-plus" : {
|
"app-plus": {
|
||||||
"usingComponents" : true,
|
"usingComponents": true,
|
||||||
"nvueStyleCompiler" : "uni-app",
|
"nvueStyleCompiler": "uni-app",
|
||||||
"compilerVersion" : 3,
|
"compilerVersion": 3,
|
||||||
"splashscreen" : {
|
"splashscreen": {
|
||||||
"alwaysShowBeforeRender" : true,
|
"alwaysShowBeforeRender": true,
|
||||||
"waiting" : true,
|
"waiting": true,
|
||||||
"autoclose" : true,
|
"autoclose": true,
|
||||||
"delay" : 0
|
"delay": 0
|
||||||
},
|
|
||||||
"modules" : {
|
|
||||||
"Bluetooth" : {},
|
|
||||||
"SQLite" : {},
|
|
||||||
"Geolocation" : {}
|
|
||||||
},
|
|
||||||
"distribute" : {
|
|
||||||
"android" : {
|
|
||||||
"permissions" : [
|
|
||||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
|
||||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
|
||||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
|
||||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ios" : {},
|
|
||||||
"sdkConfigs" : {
|
|
||||||
"geolocation" : {
|
|
||||||
"system" : {
|
|
||||||
"__platform__" : [ "android" ]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"screenOrientation" : [ "landscape-primary" ]
|
|
||||||
},
|
},
|
||||||
"quickapp" : {},
|
"modules": {
|
||||||
"mp-weixin" : {
|
"Bluetooth": {},
|
||||||
"appid" : "",
|
"SQLite": {},
|
||||||
"setting" : {
|
"Geolocation": {}
|
||||||
"urlCheck" : false
|
|
||||||
},
|
|
||||||
"usingComponents" : true,
|
|
||||||
"darkmode" : true,
|
|
||||||
"themeLocation" : "theme.json"
|
|
||||||
},
|
},
|
||||||
"mp-alipay" : {
|
"distribute": {
|
||||||
"usingComponents" : true
|
"android": {
|
||||||
|
"permissions": [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ios": {},
|
||||||
|
"sdkConfigs": {}
|
||||||
},
|
},
|
||||||
"mp-baidu" : {
|
"screenOrientation": [
|
||||||
"usingComponents" : true
|
"landscape-primary"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"quickapp": {},
|
||||||
|
"mp-weixin": {
|
||||||
|
"appid": "",
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": false
|
||||||
},
|
},
|
||||||
"mp-toutiao" : {
|
"usingComponents": true,
|
||||||
"usingComponents" : true
|
"darkmode": true,
|
||||||
},
|
"themeLocation": "theme.json"
|
||||||
"uniStatistics" : {
|
},
|
||||||
"enable" : false
|
"mp-alipay": {
|
||||||
},
|
"usingComponents": true
|
||||||
"vueVersion" : "3",
|
},
|
||||||
"h5" : {
|
"mp-baidu": {
|
||||||
"darkmode" : true,
|
"usingComponents": true
|
||||||
"themeLocation" : "theme.json"
|
},
|
||||||
}
|
"mp-toutiao": {
|
||||||
}
|
"usingComponents": true
|
||||||
|
},
|
||||||
|
"uniStatistics": {
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"vueVersion": "3",
|
||||||
|
"h5": {
|
||||||
|
"darkmode": true,
|
||||||
|
"themeLocation": "theme.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -163,9 +163,17 @@ const wifi = {
|
|||||||
const wm = getWifiManager()
|
const wm = getWifiManager()
|
||||||
|
|
||||||
// 检查 WiFi 是否开启
|
// 检查 WiFi 是否开启
|
||||||
if (!invoke(wm, 'isWifiEnabled')) {
|
const isEnabled = invoke(wm, 'isWifiEnabled')
|
||||||
console.warn('WiFi 未开启,无法扫描')
|
console.log('WiFi 是否开启:', isEnabled)
|
||||||
resolve([])
|
|
||||||
|
if (!isEnabled) {
|
||||||
|
console.warn('WiFi 未开启,返回模拟数据')
|
||||||
|
// 模拟器或 WiFi 未开启时返回模拟数据
|
||||||
|
resolve([
|
||||||
|
{ SSID: 'MOCK_WIFI_1', BSSID: 'AA:BB:CC:DD:EE:01', signalStrength: -45, frequency: 5180, connected: false },
|
||||||
|
{ SSID: 'MOCK_WIFI_2', BSSID: 'AA:BB:CC:DD:EE:02', signalStrength: -65, frequency: 2437, connected: false },
|
||||||
|
{ SSID: 'TestNetwork', BSSID: 'AA:BB:CC:DD:EE:03', signalStrength: -72, frequency: 2412, connected: false },
|
||||||
|
])
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user