自定义项目

自定义详细介绍

近期计划

制作一些开箱就可以使用，有价值的系统。

从最上层的业务层，开始到支撑，最后到底层服务。

从下到上建设，从上到下拆解。

达到一个企业完整的服务支撑为止。MVP 可用。

设计蓝图

近期准备做的事情

老马啸西风2030年8月31日大约 3 分钟

近期计划之可复用的轮子

制作一些开箱就可以使用，有价值的系统。

从最上层的业务层，开始到支撑，最后到底层服务。

从下到上建设，从上到下拆解。

达到一个企业完整的服务支撑为止。MVP 可用。

有价值的平台

定时调度系列

sandglass

权限系列

p-core

p-admin

网关系列

神谕

zuul

spring gateway

fizz-gateway

注册中心/配置中心

老马啸西风2030年8月31日大约 4 分钟

MECE 阅读书籍分类

1. 文学类

小说：长篇小说、中短篇小说、推理、科幻、奇幻、武侠、言情
诗歌：古典诗词、现代诗
戏剧：话剧、歌剧、戏曲
散文与随笔

2. 社会科学类

历史：通史、断代史、人物传记、地方史
哲学：中西方哲学、逻辑学、伦理学
政治与法律：政治学、国际关系、法律读物
社会学：社会理论、社会问题研究
心理学：基础心理学、应用心理学、心理健康

老马啸西风2025年8月18日大约 4 分钟

历史资料梳理

书籍：https://github.com/aicsbook/aicsbook.github.io

https://github.com/aidbbook/aidbbook.github.io

老马啸西风2025年8月15日小于 1 分钟

流程控制-01-vue3项目创建

npm create vite@latest markdown-to-mindmap -- --template vue
npm install
npm run dev

老马啸西风2025年8月14日小于 1 分钟

流程控制-01-vue3项目创建

npm create vite@latest flow-control-demo -- --template vue
npm install
npm run dev

老马啸西风2025年8月9日大约 3 分钟

流程控制-02-vue3项目创建条件匹配引擎 match-condition

npm create vite@latest match-condition-demo -- --template vue
cd match-condition-demo
  npm install
  npm run dev

老马啸西风2025年8月9日大约 10 分钟

流程控制-02-vue3项目创建流程引擎前端 LogicFlow 核心能力 dify

基于 logicFlow 实现一个 dify 流程编辑器，你觉得哪些能力是最重要的，要有哪些特性。给出原因

基于 LogicFlow 实现一个类似 dify 的流程编辑器，关键是把核心能力聚焦好，做到可用且易扩展。

下面是我认为最重要的几个能力和特性，以及背后的原因：

1. 节点拖拽与放置（Drag & Drop）

原因：可视化流程编辑的基础，用户需要从左侧面板快速拖拽节点放到画布。
具体点：
- 左侧节点分类面板
- 支持拖拽到画布并自动定位
- 支持节点移动和调整位置

老马啸西风2025年8月9日大约 9 分钟

流程控制-02-vue3项目创建流程引擎前端 demo

npm create vite@latest logic-flow-demo -- --template vue


cd logic-flow-demo
  npm install
  npm run dev

老马啸西风2025年8月9日大约 6 分钟

流程控制-02-vue3项目创建流程引擎前端-02-左侧节点面板拖拽到画布！

可以拖拽节点到 LogicFlow 画布上，完成拖拽新增节点的核心交互。

Step 2：左侧节点面板拖拽新增节点

2.1 设计思路

左侧面板列出可用的节点类型
支持鼠标拖拽节点名称到画布
放开时，画布在鼠标释放点创建对应节点

2.2 修改 `FlowEditor.vue`，实现完整左右布局

{% raw %}

  
    
    
      
        {{ node.label }}
      
    

    
    
  



import { ref, onMounted, onBeforeUnmount } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/index.css'

const lfContainer = ref(null)
let lf = null
const draggedNode = ref(null) // 拖拽中节点数据

// 定义可拖拽节点列表
const nodeList = [
  { type: 'rect', label: '矩形节点' },
  { type: 'circle', label: '圆形节点' },
  // 可以继续扩展节点类型
]

onMounted(() => {
  lf = new LogicFlow({
    container: lfContainer.value,
    width: 800,
    height: 600,
  })
  lf.render()
})

onBeforeUnmount(() => {
  lf && lf.destroy()
  lf = null
})

function onDragStart(node) {
  draggedNode.value = node
}

function onDrop(event) {
  event.preventDefault()
  if (!draggedNode.value) return

  // 计算画布内放置点坐标
  // LogicFlow 容器左上角相对页面的偏移
  const rect = lfContainer.value.getBoundingClientRect()

  // 画布坐标 = 鼠标坐标 - 容器左上角坐标
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top

  lf.addNode({
    id: `node_${Date.now()}`, // 唯一ID
    type: draggedNode.value.type,
    x,
    y,
    text: draggedNode.value.label,
  })

  draggedNode.value = null
}



.flow-editor {
  display: flex;
  gap: 16px;
  padding: 12px;
}

/* 左侧节点面板 */
.node-panel {
  width: 160px;
  border: 1px solid #ccc;
  padding: 8px;
  background: #f9f9f9;
  user-select: none;
}

.node-item {
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: grab;
  background: white;
  text-align: center;
}

.node-item:active {
  cursor: grabbing;
}

/* 画布 */
.flow-canvas {
  flex: 1;
  border: 1px solid #ddd;
  height: 600px;
  background: #fff;
}

{% endraw %}

老马啸西风2025年8月9日大约 2 分钟

老马啸西风