From 13b8847a06cb5f41bed045f9370e9c115809378f Mon Sep 17 00:00:00 2001 From: hanyuqing <1106611654@qq.com> Date: Tue, 30 Dec 2025 16:19:05 +0800 Subject: [PATCH] 1230 --- controller/BuilderController.py | 1 - vue/src/system/GraphStyle.vue | 986 +++++++++++++++++----------------------- vue/src/system/KGData.vue | 403 +++++++++++++--- 3 files changed, 743 insertions(+), 647 deletions(-) diff --git a/controller/BuilderController.py b/controller/BuilderController.py index 26529c9..3d1e67d 100644 --- a/controller/BuilderController.py +++ b/controller/BuilderController.py @@ -10,7 +10,6 @@ import traceback from docx import Document import httpx -from multipart import FormParser from robyn import jsonify, Response, Request from app import app diff --git a/vue/src/system/GraphStyle.vue b/vue/src/system/GraphStyle.vue index da24385..370f873 100644 --- a/vue/src/system/GraphStyle.vue +++ b/vue/src/system/GraphStyle.vue @@ -1,142 +1,173 @@ @@ -151,7 +182,11 @@ export default { components: {Menu}, data() { return { - G6: null, // 添加这个 + G6: null, + _graph: null, + _nodeLabelMap: null, + // 记录选中的标签 + activeTags: ['疾病'], // 节点样式 nodeShowLabel: true, nodeFontSize: 12, @@ -175,192 +210,29 @@ export default { defaultData: { "nodes": [ - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "data": { - "name": "霍乱", - "diagnosisCode": "A00.900", - "nodeId": 6978, - "label": "Disease" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:9461", - "data": { - "name": "腹泻", - "nodeId": 9464, - "label": "Symptom" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:5992", - "data": { - "name": "脱水", - "nodeId": 5995, - "label": "Disease" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:1277", - "data": { - "name": "呕吐", - "nodeId": 1280, - "label": "Disease" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:26775", - "data": { - "name": "由霍乱弧菌感染所致", - "nodeId": 26778, - "label": "Cause" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:48981", - "data": { - "name": "复方磺胺甲噁唑", - "nodeId": 48984, - "label": "Drug" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:17392", - "data": { - "name": "消化系统", - "nodeId": 17395, - "label": "DiseaseSite" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:18534", - "data": { - "name": "传染科", - "nodeId": 18537, - "label": "Department" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:413", - "data": { - "name": "代谢性 酸中毒", - "nodeId": 416, - "label": "Disease" - } - }, - { - "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:2990", - "data": { - "name": "急性肾衰竭", - "nodeId": 2993, - "label": "Disease" - } - } + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "data": { "name": "霍乱", "diagnosisCode": "A00.900", "nodeId": 6978, "label": "Disease" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:9461", "data": { "name": "腹泻", "nodeId": 9464, "label": "Symptom" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:5992", "data": { "name": "脱水", "nodeId": 5995, "label": "Disease" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:1277", "data": { "name": "呕吐", "nodeId": 1280, "label": "Disease" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:26775", "data": { "name": "由霍乱弧菌感染所致", "nodeId": 26778, "label": "Cause" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:48981", "data": { "name": "复方磺胺甲噁唑", "nodeId": 48984, "label": "Drug" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:17392", "data": { "name": "消化系统", "nodeId": 17395, "label": "DiseaseSite" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:18534", "data": { "name": "传染科", "nodeId": 18537, "label": "Department" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:413", "data": { "name": "代谢性 酸中毒", "nodeId": 416, "label": "Disease" } }, + { "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:2990", "data": { "name": "急性肾衰竭", "nodeId": 2993, "label": "Disease" } } ], "edges": [ - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:9461", - "type": "line", - "data": { - "relationship": { - "type": "symptomAndSign", - "properties": { "label": "症状与体征" } - } - } - }, - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:5992", - "type": "line", - "data": { - "relationship": { - "type": "complication", - "properties": { "label": "并发症" } - } - } - }, - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:1277", - "type": "line", - "data": { - "relationship": { - "type": "complication", - "properties": { "label": "并发症" } - } - } - }, - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:26775", - "type": "line", - "data": { - "relationship": { - "type": "cause", - "properties": { "label": "病因" } - } - } - }, - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:48981", - "type": "line", - "data": { - "relationship": { - "type": "treatmentPrograms", - "properties": { "label": "治疗方案" } - } - } - }, - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:17392", - "type": "line", - "data": { - "relationship": { - "type": "diseaseSite", - "properties": { "label": "病变部位" } - } - } - }, - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:18534", - "type": "line", - "data": { - "relationship": { - "type": "department", - "properties": { "label": "科室" } - } - } - }, - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:413", - "type": "line", - "data": { - "relationship": { - "type": "complication", - "properties": { "label": "并发症" } - } - } - }, - { - "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", - "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:2990", - "type": "line", - "data": { - "relationship": { - "type": "complication", - "properties": { "label": "并发症" } - } - } - } + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:9461", "type": "line", "data": { "relationship": { "type": "symptomAndSign", "properties": { "label": "症状与体征" } } } }, + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:5992", "type": "line", "data": { "relationship": { "type": "complication", "properties": { "label": "并发症" } } } }, + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:1277", "type": "line", "data": { "relationship": { "type": "complication", "properties": { "label": "并发症" } } } }, + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:26775", "type": "line", "data": { "relationship": { "type": "cause", "properties": { "label": "病因" } } } }, + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:48981", "type": "line", "data": { "relationship": { "type": "treatmentPrograms", "properties": { "label": "治疗方案" } } } }, + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:17392", "type": "line", "data": { "relationship": { "type": "diseaseSite", "properties": { "label": "病变部位" } } } }, + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:18534", "type": "line", "data": { "relationship": { "type": "department", "properties": { "label": "科室" } } } }, + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:413", "type": "line", "data": { "relationship": { "type": "complication", "properties": { "label": "并发症" } } } }, + { "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:2990", "type": "line", "data": { "relationship": { "type": "complication", "properties": { "label": "并发症" } } } } ] - }, - children: 'children', - label: 'title' // 虽然用插槽，但 el-tree 内部仍会读取，可留空或任意 + } } }, @@ -384,7 +256,6 @@ export default { const updatedEdges = this.defaultData.edges.map(edge => ({ ...edge, type: this.edgeType, - id: edge.data.relationship.id, style: { endArrow: this.edgeEndArrow, stroke: this.edgeStroke, @@ -395,26 +266,18 @@ export default { labelFill: this.edgeFontColor, }, })) - const updatedData = { - nodes: updatedNodes, - edges: updatedEdges - } - this.defaultData = updatedData + this.defaultData = { nodes: updatedNodes, edges: updatedEdges } setTimeout(() => { this.initGraph(); window.addEventListener('resize', this.handleResize); }, 1000); - } catch (error) { - console.error('加载图谱数据失败:', error); - } + } catch (error) { console.error('加载图谱数据失败:', error); } }, beforeUnmount() { - this._graph.destroy() - this._graph = null; + if(this._graph) { this._graph.destroy(); this._graph = null; } window.removeEventListener('resize', this.handleResize); }, watch: { - // 节点相关 nodeShowLabel: 'updateAllNodes', nodeFontSize: 'updateAllNodes', nodeFontColor: 'updateAllNodes', @@ -424,8 +287,6 @@ export default { nodeStroke: 'updateAllNodes', nodeLineWidth: 'updateAllNodes', nodeFontFamily: 'updateAllNodes', - - // 边相关 edgeShowLabel: 'updateAllEdges', edgeFontSize: 'updateAllEdges', edgeFontColor: 'updateAllEdges', @@ -436,253 +297,119 @@ export default { edgeFontFamily: 'updateAllEdges', }, methods: { + toggleTag(tag) { + const index = this.activeTags.indexOf(tag); + if (index > -1) { + this.activeTags.splice(index, 1); + } else { + this.activeTags.push(tag); + } + }, buildNodeLabelMap(nodes) { this._nodeLabelMap = new Map(); - nodes.forEach(node => { - this._nodeLabelMap.set(node.id, node.data?.label || 'default'); - }); + nodes.forEach(node => { this._nodeLabelMap.set(node.id, node.data?.label || 'default'); }); }, initGraph() { - - if (this._graph!=null){ - this._graph.destroy() - this._graph = null; - } - if (!this._nodeLabelMap) { - this.buildNodeLabelMap(this.defaultData.nodes); - } + if (this._graph!=null){ this._graph.destroy(); this._graph = null; } + if (!this._nodeLabelMap) { this.buildNodeLabelMap(this.defaultData.nodes); } const container = this.$refs.graphContainer; - const width = container.clientWidth || 800; - const height = container.clientHeight || 600; - - const graph = new Graph({ + this._graph = new Graph({ container, - width, - height, - layout: { - type: 'radial', - nodeSize: 32, - unitRadius: 100, - linkDistance: 200, - }, + width: container.clientWidth || 800, + height: container.clientHeight || 600, + layout: { type: 'radial', nodeSize: 32, unitRadius: 100, linkDistance: 200 }, behaviors: [ 'zoom-canvas', 'drag-element','click-select','focus-element', - { - type: 'hover-activate', - degree: 1, // 👈🏻 Activate relations. - }, - { - type: 'drag-canvas', - enable: (event) => event.shiftKey === false, - }, - { - type: 'brush-select', - }, + { type: 'hover-activate', degree: 1 }, + { type: 'drag-canvas', enable: (event) => event.shiftKey === false }, + { type: 'brush-select' }, ], - node: { style: { labelText: (d) => d.data.name, labelPlacement: 'center', fill: (d) => { const label = d.data?.label; - if (label === 'Disease') return '#EF4444'; // 红 - if (label === 'Drug') return '#91cc75'; // 绿 - if (label === 'Symptom') return '#fac858'; // 橙 - if (label === 'Check') return '#59d1d4'; // 橙 - return '#336eee'; // 默认灰蓝 + if (label === 'Disease') return '#EF4444'; + if (label === 'Drug') return '#91cc75'; + if (label === 'Symptom') return '#fac858'; + if (label === 'Check') return '#59d1d4'; + return '#336eee'; }, stroke: (d) => { const label = d.data?.label; if (label === 'Disease') return '#B91C1C'; if (label === 'Drug') return '#047857'; - if (label === 'Check') return '#40999b'; // 橙 + if (label === 'Check') return '#40999b'; if (label === 'Symptom') return '#B45309'; return '#1D4ED8'; }, - labelWordWrap: true, - labelMaxWidth: '150%', - labelMaxLines: 3, - labelTextOverflow: 'ellipsis', - labelTextAlign: 'center', + labelWordWrap: true, labelMaxWidth: '150%', labelMaxLines: 3, labelTextOverflow: 'ellipsis', labelTextAlign: 'center', }, state: { - - highlight: { - stroke: '#FF6A00', - lineWidth: 3, - }, - disabled: { - fill: '#ECECEC', - stroke: '#BFBFBF', - opacity: 0.5, - }, + highlight: { stroke: '#FF6A00', lineWidth: 3 }, + disabled: { fill: '#ECECEC', stroke: '#BFBFBF', opacity: 0.5 }, }, }, edge: { style: { labelText: (d) => d.data.relationship.properties.label, stroke: (d) => { - // 获取 target 节点的 label - const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID - // 根据 target 节点类型返回对应浅色 + const targetLabel = this._nodeLabelMap.get(d.target); if (targetLabel === 'Disease') return 'rgba(239,68,68,0.5)'; if (targetLabel === 'Drug') return 'rgba(145,204,117,0.5)'; if (targetLabel === 'Symptom') return 'rgba(250,200,88,0.5)'; - if (targetLabel === 'Check') return 'rgba(89,209,212,0.5)'; // 橙 - return 'rgba(51,110,238,0.5)'; // default - }, - }, - state: { - selected: { - stroke: '#1890FF', - lineWidth: 2, - }, - highlight: { - stroke: '#FF6A00', - lineWidth: 3, + if (targetLabel === 'Check') return 'rgba(89,209,212,0.5)'; + return 'rgba(51,110,238,0.5)'; }, }, - + state: { selected: { stroke: '#1890FF', lineWidth: 2 }, highlight: { stroke: '#FF6A00', lineWidth: 3 } }, }, data:this.defaultData }); - - graph.render(); - this._graph = graph - this._graph?.fitView() + this._graph.render(); + this._graph.fitView(); }, - updateGraph(data) { - if (!this._graph) return - this._graph.setData(data) - this._graph.render() + if (!this._graph) return; + this._graph.setData(data); + this._graph.render(); }, - updateAllNodes() { - if (!this._graph) return + if (!this._graph) return; const updatedNodes = this.defaultData.nodes.map(node => ({ - ...node, - type: this.nodeShape, + ...node, type: this.nodeShape, style:{ - size: this.nodeSize, - fill: this.nodeFill, - stroke: this.nodeStroke, - lineWidth: this.nodeLineWidth, - label: this.nodeShowLabel, - labelFontSize: this.nodeFontSize, - labelFontFamily: this.nodeFontFamily, - labelFontColor: this.nodeFontColor, + size: this.nodeSize, fill: this.nodeFill, stroke: this.nodeStroke, lineWidth: this.nodeLineWidth, + label: this.nodeShowLabel, labelFontSize: this.nodeFontSize, labelFontFamily: this.nodeFontFamily, labelFontColor: this.nodeFontColor, } })) - const updatedData = { - nodes: updatedNodes, - edges: this.defaultData.edges - } - this.defaultData = updatedData - this.updateGraph(updatedData) + this.defaultData = { nodes: updatedNodes, edges: this.defaultData.edges }; + this.updateGraph(this.defaultData); }, - updateAllEdges() { - if (!this._graph) return + if (!this._graph) return; const updatedEdges = this.defaultData.edges.map(edge => ({ - ...edge, - type:this.edgeType, + ...edge, type:this.edgeType, style: { - endArrow: this.edgeEndArrow, - stroke: this.edgeStroke, - lineWidth: this.edgeLineWidth, - label: this.edgeShowLabel, - labelFontSize: this.edgeFontSize, - labelFontFamily: this.edgeFontFamily, - labelFill: this.edgeFontColor, - + endArrow: this.edgeEndArrow, stroke: this.edgeStroke, lineWidth: this.edgeLineWidth, + label: this.edgeShowLabel, labelFontSize: this.edgeFontSize, labelFontFamily: this.edgeFontFamily, labelFill: this.edgeFontColor, }, - })) - const updatedData = { - nodes: this.defaultData.nodes, - edges: updatedEdges - } - this.defaultData = updatedData - this.updateGraph(updatedData) + this.defaultData = { nodes: this.defaultData.nodes, edges: updatedEdges }; + this.updateGraph(this.defaultData); }, - - clearAllStates() { - if (!this._graph) return - - // 清除所有节点的状态 - this._graph.getNodes().forEach(node => { - this._graph.clearItemStates(node) - }) - - // 清除所有边的状态 - this._graph.getEdges().forEach(edge => { - this._graph.clearItemStates(edge) - }) - }, - handleResize() { - const container = this.$refs.graphContainer - if (this._graph && container) { - this._graph.resize(container.offsetWidth, container.offsetHeight) - } - }, - - resetView() { - this._graph?.fitView() + const container = this.$refs.graphContainer; + if (this._graph && container) { this._graph.resize(container.offsetWidth, container.offsetHeight); } }, - + resetView() { this._graph?.fitView(); }, resetStyle() { Object.assign(this, { - nodeShowLabel: true, - nodeFontSize: 12, - nodeFontColor: '#000000', - nodeShape: 'circle', - nodeSize: 60, - nodeFill: '#9FD5FF', - nodeStroke: '#5B8FF9', - nodeLineWidth: 2, - nodeFontFamily: 'Microsoft YaHei, sans-serif', - - edgeShowLabel: true, - edgeFontSize: 10, - edgeFontColor: '#666666', - edgeType: 'line', - edgeLineWidth: 2, - edgeStroke: '#F00', - edgeEndArrow: true, - edgeFontFamily: 'Microsoft YaHei, sans-serif' - }) - }, - - - handleNodeClick(data) { - console.log('点击节点:', data) - // 可用于显示详情、复制 code 等 - this.$message.info(`已选中: ${data.title}`) - }, - - getLevelLabel(level) { - const map = { - chapter: '章', - section: '节', - category: '类目', - subcategory: '亚目', - diagnosis: '条目' - } - return map[level] || level + nodeShowLabel: true, nodeFontSize: 12, nodeFontColor: '#000000', nodeShape: 'circle', + nodeSize: 60, nodeFill: '#9FD5FF', nodeStroke: '#5B8FF9', nodeLineWidth: 2, nodeFontFamily: 'Microsoft YaHei, sans-serif', + edgeShowLabel: true, edgeFontSize: 10, edgeFontColor: '#666666', edgeType: 'line', edgeLineWidth: 2, edgeStroke: '#F00', edgeEndArrow: true, edgeFontFamily: 'Microsoft YaHei, sans-serif' + }); }, - - getTagType(level) { - const map = { - chapter: 'primary', - section: 'success', - category: 'warning', - subcategory: 'info', - diagnosis: '' - } - return map[level] || '' - } } } @@ -691,98 +418,205 @@ export default { .knowledge-graph-container { display: flex; height: 100vh; + background-color: #f8fafc; } +/* 侧边面板 */ .control-panel { - width: 280px; - background: #f5f7fa; - padding: 16px; - border-right: 1px solid #ddd; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); - font-family: 'Microsoft YaHei'; + width: 290px; + background: #ffffff; + border-right: 1px solid #e2e8f0; + padding: 18px; + display: flex; + flex-direction: column; + overflow-y: auto; + font-family: 'Microsoft YaHei', sans-serif; + box-shadow: 2px 0 10px rgba(0,0,0,0.03); } -.section { - margin-bottom: 10px; - padding: 10px; - background: white; - border-radius: 8px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +/* 标题样式调整 */ +.panel-header-container { + margin-bottom: 15px; +} +.panel-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} +.header-line { + height: 1px; + background-color: #e2e8f0; + width: 100%; +} +.custom-title-style { + font-size: 18px; + font-weight: bold; + color: #1157f3; } -.section h5 { - margin-top: 0; - color: #333; - font-size: 14px; +/* 标签过滤器 */ +.tag-filters { + display: flex; + gap: 6px; + margin-bottom: 20px; + flex-wrap: wrap; +} +.tag-item { + padding: 4px 12px; + border-radius: 12px; + font-size: 11px; + cursor: pointer; + transition: all 0.2s; +} +.clickable-tag { + background: #959390; + color: #ffffff; +} +.tag-active { + background: #4a68db !important; } -.slider-group { - margin: 10px 0; +.section { + margin-bottom: 25px; +} + +/* 分类标题 */ +.section-title { display: flex; align-items: center; + font-size: 16px; + font-weight: bold; + color: #334155; + margin-bottom: 12px; + padding-left: 12px; + position: relative; + line-height: 1; } - -.slider-group span { - margin-right: 10px; - font-size: 12px; +.section-title::before { + content: ""; + position: absolute; + left: 0; + width: 4px; + height: 16px; + background-color: #1559f3; + border-radius: 2px; } -.form-group { - margin: 10px 0; + +/* --- 找到 488 行附近，替换以下三个类 --- */ +.form-group-flex { display: flex; align-items: center; + justify-content: flex-start; + font-size: 14px; + margin-bottom: 12px; + color: #475569; + padding: 0 10px 0 0; } -.form-group label { - margin-right: 8px; - font-size: 12px; +.checkbox-label { + + width: 150px; + flex-shrink: 0; + text-align: left; + padding-left: 0; } -.form-group select, -.form-group input[type="number"] { - padding: 4px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 12px; +.theme-checkbox { + accent-color: #1559f3; + width: 16px; + height: 16px; + cursor: pointer; + margin: 0; } -.color-picker { - margin: 10px 0; +.slider-inline-group { display: flex; align-items: center; + gap: 10px; + font-size: 14px; + margin-bottom: 12px; + color: #475569; } - -.color-picker label { - margin-right: 8px; +.slider-inline-group label { + width: 80px; + flex-shrink: 0; +} +.theme-slider { + flex: 1; + accent-color: #1559f3; + height: 4px; + cursor: pointer; +} +.val-text-black { + color: #000000; + font-weight: bold; font-size: 12px; + min-width: 35px; + text-align: right; } -.color-picker input[type="color"] { - width: 40px; - height: 20px; - border: none; +.color-picker-border { + display: flex; + align-items: center; + justify-content: center; + padding: 3px; + border: 1px solid #e2e8f0; + border-radius: 4px; + background-color: #fff; +} +.square-picker { + -webkit-appearance: none; + width: 24px !important; + height: 24px !important; + padding: 0; + border: 1px solid #cbd5e1; + border-radius: 2px; + background: none; cursor: pointer; } +.square-picker::-webkit-color-swatch-wrapper { padding: 0; } +.square-picker::-webkit-color-swatch { border: none; border-radius: 2px; } -button { - width: 45%; - padding: 10px; - background: #007bff; - color: white; - border: none; - border-radius: 6px; +.form-group, .color-picker-item { + display: flex; + align-items: center; font-size: 14px; - cursor: pointer; - margin-right: 2%; + margin-bottom: 12px; +} +.form-group label, .color-picker-item label { + width: 80px; + color: #475569; +} +.form-group select, .form-group input[type="number"] { + flex: 1; + padding: 6px; + border: 1px solid #e2e8f0; + border-radius: 6px; + background: #fcfcfc; + outline: none; } -button:hover { - background: #0056b3; +.button-footer { + display: flex; + gap: 10px; + margin-top: 10px; +} +.button-footer button { + flex: 1; + padding: 10px; + border-radius: 6px; + font-size: 13px; + cursor: pointer; + transition: all 0.2s; } +.btn-reset-view { background: #1559f3; color: white; border: none; } +.btn-reset-style { background: white; color: #1559f3; border: 1px solid #1559f3; } .graph-container { flex: 1; - border: 1px solid #eee; - background: #fff; + background: #ffffff; + position: relative; } \ No newline at end of file diff --git a/vue/src/system/KGData.vue b/vue/src/system/KGData.vue index bf717a1..c6e7d1d 100644 --- a/vue/src/system/KGData.vue +++ b/vue/src/system/KGData.vue @@ -208,7 +208,8 @@ - + @@ -227,13 +228,16 @@ - + - + - + @@ -245,7 +249,9 @@ @@ -253,8 +259,8 @@ \ No newline at end of file