feat: the function of adding and deleting nodes in the outline tree, support undo. #1136
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThe pull request removes obsolete ESLint configuration files and bumps the version of the designer-demo package. In addition, it introduces an extensive set of new and updated documentation files. These changes cover user guides, developer tutorials, API references, and practical cases for various aspects of the TinyEngine low-code platform, including designer usage, component management, plugin development, code generation, and customization of meta services and plugin UIs. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Designer
participant CodeGenService
participant Plugin
User->>Designer: Initiates code generation
Designer->>CodeGenService: Calls generateApp(config)
CodeGenService->>Plugin: Executes code generation plugins
Plugin-->>CodeGenService: Returns modified schema
CodeGenService->>Designer: Sends generated code
Designer->>User: Displays generated code
sequenceDiagram
participant User
participant Designer
participant AIChatAPI
User->>Designer: Opens AI chat window
Designer->>AIChatAPI: Sends POST /app-center/api/ai/chat
AIChatAPI-->>Designer: Returns generated page content
Designer->>User: Renders AI-generated page
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ERR_PNPM_OPTIONAL_DEPS_REQUIRE_PROD_DEPS Optional dependencies cannot be installed without production dependencies Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/plugins/tree/src/Main.vue (2)
30-31: Add confirmation dialog before node deletion.To prevent accidental deletions, consider adding a confirmation dialog before executing the delete operation.
- <svg-icon name="delete" @mouseup="delNode(row.rawData)"></svg-icon> + <svg-icon name="delete" @mouseup="confirmDelete(row.rawData)"></svg-icon>Add the confirmation method:
const confirmDelete = (data) => { // Use your UI framework's confirmation dialog if (confirm('Are you sure you want to delete this node?')) { delNode(data) } }
259-270: Add visual distinction for destructive action.Consider adding a distinct hover color for the delete icon to indicate its destructive nature.
svg.icon-eye, svg.icon-delete, svg.icon-eye-invisible { visibility: hidden; } .tree-row:hover { svg.icon-eye, - svg.icon-delete, svg.icon-eye-invisible { visibility: unset; } + svg.icon-delete { + visibility: unset; + &:hover { + color: var(--te-color-error); + } + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/plugins/tree/src/Main.vue(5 hunks)
🔇 Additional comments (1)
packages/plugins/tree/src/Main.vue (1)
30-31: LGTM! Well-structured implementation of node deletion with undo support.The changes effectively implement the node deletion feature with proper integration of history management for undo support. The code maintains consistency with the existing patterns and provides a good user experience.
Also applies to: 141-149, 259-270
| const delNode = (data) => { | ||
| const { clearSelect } = useCanvas().canvasApi.value | ||
| useCanvas().operateNode({ | ||
| type: 'delete', | ||
| id: data.id | ||
| }) | ||
| clearSelect() | ||
| useHistory().addHistory() | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling to delNode method.
The deletion operation should handle potential failures gracefully.
const delNode = (data) => {
+ try {
const { clearSelect } = useCanvas().canvasApi.value
useCanvas().operateNode({
type: 'delete',
id: data.id
})
clearSelect()
useHistory().addHistory()
+ } catch (error) {
+ console.error('Failed to delete node:', error)
+ // Use your UI framework's error notification
+ useMessage().error('Failed to delete node')
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const delNode = (data) => { | |
| const { clearSelect } = useCanvas().canvasApi.value | |
| useCanvas().operateNode({ | |
| type: 'delete', | |
| id: data.id | |
| }) | |
| clearSelect() | |
| useHistory().addHistory() | |
| } | |
| const delNode = (data) => { | |
| try { | |
| const { clearSelect } = useCanvas().canvasApi.value | |
| useCanvas().operateNode({ | |
| type: 'delete', | |
| id: data.id | |
| }) | |
| clearSelect() | |
| useHistory().addHistory() | |
| } catch (error) { | |
| console.error('Failed to delete node:', error) | |
| // Use your UI framework's error notification | |
| useMessage().error('Failed to delete node') | |
| } | |
| } |
|
@gene9831 Please help with the review. |
|
可以在pr comment中补充个图片或者gif，展示效果 |
You can add a picture or gif in the pr comment to display the effect |
|
@1degrees git commit 没有正确配置成 GitHub 用户，看看要不要修改一下 。（配置正确的话，后续可以通过代码的 git comit 记录索引到对应的GitHub用户） |
修复拖拽Header组件会导致内容消失的 bug
修改样式问题 1.区块设置->事件设置 去掉无必要滚动条显示 2.数据源下拉校验错位
…vas (opentiny#1169) 修复嵌套路由预览下拉列表弹出后，无法通过点击画布内部来关闭的 bug
…opentiny#1172) 允许页面未锁定时通过点击大纲树 hover 和 选中节点。
* fix: 修复暗色主题部分不兼容的样式
处理区块字段 assets为undefined的情况
暗色主题下样式调整 1.下拉框面板背景 2.折叠面板图标 3.消息提示文字颜色 4.固定面板图标 5.按钮hover背景
* fix: 修复页面区块预览失效问题 * fix:fix review
Co-authored-by: 张啸 <xiaozhang20@iflytek.com> 修复: 数据源绑定时，将数据源初始化的State 和原有State错误更新，导致功能无效，Schame沉余无用数据
* fix:拆包之后packages字段丢失 * feat:合并物料时将package信息写入bundle.json --------- Co-authored-by: mjzhu4 <mjzhu4@kxdigit.com>
修复文案为空时 i18n 下的文案为 null 导致出码异常，新增判断条件，默认为空对象
…ets. Also, there can be two components within one snippet (with the same componentName but different snippetName) (opentiny#1212) * 拆包的时候一个组件在多个分组里面也可以一个分组里面存在两个组件(componentName相同, snippetName不同)
…nodes (opentiny#1201) 1. 多选节点进行点击回退剩余一个元素时，框选效果异常 2. 快捷键剪切失效
1. 修改plugin下模块外层类名 2. 复选框选中状态和默认状态大小调整 3. 部分模块滚动条修改 4. 弹窗关闭图标样式调整
…o CLI. (opentiny#1143) 1.修改主题切换逻辑，默认值改成从注册表中的themes获取。 只有亮色和暗色两种默认主题的情况下，保持原来的逻辑，点击直接切换主题 用户添加了自定义主题，出现选择列表，在列表中切换主题 2.添加新主题模板 在终端中，用命令创建新主题，选择theme类型，添加主题模板，输入主题名称：demo-theme 在demo-theme下可以看到新创建的主题，cd demo-theme && pnpm i 将主题接入设计器
…#1145) 项目ts改造基础，使用eslint9+typescript。在@vue/eslint-config-typescript默认配置上进行修改
1degrees
force-pushed
the
feat/outlineTreeAddDelBtn
branch
from
61f7067 to
2031b1a
Compare
the function of adding and deleting nodes in the outline tree, support undo.
（大纲树增加删除功能，支持撤销）
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Chores
New Features
Documentation