利用AI开发我又又上架了一个鸿蒙产品——青蓝程序员工具箱

我又又上架了一个鸿蒙作品------青蓝程序员工具箱

大家好久不见了，我是云杰。最近真的是太忙啦，没有时间来更新我的文章，想发点鸿蒙好玩的技术也没有时间，不过在空闲时间中，我还是独立上架了一个鸿蒙作品 ，因为我有一个强有力的助手------Trae。这个时代学会用ai很重要，让他成为你的工具，这样你才不会被淘汰！

类似PC应用

青蓝程序员工具箱介绍

青蓝程序员工具箱是一款专为程序员打造的HarmonyOS原生工具集应用，集成了日常开发中最常用的实用工具。特点就是版本1.0.0（上线）首页适配的就是鸿蒙PC端，目前手机端也在发布中

版本发布

APP界面

PC端

手机端

Git记录

时间上被分成了两部分，6月、7月初的时候和现在这段时间

在第一段时间里我将一部分功能实现，但是没有搭建UI
第二段时间，最近工作稍微轻松一点，我继续实现功能并优化所有的UI

我的成功秘诀

🌍 海外版Trae + Claude4.0组合拳
📋 精心配置Trae开发规则
💬 掌握高效提示词技巧

海外版Trae+Claude4.0：突破限制的最佳选择

最近Claude在国内的"封锁风波"闹得人心惶惶，虽然网上各种破解方案层出不穷，但总感觉不够稳定可靠。

经过实测，Trae付费版本堪称完美替代方案：

✅ 零排队等待，响应速度飞快
✅ 稳定性极佳，从未掉链子
✅ 功能完整度媲美原版Claude

我直接买了年卡（因为开发rn也会用到哈哈哈）

📋 核心武器：精心打造的Trae开发规则

HarmonyOS作为新兴技术栈，网上的学习资料相比传统语言还是太少。想让AI精准理解鸿蒙开发规范，自定义规则文件是关键！

我在项目中创建了两个"AI训练手册"：

.trae\rules\arkts-rules.md - ArkTS通用语法规范大全

markdown 复制代码

# ArkTS 代码规范和最佳实践

## 类型安全规则

### 1. 对象字面量类型声明 (arkts-no-untyped-obj-literals)

**规则说明：**  所有对象字面量必须对应明确声明的类或接口类型。

**错误示例：**

```typescript
// ❌ 错误：未明确指定返回类型的对象字面量
return items.map((item) => ({
  id: item.id,
  name: item.name,
  type: "example",
}));
```

**正确示例：**

```typescript
// ✅ 正确：明确指定返回类型
return items.map((item): ResultInterface => {
  return {
    id: item.id,
    name: item.name,
    type: "example",
  };
});

// 或者使用临时变量
return items.map((item) => {
  const result: ResultInterface = {
    id: item.id,
    name: item.name,
    type: "example",
  };
  return result;
});
```

**适用场景：**
- map、filter、reduce 等数组方法的回调函数
-  函数返回值
-  变量赋值
-  参数传递

**修复方法：**
1.  为箭头函数添加明确的返回类型注解
2.  使用临时变量并声明类型
3.  确保接口或类型定义存在且可访问

### 2. 状态管理类型规范

**规则说明：** @State、@Prop、@Link 装饰的变量必须有明确的类型声明。

**示例：**

```typescript
// ✅ 正确
@State searchResults: SearchResult[] = []
@Prop title: string = ''
@Link selectedIndex: number
```

### 3. 组件属性类型检查

**规则说明：**  组件的所有属性和方法参数必须有明确的类型定义。

**示例：**

```typescript
// ✅ 正确
private performSearch(keyword: string): Promise<SearchResult[]> {
  // 实现
}

private onItemClick(item: SearchResult): void {
  // 实现
}
```

## 最佳实践建议

1. **始终定义接口：**  为复杂对象定义明确的接口
2. **使用类型注解：**  在函数参数和返回值中使用类型注解
3. **避免 any 类型：**  尽量避免使用 any，使用具体的类型定义
4. **类型导入：**  确保所需的类型和接口正确导入

## 工具配置

在  `build-profile.json5`  中启用严格的类型检查：

```json
{
  "buildOption": {
    "arkOptions": {
      "strictMode": true
    }
  }
}
```

## 常见错误和解决方案

| 错误信息                                                                          | 原因                   | 解决方案                   |
| --------------------------------------------------------------------------------- | ---------------------- | -------------------------- |
|  `Object literal must correspond to some explicitly declared class or interface`  | 对象字面量缺少类型声明 | 添加类型注解或使用临时变量 |
|  `Type 'unknown' is not assignable to type 'T'`                                   | 类型推断失败           | 明确指定类型               |
|  `Property 'x' does not exist on type 'object'`                                   | 对象类型不明确         | 定义具体的接口类型         |

