v-nuxt-ui 0.1.0

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

@@ -0,0 +1,162 @@
+import { ref, watch } from "vue";
+import { MarkerType } from "@vue-flow/core";
+import { useFlowApi, useFlowNodeApi, useFlowNodeLinkApi } from "#v/composables";
+export function useFlow(options) {
+  const { flow, onUpdateModel } = options;
+  const GRID_SIZE = 16;
+  const DEFAULT_NODE_WIDTH = GRID_SIZE * 10;
+  const DEFAULT_NODE_HEIGHT = GRID_SIZE * 6;
+  const flowApi = useFlowApi();
+  const flowNodeApi = useFlowNodeApi();
+  const flowNodeLinkApi = useFlowNodeLinkApi();
+  const nodes = ref([]);
+  const edges = ref([]);
+  const cleanHandleId = (handleId) => handleId?.replace(/-(source|target)$/, "");
+  const refreshFlow = async () => {
+    if (!flow?.value?.id) return;
+    const { data } = await flowApi.getById(flow.value.id);
+    if (data.value?.data && onUpdateModel?.value) {
+      onUpdateModel.value(data.value.data);
+    }
+  };
+  const transformNode = (node, handlers) => ({
+    id: String(node.id),
+    type: "custom",
+    position: { x: node.positionX || 0, y: node.positionY || 0 },
+    label: node.name || "",
+    selectable: true,
+    style: {
+      width: node.width ? `${node.width}px` : void 0,
+      height: node.height ? `${node.height}px` : void 0
+    },
+    data: {
+      ...node,
+      ...handlers
+    }
+  });
+  const transformEdge = (link, styleOptions) => ({
+    id: String(link.id),
+    type: "custom",
+    source: String(link.parentId),
+    sourceHandle: link.parentHandlePos ? cleanHandleId(link.parentHandlePos) : null,
+    target: String(link.childId),
+    targetHandle: link.childHandlePos ? cleanHandleId(link.childHandlePos) : null,
+    label: link.label || "",
+    selectable: true,
+    style: styleOptions?.strokeWidth ? { strokeWidth: styleOptions.strokeWidth } : void 0,
+    markerStart: styleOptions?.markerStart ? MarkerType.Arrow : void 0,
+    markerEnd: styleOptions?.markerEnd ? MarkerType.Arrow : void 0,
+    data: { ...link }
+  });
+  const syncNodes = (nodeHandlers) => {
+    if (!flow?.value) return;
+    nodes.value = (flow.value.nodes || []).map(
+      (node) => transformNode(node, nodeHandlers ? nodeHandlers(String(node.id)) : void 0)
+    );
+  };
+  const syncEdges = (styleOptions) => {
+    if (!flow?.value) return;
+    edges.value = (flow.value.links || []).map((link) => transformEdge(link, styleOptions));
+  };
+  const applyEdgeStyles = (styleOptions) => {
+    syncEdges(styleOptions);
+  };
+  const updateNode = async (updatedNode) => {
+    await flowNodeApi.update(updatedNode);
+    await refreshFlow();
+  };
+  const deleteNode = async (nodeId) => {
+    const node = flow?.value?.nodes?.find((n) => String(n.id) === nodeId);
+    if (!node?.id) return;
+    const relatedLinkIds = flow?.value?.links?.filter((link) => link.parentId === node.id || link.childId === node.id)?.map((link) => link.id)?.filter((id) => id !== void 0) || [];
+    if (relatedLinkIds.length > 0) {
+      await flowNodeLinkApi.batchDelete({ ids: relatedLinkIds });
+    }
+    await flowNodeApi.deleteById(node.id);
+    await refreshFlow();
+  };
+  const deleteEdge = async (edgeId) => {
+    const link = flow?.value?.links?.find((l) => String(l.id) === edgeId);
+    if (!link?.id) return;
+    await flowNodeLinkApi.deleteById(link.id);
+    await refreshFlow();
+  };
+  const createEdge = async (params) => {
+    if (!flow?.value) return;
+    const newLink = {
+      id: 0,
+      flowId: flow.value.id,
+      parentId: Number(params.source),
+      parentHandlePos: cleanHandleId(params.sourceHandle),
+      childId: Number(params.target),
+      childHandlePos: cleanHandleId(params.targetHandle),
+      label: ""
+    };
+    await flowNodeLinkApi.create(newLink);
+    await refreshFlow();
+  };
+  const updateNodePosition = async (nodeId, x, y) => {
+    const originalNode = flow?.value?.nodes?.find((n) => String(n.id) === nodeId);
+    if (!originalNode) return;
+    await flowNodeApi.update({
+      id: originalNode.id,
+      version: originalNode.version,
+      positionX: x,
+      positionY: y
+    });
+    await refreshFlow();
+  };
+  const updateNodeDimensions = async (nodeId, dimensions) => {
+    const node = flow?.value?.nodes?.find((n) => String(n.id) === nodeId);
+    if (!node) return;
+    await flowNodeApi.update({
+      id: node.id,
+      version: node.version,
+      ...dimensions
+    });
+    await refreshFlow();
+  };
+  const createNode = async () => {
+    if (!flow?.value) return;
+    const nodeCount = flow.value.nodes?.length || 0;
+    const newNode = {
+      id: 0,
+      flowId: flow.value.id,
+      name: `\u8282\u70B9 ${nodeCount + 1}`,
+      positionX: GRID_SIZE * (10 + nodeCount * 3),
+      positionY: GRID_SIZE * (10 + nodeCount * 3),
+      width: DEFAULT_NODE_WIDTH,
+      height: DEFAULT_NODE_HEIGHT
+    };
+    await flowNodeApi.create(newNode);
+    await refreshFlow();
+  };
+  watch(
+    () => flow?.value,
+    (newFlow) => {
+      if (!newFlow) return;
+      syncEdges();
+    },
+    { immediate: true, deep: true }
+  );
+  return {
+    // 状态
+    nodes,
+    edges,
+    GRID_SIZE,
+    // 前端操作方法（仅更新前端状态）
+    syncNodes,
+    syncEdges,
+    applyEdgeStyles,
+    transformNode,
+    // 后端操作方法（调用 API 更新后端）
+    refreshFlow,
+    updateNode,
+    updateNodePosition,
+    updateNodeDimensions,
+    createNode,
+    deleteNode,
+    deleteEdge,
+    createEdge
+  };
+}

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

