create-vela-workflow 1.0.0

package/templates/.github/rules/vela-coding-convention.md

@@ -0,0 +1,324 @@
+---
+description: Vela 快应用编码规范 — 基于官方文档（https://iot.mi.com/vela/quickapp/zh/guide/）的强制编码约束
+alwaysApply: true
+---
+
+# Vela 快应用编码规范
+
+> ⚠️ 本文件为强制执行规则，AI 必须无条件遵守。所有生成的 Vela 快应用代码必须严格符合官方文档规范。
+
+---
+
+## 一、组件导入规范（最重要）
+
+### 1.1 `<import>` 标签导入（模板层）
+
+**必须**在 `<template>` 标签之前使用 `<import>` 标签声明组件：
+
+```html
+<import name="header" src="../../components/Header"></import>
+<import name="searchbar" src="../../components/SearchBar"></import>
+
+<template>
+  <div>
+    <header title="标题" />
+  </div>
+</template>
+```
+
+### 1.2 组件命名规则
+
+| 规则 | 说明 | 示例 |
+|------|------|------|
+| `name` 属性 | 小写字母，无分隔符 | `name="appcard"` |
+| 模板使用 | 与 `name` 一致的小写标签 | `<appcard />` |
+| `src` 路径 | 不带 `.ux` 后缀 | `src="../../components/Header"` |
+
+### 1.3 禁止行为
+
+| ❌ 错误 | ✅ 正确 |
+|---------|---------|
+| `import Header from './Header.ux'` | `<import name="header" src="./Header"></import>` |
+| `<Header title="x" />` | `<header title="x" />` |
+| `src="../../components/Header.ux"` | `src="../../components/Header"` |
+
+---
+
+## 二、.ux 文件结构规范
+
+### 2.1 三段式结构
+
+每个 `.ux` 文件必须包含三部分，顺序固定：
+
+```html
+<import name="comp" src="./Comp"></import>
+
+<template>
+  <!-- 只能有一个根节点 -->
+  <div class="container">
+    <comp />
+  </div>
+</template>
+
+<style>
+.container { flex-direction: column; }
+</style>
+
+<script>
+export default {
+  props: [],
+  data: {},
+  onInit() {},
+  onDestroy() {}
+}
+</script>
+```
+
+### 2.2 模板规则
+
+- **根节点唯一**：`<template>` 内只能有一个根节点
+- **组件标签小写**：所有自定义组件标签必须小写
+- **事件绑定**：使用 `on` 前缀（`onclick`、`ontap`、`onchange`）
+- **数据绑定**：使用 `{{}}` 双花括号语法
+
+### 2.3 样式规则
+
+- **Flexbox 布局**：所有布局使用 Flexbox
+- **单位省略**：数字默认为 px，无需写单位
+- **类名规范**：使用 kebab-case（`app-card`）
+- **禁止 `@import`**：使用 `<style src="./style.css"></style>` 外部引入
+
+---
+
+## 三、数据绑定规范
+
+### 3.1 组件 Props
+
+```html
+<!-- 父组件传递 -->
+<appcard app="{{item}}" ontap="onTap" />
+
+<!-- 子组件接收 -->
+<script>
+export default {
+  props: ['app'],
+  // props 自动绑定到 this
+}
+</script>
+```
+
+### 3.2 事件处理
+
+```html
+<!-- 事件绑定：on + 事件名 -->
+<button onclick="handleClick">点击</button>
+<list onscroll="handleScroll">...</list>
+
+<!-- 子组件触发事件 -->
+this.$emit('tap', { app: this.app });
+```
+
+### 3.3 条件渲染
+
+```html
+<div if="{{show}}">显示内容</div>
+<div elif="{{other}}">其他内容</div>
+<div else>默认内容</div>
+```
+
+### 3.4 列表渲染
+
+```html
+<list>
+  <list-item for="{{items}}">
+    <text>{{$idx}} - {{$item.name}}</text>
+  </list-item>
+</list>
+```
+
+---
+
+## 四、生命周期规范
+
+### 4.1 页面生命周期
+
+```javascript
+export default {
+  data: {},           // 页面数据（非 private）
+
+  onInit() {},        // 页面初始化（最早触发）
+  onReady() {},       // 页面渲染完成
+  onShow() {},        // 页面显示
+  onHide() {},        // 页面隐藏
+  onDestroy() {}      // 页面销毁（必须清理资源）
+}
+```
+
+### 4.2 组件生命周期
+
+```javascript
+export default {
+  props: [],
+  data: {},
+
+  onInit() {},        // 组件初始化
+  onReady() {},       // 组件渲染完成
+  onDestroy() {}      // 组件销毁
+}
+```
+
+### 4.3 资源清理（必须）
+
+```javascript
+onDestroy() {
+  // 清理定时器
+  if (this.timer) clearInterval(this.timer);
+  // 清理事件监听
+  // 清理网络请求
+}
+```
+
+---
+
+## 五、系统 API 调用规范
+
+### 5.1 导入方式
+
+```javascript
+import router from '@system.router';
+import fetch from '@system.fetch';
+import storage from '@system.storage';
+import file from '@system.file';
+```
+
+### 5.2 常用 API 示例
+
+```javascript
+// 路由跳转
+router.push({ uri: '/pages/detail', params: { id: '1' } });
+router.back();
+
+// 网络请求
+fetch.fetch({
+  url: 'https://api.example.com/data',
+  method: 'GET',
+  responseType: 'json',
+  success: (response) => { /* 处理响应 */ },
+  fail: (data, code) => { /* 处理错误 */ }
+});
+
+// 本地存储
+storage.set({ key: 'user', value: JSON.stringify(data) });
+storage.get({ key: 'user', success: (data) => { /* ... */ } });
+```
+
+### 5.3 错误处理（必须）
+
+所有 API 调用必须包含错误处理：
+
+```javascript
+fetch.fetch({
+  url: apiUrl,
+  success: (response) => {
+    // 成功处理
+  },
+  fail: (data, code) => {
+    console.error('请求失败:', code);
+    // 错误提示
+  }
+});
+```
+
+---
+
+## 六、manifest.json 规范
+
+### 6.1 必需字段
+
+```json
+{
+  "package": "com.company.appname",
+  "name": "应用名称",
+  "icon": "/common/logo.png",
+  "versionCode": 1,
+  "minPlatformVersion": 1200,
+  "deviceTypeList": ["watch"],
+  "config": {
+    "logLevel": "log",
+    "designWidth": 480
+  },
+  "features": [
+    { "name": "system.router" }
+  ],
+  "router": {
+    "entry": "pages/index",
+    "pages": {
+      "pages/index": { "component": "index" }
+    }
+  }
+}
+```
+
+### 6.2 features 声明
+
+使用哪个 API 就必须声明对应的 feature：
+
+| API | feature 声明 |
+|-----|-------------|
+| `@system.router` | `{ "name": "system.router" }` |
+| `@system.fetch` | `{ "name": "system.fetch" }` |
+| `@system.storage` | `{ "name": "system.storage" }` |
+| `@system.file` | `{ "name": "system.file" }` |
+
+---
+
+## 七、项目目录规范
+
+```
+project/
+├── package.json          # aiot-toolkit（禁止 hap-toolkit）
+├── src/
+│   ├── manifest.json
+│   ├── app.ux
+│   ├── pages/
+│   │   └── PageName/
+│   │       └── index.ux
+│   ├── components/
+│   │   └── CompName.ux
+│   ├── common/
+│   │   └── logo.png
+│   └── i18n/
+│       ├── defaults.json
+│       └── zh-CN.json
+```
+
+---
+
+## 八、自检清单
+
+每次生成代码前必须逐项检查：
+
+### 组件导入
+- [ ] 使用 `<import>` 标签而非 ES6 `import`
+- [ ] `src` 路径不带 `.ux` 后缀
+- [ ] 模板中组件标签全部小写
+- [ ] `name` 属性为小写字母
+
+### 文件结构
+- [ ] `<template>` 只有一个根节点
+- [ ] 三段式顺序：`<import>` → `<template>` → `<style>` → `<script>`
+- [ ] 样式使用 Flexbox
+
+### 数据与事件
+- [ ] 事件绑定使用 `on` 前缀
+- [ ] 列表渲染使用 `$idx` 和 `$item`
+- [ ] 条件渲染使用 `if/elif/else`
+
+### API 调用
+- [ ] 已导入所需系统 API
+- [ ] 已在 manifest.json 声明 features
+- [ ] 所有 API 调用包含错误处理
+
+### 资源清理
+- [ ] `onDestroy()` 中清理定时器
+- [ ] `onDestroy()` 中清理事件监听