---

.trae\rules\project_rules.md - 项目专属技术选型指南

markdown 复制代码

## ArkTS特定语法支持
1. 强制识别@Entry和@Component装饰器
   - 要求所有页面组件必须使用@Entry装饰，且根组件必须为容器组件（如Column/Row）
   - 自定义组件必须使用@Component装饰，且包含build函数
2. 状态管理装饰器解析
   - 对@State、@Prop、@Link装饰的变量添加类型检查
   - 检测@Prop变量是否与父组件@State类型一致，禁止类型不匹配（参考{insert\_element\_0\_}）
3. 支持ArkTS扩展语法
   - 识别ArkTS特有的资源引用语法（如$r('app.string.xxx')）
   - 对ArkTS枚举类型（enum）生成自动补全提示

## ArkUI组件开发规范
1. 组件结构约束
   - 禁止在build函数中使用switch语句，强制使用if条件判断（参考{insert\_element\_1\_}）
   - 容器组件（如Column/Row）必须包含子组件，禁止空容器
2. 样式配置规则
   - 组件样式必须通过链式调用配置（如.width(100).height(200)）
   - 禁止直接修改系统组件内部属性（如Button的text属性需通过content参数设置）
3. 事件处理规范
   - 所有事件处理函数必须使用箭头函数（() => {}），确保this指向正确
   - 对常用事件（如onClick、onChange）生成标准代码模板

## 状态管理规则
1. 状态传递规范
   - 父组件@State到子组件@Prop的同步必须显式声明类型
   - 禁止在子组件中修改@Prop变量后调用父组件方法（避免双向绑定）
2. 状态变更检测
   - 对@State变量的修改操作添加自动依赖跟踪
   - 检测@State变量是否在非UI线程中被修改（避免渲染异常）
3. 复杂类型支持
   - 对@State装饰的数组/对象类型启用深度变化检测
   - 限制@Prop嵌套层级不超过5层（参考{insert\_element\_2\_}）

## 资源文件规范
1. 颜色资源规则
   - **强制要求**：所有颜色值必须使用十六进制格式（#RRGGBB 或 #AARRGGBB）
   - **禁止使用**：rgba()、rgb()、hsl()等CSS颜色格式
   - **透明度处理**：使用8位十六进制格式，前两位表示透明度（AA=不透明，00=完全透明）
   - **示例**：
     - 正确：`"#FF0000"`（红色）、`"#80FF0000"`（50%透明红色）
     - 错误：`"rgba(255, 0, 0, 0.5)"`、`"rgb(255, 0, 0)"`
2. 资源命名规范
   - 颜色资源名称使用下划线分隔的小写字母
   - 图片资源使用ic_前缀表示图标
   - 字符串资源使用语义化命名
3. 资源文件结构
   - base目录存放默认资源
   - dark目录存放深色主题资源
   - 确保深浅主题资源名称一致

## 命名规则
1. 组件命名
   - 自定义组件必须使用大驼峰命名法，且以"Component"结尾（如LoginComponent）
   - 页面组件必须以"Page"结尾（如MainPage）
2. 状态变量命名
   - @State变量必须以"state"开头（如stateCount）
   - @Prop变量必须以"prop"开头（如propUserName）
3. 路由常量命名
   - 路由名称常量必须全大写，使用下划线分隔（如NAV_LOGIN_PAGE）

## 代码质量约束
1. 函数复杂度
   - 单个函数代码行数不超过80行
   - 循环嵌套不超过3层，条件判断不超过4层
2. 资源管理
   - 禁止在build函数中直接使用this.$r()，必须通过变量缓存
   - 对图片资源添加尺寸校验（如width/height必须为合法值）
3. 错误处理
   - 强制使用try-catch包裹异步操作（如网络请求）
   - 对可能为空的值添加非空断言（!）

## 智能代码生成规则
1. 组件模板
   - 输入"@component"自动生成包含build函数的组件模板
   - 输入"@page"生成包含路由注解的页面模板
2. 状态管理模板
   - 输入"@state"生成包含初始值的状态变量声明
   - 输入"@prop"生成与父组件同步的状态变量声明
3. 路由配置模板
   - 输入"@zroute"生成包含权限控制的路由配置模板

## 开发效率规则
1. 自动依赖注入
   - 对ZRouter的路由跳转方法自动导入命名空间
   - 检测未使用的ArkUI组件并提示删除
2. 跨文件导航
   - 点击@ZRoute注解自动跳转到对应页面组件
   - 点击@Prop变量自动定位到父组件@State声明
