deveco-harness 0.1.0

package/skills/arkts-error-fixes/reference/avoid_area_type_errors.md

@@ -0,0 +1,59 @@
+# AvoidArea Type Error
+
+## 错误描述
+
+在使用 `window.AvoidArea` 类型时，如果缺少 `visible` 属性，会导致类型错误。
+
+## 错误示例
+
+```typescript
+@State avoidArea: window.AvoidArea = {
+  topRect: { left: 0, top: 0, width: 0, height: 0 },
+  bottomRect: { left: 0, top: 0, width: 0, height: 0 },
+  leftRect: { left: 0, top: 0, width: 0, height: 0 },
+  rightRect: { left: 0, top: 0, width: 0, height: 0 }
+};
+```
+
+**错误信息：**
+```
+Type '{ topRect: { left: number; top: number; width: number; height: number; }; bottomRect: { left: number; top: number; width: number; height: number; }; leftRect: { left: number; top: number; width: number; height: number; }; rightRect: { left: number; top: number; width: number; height: number; }; }' is missing the following properties from type 'AvoidArea': visible
+```
+
+## 解决方案
+
+在 `AvoidArea` 对象中添加 `visible: false` 属性。
+
+```typescript
+@State avoidArea: window.AvoidArea = {
+  topRect: { left: 0, top: 0, width: 0, height: 0 },
+  bottomRect: { left: 0, top: 0, width: 0, height: 0 },
+  leftRect: { left: 0, top: 0, width: 0, height: 0 },
+  rightRect: { left: 0, top: 0, width: 0, height: 0 },
+  visible: false
+};
+```
+
+## 简单示例
+
+```typescript
+@Entry
+@Component
+struct SimpleExample {
+  @State avoidArea: window.AvoidArea = {
+    topRect: { left: 0, top: 0, width: 0, height: 0 },
+    bottomRect: { left: 0, top: 0, width: 0, height: 0 },
+    leftRect: { left: 0, top: 0, width: 0, height: 0 },
+    rightRect: { left: 0, top: 0, width: 0, height: 0 },
+    visible: false
+  };
+
+  build() {
+    Text(`顶部高度: ${this.avoidArea.topRect.height}`)
+  }
+}
+```
+
+## 详细代码示例
+
+- [AvoidAreaTypeError.ets](../assets/AvoidAreaTypeError.ets) - 完整的 AvoidArea 类型使用示例，包含窗口获取和避让区域监听

package/skills/arkts-error-fixes/reference/breakpoint_type_errors.md