package/templates/.github/rules/vela-css.md

@@ -0,0 +1,217 @@
+---
+description: CSS 编码规范 — 选择器限制、嵌套规则、样式编写约束
+alwaysApply: true
+---
+
+# Vela 快应用 CSS 编码规范
+
+> ⚠️ 本文件为强制执行规则，AI 必须无条件遵守。
+
+## 选择器规则
+
+### 只允许使用 class 选择器
+
+**禁止**使用以下选择器类型：
+
+| 禁止类型 | 示例 | 原因 |
+|----------|------|------|
+| 元素选择器 | `div { }` | 耦合度高，难以维护 |
+| ID 选择器 | `#header { }` | 特异性过高 |
+| 后代选择器 | `.parent .child { }` | 性能差，作用域不可控 |
+| 子选择器 | `.parent > .child { }` | 嵌套耦合 |
+| 伪类选择器 | `.item:hover { }` | 穿戴设备无鼠标交互 |
+| 伪元素选择器 | `.item::before { }` | 不支持或兼容性差 |
+| 属性选择器 | `[type="text"] { }` | 不支持 |
+| 通配选择器 | `* { }` | 不支持 |
+
+**正确写法** ✅：
+
+```css
+.page-container {
+  width: 480px;
+  height: 480px;
+}
+
+.section-title {
+  font-size: 28px;
+  color: #ffffff;
+}
+
+.app-card {
+  background-color: #1a1a1a;
+  border-radius: 12px;
+}
+```
+
+**错误写法** ❌：
+
+```css
+/* 后代选择器 */
+.page .title { }
+
+/* 伪类 */
+.item:active { }
+
+/* 元素选择器 */
+div { padding: 10px; }
+```
+
+## 禁止嵌套写法
+
+Vela 快应用 **不支持** CSS 嵌套语法，所有样式必须扁平编写。
+
+**正确写法** ✅：
+
+```css
+.parent {
+  flex-direction: column;
+}
+
+.child {
+  font-size: 24px;
+}
+
+.grandchild {
+  color: #ffffff;
+}
+```
+
+**错误写法** ❌：
+
+```css
+/* 禁止嵌套 */
+.parent {
+  flex-direction: column;
+
+  .child {
+    font-size: 24px;
+
+    .grandchild {
+      color: #ffffff;
+    }
+  }
+}
+```
+
+## 不推荐使用 Less/Sass
+
+- **禁止**使用 Less、Sass、SCSS 等 CSS 预处理器
+- 所有样式使用**原生 CSS** 编写
+- 变量、混合宏等功能不被 Vela 快应用支持
+
+**正确写法** ✅：
+
+```css
+/* 使用原生 CSS */
+.primary-button {
+  background-color: #4CAF50;
+  border-radius: 20px;
+}
+
+.secondary-button {
+  background-color: #2196F3;
+  border-radius: 20px;
+}
+```
+
+**错误写法** ❌：
+
+```less
+/* Less 变量 */
+@primary-color: #4CAF50;
+
+.primary-button {
+  background-color: @primary-color;
+  .border-radius();
+}
+
+/* Less 混合 */
+.border-radius() {
+  border-radius: 20px;
+}
+```
+
+## class 命名规范
+
+| 规则 | 说明 | 示例 |
+|------|------|------|
+| kebab-case | 多单词用连字符连接 | `app-card`, `section-title` |
+| 语义化 | 名称体现用途 | `user-info` 而非 `info1` |
+| 前缀区分 | 组件级样式加前缀 | `app-card__icon` |
+| 避免缩写 | 使用完整单词 | `container` 而非 `ctn` |
+
+**推荐命名模式**：
+
+```
+{模块}-{元素}
+{模块}-{状态}
+
+示例：
+app-card          — 应用卡片
+app-card__icon    — 卡片中的图标
+app-card--active  — 卡片激活状态
+section-title     — 区域标题
+search-input      — 搜索输入框
+```
+
+## 样式编写规范
+
+### 属性顺序
+
+推荐按以下顺序编写 CSS 属性：
+
+```css
+.custom-class {
+  /* 1. 尺寸 */
+  width: 100%;
+  height: 80px;
+
+  /* 2. 布局 */
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  /* 3. 间距 */
+  padding: 12px;
+  margin-bottom: 16px;
+
+  /* 4. 外观 */
+  background-color: #1a1a1a;
+  border-radius: 12px;
+
+  /* 5. 文字 */
+  font-size: 28px;
+  color: #ffffff;
+}
+```
+
+### 颜色规范
+
+| 用途 | 推荐值 | 说明 |
+|------|--------|------|
+| 页面背景 | `#000000` | 深色主题 |
+| 卡片背景 | `#1a1a1a` | 次级背景 |
+| 主文字 | `#ffffff` | 标题、正文 |
+| 辅助文字 | `#888888` | 次要信息 |
+| 禁用文字 | `#666666` | 不可操作 |
+| 主题色 | `#4CAF50` | 按钮、强调 |
+| 警告色 | `#FF9800` | 提示信息 |
+| 错误色 | `#FF6B6B` | 错误、删除 |
+
+### 尺寸单位
+
+- 使用 **px** 作为唯一单位
+- 不使用 `rem`、`em`、`%`（除 width: 100% 等特殊情况）
+- 不使用 `vw`、`vh` 视口单位
+
+## 代码自检清单（CSS 部分）
+
+- [ ] 所有选择器均为 class 选择器
+- [ ] 无后代选择器、子选择器
+- [ ] 无伪类、伪元素选择器
+- [ ] 无嵌套写法
+- [ ] 无 Less/Sass/SCSS 语法
+- [ ] class 命名符合 kebab-case 规范
+- [ ] 样式属性顺序合理
+- [ ] 颜色使用推荐色值
+- [ ] 尺寸单位使用 px