一、项目背景与技术选型

1.1 正则表达式的痛点

正则表达式是开发者日常工作中不可或缺的工具，它能够高效地进行文本匹配、验证和替换操作。然而，正则表达式的语法复杂，记忆难度大，即使是经验丰富的开发者也常常需要查阅文档或在线工具来编写正确的正则表达式。

常见痛点包括：

• 语法复杂：正则表达式的语法规则繁多，如量词、字符类、分组、断言等，初学者难以掌握
• 调试困难：一旦正则表达式出现问题，排查和调试过程往往耗时费力
• 跨语言差异：不同编程语言对正则表达式的支持存在差异，如JavaScript的lookbehind、Python的re模块等
• 学习曲线陡峭：掌握正则表达式需要大量的实践和经验积累

1.2 鸿蒙生态的发展机遇

随着鸿蒙操作系统的快速发展，越来越多的开发者开始关注鸿蒙生态的应用开发。鸿蒙系统凭借其分布式能力、统一的开发框架和良好的性能表现，正在成为移动应用开发的新选择。

鸿蒙生态的优势：

• 分布式能力：支持多设备协同工作，实现万物互联
• 统一开发框架：ArkTS + ArkUI提供了统一的开发体验
• 良好的性能：原生应用性能优于Web应用和跨平台框架
• 丰富的API：提供了丰富的系统能力和服务接口

1.3 技术选型：ArkTS vs 鸿蒙Flutter框架

在鸿蒙应用开发中，开发者有多种技术选择，其中最主要的是ArkTS原生开发和鸿蒙Flutter框架。

对比维度	ArkTS原生开发	鸿蒙Flutter框架
语言	ArkTS（TypeScript超集）	Dart
UI框架	ArkUI声明式语法	Flutter Widget
性能	原生性能，接近原生应用	优秀，但略逊于原生
跨平台	支持鸿蒙全设备	支持多平台（鸿蒙、Android、iOS等）
生态成熟度	快速发展中	成熟，社区活跃
学习成本	较低（TypeScript基础）	中等（需要学习Dart）
系统集成	深度集成，可调用所有系统API	通过插件桥接，部分受限
包体积	较小	较大（包含Flutter引擎）

本次项目选择ArkTS原生开发的原因：

1. 性能优先：正则表达式生成工具需要快速响应，原生开发能够提供更好的性能体验
2. 系统集成：需要使用Preferences进行数据持久化、Pasteboard进行剪贴板操作，原生API调用更便捷
3. 开发效率：团队成员熟悉TypeScript，ArkTS作为TypeScript超集，学习成本低
4. 鸿蒙PC适配：ArkTS原生开发在鸿蒙PC上的适配更加自然和流畅

二、应用架构设计

2.1 整体架构

AI正则表达式生成工具采用单页面应用架构，所有功能集中在一个页面中实现。这种架构的优点是：

• 代码集中，便于维护和管理
• 页面切换零成本，用户体验流畅
• 适合功能相对单一的工具类应用

┌─────────────────────────────────────────────────────┐
│                    Index页面                         │
├─────────────────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐  ┌───────────┐ │
│  │ 输入区域     │  │ 语言选择     │  │ 操作按钮   │ │
│  │ (TextInput)  │  │ (Button组)   │  │ (Button)  │ │
│  └──────────────┘  └──────────────┘  └───────────┘ │
├─────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────┐ │
│  │              结果展示区域                       │ │
│  │  ┌─────────────┐  ┌─────────────┐             │ │
│  │  │ 正则表达式  │  │ 表达式解析  │             │ │
│  │  └─────────────┘  └─────────────┘             │ │
│  │  ┌─────────────┐                               │ │
│  │  │ 测试用例    │                               │ │
│  │  └─────────────┘                               │ │
│  └───────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────┐ │
│  │              历史记录区域                       │ │
│  │  ┌─────────────────────────────────────────┐  │ │
│  │  │ 历史记录卡片（点击可恢复）                │  │ │
│  │  └─────────────────────────────────────────┘  │ │
│  └───────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────┐ │
│  │              快捷示例区域                       │ │
│  │  ┌────┬────┬────┬────┐                       │ │
│  │  │邮箱│手机│URL │身份证│...                   │ │
│  │  └────┴────┴────┴────┘                       │ │
│  └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

