web更新
Bifang
parent
b7d4cc8782
commit
f857a90977
|
|
@ -20,6 +20,7 @@ from meeting_memory.meeting_processor import meeting_processor, state_store
|
|||
logger = logging.getLogger(__name__)
|
||||
|
||||
STATIC_DIR = Path(__file__).resolve().parent / "static"
|
||||
STATIC_V2_DIR = Path(__file__).resolve().parent / "static_v2"
|
||||
RAW_DIR = Path(config.storage.raw_dir)
|
||||
IMPORT_JOBS = {}
|
||||
IMPORT_JOBS_LOCK = threading.Lock()
|
||||
|
|
@ -29,8 +30,22 @@ class GraphDemoHandler(SimpleHTTPRequestHandler):
|
|||
def __init__(self, *args, **kwargs):
|
||||
super().__init__(*args, directory=str(STATIC_DIR), **kwargs)
|
||||
|
||||
# ── Route: serve /static_v2/* from the v2 directory ──
|
||||
def translate_path(self, path):
|
||||
parsed = urlparse(path)
|
||||
raw = parsed.path
|
||||
|
||||
# Serve /static_v2/* from static_v2 directory
|
||||
if raw.startswith("/static_v2/"):
|
||||
rel = raw[len("/static_v2/"):]
|
||||
return str(STATIC_V2_DIR / rel)
|
||||
|
||||
return super().translate_path(path)
|
||||
|
||||
def do_GET(self):
|
||||
parsed = urlparse(self.path)
|
||||
|
||||
# API endpoints
|
||||
if parsed.path == "/api/dashboard":
|
||||
self._handle_dashboard()
|
||||
return
|
||||
|
|
@ -55,10 +70,16 @@ class GraphDemoHandler(SimpleHTTPRequestHandler):
|
|||
if parsed.path == "/api/import-status":
|
||||
self._handle_import_status(parsed.query)
|
||||
return
|
||||
|
||||
# Page routing — serve v2 HTML as default
|
||||
if parsed.path in ("/", "/index.html"):
|
||||
self.path = "/index.html"
|
||||
self.path = "/static_v2/index.html"
|
||||
elif parsed.path == "/graph":
|
||||
self.path = "/graph.html"
|
||||
self.path = "/static_v2/graph.html"
|
||||
elif parsed.path == "/graph.html":
|
||||
self.path = "/static_v2/graph.html"
|
||||
|
||||
# JS files (/app.js, /graph.js) resolve to STATIC_DIR via default translate_path
|
||||
super().do_GET()
|
||||
|
||||
def do_POST(self):
|
||||
|
|
@ -311,9 +332,9 @@ def _serialize_meeting(path: Path, include_content: bool = False):
|
|||
lines = raw_text.splitlines()
|
||||
for line in lines[:12]:
|
||||
if line.startswith('title: "'):
|
||||
title = line[len('title: "') : -1]
|
||||
title = line[len('title: "'):-1]
|
||||
elif line.startswith('date: "'):
|
||||
date = line[len('date: "') : -1]
|
||||
date = line[len('date: "'):-1]
|
||||
|
||||
content_start = 0
|
||||
for idx, line in enumerate(lines):
|
||||
|
|
@ -397,4 +418,4 @@ if __name__ == "__main__":
|
|||
format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
|
||||
datefmt="%H:%M:%S",
|
||||
)
|
||||
run_demo_server()
|
||||
run_demo_server()
|
||||
|
|
@ -4,8 +4,7 @@ const graphNodeLimit = document.getElementById("graphNodeLimit");
|
|||
const graphEdgeLimit = document.getElementById("graphEdgeLimit");
|
||||
const graphSvg = document.getElementById("graphSvg");
|
||||
const graphMeta = document.getElementById("graphMeta");
|
||||
const graphDetail = document.getElementById("graphDetail");
|
||||
const relatedSearch = document.getElementById("relatedSearch");
|
||||
const detailPanel = document.getElementById("detailPanel");
|
||||
const graphTypeFilter = document.getElementById("graphTypeFilter");
|
||||
|
||||
let selectedEntityTypes = null;
|
||||
|
|
@ -76,35 +75,35 @@ async function loadGraphKinds() {
|
|||
}
|
||||
|
||||
function renderInspector(content) {
|
||||
graphDetail.innerHTML = content;
|
||||
detailPanel.innerHTML = content;
|
||||
}
|
||||
|
||||
async function loadRelated(query) {
|
||||
if (!query) {
|
||||
relatedSearch.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
if (!query) return;
|
||||
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=4`);
|
||||
const payload = await response.json();
|
||||
const results = payload.results || [];
|
||||
if (!results.length) {
|
||||
relatedSearch.innerHTML = empty("没有更多相关检索结果");
|
||||
detailPanel.insertAdjacentHTML("beforeend", `
|
||||
<div class="detail-section">
|
||||
<p class="eyebrow">Related</p>
|
||||
<div class="empty-state">没有更多相关检索结果</div>
|
||||
</div>
|
||||
`);
|
||||
return;
|
||||
}
|
||||
relatedSearch.innerHTML = `
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">Related</p>
|
||||
<h3>相关检索</h3>
|
||||
</div>
|
||||
detailPanel.insertAdjacentHTML("beforeend", `
|
||||
<div class="detail-section">
|
||||
<p class="eyebrow">Related</p>
|
||||
<h3>相关检索</h3>
|
||||
${results.map((item) => `
|
||||
<article class="result-card">
|
||||
<strong>${h(item.title || item.kind || "结果")}</strong>
|
||||
<p>${h(item.text || "")}</p>
|
||||
</article>
|
||||
`).join("")}
|
||||
</div>
|
||||
${results.map((item) => `
|
||||
<article class="result-card">
|
||||
<strong>${h(item.title || item.kind || "结果")}</strong>
|
||||
<p>${h(item.text || "")}</p>
|
||||
</article>
|
||||
`).join("")}
|
||||
`;
|
||||
`);
|
||||
}
|
||||
|
||||
function renderGraph(payload) {
|
||||
|
|
@ -125,7 +124,6 @@ function renderGraph(payload) {
|
|||
if (!nodes.length) {
|
||||
graphSvg.innerHTML = "";
|
||||
renderInspector(empty("当前没有可显示的图谱数据"));
|
||||
relatedSearch.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -409,19 +407,29 @@ function renderGraph(payload) {
|
|||
</div>`;
|
||||
}
|
||||
renderInspector(`
|
||||
<div class="detail-card">
|
||||
<div class="detail-section">
|
||||
<p class="eyebrow">${h(node.kind)}</p>
|
||||
<h3>${h(node.label)}</h3>
|
||||
${body}
|
||||
</div>
|
||||
${related.map((edge) => `
|
||||
<article class="result-card">
|
||||
<strong>${h(edge.source)} → ${h(edge.target)}</strong>
|
||||
<p>${h(edge.fact || edge.description || edge.predicate || "")}</p>
|
||||
</article>
|
||||
`).join("")}
|
||||
<div class="detail-section">
|
||||
<p class="eyebrow">Relations</p>
|
||||
${related.length ? related.map((edge) => `
|
||||
<article class="result-card">
|
||||
<strong>${h(edge.source)} → ${h(edge.target)}</strong>
|
||||
<p>${h(edge.fact || edge.description || edge.predicate || "")}</p>
|
||||
</article>
|
||||
`).join("") : `<div class="empty-state">没有关联关系</div>`}
|
||||
</div>
|
||||
`);
|
||||
loadRelated(node.label).catch(() => relatedSearch.innerHTML = empty("相关检索加载失败"));
|
||||
loadRelated(node.label).catch(() => {
|
||||
detailPanel.insertAdjacentHTML("beforeend", `
|
||||
<div class="detail-section">
|
||||
<p class="eyebrow">Related</p>
|
||||
<div class="empty-state">相关检索加载失败</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -432,7 +440,7 @@ function renderGraph(payload) {
|
|||
line?.classList.add("active");
|
||||
const edge = edges.find((item) => item.id === el.dataset.edgeId);
|
||||
renderInspector(`
|
||||
<div class="detail-card">
|
||||
<div class="detail-section">
|
||||
<p class="eyebrow">Edge</p>
|
||||
<h3>${h(edge.source)} → ${h(edge.target)}</h3>
|
||||
<p>${h(edge.fact || edge.description || "暂无补充描述")}</p>
|
||||
|
|
@ -444,7 +452,14 @@ function renderGraph(payload) {
|
|||
</div>
|
||||
</div>
|
||||
`);
|
||||
loadRelated(`${edge.source} ${edge.predicate} ${edge.target}`).catch(() => relatedSearch.innerHTML = empty("相关检索加载失败"));
|
||||
loadRelated(`${edge.source} ${edge.predicate} ${edge.target}`).catch(() => {
|
||||
detailPanel.insertAdjacentHTML("beforeend", `
|
||||
<div class="detail-section">
|
||||
<p class="eyebrow">Related</p>
|
||||
<div class="empty-state">相关检索加载失败</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -514,4 +529,4 @@ graphForm?.addEventListener("submit", (event) => {
|
|||
});
|
||||
|
||||
loadGraphKinds().catch(() => {});
|
||||
fetchGraph().catch((error) => renderInspector(empty(`图谱加载失败: ${error}`)));
|
||||
fetchGraph().catch((error) => renderInspector(empty(`图谱加载失败: ${error}`)));
|
||||
|
|
@ -1,977 +0,0 @@
|
|||
:root {
|
||||
--primary: #5d67f5;
|
||||
--primary-2: #7f8bff;
|
||||
--primary-soft: #edf1ff;
|
||||
--accent: #53c2da;
|
||||
--bg: #f5f7ff;
|
||||
--bg-2: #fbfcff;
|
||||
--panel: rgba(255, 255, 255, 0.9);
|
||||
--panel-strong: rgba(255, 255, 255, 0.96);
|
||||
--border: rgba(212, 221, 247, 0.95);
|
||||
--text: #22264d;
|
||||
--muted: #68709d;
|
||||
--danger: #b3261e;
|
||||
--success: #11693c;
|
||||
--shadow: 0 12px 28px rgba(73, 81, 141, 0.08);
|
||||
--shadow-sm: 0 6px 16px rgba(73, 81, 141, 0.06);
|
||||
--radius-xl: 20px;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 12px;
|
||||
--radius-sm: 10px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 10% 10%, rgba(126, 186, 255, 0.16), transparent 24%),
|
||||
radial-gradient(circle at 88% 14%, rgba(132, 121, 255, 0.12), transparent 22%),
|
||||
linear-gradient(135deg, #f8faff 0%, var(--bg) 55%, var(--bg-2) 100%);
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
button, input, textarea { font: inherit; }
|
||||
|
||||
.shell {
|
||||
display: grid;
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
min-height: 100vh;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.sidebar, .panel, .detail-modal::backdrop {
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, rgba(236, 243, 255, 0.92), rgba(255, 255, 255, 0.8));
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
||||
}
|
||||
|
||||
.brand-kicker, .eyebrow {
|
||||
margin: 0 0 3px;
|
||||
color: var(--primary);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.brand h1, .panel h3, .dialog-head h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.brand h1 { font-size: 18px; }
|
||||
|
||||
.nav {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.active {
|
||||
color: var(--primary);
|
||||
border-color: rgba(109, 123, 255, 0.16);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.side-card, .panel {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.panel { padding: 14px; }
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel h3 { font-size: 17px; }
|
||||
|
||||
.sidebar-shortcuts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.pill-link, .chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pill-link {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.chip {
|
||||
background: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.chip.status-done, .chip.status-completed { background: #edfdf4; color: var(--success); }
|
||||
.chip.status-pending, .chip.status-todo { background: #fff8e7; color: #b8860b; }
|
||||
.chip.status-in_progress, .chip.status-active { background: #e8f4fd; color: #4a90d9; }
|
||||
.chip.status-blocked { background: #fff4f2; color: var(--danger); }
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.main-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(134, 144, 255, 0.12), transparent 28%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 255, 0.96));
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.main-toolbar h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.main-toolbar-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn, .icon-btn {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
||||
box-shadow: 0 8px 18px rgba(93, 103, 245, 0.18);
|
||||
}
|
||||
|
||||
.btn:hover, .icon-btn:hover { transform: translateY(-1px); }
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.68;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
color: var(--primary);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.stats-grid, .content-grid, .workspace-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
|
||||
.highlight-card {
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--panel-strong);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.highlight-card .hc-bar {
|
||||
height: 4px;
|
||||
background: var(--card-accent);
|
||||
}
|
||||
|
||||
.highlight-card .eyebrow {
|
||||
padding: 12px 14px 0;
|
||||
}
|
||||
|
||||
.highlight-card strong {
|
||||
display: block;
|
||||
margin: 4px 0 2px;
|
||||
padding: 0 14px;
|
||||
font-size: 26px;
|
||||
color: var(--card-accent);
|
||||
}
|
||||
|
||||
.highlight-card p:last-child {
|
||||
padding: 0 14px 14px;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: minmax(330px, 1.1fr) minmax(340px, 1fr) minmax(220px, 0.72fr);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.search-box, .import-form, .import-fieldset {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.import-fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.import-fieldset:disabled { opacity: 0.6; }
|
||||
|
||||
.search-box input, .graph-controls input, textarea, input[type="file"] {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
padding: 9px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 11px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 138px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.check-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-box {
|
||||
margin-top: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-box[data-kind="error"] {
|
||||
color: var(--danger);
|
||||
background: #fff4f2;
|
||||
}
|
||||
|
||||
.status-box[data-kind="success"] {
|
||||
color: var(--success);
|
||||
background: #edfdf4;
|
||||
}
|
||||
|
||||
.progress-list, .search-results, .mini-stats, .card-list, .list-stack, .related-search {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.progress-item, .mini-stat, .card, .list-item, .result-card, .detail-card {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
gap: 8px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.progress-index {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mini-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.ms-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
background: color-mix(in srgb, var(--stat-color) 14%, transparent);
|
||||
color: var(--stat-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ms-body strong {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.ms-body p {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.mini-stat strong, .card h4, .list-item strong, .result-card strong {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card { cursor: pointer; }
|
||||
|
||||
.card:hover, .result-card:hover, .list-item:hover {
|
||||
border-color: rgba(120, 132, 255, 0.34);
|
||||
}
|
||||
|
||||
.content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
|
||||
/* ── Meeting card ── */
|
||||
|
||||
.meeting-card {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.meeting-card:hover {
|
||||
border-color: rgba(120, 132, 255, 0.34);
|
||||
}
|
||||
|
||||
.mc-date {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
background: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.mc-body h4 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mc-body p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── List item with priority dot ── */
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.li-priority {
|
||||
flex-shrink: 0;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--pri-color);
|
||||
}
|
||||
|
||||
.li-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.li-body strong {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.li-body p {
|
||||
margin: 0 0 6px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ── Metric card ── */
|
||||
|
||||
.metric-card {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.mc-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.mc-head strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mc-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.metric-card p {
|
||||
margin: 0 0 8px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.mc-bar-track {
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(212, 221, 247, 0.5);
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mc-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--primary), var(--primary-2));
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
/* ── Series card ── */
|
||||
|
||||
.series-card {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.sc-count {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.sc-body strong {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sc-body p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ── Unified Import / Search panel ── */
|
||||
|
||||
.unified-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.unified-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 12px;
|
||||
padding: 3px;
|
||||
border-radius: 11px;
|
||||
background: rgba(212, 221, 247, 0.3);
|
||||
}
|
||||
|
||||
.unified-tab {
|
||||
flex: 1;
|
||||
padding: 7px 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.unified-tab.active {
|
||||
background: #fff;
|
||||
color: var(--primary);
|
||||
box-shadow: 0 2px 6px rgba(73, 81, 141, 0.1);
|
||||
}
|
||||
|
||||
.unified-tab:hover:not(.active) {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.unified-pane.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ── Result card with kind badge ── */
|
||||
|
||||
.result-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rc-kind {
|
||||
display: inline-block;
|
||||
padding: 1px 7px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
background: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 16px 14px;
|
||||
text-align: center;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-modal {
|
||||
width: min(820px, calc(100vw - 24px));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.detail-modal::backdrop {
|
||||
background: rgba(37, 44, 78, 0.28);
|
||||
}
|
||||
|
||||
.dialog-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 16px 16px 6px;
|
||||
}
|
||||
|
||||
.dialog-meta { padding: 0 16px 6px; color: var(--muted); }
|
||||
|
||||
.dialog-content {
|
||||
margin: 0;
|
||||
padding: 0 16px 16px;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Consolas", "Courier New", monospace;
|
||||
max-height: 60vh;
|
||||
overflow: auto;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
background: rgba(242, 245, 255, 0.92);
|
||||
color: var(--primary);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ── Graph page ── */
|
||||
|
||||
.graph-shell {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.graph-shell .sidebar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.graph-shell .main {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.graph-shell .graph-layout {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.graph-shell .graph-layout .panel {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.graph-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.graph-stage-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-stage {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(251, 253, 255, 0.96), rgba(241, 246, 255, 0.94)),
|
||||
radial-gradient(circle at center, rgba(133, 196, 255, 0.08), transparent 36%);
|
||||
}
|
||||
|
||||
#graphSvg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-panel .detail-card,
|
||||
.detail-panel .related-search {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
flex-shrink: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.detail-card strong {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.related-search {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.related-search .result-card {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ── Graph toolbar ── */
|
||||
|
||||
.graph-toolbar { padding: 8px 12px; }
|
||||
|
||||
.graph-controls {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graph-controls .search-input {
|
||||
flex: 1;
|
||||
min-height: 30px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.graph-controls label.field-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.graph-controls label.field-label input {
|
||||
width: 44px;
|
||||
min-height: 26px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.graph-controls .btn {
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.graph-toolbar-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.graph-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.graph-type-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px 10px;
|
||||
}
|
||||
|
||||
.graph-type-filter label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.graph-type-filter label input {
|
||||
margin: 0;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.graph-meta { font-size: 11px; color: var(--muted); }
|
||||
|
||||
/* ── Graph nodes & edges ── */
|
||||
|
||||
.graph-node { cursor: pointer; }
|
||||
|
||||
.graph-node circle {
|
||||
stroke: rgba(255, 255, 255, 0.85);
|
||||
stroke-width: 2;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
|
||||
.graph-node--meeting circle { fill: #4a90d9; }
|
||||
.graph-node--episode circle { fill: #34c759; }
|
||||
.graph-node--entity circle { fill: var(--accent); }
|
||||
.graph-node--fact circle { fill: #ff9500; }
|
||||
|
||||
.graph-node:hover circle { filter: brightness(1.2); }
|
||||
|
||||
.graph-node text {
|
||||
font-size: 11px;
|
||||
fill: var(--text);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.graph-edge {
|
||||
stroke: rgba(120, 136, 194, 0.42);
|
||||
stroke-width: 1.6;
|
||||
cursor: pointer;
|
||||
transition: stroke 0.15s, stroke-width 0.15s;
|
||||
}
|
||||
|
||||
.edge-wrap:hover .graph-edge {
|
||||
stroke: rgba(120, 136, 194, 0.7);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.graph-edge.active {
|
||||
stroke: var(--primary);
|
||||
stroke-width: 2.4;
|
||||
}
|
||||
|
||||
.edge-wrap text {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* ── Legend ── */
|
||||
|
||||
.legend { font-size: 11px; color: var(--muted); }
|
||||
|
||||
.legend-dot {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.legend-dot.meeting { background: #4a90d9; }
|
||||
.legend-dot.episode { background: #34c759; }
|
||||
.legend-dot.entity { background: var(--accent); }
|
||||
.legend-dot.fact { background: #ff9500; }
|
||||
|
||||
.graph-shell .sidebar {
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.graph-shell .sidebar .legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
font-size: 11px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.graph-shell .sidebar .legend .eyebrow {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* ── Graph controls overlay ── */
|
||||
|
||||
.zoom-reset-btn, .pause-btn {
|
||||
font-size: 11px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.zoom-hint {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
.shell, .graph-shell, .dashboard-grid, .content-grid, .graph-layout, .stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar { order: 2; }
|
||||
|
||||
.graph-shell { height: auto; overflow: auto; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.shell, .graph-shell {
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sidebar, .panel { border-radius: 18px; }
|
||||
|
||||
.search-box { grid-template-columns: 1fr; }
|
||||
|
||||
.graph-stage { min-height: 250px; }
|
||||
|
||||
.graph-controls { flex-wrap: wrap; }
|
||||
|
||||
.graph-controls .search-input { min-width: 100%; }
|
||||
}
|
||||
|
|
@ -3,11 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Neo4j Graph Explorer</title>
|
||||
<link rel="stylesheet" href="/styles.css">
|
||||
<title>图谱浏览 — Meeting Memory</title>
|
||||
<link rel="stylesheet" href="/static_v2/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell graph-shell">
|
||||
<!-- ====== Sidebar ====== -->
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<div class="brand-mark">G</div>
|
||||
|
|
@ -18,12 +19,12 @@
|
|||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-link" href="/index.html">总览面板</a>
|
||||
<a class="nav-link active" href="/graph.html">图谱浏览</a>
|
||||
<a class="nav-link" href="/">总览面板</a>
|
||||
<a class="nav-link active" href="/graph">图谱浏览</a>
|
||||
</nav>
|
||||
|
||||
<div class="legend">
|
||||
<p class="eyebrow" style="margin-bottom:6px">图例</p>
|
||||
<p class="eyebrow">图例</p>
|
||||
<span><i class="legend-dot meeting"></i>会议</span>
|
||||
<span><i class="legend-dot episode"></i>片段</span>
|
||||
<span><i class="legend-dot entity"></i>实体</span>
|
||||
|
|
@ -31,12 +32,20 @@
|
|||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- ====== Main ====== -->
|
||||
<main class="main">
|
||||
<div class="graph-toolbar panel">
|
||||
<!-- Graph Toolbar -->
|
||||
<div class="panel graph-toolbar">
|
||||
<form class="graph-controls" id="graphSearchForm">
|
||||
<input id="graphQueryInput" type="text" placeholder="搜索节点名称或关键词…" class="search-input">
|
||||
<label class="field-label">节点 <input id="graphNodeLimit" type="number" min="10" max="200" step="10" value="60"></label>
|
||||
<label class="field-label">关系 <input id="graphEdgeLimit" type="number" min="10" max="300" step="10" value="120"></label>
|
||||
<label class="field-label">
|
||||
节点
|
||||
<input id="graphNodeLimit" type="number" min="10" max="200" step="10" value="60">
|
||||
</label>
|
||||
<label class="field-label">
|
||||
关系
|
||||
<input id="graphEdgeLimit" type="number" min="10" max="300" step="10" value="120">
|
||||
</label>
|
||||
<button class="btn" type="submit">更新</button>
|
||||
</form>
|
||||
<div class="graph-toolbar-row">
|
||||
|
|
@ -47,18 +56,18 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Graph Layout -->
|
||||
<div class="graph-layout">
|
||||
<!-- Graph Stage -->
|
||||
<div class="panel graph-stage-panel">
|
||||
<div class="graph-stage" id="graphStage">
|
||||
<svg id="graphSvg" viewBox="0 0 960 640" preserveAspectRatio="xMidYMid meet"></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel detail-panel">
|
||||
<div class="detail-card" id="graphDetail">
|
||||
<div class="empty-state">点击节点或关系查看详情</div>
|
||||
</div>
|
||||
<div class="related-search" id="relatedSearch"></div>
|
||||
<!-- Detail Panel -->
|
||||
<div class="panel detail-panel" id="detailPanel">
|
||||
<div class="empty-state">点击节点或关系查看详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -66,4 +75,4 @@
|
|||
|
||||
<script src="/graph.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -3,11 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meeting Memory Console</title>
|
||||
<link rel="stylesheet" href="/styles.css">
|
||||
<title>会议记忆中枢 — Meeting Memory</title>
|
||||
<link rel="stylesheet" href="/static_v2/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<!-- ====== Sidebar ====== -->
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<div class="brand-mark">M</div>
|
||||
|
|
@ -18,18 +19,20 @@
|
|||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="/index.html">总览面板</a>
|
||||
<a class="nav-link" href="/graph.html">图谱浏览</a>
|
||||
<a class="nav-link active" href="/">总览面板</a>
|
||||
<a class="nav-link" href="/graph">图谱浏览</a>
|
||||
</nav>
|
||||
|
||||
<div class="side-card sidebar-shortcuts">
|
||||
<div class="sidebar-shortcuts">
|
||||
<a class="pill-link" href="#import-panel">导入会议</a>
|
||||
<a class="pill-link" href="#search-panel">知识检索</a>
|
||||
<a class="pill-link" href="/graph.html">图谱页</a>
|
||||
<a class="pill-link" href="/graph">图谱页</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- ====== Main ====== -->
|
||||
<main class="main">
|
||||
<!-- Toolbar -->
|
||||
<div class="main-toolbar">
|
||||
<div>
|
||||
<p class="eyebrow">Dashboard</p>
|
||||
|
|
@ -40,8 +43,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Highlight Cards -->
|
||||
<section class="stats-grid" id="highlightGrid"></section>
|
||||
|
||||
<!-- Unified Panel: Import / Search / Stats -->
|
||||
<section class="panel unified-panel">
|
||||
<div class="unified-tabs">
|
||||
<button class="unified-tab active" data-tab="import">导入</button>
|
||||
|
|
@ -49,6 +54,7 @@
|
|||
<button class="unified-tab" data-tab="stats">统计</button>
|
||||
</div>
|
||||
|
||||
<!-- Import Pane -->
|
||||
<div class="unified-pane" id="unifiedImport">
|
||||
<form class="import-form" id="importForm">
|
||||
<fieldset id="importFieldset" class="import-fieldset">
|
||||
|
|
@ -73,6 +79,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Pane -->
|
||||
<div class="unified-pane hidden" id="unifiedSearch">
|
||||
<form class="search-box" id="searchForm">
|
||||
<input id="searchInput" type="text" placeholder="搜索会议主题、负责人、指标、关系事实...">
|
||||
|
|
@ -83,11 +90,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Pane -->
|
||||
<div class="unified-pane hidden" id="unifiedStats">
|
||||
<div class="mini-stats" id="statsList"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Grid -->
|
||||
<div class="content-grid">
|
||||
<section class="panel" id="meeting-list">
|
||||
<div class="panel-head">
|
||||
|
|
@ -124,6 +133,7 @@
|
|||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Meeting Detail Dialog -->
|
||||
<dialog class="detail-modal" id="meetingDialog">
|
||||
<div class="dialog-head">
|
||||
<div>
|
||||
|
|
@ -138,4 +148,4 @@
|
|||
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue