v-nuxt-ui 0.1.36 → 0.2.1

package/dist/runtime/composables/flow/useFlowStyles.d.ts

@@ -1,14 +1,67 @@
+import type { WritableComputedRef } from 'vue';
+import type { FlowEdgeStrokeType, FlowEdgePathType, FlowArrowType } from '#v/constants';
+/** 连接线样式存储结构 */
+export interface FlowEdgeStylesState {
+    strokeWidth: number;
+    markerStart: FlowArrowType;
+    markerEnd: FlowArrowType;
+    animated: boolean;
+    strokeType: FlowEdgeStrokeType;
+    pathType: FlowEdgePathType;
+    color: string;
+    labelColor: string;
+}
+/** 节点样式存储结构 */
+export interface FlowNodeStylesState {
+    borderWidth: number;
+    borderRadius: number;
+    borderColor: string;
+    bgColor: string;
+    fontColor: string;
+    fontSize: number;
+    handleSize: number;
+    handleColor: string;
+}
+/** 颜色模式存储结构 */
+export type FlowColorMode = 'unified' | 'custom';
+export interface FlowColorModeState {
+    /** 统一 / 自定义 */
+    mode: FlowColorMode;
+    /** 统一模式下选中的 Tailwind 颜色名（例如 'blue'），空字符串 = 默认 */
+    colorName: string;
+}
+/** 连接点大小预览标记（全局共享，改变 handleSize 后临时显示所有 handles） */
+declare const _handleSizePreview: import("vue").Ref<boolean, boolean>;
+export declare const handleSizePreview: Readonly<typeof _handleSizePreview>;
 /**
  * Flow 样式设置 Composable
- * 管理连接线和节点的样式配置
+ * localStorage 以对象形式存储，返回各字段的可写 computed ref
  */
 export declare function useFlowStyles(): {
-    edgeStrokeWidth: import("@vueuse/core").RemovableRef<number>;
-    edgeMarkerStart: import("@vueuse/core").RemovableRef<boolean>;
-    edgeMarkerEnd: import("@vueuse/core").RemovableRef<boolean>;
-    nodeBorderWidth: import("@vueuse/core").RemovableRef<number>;
-    setEdgeStrokeWidth: (width: number) => void;
-    toggleEdgeMarkerStart: () => void;
-    toggleEdgeMarkerEnd: () => void;
-    setNodeBorderWidth: (width: number) => void;
+    colorMode: WritableComputedRef<FlowColorMode, FlowColorMode>;
+    unifiedColor: WritableComputedRef<string, string>;
+    isUnifiedMode: import("vue").ComputedRef<boolean>;
+    edgeStrokeWidth: WritableComputedRef<number, number>;
+    edgeMarkerStart: WritableComputedRef<FlowArrowType, FlowArrowType>;
+    edgeMarkerEnd: WritableComputedRef<FlowArrowType, FlowArrowType>;
+    edgeAnimated: WritableComputedRef<boolean, boolean>;
+    edgeStrokeType: WritableComputedRef<FlowEdgeStrokeType, FlowEdgeStrokeType>;
+    edgePathType: WritableComputedRef<FlowEdgePathType, FlowEdgePathType>;
+    edgeColor: WritableComputedRef<string, string>;
+    edgeLabelColor: WritableComputedRef<string, string>;
+    nodeBorderWidth: WritableComputedRef<number, number>;
+    nodeBorderRadius: WritableComputedRef<number, number>;
+    nodeBorderColor: WritableComputedRef<string, string>;
+    nodeBgColor: WritableComputedRef<string, string>;
+    nodeFontColor: WritableComputedRef<string, string>;
+    nodeFontSize: WritableComputedRef<number, number>;
+    nodeHandleSize: WritableComputedRef<number, number>;
+    nodeHandleColor: WritableComputedRef<string, string>;
+    effectiveNodeBorderColor: import("vue").ComputedRef<string>;
+    effectiveNodeBgColor: import("vue").ComputedRef<string>;
+    effectiveNodeFontColor: import("vue").ComputedRef<string>;
+    effectiveNodeHandleColor: import("vue").ComputedRef<string>;
+    effectiveEdgeColor: import("vue").ComputedRef<string>;
+    effectiveEdgeLabelColor: import("vue").ComputedRef<string>;
 };