2.2 数据模型设计

应用包含四个核心数据接口：

RegexResult接口：表示正则表达式生成结果

interface RegexResult {
  pattern: string;              // 正则表达式字符串
  explanation: Array<string>;   // 表达式解析说明数组
  testCases: Array<string>;     // 测试用例数组
  matches: Array<boolean>;      // 测试结果数组（与testCases对应）
}

RegexRecord接口：表示历史记录

interface RegexRecord {
  input: string;        // 用户输入的匹配需求
  language: string;     // 选择的编程语言
  result: RegexResult;  // 生成的正则结果
  timestamp: number;    // 生成时间戳
}

MockRegex接口：表示预设的Mock数据

interface MockRegex {
  keywords: Array<string>;  // 触发关键词数组
  pattern: string;          // 正则表达式
  explanation: Array<string>; // 解析说明
  testCases: Array<string>;   // 测试用例
  matches: Array<boolean>;    // 测试结果
}

ParseResult接口：表示JSON解析结果

interface ParseResult {
  success: boolean;           // 解析是否成功
  data: Array<string> | null; // 解析后的数据
}

2.3 状态管理策略

应用采用轻量化的状态管理策略，仅使用@State装饰器管理页面状态：

@State inputText: string = '';              // 用户输入的匹配需求
@State selectedLanguage: string = 'JavaScript'; // 当前选择的语言
@State generatedResult: RegexResult | null = null; // 生成的正则结果
@State isLoading: boolean = false;          // 是否正在加载
@State history: RegexRecord[] = [];         // 历史记录列表
@State errorText: string = '';              // 错误提示信息
@State copied: boolean = false;             // 是否已复制

这种设计的优势：

• 代码简洁，无需引入第三方状态管理库
• 状态变更自动触发UI更新，响应式编程体验
• 适合单页面应用，状态管理复杂度可控

三、核心功能实现

3.1 Mock数据设计

应用内置了10种常见的正则表达式场景，覆盖了日常开发中最常用的匹配需求：

场景	关键词	正则表达式
邮箱地址	邮箱、email、mail、邮件	[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}
手机号码	手机号、手机、电话、mobile、phone	1[3-9]\d{9}
URL链接	URL、网址、链接、url、website	https?://[\w\-._~:/?#[\\]@!$&'()*+,;=%]+
身份证号	身份证、身份证号、ID card	[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]
IP地址	IP地址、IP、ip	(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)
日期格式	日期、时间、date、time	\d{4}[-/](0[1-9]|1[0-2])[-/](0[1-9]|[12]\d|3[01])
颜色代码	十六进制、颜色、hex、color	#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})
中文字符	中文字符、中文、汉字	[\u4e00-\u9fa5]+
数字	数字、integer、number	-?\d+
密码	密码、password、pwd	(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}

3.2 正则生成算法

正则生成算法采用关键词匹配策略，当用户输入匹配需求时，系统会遍历所有预设的Mock数据，找到匹配的关键词并返回对应的正则表达式：

private generateRegex(input: string): RegexResult {
  for (let i = 0; i < this.MOCK_DATA.length; i++) {
    let mock: MockRegex = this.MOCK_DATA[i];
    for (let j = 0; j < mock.keywords.length; j++) {
      let keyword: string = mock.keywords[j];
      if (input.includes(keyword)) {
        return {
          pattern: mock.pattern,
          explanation: mock.explanation,
          testCases: mock.testCases,
          matches: mock.matches
        };
      }
    }
  }
  
  // 如果没有匹配到关键词，返回默认正则
  let defaultPattern: string = '.+';
  let defaultExplanation: Array<string> = [
    '. ：匹配任意字符（除换行符外）',
    '+ ：匹配前面的字符一次或多次',
    '这个正则表达式可以匹配任何非空字符串'
  ];
  let defaultTestCases: Array<string> = ['hello', 'test123', '', '中文测试'];
  let defaultMatches: Array<boolean> = [true, true, false, true];
  
  return {
    pattern: defaultPattern,
    explanation: defaultExplanation,
    testCases: defaultTestCases,
    matches: defaultMatches
  };
}

