Feat：Add AI assistant to canvas node

packages/canvas/DesignCanvas/src/api/types.ts

@@ -2,6 +2,28 @@ import type { Node, RootNode } from '../../../types'
 
 export type PageSchema = RootNode
 
+export type AIHelperState = 'hidden' | 'chat' | 'loading' | 'confirm' | 'completed'
+
+export interface NodeAIStatus {
+  state: AIHelperState
+  collapsed?: boolean // 面板是否收起（收起时保留原状态，重新打开可恢复）
+  aiContext?: any
+  lastAIAction?: string
+  aiHistory?: Array<{
+    timestamp: number
+    action: string
+    content: any
+  }>
+  chatContent?: string // 聊天内容
+  // AI采纳状态相关字段
+  originalNodeData?: any // AI修改前的节点数据备份
+  aiModifiedNodeData?: any // AI修改后的节点数据
+}
+
+export interface NodeStatus {
+  [key: string]: any
+}
+
 export interface PageState {
   currentVm?: unknown
   currentSchema?: { [x: string]: any; id: string }
@@ -17,7 +39,8 @@ export interface PageState {
   isSaved: boolean
   isLock: boolean
   isBlock: boolean
-  nodesStatus: Record<string, any>
+  nodesStatus: Record<string, NodeStatus>
+  aiNodesStatus: Record<string, NodeAIStatus> // AI状态独立存储，避免与nodesStatus的可见性(false)冲突
   loading: boolean
 }
 

packages/canvas/DesignCanvas/src/api/useCanvas.ts

@@ -21,6 +21,7 @@ import type {
   ChangePropsOperation,
   DeleteOperation,
   InsertOperation,
+  NodeAIStatus,
   NodeOperation,
   PageSchema,
   PageState,
@@ -43,6 +44,7 @@ const defaultPageState: PageState = {
   isLock: false,
   isBlock: false,
   nodesStatus: {},
+  aiNodesStatus: {},
   loading: false
 }
 
@@ -84,6 +86,39 @@ const rootSchema = ref([
   }
 ])
 
+// 初始化单个节点的AI状态（使用独立的aiNodesStatus，避免与nodesStatus可见性冲突）
+const initializeNodeAIStatus = (node: object, initialStatus: Partial<NodeAIStatus> = {}) => {
+  pageState.aiNodesStatus[node.id] = {
+    state: 'hidden',
+    originalNodeData: deepClone(node),
+    aiModifiedNodeData: undefined,
+    aiContext: null,
+    lastAIAction: '',
+    aiHistory: [],
+    ...initialStatus
+  }
+}
+
+// 初始化所有现有节点的AI状态
+const initializeAllNodesAIStatus = () => {
+  // 递归遍历 pageSchema 的 children 来初始化所有节点的AI状态
+  const traverseNodes = (nodes: any[]) => {
+    if (!nodes) return
+    nodes.forEach((node) => {
+      if (node.id && !pageState.aiNodesStatus[node.id]) {
+        initializeNodeAIStatus(node)
+      }
+      if (Array.isArray(node.children) && node.children.length) {
+        traverseNodes(node.children)
+      }
+    })
+  }
+
+  if (pageState.pageSchema?.children) {
+    traverseNodes(pageState.pageSchema.children)
+  }
+}
+
 const handleTinyGridColumnsSlots = (node: Node) => {
   const columns = Array.isArray(node.props?.columns) ? node.props.columns : []
   for (const columnItem of columns) {
@@ -182,6 +217,8 @@ const resetCanvasState = async (state: Partial<PageState> = {}) => {
   Object.assign(pageState, defaultPageState, state)
 
   nodesMap.value.clear()
+  // 切换页面时清空所有节点的AI状态，避免旧页面的AI状态残留
+  pageState.nodesStatus = {}
 
   if (pageState.pageSchema) {
     if (!pageState.pageSchema.children) {
@@ -200,6 +237,9 @@ const resetCanvasState = async (state: Partial<PageState> = {}) => {
     nodesMap.value.set(0, { node: rootSchema.value, parent: pageState.pageSchema })
 
     generateNodesMap(pageState.pageSchema.children, pageState.pageSchema)
+
+    // 初始化所有节点的AI状态
+    initializeAllNodesAIStatus()
   }
 
   const diffPatch = jsonDiffPatchInstance.diff(previousSchema, pageState.pageSchema)
@@ -208,6 +248,42 @@ const resetCanvasState = async (state: Partial<PageState> = {}) => {
   publish({ topic: 'schemaImport', data: { current: pageState.pageSchema, previous: previousSchema, diffPatch } })
 }
 
+// 更新页面schema，保留AI状态（不清空nodesStatus）
+const updatePageSchema = (newPageSchema: any) => {
+  const previousSchema = JSON.parse(JSON.stringify(pageState.pageSchema))
+
+  pageState.pageSchema = newPageSchema
+
+  if (!newPageSchema.children) {
+    newPageSchema.children = []
+  }
+
+  rootSchema.value = [
+    {
+      id: 0,
+      componentName: 'div',
+      props: newPageSchema.props || {},
+      children: newPageSchema.children
+    }
+  ]
+
+  // 重建 nodesMap
+  nodesMap.value.clear()
+  nodesMap.value.set(0, { node: rootSchema.value, parent: newPageSchema })
+  generateNodesMap(newPageSchema.children, newPageSchema)
+
+  // 为新增的节点初始化AI状态（已存在的不覆盖）
+  nodesMap.value.forEach(({ node }) => {
+    if (node.id && !pageState.aiNodesStatus[node.id]) {
+      initializeNodeAIStatus(node)
+    }
+  })
+
+  const diffPatch = jsonDiffPatchInstance.diff(previousSchema, newPageSchema)
+
+  publish({ topic: 'schemaImport', data: { current: newPageSchema, previous: previousSchema, diffPatch } })
+}
+
 // 页面重置画布数据
 const resetPageCanvasState = (state: Partial<PageState> = {}) => {
   state.isBlock = false
@@ -383,10 +459,28 @@ const operationTypeMap = {
 
     setNode(newNodeData, parentNode)
 
+    // 初始化新节点的AI状态
+    if (newNodeData.id) {
+      initializeNodeAIStatus(newNodeData)
+    }
+
     // 6. 如果新节点有子节点，递归构建 nodeMap
     if (Array.isArray(newNodeData?.children) && newNodeData.children.length > 0) {
       const newNode = getNode(newNodeData.id)
       generateNodesMap(newNodeData.children, newNode)
+
+      // 递归初始化所有子节点的AI状态
+      const initChildrenAIStatus = (children: Node[]) => {
+        children.forEach((child) => {
+          if (child.id) {
+            initializeNodeAIStatus(child)
+          }
+          if (Array.isArray(child?.children) && child.children.length > 0) {
+            initChildrenAIStatus(child.children)
+          }
+        })
+      }
+      initChildrenAIStatus(newNodeData.children)
     }
 
     // 7. 返回插入结果
@@ -410,16 +504,18 @@ const operationTypeMap = {
     if (index > -1) {
       parent.children.splice(index, 1)
       nodesMap.value.delete(node.id)
+      delete pageState.aiNodesStatus[node.id]
     }
 
     let children = [...(node.children || [])]
 
-    // 递归清理 nodesMap
+    // 递归清理 nodesMap 和 aiNodesStatus
     while (children?.length) {
       const len = children.length
       children.forEach((item) => {
         const nodeItem = getNode(item.id)
         nodesMap.value.delete(item.id)
+        delete pageState.aiNodesStatus[item.id]
 
         if (Array.isArray(nodeItem?.children) && nodeItem?.children.length) {
           children.push(...nodeItem.children)
@@ -650,6 +746,49 @@ const updateSchema = (data: Partial<PageSchema>) => {
   publish({ topic: 'schemaChange', data: {} })
 }
 
+/**
+ * 恢复节点子树数据并重建nodesMap
+ * 用于AI回滚场景：恢复originalNodeData后需要同步清理/重建nodesMap
+ * @param nodeId 要恢复的节点ID
+ * @param restoredData 恢复后的节点数据（deepClone后的originalNodeData）
+ */
+const restoreNodeSubtree = (nodeId: string, restoredData: any) => {
+  // 1. 收集恢复前该节点子树中的所有ID（这些是需要从nodesMap中清理的）
+  const collectSubtreeIds = (node: any): string[] => {
+    const ids: string[] = []
+    if (node?.id) ids.push(node.id)
+    if (Array.isArray(node?.children)) {
+      node.children.forEach((child: any) => ids.push(...collectSubtreeIds(child)))
+    }
+    return ids
+  }
+
+  const currentNode = getNode(nodeId)
+  const oldIds = currentNode ? collectSubtreeIds(currentNode) : []
+  // 获取当前节点的parent信息（在清理前保存）
+  const parentEntry = nodesMap.value.get(nodeId)
+  const parentNode = parentEntry?.parent
+
+  // 2. 清理旧子树的nodesMap
+  oldIds.forEach((id) => nodesMap.value.delete(id))
+
+  // 3. 用恢复后的数据覆盖当前节点
+  if (currentNode) {
+    Object.keys(currentNode).forEach((key) => delete currentNode[key])
+    Object.assign(currentNode, restoredData)
+  }
+
+  // 4. 重建该节点自身的nodesMap条目
+  if (currentNode && parentNode) {
+    nodesMap.value.set(nodeId, { node: currentNode, parent: parentNode })
+  }
+
+  // 5. 重建子节点的nodesMap
+  if (Array.isArray(restoredData?.children) && restoredData.children.length && currentNode) {
+    generateNodesMap(restoredData.children, currentNode)
+  }
+}
+
 export default function () {
   return {
     pageState,
@@ -684,6 +823,8 @@ export default function () {
     exportSchema,
     getSchema,
     getNodePath,
-    updateSchema
+    updateSchema,
+    updatePageSchema,
+    restoreNodeSubtree
   }
 }

packages/canvas/container/src/components/AIConfirmDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="ai-confirm-dialog">
+    <div class="ai-confirm-header">
+      <div class="header-left">
+        <icon-successful class="icon-successful"></icon-successful>
+        <span class="header-title">AI操作已完成，您可选择采纳或放弃</span>
+      </div>
+    </div>
+    <div class="ai-confirm-actions-row">
+      <div class="actions-right">
+        <svg-icon name="refresh" class="refresh-icon" @click="handleRefresh" title="重新生成"></svg-icon>
+        <tiny-button class="actions-btn" @click="handleCancel" round>放弃</tiny-button>
+        <tiny-button class="actions-btn" @click="handleConfirm" type="primary" round> 采纳</tiny-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinyButton } from '@opentiny/vue'
+import { IconSuccessful } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    IconSuccessful: IconSuccessful(),
+    TinyButton
+  },
+  emits: ['confirm', 'cancel', 'close', 'refresh'],
+
+  setup(props, { emit }) {
+    const handleConfirm = () => {
+      emit('confirm')
+    }
+
+    const handleCancel = () => {
+      emit('cancel')
+    }
+
+    const handleRefresh = () => {
+      emit('refresh')
+    }
+
+    return {
+      handleConfirm,
+      handleCancel,
+      handleRefresh
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ai-confirm-dialog {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 20px;
+}
+
+/* 第一行：标题行 */
+.ai-confirm-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .icon-successful {
+    font-size: 20px;
+    fill: #5cb300;
+    margin-right: 8px;
+  }
+
+  .header-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #191919;
+    margin-right: 16px;
+  }
+
+  .close-icon {
+    cursor: pointer;
+    font-size: 16px;
+    color: #000;
+  }
+}
+
+/* 第二行：操作行 */
+.ai-confirm-actions-row {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+
+  .actions-right {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    .refresh-icon {
+      cursor: pointer;
+      color: #000;
+      font-size: 18px;
+    }
+    .actions-btn {
+      min-width: 68px;
+      height: 28px;
+    }
+  }
+}
+</style>