+export {};

package/dist/runtime/composables/flow/useFlowStyles.js

@@ -1,32 +1,136 @@
+import { computed, ref } from "vue";
 import { StorageKey } from "#v/types";
-import { useLocalStorage } from "@vueuse/core";
+import { useLocalStorage, useColorMode } from "@vueuse/core";
+import { resolveFlowColor } from "#v/constants";
+const EDGE_DEFAULTS = {
+  strokeWidth: 2,
+  markerStart: "none",
+  markerEnd: "arrow",
+  animated: false,
+  strokeType: "solid",
+  pathType: "smoothstep",
+  color: "",
+  labelColor: ""
+};
+const NODE_DEFAULTS = {
+  borderWidth: 2,
+  borderRadius: 6,
+  borderColor: "",
+  bgColor: "",
+  fontColor: "",
+  fontSize: 14,
+  handleSize: 6,
+  handleColor: ""
+};
+const COLOR_MODE_DEFAULTS = {
+  mode: "custom",
+  colorName: ""
+};
+function useField(source, key) {
+  return computed({
+    get: () => source.value[key],
+    set: (val) => {
+      source.value = { ...source.value, [key]: val };
+    }
+  });
+}
+const _handleSizePreview = ref(false);
+let _handleSizePreviewTimer = null;
+export const handleSizePreview = _handleSizePreview;
+function triggerHandleSizePreview() {
+  if (_handleSizePreviewTimer) clearTimeout(_handleSizePreviewTimer);
+  _handleSizePreview.value = true;
+  _handleSizePreviewTimer = setTimeout(() => {
+    _handleSizePreview.value = false;
+    _handleSizePreviewTimer = null;
+  }, 1e3);
+}
 export function useFlowStyles() {
-  const edgeStrokeWidth = useLocalStorage(StorageKey.FLOW_EDGE_STROKE_WIDTH, 2);
-  const edgeMarkerStart = useLocalStorage(StorageKey.FLOW_EDGE_MARKER_START, false);
-  const edgeMarkerEnd = useLocalStorage(StorageKey.FLOW_EDGE_MARKER_END, true);
-  const nodeBorderWidth = useLocalStorage(StorageKey.FLOW_NODE_BORDER_WIDTH, 2);
-  const setEdgeStrokeWidth = (width) => {
-    edgeStrokeWidth.value = Math.max(1, Math.min(5, width));
-  };
-  const toggleEdgeMarkerStart = () => {
-    edgeMarkerStart.value = !edgeMarkerStart.value;
-  };
-  const toggleEdgeMarkerEnd = () => {
-    edgeMarkerEnd.value = !edgeMarkerEnd.value;
-  };
-  const setNodeBorderWidth = (width) => {
-    nodeBorderWidth.value = Math.max(1, Math.min(5, width));
-  };
+  const edgeStore = useLocalStorage(
+    StorageKey.FLOW_EDGE_STYLES,
+    { ...EDGE_DEFAULTS },
+    { mergeDefaults: true }
+  );
+  const nodeStore = useLocalStorage(
+    StorageKey.FLOW_NODE_STYLES,
+    { ...NODE_DEFAULTS },
+    { mergeDefaults: true }
+  );
+  const colorModeStore = useLocalStorage(
+    StorageKey.FLOW_COLOR_MODE,
+    { ...COLOR_MODE_DEFAULTS },
+    { mergeDefaults: true }
+  );
+  const colorMode = useField(colorModeStore, "mode");
+  const unifiedColor = useField(colorModeStore, "colorName");
+  const isUnifiedMode = computed(() => colorMode.value === "unified");
+  const colorModeRef = useColorMode();
+  const isDark = computed(() => colorModeRef.value === "dark");
+  const edgeStrokeWidth = useField(edgeStore, "strokeWidth");
+  const edgeMarkerStart = useField(edgeStore, "markerStart");
+  const edgeMarkerEnd = useField(edgeStore, "markerEnd");
+  const edgeAnimated = useField(edgeStore, "animated");
+  const edgeStrokeType = useField(edgeStore, "strokeType");
+  const edgePathType = useField(edgeStore, "pathType");
+  const edgeColor = useField(edgeStore, "color");
+  const edgeLabelColor = useField(edgeStore, "labelColor");
+  const nodeBorderWidth = useField(nodeStore, "borderWidth");
+  const nodeBorderRadius = useField(nodeStore, "borderRadius");
+  const nodeBorderColor = useField(nodeStore, "borderColor");
+  const nodeBgColor = useField(nodeStore, "bgColor");
+  const nodeFontColor = useField(nodeStore, "fontColor");
+  const nodeFontSize = useField(nodeStore, "fontSize");
+  const _nodeHandleSize = useField(nodeStore, "handleSize");
+  const _nodeHandleColor = useField(nodeStore, "handleColor");
+  const nodeHandleSize = computed({
+    get: () => _nodeHandleSize.value,
+    set: (val) => {
+      _nodeHandleSize.value = val;
+      triggerHandleSizePreview();
+    }
+  });
+  const nodeHandleColor = computed({
+    get: () => _nodeHandleColor.value,
+    set: (val) => {
+      _nodeHandleColor.value = val;
+      triggerHandleSizePreview();
+    }
+  });
+  const effectiveNodeBorderColor = computed(() => resolveFlowColor(isUnifiedMode.value ? unifiedColor.value : nodeBorderColor.value, "border", isDark.value));
+  const effectiveNodeBgColor = computed(() => resolveFlowColor(isUnifiedMode.value ? unifiedColor.value : nodeBgColor.value, "bg", isDark.value));
+  const effectiveNodeFontColor = computed(() => resolveFlowColor(isUnifiedMode.value ? unifiedColor.value : nodeFontColor.value, "font", isDark.value));
+  const effectiveNodeHandleColor = computed(() => resolveFlowColor(isUnifiedMode.value ? unifiedColor.value : nodeHandleColor.value, "border", isDark.value));
+  const effectiveEdgeColor = computed(() => resolveFlowColor(isUnifiedMode.value ? unifiedColor.value : edgeColor.value, "border", isDark.value));
+  const effectiveEdgeLabelColor = computed(() => resolveFlowColor(isUnifiedMode.value ? unifiedColor.value : edgeLabelColor.value, "font", isDark.value));
   return {
-    // 状态
+    // 颜色模式
+    colorMode,
+    unifiedColor,
+    isUnifiedMode,
+    // 连接线（原始自定义值，用于 UI 绑定）
     edgeStrokeWidth,
     edgeMarkerStart,
     edgeMarkerEnd,
+    edgeAnimated,
+    edgeStrokeType,
+    edgePathType,
+    edgeColor,
+    edgeLabelColor,
+    // 节点（原始自定义值，用于 UI 绑定）
     nodeBorderWidth,
-    // 方法
-    setEdgeStrokeWidth,
-    toggleEdgeMarkerStart,
-    toggleEdgeMarkerEnd,
-    setNodeBorderWidth
+    nodeBorderRadius,
+    nodeBorderColor,
+    nodeBgColor,
+    nodeFontColor,
+    nodeFontSize,
+    nodeHandleSize,
+    nodeHandleColor,
+    // 有效颜色（统一 / 自定义 解析后，用于实际渲染）
+    effectiveNodeBorderColor,
+    effectiveNodeBgColor,
+    effectiveNodeFontColor,
+    effectiveNodeHandleColor,
+    effectiveEdgeColor,
+    effectiveEdgeLabelColor
   };
 }