算法特点：

• 关键词模糊匹配：使用includes方法进行模糊匹配，用户输入中只要包含关键词即可触发
• 优先级排序：按照Mock数据的顺序进行匹配，排在前面的场景优先级更高
• 默认兜底：如果没有匹配到任何关键词，返回一个通用的正则表达式作为兜底

3.3 数据持久化实现

应用使用鸿蒙的Preferences API进行数据持久化，保存用户的正则生成历史记录：

private async getPreferences(): Promise<preferences.Preferences> {
  if (this.preferencesInst) {
    return this.preferencesInst;
  }
  if (!this.context) {
    throw new Error('Context is null');
  }
  try {
    this.preferencesInst = await preferences.getPreferences(this.context, 'ai_regex_app');
  } catch (error) {
    console.error('获取Preferences失败');
    throw new Error('获取Preferences失败');
  }
  return this.preferencesInst;
}

private async saveHistory(): Promise<void> {
  if (!this.context) {
    return;
  }
  try {
    let prefs = await this.getPreferences();
    let stringList: Array<string> = [];
    for (let i = 0; i < this.history.length; i++) {
      let record = this.history[i];
      stringList.push(JSON.stringify(record));
    }
    let jsonStr: string = JSON.stringify(stringList);
    await prefs.put(this.STORAGE_KEY, jsonStr);
    await prefs.flush();
  } catch (error) {
    console.error('保存正则历史失败');
  }
}

数据存储格式：

• 将每条历史记录序列化为JSON字符串
• 将所有JSON字符串存储在一个数组中
• 整个数组序列化为JSON字符串后存储在Preferences中
• 使用regex_history作为存储键

3.4 剪贴板操作

应用支持一键复制生成的正则表达式到剪贴板：

private async copyRegex(): Promise<void> {
  if (!this.generatedResult) {
    return;
  }
  try {
    let pasteboardSystem = pasteboard.getSystemPasteboard();
    let pasteData = pasteboard.createPlainTextData(this.generatedResult.pattern);
    await pasteboardSystem.setData(pasteData);
    this.copied = true;
    setTimeout(() => {
      this.copied = false;
    }, 2000);
  } catch (error) {
    console.error('复制正则失败');
  }
}

注意事项：

• 使用pasteboard.createPlainTextData()创建剪贴板数据对象
• 复制成功后，按钮状态变为"已复制"，2秒后恢复为"复制"
• 添加了错误处理，确保复制失败时不会导致应用崩溃

3.5 网络API预留

应用预留了真实大模型调用的代码框架，方便后续扩展：

private async fetchOnlineRegex(input: string, language: string): Promise<RegexResult> {
  let httpRequest = http.createHttp();
  let response = await httpRequest.request(
    'https://api.example.com/generate/regex',
    {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
      },
      extraData: {
        'input': input,
        'language': language
      }
    }
  );
  let result = JSON.parse(response.result as string);
  // 解析返回结果...
  return {
    pattern: String(result['pattern'] || ''),
    explanation: explanationArray,
    testCases: testCasesArray,
    matches: matchesArray
  };
}

扩展方案：

• 调用大语言模型API（如GPT、文心一言等）
• 传递用户输入和语言参数
• 解析返回的JSON结果
• 更新UI展示

四、UI设计与交互体验

4.1 设计理念

应用采用极简设计风格，注重用户体验和操作效率：

