feat: 添加Markdown渲染支持并增强UI功能

- 引入markdown-it库实现节点内容和摘要的Markdown渲染
- 添加多种边类型选择功能(直线/曲线/折线等)
- 实现全屏模式切换功能
- 优化底部工具栏和节点输入框的样式
- 更新i18n多语言支持新增功能文本
This commit is contained in:
liuziting
2026-01-21 22:43:48 +08:00
parent 843b6d08be
commit 1b9deed3a7
11 changed files with 272 additions and 20 deletions

View File

@@ -232,7 +232,7 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
const config = reactive({
edgeColor: '#fed7aa',
edgeStyle: 'smoothstep',
edgeType: 'default',
backgroundVariant: BackgroundVariant.Lines,
showControls: true,
showMiniMap: true
@@ -245,12 +245,12 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
* - 通过 lastAppliedStatus 避免无效重复 setEdges
*/
watch(
[() => activeNodeId.value, () => config.edgeColor, () => flowEdges.value.length, () => flowNodes.value.some(n => n.data.isExpanding)],
([, newColor, , anyExpanding]) => {
[() => activeNodeId.value, () => config.edgeColor, () => config.edgeType, () => flowEdges.value.length, () => flowNodes.value.some(n => n.data.isExpanding)],
([, newColor, newType, , anyExpanding]) => {
const { edgeIds } = activePath.value
const edgeIdsStr = Array.from(edgeIds).sort().join(',')
const currentStatus = `${edgeIdsStr}-${newColor}-${anyExpanding}`
const currentStatus = `${edgeIdsStr}-${newColor}-${newType}-${anyExpanding}`
if (lastAppliedStatus.value === currentStatus) return
lastAppliedStatus.value = currentStatus
@@ -261,6 +261,7 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
return {
...edge,
type: newType,
animated: isHighlighted || isExpanding,
style: {
...edge.style,
@@ -574,6 +575,7 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
source: parentId,
target: childId,
animated: true,
type: config.edgeType,
style: { stroke: config.edgeColor, strokeWidth: 2 },
markerEnd: MarkerType.ArrowClosed
})