@@ -0,0 +1,56 @@
+import { type Ref } from 'vue';
+type EdgePosition = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type FlowResizeNode = {
+    id: string | number;
+    position: {
+        x: number;
+        y: number;
+    };
+    style?: any;
+    data?: Record<string, any>;
+};
+export interface UseFlowResizeDimensions {
+    width: number;
+    height: number;
+    positionX: number;
+    positionY: number;
+}
+export interface UseFlowResizeOptions {
+    gridSize: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    nodes: Ref<FlowResizeNode[]>;
+    getViewport: () => {
+        zoom: number;
+    } | undefined;
+    onResizeEnd?: (nodeId: string, dimensions: UseFlowResizeDimensions) => void;
+}
+export interface UseFlowResizeReturn {
+    resizingNode: Ref<ResizeState | null>;
+    hoveredNodeId: Ref<string | null>;
+    hoveredNodeEdge: Ref<EdgePosition | null>;
+    detectEdge: (event: MouseEvent, element: HTMLElement) => EdgePosition | null;
+    getCursorStyle: (edge: EdgePosition | null) => string;
+    startResize: (event: MouseEvent, nodeId: string, nodeData: any, edge: EdgePosition) => void;
+    handleMouseMove: (event: MouseEvent) => void;
+    handleMouseUp: () => void;
+    createNodeHandlers: (nodeId: string) => {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onMouseMove: (event: MouseEvent, element: HTMLElement) => void;
+    };
+}
+interface ResizeState {
+    id: string;
+    startX: number;
+    startY: number;
+    startWidth: number;
+    startHeight: number;
+    startPosX: number;
+    startPosY: number;
+    edge: EdgePosition;
+}
+export declare function useFlowResize(options: UseFlowResizeOptions): UseFlowResizeReturn;
+export {};

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

