为了安全，请务必修改默认密码。
-
-
+ rounded="lg" class="conversation-item" active-color="secondary">
-
mdi-help
-
+
如无法显示，请单击此按钮跳转至插件市场，复制想安装插件对应的
- `repo`
- 链接然后点击右下角 + 号安装，或打开链接下载压缩包安装。
-
+ repo链接然后点击右下角 + 号安装，或打开链接下载压缩包安装。
如果因为网络问题安装失败，点击设置页选择 GitHub 加速地址。或前往仓库下载压缩包然后本地上传。
@@ -41,13 +38,12 @@ import 'highlight.js/styles/github.css';
{{ isListView ? 'mdi-view-grid' : 'mdi-view-list' }}
-
@@ -72,19 +68,25 @@ import 'highlight.js/styles/github.css';
-
✨ 插件市场
如果因为网络问题安装失败，点击设置页选择 GitHub 加速地址。或前往仓库下载压缩包然后本地上传。
📦 全部插件
+
+
![logo]()
{{
- item.name }}
- {{ item.name }}
-
+ showPluginFullName ? item.name : item.trimmedName }}
+ {{ showPluginFullName ? item.name : item.trimmedName }}
@@ -111,18 +113,18 @@ import 'highlight.js/styles/github.css';
- 无
- {{ tag
- }}
+ -
+
+ {{ tag }}
- 安装
+
+ mdi-download
已安装
- 帮助
+ disabled>mdi-check
+ mdi-help
-
+
+
mdi-refresh
刷新
diff --git a/dashboard/src/views/alkaid/LongTermMemory.vue b/dashboard/src/views/alkaid/LongTermMemory.vue
index e534c70d8..762c1f8ac 100644
--- a/dashboard/src/views/alkaid/LongTermMemory.vue
+++ b/dashboard/src/views/alkaid/LongTermMemory.vue
@@ -1,12 +1,12 @@
-
-
@@ -199,6 +292,16 @@ export default {
isSearching: false,
searchResults: [],
hasSearched: false,
+
+ // 添加边点击相关数据
+ selectedEdge: null,
+ selectedEdgeFactId: null,
+ selectedEdgeFactData: null,
+ showFactDialog: false,
+ isLoadingFactData: false,
+
+ // 改进元数据展示
+ parsedMetadata: null,
}
},
mounted() {
@@ -393,6 +496,83 @@ export default {
this.ltmGetGraph();
},
+ // 添加获取Fact详情的方法
+ getFactDetails(factId) {
+ if (!factId) return;
+
+ this.isLoadingFactData = true;
+ this.selectedEdgeFactData = null;
+ this.parsedMetadata = null;
+
+ axios.get('/api/plug/alkaid/ltm/graph/fact', {
+ params: { fact_id: factId }
+ })
+ .then(response => {
+ if (response.data.status === 'ok') {
+ this.selectedEdgeFactData = response.data.data;
+ // 解析元数据
+ this.parsedMetadata = this.parseMetadata(this.selectedEdgeFactData.metadata);
+ this.showFactDialog = true;
+ } else {
+ this.$toast.error('获取记忆详情失败: ' + response.data.message);
+ }
+ })
+ .catch(error => {
+ console.error('获取记忆详情失败:', error);
+ this.$toast.error('获取记忆详情失败: ' + (error.response?.data?.message || error.message));
+ })
+ .finally(() => {
+ this.isLoadingFactData = false;
+ });
+ },
+
+ // 添加元数据解析方法
+ parseMetadata(metadata) {
+ if (!metadata) return null;
+
+ try {
+ // 如果是字符串，尝试解析JSON
+ if (typeof metadata === 'string') {
+ try {
+ return JSON.parse(metadata);
+ } catch (e) {
+ return { value: metadata }; // 如果无法解析为JSON，则作为单个值返回
+ }
+ }
+
+ // 如果已经是对象，直接返回
+ if (typeof metadata === 'object') {
+ return metadata;
+ }
+
+ return { value: String(metadata) };
+ } catch (e) {
+ console.error('解析元数据出错:', e);
+ return { error: '无法解析元数据' };
+ }
+ },
+
+ // 格式化元数据值
+ formatMetadataValue(value) {
+ if (value === null || value === undefined) return '无';
+
+ if (typeof value === 'object') {
+ return JSON.stringify(value);
+ }
+
+ return String(value);
+ },
+
+ // 格式化时间戳的辅助方法
+ formatTime(timestamp) {
+ if (!timestamp) return '未知';
+ try {
+ return new Date(timestamp).toLocaleString();
+ } catch (e) {
+ return timestamp;
+ }
+ },
+
initD3Graph() {
const container = document.getElementById("graph-container");
if (!container) return;
@@ -431,6 +611,8 @@ export default {
if (!this.svg || !this.simulation) return;
const g = this.g;
g.selectAll("*").remove();
+
+ // 添加箭头定义
g.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("viewBox", "0 -5 10 10")
@@ -442,13 +624,22 @@ export default {
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("fill", "#999");
+
+ // 预处理边数据，标识和处理重复边
+ const linkGroups = this.identifyParallelLinks(this.links);
+
+ // 使用路径替代直线来绘制边，以便支持曲线
const link = g.append("g")
- .selectAll("line")
+ .selectAll("path")
.data(this.links)
- .join("line")
+ .join("path")
.attr("stroke", d => d.color)
.attr("stroke-width", 1.5)
- .attr("marker-end", "url(#arrowhead)");
+ .attr("fill", "none")
+ .attr("marker-end", "url(#arrowhead)")
+ .style("cursor", "pointer");
+
+ // 边标签需要相应调整位置
const edgeLabels = g.append("g")
.selectAll("text")
.data(this.links)
@@ -457,7 +648,22 @@ export default {
.attr("font-size", "8px")
.attr("text-anchor", "middle")
.attr("fill", "#666")
- .attr("dy", -5);
+ .style("cursor", "pointer")
+ .on("click", (event, d) => {
+ event.stopPropagation();
+
+ // 检查边数据中是否有fact_id
+ const factId = d.originalData?.fact_id;
+ if (factId) {
+ this.selectedEdge = d;
+ this.selectedEdgeFactId = factId;
+ this.getFactDetails(factId);
+ } else {
+ this.$toast.info('该关系没有关联的记忆数据');
+ }
+ });
+
+ // 节点绘制部分保持不变
const node = g.append("g")
.selectAll("circle")
.data(this.nodes)
@@ -466,6 +672,7 @@ export default {
.attr("fill", d => d.color)
.style("cursor", "pointer")
.call(this.dragBehavior());
+
const nodeLabels = g.append("g")
.selectAll("text")
.data(this.nodes)
@@ -475,27 +682,33 @@ export default {
.attr("text-anchor", "middle")
.attr("fill", "#333")
.attr("dy", -12);
+
node.on("click", (event, d) => {
event.stopPropagation();
this.selectedNode = d.originalData;
});
+
+ // 给SVG添加全局点击事件，用于关闭气泡
this.svg.on("click", () => {
this.selectedNode = null;
});
+
this.simulation
.nodes(this.nodes)
.on("tick", () => {
- link
- .attr("x1", d => d.source.x)
- .attr("y1", d => d.source.y)
- .attr("x2", d => d.target.x)
- .attr("y2", d => d.target.y);
+ // 更新边的路径
+ link.attr("d", d => this.generateLinkPath(d));
+
+ // 更新边标签位置
edgeLabels
- .attr("x", d => (d.source.x + d.target.x) / 2)
- .attr("y", d => (d.source.y + d.target.y) / 2);
+ .attr("x", d => this.getLinkLabelX(d))
+ .attr("y", d => this.getLinkLabelY(d));
+
+ // 更新节点位置
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
+
nodeLabels
.attr("x", d => d.x)
.attr("y", d => d.y);
@@ -506,6 +719,175 @@ export default {
this.simulation.alpha(1).restart();
},
+
+ // 识别并标记平行边（连接相同两个节点的多条边）
+ identifyParallelLinks(links) {
+ // 创建一个映射来存储连接相同节点对的边
+ const linkMap = new Map();
+
+ // 遍历所有边，按照起点和终点进行分组
+ links.forEach(link => {
+ // 创建边的键，确保无论边的方向如何，同一对节点生成的键都相同
+ const sourceId = typeof link.source === 'object' ? link.source.id : link.source;
+ const targetId = typeof link.target === 'object' ? link.target.id : link.target;
+
+ const forwardKey = `${sourceId}-${targetId}`;
+ const reverseKey = `${targetId}-${sourceId}`;
+
+ // 判断是从source到target的边还是反向边
+ const isForwardLink = sourceId < targetId;
+ const key = isForwardLink ? forwardKey : reverseKey;
+
+ // 使用方向信息
+ if (!linkMap.has(key)) {
+ linkMap.set(key, []);
+ }
+
+ // 存储边和其方向
+ linkMap.get(key).push({
+ link,
+ isForward: isForwardLink
+ });
+ });
+
+ // 处理每一组平行边，为它们分配曲率
+ linkMap.forEach((parallels, key) => {
+ if (parallels.length > 1) {
+ // 有多条平行边，分配不同曲率
+ parallels.forEach((item, index) => {
+ // 根据边的数量计算适当的曲率
+ const totalLinks = parallels.length;
+ // 基础曲率，可根据边数调整
+ const baseCurvature = 0.45;
+ // 根据边的索引计算曲率：中间的边较直，两侧的边较弯
+ let curvature;
+
+ if (totalLinks % 2 === 1) {
+ // 奇数条边，中间的边直线，其他边弯曲
+ const middleIndex = Math.floor(totalLinks / 2);
+ if (index === middleIndex) {
+ curvature = 0; // 中间的边为直线
+ } else {
+ // 到中间边的距离决定曲率大小
+ const distance = Math.abs(index - middleIndex);
+ const direction = index < middleIndex ? -1 : 1;
+ curvature = direction * baseCurvature * distance;
+ }
+ } else {
+ // 偶数条边，所有边都弯曲
+ const middleIndex = totalLinks / 2 - 0.5;
+ const distance = Math.abs(index - middleIndex);
+ const direction = index < middleIndex ? -1 : 1;
+ curvature = direction * baseCurvature * distance;
+ }
+
+ // 如果是反向边，翻转曲率方向
+ if (!item.isForward) {
+ curvature = -curvature;
+ }
+
+ // 存储曲率值到边对象
+ item.link.curvature = curvature;
+ });
+ } else {
+ // 只有一条边，不需要弯曲
+ parallels[0].link.curvature = 0;
+ }
+ });
+
+ return linkMap;
+ },
+
+ // 根据曲率生成边的路径
+ generateLinkPath(d) {
+ // 确保source和target是对象
+ const source = typeof d.source === 'object' ? d.source : this.nodes.find(n => n.id === d.source);
+ const target = typeof d.target === 'object' ? d.target : this.nodes.find(n => n.id === d.target);
+
+ if (!source || !target) return '';
+
+ // 如果是直线(无曲率)
+ if (!d.curvature || d.curvature === 0) {
+ return `M${source.x},${source.y}L${target.x},${target.y}`;
+ }
+
+ // 计算曲线的控制点
+ const dx = target.x - source.x;
+ const dy = target.y - source.y;
+ const dr = Math.sqrt(dx * dx + dy * dy);
+
+ // 控制点偏移距离，由曲率决定
+ const offset = dr * d.curvature;
+
+ // 计算中点
+ const midX = (source.x + target.x) / 2;
+ const midY = (source.y + target.y) / 2;
+
+ // 计算垂直于连线的方向向量
+ const nx = -dy / dr;
+ const ny = dx / dr;
+
+ // 计算控制点坐标
+ const cpx = midX + offset * nx;
+ const cpy = midY + offset * ny;
+
+ // 创建二次贝塞尔曲线路径
+ return `M${source.x},${source.y} Q${cpx},${cpy} ${target.x},${target.y}`;
+ },
+
+ // 新增方法：计算边标签的X坐标
+ getLinkLabelX(d) {
+ const source = typeof d.source === 'object' ? d.source : this.nodes.find(n => n.id === d.source);
+ const target = typeof d.target === 'object' ? d.target : this.nodes.find(n => n.id === d.target);
+
+ if (!source || !target) return 0;
+
+ // 如果是直线
+ if (!d.curvature || d.curvature === 0) {
+ return (source.x + target.x) / 2;
+ }
+
+ // 计算曲线上的点
+ const dx = target.x - source.x;
+ const dy = target.y - source.y;
+ const dr = Math.sqrt(dx * dx + dy * dy);
+
+ // 中点
+ const midX = (source.x + target.x) / 2;
+
+ // 垂直向量
+ const nx = -dy / dr;
+
+ // 曲线路径上的点，使用曲率进行调整
+ return midX + d.curvature * dr * nx * 0.5;
+ },
+
+ // 新增方法：计算边标签的Y坐标
+ getLinkLabelY(d) {
+ const source = typeof d.source === 'object' ? d.source : this.nodes.find(n => n.id === d.source);
+ const target = typeof d.target === 'object' ? d.target : this.nodes.find(n => n.id === d.target);
+
+ if (!source || !target) return 0;
+
+ // 如果是直线
+ if (!d.curvature || d.curvature === 0) {
+ return (source.y + target.y) / 2;
+ }
+
+ // 计算曲线上的点
+ const dx = target.x - source.x;
+ const dy = target.y - source.y;
+ const dr = Math.sqrt(dx * dx + dy * dy);
+
+ // 中点
+ const midY = (source.y + target.y) / 2;
+
+ // 垂直向量
+ const ny = dx / dr;
+
+ // 曲线路径上的点，使用曲率进行调整
+ return midY + d.curvature * dr * ny * 0.5;
+ },
dragBehavior() {
return d3.drag()
@@ -578,4 +960,43 @@ export default {
background-color: #f2f6f9;
}
+/* 为连接线添加交互样式 */
+#graph-container line {
+ transition: stroke-width 0.2s;
+}
+
+#graph-container line:hover {
+ stroke-width: 3px;
+ cursor: pointer;
+}
+
+/* 添加美化详情卡片的样式 */
+.fact-detail-card :deep(.v-card-title) {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.fact-detail-card :deep(.metadata-table) {
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.fact-detail-card :deep(.v-table) {
+ background: transparent;
+}
+
+.fact-detail-card :deep(.v-table th) {
+ color: var(--v-primary-base);
+ font-weight: bold;
+ background-color: rgba(var(--v-theme-primary), 0.05);
+}
+
+.fact-detail-card :deep(pre) {
+ background-color: #f5f5f5;
+ padding: 8px;
+ border-radius: 4px;
+ max-height: 150px;
+ overflow: auto;
+ font-size: 12px;
+}
diff --git a/dashboard/src/views/dashboards/default/components/MessageStat.vue b/dashboard/src/views/dashboards/default/components/MessageStat.vue
index 3f8bdfbed..2a7648613 100644
--- a/dashboard/src/views/dashboards/default/components/MessageStat.vue
+++ b/dashboard/src/views/dashboards/default/components/MessageStat.vue
@@ -69,6 +69,7 @@
+
+
+
+
+
+ mdi-memory
+ 记忆事实
+
+ mdi-close
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 关闭
+
+
+
+
@@ -153,6 +153,99 @@
{{ selectedEdgeFactData.text }}
+
+ mdi-identifier
+
+ ID
+ {{ selectedEdgeFactData.id }}
+
+ mdi-file-document-outline
+
+ 文档ID
+ {{ selectedEdgeFactData.doc_id }}
+
+ mdi-calendar-plus
+
+ 创建时间
+ {{ formatTime(selectedEdgeFactData.created_at) }}
+
+ mdi-calendar-edit
+
+ 更新时间
+ {{ formatTime(selectedEdgeFactData.updated_at) }}
+
+
+
+
+
+ 键
+ 值
+
+
+
+
+ {{ key }}
+ {{ formatMetadataValue(value) }}
+
+
+
+
+
+
+
+
+ mdi-database-cog
+
+ 元数据
+
+
+ 加载中...
+