@@ -0,0 +1,122 @@
+# BreakpointType 类型错误
+
+## 错误描述
+
+在使用 GridRow 组件时，直接使用 `BreakpointType` 类型会导致类型不匹配错误。`BreakpointType` 是一个枚举类型，不能直接与字符串类型进行类型转换。
+
+## 错误示例
+
+```typescript
+import { mediaquery, UIContext } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct BreakpointTypeError {
+  @State currentBreakpoint: string = 'sm';
+  private smListener: mediaquery.MediaQueryListener | null = null;
+  private mdListener: mediaquery.MediaQueryListener | null = null;
+  private lgListener: mediaquery.MediaQueryListener | null = null;
+
+  aboutToAppear() {
+    const mediaQuery = this.getUIContext().getMediaQuery();
+    
+    this.smListener = mediaQuery.matchMediaSync('(0vp<=width<600vp)');
+    this.mdListener = mediaQuery.matchMediaSync('(600vp<=width<840vp)');
+    this.lgListener = mediaQuery.matchMediaSync('(840vp<=width)');
+    
+    const smCallback = (result: mediaquery.MediaQueryResult): void => {
+      if (result.matches) {
+        this.currentBreakpoint = 'sm';
+      }
+    };
+    const mdCallback = (result: mediaquery.MediaQueryResult): void => {
+      if (result.matches) {
+        this.currentBreakpoint = 'md';
+      }
+    };
+    const lgCallback = (result: mediaquery.MediaQueryResult): void => {
+      if (result.matches) {
+        this.currentBreakpoint = 'lg';
+      }
+    };
+    
+    if (this.smListener) {
+      this.smListener.on('change', smCallback);
+    }
+    if (this.mdListener) {
+      this.mdListener.on('change', mdCallback);
+    }
+    if (this.lgListener) {
+      this.lgListener.on('change', lgCallback);
+    }
+  }
+
+  aboutToDisappear() {
+    if (this.smListener) {
+      this.smListener.off('change');
+    }
+    if (this.mdListener) {
+      this.mdListener.off('change');
+    }
+    if (this.lgListener) {
+      this.lgListener.off('change');
+    }
+  }
+
+  build() {
+    Column() {
+      Text(`当前断点: ${this.currentBreakpoint}`)
+    }
+  }
+}
+```
+
+## 解决方案
+
+### 方案一：使用字符串类型
+
+直接使用字符串类型来表示断点，而不是使用 `BreakpointType` 枚举类型。
+
+```typescript
+@State currentBreakpoint: string = 'sm';
+```
+
+### 方案二：使用 SimpleBreakpointType
+
+如果需要使用类型定义，可以使用 `SimpleBreakpointType` 类型别名。
+
+```typescript
+type SimpleBreakpointType = 'sm' | 'md' | 'lg';
+
+@State currentBreakpoint: SimpleBreakpointType = 'sm';
+```
+
+## 简单示例
+
+```typescript
+@Entry
+@Component
+struct BreakpointExample {
+  @State currentBreakpoint: string = 'sm';
+
+  build() {
+    if (this.currentBreakpoint === 'lg') {
+      Row() {
+        Text('lg断点布局')
+      }
+    } else if (this.currentBreakpoint === 'md') {
+      Column() {
+        Text('md断点布局')
+      }
+    } else {
+      Column() {
+        Text('sm断点布局')
+      }
+    }
+  }
+}
+```
+
+## 详细代码示例
+
+- [BreakpointTypeError.ets](../assets/BreakpointTypeError.ets) - 完整的断点类型错误修复示例，包含媒体查询监听和断点判断逻辑

package/skills/arkts-error-fixes/reference/catch_clause_type_errors.md

@@ -0,0 +1,89 @@
+# Catch Clause Variable Type Annotation Error
+
+## 错误描述
+
+在 ArkTS 中，catch 子句的变量类型注解只能使用 `any` 或 `unknown`，不能使用其他具体类型。
+
+## 错误示例
+
+```typescript
+try {
+  await someAsyncOperation();
+} catch (error: Error) {
+  console.error('发生错误:', error);
+}
+```
+
+**错误信息：**
+```
+Catch clause variable type annotation must be 'any' or 'unknown' if specified.
+```
+
+## 解决方案
+
+### 方案1：移除类型注解（推荐）
+
+```typescript
+try {
+  await someAsyncOperation();
+} catch (error) {
+  console.error('发生错误:', error);
+}
+```
+
+### 方案2：使用 `any` 类型
+
+```typescript
+try {
+  await someAsyncOperation();
+} catch (error: any) {
+  console.error('发生错误:', error);
+}
+```
+
+### 方案3：使用 `unknown` 类型（更安全）
+
+```typescript
+try {
+  await someAsyncOperation();
+} catch (error: unknown) {
+  console.error('发生错误:', error);
+}
+```
+
+## 详细说明
+
+ArkTS 限制了 catch 子句中变量的类型注解，这是为了确保类型安全和代码的一致性。推荐的做法是：
+
+1. **不使用类型注解**：让 TypeScript 自动推断类型
+2. **使用 `unknown`**：如果必须使用类型注解，`unknown` 是最安全的选择，因为它要求在使用前进行类型检查
+3. **避免使用 `any`**：虽然允许，但会失去类型安全
+
+## 简单示例
+
+```typescript
+import { camera } from '@kit.CameraKit';
+
+@Entry
+@Component
+struct CameraExample {
+  private cameraManager: camera.CameraManager | null = null;
+
+  async aboutToAppear() {
+    try {
+      const context = this.getUIContext().getHostContext() as common.UIAbilityContext;
+      this.cameraManager = camera.getCameraManager(context);
+    } catch (error) {
+      console.error('初始化相机失败:', error);
+    }
+  }
+
+  build() {
+    Text('Camera Example')
+  }
+}
+```
+
+## 详细代码示例
+
+> [CatchClauseTypeError.ets](../assets/CatchClauseTypeError.ets) - 完整的 catch 子句类型注解错误示例和修复方案