@@ -0,0 +1,148 @@
+import { ref } from "vue";
+export function useFlowResize(options) {
+  const {
+    gridSize,
+    minWidth = gridSize * 2,
+    maxWidth = gridSize * 20,
+    minHeight = gridSize * 2,
+    maxHeight = gridSize * 20,
+    nodes,
+    getViewport,
+    onResizeEnd
+  } = options;
+  const EDGE_THRESHOLD = 8;
+  const CURSOR_MAP = {
+    "top": "ns-resize",
+    "bottom": "ns-resize",
+    "left": "ew-resize",
+    "right": "ew-resize",
+    "top-left": "nwse-resize",
+    "top-right": "nesw-resize",
+    "bottom-left": "nesw-resize",
+    "bottom-right": "nwse-resize"
+  };
+  const resizingNode = ref(null);
+  const hoveredNodeId = ref(null);
+  const hoveredNodeEdge = ref(null);
+  const detectEdge = (event, element) => {
+    const rect = element.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const nearTop = y <= EDGE_THRESHOLD;
+    const nearBottom = y >= rect.height - EDGE_THRESHOLD;
+    const nearLeft = x <= EDGE_THRESHOLD;
+    const nearRight = x >= rect.width - EDGE_THRESHOLD;
+    if (nearTop && nearLeft) return "top-left";
+    if (nearTop && nearRight) return "top-right";
+    if (nearBottom && nearLeft) return "bottom-left";
+    if (nearBottom && nearRight) return "bottom-right";
+    if (nearTop) return "top";
+    if (nearBottom) return "bottom";
+    if (nearLeft) return "left";
+    if (nearRight) return "right";
+    return null;
+  };
+  const getCursorStyle = (edge) => edge ? CURSOR_MAP[edge] : "default";
+  const snapToGrid = (value) => Math.round(value / gridSize) * gridSize;
+  const calculateNewDimensions = (edge, deltaX, deltaY, startWidth, startHeight, startPosX, startPosY) => {
+    let newWidth = startWidth;
+    let newHeight = startHeight;
+    let newPosX = startPosX;
+    let newPosY = startPosY;
+    if (edge.includes("left")) {
+      const rawWidth = startWidth - deltaX;
+      newWidth = snapToGrid(Math.max(minWidth, Math.min(maxWidth, rawWidth)));
+      newPosX = startPosX + (startWidth - newWidth);
+    } else if (edge.includes("right")) {
+      const rawWidth = startWidth + deltaX;
+      newWidth = snapToGrid(Math.max(minWidth, Math.min(maxWidth, rawWidth)));
+    }
+    if (edge.includes("top")) {
+      const rawHeight = startHeight - deltaY;
+      newHeight = snapToGrid(Math.max(minHeight, Math.min(maxHeight, rawHeight)));
+      newPosY = startPosY + (startHeight - newHeight);
+    } else if (edge.includes("bottom")) {
+      const rawHeight = startHeight + deltaY;
+      newHeight = snapToGrid(Math.max(minHeight, Math.min(maxHeight, rawHeight)));
+    }
+    return { newWidth, newHeight, newPosX, newPosY };
+  };
+  const startResize = (event, nodeId, nodeData, edge) => {
+    event.stopPropagation();
+    event.preventDefault();
+    resizingNode.value = {
+      id: nodeId,
+      startX: event.clientX,
+      startY: event.clientY,
+      startWidth: nodeData.width || gridSize * 10,
+      startHeight: nodeData.height || gridSize * 6,
+      startPosX: nodeData.positionX || 0,
+      startPosY: nodeData.positionY || 0,
+      edge
+    };
+  };
+  const handleMouseMove = (event) => {
+    if (!resizingNode.value) return;
+    const viewport = getViewport();
+    const zoom = viewport?.zoom || 1;
+    const deltaX = (event.clientX - resizingNode.value.startX) / zoom;
+    const deltaY = (event.clientY - resizingNode.value.startY) / zoom;
+    const { newWidth, newHeight, newPosX, newPosY } = calculateNewDimensions(
+      resizingNode.value.edge,
+      deltaX,
+      deltaY,
+      resizingNode.value.startWidth,
+      resizingNode.value.startHeight,
+      resizingNode.value.startPosX,
+      resizingNode.value.startPosY
+    );
+    const nodeIndex = nodes.value.findIndex((n) => String(n.id) === resizingNode.value.id);
+    if (nodeIndex < 0) return;
+    const node = nodes.value[nodeIndex];
+    if (!node) return;
+    node.position = { x: newPosX, y: newPosY };
+    node.style = { ...node.style, width: `${newWidth}px`, height: `${newHeight}px` };
+    node.data = { ...node.data || {}, width: newWidth, height: newHeight, positionX: newPosX, positionY: newPosY };
+  };
+  const handleMouseUp = () => {
+    if (!resizingNode.value) return;
+    const updatedNode = nodes.value.find((n) => String(n.id) === resizingNode.value.id);
+    if (updatedNode && onResizeEnd) {
+      onResizeEnd(String(updatedNode.id), {
+        width: Number(updatedNode.data?.width ?? 0),
+        height: Number(updatedNode.data?.height ?? 0),
+        positionX: updatedNode.position.x,
+        positionY: updatedNode.position.y
+      });
+    }
+    resizingNode.value = null;
+  };
+  const createNodeHandlers = (nodeId) => ({
+    onMouseEnter: () => {
+      hoveredNodeId.value = nodeId;
+    },
+    onMouseLeave: () => {
+      hoveredNodeId.value = null;
+      hoveredNodeEdge.value = null;
+    },
+    onMouseMove: (event, element) => {
+      if (resizingNode.value) return;
+      const edge = detectEdge(event, element);
+      hoveredNodeEdge.value = edge;
+      element.style.cursor = getCursorStyle(edge);
+    }
+  });
+  return {
+    // 状态
+    resizingNode,
+    hoveredNodeId,
+    hoveredNodeEdge,
+    // 方法
+    detectEdge,
+    getCursorStyle,
+    startResize,
+    handleMouseMove,
+    handleMouseUp,
+    createNodeHandlers
+  };
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Flow 样式设置 Composable
+ * 管理连接线和节点的样式配置
+ */
+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;
+};

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

