-
+
-
+
diff --git a/draggable-panels/src/fauto/materials/DesignComponentList/index.vue b/draggable-panels/src/fauto/materials/DesignComponentList/index.vue
index ced8265..b2ace1a 100644
--- a/draggable-panels/src/fauto/materials/DesignComponentList/index.vue
+++ b/draggable-panels/src/fauto/materials/DesignComponentList/index.vue
@@ -1,9 +1,12 @@
@@ -28,7 +58,9 @@ const handleAddComponent = (componentId: string) => {
v-for="meta in designStore.componentMetas"
:key="meta.id"
class="component-item"
- @click="handleAddComponent(meta.id)"
+ @click="handleClick(meta.id, meta.name)"
+ @mouseenter="handleMouseEnter(meta.id, meta.name)"
+ @mouseleave="handleMouseLeave"
>
📦
diff --git a/draggable-panels/src/fauto/plugins/index.ts b/draggable-panels/src/fauto/plugins/index.ts
new file mode 100644
index 0000000..07a5cf5
--- /dev/null
+++ b/draggable-panels/src/fauto/plugins/index.ts
@@ -0,0 +1,27 @@
+/**
+ * Fauto 插件系统入口
+ *
+ * 提供全局交互钩子和工具函数
+ */
+
+// 导出交互Store
+export { useInteractionStore } from './interactionStore'
+export type {
+ ElementType,
+ InteractionEvent,
+ InteractionTarget,
+ InteractionState,
+ HookCallback
+} from './interactionStore'
+
+// 导出路径工具
+export {
+ parsePath,
+ buildPath,
+ calculateSiblingIndex,
+ generateElementPath,
+ getParentPath,
+ getPathDepth,
+ isAncestorPath
+} from './pathUtils'
+export type { PathNode } from './pathUtils'
diff --git a/draggable-panels/src/fauto/plugins/interactionStore.ts b/draggable-panels/src/fauto/plugins/interactionStore.ts
new file mode 100644
index 0000000..499812b
--- /dev/null
+++ b/draggable-panels/src/fauto/plugins/interactionStore.ts
@@ -0,0 +1,257 @@
+import { defineStore } from 'pinia'
+import { ref, shallowRef } from 'vue'
+
+/**
+ * 交互元素类型
+ * - er: el-row
+ * - ec: el-col
+ * - dc: design-component (设计组件)
+ */
+export type ElementType = 'er' | 'ec' | 'dc'
+
+/**
+ * 交互事件类型
+ */
+export type InteractionEvent =
+ | 'hover' // 鼠标悬停
+ | 'click' // 鼠标点击
+ | 'longpress' // 鼠标长按
+ | 'drag' // 长按并移动
+ | 'release' // 鼠标松开
+
+/**
+ * 交互目标信息
+ */
+export interface InteractionTarget {
+ type: ElementType // 元素类型
+ path: string // 结构化路径ID (如 r1c2r1c1)
+ componentId?: string // 设计组件ID (仅dc类型)
+ element?: HTMLElement // DOM元素引用
+}
+
+/**
+ * 交互状态信息
+ */
+export interface InteractionState {
+ event: InteractionEvent // 当前事件类型
+ target: InteractionTarget // 目标元素信息
+ timestamp: number // 时间戳
+}
+
+/**
+ * 钩子函数回调类型
+ */
+export type HookCallback = (state: InteractionState) => void
+
+/**
+ * 全局交互钩子插件
+ * 管理所有的鼠标交互事件和状态
+ */
+export const useInteractionStore = defineStore('interaction', () => {
+ // 当前悬停的元素
+ const hoverTarget = ref
(null)
+
+ // 当前点击/选中的元素
+ const selectedTarget = ref(null)
+
+ // 当前拖拽的元素
+ const dragTarget = ref(null)
+
+ // 拖拽放置的目标元素
+ const dropTarget = ref(null)
+
+ // 最后一次交互状态（用于Footer显示）
+ const lastInteraction = ref(null)
+
+ // 是否正在长按
+ const isLongPressing = ref(false)
+
+ // 是否正在拖拽
+ const isDragging = ref(false)
+
+ // 长按计时器
+ let longPressTimer: number | null = null
+
+ // 钩子函数注册表
+ const hooks = shallowRef>>(new Map())
+
+ /**
+ * 注册钩子函数
+ */
+ const registerHook = (event: InteractionEvent, callback: HookCallback) => {
+ if (!hooks.value.has(event)) {
+ hooks.value.set(event, new Set())
+ }
+ hooks.value.get(event)!.add(callback)
+
+ // 返回取消注册函数
+ return () => {
+ hooks.value.get(event)?.delete(callback)
+ }
+ }
+
+ /**
+ * 触发钩子函数
+ */
+ const triggerHooks = (event: InteractionEvent, target: InteractionTarget) => {
+ const state: InteractionState = {
+ event,
+ target,
+ timestamp: Date.now()
+ }
+
+ // 更新最后交互状态
+ lastInteraction.value = state
+
+ // 触发所有注册的回调
+ const callbacks = hooks.value.get(event)
+ if (callbacks) {
+ callbacks.forEach(cb => cb(state))
+ }
+
+ console.log(`[Interaction] ${event}:`, target)
+ }
+
+ /**
+ * 鼠标悬停事件
+ */
+ const onHover = (target: InteractionTarget) => {
+ hoverTarget.value = target
+ triggerHooks('hover', target)
+ }
+
+ /**
+ * 鼠标离开事件
+ */
+ const onLeave = () => {
+ hoverTarget.value = null
+ }
+
+ /**
+ * 鼠标点击事件
+ */
+ const onClick = (target: InteractionTarget) => {
+ selectedTarget.value = target
+ triggerHooks('click', target)
+ }
+
+ /**
+ * 鼠标按下事件（开始检测长按）
+ */
+ const onMouseDown = (target: InteractionTarget) => {
+ // 清除之前的计时器
+ if (longPressTimer) {
+ clearTimeout(longPressTimer)
+ }
+
+ // 设置长按检测（500ms后触发）
+ longPressTimer = window.setTimeout(() => {
+ isLongPressing.value = true
+ dragTarget.value = target
+ triggerHooks('longpress', target)
+ }, 500)
+ }
+
+ /**
+ * 鼠标移动事件（长按状态下触发拖拽）
+ */
+ const onMouseMove = (target: InteractionTarget) => {
+ if (isLongPressing.value && dragTarget.value) {
+ if (!isDragging.value) {
+ isDragging.value = true
+ }
+ dropTarget.value = target
+ triggerHooks('drag', target)
+ }
+ }
+
+ /**
+ * 鼠标松开事件
+ */
+ const onMouseUp = () => {
+ // 清除长按计时器
+ if (longPressTimer) {
+ clearTimeout(longPressTimer)
+ longPressTimer = null
+ }
+
+ // 如果正在拖拽，触发释放事件
+ if (isDragging.value && dragTarget.value && dropTarget.value) {
+ triggerHooks('release', dropTarget.value)
+ }
+
+ // 重置状态
+ isLongPressing.value = false
+ isDragging.value = false
+ dragTarget.value = null
+ dropTarget.value = null
+ }
+
+ /**
+ * 获取元素类型的中文名称
+ */
+ const getTypeName = (type: ElementType): string => {
+ const names: Record = {
+ 'er': 'el-row',
+ 'ec': 'el-col',
+ 'dc': '设计组件'
+ }
+ return names[type]
+ }
+
+ /**
+ * 获取事件类型的中文名称
+ */
+ const getEventName = (event: InteractionEvent): string => {
+ const names: Record = {
+ 'hover': '悬停',
+ 'click': '点击',
+ 'longpress': '长按',
+ 'drag': '拖拽',
+ 'release': '释放'
+ }
+ return names[event]
+ }
+
+ /**
+ * 格式化交互状态为显示文本
+ */
+ const formatInteraction = (state: InteractionState | null): string => {
+ if (!state) return '无交互'
+
+ const eventName = getEventName(state.event)
+ const typeName = getTypeName(state.target.type)
+ const path = state.target.path
+ const componentId = state.target.componentId
+
+ if (state.target.type === 'dc') {
+ return `${eventName} → ${typeName} [${componentId}]`
+ }
+ return `${eventName} → ${typeName} [${path}]`
+ }
+
+ return {
+ // 状态
+ hoverTarget,
+ selectedTarget,
+ dragTarget,
+ dropTarget,
+ lastInteraction,
+ isLongPressing,
+ isDragging,
+
+ // 方法
+ registerHook,
+ onHover,
+ onLeave,
+ onClick,
+ onMouseDown,
+ onMouseMove,
+ onMouseUp,
+
+ // 辅助方法
+ getTypeName,
+ getEventName,
+ formatInteraction
+ }
+})
diff --git a/draggable-panels/src/fauto/plugins/pathUtils.ts b/draggable-panels/src/fauto/plugins/pathUtils.ts
new file mode 100644
index 0000000..c79f594
--- /dev/null
+++ b/draggable-panels/src/fauto/plugins/pathUtils.ts
@@ -0,0 +1,125 @@
+/**
+ * 结构化路径ID生成器
+ * 用于为el-row和el-col生成唯一的结构化路径
+ *
+ * 路径格式: r{n}c{m}r{x}c{y}...
+ * - r: el-row
+ * - c: el-col
+ * - 数字: 在同级元素中的索引（从1开始）
+ */
+
+import type { ElementType } from './interactionStore'
+
+/**
+ * 路径节点信息
+ */
+export interface PathNode {
+ type: ElementType
+ index: number
+}
+
+/**
+ * 解析结构化路径字符串
+ * @param path 路径字符串，如 "r1c2r1c1"
+ * @returns 路径节点数组
+ */
+export const parsePath = (path: string): PathNode[] => {
+ const nodes: PathNode[] = []
+ const regex = /(r|c)(\d+)/g
+ let match
+
+ while ((match = regex.exec(path)) !== null) {
+ nodes.push({
+ type: match[1] === 'r' ? 'er' : 'ec',
+ index: parseInt(match[2])
+ })
+ }
+
+ return nodes
+}
+
+/**
+ * 生成结构化路径字符串
+ * @param nodes 路径节点数组
+ * @returns 路径字符串
+ */
+export const buildPath = (nodes: PathNode[]): string => {
+ return nodes.map(node => {
+ const prefix = node.type === 'er' ? 'r' : 'c'
+ return `${prefix}${node.index}`
+ }).join('')
+}
+
+/**
+ * 计算元素在其父级中的索引
+ * @param element 目标元素
+ * @param className 要匹配的class名（el-row 或 el-col）
+ * @returns 索引（从1开始）
+ */
+export const calculateSiblingIndex = (element: Element, className: string): number => {
+ const parent = element.parentElement
+ if (!parent) return 1
+
+ // 通过class名称筛选同级元素（Element Plus组件渲染后是div带class）
+ const siblings = Array.from(parent.children).filter(
+ child => child.classList.contains(className)
+ )
+
+ const index = siblings.indexOf(element)
+ return index >= 0 ? index + 1 : 1
+}
+
+/**
+ * 递归生成元素的完整结构化路径
+ * @param element 目标元素
+ * @returns 结构化路径字符串
+ */
+export const generateElementPath = (element: Element): string => {
+ const pathNodes: PathNode[] = []
+ let current: Element | null = element
+
+ while (current) {
+ // Element Plus的el-row/el-col渲染后是div标签，通过class来识别
+ if (current.classList.contains('el-row')) {
+ const index = calculateSiblingIndex(current, 'el-row')
+ pathNodes.unshift({ type: 'er', index })
+ } else if (current.classList.contains('el-col')) {
+ const index = calculateSiblingIndex(current, 'el-col')
+ pathNodes.unshift({ type: 'ec', index })
+ }
+
+ current = current.parentElement
+ }
+
+ return buildPath(pathNodes)
+}
+
+/**
+ * 获取路径的父路径
+ * @param path 当前路径
+ * @returns 父路径，如果已是根则返回空字符串
+ */
+export const getParentPath = (path: string): string => {
+ const nodes = parsePath(path)
+ if (nodes.length <= 1) return ''
+ return buildPath(nodes.slice(0, -1))
+}
+
+/**
+ * 获取路径的深度
+ * @param path 路径字符串
+ * @returns 深度（节点数量）
+ */
+export const getPathDepth = (path: string): number => {
+ return parsePath(path).length
+}
+
+/**
+ * 检查路径A是否是路径B的祖先
+ * @param ancestorPath 祖先路径
+ * @param descendantPath 后代路径
+ * @returns 是否为祖先关系
+ */
+export const isAncestorPath = (ancestorPath: string, descendantPath: string): boolean => {
+ return descendantPath.startsWith(ancestorPath) && descendantPath.length > ancestorPath.length
+}
diff --git a/draggable-panels/src/views/TestPage1.vue b/draggable-panels/src/views/TestPage1.vue
index c2b4282..f89281f 100644
--- a/draggable-panels/src/views/TestPage1.vue
+++ b/draggable-panels/src/views/TestPage1.vue
@@ -1,52 +1,43 @@
-
-
测试页面 1
-
-
- 左侧内容区域
-
-
- 右侧内容区域
-
-
-
-
-
- 列 1
-
-
- 列 2
-
-
- 列 3
-
-
-
左侧内容区域
+
+
+
+
+ 右侧标题
+
+
+
+
+ 右侧列1
+
+
+ 右侧列2
+
+
+
+
diff --git a/draggable-panels/src/views/TestPage2.vue b/draggable-panels/src/views/TestPage2.vue
index 6deaeda..5838784 100644
--- a/draggable-panels/src/views/TestPage2.vue
+++ b/draggable-panels/src/views/TestPage2.vue
@@ -1,64 +1,53 @@
-
-
测试页面 2 - 表单布局
-
-
- 表单标题区域
-
-
-
-
-
- 标签
-
-
- 输入框
-
-
-
-
-
- 标签
-
-
- 输入框
-
-
-
-
-
- 提交按钮
-
-
-
表单标题区域
+
+
+ 用户名
+
+
+ 输入框占位
+
+
+ 密码
+
+
+ 密码框占位
+
+
+ 提交按钮
+
+
diff --git a/draggable-panels/src/views/dashboard/Overview.vue b/draggable-panels/src/views/dashboard/Overview.vue
index 376c1ad..fb61e58 100644
--- a/draggable-panels/src/views/dashboard/Overview.vue
+++ b/draggable-panels/src/views/dashboard/Overview.vue
@@ -1,72 +1,55 @@
-
-
仪表板概览
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 图表区域
-
-
- 侧边栏信息
-
-
-
图表区域占位
+
+
+
+
+
diff --git a/draggable-panels/src/views/user/Profile.vue b/draggable-panels/src/views/user/Profile.vue
index 1521d9c..55c0294 100644
--- a/draggable-panels/src/views/user/Profile.vue
+++ b/draggable-panels/src/views/user/Profile.vue
@@ -1,64 +1,46 @@
-
-
用户资料
-
-
-
-
-
-
-
-
- 姓名: 张三
-
-
- 邮箱: zhang@example.com
-
-
-
-
- 电话: 138****8888
-
-
- 部门: 技术部
-
-
-
-
姓名: 张三
+
+
+ 邮箱: zhang@example.com
+
+
+ 电话: 138****8888
+
+
+ 部门: 技术部
+
+
+
+