package/skills/arkts-error-fixes/reference/color_consistency_errors.md

@@ -0,0 +1,209 @@
+# 颜色一致性错误解决方案
+
+## 问题描述
+
+在 HarmonyOS ArkUI 开发中，使用硬编码的颜色值（如 `#FFFFFF`、`#F5F5F5`）会触发编译警告：
+
+```
+It is recommended that you use layered parameters for easier color mode switching and theme color changing.
+```
+
+这个警告建议使用系统颜色资源，以便更好地支持深色模式切换和主题颜色变化。
+
+## 问题示例
+
+```typescript
+// ❌ 不推荐：硬编码颜色
+Column() {
+  Text('内容')
+    .backgroundColor('#FFFFFF')  // 警告
+    .fontColor('#333333')       // 警告
+}
+```
+
+## 推荐解决方案
+
+使用系统颜色资源 `$r('sys.color.ohos_id_color_*')` 替代硬编码颜色：
+
+```typescript
+// ✅ 推荐：使用系统颜色资源
+Column() {
+  Text('内容')
+    .backgroundColor($r('sys.color.ohos_id_color_background'))
+    .fontColor($r('sys.color.ohos_id_color_text_primary'))
+}
+```
+
+## 常用系统颜色资源
+
+| 系统颜色资源 | 用途 | 对应硬编码颜色 |
+|------------|------|--------------|
+| `ohos_id_color_background` | 背景色 | `#FFFFFF` |
+| `ohos_id_color_sub_background` | 次级背景色 | `#F5F5F5` |
+| `ohos_id_color_text_primary` | 主要文字颜色 | `#333333` |
+| `ohos_id_color_text_secondary` | 次要文字颜色 | `#666666` |
+| `ohos_id_color_text_tertiary` | 第三级文字颜色 | `#999999` |
+| `ohos_id_color_list_separator` | 列表分割线 | `#E5E5E5` |
+| `ohos_id_color_primary` | 主题主色 | `#007DFF` |
+| `ohos_id_color_emphasize` | 强调色 | `#FF0000` |
+
+## 迁移步骤
+
+### 1. 识别硬编码颜色
+
+```typescript
+// 查找代码中的硬编码颜色
+.backgroundColor('#FFFFFF')
+.backgroundColor('#F5F5F5')
+.backgroundColor('#007DFF')
+```
+
+### 2. 替换为系统颜色资源
+
+```typescript
+// 替换为对应的系统颜色
+.backgroundColor($r('sys.color.ohos_id_color_background'))
+.backgroundColor($r('sys.color.ohos_id_color_sub_background'))
+.backgroundColor($r('sys.color.ohos_id_color_primary'))
+```
+
+### 3. 处理特殊颜色
+
+对于没有直接对应的系统颜色，可以使用 `ResourceColor` 类型：
+
+```typescript
+// 自定义颜色
+.backgroundColor('#FF5722')
+
+// 或使用资源引用
+.backgroundColor($r('app.color.custom_background'))
+```
+
+## 完整示例
+
+```typescript
+@Entry
+@Component
+struct ColorConsistencyExample {
+  build() {
+    Column() {
+      // 卡片容器
+      Column() {
+        Text('标题')
+          .fontSize(18)
+          .fontWeight(FontWeight.Bold)
+          .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        
+        Text('这是内容描述')
+          .fontSize(14)
+          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
+          .margin({ top: 8 })
+        
+        Button('操作按钮')
+          .backgroundColor($r('sys.color.ohos_id_color_primary'))
+          .fontColor($r('sys.color.ohos_id_color_text_primary_contrast'))
+          .margin({ top: 16 })
+      }
+      .width('100%')
+      .padding(16)
+      .backgroundColor($r('sys.color.ohos_id_color_background'))
+      .borderRadius(8)
+    }
+    .width('100%')
+    .height('100%')
+    .padding(16)
+    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
+  }
+}
+```
+
+> [查看完整示例](../assets/ColorConsistencyError.ets)
+
+## 自定义颜色资源
+
+如果需要使用自定义颜色，可以在 `resources/base/element/color.json` 中定义：
+
+```json
+{
+  "color": [
+    {
+      "name": "custom_primary",
+      "value": "#007DFF"
+    },
+    {
+      "name": "custom_background",
+      "value": "#F5F5F5"
+    }
+  ]
+}
+```
+
+然后在代码中使用：
+
+```typescript
+.backgroundColor($r('app.color.custom_primary'))
+.backgroundColor($r('app.color.custom_background'))
+```
+
+## 深色模式适配
+
+使用系统颜色资源会自动适配深色模式：
+
+```typescript
+// 浅色模式：#FFFFFF
+// 深色模式：#1A1A1A
+.backgroundColor($r('sys.color.ohos_id_color_background'))
+
+// 浅色模式：#333333
+// 深色模式：#E5E5E5
+.fontColor($r('sys.color.ohos_id_color_text_primary'))
+```
+
+## 注意事项
+
+1. **资源引用语法**：使用 `$r('sys.color.资源名')` 或 `$r('app.color.资源名')`
+
+2. **系统 vs 应用**：系统颜色使用 `sys.color.*`，应用自定义颜色使用 `app.color.*`
+
+3. **深色模式**：系统颜色会自动适配深色模式，无需手动处理
+
+4. **主题切换**：系统颜色会跟随系统主题变化，提供更好的用户体验
+
+5. **兼容性**：系统颜色资源从 API 9 开始支持
+
+## 相关 API 参考
+
+- [系统颜色资源](https://developer.harmonyos.com/cn/docs/documentation/references/arkui-ts-resource-color)
+- [资源管理](https://developer.harmonyos.com/cn/docs/documentation/references/arkui-ts-resource-manager)
+- [深色模式适配](https://developer.harmonyos.com/cn/docs/documentation/guides/arkui-ts-dark-mode)
+
+## 迁移检查清单
+
+- [ ] 识别所有硬编码颜色值
+- [ ] 将硬编码颜色替换为系统颜色资源
+- [ ] 测试浅色模式下的显示效果
+- [ ] 测试深色模式下的显示效果
+- [ ] 验证主题切换是否正常
+- [ ] 确认编译警告已消失
+
+## 常见问题
+
+### Q: 为什么要使用系统颜色资源？
+
+A: 系统颜色资源可以自动适配深色模式和主题切换，提供更好的用户体验，同时减少维护成本。
+
+### Q: 所有颜色都必须使用系统资源吗？
+
+A: 不是。对于品牌色等特殊颜色，可以使用自定义颜色资源或硬编码值。但对于通用UI元素，建议使用系统颜色。
+
+### Q: 如何在深色模式下使用不同的颜色？
+
+A: 使用系统颜色资源会自动处理深色模式。如果需要自定义深色模式颜色，可以在 `resources/dark/element/color.json` 中定义。
+
+### Q: 可以混合使用系统颜色和硬编码颜色吗？
+
+A: 可以，但不推荐。建议统一使用系统颜色资源以保持一致性。
+
+### Q: 如何查看所有可用的系统颜色资源？
+
+A: 参考 HarmonyOS 官方文档中的系统颜色资源列表，或使用 DevEco Studio 的代码提示查看可用资源。

package/skills/arkts-error-fixes/reference/color_property_errors.md

@@ -0,0 +1,136 @@
+# Color Property Errors
+
+## Error: `Property 'XXX' does not exist on type 'typeof Color'`
+
+### Error Message
+```
+Property 'LightBlue' does not exist on type 'typeof Color'
+```
+
+### Cause
+The `Color` class in ArkTS does not have all of the color properties that might be expected. Some color names like `LightBlue`, `DarkGray`, etc. are not available. Using these properties will cause compilation errors.
+
+### Solution
+Use hex color values (`#RRGGBB` or `#AARRGGBB`) instead of non-existent `Color` properties.
+
+### Key Points
+- Use hex color values instead of non-existent Color properties
+- Hex format: `#RRGGBB` for RGB, `#AARRGGBB` for ARGB
+- Common colors: `#FF0000` (red), `#00FF00` (green), `#0000FF` (blue)
+- Use layered parameters for theme-aware colors
+
+### Basic Pattern
+```typescript
+// ❌ Wrong: Using non-existent Color property
+Text('Hello')
+  .fontColor(Color.LightBlue)
+
+// ✅ Correct: Using hex color value
+Text('Hello')
+  .fontColor('#ADD8E6')
+```
+
+### Common Color Replacements
+```typescript
+// Light colors
+Color.LightBlue  -> '#ADD8E6'
+Color.LightGreen -> '#90EE90'
+Color.LightGray  -> '#D3D3D3'
+Color.LightCyan  -> '#E0FFFF'
+
+// Dark colors
+Color.DarkBlue   -> '#00008B'
+Color.DarkGreen  -> '#006400'
+Color.DarkGray   -> '#A9A9A9'
+Color.DarkCyan   -> '#008B8B'
+
+// Other colors
+Color.Pink       -> '#FFC0CB'
+Color.Orange     -> '#FFA500'
+Color.Purple     -> '#800080'
+Color.Brown      -> '#A52A2A'
+Color.Gold       -> '#FFD700'
+Color.Silver     -> '#C0C0C0'
+```
+
+### Common Hex Colors
+```typescript
+// Primary colors
+'#FF0000'  // Red
+'#00FF00'  // Green
+'#0000FF'  // Blue
+
+// Secondary colors
+'#FFFF00'  // Yellow
+'#FF00FF'  // Magenta
+'#00FFFF'  // Cyan
+
+// Grayscale
+'#FFFFFF'  // White
+'#F5F5F5'  // Light gray
+'#CCCCCC'  // Medium gray
+'#999999'  // Dark gray
+'#666666'  // Darker gray
+'#333333'  // Very dark gray
+'#000000'  // Black
+
+// UI colors
+'#007DFF'  // Primary blue
+'#FF6B00'  // Orange
+'#00C853'  // Green
+'#FF1744'  // Red
+'#651FFF'  // Purple
+'#00B0FF'  // Light blue
+```
+
+### Color Properties
+```typescript
+// Text color
+.fontColor('#FF0000')
+
+// Background color
+.backgroundColor('#00FF00')
+
+// Border color
+.borderColor('#0000FF')
+
+// Shadow color
+.shadow({ radius: 10, color: '#FF0000' })
+```
+
+### Detailed Examples
+For more detailed code examples, see:
+- [Basic Color Usage](../assets/ColorPropertyError.ets#L8-L12)
+- [Text Color Pattern](../assets/ColorPropertyError.ets#L14-L18)
+- [Background Color Pattern](../assets/ColorPropertyError.ets#L20-L24)
+- [Theme Switching](../assets/ColorPropertyError.ets#L26-L36)
+
+### Best Practices
+1. **Use hex values**: Always use hex color values instead of non-existent Color properties
+2. **Define constants**: Create color constants for reuse
+3. **Use resources**: Use resource references for theme-aware colors
+4. **Document colors**: Add comments explaining color choices
+5. **Test contrast**: Ensure text has sufficient contrast with background
+
+### Common Mistakes
+```typescript
+// ❌ Wrong: Using non-existent Color property
+Text('Hello')
+  .fontColor(Color.LightBlue)
+
+// ❌ Wrong: Using non-existent Color property
+Text('Hello')
+  .fontColor(Color.DarkGray)
+
+// ✅ Correct: Using hex color value
+Text('Hello')
+  .fontColor('#ADD8E6')
+
+// ✅ Correct: Using hex color value
+Text('Hello')
+  .fontColor('#A9A9A9')
+```
+
+### Related Files
+- [Code Example](../assets/ColorPropertyError.ets)
+- [ArkTS UI Components](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-uicomponent)