• 三栏结构：输入区域、结果展示区域、历史记录区域
• 紫色主题：使用紫色(#9B59B6)作为主色调，传达科技感和创新感
• 卡片式布局：结果展示和历史记录采用卡片式设计，层次分明
• 响应式设计：适配不同屏幕尺寸的设备

4.2 页面布局

顶部标题栏：

Row() {
  Text('AI正则表达式生成工具')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .fontColor('#ffffff')
}
.width('100%')
.height(56)
.padding({ left: 16, right: 16 })
.backgroundColor('#9B59B6')

输入区域：

TextInput({ placeholder: '请描述您的匹配需求，如：匹配邮箱、手机号、URL...', text: this.inputText })
  .width('100%')
  .height(56)
  .fontSize(15)
  .padding({ left: 12, right: 12 })
  .backgroundColor('#FFFFFF')
  .borderRadius(8)
  .borderWidth(1)
  .borderColor('#E0E0E0')
  .onChange((value: string) => {
    this.inputText = value;
  })

语言选择区域：

Scroll() {
  Row() {
    ForEach(this.LANGUAGES, (lang: string) => {
      Button(lang)
        .width(72)
        .height(36)
        .fontSize(12)
        .fontColor(this.selectedLanguage === lang ? '#ffffff' : '#666666')
        .backgroundColor(this.selectedLanguage === lang ? '#9B59B6' : '#F5F5F5')
        .borderRadius(18)
        .margin({ right: 8 })
        .onClick(() => {
          this.selectedLanguage = lang;
        })
    }, (lang: string) => lang)
  }
  .width('100%')
}
.scrollable(ScrollDirection.Horizontal)
.width('100%')

结果展示区域：

Column() {
  // 正则表达式展示
  Text(this.generatedResult.pattern)
    .fontSize(15)
    .fontColor('#9B59B6')
    .fontWeight(FontWeight.Medium)
    .lineHeight(24)
    .fontFamily('monospace')
    .padding({ left: 12, right: 12, top: 12, bottom: 12 })
    .backgroundColor('#F8F0FB')
    .borderRadius(8)
  
  // 表达式解析
  ForEach(this.generatedResult.explanation, (line: string) => {
    Row() {
      Text('•')
        .fontSize(14)
        .fontColor('#9B59B6')
        .margin({ right: 8 })
      Text(line)
        .fontSize(14)
        .fontColor('#666666')
        .lineHeight(22)
    }
    .width('100%')
    .margin({ bottom: 8 })
  }, (line: string, index: number) => index.toString())
  
  // 测试用例
  ForEach(this.generatedResult.testCases, (testCase: string, index: number) => {
    Row() {
      Text(testCase)
        .fontSize(14)
        .fontColor('#333333')
        .layoutWeight(1)
      Text(this.generatedResult!.matches[index] ? '✓ 匹配' : '✗ 不匹配')
        .fontSize(13)
        .fontColor(this.generatedResult!.matches[index] ? '#2ECC71' : '#E74C3C')
    }
    .width('100%')
    .margin({ bottom: 8 })
  }, (testCase: string, index: number) => index.toString())
}

4.3 交互设计

加载动画：

• 点击"生成正则"按钮后，显示加载提示文本
• 禁用按钮，防止重复点击
• 模拟AI思考过程，提升用户体验

复制反馈：

• 点击"复制"按钮后，按钮变为绿色"已复制"状态
• 2秒后自动恢复为"复制"状态
• 提供即时视觉反馈

历史记录交互：

• 点击历史记录卡片，恢复对应的输入和结果
• 显示记录的时间戳
• 输入内容过长时自动截断并显示省略号

快捷示例：

• 提供常用场景的快捷标签按钮
• 点击按钮自动填充对应的匹配需求
• 方便用户快速测试和体验

五、鸿蒙PC端适配策略

5.1 鸿蒙PC平台特点

鸿蒙PC平台具有以下特点：

• 大屏显示：通常为13-17英寸屏幕，分辨率较高
• 键鼠交互：支持鼠标、键盘等输入设备
• 多任务处理：支持窗口化操作和多任务切换
• 性能强劲：PC硬件性能通常优于移动设备

5.2 适配策略

布局适配：

• 使用百分比宽度和弹性布局，适应不同屏幕尺寸
• 合理利用大屏空间，展示更多内容
• 保持移动端和PC端的一致性体验

交互适配：

• 支持键盘快捷键操作
• 优化鼠标悬停效果
• 调整按钮大小，适合键鼠操作

性能优化：

• 利用PC端更强的性能，提供更流畅的体验
• 优化正则表达式生成算法
• 减少不必要的渲染和计算

5.3 代码层面的适配

应用在代码层面已经具备良好的适配基础：

1. 响应式布局：使用width('100%')、layoutWeight(1)等属性实现弹性布局
2. 组件复用：使用ForEach组件动态渲染列表，适应不同数量的数据
3. 状态管理：使用@State管理状态，自动触发UI更新
4. 事件处理：支持点击、输入等交互事件

5.4 未来拓展

针对鸿蒙PC平台的进一步优化方向：

• 窗口化支持：支持窗口大小调整和拖拽
• 快捷键支持：添加常用操作的键盘快捷键
• 多窗口模式：支持同时打开多个正则表达式编辑窗口
• 文件导出：支持将正则表达式导出为文件

六、离线运行与网络扩展方案

6.1 离线运行方案

应用采用Mock数据实现离线运行，无需网络即可使用：

Mock数据优势：

• 零依赖：不依赖外部API，随时随地使用
• 快速响应：本地数据，响应速度快
• 稳定可靠：不受网络波动影响
• 方便测试：便于开发和测试阶段验证功能

Mock数据设计原则：

• 覆盖常用场景：包含邮箱、手机号、URL等10种常用场景
• 详细解析：每个正则表达式都配有逐行解析说明
• 测试用例：提供测试用例和预期匹配结果
• 多语言支持：关键词支持中英文

6.2 网络扩展方案

应用预留了网络API调用代码，支持后续扩展：

扩展步骤：

1. 注册API服务：在大语言模型平台注册账号，获取API密钥
2. 配置接口地址：修改代码中的API地址和认证信息
3. 实现调用逻辑：取消注释预留的网络调用代码
4. 处理返回结果：解析API返回的JSON数据
5. 更新UI展示：将网络返回的结果展示在界面上

网络调用注意事项：

• 错误处理：添加网络异常处理，确保应用稳定运行
• 数据缓存：对重复请求进行缓存，减少API调用次数
• 请求限制：遵守API服务的请求频率限制
• 用户隐私：确保用户输入的内容得到妥善处理

6.3 混合模式

应用支持离线和在线两种模式的混合使用：

• 优先使用Mock数据：快速响应用户需求
• 可选调用网络API：提供更精确的正则表达式生成
• 缓存网络结果：将网络生成的结果缓存到本地
• 智能切换：根据网络状态自动切换模式

七、开发实践与技术总结

7.1 ArkTS开发要点

类型安全：

• 禁止使用any和unknown类型
• 所有数据结构必须显式定义interface
• 使用类型断言进行类型转换

状态管理：

• 使用@State装饰器管理组件状态
• 状态变更自动触发UI更新
• 避免过度使用状态变量

异步编程：

• 使用async/await处理异步操作
• 添加try-catch块处理异常
• 使用Promise封装异步逻辑

7.2 常见问题及解决方案

问题1：ForEach回调中不能包含变量声明

// 错误写法
ForEach(array, (item, index) => {
  let value = array[index];  // ❌ 不允许在回调中声明变量
  Text(value)
})

// 正确写法
ForEach(array, (item) => {
  Text(item)  // ✅ 直接使用回调参数
})

问题2：剪贴板API参数类型错误

// 错误写法
await pasteboardSystem.setData('text');  // ❌ 需要PasteData类型

// 正确写法
let pasteData = pasteboard.createPlainTextData('text');
await pasteboardSystem.setData(pasteData);  // ✅ 使用createPlainTextData创建

问题3：类型转换错误

// 错误写法
explanationArray.push(expList[i]);  // ❌ Object类型不能赋值给string

// 正确写法
let expItem: Object = expList[i];
if (typeof expItem === 'string') {
  explanationArray.push(String(expItem));  // ✅ 类型检查后转换
}

7.3 代码规范

命名规范：

• 接口名使用大驼峰命名法（PascalCase）
• 变量名使用小驼峰命名法（camelCase）
• 常量名使用全大写加下划线（UPPER_CASE）
• 方法名使用小驼峰命名法（camelCase）

代码结构：

• 接口定义在前，组件定义在后
• 状态变量集中定义在组件顶部
• 方法按功能分类，逻辑清晰
• 添加适当的空行分隔不同代码块

八、应用特点与创新点

8.1 核心特点

智能关键词匹配：

• 支持中英文关键词匹配
• 模糊匹配，无需精确输入
• 覆盖10种常用正则场景

详细解析说明：

• 每个正则表达式都配有逐行解析
• 用通俗易懂的语言解释正则语法
• 帮助用户理解和学习正则表达式

测试用例验证：

• 提供测试用例和预期结果
• 可视化展示匹配结果
• 帮助用户验证正则表达式的正确性

历史记录管理：

• 自动保存生成历史
• 支持恢复历史记录
• 方便用户重复使用

多语言支持：

• 支持6种编程语言选择
• 方便不同技术栈的开发者使用
• 预留语言特定的正则差异处理

8.2 创新点

一站式正则工具：

• 集生成、解析、测试于一体
• 无需切换多个工具
• 提高开发效率

离线优先设计：

• 内置Mock数据，无需网络
• 随时随地使用
• 适合网络不稳定的场景

学习型工具：

• 不仅生成正则，还解释正则
• 帮助用户学习正则表达式
• 提升用户的技术能力

轻量化实现：

• 单页面应用，代码集中
• 无需第三方依赖
• 包体积小，加载快

九、未来发展方向与功能扩展

9.1 功能扩展

自定义正则库：

• 允许用户添加自定义正则表达式
• 支持分类管理
• 提供导入/导出功能

正则测试工具：

• 提供正则表达式测试功能
• 实时匹配结果展示
• 支持替换和提取操作

批量生成：

• 支持批量输入多个匹配需求
• 一次性生成多个正则表达式
• 提供批量复制功能

正则优化建议：

• 分析用户生成的正则表达式
• 提供优化建议
• 帮助用户编写更高效的正则

9.2 技术升级

引入大语言模型：

• 集成GPT、文心一言等大语言模型
• 提供更智能的正则生成
• 支持更复杂的匹配需求

云端同步：

• 支持用户数据云端同步
• 跨设备共享历史记录
• 提供数据备份和恢复

性能优化：

• 使用WebAssembly加速正则匹配
• 优化算法，提升生成速度
• 减少内存占用

9.3 生态整合

IDE插件：

• 开发VS Code/IntelliJ插件
• 无缝集成到开发环境
• 提供代码补全和提示

API服务：

• 提供正则生成API服务
• 支持其他应用调用
• 构建开发者生态

社区贡献：

• 开放源代码
• 鼓励社区贡献Mock数据
• 建立正则表达式知识库

十、结语

10.1 项目总结

AI正则表达式生成工具是一款基于鸿蒙ArkTS开发的智能工具类应用，旨在帮助开发者快速生成正则表达式并理解其含义。应用采用离线优先设计，内置10种常用正则场景，支持6种编程语言选择，提供详细的解析说明和测试用例验证。

10.2 技术价值

• 提升开发效率：快速生成正则表达式，减少编写和调试时间
• 降低学习门槛：通过解析说明帮助用户学习正则表达式
• 促进鸿蒙生态：展示ArkTS原生开发的能力和优势
• 探索AI应用：结合AI技术，提供智能生成能力

10.3 展望未来

随着鸿蒙生态的不断发展和AI技术的进步，AI正则表达式生成工具将不断演进，提供更智能、更强大的功能。我们期待与开发者社区一起，共同推动鸿蒙应用开发的创新和发展。

---

附录：权限配置

在module.json5中配置网络权限：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

附录：运行步骤

1. 打开DevEco Studio，导入项目
2. 选择本地模拟器或真机设备
3. 点击运行按钮，等待应用启动
4. 输入匹配需求或点击快捷标签
5. 点击"生成正则"按钮查看结果
6. 点击"复制"按钮复制正则表达式