package/dist/runtime/composables/table/useTableColumnPermission.d.ts

@@ -4,6 +4,24 @@ export declare function useTableColumnPermission(): {
         tblName?: string | undefined;
         label?: string | undefined;
         labelI18nKey?: string | undefined;
+        columns?: {
+            tableId?: number | undefined;
+            columnKey?: string | undefined;
+            label?: string | undefined;
+            labelI18nKey?: string | undefined;
+            order?: number | undefined;
+            width?: number | undefined;
+            fixed?: "left" | "right" | "" | undefined;
+            visible?: boolean | undefined;
+            id: number;
+            createdAt?: string | undefined;
+            updatedAt?: string | undefined;
+            version?: number | undefined;
+            createdBy?: number | undefined;
+            creator?: any;
+            updatedBy?: number | undefined;
+            updater?: any;
+        }[] | undefined;
         id: number;
         createdAt?: string | undefined;
         updatedAt?: string | undefined;
@@ -16,6 +34,24 @@ export declare function useTableColumnPermission(): {
         tblName?: string | undefined;
         label?: string | undefined;
         labelI18nKey?: string | undefined;
+        columns?: {
+            tableId?: number | undefined;
+            columnKey?: string | undefined;
+            label?: string | undefined;
+            labelI18nKey?: string | undefined;
+            order?: number | undefined;
+            width?: number | undefined;
+            fixed?: "left" | "right" | "" | undefined;
+            visible?: boolean | undefined;
+            id: number;
+            createdAt?: string | undefined;
+            updatedAt?: string | undefined;
+            version?: number | undefined;
+            createdBy?: number | undefined;
+            creator?: any;
+            updatedBy?: number | undefined;
+            updater?: any;
+        }[] | undefined;
         id: number;
         createdAt?: string | undefined;
         updatedAt?: string | undefined;

package/dist/runtime/composables/useSidebarMenu.js

@@ -6,7 +6,6 @@ const constantMenus = ref([]);
 const bizMenus = ref([]);
 const menuMode = ref("static");
 export function setGlobalSidebarMenus(opts) {
-  console.log("Setting global sidebar menus with options:", opts);
   if (opts.constantMenus) constantMenus.value = opts.constantMenus;
   if (opts.bizMenus) bizMenus.value = opts.bizMenus;
   if (opts.menuMode) menuMode.value = opts.menuMode;
@@ -51,7 +50,6 @@ export const _useSidebarMenus = () => {
   };
   watch([loginUserRoles, loginUserMenus, bizMenus], ([newRoles, newMenus]) => {
     setUserDynamicMenus(newRoles, newMenus);
-    console.log(bizMenus.value.length, "123");
   }, { immediate: true });
   const expandSidebarMenu = (path) => {
     const expandRecursively = (menus) => {

package/dist/runtime/composables/useTheme.d.ts

@@ -15,7 +15,7 @@ export declare const useTheme: () => {
         value: "light" | "dark" | "auto";
         icon?: string;
     }[]>;
-    mode: import("vue").WritableComputedRef<"auto" | "light" | "dark", "auto" | "light" | "dark">;
+    mode: import("vue").WritableComputedRef<"auto" | "dark" | "light", "auto" | "dark" | "light">;
     locale: import("vue").WritableComputedRef<I18nLocale, I18nLocale>;
     locales: import("@nuxt/ui").Locale<import("@nuxt/ui").Messages>[];
     sidebarSide: import("vue").WritableComputedRef<string | number | symbol, string | number | symbol | undefined>;

package/dist/runtime/composables/useTheme.js

@@ -32,7 +32,6 @@ const _useTheme = () => {
       return appConfig.ui?.colors?.neutral;
     },
     set(option) {
-      console.log(option, appConfig);
       appConfig.ui.colors.neutral = option;
       app.updateNeutralColor(option);
     }

package/dist/runtime/constants/flow.d.ts

@@ -1,4 +1,11 @@
 import { Position } from '@vue-flow/core';
+import type { InjectionKey, Ref } from 'vue';
+import type { FlowMousePosition } from '#v/types';
+export declare const GRID_SIZE = 20;
+/**
+ * Resize 边/角类型
+ */
+export type ResizeEdge = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type HandlePosition = 'tl' | 'tr' | 'bl' | 'br' | 't1' | 't2' | 't3' | 'r1' | 'r2' | 'r3' | 'b1' | 'b2' | 'b3' | 'l1' | 'l2' | 'l3';
 export type ResizeDirection = 'horizontal' | 'vertical' | 'both';
 export interface FlowHandle {
@@ -9,4 +16,163 @@ export interface FlowHandle {
         y?: number;
     };
 }
+/**
+ * 鼠标位置注入 Key
+ */
+export declare const FLOW_MOUSE_POSITION_KEY: InjectionKey<Ref<FlowMousePosition>>;
 export declare const FLOW_HANDLES: FlowHandle[];
+/**
+ * Handle 层级阈值（可配置）
+ */
+export declare const FLOW_HANDLE_TIER_THRESHOLDS: {
+    readonly small: {
+        readonly maxWidth: 80;
+        readonly maxHeight: 40;
+    };
+    readonly medium: {
+        readonly maxWidth: 120;
+        readonly maxHeight: 80;
+    };
+};
+/**
+ * 连接线线型
+ */
+export type FlowEdgeStrokeType = 'solid' | 'dashed' | 'dotted' | 'dashdot';
+export interface FlowEdgeStrokeOption {
+    type: FlowEdgeStrokeType;
+    label: string;
+    dasharray: string;
+}
+export declare const FLOW_EDGE_STROKE_TYPES: FlowEdgeStrokeOption[];
+/**
+ * 连接线路径类型
+ */
+export type FlowEdgePathType = 'smoothstep' | 'bezier' | 'step' | 'straight';
+export interface FlowEdgePathOption {
+    type: FlowEdgePathType;
+    label: string;
+}
+export declare const FLOW_EDGE_PATH_TYPES: FlowEdgePathOption[];
+/**
+ * 颜色选项（用于 CircleColor 选色器）
+ * color 字段统一存储 Tailwind 颜色**名称**（如 'blue' / 'primary'）
+ */
+export interface FlowColorOption {
+    /** Tailwind 颜色名 */
+    color: string;
+    /** 同 color，传给 CircleColor 的 chip prop */
+    chip: string;
+}
+/** 所有颜色选项（primary + 17色），存的都是颜色名，不含 shade */
+export declare const FLOW_COLORS: FlowColorOption[];
+/**
+ * Light / Dark 模式下各用途的色阶映射
+ *
+ * | 用途         | light | dark |
+ * |-------------|-------|------|
+ * | bg (节点背景) |  50   | 950  |
+ * | border/edge/handle | 500 | 400 |
+ * | font/label  | 600   | 400  |
+ */
+export declare const FLOW_SHADE_MAP: {
+    readonly bg: {
+        readonly light: 50;
+        readonly dark: 950;
+    };
+    readonly border: {
+        readonly light: 500;
+        readonly dark: 400;
+    };
+    readonly font: {
+        readonly light: 600;
+        readonly dark: 400;
+    };
+};
+export type FlowColorRole = keyof typeof FLOW_SHADE_MAP;
+/**
+ * 根据颜色名、用途角色和 dark/light 模式生成 CSS var
+ * 空名称返回空字符串，供兼容旧数据时回退使用
+ */
+export declare function resolveFlowColor(name: string, role: FlowColorRole, isDark: boolean): string;
+/**
+ * 箭头类型
+ */
+export type FlowArrowType = 'none' | 'arrow' | 'diamond' | 'diamond-open' | 'circle' | 'circle-open';
+export interface FlowArrowOption {
+    type: FlowArrowType;
+    label: string;
+}
+export declare const FLOW_ARROW_TYPES: FlowArrowOption[];
+/** 粗细选项（连接线/边框通用） */
+export declare const FLOW_WIDTH_ITEMS: {
+    label: string;
+    value: number;
+}[];
+/** 线型选项（带 dasharray 供 SVG 预览用） */
+export declare const FLOW_STROKE_TYPE_ITEMS: {
+    label: string;
+    value: FlowEdgeStrokeType;
+    dasharray: string;
+}[];
+/** 路径类型选项 */
+export declare const FLOW_PATH_TYPE_ITEMS: {
+    label: string;
+    value: FlowEdgePathType;
+}[];
+/** 箭头类型选项 */
+export declare const FLOW_ARROW_TYPE_ITEMS: {
+    label: string;
+    value: FlowArrowType;
+}[];
+/** 圆角选项 */
+export declare const FLOW_BORDER_RADIUS_ITEMS: {
+    label: string;
+    value: number;
+}[];
+/** 字号选项 */
+export declare const FLOW_FONT_SIZE_ITEMS: {
+    label: string;
+    value: number;
+    twClass: string;
+}[];
+/** 连接点大小选项 */
+export declare const FLOW_HANDLE_SIZE_ITEMS: {
+    label: string;
+    value: number;
+}[];
+export interface FlowPathPreview {
+    /** 'path' 用 <path d=...>，'line' 用 <line> */
+    shape: 'path' | 'line';
+    d?: string;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+}
+export declare const FLOW_PATH_PREVIEW: Record<FlowEdgePathType, FlowPathPreview>;
+export interface FlowArrowSvgElement {
+    tag: 'line' | 'polygon' | 'circle';
+    attrs: Record<string, string | number>;
+}
+/**
+ * 起点箭头预览：箭头图形在左侧，尾线在右侧
+ */
+export declare const FLOW_ARROW_PREVIEW_START: Record<FlowArrowType, FlowArrowSvgElement[]>;
+/**
+ * 终点箭头预览：尾线在左侧，箭头图形在右侧
+ */
+export declare const FLOW_ARROW_PREVIEW_END: Record<FlowArrowType, FlowArrowSvgElement[]>;
+/**
+ * 节点鼠标接近阈值（px）
+ */
+export declare const FLOW_NODE_PROXIMITY_THRESHOLD = 50;
+/**
+ * Resize handle 配置
+ */
+export interface FlowResizeHandleConfig {
+    edge: ResizeEdge;
+    class: string;
+    cursor: string;
+    zIndex: number;
+}
+export declare const FLOW_RESIZE_HANDLES: FlowResizeHandleConfig[];

package/dist/runtime/constants/flow.js

@@ -1,4 +1,6 @@
 import { Position } from "@vue-flow/core";
+export const GRID_SIZE = 20;
+export const FLOW_MOUSE_POSITION_KEY = Symbol("flow-mouse-position");
 export const FLOW_HANDLES = [
   // 4个角 - 可以双向调整
   { id: "tl", position: Position.Top, offsetPercent: { x: 0 } },
@@ -22,3 +24,172 @@ export const FLOW_HANDLES = [
   { id: "l2", position: Position.Left, offsetPercent: { y: 50 } },
   { id: "l3", position: Position.Left, offsetPercent: { y: 75 } }
 ];
+export const FLOW_HANDLE_TIER_THRESHOLDS = {
+  small: { maxWidth: 80, maxHeight: 40 },
+  medium: { maxWidth: 120, maxHeight: 80 }
+};
+export const FLOW_EDGE_STROKE_TYPES = [
+  { type: "solid", label: "\u5B9E\u7EBF", dasharray: "" },
+  { type: "dashed", label: "\u865A\u7EBF", dasharray: "8 4" },
+  { type: "dotted", label: "\u70B9\u7EBF", dasharray: "2 4" },
+  { type: "dashdot", label: "\u70B9\u5212\u7EBF", dasharray: "8 4 2 4" }
+];
+export const FLOW_EDGE_PATH_TYPES = [
+  { type: "smoothstep", label: "\u5E73\u6ED1" },
+  { type: "bezier", label: "\u66F2\u7EBF" },
+  { type: "step", label: "\u76F4\u89D2" },
+  { type: "straight", label: "\u76F4\u7EBF" }
+];
+const FLOW_COLOR_NAMES = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+export const FLOW_COLORS = [
+  { color: "primary", chip: "primary" },
+  ...FLOW_COLOR_NAMES.map((name) => ({ color: name, chip: name }))
+];
+export const FLOW_SHADE_MAP = {
+  bg: { light: 50, dark: 950 },
+  border: { light: 500, dark: 400 },
+  font: { light: 600, dark: 400 }
+};
+export function resolveFlowColor(name, role, isDark) {
+  if (!name) return "";
+  const shade = FLOW_SHADE_MAP[role][isDark ? "dark" : "light"];
+  if (name === "primary") {
+    return `var(--ui-color-${name}-${shade})`;
+  }
+  return `var(--color-${name}-${shade})`;
+}
+export const FLOW_ARROW_TYPES = [
+  { type: "none", label: "\u65E0" },
+  { type: "arrow", label: "\u4E09\u89D2\u5B9E\u5FC3" },
+  { type: "diamond", label: "\u83F1\u5F62\u5B9E\u5FC3" },
+  { type: "diamond-open", label: "\u83F1\u5F62\u7A7A\u5FC3" },
+  { type: "circle", label: "\u5706\u5F62\u5B9E\u5FC3" },
+  { type: "circle-open", label: "\u5706\u5F62\u7A7A\u5FC3" }
+];
+export const FLOW_WIDTH_ITEMS = [
+  { label: "1", value: 1 },
+  { label: "2", value: 2 },
+  { label: "3", value: 3 },
+  { label: "4", value: 4 },
+  { label: "5", value: 5 }
+];
+export const FLOW_STROKE_TYPE_ITEMS = FLOW_EDGE_STROKE_TYPES.map((o) => ({
+  label: o.label,
+  value: o.type,
+  dasharray: o.dasharray
+}));
+export const FLOW_PATH_TYPE_ITEMS = FLOW_EDGE_PATH_TYPES.map((o) => ({
+  label: o.label,
+  value: o.type
+}));
+export const FLOW_ARROW_TYPE_ITEMS = FLOW_ARROW_TYPES.map((o) => ({
+  label: o.label,
+  value: o.type
+}));
+export const FLOW_BORDER_RADIUS_ITEMS = [
+  { label: "0", value: 0 },
+  { label: "2", value: 2 },
+  { label: "4", value: 4 },
+  { label: "6", value: 6 },
+  { label: "8", value: 8 }
+];
+export const FLOW_FONT_SIZE_ITEMS = [
+  { label: "xs", value: 12, twClass: "text-xs" },
+  { label: "sm", value: 14, twClass: "text-sm" },
+  { label: "base", value: 16, twClass: "text-base" },
+  { label: "lg", value: 18, twClass: "text-lg" },
+  { label: "xl", value: 20, twClass: "text-xl" }
+];
+export const FLOW_HANDLE_SIZE_ITEMS = [
+  { label: "4", value: 4 },
+  { label: "6", value: 6 },
+  { label: "8", value: 8 },
+  { label: "10", value: 10 }
+];
+export const FLOW_PATH_PREVIEW = {
+  smoothstep: { shape: "path", d: "M 0 12 L 6 12 Q 10 12 10 7 Q 10 2 14 2 L 20 2" },
+  bezier: { shape: "path", d: "M 0 12 C 10 12, 10 2, 20 2" },
+  step: { shape: "path", d: "M 0 12 L 10 12 L 10 2 L 20 2" },
+  straight: { shape: "line", x1: 0, y1: 12, x2: 20, y2: 2 }
+};
+export const FLOW_ARROW_PREVIEW_START = {
+  "none": [
+    { tag: "line", attrs: { "x1": 0, "y1": 5, "x2": 20, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } }
+  ],
+  "arrow": [
+    { tag: "polygon", attrs: { points: "10,1 2,5 10,9", fill: "currentColor" } },
+    { tag: "line", attrs: { "x1": 8, "y1": 5, "x2": 20, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } }
+  ],
+  "diamond": [
+    { tag: "polygon", attrs: { points: "2,5 7,1 12,5 7,9", fill: "currentColor" } },
+    { tag: "line", attrs: { "x1": 12, "y1": 5, "x2": 20, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } }
+  ],
+  "diamond-open": [
+    { tag: "polygon", attrs: { "points": "2,5 7,1 12,5 7,9", "fill": "none", "stroke": "currentColor", "stroke-width": 1.5 } },
+    { tag: "line", attrs: { "x1": 12, "y1": 5, "x2": 20, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } }
+  ],
+  "circle": [
+    { tag: "circle", attrs: { cx: 6, cy: 5, r: 4, fill: "currentColor" } },
+    { tag: "line", attrs: { "x1": 10, "y1": 5, "x2": 20, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } }
+  ],
+  "circle-open": [
+    { tag: "circle", attrs: { "cx": 6, "cy": 5, "r": 3.5, "fill": "none", "stroke": "currentColor", "stroke-width": 1.5 } },
+    { tag: "line", attrs: { "x1": 10, "y1": 5, "x2": 20, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } }
+  ]
+};
+export const FLOW_ARROW_PREVIEW_END = {
+  "none": [
+    { tag: "line", attrs: { "x1": 0, "y1": 5, "x2": 20, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } }
+  ],
+  "arrow": [
+    { tag: "line", attrs: { "x1": 0, "y1": 5, "x2": 12, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } },
+    { tag: "polygon", attrs: { points: "10,1 18,5 10,9", fill: "currentColor" } }
+  ],
+  "diamond": [
+    { tag: "line", attrs: { "x1": 0, "y1": 5, "x2": 8, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } },
+    { tag: "polygon", attrs: { points: "8,5 13,1 18,5 13,9", fill: "currentColor" } }
+  ],
+  "diamond-open": [
+    { tag: "line", attrs: { "x1": 0, "y1": 5, "x2": 8, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } },
+    { tag: "polygon", attrs: { "points": "8,5 13,1 18,5 13,9", "fill": "none", "stroke": "currentColor", "stroke-width": 1.5 } }
+  ],
+  "circle": [
+    { tag: "line", attrs: { "x1": 0, "y1": 5, "x2": 10, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } },
+    { tag: "circle", attrs: { cx: 14, cy: 5, r: 4, fill: "currentColor" } }
+  ],
+  "circle-open": [
+    { tag: "line", attrs: { "x1": 0, "y1": 5, "x2": 10, "y2": 5, "stroke": "currentColor", "stroke-width": 2 } },
+    { tag: "circle", attrs: { "cx": 14, "cy": 5, "r": 3.5, "fill": "none", "stroke": "currentColor", "stroke-width": 1.5 } }
+  ]
+};
+export const FLOW_NODE_PROXIMITY_THRESHOLD = 50;
+export const FLOW_RESIZE_HANDLES = [
+  // 4 边 (z-index: 5)
+  { edge: "top", class: "top-[-4px] left-[12px] right-[12px] h-[12px]", cursor: "ns-resize", zIndex: 5 },
+  { edge: "bottom", class: "bottom-[-4px] left-[12px] right-[12px] h-[12px]", cursor: "ns-resize", zIndex: 5 },
+  { edge: "left", class: "left-[-4px] top-[12px] bottom-[12px] w-[12px]", cursor: "ew-resize", zIndex: 5 },
+  { edge: "right", class: "right-[-4px] top-[12px] bottom-[12px] w-[12px]", cursor: "ew-resize", zIndex: 5 },
+  // 4 角 (z-index: 6, 优先于边)
+  { edge: "top-left", class: "top-[-4px] left-[-4px] w-[12px] h-[12px]", cursor: "nwse-resize", zIndex: 6 },
+  { edge: "top-right", class: "top-[-4px] right-[-4px] w-[12px] h-[12px]", cursor: "nesw-resize", zIndex: 6 },
+  { edge: "bottom-left", class: "bottom-[-4px] left-[-4px] w-[12px] h-[12px]", cursor: "nesw-resize", zIndex: 6 },
+  { edge: "bottom-right", class: "bottom-[-4px] right-[-4px] w-[12px] h-[12px]", cursor: "nwse-resize", zIndex: 6 }
+];