ben/huhan3000
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新文档系统归并优化方案

Browse Source
This commit is contained in:
ben
2025-10-29 14:36:13 +00:00
parent 2f96497530
commit 0def756314
332 changed files with 30606 additions and 28342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

513
visualization/kym_interactive.html Normal file
View File

@@ -0,0 +1,513 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>K/Y/M三链理论交互式可视化</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #2c3e50;
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.header .subtitle {
color: #7f8c8d;
font-size: 1.2em;
margin-bottom: 20px;
}
.controls {
background: #ecf0f1;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
}
.slider-container {
margin: 15px 0;
}
.slider-label {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.slider {
width: 100%;
height: 8px;
border-radius: 4px;
outline: none;
}
.k-slider { background: linear-gradient(to right, #1f77b4, #aec7e8); }
.y-slider { background: linear-gradient(to right, #2ca02c, #98df8a); }
.m-slider { background: linear-gradient(to right, #d62728, #ff9896); }
.visualization-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.chart-container {
background: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.chart-title {
text-align: center;
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
}
.info-panel {
background: #34495e;
color: white;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
.chain-info {
display: flex;
justify-content: space-around;
text-align: center;
margin: 20px 0;
}
.chain-card {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
width: 30%;
}
.chain-card.k { border-left: 4px solid #1f77b4; }
.chain-card.y { border-left: 4px solid #2ca02c; }
.chain-card.m { border-left: 4px solid #d62728; }
.civilization-selector {
display: flex;
gap: 10px;
margin: 15px 0;
flex-wrap: wrap;
}
.civilization-btn {
padding: 8px 15px;
border: none;
border-radius: 20px;
background: #bdc3c7;
cursor: pointer;
transition: all 0.3s;
}
.civilization-btn.active {
background: #3498db;
color: white;
}
.civilization-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>👑 K/Y/M三链理论可视化平台</h1>
<div class="subtitle">权力符号考古学的交互式探索工具</div>
</div>
<div class="controls">
<h3>三链权重调节</h3>
<div class="slider-container">
<div class="slider-label">
<span>K链（秩序）权重: <span id="k-value">0.33</span></span>
<span style="color: #1f77b4;">宇宙的"主程序"，负责空间秩序</span>
</div>
<input type="range" min="0" max="100" value="33" class="slider k-slider" id="k-slider">
</div>
<div class="slider-container">
<div class="slider-label">
<span>Y链（道德）权重: <span id="y-value">0.33</span></span>
<span style="color: #2ca02c;">"执行者"，负责道德和物理操作</span>
</div>
<input type="range" min="0" max="100" value="33" class="slider y-slider" id="y-slider">
</div>
<div class="slider-container">
<div class="slider-label">
<span>M链（信仰）权重: <span id="m-value">0.34</span></span>
<span style="color: #d62728;">"信仰"，负责时间预测和救赎</span>
</div>
<input type="range" min="0" max="100" value="34" class="slider m-slider" id="m-slider">
</div>
<div class="civilization-selector">
<button class="civilization-btn active" data-civ="shang">商朝（K链主导）</button>
<button class="civilization-btn" data-civ="zhou">周朝（Y链主导）</button>
<button class="civilization-btn" data-civ="maya">玛雅（M链主导）</button>
<button class="civilization-btn" data-civ="inca">印加（Y链特色）</button>
<button class="civilization-btn" data-civ="rome">罗马（K链过度）</button>
<button class="civilization-btn" data-civ="balanced">均衡发展</button>
</div>
</div>
<div class="visualization-area">
<div class="chart-container">
<div class="chart-title">三链功能关系图</div>
<div id="triangle-chart"></div>
</div>
<div class="chart-container">
<div class="chart-title">三链权重雷达图</div>
<div id="radar-chart"></div>
</div>
<div class="chart-container">
<div class="chart-title">文明发展轨迹</div>
<div id="timeline-chart"></div>
</div>
<div class="chart-container">
<div class="chart-title">符号关联网络</div>
<div id="network-chart"></div>
</div>
</div>
<div class="info-panel">
<h3>当前文明诊断</h3>
<div id="diagnosis-text">选择或调整文明类型查看详细分析...</div>
<div class="chain-info">
<div class="chain-card k">
<h4>K链分析</h4>
<div id="k-analysis">秩序建立程度：中等</div>
</div>
<div class="chain-card y">
<h4>Y链分析</h4>
<div id="y-analysis">道德实践水平：中等</div>
</div>
<div class="chain-card m">
<h4>M链分析</h4>
<div id="m-analysis">信仰体系强度：中等</div>
</div>
</div>
</div>
</div>
<script>
// 三链数据定义
const chainData = {
shang: { k: 0.6, y: 0.2, m: 0.2, name: "商朝", desc: "K链过度主导，秩序建立但道德实践不足" },
zhou: { k: 0.3, y: 0.5, m: 0.2, name: "周朝", desc: "Y链道德实践主导，建立德治体系" },
maya: { k: 0.2, y: 0.3, m: 0.5, name: "玛雅", desc: "M链信仰体系主导，时间测算极致化" },
inca: { k: 0.3, y: 0.5, m: 0.2, name: "印加", desc: "Y链山地道德特色，实践智慧突出" },
rome: { k: 0.5, y: 0.3, m: 0.2, name: "罗马", desc: "K链秩序过度复杂化，系统脆弱性增加" },
balanced: { k: 0.33, y: 0.33, m: 0.34, name: "均衡发展", desc: "三链功能均衡，文明韧性最强" }
};
// 当前选中的文明
let currentCivilization = 'balanced';
// 初始化图表
function initCharts() {
updateCharts();
// 绑定滑块事件
document.getElementById('k-slider').addEventListener('input', updateFromSliders);
document.getElementById('y-slider').addEventListener('input', updateFromSliders);
document.getElementById('m-slider').addEventListener('input', updateFromSliders);
// 绑定文明选择按钮
document.querySelectorAll('.civilization-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.civilization-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
currentCivilization = this.dataset.civ;
loadCivilizationData(currentCivilization);
});
});
}
// 从滑块更新数据
function updateFromSliders() {
const kVal = parseInt(document.getElementById('k-slider').value) / 100;
const yVal = parseInt(document.getElementById('y-slider').value) / 100;
const mVal = parseInt(document.getElementById('m-slider').value) / 100;
document.getElementById('k-value').textContent = kVal.toFixed(2);
document.getElementById('y-value').textContent = yVal.toFixed(2);
document.getElementById('m-value').textContent = mVal.toFixed(2);
updateCharts(kVal, yVal, mVal);
updateDiagnosis(kVal, yVal, mVal);
}
// 加载文明数据
function loadCivilizationData(civ) {
const data = chainData[civ];
document.getElementById('k-slider').value = data.k * 100;
document.getElementById('y-slider').value = data.y * 100;
document.getElementById('m-slider').value = data.m * 100;
updateFromSliders();
}
// 更新所有图表
function updateCharts(k = 0.33, y = 0.33, m = 0.34) {
updateTriangleChart(k, y, m);
updateRadarChart(k, y, m);
updateTimelineChart();
updateNetworkChart();
}
// 更新三角形图表
function updateTriangleChart(k, y, m) {
const data = [{
type: 'scatterternary',
mode: 'markers',
a: [k * 100],
b: [y * 100],
c: [m * 100],
marker: {
size: 20,
color: 'gold',
line: { width: 2, color: 'black' }
},
text: [`K:${k.toFixed(2)} Y:${y.toFixed(2)} M:${m.toFixed(2)}`],
hoverinfo: 'text'
}];
const layout = {
ternary: {
sum: 100,
aaxis: { title: 'K链（秩序）', color: '#1f77b4' },
baxis: { title: 'Y链（道德）', color: '#2ca02c' },
caxis: { title: 'M链（信仰）', color: '#d62728' }
},
title: '三链功能平衡图',
showlegend: false
};
Plotly.newPlot('triangle-chart', data, layout);
}
// 更新雷达图
function updateRadarChart(k, y, m) {
const data = [{
type: 'scatterpolar',
r: [k, y, m, k],
theta: ['秩序建立', '道德实践', '信仰体系', '秩序建立'],
fill: 'toself',
line: { color: '#3498db' },
fillcolor: 'rgba(52, 152, 219, 0.3)'
}];
const layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 1]
}
},
showlegend: false
};
Plotly.newPlot('radar-chart', data, layout);
}
// 更新时间线图表
function updateTimelineChart() {
// 简化的时间线数据
const data = [
{ civilization: '商朝', start: -1600, end: -1046, k: 0.6, y: 0.2, m: 0.2 },
{ civilization: '周朝', start: -1046, end: -256, k: 0.3, y: 0.5, m: 0.2 },
{ civilization: '罗马', start: -27, end: 476, k: 0.5, y: 0.3, m: 0.2 },
{ civilization: '玛雅', start: 200, end: 900, k: 0.2, y: 0.3, m: 0.5 },
{ civilization: '印加', start: 1200, end: 1533, k: 0.3, y: 0.5, m: 0.2 }
];
const traces = data.map(civ => ({
x: [civ.start, civ.end],
y: [civ.civilization, civ.civilization],
mode: 'lines',
line: {
color: `rgb(${Math.round(civ.k * 255)}, ${Math.round(civ.y * 255)}, ${Math.round(civ.m * 255)})`,
width: 8
},
name: civ.civilization,
hoverinfo: 'text',
text: `${civ.civilization}<br>K:${civ.k} Y:${civ.y} M:${civ.m}`
}));
const layout = {
title: '文明发展时间线',
xaxis: { title: '时间（公元前/公元）' },
yaxis: { title: '文明' },
showlegend: false
};
Plotly.newPlot('timeline-chart', traces, layout);
}
// 更新网络图表
function updateNetworkChart() {
// 简化的网络数据
const nodes = [
{ id: '昆仑', group: 'K', x: 0, y: 0 },
{ id: '大禹', group: 'Y', x: 1, y: 0 },
{ id: '玛雅', group: 'M', x: 0.5, y: 1 },
{ id: '秩序', group: 'K', x: -1, y: 0 },
{ id: '道德', group: 'Y', x: 2, y: 0 },
{ id: '信仰', group: 'M', x: 0.5, y: 2 }
];
const links = [
{ source: '昆仑', target: '秩序', value: 0.8 },
{ source: '大禹', target: '道德', value: 0.9 },
{ source: '玛雅', target: '信仰', value: 0.8 },
{ source: '秩序', target: '道德', value: 0.6 },
{ source: '道德', target: '信仰', value: 0.5 }
];
// 使用D3.js创建力导向图
const svg = d3.select('#network-chart').html('').append('svg')
.attr('width', 400)
.attr('height', 300);
// 简化的力导向图实现
const simulation = d3.forceSimulation(nodes)
.force('link', d3.forceLink(links).id(d => d.id).distance(100))
.force('charge', d3.forceManyBody().strength(-300))
.force('center', d3.forceCenter(200, 150));
const link = svg.append('g')
.selectAll('line')
.data(links)
.enter().append('line')
.attr('stroke-width', d => d.value * 5)
.attr('stroke', '#999');
const node = svg.append('g')
.selectAll('circle')
.data(nodes)
.enter().append('circle')
.attr('r', 10)
.attr('fill', d => {
if (d.group === 'K') return '#1f77b4';
if (d.group === 'Y') return '#2ca02c';
return '#d62728';
});
simulation.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);
node
.attr('cx', d => d.x)
.attr('cy', d => d.y);
});
}
// 更新诊断分析
function updateDiagnosis(k, y, m) {
const diagnosis = generateDiagnosis(k, y, m);
document.getElementById('diagnosis-text').innerHTML = diagnosis.overall;
document.getElementById('k-analysis').textContent = diagnosis.k;
document.getElementById('y-analysis').textContent = diagnosis.y;
document.getElementById('m-analysis').textContent = diagnosis.m;
}
// 生成诊断分析
function generateDiagnosis(k, y, m) {
let overall = "";
let kAnalysis = "";
let yAnalysis = "";
let mAnalysis = "";
// K链分析
if (k > 0.5) {
kAnalysis = "秩序建立过度，可能导致系统僵化";
} else if (k > 0.3) {
kAnalysis = "秩序建立良好，系统稳定性强";
} else {
kAnalysis = "秩序建立不足，需要加强";
}
// Y链分析
if (y > 0.5) {
yAnalysis = "道德实践突出，社会凝聚力强";
} else if (y > 0.3) {
yAnalysis = "道德实践适中，社会运行平稳";
} else {
yAnalysis = "道德实践不足，需要重视";
}
// M链分析
if (m > 0.5) {
mAnalysis = "信仰体系强大，但可能过度依赖";
} else if (m > 0.3) {
mAnalysis = "信仰体系适中，精神需求满足";
} else {
mAnalysis = "信仰体系薄弱，精神建设需加强";
}
// 总体诊断
const imbalance = Math.max(k, y, m) - Math.min(k, y, m);
if (imbalance > 0.3) {
overall = "⚠️ 三链功能严重失衡，文明韧性面临挑战";
} else if (imbalance > 0.15) {
overall = "⚠️ 三链功能存在一定失衡，需要注意调整";
} else {
overall = "✅ 三链功能均衡发展，文明韧性良好";
}
overall += `<br>当前权重：K链 ${k.toFixed(2)} | Y链 ${y.toFixed(2)} | M链 ${m.toFixed(2)}`;
return { overall, k: kAnalysis, y: yAnalysis, m: mAnalysis };
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initCharts);
</script>
</body>
</html>