背景：ai coding趋势

主要内容展示3个demo:

没有UI图情况下让ai优化json merge
ai从figma设计图写出demo
任意独立功能

ai coding工具

1. vs code

2. cursor

demo1:没有UI图情况下让ai优化json merge

1.旧效果：

old.png

2.优化后效果：

new.png

JSON比较组件构建指南

组件概述

这是一个高级的Angular JSON比较组件，提供双向JSON对比、智能合并、可视化差异展示等功能。组件支持折叠/展开、实时高亮变更、多种视图模式等高级特性。

提示词

1. 双侧JSON对比

功能描述: 左右两侧并排显示JSON数据，支持源数据和目标数据的对比
视觉效果:
- 新增内容：右侧绿色高亮
- 删除内容：左侧红色高亮
- 修改内容：左侧橙色(old)，右侧蓝色(new)
- 未变更内容：保持原始样式

2. 智能折叠/展开系统

层次化控制: 支持按路径层级的折叠展开
同步控制: 可选择左右两侧同步或独立控制
状态继承: 折叠节点根据子节点变更状态智能高亮
路径追踪: 使用点记法路径(如 profile.location.city)和数组索引路径(如 items[0].name)

3. 变更检测算法

深度递归比较: 支持对象、数组、基本类型的深度比较
状态分类:
- added: 新增属性
- removed: 删除属性
- modified: 修改属性
- unchanged: 未变更属性
路径映射: 为每个属性路径分配变更状态

4. 多视图模式

并排视图: 左右两侧对比显示
差异视图: 使用第三方差异库(jsondiffpatch)展示
合并视图: 显示合并后的结果

5. 合并策略

深度合并: 智能合并嵌套对象和数组
目标优先: 使用目标数据覆盖源数据
源数据优先: 保持源数据不变

实现检查清单

基础功能

JSON解析和验证
左右两侧数据展示
基本变更检测算法
简单的视觉差异标识

高级功能

层次化折叠/展开系统
智能状态继承机制
路径追踪和映射
事件委托处理机制

通过遵循这个详细的构建指南，可以重新实现一个功能完整、性能优异的JSON比较组件。关键在于理解其复杂的状态管理、智能的变更检测算法以及精细的UI交互设计。

demo2: 根据figma设计稿写出代码

设计图：

提示词：

根据figma地址：https://www.figma.com/design/jZ2xi8qMy5xvJetKT8tDUS/login?node-id=31-5300&m=dev
写出testlogin组件，与merge.ts同级,
要求严格按照mobile phone设计规范来做。
本地服务器已经启动，参照路由http://localhost:5100/#/admin/testlogin,
在浏览器上打开检查效果，
账号为superadmin, 0115.

效果图：

1newlogin.png

demo3:任意独立功能

1、请写出一个markdown组件,可以支持展示与编辑。
2、在当前comparejson组件的基础下，添加第三种模式，要求在同一个视图下显示出新增，修改，删除，
删除与修改的旧值都要画横线。

公司现状：

1、大部分同学还是使用copilot还是选择ask 或者 edit模式，比较少人使用agent模式。
2、c#如果要在使用以上模式得配置好vs code的环境，暂未配置。
3、如果是在vs code使用node.js 与python都可以完整写出后端。
因为vs code搭建相关语言环境比较容易。

ai coding