3. 性能分析
   - 对频繁更新的@State变量添加性能优化提示
   - 检测可能导致内存泄漏的定时器未清除操作

## 常见错误及解决方案
1. **颜色资源错误**
   - 错误：使用 `"rgba(0, 0, 0, 0.08)"` 格式
   - 解决：转换为十六进制 `"#14000000"`（0.08 * 255 ≈ 20 = 0x14）
   - 透明度转换公式：十六进制值 = Math.round(透明度 * 255).toString(16).padStart(2, '0')

2. **状态管理错误**
   - 错误：在子组件中直接修改@Prop变量
   - 解决：使用@Link或通过回调函数通知父组件

3. **路由跳转错误**
   - 错误：硬编码路由名称
   - 解决：使用路由常量统一管理

💬 提示词艺术：与AI高效沟通的秘诀

想要AI精准理解你的需求？**提示词就是你的魔法咒语！**关键在于需求描述的精确性和逻辑性。

项目技术层

📁 整体架构

bash 复制代码

QlzmToolBox/
├── AppScope/                    # 应用全局配置
│   ├── app.json5               # 应用配置文件
│   └── resources/              # 全局资源文件
├── entry/                      # 主模块
│   ├── src/main/ets/          # ArkTS源码目录
│   │   ├── component/         # 公共组件
│   │   ├── entryability/      # 应用入口能力
│   │   ├── model/             # 数据模型
│   │   ├── pages/             # 页面文件
│   │   ├── utils/             # 工具类
│   │   └── view/              # 视图组件
│   ├── src/main/resources/    # 资源文件
│   └── build-profile.json5    # 模块构建配置
├── config/                     # 签名证书配置
└── hvigor/                     # 构建工具配置

核心目录详解 📱 pages/ - 页面层

Index.ets - 应用主入口页面 🎨 view/ - 视图层
HomeView.ets - 首页工具展示
SettingView.ets - 设置页面
CompressionView.ets - 图片压缩工具
JsonFormattingView.ets - JSON格式化工具
TimestampConversionView.ets - 时间戳转换工具
UTFChineseView.ets - UTF-8编码转换
UnicodeChineseView.ets - Unicode编码转换
HttpCodeTableView.ets - HTTP状态码表 🧩 component/ - 组件层
titleBar.ets - 通用标题栏组件 🔧 utils/ - 工具层
Theme.ets - 主题切换工具
compressImage.ets - 图片压缩工具

💻 核心代码示例

应用主入口 - 采用ArkTS V2状态管理
主题切换系统 - 支持深色/浅色模式
数据模型定义 - 类型安全的工具配置
通用标题栏组件 - 响应式设计
应用入口能力类 - 生命周期管理

🏗️ 技术架构特点

模块化设计

分层架构 : pages(页面) → view(视图) → component(组件) → utils(工具)
职责分离 : 每个模块职责明确，便于维护和扩展
组件复用 : 通用组件可在多个页面中复用

状态管理

ArkTS V2 : 使用最新的@ComponentV2和@Local装饰器
响应式更新 : 状态变化自动触发UI更新
跨组件通信 : 通过@Provider/@Consumer实现数据共享

响应式适配

多设备支持 : 自动识别手机、平板、桌面设备
动态布局 : 根据屏幕尺寸调整UI布局
弹性设计 : 支持横竖屏切换和窗口大小变化

主题系统

持久化存储 : 主题设置自动保存
系统集成 : 与HarmonyOS系统主题联动
资源适配 : 深色/浅色模式资源自动切换

✨ 核心特色

🎯 六大实用工具，覆盖开发全流程

图片压缩 - 快速压缩图片，减小文件大小，优化项目资源
UTF-8和中文转换 - 编码格式转换工具，解决中文编码问题
Unicode和中文转换 - Unicode编码转换，处理特殊字符显示
JSON格式化 - 格式化和验证JSON数据，提升代码可读性
时间戳转换 - 时间格式转换工具，轻松处理时间数据
HTTP状态表 - 快速查询HTTP状态码含义，调试接口必备

🎨 现代化设计理念

响应式布局 - 完美适配手机、平板、桌面多种设备
深色模式支持 - 保护眼睛，节省电量，提供舒适的夜间使用体验
流畅动画效果 - 精心设计的交互动画，提升用户体验
智能搜索 - 快速定位所需工具，提高工作效率

🔮 未来规划

我们将持续优化和扩展工具箱功能：

增加更多实用开发工具
优化用户界面和交互体验
支持更多文件格式和数据类型

总结

关于青蓝逐码组织

如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯 ，甚至你想要做出一款属于自己的应用！欢迎在评论区留言或者私信，可以加入技术交流群。