@@ -0,0 +1,32 @@
+import { StorageKey } from "#v/types";
+import { useLocalStorage } from "@vueuse/core";
+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));
+  };
+  return {
+    // 状态
+    edgeStrokeWidth,
+    edgeMarkerStart,
+    edgeMarkerEnd,
+    nodeBorderWidth,
+    // 方法
+    setEdgeStrokeWidth,
+    toggleEdgeMarkerStart,
+    toggleEdgeMarkerEnd,
+    setNodeBorderWidth
+  };
+}

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

@@ -0,0 +1,13 @@
+export * from './api/index.js';
+export * from './flow/index.js';
+export * from './table/index.js';
+export * from './useApp.js';
+export * from './useBoolean.js';
+export * from './useDate.js';
+export * from './useEChart.js';
+export * from './useForm.js';
+export * from './useTheme.js';
+export * from './useSidebarMenu.js';
+export * from './usePermission.js';
+export * from './useRouterPush.js';
+export * from './useAuth.js';

package/dist/runtime/composables/index.js

@@ -0,0 +1,13 @@
+export * from "./api/index.js";
+export * from "./flow/index.js";
+export * from "./table/index.js";
+export * from "./useApp.js";
+export * from "./useBoolean.js";
+export * from "./useDate.js";
+export * from "./useEChart.js";
+export * from "./useForm.js";
+export * from "./useTheme.js";
+export * from "./useSidebarMenu.js";
+export * from "./usePermission.js";
+export * from "./useRouterPush.js";
+export * from "./useAuth.js";

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

@@ -0,0 +1,9 @@
+export * from './useTable.js';
+export * from './useTableColumns.js';
+export * from './useTableData.js';
+export * from './useTableOpr.js';
+export * from './useTablePagination.js';
+export * from './useTableQuery.js';
+export * from './useTableRowActions.js';
+export * from './useTableRowSelection.js';
+export * from './useTableView.js';

package/dist/runtime/composables/table/index.js

@@ -0,0 +1,9 @@
+export * from "./useTable.js";
+export * from "./useTableColumns.js";
+export * from "./useTableData.js";
+export * from "./useTableOpr.js";
+export * from "./useTablePagination.js";
+export * from "./useTableQuery.js";
+export * from "./useTableRowActions.js";
+export * from "./useTableRowSelection.js";
+export * from "./useTableView.js";