@yh7iku/vue-tree-flow 0.1.0

package/dist/components/FlowDesigner/FlowDesigner.vue.d.ts

@@ -0,0 +1,85 @@
+import { IFlowNode, IFlowLine } from './types';
+/**
+ * 组件属性
+ * @property nodes - 外部传入的节点数组（可选，不传则使用内置示例数据）
+ * @property lines - 外部传入的连线数组（可选，不传则使用内置示例数据）
+ * @property theme - 主题：dark 深色 / light 浅色（默认 dark）
+ */
+interface Props {
+    nodes?: IFlowNode[];
+    lines?: IFlowLine[];
+    theme?: 'dark' | 'light';
+}
+/**
+ * 新增节点的配置参数
+ */
+interface AddNodeOptions {
+    x?: number;
+    y?: number;
+    name?: string;
+    desc?: string;
+    pic?: string;
+    width?: number;
+    height?: number;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {
+    /**
+     * 获取当前节点数组
+     * @returns IFlowNode[]
+     */
+    getNodes: () => IFlowNode[];
+    /**
+     * 获取当前连线数组
+     * @returns IFlowLine[]
+     */
+    getLines: () => IFlowLine[];
+    /**
+     * 导出完整画布数据
+     * @returns { nodes: IFlowNode[]; lines: IFlowLine[] }
+     */
+    exportData: () => {
+        nodes: IFlowNode[];
+        lines: IFlowLine[];
+    };
+    /**
+     * 新增节点
+     * @param options - { x, y, name, desc, pic, width, height }
+     * @returns 新建的节点对象
+     */
+    addNode: (options?: AddNodeOptions) => IFlowNode;
+    /**
+     * 删除指定节点及其关联连线
+     * @param nodeId - 节点ID
+     */
+    deleteNode: (nodeId: string) => void;
+    /**
+     * 删除指定连线
+     * @param lineId - 连线ID
+     */
+    deleteLine: (lineId: string) => void;
+    /**
+     * 切换线条动画开关
+     * @returns 切换后的动画状态
+     */
+    toggleAnimation: () => boolean;
+    /**
+     * 将整个内容平移到画布中心
+     */
+    centerView: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:nodes": (nodes: IFlowNode[]) => any;
+    "update:lines": (lines: IFlowLine[]) => any;
+    beforeDeleteNode: (nodeId: string) => any;
+    beforeDeleteLine: (lineId: string) => any;
+    beforeAddNode: (options: AddNodeOptions) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:nodes"?: ((nodes: IFlowNode[]) => any) | undefined;
+    "onUpdate:lines"?: ((lines: IFlowLine[]) => any) | undefined;
+    onBeforeDeleteNode?: ((nodeId: string) => any) | undefined;
+    onBeforeDeleteLine?: ((lineId: string) => any) | undefined;
+    onBeforeAddNode?: ((options: AddNodeOptions) => any) | undefined;
+}>, {
+    theme: "dark" | "light";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/FlowDesigner/FlowLinesCanvas.vue.d.ts

@@ -0,0 +1,17 @@
+import { IFlowNode, IFlowLine, TempLine } from './types';
+interface Props {
+    nodes: IFlowNode[];
+    lines: IFlowLine[];
+    scale: number;
+    tempLine: TempLine;
+    selectedLineId?: string;
+    animated?: boolean;
+    theme?: 'dark' | 'light';
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    animated: boolean;
+    theme: "dark" | "light";
+    selectedLineId: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/FlowDesigner/FlowNode.vue.d.ts

@@ -0,0 +1,43 @@
+import { Anchor } from './types';
+/**
+ * 组件属性接口
+ * @property id - 节点唯一标识
+ * @property name - 节点名称
+ * @property desc - 节点描述（可选）
+ * @property x - 节点X坐标
+ * @property y - 节点Y坐标
+ * @property width - 节点宽度
+ * @property height - 节点高度
+ * @property pic - 节点图片地址（可选）
+ * @property isDragging - 是否正在拖动
+ */
+interface Props {
+    id: string;
+    name: string;
+    desc?: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    pic?: string;
+    isDragging?: boolean;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    dragStart: (nodeId: string, e: MouseEvent, initialX: number, initialY: number) => any;
+    anchorClick: (anchor: Anchor, e: MouseEvent) => any;
+    contextMenu: (nodeId: string, e: MouseEvent) => any;
+    anchorHover: (anchorType: "top" | "bottom" | "left" | "right") => any;
+    anchorLeave: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onDragStart?: ((nodeId: string, e: MouseEvent, initialX: number, initialY: number) => any) | undefined;
+    onAnchorClick?: ((anchor: Anchor, e: MouseEvent) => any) | undefined;
+    onContextMenu?: ((nodeId: string, e: MouseEvent) => any) | undefined;
+    onAnchorHover?: ((anchorType: "top" | "bottom" | "left" | "right") => any) | undefined;
+    onAnchorLeave?: (() => any) | undefined;
+}>, {
+    width: number;
+    height: number;
+    isDragging: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/FlowDesigner/SingleLineCanvas.vue.d.ts

@@ -0,0 +1,28 @@
+import { Anchor } from './types';
+/**
+ * 组件属性接口
+ * @property lineId - 连线唯一标识
+ * @property fromAnchor - 起始锚点
+ * @property toAnchor - 目标锚点
+ * @property scale - 缩放比例
+ * @property isSelected - 是否选中
+ * @property isHovered - 是否悬停
+ * @property animated - 是否启用动画
+ */
+interface Props {
+    lineId: string;
+    fromAnchor: Anchor;
+    toAnchor: Anchor;
+    scale: number;
+    isSelected: boolean;
+    animated?: boolean;
+    theme?: 'dark' | 'light';
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    scale: number;
+    isSelected: boolean;
+    animated: boolean;
+    theme: "dark" | "light";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/FlowDesigner/TempLineCanvas.vue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 组件属性接口
+ * @property visible - 是否可见
+ * @property startX - 起始X坐标
+ * @property startY - 起始Y坐标
+ * @property endX - 目标X坐标
+ * @property endY - 目标Y坐标
+ * @property scale - 缩放比例
+ * @property startType - 起始锚点类型
+ * @property endType - 目标锚点类型
+ */
+interface Props {
+    visible: boolean;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    scale: number;
+    startType?: string;
+    endType?: string;
+    theme?: 'dark' | 'light';
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    scale: number;
+    theme: "dark" | "light";
+    visible: boolean;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    startType: string;
+    endType: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/FlowDesigner/index.d.ts

@@ -0,0 +1,7 @@
+export { default as FlowDesigner } from './FlowDesigner.vue';
+export { default as FlowNode } from './FlowNode.vue';
+export { default as FlowLinesCanvas } from './FlowLinesCanvas.vue';
+export { default as SingleLineCanvas } from './SingleLineCanvas.vue';
+export { default as TempLineCanvas } from './TempLineCanvas.vue';
+export * from './types';
+export * from './utils';

package/dist/components/FlowDesigner/types.d.ts

@@ -0,0 +1,108 @@
+/**
+ * 锚点类型：定义节点上的锚点位置
+ */
+export type AnchorType = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * 锚点接口：表示节点上的连接点
+ * @property id - 锚点唯一标识
+ * @property nodeId - 所属节点ID
+ * @property type - 锚点类型（top、bottom、left、right）
+ * @property x - 锚点X坐标
+ * @property y - 锚点Y坐标
+ */
+export interface Anchor {
+    id: string;
+    nodeId: string;
+    type: AnchorType;
+    x: number;
+    y: number;
+}
+/**
+ * 流程节点接口：表示流程图中的节点
+ * @property id - 节点唯一标识
+ * @property name - 节点名称
+ * @property desc - 节点描述（可选）
+ * @property x - 节点X坐标
+ * @property y - 节点Y坐标
+ * @property width - 节点宽度
+ * @property height - 节点高度
+ * @property anchors - 节点上的锚点数组
+ * @property pic - 节点图片地址（可选，有值时节点以图片展示）
+ * @property collapsed - 是否已折叠子节点（可选）
+ */
+export interface IFlowNode {
+    id: string;
+    name: string;
+    desc?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    anchors: Anchor[];
+    pic?: string;
+    collapsed?: boolean;
+}
+/**
+ * 流程连线接口：表示节点之间的连接
+ * @property id - 连线唯一标识
+ * @property fromAnchorId - 起始锚点ID
+ * @property toAnchorId - 目标锚点ID
+ */
+export interface IFlowLine {
+    id: string;
+    fromAnchorId: string;
+    toAnchorId: string;
+}
+/**
+ * 临时连线接口：用于绘制中的连线
+ * @property visible - 是否可见
+ * @property startX - 起始X坐标
+ * @property startY - 起始Y坐标
+ * @property endX - 结束X坐标
+ * @property endY - 结束Y坐标
+ * @property startType - 起始锚点类型（可选）
+ * @property endType - 结束锚点类型（可选）
+ */
+export interface TempLine {
+    visible: boolean;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    startType?: string;
+    endType?: string;
+}
+/**
+ * 上下文菜单类型：定义菜单类型
+ */
+export type ContextMenuType = 'node' | 'line' | 'none';
+/**
+ * 上下文菜单状态接口：表示上下文菜单的状态
+ * @property type - 菜单类型
+ * @property x - 菜单X坐标
+ * @property y - 菜单Y坐标
+ * @property targetId - 目标ID（节点或连线）
+ */
+export interface ContextMenuState {
+    type: ContextMenuType;
+    x: number;
+    y: number;
+    targetId: string | null;
+}
+/**
+ * 编辑面板状态接口：表示节点编辑面板的状态
+ * @property visible - 是否可见
+ * @property nodeId - 正在编辑的节点ID
+ * @property x - 面板X坐标
+ * @property y - 面板Y坐标
+ * @property name - 节点名称
+ * @property desc - 节点描述
+ */
+export interface EditPanelState {
+    visible: boolean;
+    nodeId: string | null;
+    x: number;
+    y: number;
+    name: string;
+    desc: string;
+}

package/dist/components/FlowDesigner/utils.d.ts

@@ -0,0 +1,108 @@
+import { Anchor, IFlowNode, IFlowLine } from './types';
+/**
+ * 根据锚点类型计算锚点在节点上的实际坐标
+ * @param anchor - 锚点对象
+ * @param node - 节点对象
+ * @returns 锚点的实际坐标 {x, y}
+ */
+export declare const getAnchorPosition: (anchor: Anchor, node: IFlowNode) => {
+    x: number;
+    y: number;
+};
+/**
+ * 根据锚点类型计算连线端点在节点边界上的坐标
+ * 用于绘制连线，端点正好对齐到节点边界
+ * @param anchor - 锚点对象
+ * @param node - 节点对象
+ * @returns 连线端点的坐标 {x, y}
+ */
+export declare const getLineEndpoint: (anchor: Anchor, node: IFlowNode) => {
+    x: number;
+    y: number;
+};
+/**
+ * 检测鼠标是否命中锚点
+ * @param mouseX - 鼠标X坐标
+ * @param mouseY - 鼠标Y坐标
+ * @param nodes - 节点数组
+ * @param canvasPos - 画布位置
+ * @param scale - 缩放比例
+ * @param canvasRect - 画布矩形
+ * @returns 命中的锚点，未命中返回null
+ */
+export declare const hitTestAnchor: (mouseX: number, mouseY: number, nodes: IFlowNode[], canvasPos: {
+    x: number;
+    y: number;
+}, scale: number, canvasRect: DOMRect) => Anchor | null;
+/**
+ * 生成连线唯一ID
+ * @returns 连线ID字符串
+ */
+export declare const generateLineId: () => string;
+/**
+ * 停止事件传播和默认行为
+ * @param e - 事件对象
+ */
+export declare const stopEvent: (e: Event) => void;
+/**
+ * 检测鼠标是否命中连线（使用改进的贝塞尔曲线检测）
+ * @param line - 连线对象
+ * @param nodes - 节点数组
+ * @param mx - 鼠标X坐标
+ * @param my - 鼠标Y坐标
+ * @param canvasPos - 画布位置
+ * @param scale - 缩放比例
+ * @param canvasRect - 画布矩形
+ * @param hitRadius - 命中半径，默认8
+ * @param anchorMap - 预构建的锚点映射（可选，用于性能优化）
+ * @returns 是否命中
+ */
+export declare const isHit: (line: IFlowLine, nodes: IFlowNode[], mx: number, my: number, canvasPos: {
+    x: number;
+    y: number;
+}, scale: number, canvasRect: DOMRect, hitRadius?: number, anchorMap?: Map<string, {
+    anchor: Anchor;
+    node: IFlowNode;
+}>) => boolean;
+/**
+ * 预构建锚点映射，用于优化性能
+ * @param nodes - 节点数组
+ * @returns 锚点映射 Map<anchorId, {anchor, node}>
+ */
+export declare const buildAnchorMap: (nodes: IFlowNode[]) => Map<string, {
+    anchor: Anchor;
+    node: IFlowNode;
+}>;
+/**
+ * 切换选中的连线
+ * @param lines - 所有连线
+ * @param hitLines - 命中的连线
+ * @param currentSelectedId - 当前选中的连线ID
+ * @returns 新选中的连线ID
+ */
+export declare const toggleSelectedLine: (lines: IFlowLine[], hitLines: IFlowLine[], currentSelectedId: string) => string;
+/**
+ * 检测是否为重复连线
+ * @param lines - 所有连线
+ * @param fromAnchorId - 起始锚点ID
+ * @param toAnchorId - 目标锚点ID
+ * @returns 是否为重复连线
+ */
+export declare const isDuplicateLine: (lines: IFlowLine[], fromAnchorId: string, toAnchorId: string) => boolean;
+/**
+ * 树形重新布局：基于连线关系将节点重新排布为自上而下的树
+ *
+ * 算法：
+ * - 通过连线重建父子关系（fromAnchorId 为父，toAnchorId 为子）
+ * - 按子树叶子数量分配水平空间（兄弟子树不重叠）
+ * - y 坐标按层级递增
+ * - 以原根节点位置为基准整体平移，避免布局后整体跑偏
+ *
+ * 仅当数据可构成唯一根的树结构时才会重排；
+ * 存在多根或循环引用时返回 null（放弃重排，保持原位置）。
+ *
+ * @param nodes - 节点数组
+ * @param lines - 连线数组
+ * @returns 重新布局后的新节点数组；无法构成树时返回 null
+ */
+export declare const relayoutTree: (nodes: IFlowNode[], lines: IFlowLine[]) => IFlowNode[] | null;

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './FlowDesigner';

package/dist/utils/treeToFlow.d.ts

@@ -0,0 +1,68 @@
+import { IFlowNode, IFlowLine } from '../components/FlowDesigner/types';
+/**
+ * 树节点接口：树形数据的通用结构
+ * @property id - 节点唯一标识
+ * @property name - 节点名称（可选，缺省时使用 id）
+ * @property pic - 节点图片路径（可选）
+ * @property children - 子节点数组（null 或空数组表示叶子节点）
+ */
+export interface TreeNode {
+    id: string;
+    name?: string;
+    pic?: string;
+    children?: TreeNode[] | null;
+}
+/**
+ * 布局配置项
+ * @property nodeWidth - 节点宽度，默认 140
+ * @property nodeHeight - 节点高度，默认 200
+ * @property hGap - 兄弟节点间距（纵向布局为水平间距，横向布局为垂直间距），默认 100
+ * @property vGap - 父子层级间距（纵向布局为垂直间距，横向布局为水平间距），默认 120
+ * @property offsetX - 画布整体 X 偏移，默认 0
+ * @property offsetY - 画布整体 Y 偏移，默认 0
+ * @property direction - 布局方向：vertical 自上而下 / horizontal 自左向右，默认 vertical
+ */
+export interface TreeLayoutOptions {
+    nodeWidth?: number;
+    nodeHeight?: number;
+    hGap?: number;
+    vGap?: number;
+    offsetX?: number;
+    offsetY?: number;
+    direction?: 'vertical' | 'horizontal';
+}
+/**
+ * 转换结果
+ * @property nodes - 流程设计器节点数组
+ * @property lines - 流程设计器连线数组
+ */
+export interface TreeToFlowResult {
+    nodes: IFlowNode[];
+    lines: IFlowLine[];
+}
+/**
+ * 树结构转流程设计器数据（中间转换层）
+ *
+ * 布局规则：
+ * - 统计每棵子树的叶子节点数量，按其比例分配兄弟方向空间，保证兄弟子树不重叠
+ * - vertical（自上而下）：父节点水平居中，y 按层级递增，连线 bottom → top
+ * - horizontal（自左向右）：父节点垂直居中，x 按层级递增，连线 right → left
+ *
+ * @param tree - 树形数据（如 doc/data/tree.json）
+ * @param options - 布局配置项（direction 控制布局方向）
+ * @returns 可直接用于 FlowDesigner 的节点与连线数据
+ */
+export declare const treeToFlow: (tree: TreeNode, options?: TreeLayoutOptions) => TreeToFlowResult;
+/**
+ * 流程设计器数据转回树结构（treeToFlow 的逆向转换）
+ *
+ * 转换规则：
+ * - 根据连线（lines）重建父子关系：fromAnchorId 所属节点为父，toAnchorId 所属节点为子
+ * - 通过连线无入边的节点识别为根节点（若存在多个根则取第一个）
+ * - 节点上的自定义额外字段（如 pic）会原样透传，便于还原原始 tree.json
+ *
+ * @param nodes - 流程设计器节点数组
+ * @param lines - 流程设计器连线数组
+ * @returns 树结构数据；节点为空时返回 null
+ */
+export declare const flowToTree: (nodes: IFlowNode[], lines: IFlowLine[]) => TreeNode | null;

package/dist/vue-tree-flow.css

@@ -0,0 +1,2 @@
+.node-pic[data-v-2dead940]{object-fit:contain;border-radius:6px;flex:1;width:100%;min-height:0}.node-name[data-v-2dead940]{text-align:center;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;width:100%;padding:4px 0;font-size:12px;line-height:1.4;overflow:hidden}.flow-designer[data-v-0545e5a3]{--fd-bg:#0f0f1a;--fd-grid:#ffffff0d;--fd-panel-bg:#1e1e2f;--fd-panel-hover:#2d2d44;--fd-panel-border:#333;--fd-text:#fff;--fd-text-secondary:#ccc;--fd-danger:#ff6b6b;--fd-accent:#4299e1;--fd-accent-dark:#3182ce;--fd-node-bg:#121224e6;--fd-node-border:#4299e14d;--fd-node-border-hover:#4299e1cc;--fd-node-text:#fff}.flow-designer--light[data-v-0545e5a3]{--fd-bg:#fcfcfc;--fd-grid:#0000000f;--fd-panel-bg:#fff;--fd-panel-hover:#f0f4f8;--fd-panel-border:#e0e0e0;--fd-text:#333;--fd-text-secondary:#666;--fd-danger:#e53e3e;--fd-accent:#3182ce;--fd-accent-dark:#2b6cb0;--fd-node-bg:#fff;--fd-node-border:#4299e166;--fd-node-border-hover:#4299e1;--fd-node-text:#333}.flow-designer[data-v-0545e5a3]{background-color:var(--fd-bg);background-image:linear-gradient(var(--fd-grid) 1px, transparent 1px), linear-gradient(90deg, var(--fd-grid) 1px, transparent 1px);background-size:20px 20px;width:100%;height:100%;margin:0;padding:0;position:relative;overflow:hidden}.canvas-container[data-v-0545e5a3]{-webkit-user-select:none;user-select:none;cursor:grab;touch-action:none;width:100%;height:100%;position:relative}.canvas-container.is-dragging[data-v-0545e5a3],.canvas-container.is-dragging[data-v-0545e5a3] *{cursor:grabbing!important}.canvas-content[data-v-0545e5a3]{position:absolute}.nodes-container[data-v-0545e5a3]{z-index:6;position:relative}.context-menu[data-v-0545e5a3]{background-color:var(--fd-panel-bg);border:1px solid var(--fd-panel-border);z-index:9999;border-radius:6px;width:180px;padding:8px 0;position:absolute;box-shadow:0 4px 12px #00000080}.context-menu-item[data-v-0545e5a3]{color:var(--fd-text);cursor:pointer;padding:8px 16px;font-size:14px;transition:background-color .2s}.context-menu-item[data-v-0545e5a3]:hover{background-color:var(--fd-accent);color:#fff}.context-menu-item.danger[data-v-0545e5a3]{color:var(--fd-danger)}.context-menu-divider[data-v-0545e5a3]{background-color:var(--fd-panel-border);height:1px;margin:4px 0}.edit-panel[data-v-0545e5a3]{background-color:var(--fd-panel-bg);border:1px solid var(--fd-accent);z-index:9999;border-radius:8px;width:320px;padding:20px;position:absolute;box-shadow:0 8px 24px #0009}.edit-panel-title[data-v-0545e5a3]{color:var(--fd-text);border-bottom:1px solid var(--fd-panel-border);margin:0 0 16px;padding-bottom:8px;font-size:16px}.edit-panel-field[data-v-0545e5a3]{margin-bottom:16px}.edit-panel-label[data-v-0545e5a3]{color:var(--fd-text-secondary);margin-bottom:8px;font-size:14px;display:block}.edit-panel-input[data-v-0545e5a3]{background-color:var(--fd-panel-hover);border:1px solid var(--fd-panel-border);width:100%;color:var(--fd-text);box-sizing:border-box;border-radius:4px;outline:none;padding:10px 12px;font-size:14px}.edit-panel-actions[data-v-0545e5a3]{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.edit-panel-btn[data-v-0545e5a3]{cursor:pointer;border:none;border-radius:4px;padding:8px 16px;font-size:14px;transition:background-color .2s}.edit-panel-btn.cancel[data-v-0545e5a3]{background-color:var(--fd-panel-border);color:var(--fd-text)}.edit-panel-btn.cancel[data-v-0545e5a3]:hover{background-color:var(--fd-panel-hover)}.edit-panel-btn.save[data-v-0545e5a3]{background-color:var(--fd-accent);color:#fff}.edit-panel-btn.save[data-v-0545e5a3]:hover{background-color:var(--fd-accent-dark)}
+/*$vite$:1*/