html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DiscussMemo + 表述处理系统（整合版V1）</title>
<!-- Tailwind CSS v3 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 统一的 Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
accent: '#0ea5e9',
neutral: '#f1f5f9',
'neutral-dark': '#334155',
success: '#22c55e',
warning: '#f59e0b',
danger: '#ef4444',
// 适配维度配色（万向/千行/百业）
universal: '#3b82f6', // 万向-蓝
industry: '#a855f7', // 千行-紫
business: '#22c55e', // 百业-绿
// 价值维度配色（学习/节约/安全）
learn: '#f59e0b', // 学习-黄
save: '#ef4444', // 节约-红
safe: '#10b981', // 安全-青
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'spin-slow': 'spin 3s linear infinite',
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.glass-effect {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.transition-all-300 {
transition: all 300ms ease-in-out;
}
.toast {
transform: translateY(100px);
opacity: 0;
transition: all 0.3s ease;
}
.toast.show {
transform: translateY(0);
opacity: 1;
}
.tour-tooltip {
z-index: 1000;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* 价值维度卡片样式 */
.value-card {
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 20px -8px rgba(0,0,0,0.15);
}
}
</style>
<style>
/* 自定义样式 */
.dashboard-sector {
transition: all 0.5s ease;
}
.dashboard-sector:hover {
filter: brightness(1.2);
transform: scale(1.02);
}
.content-block {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.content-block:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.content-block.dragging {
opacity: 0.5;
transform: scale(1.02);
}
.drop-zone {
min-height: 20px;
transition: all 0.2s ease;
}
.drop-zone.active {
background-color: rgba(59, 130, 246, 0.1);
min-height: 60px;
}
/* 仪表盘动画 */
@keyframes rotatePointer {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.dashboard-pointer {
animation: rotatePointer 20s linear infinite;
transform-origin: center bottom;
}
/* 脉冲动画 */
@keyframes pulse-ring {
0% { transform: scale(0.8); opacity: 0.8; }
80%, 100% { opacity: 0; transform: scale(2); }
}
.pulse-ring {
position: absolute;
border-radius: 50%;
animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
/* 代码定位模态框 */
.code-modal-content {
max-height: 70vh;
overflow-y: auto;
}
.code-line {
transition: background-color 0.2s ease;
}
.code-line.highlight {
background-color: rgba(245, 158, 11, 0.1);
border-left: 3px solid #f59e0b;
}
/* 三大核心模式样式标注 */
.mode-tag {
position: absolute;
top: 8px;
right: 8px;
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
color: white;
}
.mode-embed { /* 内嵌式赋能-学习 */
background-color: #22c55e;
}
.mode-external { /* 外挂式省力-节约 */
background-color: #f59e0b;
}
.mode-inner { /* 中蕴式省心-安全 */
background-color: #a855f7;
}
.mode-mixed { /* PIN架构混合模式 */
background: linear-gradient(45deg, #3b82f6, #a855f7, #22c55e);
}
/* 三层嵌套架构动画效果 */
.architecture-card {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.architecture-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.5s ease;
}
.architecture-card:hover::before {
left: 100%;
}
.architecture-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* PIN结连接线动画 */
.pin-connection {
position: relative;
overflow: hidden;
}
.pin-connection::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, #3b82f6, #a855f7, #22c55e);
animation: flowLine 3s ease-in-out infinite;
}
@keyframes flowLine {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
/* 适配维度标签样式 */
.adapt-tag {
font-size: 11px;
padding: 1px 5px;
border-radius: 3px;
color: white;
}
.adapt-universal { background-color: #3b82f6; } /* 万向 */
.adapt-industry { background-color: #a855f7; } /* 千行 */
.adapt-business { background-color: #22c55e; } /* 百业 */
</style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="text-primary text-2xl">
<i class="fa fa-comments-o"></i>
</div>
<h1 class="text-xl font-bold text-primary">DiscussMemo <span class="text-xs text-gray-500">V4</span></h1>
</div>
<div class="flex items-center space-x-4">
<!-- 数据备份按钮（中蕴式安全） -->
<button id="backup-btn" class="p-2 rounded-full hover:bg-gray-100 transition-all-300 relative">
<i class="fa fa-database text-gray-600"></i>
<span class="mode-tag mode-inner">中蕴式</span>
</button>
<!-- 配置管理按钮（外挂式省力） -->
<button id="config-btn" class="p-2 rounded-full hover:bg-gray-100 transition-all-300 relative" data-code-location="配置管理模块 - JS第2800行">
<i class="fa fa-cog text-gray-600"></i>
<span class="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-accent text-white text-xs flex items-center justify-center">
新
</span>
<span class="mode-tag mode-external">外挂式</span>
</button>
<!-- 代码定位按钮（开发模式/外挂式） -->
<button id="dev-mode-btn" class="p-2 rounded-full hover:bg-gray-100 transition-all-300">
<i class="fa fa-code text-gray-600"></i>
<span class="mode-tag mode-external">外挂式</span>
</button>
<!-- 主题切换（中蕴式） -->
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-all-300">
<i class="fa fa-moon-o text-gray-600"></i>
<span class="mode-tag mode-inner">中蕴式</span>
</button>
<!-- 帮助按钮（内嵌式学习） -->
<button id="help-button" class="p-2 rounded-full hover:bg-gray-100 transition-all-300">
<i class="fa fa-question-circle text-gray-600"></i>
<span class="mode-tag mode-embed">内嵌式</span>
</button>
<div class="relative">
<button id="user-menu-button" class="flex items-center space-x-2 p-2 rounded-full hover:bg-gray-100 transition-all-300">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
<i class="fa fa-user"></i>
</div>
<span class="mode-tag mode-inner">中蕴式</span>
</button>
</div>
</div>
</div>
</header>
<!-- 主内容区 -->
<main class="flex-grow flex">
<!-- 左侧导航面板 -->
<aside id="sidebar" class="w-64 bg-white shadow-sm border-r border-gray-200 flex flex-col transition-all duration-300 ease-in-out">
<!-- 搜索框（外挂式省力） -->
<div class="p-4 border-b border-gray-200">
<div class="relative">
<input type="text" id="search-input" placeholder="搜索讨论..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" data-code-location="搜索功能 - JS第1500行">
<i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
<!-- 提示图标（内嵌式学习） -->
<div class="absolute right-3 top-3 text-warning" title="支持关键词、标签、分类搜索">
<i class="fa fa-lightbulb-o"></i>
<span class="mode-tag mode-embed">内嵌式</span>
</div>
</div>
</div>
<!-- 分类筛选（外挂式+内嵌式） -->
<div class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center mb-2">
<h3 class="text-sm font-medium text-gray-500">分类筛选</h3>
<button id="edit-categories-btn" class="text-xs text-primary hover:underline" data-code-location="分类管理 - JS第2850行">
编辑
</button>
</div>
<div class="space-y-1" id="categories-list">
<!-- 分类选项将通过JS动态生成（支持自定义/外挂式） -->
</div>
<!-- 添加新分类（外挂式） -->
<div class="mt-3 flex">
<input type="text" id="new-category-input" placeholder="添加新分类..." class="flex-grow px-3 py-1.5 rounded-l-md border border-gray-300 focus:outline-none focus:ring-1 focus:ring-primary text-sm">
<button id="add-category-btn" class="bg-primary text-white px-3 py-1.5 rounded-r-md text-sm hover:bg-primary/90" data-code-location="添加分类 - JS第2880行">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- 讨论列表（中蕴式数据存储） -->
<div class="flex-grow overflow-y-auto scrollbar-hide">
<div class="p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="text-sm font-medium text-gray-500">我的讨论</h3>
<button id="new-discussion-btn" class="text-primary hover:text-primary-dark" data-code-location="新建讨论 - JS第800行">
<i class="fa fa-plus-circle"></i>
</button>
</div>
<div id="discussion-list" class="space-y-2">
<!-- 讨论列表项将通过JS动态生成（中蕴式数据存储） -->
<div class="text-center py-8 text-gray-500" id="empty-discussion-msg">
<i class="fa fa-folder-open-o text-3xl mb-2"></i>
<p>暂无讨论记录</p>
<p class="text-sm">点击"新建讨论"开始记录</p>
</div>
</div>
</div>
</div>
<!-- 底部操作区（仪表盘/内嵌式学习） -->
<div class="p-4 border-t border-gray-200">
<button id="dashboard-btn" class="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-all-300" data-code-location="仪表盘功能 - JS第1800行">
<i class="fa fa-tachometer"></i>
<span>仪表盘</span>
<span class="mode-tag mode-embed">内嵌式</span>
</button>
</div>
</aside>
<!-- 右侧内容区 -->
<section id="content-area" class="flex-grow overflow-y-auto bg-gray-50">
<!-- 仪表盘视图（内嵌式学习+数据统计/中蕴式） -->
<div id="dashboard-view" class="container mx-auto px-4 py-8">
<div class="mb-8 flex justify-between items-center">
<div>
<h2 class="text-2xl font-bold text-gray-800 mb-2">讨论仪表盘</h2>
<p class="text-gray-600">概览您的所有讨论和进展（内嵌式学习+中蕴式数据+外挂式配置）</p>
</div>
<!-- 代码定位按钮（外挂式） -->
<button class="code-location-btn bg-gray-100 text-gray-700 px-3 py-1 rounded-md text-sm flex items-center hover:bg-gray-200" data-code-location="仪表盘渲染 - JS第1850行">
<i class="fa fa-code mr-1"></i> 查看代码
<span class="mode-tag mode-external">外挂式</span>
</button>
</div>
<!-- 新增：价值维度统计卡片（落地三层设计理念） -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<!-- 内嵌式赋能 - 学习 -->
<div class="value-card bg-white rounded-xl shadow-sm p-6 border border-gray-100 relative border-l-4 border-learn">
<span class="mode-tag mode-embed">内嵌式</span>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">学习维度（万向 通-通 境 顿）</p>
<h3 id="learn-stats" class="text-2xl font-bold mt-1">0</h3>
<p class="text-xs text-gray-500 mt-1">提示词使用/帮助查看次数</p>
</div>
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-learn">
<i class="fa fa-graduation-cap text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs text-gray-500">
<span class="px-2 py-1 bg-yellow-50 rounded-full mr-2">通：操作易懂</span>
<span class="px-2 py-1 bg-yellow-50 rounded-full mr-2">境：沉浸式</span>
<span class="px-2 py-1 bg-yellow-50 rounded-full">顿：快速顿悟</span>
</div>
</div>
<!-- 外挂式省力 - 节约 -->
<div class="value-card bg-white rounded-xl shadow-sm p-6 border border-gray-100 relative border-l-4 border-save">
<span class="mode-tag mode-external">外挂式</span>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">效率维度（千行 别-性 行 渐）</p>
<h3 id="save-stats" class="text-2xl font-bold mt-1">0</h3>
<p class="text-xs text-gray-500 mt-1">快捷键/一键操作次数</p>
</div>
<div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-save">
<i class="fa fa-bolt text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs text-gray-500">
<span class="px-2 py-1 bg-red-50 rounded-full mr-2">别：功能区分</span>
<span class="px-2 py-1 bg-red-50 rounded-full mr-2">行：一键操作</span>
<span class="px-2 py-1 bg-red-50 rounded-full">渐：渐进优化</span>
</div>
</div>
<!-- 中蕴式省心 - 安全 -->
<div class="value-card bg-white rounded-xl shadow-sm p-6 border border-gray-100 relative border-l-4 border-safe">
<span class="mode-tag mode-inner">中蕴式</span>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">安全维度（百业 藏-量 果 密）</p>
<h3 id="safe-stats" class="text-2xl font-bold mt-1">0</h3>
<p class="text-xs text-gray-500 mt-1">备份/自动保存次数</p>
</div>
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-safe">
<i class="fa fa-shield text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs text-gray-500">
<span class="px-2 py-1 bg-green-50 rounded-full mr-2">藏：本地存储</span>
<span class="px-2 py-1 bg-green-50 rounded-full mr-2">量：成果量化</span>
<span class="px-2 py-1 bg-green-50 rounded-full">密：隐私安全</span>
</div>
</div>
</div>
<!-- 统计卡片（中蕴式-数据安全/量化） -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 relative">
<span class="mode-tag mode-inner">中蕴式</span>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">总讨论数</p>
<h3 id="total-discussions" class="text-2xl font-bold mt-1">0</h3>
</div>
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary">
<i class="fa fa-comments text-xl"></i>
</div>
</div>
<!-- 提示信息（内嵌式） -->
<div class="mt-2 text-xs text-gray-500 flex items-center">
<i class="fa fa-info-circle mr-1 text-primary"></i>
<span>包含所有分类的讨论记录</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 relative">
<span class="mode-tag mode-inner">中蕴式</span>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">待办事项</p>
<h3 id="pending-todos" class="text-2xl font-bold mt-1">0</h3>
</div>
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-warning">
<i class="fa fa-tasks text-xl"></i>
</div>
</div>
<div class="mt-2 text-xs text-gray-500 flex items-center">
<i class="fa fa-info-circle mr-1 text-primary"></i>
<span>所有讨论中的未完成任务</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 relative">
<span class="mode-tag mode-inner">中蕴式</span>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">已完成决策</p>
<h3 id="completed-decisions" class="text-2xl font-bold mt-1">0</h3>
</div>
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-success">
<i class="fa fa-check-circle text-xl"></i>
</div>
</div>
<div class="mt-2 text-xs text-gray-500 flex items-center">
<i class="fa fa-info-circle mr-1 text-primary"></i>
<span>已确认的重要决策</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 relative">
<span class="mode-tag mode-inner">中蕴式</span>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">最近更新</p>
<h3 id="last-updated" class="text-2xl font-bold mt-1">-</h3>
</div>
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fa fa-clock-o text-xl"></i>
</div>
</div>
<div class="mt-2 text-xs text-gray-500 flex items-center">
<i class="fa fa-info-circle mr-1 text-primary"></i>
<span>最后一次编辑的讨论时间</span>
</div>
</div>
</div>
<!-- 仪表盘图表（内嵌式学习+中蕴式数据） -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- 分类分布 -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 lg:col-span-1 relative">
<span class="mode-tag mode-embed">内嵌式</span>
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">分类分布</h3>
<button class="code-location-btn bg-gray-100 text-gray-700 px-2 py-1 rounded-md text-xs flex items-center hover:bg-gray-200" data-code-location="分类分布图表 - JS第2000行">
<i class="fa fa-code mr-1"></i> 代码
</button>
</div>
<div class="relative h-64">
<div class="absolute inset-0 flex items-center justify-center">
<div class="relative w-48 h-48">
<!-- 仪表盘扇区 -->
<div id="dashboard-sectors" class="relative w-full h-full">
<!-- 扇区将通过JS动态生成 -->
</div>
<!-- 中心指针 -->
<div class="absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2 w-1 h-20 bg-gray-400 dashboard-pointer">
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-primary border-4 border-white"></div>
</div>
<!-- 中心文字 -->
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-2xl font-bold text-primary" id="completion-rate">65%</span>
<span class="text-xs text-gray-500">完成率</span>
</div>
</div>
</div>
</div>
<!-- 图例 -->
<div class="mt-4 grid grid-cols-2 gap-2" id="category-legend">
<!-- 图例将通过JS动态生成 -->
</div>
</div>
<!-- 最近讨论（中蕴式数据） -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 lg:col-span-2 relative">
<span class="mode-tag mode-inner">中蕴式</span>
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">最近讨论</h3>
<button class="code-location-btn bg-gray-100 text-gray-700 px-2 py-1 rounded-md text-xs flex items-center hover:bg-gray-200" data-code-location="最近讨论渲染 - JS第2100行">
<i class="fa fa-code mr-1"></i> 代码
</button>
</div>
<div class="space-y-4">
<div id="recent-discussions" class="space-y-3">
<!-- 最近讨论将通过JS动态生成 -->
</div>
</div>
</div>
</div>
<!-- 三层嵌套符号学架构展示 -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 relative">
<span class="mode-tag mode-mixed">PIN架构</span>
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">三层嵌套符号学架构</h3>
<button id="edit-architecture-btn" class="text-xs text-primary hover:underline" data-code-location="架构管理 - JS第2950行">
编辑架构
</button>
</div>
<!-- PIN结符号学三域 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-700 mb-3">PIN结符号学结构</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- 理科：PIN结括号设备 -->
<div class="border border-blue-200 rounded-lg p-4 bg-blue-50">
<div class="flex items-center mb-2">
<i class="fa fa-calculator text-blue-600 mr-2"></i>
<h5 class="font-medium text-blue-800">理科：PIN结括号设备</h5>
</div>
<p class="text-sm text-gray-600 mb-2">力学性 × 数学性 = 共存唯一</p>
<div class="text-xs space-y-1">
<p><span class="font-medium">原理：</span>自然双重决定论</p>
<p><span class="font-medium">特征：</span>存在出双入对 · 媒介性</p>
</div>
</div>
<!-- 工科：PIN节工具箱 -->
<div class="border border-purple-200 rounded-lg p-4 bg-purple-50">
<div class="flex items-center mb-2">
<i class="fa fa-tools text-purple-600 mr-2"></i>
<h5 class="font-medium text-purple-800">工科：PIN节工具箱</h5>
</div>
<p class="text-sm text-gray-600 mb-2">经验常识 + 科学方法 = 互补同一</p>
<div class="text-xs space-y-1">
<p><span class="font-medium">原理：</span>因果逻辑决定论</p>
<p><span class="font-medium">特征：</span>meaning/purpose 相关性</p>
</div>
</div>
<!-- 文科："拼"块仪表盘 -->
<div class="border border-green-200 rounded-lg p-4 bg-green-50">
<div class="flex items-center mb-2">
<i class="fa fa-puzzle-piece text-green-600 mr-2"></i>
<h5 class="font-medium text-green-800">文科：拼块仪表盘</h5>
</div>
<p class="text-sm text-gray-600 mb-2">两种独立性 + 对立统一 = 共情认识</p>
<div class="text-xs space-y-1">
<p><span class="font-medium">原理：</span>现实认识决定论</p>
<p><span class="font-medium">特征：</span>structure/definition/dictionary</p>
</div>
</div>
</div>
</div>
<!-- 三层次动态记录体系 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-700 mb-3">三层次动态记录体系</h4>
<div class="space-y-4">
<!-- 第一层次：文档模型层 -->
<div class="border border-orange-200 rounded-lg p-4 bg-orange-50">
<div class="flex items-center mb-3">
<i class="fa fa-file-text-o text-orange-600 mr-2"></i>
<h5 class="font-medium text-orange-800">第一层次：文档模型层</h5>
<span class="ml-2 text-xs bg-orange-200 text-orange-800 px-2 py-1 rounded-full">结构化定义</span>
</div>
<p class="text-sm text-gray-600 mb-3">文档的元数据定义、模板系统和组织结构</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="bg-white rounded p-3 border border-orange-100">
<h6 class="font-medium text-orange-700 mb-1">结构维度</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 层次化组织</li>
<li>• 自动编号</li>
<li>• 交叉引用</li>
</ul>
</div>
<div class="bg-white rounded p-3 border border-orange-100">
<h6 class="font-medium text-orange-700 mb-1">语义维度</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 语义标注</li>
<li>• 关系映射</li>
<li>• 概念网络</li>
</ul>
</div>
<div class="bg-white rounded p-3 border border-orange-100">
<h6 class="font-medium text-orange-700 mb-1">时序维度</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 时间追踪</li>
<li>• 变更记录</li>
<li>• 历史对比</li>
</ul>
</div>
</div>
</div>
<!-- 第二层次：知识管理层 -->
<div class="border border-teal-200 rounded-lg p-4 bg-teal-50">
<div class="flex items-center mb-3">
<i class="fa fa-sitemap text-teal-600 mr-2"></i>
<h5 class="font-medium text-teal-800">第二层次：知识管理层</h5>
<span class="ml-2 text-xs bg-teal-200 text-teal-800 px-2 py-1 rounded-full">知识组织</span>
</div>
<p class="text-sm text-gray-600 mb-3">知识的组织、检索、关联和演化系统</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="bg-white rounded p-3 border border-teal-100">
<h6 class="font-medium text-teal-700 mb-1">知识组织</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 智能分类</li>
<li>• 自动标签</li>
<li>• 关联发现</li>
</ul>
</div>
<div class="bg-white rounded p-3 border border-teal-100">
<h6 class="font-medium text-teal-700 mb-1">知识检索</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 语义搜索</li>
<li>• 智能推荐</li>
<li>• 上下文理解</li>
</ul>
</div>
<div class="bg-white rounded p-3 border border-teal-100">
<h6 class="font-medium text-teal-700 mb-1">知识演化</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 版本管理</li>
<li>• 协作编辑</li>
<li>• 冲突解决</li>
</ul>
</div>
</div>
</div>
<!-- 第三层次：动态应用层 -->
<div class="border border-indigo-200 rounded-lg p-4 bg-indigo-50">
<div class="flex items-center mb-3">
<i class="fa fa-rocket text-indigo-600 mr-2"></i>
<h5 class="font-medium text-indigo-800">第三层次：动态应用层</h5>
<span class="ml-2 text-xs bg-indigo-200 text-indigo-800 px-2 py-1 rounded-full">智能应用</span>
</div>
<p class="text-sm text-gray-600 mb-3">智能化的知识应用和价值创造系统</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="bg-white rounded p-3 border border-indigo-100">
<h6 class="font-medium text-indigo-700 mb-1">智能处理</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 自动摘要</li>
<li>• 情感分析</li>
<li>• 关系挖掘</li>
</ul>
</div>
<div class="bg-white rounded p-3 border border-indigo-100">
<h6 class="font-medium text-indigo-700 mb-1">协作应用</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 多人协作</li>
<li>• 实时同步</li>
<li>• 任务分配</li>
</ul>
</div>
<div class="bg-white rounded p-3 border border-indigo-100">
<h6 class="font-medium text-indigo-700 mb-1">个性化服务</h6>
<ul class="text-xs text-gray-600 space-y-1">
<li>• 用户画像</li>
<li>• 智能推荐</li>
<li>• 效率优化</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 三套提示词系统 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-700 mb-3">三套提示词系统</h4>
<div class="space-y-4">
<!-- 明言-析取提示词 -->
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h5 class="font-medium text-gray-800">
<span class="inline-block w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
1. 明言 - 析取提示词
</h5>
<span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">显式表达</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
<div>
<p class="font-medium text-blue-700">语法 (Grammar)</p>
<p class="text-gray-600">专有名词适应</p>
<p class="text-xs">hover提示 · 命名法</p>
</div>
<div>
<p class="font-medium text-purple-700">语用 (Pragmatics)</p>
<p class="text-gray-600">普通单词适用</p>
<p class="text-xs">cover提示 · 分类学</p>
</div>
<div>
<p class="font-medium text-green-700">语义 (Semantics)</p>
<p class="text-gray-600">一般代词适配</p>
<p class="text-xs">gover提示 · 软件架构</p>
</div>
</div>
</div>
<!-- 暗示-合取关键词 -->
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h5 class="font-medium text-gray-800">
<span class="inline-block w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
2. 暗示 - 合取关键词
</h5>
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">隐含触发</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
<div>
<p class="font-medium text-purple-700">心动证明程序</p>
<p class="text-gray-600">心流(中心先动)-语言</p>
<p class="text-xs">概念认知层 · 触发机制</p>
</div>
<div>
<p class="font-medium text-blue-700">运动轨迹函数</p>
<p class="text-gray-600">溢出(顶部先活)-因果</p>
<p class="text-xs">数据处理层 · 轨迹分析</p>
</div>
<div>
<p class="font-medium text-green-700">行动角色谓词</p>
<p class="text-gray-600">涌现(根部先生)-现实</p>
<p class="text-xs">现实操作层 · 自然涌现</p>
</div>
</div>
</div>
<!-- 隐喻-双取主取主题词 -->
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h5 class="font-medium text-gray-800">
<span class="inline-block w-2 h-2 bg-green-500 rounded-full mr-2"></span>
3. 隐喻 - 双取主取主题词
</h5>
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">隐喻映射</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
<div>
<p class="font-medium text-green-700">顶级公理</p>
<p class="text-gray-600">集合元素依存</p>
<p class="text-xs">抽象元层 · 公理体系</p>
</div>
<div>
<p class="font-medium text-blue-700">根本方法</p>
<p class="text-gray-600">作用机制</p>
<p class="text-xs">实现方法层 · 机制设计</p>
</div>
<div>
<p class="font-medium text-purple-700">初始断言</p>
<p class="text-gray-600">范畴元件约束</p>
<p class="text-xs">具体应用层 · 约束定义</p>
</div>
</div>
</div>
</div>
</div>
<!-- 三层次动态记录体系仪表盘（基于原文修正） -->
<div class="mt-8 bg-white rounded-xl shadow-sm p-6 border border-gray-100">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">三层次动态记录体系（备忘→记录→日志）</h3>
<button id="refresh-recording-system-btn" class="text-xs text-primary hover:underline" data-code-location="三层次体系 - JS第4800行">
刷新数据
</button>
</div>
<!-- 三个层次的统计卡片 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- 第一层：备忘录→个人知识库 -->
<div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-6 border border-orange-200">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white">
<i class="fa fa-lightbulb-o"></i>
</div>
<span class="text-xs bg-orange-500 text-white px-2 py-1 rounded-full">个人知识库</span>
</div>
<h4 class="font-bold text-orange-900 mb-2">备忘录系统（原料仪表盘）</h4>
<p class="text-xs text-orange-700 mb-3">个人主观理解 · 随理解加深而更新</p>
<div class="space-y-2 text-sm text-orange-800">
<div class="flex justify-between">
<span>个人备忘:</span>
<span class="font-medium" id="personal-memos-count">0</span>
</div>
<div class="flex justify-between">
<span>待验证假设:</span>
<span class="font-medium" id="hypotheses-count">0</span>
</div>
<div class="flex justify-between">
<span>个人洞察:</span>
<span class="font-medium" id="insights-count">0</span>
</div>
</div>
</div>
<!-- 第二层：记录→共享知识库 -->
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6 border border-blue-200">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white">
<i class="fa fa-users"></i>
</div>
<span class="text-xs bg-blue-500 text-white px-2 py-1 rounded-full">共享知识库</span>
</div>
<h4 class="font-bold text-blue-900 mb-2">记录系统（成品标记包）</h4>
<p class="text-xs text-blue-700 mb-3">团队客观共识 · 随讨论进展而补充</p>
<div class="space-y-2 text-sm text-blue-800">
<div class="flex justify-between">
<span>决策日志:</span>
<span class="font-medium" id="decision-logs-count">0</span>
</div>
<div class="flex justify-between">
<span>共识记录:</span>
<span class="font-medium" id="consensus-records-count">0</span>
</div>
<div class="flex justify-between">
<span>状态标记:</span>
<span class="font-medium" id="status-markers-count">0</span>
</div>
</div>
</div>
<!-- 第三层：日志→笔记系统 -->
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-6 border border-green-200">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-white">
<i class="fa fa-cogs"></i>
</div>
<span class="text-xs bg-green-500 text-white px-2 py-1 rounded-full">笔记系统</span>
</div>
<h4 class="font-bold text-green-900 mb-2">日志系统（分析工具箱）</h4>
<p class="text-xs text-green-700 mb-3">系统自动追踪 · 随状态变化而追加</p>
<div class="space-y-2 text-sm text-green-800">
<div class="flex justify-between">
<span>加工日志:</span>
<span class="font-medium" id="processing-logs-count">0</span>
</div>
<div class="flex justify-between">
<span>分析工具:</span>
<span class="font-medium" id="analysis-tools-count">0</span>
</div>
<div class="flex justify-between">
<span>工作流日志:</span>
<span class="font-medium" id="workflow-logs-count">0</span>
</div>
</div>
</div>
</div>
<!-- 动态记录体系功能区 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<button class="recording-system-btn p-4 border border-gray-200 rounded-lg hover:border-orange-500 hover:bg-orange-50 transition-all-300" data-action="personal-memo">
<div class="text-center">
<i class="fa fa-sticky-note-o text-2xl text-orange-600 mb-2"></i>
<h5 class="font-medium text-gray-800">快速备忘</h5>
<p class="text-xs text-gray-600 mt-1">记录个人想法和灵感（原料收集）</p>
</div>
</button>
<button class="recording-system-btn p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-all-300" data-action="team-consensus">
<div class="text-center">
<i class="fa fa-handshake-o text-2xl text-blue-600 mb-2"></i>
<h5 class="font-medium text-gray-800">团队共识</h5>
<p class="text-xs text-gray-600 mt-1">记录团队决策和共识（成品标记）</p>
</div>
</button>
<button class="recording-system-btn p-4 border border-gray-200 rounded-lg hover:border-green-500 hover:bg-green-50 transition-all-300" data-action="process-log">
<div class="text-center">
<i class="fa fa-list-alt text-2xl text-green-600 mb-2"></i>
<h5 class="font-medium text-gray-800">加工分析</h5>
<p class="text-xs text-gray-600 mt-1">启动知识加工和分析工具（工具箱）</p>
</div>
</button>
</div>
<!-- 核心理念说明 -->
<div class="mt-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
<h5 class="font-medium text-gray-800 mb-3">核心理念：动态过程记录</h5>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-gray-600">
<div class="flex items-start">
<i class="fa fa-circle text-orange-500 text-xs mt-1 mr-2"></i>
<div>
<strong class="text-orange-700">备忘录（动态）</strong>：不是静态归档，而是随个人理解加深而更新的过程记录
</div>
</div>
<div class="flex items-start">
<i class="fa fa-circle text-blue-500 text-xs mt-1 mr-2"></i>
<div>
<strong class="text-blue-700">记录（动态）</strong>：不是静态归档，而是随讨论进展而补充的共识追踪
</div>
</div>
<div class="flex items-start">
<i class="fa fa-circle text-green-500 text-xs mt-1 mr-2"></i>
<div>
<strong class="text-green-700">日志（动态）</strong>：不是静态归档，而是随状态变化而追加的系统追踪
</div>
</div>
</div>
</div>
</div>
<!-- 三层价值表达提示词容器 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="prompts-container">
<!-- 提示词卡片将通过JS动态生成（支持自定义/内嵌式） -->
</div>
<!-- 添加新提示词（外挂式） -->
<div class="mt-6 p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-primary transition-all-300 relative" id="add-prompt-card">
<span class="mode-tag mode-external">外挂式</span>
<div class="text-center">
<i class="fa fa-plus-circle text-2xl text-gray-400 mb-2"></i>
<h4 class="font-medium text-gray-600">添加自定义提示词</h4>
<p class="text-sm text-gray-500 mt-1">创建适合您场景的讨论模板（适配千行百业）</p>
</div>
</div>
</div>
<!-- 三层次动态记录体系仪表盘 -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 mt-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-lg font-medium text-gray-800">三层次动态记录体系仪表盘</h3>
<button class="text-sm bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-all-300" onclick="renderDynamicRecordingDashboard()">
<i class="fa fa-refresh mr-1"></i> 刷新数据
</button>
</div>
<div id="dynamic-recording-dashboard">
<!-- 仪表盘内容将通过JavaScript动态渲染 -->
<div class="text-center py-8 text-gray-500">
<i class="fa fa-spin fa-spinner text-2xl mb-3"></i>
<p>正在加载三层次动态记录体系数据...</p>
</div>
</div>
<!-- 快速操作面板 -->
<div class="mt-6 pt-6 border-t border-gray-200">
<h4 class="font-medium text-gray-800 mb-3">快速操作</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<button onclick="showDocumentTemplates()" class="p-3 bg-orange-50 border border-orange-200 rounded-lg hover:bg-orange-100 transition-all-300">
<i class="fa fa-file-text-o text-orange-600 mr-2"></i>
<span class="text-sm">应用文档模板</span>
</button>
<button onclick="performBatchAnalysis()" class="p-3 bg-teal-50 border border-teal-200 rounded-lg hover:bg-teal-100 transition-all-300">
<i class="fa fa-sitemap text-teal-600 mr-2"></i>
<span class="text-sm">执行知识分析</span>
</button>
<button onclick="showAutomationSettings()" class="p-3 bg-indigo-50 border border-indigo-200 rounded-lg hover:bg-indigo-100 transition-all-300">
<i class="fa fa-cogs text-indigo-600 mr-2"></i>
<span class="text-sm">配置自动化</span>
</button>
</div>
</div>
</div>
</div>
<!-- 讨论编辑视图（中蕴式数据+外挂式操作+内嵌式引导） -->
<div id="editor-view" class="hidden container mx-auto px-4 py-8">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<!-- 讨论标题和元数据 -->
<div class="p-6 border-b border-gray-200">
<div class="flex justify-between items-start mb-4">
<input type="text" id="discussion-title" placeholder="输入讨论标题（必填）..." class="w-full text-2xl font-bold border-0 border-b-2 border-transparent focus:border-primary focus:ring-0 pb-2" required>
<button class="code-location-btn bg-gray-100 text-gray-700 px-2 py-1 rounded-md text-xs flex items-center hover:bg-gray-200 mt-2" data-code-location="讨论编辑 - JS第900行">
<i class="fa fa-code mr-1"></i> 代码
<span class="mode-tag mode-external">外挂式</span>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
范畴
<span class="ml-1 text-warning" title="讨论的核心领域分类（万向/千行/百业）">
<i class="fa fa-question-circle"></i>
<span class="mode-tag mode-embed">内嵌式</span>
</span>
</label>
<select id="discussion-category" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
<!-- 范畴选项将通过JS动态生成（支持自定义/外挂式） -->
</select>
<!-- 验证提示（内嵌式） -->
<p class="hidden text-danger text-xs mt-1" id="category-required">请选择范畴</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
分类
<span class="ml-1 text-warning" title="讨论的关键词标签（别-性/行/渐）">
<i class="fa fa-question-circle"></i>
<span class="mode-tag mode-embed">内嵌式</span>
</span>
</label>
<div class="relative">
<input type="text" id="discussion-subject" placeholder="输入分类关键词（必填）..." class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
<!-- 自动完成建议（内嵌式学习） -->
<div id="subject-suggestions" class="hidden absolute top-full left-0 right-0 bg-white border border-gray-300 rounded-md shadow-lg max-h-40 overflow-y-auto z-10">
<!-- 建议将通过JS动态生成 -->
</div>
</div>
<p class="hidden text-danger text-xs mt-1" id="subject-required">请输入分类关键词</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
目录
<span class="ml-1 text-warning" title="讨论的主题大纲（通/境/顿/藏/量/密）">
<i class="fa fa-question-circle"></i>
<span class="mode-tag mode-embed">内嵌式</span>
</span>
</label>
<input type="text" id="discussion-topic" placeholder="输入语篇主题（必填）..." class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
<p class="hidden text-danger text-xs mt-1" id="topic-required">请输入语篇主题</p>
</div>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<div class="flex items-center bg-gray-100 rounded-full px-3 py-1">
<span class="text-sm text-gray-600 mr-2">标签:</span>
<input type="text" id="tag-input" placeholder="添加标签..." class="bg-transparent border-0 focus:outline-none text-sm w-24">
<button id="add-tag-btn" class="ml-1 text-primary hover:text-primary-dark" data-code-location="标签功能 - JS第1200行">
<i class="fa fa-plus-circle"></i>
</button>
</div>
<div id="tags-container" class="flex flex-wrap gap-2">
<!-- 标签将通过JS动态生成 -->
</div>
</div>
<!-- 保存提示（内嵌式） -->
<div class="mt-3 text-sm text-gray-500 flex items-center">
<i class="fa fa-save mr-1 text-primary"></i>
<span>自动保存，无需手动提交（中蕴式安全-藏/密）</span>
</div>
</div>
<!-- 富文本工具栏（外挂式省力） -->
<div class="bg-gray-50 p-2 border-b border-gray-200 flex items-center space-x-1">
<button class="format-btn p-2 rounded hover:bg-gray-200" data-command="bold" title="加粗 (Ctrl+B)">
<i class="fa fa-bold"></i>
</button>
<button class="format-btn p-2 rounded hover:bg-gray-200" data-command="italic" title="斜体 (Ctrl+I)">
<i class="fa fa-italic"></i>
</button>
<button class="format-btn p-2 rounded hover:bg-gray-200" data-command="underline" title="下划线 (Ctrl+U)">
<i class="fa fa-underline"></i>
</button>
<span class="h-5 border-r border-gray-300 mx-1"></span>
<button class="format-btn p-2 rounded hover:bg-gray-200" data-command="insertUnorderedList" title="无序列表">
<i class="fa fa-list-ul"></i>
</button>
<button class="format-btn p-2 rounded hover:bg-gray-200" data-command="insertOrderedList" title="有序列表">
<i class="fa fa-list-ol"></i>
</button>
<span class="h-5 border-r border-gray-300 mx-1"></span>
<button class="format-btn p-2 rounded hover:bg-gray-200" data-command="createLink" title="插入链接">
<i class="fa fa-link"></i>
</button>
<button class="format-btn p-2 rounded hover:bg-gray-200" data-command="insertImage" title="插入图片">
<i class="fa fa-image"></i>
</button>
<span class="h-5 border-r border-gray-300 mx-1"></span>
<div class="flex-grow"></div>
<button id="add-content-block" class="flex items-center space-x-1 bg-primary text-white px-3 py-1 rounded hover:bg-primary-dark" data-code-location="内容块功能 - JS第1300行">
<i class="fa fa-plus"></i>
<span>添加内容块（外挂式）</span>
</button>
</div>
<!-- 内容块编辑区（拖拽/外挂式+数据/中蕴式） -->
<div id="content-blocks-container" class="p-6 space-y-4">
<!-- 内容块将通过JS动态生成 -->
<div class="drop-zone"></div>
<div class="text-center py-12 text-gray-500" id="empty-content-msg">
<i class="fa fa-file-text-o text-4xl mb-3"></i>
<p>暂无内容块</p>
<p class="text-sm">点击"添加内容块"开始记录讨论要点</p>
</div>
</div>
<!-- AI辅助总结区（内嵌式学习） -->
<div class="p-6 border-t border-gray-200">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-800 flex items-center">
AI辅助总结
<span class="ml-1 text-warning" title="自动提取讨论中的关键信息（顿/果）">
<i class="fa fa-question-circle"></i>
<span class="mode-tag mode-embed">内嵌式</span>
</span>
</h3>
<button id="generate-summary-btn" class="flex items-center space-x-1 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-all-300" data-code-location="AI总结 - JS第1600行">
<i class="fa fa-magic"></i>
<span>生成总结</span>
</button>
</div>
<div id="summary-container" class="bg-gray-50 p-4 rounded-lg border border-gray-200 min-h-[100px]">
<p class="text-gray-500 text-center">点击"生成总结"按钮自动提取讨论中的关键决策和行动项（量/果）</p>
</div>
</div>
</div>
</div>
<!-- 配置管理视图（外挂式省力） -->
<div id="config-view" class="hidden container mx-auto px-4 py-8">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="p-6 border-b border-gray-200">
<div class="flex justify-between items-center">
<h2 class="text-2xl font-bold text-gray-800">分区配置管理（外挂式）</h2>
<button id="back-to-dashboard" class="flex items-center space-x-1 bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-all-300">
<i class="fa fa-arrow-left"></i>
<span>返回仪表盘</span>
</button>
</div>
<p class="text-gray-600 mt-2">自定义范畴、分类、提示词等核心配置，适配您的使用场景（千行百业/外挂式省力）</p>
</div>
<!-- 配置标签页 -->
<div class="border-b border-gray-200">
<nav class="flex" aria-label="Tabs">
<button class="config-tab-btn px-6 py-3 font-medium text-primary border-b-2 border-primary" data-tab="category">
范畴管理（万向/千行/百业）
</button>
<button class="config-tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" data-tab="subject">
分类关键词管理（别-性/行/渐）
</button>
<button class="config-tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" data-tab="prompt">
提示词模板管理（通/境/顿/藏/量/密）
</button>
<button class="config-tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" data-tab="requirements">
Requirements需求配置
<span class="ml-1 bg-accent text-white text-xs px-2 py-0.5 rounded-full">新</span>
</button>
<button class="config-tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" data-tab="demands">
Demands方法配置
<span class="ml-1 bg-accent text-white text-xs px-2 py-0.5 rounded-full">新</span>
</button>
</nav>
</div>
<!-- 范畴管理 -->
<div class="config-tab-content p-6" id="category-tab">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">范畴配置（万向适配）</h3>
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-all-300" id="add-new-category">
<i class="fa fa-plus mr-1"></i> 添加范畴
</button>
</div>
<div class="bg-gray-50 rounded-lg p-4 mb-4">
<p class="text-sm text-gray-600">
<i class="fa fa-info-circle mr-1 text-primary"></i>
范畴是讨论的最高级别分类，用于区分不同领域的讨论（如工作、学习等）（内嵌式赋能-学习）
</p>
</div>
<div class="space-y-3" id="custom-categories-list">
<!-- 自定义范畴将通过JS动态生成 -->
</div>
</div>
<!-- 分类关键词管理 -->
<div class="config-tab-content p-6 hidden" id="subject-tab">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">分类关键词配置（千行别-性）</h3>
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-all-300" id="add-new-subject">
<i class="fa fa-plus mr-1"></i> 添加关键词
</button>
</div>
<div class="bg-gray-50 rounded-lg p-4 mb-4">
<p class="text-sm text-gray-600">
<i class="fa fa-info-circle mr-1 text-primary"></i>
分类关键词用于快速标记讨论的核心主题，支持自动补全功能（外挂式省力-节约）
</p>
</div>
<div class="space-y-3" id="custom-subjects-list">
<!-- 自定义关键词将通过JS动态生成 -->
</div>
</div>
<!-- 提示词模板管理 -->
<div class="config-tab-content p-6 hidden" id="prompt-tab">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">提示词模板配置（百业藏-量）</h3>
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-all-300" id="add-new-prompt">
<i class="fa fa-plus mr-1"></i> 添加模板
</button>
</div>
<div class="bg-gray-50 rounded-lg p-4 mb-4">
<p class="text-sm text-gray-600">
<i class="fa fa-info-circle mr-1 text-primary"></i>
提示词模板用于快速创建特定场景的讨论（如会议记录、项目规划等）（中蕴式省心-安全）
</p>
</div>
<div class="space-y-3" id="custom-prompts-list">
<!-- 自定义提示词将通过JS动态生成 -->
</div>
</div>
<!-- Requirements需求配置 -->
<div class="config-tab-content p-6 hidden" id="requirements-tab">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">外部使用者需求配置（固定选项）</h3>
<button class="bg-accent text-white px-4 py-2 rounded-lg hover:bg-accent/90 transition-all-300" id="apply-requirements">
<i class="fa fa-check mr-1"></i> 应用需求
</button>
</div>
<div class="bg-blue-50 rounded-lg p-4 mb-4">
<p class="text-sm text-gray-700">
<i class="fa fa-info-circle mr-1 text-accent"></i>
<strong>Requirements（需求）</strong>：外部使用者的固定期望选项，包含文档系统、对象系统、表格系统的核心需求配置
</p>
</div>
<!-- 文档系统需求 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-file-text-o mr-2 text-blue-600"></i>
文档系统需求
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">结构化选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="doc-structure" value="simple" class="mr-2">
<span class="text-sm">简单列表</span>
</label>
<label class="flex items-center">
<input type="radio" name="doc-structure" value="hierarchical" class="mr-2">
<span class="text-sm">层级目录</span>
</label>
<label class="flex items-center">
<input type="radio" name="doc-structure" value="network" class="mr-2">
<span class="text-sm">网络结构</span>
</label>
<label class="flex items-center">
<input type="radio" name="doc-structure" value="hybrid" class="mr-2" checked>
<span class="text-sm">混合模式</span>
</label>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">模板化选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" value="meeting" class="mr-2 doc-template" checked>
<span class="text-sm">会议记录</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="project" class="mr-2 doc-template" checked>
<span class="text-sm">项目文档</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="research" class="mr-2 doc-template">
<span class="text-sm">研究报告</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="decision" class="mr-2 doc-template">
<span class="text-sm">决策文档</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="personal" class="mr-2 doc-template" checked>
<span class="text-sm">个人笔记</span>
</label>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">协作选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="doc-collaboration" value="personal" class="mr-2">
<span class="text-sm">个人使用</span>
</label>
<label class="flex items-center">
<input type="radio" name="doc-collaboration" value="team" class="mr-2" checked>
<span class="text-sm">小团队协作</span>
</label>
<label class="flex items-center">
<input type="radio" name="doc-collaboration" value="department" class="mr-2">
<span class="text-sm">部门协作</span>
</label>
<label class="flex items-center">
<input type="radio" name="doc-collaboration" value="cross-department" class="mr-2">
<span class="text-sm">跨部门协作</span>
</label>
</div>
</div>
</div>
</div>
<!-- 对象系统需求 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-cube mr-2 text-green-600"></i>
对象系统需求
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">实体定义选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="obj-entity" value="simple" class="mr-2">
<span class="text-sm">简单实体</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-entity" value="composite" class="mr-2">
<span class="text-sm">复合实体</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-entity" value="dynamic" class="mr-2" checked>
<span class="text-sm">动态实体</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-entity" value="inheritance" class="mr-2">
<span class="text-sm">继承实体</span>
</label>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">关系映射选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="obj-relationship" value="one-to-one" class="mr-2">
<span class="text-sm">一对一</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-relationship" value="one-to-many" class="mr-2">
<span class="text-sm">一对多</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-relationship" value="many-to-many" class="mr-2" checked>
<span class="text-sm">多对多</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-relationship" value="network" class="mr-2">
<span class="text-sm">网络关系</span>
</label>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">验证选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="obj-validation" value="basic" class="mr-2">
<span class="text-sm">基础验证</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-validation" value="business" class="mr-2" checked>
<span class="text-sm">业务验证</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-validation" value="cross-system" class="mr-2">
<span class="text-sm">跨系统验证</span>
</label>
<label class="flex items-center">
<input type="radio" name="obj-validation" value="real-time" class="mr-2">
<span class="text-sm">实时验证</span>
</label>
</div>
</div>
</div>
</div>
<!-- 表格系统需求 -->
<div class="mb-4">
<h4 class="text-md font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-table mr-2 text-purple-600"></i>
表格系统需求
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">格式选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="tbl-format" value="simple" class="mr-2">
<span class="text-sm">简单表格</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-format" value="complex" class="mr-2">
<span class="text-sm">复杂表格</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-format" value="dynamic" class="mr-2" checked>
<span class="text-sm">动态表格</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-format" value="hybrid" class="mr-2">
<span class="text-sm">混合格式</span>
</label>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">处理选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="tbl-processing" value="basic" class="mr-2">
<span class="text-sm">基础计算</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-processing" value="statistical" class="mr-2">
<span class="text-sm">统计分析</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-processing" value="predictive" class="mr-2" checked>
<span class="text-sm">预测分析</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-processing" value="intelligent" class="mr-2">
<span class="text-sm">智能分析</span>
</label>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">集成选项</h5>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="tbl-integration" value="local" class="mr-2">
<span class="text-sm">本地处理</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-integration" value="cloud" class="mr-2">
<span class="text-sm">云端同步</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-integration" value="hybrid" class="mr-2" checked>
<span class="text-sm">混合模式</span>
</label>
<label class="flex items-center">
<input type="radio" name="tbl-integration" value="integrated" class="mr-2">
<span class="text-sm">完全集成</span>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Demands方法配置 -->
<div class="config-tab-content p-6 hidden" id="demands-tab">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">内部实现要求配置（固定方法论）</h3>
<button class="bg-accent text-white px-4 py-2 rounded-lg hover:bg-accent/90 transition-all-300" id="apply-demands">
<i class="fa fa-cog mr-1"></i> 应用方法
</button>
</div>
<div class="bg-green-50 rounded-lg p-4 mb-4">
<p class="text-sm text-gray-700">
<i class="fa fa-info-circle mr-1 text-accent"></i>
<strong>Demands（要求）</strong>：内部实现的固定方法论，包含拼语言三层指令架构、2+1数据体系、三个同行人协同方法
</p>
</div>
<!-- 拼语言三层指令架构 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-layer-group mr-2 text-indigo-600"></i>
拼语言三层指令架构
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">顶层：Pin语言通用模型</h5>
<p class="text-sm text-gray-600 mb-2">assemble指令 - 结论把握</p>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" value="syntax" class="mr-2 instruction-top" checked>
<span class="text-sm">语法解析</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="semantic" class="mr-2 instruction-top" checked>
<span class="text-sm">语义理解</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="logic" class="mr-2 instruction-top" checked>
<span class="text-sm">逻辑推理</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="assembly" class="mr-2 instruction-top" checked>
<span class="text-sm">结果组装</span>
</label>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">中层：自定义专用模型</h5>
<p class="text-sm text-gray-600 mb-2">summarize指令 - 结果谓词</p>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" value="feature" class="mr-2 instruction-middle" checked>
<span class="text-sm">特征提取</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="pattern" class="mr-2 instruction-middle" checked>
<span class="text-sm">模式识别</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="induction" class="mr-2 instruction-middle">
<span class="text-sm">知识归纳</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="summary" class="mr-2 instruction-middle" checked>
<span class="text-sm">结果总结</span>
</label>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">底层：配置内容处理</h5>
<p class="text-sm text-gray-600 mb-2">converge指令 - 原因命题</p>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" value="collection" class="mr-2 instruction-bottom" checked>
<span class="text-sm">数据收集</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="filter" class="mr-2 instruction-bottom" checked>
<span class="text-sm">信息过滤</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="verification" class="mr-2 instruction-bottom" checked>
<span class="text-sm">事实验证</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="convergence" class="mr-2 instruction-bottom" checked>
<span class="text-sm">逻辑汇聚</span>
</label>
</div>
</div>
</div>
</div>
<!-- 2+1数据体系 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-database mr-2 text-teal-600"></i>
2+1数据体系方法论
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">基础表1：分组层次表</h5>
<div class="text-sm text-gray-600 mb-2">系统的分组管理和层次结构</div>
<div class="space-y-1">
<div class="flex justify-between items-center">
<span class="text-xs">外立：内嵌/外挂/中蕴</span>
<input type="checkbox" checked class="ml-2">
</div>
<div class="flex justify-between items-center">
<span class="text-xs">内立：学习/节约/安全</span>
<input type="checkbox" checked class="ml-2">
</div>
<div class="flex justify-between items-center">
<span class="text-xs">中立：万向/千行/百业</span>
<input type="checkbox" checked class="ml-2">
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">基础表2：直连维度表</h5>
<div class="text-sm text-gray-600 mb-2">功能维度的直接关联</div>
<div class="space-y-1">
<div class="flex justify-between items-center">
<span class="text-xs">内嵌式：学习/万向/通/境/顿</span>
<input type="checkbox" checked class="ml-2">
</div>
<div class="flex justify-between items-center">
<span class="text-xs">外挂式：节约/千行/别/行/渐</span>
<input type="checkbox" checked class="ml-2">
</div>
<div class="flex justify-between items-center">
<span class="text-xs">中蕴式：安全/百业/藏/量/果/密</span>
<input type="checkbox" checked class="ml-2">
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-700 mb-2">结合表：索引表</h5>
<div class="text-sm text-gray-600 mb-2">内容项、逻辑项、字典项统一索引</div>
<div class="space-y-1">
<div class="flex justify-between items-center">
<span class="text-xs">内容项：内嵌式+学习+万向+通+境+顿</span>
<input type="checkbox" checked class="ml-2">
</div>
<div class="flex justify-between items-center">
<span class="text-xs">逻辑项：外挂式+节约+千行+别+行+渐</span>
<input type="checkbox" checked class="ml-2">
</div>
<div class="flex justify-between items-center">
<span class="text-xs">字典项：中蕴式+安全+百业+藏+量+果+密</span>
<input type="checkbox" checked class="ml-2">
</div>
</div>
</div>
</div>
</div>
<!-- 三个同行人协同 -->
<div class="mb-4">
<h4 class="text-md font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-users mr-2 text-orange-600"></i>
三个同行人协同方法论
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
<h5 class="font-medium text-orange-800 mb-2">备忘录系统</h5>
<p class="text-sm text-orange-700 mb-2">个人知识库，原料仪表盘</p>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" value="quick-record" class="mr-2 companion-memo" checked>
<span class="text-sm">快速记录</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="mind-map" class="mr-2 companion-memo">
<span class="text-sm">思维导图</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="hypothesis" class="mr-2 companion-memo" checked>
<span class="text-sm">假设验证</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="insight" class="mr-2 companion-memo" checked>
<span class="text-sm">个人洞察</span>
</label>
</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<h5 class="font-medium text-blue-800 mb-2">笔记本系统</h5>
<p class="text-sm text-blue-700 mb-2">分析工具箱，加工日志集合</p>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" value="discussion-analysis" class="mr-2 companion-notebook" checked>
<span class="text-sm">讨论分析</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="knowledge-processing" class="mr-2 companion-notebook" checked>
<span class="text-sm">知识加工</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="execution-support" class="mr-2 companion-notebook">
<span class="text-sm">执行支持</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="process-tracking" class="mr-2 companion-notebook" checked>
<span class="text-sm">过程追踪</span>
</label>
</div>
</div>
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
<h5 class="font-medium text-green-800 mb-2">日志表系统</h5>
<p class="text-sm text-green-700 mb-2">共享知识库，成品标记包</p>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" value="decision-log" class="mr-2 companion-log" checked>
<span class="text-sm">决策日志</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="progress-log" class="mr-2 companion-log" checked>
<span class="text-sm">进展记录</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="status-marker" class="mr-2 companion-log" checked>
<span class="text-sm">状态标记</span>
</label>
<label class="flex items-center">
<input type="checkbox" value="consensus-track" class="mr-2 companion-log" checked>
<span class="text-sm">共识追踪</span>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- 表述处理管理 -->
<div class="config-tab-content p-6 hidden" id="expression-tab">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">表述处理配置（三元组/三分法/三位一体）</h3>
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-all-300" id="run-expression-analysis">
<i class="fa fa-play mr-1"></i> 运行分析
</button>
</div>
<div class="bg-gray-50 rounded-lg p-4 mb-4">
<p class="text-sm text-gray-600">
<i class="fa fa-info-circle mr-1 text-primary"></i>
表述处理系统支持3行7列结构的分析验证，集成内嵌式学习、外挂式省力、中蕴式安全三层设计理念
</p>
</div>
<!-- 原始表述输入区 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<div>
<h4 class="font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-edit text-universal mr-2"></i>
原始表述输入（内嵌式赋能）
</h4>
<textarea id="raw-expression-input" rows="8" placeholder="输入3行7列的原始表述，每行用换行分隔，每列用空格分隔..."
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent font-mono text-sm"></textarea>
<div class="mt-2 flex space-x-2">
<button id="load-example-btn" class="text-xs bg-universal text-white px-3 py-1 rounded hover:bg-universal/90">
加载示例
</button>
<button id="save-expression-btn" class="text-xs bg-gray-600 text-white px-3 py-1 rounded hover:bg-gray-700">
保存表述
</button>
</div>
</div>
<!-- 7列结构预览 -->
<div>
<h4 class="font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-table text-industry mr-2"></i>
7列结构预览（外挂式省力）
</h4>
<div id="column-preview" class="border border-gray-300 rounded-lg p-4 bg-gray-50 min-h-[200px]">
<div class="text-center text-gray-500 py-8">
<i class="fa fa-eye text-2xl mb-2"></i>
<p>输入原始表述后将显示结构预览</p>
</div>
</div>
</div>
</div>
<!-- 分析结果展示 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- 三元组结果 -->
<div class="border border-l-4 border-universal rounded-lg p-4">
<h5 class="font-medium text-universal mb-3 flex items-center">
<i class="fa fa-cubes mr-2"></i>
三元组结果（立名）
</h5>
<div id="ternary-results" class="space-y-2 text-sm">
<div class="text-gray-500">等待分析结果...</div>
</div>
</div>
<!-- 三分法结果 -->
<div class="border border-l-4 border-industry rounded-lg p-4">
<h5 class="font-medium text-industry mb-3 flex items-center">
<i class="fa fa-sitemap mr-2"></i>
三分法结果（立法）
</h5>
<div id="trichotomy-results" class="space-y-2 text-sm">
<div class="text-gray-500">等待分析结果...</div>
</div>
</div>
<!-- 三位一体结果 -->
<div class="border border-l-4 border-business rounded-lg p-4">
<h5 class="font-medium text-business mb-3 flex items-center">
<i class="fa fa-certificate mr-2"></i>
三位一体结果（立向）
</h5>
<div id="trinity-results" class="space-y-2 text-sm">
<div class="text-gray-500">等待分析结果...</div>
</div>
</div>
</div>
<!-- 验证报告 -->
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h5 class="font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-shield-alt text-safe mr-2"></i>
验证报告（中蕴式安全）
</h5>
<div id="validation-report" class="text-sm space-y-2">
<div class="text-gray-500">运行分析后将显示验证报告...</div>
</div>
</div>
<!-- 历史记录 -->
<div class="mt-6">
<h5 class="font-medium text-gray-800 mb-3 flex items-center">
<i class="fa fa-history text-secondary mr-2"></i>
分析历史记录
</h5>
<div id="expression-history" class="space-y-2">
<div class="text-center text-gray-500 py-4">
<i class="fa fa-inbox text-xl mb-2"></i>
<p class="text-sm">暂无历史记录</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 欢迎视图（内嵌式学习引导） -->
<div id="welcome-view" class="container mx-auto px-4 py-8 flex flex-col items-center justify-center h-full">
<div class="text-center max-w-2xl">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-blue-100 text-primary text-3xl mb-6">
<i class="fa fa-comments-o"></i>
</div>
<h2 class="text-3xl font-bold text-gray-800 mb-4">欢迎使用 整合版系统</h2>
<p class="text-gray-600 mb-8">
内嵌式赋能-学习（万向 通-通 境 顿）<br>
外挂式省力-节约（千行 别-性 行 渐）<br>
中蕴式省心-安全（百业 藏-量 果 密）
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button id="create-first-discussion" class="flex items-center justify-center space-x-2 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-all-300 text-lg" data-code-location="首次使用引导 - JS第300行">
<i class="fa fa-plus-circle"></i>
<span>创建第一个讨论</span>
</button>
<button id="explore-dashboard" class="flex items-center justify-center space-x-2 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all-300 text-lg" data-code-location="仪表盘入口 - JS第320行">
<i class="fa fa-tachometer"></i>
<span>浏览仪表盘</span>
</button>
</div>
<!-- 首次使用引导提示（内嵌式） -->
<div class="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-100">
<div class="flex items-start">
<i class="fa fa-lightbulb-o text-primary text-xl mt-1 mr-3"></i>
<div>
<h4 class="font-medium text-gray-800">新手指引（内嵌式学习）</h4>
<p class="text-sm text-gray-600 mt-1">点击"配置管理"按钮可以自定义范畴、分类等选项，让工具更贴合您的使用习惯（外挂式省力）；所有数据本地存储，安全省心（中蕴式安全）</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 模态框组件 -->
<!-- 数据备份模态框（中蕴式安全） -->
<div id="backup-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
<div class="bg-white rounded-xl shadow-lg w-full max-w-3xl mx-4">
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-800">数据备份/恢复（中蕴式安全-藏/密）</h3>
<button id="close-backup-modal" class="text-gray-400 hover:text-gray-600">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<div class="p-6">
<div class="mb-6">
<h4 class="font-medium text-gray-800 mb-2">当前数据（自动保存/本地存储）</h4>
<div class="bg-gray-900 text-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto" id="backup-data">
<pre><code>// 加载中...</code></pre>
</div>
</div>
<div class="flex flex-wrap gap-4">
<button id="export-data-btn" class="flex items-center space-x-1 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-all-300">
<i class="fa fa-download mr-1"></i> 导出数据（JSON）
</button>
<label class="flex items-center space-x-1 bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-all-300 cursor-pointer">
<i class="fa fa-upload mr-1"></i> 导入数据
<input type="file" id="import-file" class="hidden" accept=".json">
</label>
<button id="reset-data-btn" class="flex items-center space-x-1 bg-danger text-white px-4 py-2 rounded-lg hover:bg-danger/90 transition-all-300">
<i class="fa fa-trash mr-1"></i> 重置所有数据
</button>
</div>
<div class="mt-4 p-4 bg-yellow-50 rounded-lg border border-yellow-100">
<p class="text-sm text-gray-700">
<i class="fa fa-exclamation-triangle text-yellow-600 mr-1"></i>
数据仅存储在本地浏览器中，建议定期导出备份（中蕴式安全-藏）；重置数据将清除所有讨论和配置，不可恢复！
</p>
</div>
</div>
<div class="p-6 border-t border-gray-200 flex justify-end">
<button id="close-backup-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all-300">
关闭
</button>
</div>
</div>
</div>
<!-- 添加内容块模态框（外挂式） -->
<div id="add-block-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
<div class="bg-white rounded-xl shadow-lg w-full max-w-md mx-4">
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-800">添加内容块（外挂式省力）</h3>
<button class="code-location-btn bg-gray-100 text-gray-700 px-2 py-1 rounded-md text-xs flex items-center hover:bg-gray-200" data-code-location="内容块模态框 - JS第1350行">
<i class="fa fa-code mr-1"></i> 代码
</button>
</div>
<div class="p-6">
<div class="space-y-3">
<button class="add-block-btn w-full flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all-300" data-type="text">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary mr-4">
<i class="fa fa-align-left"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">文本块</h4>
<p class="text-sm text-gray-600">添加富文本内容（通-通）</p>
</div>
</div>
<i class="fa fa-chevron-right text-gray-400"></i>
</button>
<button class="add-block-btn w-full flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all-300" data-type="timeline">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
<i class="fa fa-clock-o"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">时间轴</h4>
<p class="text-sm text-gray-600">记录事件发生顺序（境）</p>
</div>
</div>
<i class="fa fa-chevron-right text-gray-400"></i>
</button>
<button class="add-block-btn w-full flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all-300" data-type="decision">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
<i class="fa fa-check-circle"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">决策点</h4>
<p class="text-sm text-gray-600">记录重要决策和结论（果）</p>
</div>
</div>
<i class="fa fa-chevron-right text-gray-400"></i>
</button>
<button class="add-block-btn w-full flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all-300" data-type="todo">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
<i class="fa fa-tasks"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">待办事项</h4>
<p class="text-sm text-gray-600">添加需要完成的任务（量）</p>
</div>
</div>
<i class="fa fa-chevron-right text-gray-400"></i>
</button>
</div>
</div>
<div class="p-6 border-t border-gray-200 flex justify-end">
<button id="close-modal-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all-300">
取消
</button>
</div>
</div>
</div>
<!-- 代码定位模态框（外挂式） -->
<div id="code-location-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
<div class="bg-white rounded-xl shadow-lg w-full max-w-3xl mx-4">
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-800">代码位置信息（外挂式开发）</h3>
<button id="close-code-modal-btn" class="text-gray-400 hover:text-gray-600">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<div class="p-6 code-modal-content">
<div class="mb-4">
<h4 class="font-medium text-gray-800 mb-2" id="code-location-title">功能模块：未指定</h4>
<p class="text-sm text-gray-600 mb-4" id="code-location-desc">点击下方代码片段可以查看完整实现（仅展示关键代码）</p>
<div class="bg-gray-900 text-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto" id="code-snippet-container">
<!-- 代码片段将通过JS动态生成 -->
<pre><code>// 请点击页面中的"查看代码"按钮获取具体代码位置</code></pre>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h5 class="font-medium text-gray-800 mb-2">开发提示（外挂式省力）</h5>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 代码片段仅展示关键部分，完整代码请查看对应文件</li>
<li>• 行号为参考值，实际行号可能因代码修改而变化</li>
<li>• 建议使用VS Code等编辑器搜索代码中的关键词快速定位</li>
<li>• 修改代码前请备份原始文件（中蕴式安全）</li>
</ul>
</div>
</div>
<div class="p-6 border-t border-gray-200 flex justify-end">
<button id="copy-code-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-all-300 mr-2">
<i class="fa fa-copy mr-1"></i> 复制代码
</button>
<button id="close-code-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all-300">
关闭
</button>
</div>
</div>
</div>
<!-- 添加范畴模态框（外挂式） -->
<div id="add-category-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
<div class="bg-white rounded-xl shadow-lg w-full max-w-md mx-4">
<div class="p-6 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-800">添加新范畴（万向适配/内嵌式）</h3>
</div>
<div class="p-6">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">范畴名称</label>
<input type="text" id="category-name-input" placeholder="输入范畴名称（如：工作、学习）..." class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">适配维度</label>
<div class="flex gap-3 mb-2">
<label class="flex items-center cursor-pointer">
<input type="radio" name="adapt-dimension" value="universal" class="mr-2" checked>
<span class="adapt-tag adapt-universal">万向</span>
</label>
<label class="flex items-center cursor-pointer">
<input type="radio" name="adapt-dimension" value="industry" class="mr-2">
<span class="adapt-tag adapt-industry">千行</span>
</label>
<label class="flex items-center cursor-pointer">
<input type="radio" name="adapt-dimension" value="business" class="mr-2">
<span class="adapt-tag adapt-business">百业</span>
</label>
</div>
<label class="block text-sm font-medium text-gray-700 mb-1">选择颜色</label>
<div class="grid grid-cols-6 gap-2">
<button class="category-color-btn w-full h-8 rounded-full bg-blue-500 border-2 border-transparent" data-color="#3b82f6"></button>
<button class="category-color-btn w-full h-8 rounded-full bg-green-500 border-2 border-transparent" data-color="#22c55e"></button>
<button class="category-color-btn w-full h-8 rounded-full bg-yellow-500 border-2 border-transparent" data-color="#f59e0b"></button>
<button class="category-color-btn w-full h-8 rounded-full bg-purple-500 border-2 border-transparent" data-color="#a855f7"></button>
<button class="category-color-btn w-full h-8 rounded-full bg-red-500 border-2 border-transparent" data-color="#ef4444"></button>
<button class="category-color-btn w-full h-8 rounded-full bg-gray-500 border-2 border-transparent" data-color="#64748b"></button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">描述（可选）</label>
<textarea id="category-desc-input" rows="2" placeholder="输入范畴描述（如：适配千行百业的电商讨论）..." class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
</div>
</div>
</div>
<div class="p-6 border-t border-gray-200 flex justify-end">
<button id="cancel-category-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all-300 mr-2">
取消
</button>
<button id="save-category-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-all-300">
保存
</button>
</div>
</div>
</div>
<!-- 符号学架构配置模态框 -->
<div id="architecture-config-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
<div class="bg-white rounded-xl shadow-lg w-full max-w-4xl mx-4 max-h-[80vh] overflow-y-auto">
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-800">
<i class="fa fa-sitemap text-purple-600 mr-2"></i>
三层嵌套符号学架构配置
</h3>
<button id="close-architecture-modal" class="text-gray-400 hover:text-gray-600">
<i class="fa fa-times"></i>
</button>
</div>
<div class="p-6">
<!-- PIN结结构配置 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-800 mb-3">PIN结符号学结构</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- 理科配置 -->
<div class="border border-blue-200 rounded-lg p-4 bg-blue-50">
<div class="flex items-center justify-between mb-2">
<h5 class="font-medium text-blue-800">PIN结括号设备</h5>
<i class="fa fa-calculator text-blue-600"></i>
</div>
<div class="space-y-2">
<div>
<label class="text-sm font-medium text-gray-700">力学性参数</label>
<input type="text" class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm"
placeholder="力学系数" value="1.618">
</div>
<div>
<label class="text-sm font-medium text-gray-700">数学性参数</label>
<input type="text" class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm"
placeholder="数学精度" value="0.001">
</div>
</div>
</div>
<!-- 工科配置 -->
<div class="border border-purple-200 rounded-lg p-4 bg-purple-50">
<div class="flex items-center justify-between mb-2">
<h5 class="font-medium text-purple-800">PIN节工具箱</h5>
<i class="fa fa-tools text-purple-600"></i>
</div>
<div class="space-y-2">
<div>
<label class="text-sm font-medium text-gray-700">经验常识库</label>
<select class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm">
<option>标准经验库</option>
<option>专业经验库</option>
<option>自定义经验库</option>
</select>
</div>
<div>
<label class="text-sm font-medium text-gray-700">科学方法</label>
<select class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm">
<option>实验方法</option>
<option>理论方法</option>
<option>计算方法</option>
</select>
</div>
</div>
</div>
<!-- 文科配置 -->
<div class="border border-green-200 rounded-lg p-4 bg-green-50">
<div class="flex items-center justify-between mb-2">
<h5 class="font-medium text-green-800">拼块仪表盘</h5>
<i class="fa fa-puzzle-piece text-green-600"></i>
</div>
<div class="space-y-2">
<div>
<label class="text-sm font-medium text-gray-700">独立性类型</label>
<select class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm">
<option>语法独立性</option>
<option>语义独立性</option>
<option>语用独立性</option>
</select>
</div>
<div>
<label class="text-sm font-medium text-gray-700">对立统一度</label>
<input type="range" min="0" max="100" value="75" class="w-full mt-1">
</div>
</div>
</div>
</div>
</div>
<!-- 三套提示词系统配置 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-800 mb-3">提示词系统配置</h4>
<div class="space-y-4">
<!-- 明言系统配置 -->
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center justify-between mb-3">
<h5 class="font-medium text-gray-800">明言-析取提示词</h5>
<div class="flex items-center space-x-2">
<span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">显式表达</span>
<label class="flex items-center">
<input type="checkbox" checked class="mr-1">
<span class="text-sm">启用</span>
</label>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div>
<label class="text-sm font-medium text-gray-700">语法目标</label>
<input type="text" class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm"
value="适应专有名词 proper names">
</div>
<div>
<label class="text-sm font-medium text-gray-700">语用目标</label>
<input type="text" class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm"
value="适用普通单词">
</div>
<div>
<label class="text-sm font-medium text-gray-700">语义目标</label>
<input type="text" class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm"
value="过程适配一般代词">
</div>
</div>
</div>
<!-- 暗示系统配置 -->
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center justify-between mb-3">
<h5 class="font-medium text-gray-800">暗示-合取关键词</h5>
<div class="flex items-center space-x-2">
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">隐含触发</span>
<label class="flex items-center">
<input type="checkbox" checked class="mr-1">
<span class="text-sm">启用</span>
</label>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div>
<label class="text-sm font-medium text-gray-700">心动程序</label>
<textarea class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm" rows="2">心流（中心先"动"）-语言模型</textarea>
</div>
<div>
<label class="text-sm font-medium text-gray-700">运动轨迹</label>
<textarea class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm" rows="2">溢出（顶部先"活"）-因果数据</textarea>
</div>
<div>
<label class="text-sm font-medium text-gray-700">行动角色</label>
<textarea class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm" rows="2">涌现（根部先"生"）-现实自然</textarea>
</div>
</div>
</div>
<!-- 隐喻系统配置 -->
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center justify-between mb-3">
<h5 class="font-medium text-gray-800">隐喻-双取主取主题词</h5>
<div class="flex items-center space-x-2">
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">隐喻映射</span>
<label class="flex items-center">
<input type="checkbox" checked class="mr-1">
<span class="text-sm">启用</span>
</label>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div>
<label class="text-sm font-medium text-gray-700">顶级公理</label>
<input type="text" class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm"
value="集合元素依存">
</div>
<div>
<label class="text-sm font-medium text-gray-700">根本方法</label>
<input type="text" class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm"
value="作用机制">
</div>
<div>
<label class="text-sm font-medium text-gray-700">初始断言</label>
<input type="text" class="w-full mt-1 px-3 py-1 border border-gray-300 rounded text-sm"
value="范畴元件约束">
</div>
</div>
</div>
</div>
</div>
<!-- 三层价值表达配置 -->
<div class="mb-6">
<h4 class="text-md font-medium text-gray-800 mb-3">三层价值表达</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="border border-blue-200 rounded-lg p-3 bg-blue-50">
<h5 class="font-medium text-blue-800 mb-2">内嵌式赋能-学习</h5>
<p class="text-sm text-gray-600 mb-2">万向 通 - 通 境 顿</p>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">学习</span>
<span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">引导</span>
<span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">提示</span>
</div>
</div>
<div class="border border-purple-200 rounded-lg p-3 bg-purple-50">
<h5 class="font-medium text-purple-800 mb-2">外挂式省力-节约</h5>
<p class="text-sm text-gray-600 mb-2">千行 别 - 性 行 渐</p>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">省力</span>
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">快捷</span>
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">自动</span>
</div>
</div>
<div class="border border-green-200 rounded-lg p-3 bg-green-50">
<h5 class="font-medium text-green-800 mb-2">中蕴式省心-安全</h5>
<p class="text-sm text-gray-600 mb-2">百业 藏 - 量 果 密</p>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">安全</span>
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">可靠</span>
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">保护</span>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 border-t border-gray-200 flex justify-end">
<button id="reset-architecture-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all-300 mr-2">
<i class="fa fa-refresh mr-1"></i> 重置默认
</button>
<button id="save-architecture-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-all-300">
<i class="fa fa-save mr-1"></i> 保存配置
</button>
<button id="close-architecture-config-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all-300 ml-2">
关闭
</button>
</div>
</div>
</div>
<!-- 帮助模态框（内嵌式学习） -->
<div id="help-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
<div class="bg-white rounded-xl shadow-lg w-full max-w-2xl mx-4 max-h-[80vh] overflow-y-auto">
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-800">使用帮助（内嵌式赋能-学习）</h3>
<button id="close-help-modal" class="text-gray-400 hover:text-gray-600">
<i class="fa fa-times"></i>
</button>
</div>
<!-- 新增：设计逻辑标签页 -->
<div class="border-b border-gray-200">
<nav class="flex" aria-label="Help Tabs">
<button class="help-tab-btn px-6 py-3 font-medium text-primary border-b-2 border-primary" data-tab="concept">
核心设计理念
</button>
<button class="help-tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" data-tab="usage">
基本使用指南
</button>
<button class="help-tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" data-tab="semantic">
语义体系解析
</button>
</nav>
</div>
<!-- 核心设计理念 -->
<div class="help-tab-content p-6" id="concept-tab">
<div class="space-y-6">
<div>
<h4 class="text-lg font-medium text-gray-800 mb-2">三层核心设计理念</h4>
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4">
<p class="text-gray-700 font-medium">内嵌式赋能 - 学习（万向 通-通 境 顿）</p>
<p class="text-sm text-gray-600 mt-1">• 万向：适配多行业、多场景的讨论记录需求<br>• 通：功能易懂、操作流畅，一通百通<br>• 境：贴合使用场景，沉浸式记录<br>• 顿：AI总结、提示引导，快速顿悟核心信息</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4">
<p class="text-gray-700 font-medium">外挂式省力 - 节约（千行 别-性 行 渐）</p>
<p class="text-sm text-gray-600 mt-1">• 千行：适配千行百业的自定义配置<br>• 别：区分不同功能特性，按需使用<br>• 行：操作高效，一行指令/点击完成操作<br>• 渐：渐进式优化，越用越顺手</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
<p class="text-gray-700 font-medium">中蕴式省心 - 安全（百业 藏-量 果 密）</p>
<p class="text-sm text-gray-600 mt-1">• 百业：满足百业的数据存储需求<br>• 藏：本地存储，数据藏于本地不泄露<br>• 量：量化讨论成果，数据可视化<br>• 密：隐私保护，操作留痕且可追溯</p>
</div>
</div>
<div>
<h4 class="text-lg font-medium text-gray-800 mb-2">2+1数据体系</h4>
<p class="text-gray-600 mb-3">基于您的语义体系，系统构建了三层数据架构：</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
<h5 class="font-medium text-gray-800 mb-2">基础表1：分组层次表</h5>
<p class="text-sm text-gray-600">• 外立（服务标准）：内嵌式赋能/外挂式省力/中蕴式省心<br>• 内立（管理制度）：学习/节约/安全<br>• 中立（组织机构）：万向/千行/百业</p>
</div>
<div class="bg-green-50 p-4 rounded-lg border border-green-100">
<h5 class="font-medium text-gray-800 mb-2">基础表2：直连维度表</h5>
<p class="text-sm text-gray-600">• 内嵌式赋能 → 学习/万向/通/境/顿<br>• 外挂式省力 → 节约/千行/别/行/渐<br>• 中蕴式省心 → 安全/百业/藏/量/果/密</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg border border-purple-100 md:col-span-2">
<h5 class="font-medium text-gray-800 mb-2">结合表：索引表</h5>
<p class="text-sm text-gray-600">• 内容项（文档用语）：内嵌式赋能/学习/万向/通/境/顿<br>• 逻辑项（程序用语）：外挂式省力/节约/千行/别/行/渐<br>• 字典项（库用语）：中蕴式省心/安全/百业/藏/量/果/密</p>
</div>
</div>
</div>
</div>
</div>
<!-- 基本使用指南 -->
<div class="help-tab-content p-6 hidden" id="usage-tab">
<div class="space-y-6">
<div>
<h4 class="text-lg font-medium text-gray-800 mb-2">快速开始</h4>
<ol class="list-decimal list-inside space-y-2 text-gray-600">
<li>点击"创建第一个讨论"开始记录</li>
<li>填写讨论标题、范畴、分类、目录等基本信息</li>
<li>使用"添加内容块"按钮添加文本、时间轴、决策点或待办事项</li>
<li>使用富文本工具栏格式化文本内容</li>
<li>点击"生成总结"获取讨论要点的AI辅助总结</li>
</ol>
</div>
<div>
<h4 class="text-lg font-medium text-gray-800 mb-2">核心功能</h4>
<div class="space-y-3">
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
<h5 class="font-medium text-gray-800">结构化记录</h5>
<p class="text-sm text-gray-600">支持四种内容块类型：文本块（通-通）、时间轴（境）、决策点（果）、待办事项（量），满足不同场景的记录需求。</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
<h5 class="font-medium text-gray-800">自定义配置</h5>
<p class="text-sm text-gray-600">通过"配置管理"可以自定义范畴（万向/千行/百业）、分类关键词（别-性/行/渐）和提示词模板（通/境/顿/藏/量/密）。</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
<h5 class="font-medium text-gray-800">数据安全</h5>
<p class="text-sm text-gray-600">所有数据本地存储（藏/密），支持导出/导入备份，确保数据安全可靠。</p>
</div>
</div>
</div>
<div>
<h4 class="text-lg font-medium text-gray-800 mb-2">快捷键</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
<div class="flex justify-between p-2 bg-gray-50 rounded">
<span>Ctrl + B</span>
<span>加粗文本</span>
</div>
<div class="flex justify-between p-2 bg-gray-50 rounded">
<span>Ctrl + I</span>
<span>斜体文本</span>
</div>
<div class="flex justify-between p-2 bg-gray-50 rounded">
<span>Ctrl + U</span>
<span>下划线</span>
</div>
<div class="flex justify-between p-2 bg-gray-50 rounded">
<span>Ctrl + S</span>
<span>手动保存</span>
</div>
</div>
</div>
</div>
</div>
<!-- 语义体系解析 -->
<div class="help-tab-content p-6 hidden" id="semantic-tab">
<div class="space-y-6">
<div>
<h4 class="text-lg font-medium text-gray-800 mb-2">单字语义矩阵</h4>
<div class="overflow-x-auto">
<table class="min-w-full border border-gray-200 rounded-lg">
<thead>
<tr class="bg-gray-50">
<th class="border-b border-gray-200 px-4 py-2 text-left text-sm font-medium text-gray-500">维度</th>
<th class="border-b border-gray-200 px-4 py-2 text-left text-sm font-medium text-gray-500">内嵌式赋能-学习</th>
<th class="border-b border-gray-200 px-4 py-2 text-left text-sm font-medium text-gray-500">外挂式省力-节约</th>
<th class="border-b border-gray-200 px-4 py-2 text-left text-sm font-medium text-gray-500">中蕴式省心-安全</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-b border-gray-200 px-4 py-2 text-sm font-medium">适配维度</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">万向</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">千行</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">百业</td>
</tr>
<tr>
<td class="border-b border-gray-200 px-4 py-2 text-sm font-medium">反破（圆）</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">通</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">别</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">藏</td>
</tr>
<tr>
<td class="border-b border-gray-200 px-4 py-2 text-sm font-medium">加成（器）</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">通</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">性</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">量</td>
</tr>
<tr>
<td class="border-b border-gray-200 px-4 py-2 text-sm font-medium">减成（唯识论）</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">境</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">行</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">果</td>
</tr>
<tr>
<td class="border-b border-gray-200 px-4 py-2 text-sm font-medium">正破（不定）</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">顿</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">渐</td>
<td class="border-b border-gray-200 px-4 py-2 text-sm">密</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h4 class="text-lg font-medium text-gray-800 mb-2">验证维度落地</h4>
<div class="space-y-3">
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
<h5 class="font-medium text-gray-800">表述完整（差异个体 包容性）</h5>
<p class="text-sm text-gray-600">每行覆盖"功能+价值+适配"，行序（1/2/3）对应"学习→效率→安全"的用户认知顺序，实现三分法+行序的完整性。</p>
</div>
<div class="bg-green-50 p-4 rounded-lg border border-green-100">
<h5 class="font-medium text-gray-800">描述完备（统一步调 划一性）</h5>
<p class="text-sm text-gray-600">列维度的三元组（如词组列1）形成统一层次（外立/内立/中立），线索一致，实现三元组+层次的完备性。</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
<h5 class="font-medium text-gray-800">表达完全（共性对齐 一致性）</h5>
<p class="text-sm text-gray-600">列项形成三位一体（如"学习-万向-通/境/顿"），列名明确（外立/内立/中立），实现三位一体+列名的完全性。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript 逻辑 -->
<script>
// ==================== 核心数据结构与语义体系 ====================
// 语义映射表（单字原子语义）
const semanticMap = {
'通': '操作易懂', '别': '功能区分', '藏': '本地存储',
'境': '沉浸式编辑', '行': '一键操作', '果': '成果量化',
'顿': '快速顿悟', '渐': '渐进优化', '密': '隐私安全'
};
// 核心配置维度枚举
const dimensionConfig = {
'外立（服务标准）': ['内嵌式赋能', '外挂式省力', '中蕴式省心'],
'内立（管理制度）': ['学习', '节约', '安全'],
'中立（组织机构）': ['万向', '千行', '百业']
};
// 价值维度统计（用于仪表盘显示）
let valueStats = {
learn: 0, // 学习维度（提示词使用/帮助查看次数）
save: 0, // 效率维度（快捷键/一键操作次数）
safe: 0 // 安全维度（备份/自动保存次数）
};
// 数据存储键名
const STORAGE_KEYS = {
DISCUSSIONS: 'discussMemo_discussions',
CATEGORIES: 'discussMemo_categories',
SUBJECTS: 'discussMemo_subjects',
PROMPTS: 'discussMemo_prompts',
STATS: 'discussMemo_stats',
THEME: 'discussMemo_theme',
GROUP_HIERARCHY: 'discussMemo_groupHierarchy',
DIRECT_DIMENSION: 'discussMemo_directDimension',
INDEX_TABLE: 'discussMemo_indexTable'
};
// 初始化基础表和结合表
function initializeDataTables() {
// 基础表1：分组层次表
const groupHierarchy = {
'外立（服务标准）': ['内嵌式赋能', '外挂式省力', '中蕴式省心'],
'内立（管理制度）': ['学习', '节约', '安全'],
'中立（组织机构）': ['万向', '千行', '百业'],
'反破（圆）': ['通', '别', '藏'],
'加成/减成（器/唯识论）': ['通/境', '性/行', '量/果'],
'正破（不定）': ['顿', '渐', '密']
};
// 基础表2：直连维度表
const directDimension = {
'内嵌式赋能': ['学习', '万向', '通', '境', '顿'],
'外挂式省力': ['节约', '千行', '别', '行', '渐'],
'中蕴式省心': ['安全', '百业', '藏', '量', '果', '密']
};
// 结合表：索引表
const indexTable = {
'内容项（文档用语）': ['内嵌式赋能', '学习', '万向', '通', '境', '顿'],
'逻辑项（程序用语）': ['外挂式省力', '节约', '千行', '别', '行', '渐'],
'字典项（库用语）': ['中蕴式省心', '安全', '百业', '藏', '量', '果', '密']
};
// 存储基础表和结合表
localStorage.setItem(STORAGE_KEYS.GROUP_HIERARCHY, JSON.stringify(groupHierarchy));
localStorage.setItem(STORAGE_KEYS.DIRECT_DIMENSION, JSON.stringify(directDimension));
localStorage.setItem(STORAGE_KEYS.INDEX_TABLE, JSON.stringify(indexTable));
}
// ==================== 工具函数 ====================
// 生成唯一ID
function generateId() {
return Date.now().toString(36) + Math.random().toString(36).substr(2);
}
// 格式化日期
function formatDate(date) {
if (!date) return '-';
const d = new Date(date);
return d.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
}
// 防抖函数
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 显示提示消息
function showToast(message, type = 'info') {
const toastContainer = document.createElement('div');
toastContainer.className = `toast fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50 ${
type === 'success' ? 'bg-success text-white' :
type === 'error' ? 'bg-danger text-white' :
type === 'warning' ? 'bg-warning text-white' :
'bg-primary text-white'
}`;
toastContainer.textContent = message;
document.body.appendChild(toastContainer);
setTimeout(() => toastContainer.classList.add('show'), 10);
setTimeout(() => {
toastContainer.classList.remove('show');
setTimeout(() => document.body.removeChild(toastContainer), 300);
}, 3000);
}
// ==================== 数据管理 ====================
// 获取数据
function getData(key, defaultValue = null) {
try {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : defaultValue;
} catch (error) {
console.error(`获取数据失败 [${key}]:`, error);
return defaultValue;
}
}
// 保存数据
function saveData(key, data) {
try {
localStorage.setItem(key, JSON.stringify(data));
return true;
} catch (error) {
console.error(`保存数据失败 [${key}]:`, error);
showToast('数据保存失败，请检查浏览器存储权限', 'error');
return false;
}
}
// 获取所有讨论
function getDiscussions() {
return getData(STORAGE_KEYS.DISCUSSIONS, []);
}
// 保存讨论
function saveDiscussion(discussion) {
const discussions = getDiscussions();
const index = discussions.findIndex(d => d.id === discussion.id);
if (index >= 0) {
discussions[index] = discussion;
} else {
discussions.push(discussion);
}
saveData(STORAGE_KEYS.DISCUSSIONS, discussions);
updateStats(); // 更新统计数据
return discussion;
}
// 删除讨论
function deleteDiscussion(id) {
const discussions = getDiscussions();
const filteredDiscussions = discussions.filter(d => d.id !== id);
saveData(STORAGE_KEYS.DISCUSSIONS, filteredDiscussions);
updateStats(); // 更新统计数据
}
// 获取分类
function getCategories() {
return getData(STORAGE_KEYS.CATEGORIES, [
{ id: '1', name: '工作', color: '#3b82f6', dimension: 'universal', description: '工作相关讨论' },
{ id: '2', name: '学习', color: '#22c55e', dimension: 'universal', description: '学习相关讨论' },
{ id: '3', name: '生活', color: '#f59e0b', dimension: 'universal', description: '生活相关讨论' }
]);
}
// 保存分类
function saveCategory(category) {
const categories = getCategories();
const index = categories.findIndex(c => c.id === category.id);
if (index >= 0) {
categories[index] = category;
} else {
category.id = generateId();
categories.push(category);
}
saveData(STORAGE_KEYS.CATEGORIES, categories);
return category;
}
// 删除分类
function deleteCategory(id) {
const categories = getCategories();
const filteredCategories = categories.filter(c => c.id !== id);
saveData(STORAGE_KEYS.CATEGORIES, filteredCategories);
}
// 获取分类关键词
function getSubjects() {
return getData(STORAGE_KEYS.SUBJECTS, [
'项目规划', '会议记录', '问题讨论', '决策分析',
'学习笔记', '研究报告', '创意构思', '任务分配'
]);
}
// 保存分类关键词
function saveSubjects(subjects) {
saveData(STORAGE_KEYS.SUBJECTS, subjects);
}
// 获取提示词模板
function getPrompts() {
return getData(STORAGE_KEYS.PROMPTS, [
{
id: '1',
title: '会议记录',
content: '## 会议基本信息\n- 日期：\n- 参与人员：\n- 主持人：\n\n## 议程\n1. \n2. \n\n## 讨论要点\n\n## 决策事项\n\n## 行动项\n',
tags: ['会议', '记录']
},
{
id: '2',
title: '项目规划',
content: '## 项目概述\n\n## 目标与范围\n\n## 时间线\n\n## 资源需求\n\n## 风险评估\n\n## 里程碑\n',
tags: ['项目', '规划']
},
{
id: '3',
title: '问题分析',
content: '## 问题描述\n\n## 影响范围\n\n## 根本原因分析\n\n## 可能的解决方案\n\n## 推荐方案\n\n## 实施计划\n',
tags: ['问题', '分析']
}
]);
}
// 保存提示词模板
function savePrompt(prompt) {
const prompts = getPrompts();
const index = prompts.findIndex(p => p.id === prompt.id);
if (index >= 0) {
prompts[index] = prompt;
} else {
prompt.id = generateId();
prompts.push(prompt);
}
saveData(STORAGE_KEYS.PROMPTS, prompts);
return prompt;
}
// 删除提示词模板
function deletePrompt(id) {
const prompts = getPrompts();
const filteredPrompts = prompts.filter(p => p.id !== id);
saveData(STORAGE_KEYS.PROMPTS, filteredPrompts);
}
// 更新统计数据
function updateStats() {
const discussions = getDiscussions();
let pendingTodos = 0;
let completedDecisions = 0;
let lastUpdated = null;
discussions.forEach(discussion => {
// 更新最后更新时间
if (!lastUpdated || new Date(discussion.updatedAt) > new Date(lastUpdated)) {
lastUpdated = discussion.updatedAt;
}
// 统计待办事项和决策
discussion.contentBlocks.forEach(block => {
if (block.type === 'todo') {
pendingTodos += block.items.filter(item => !item.completed).length;
} else if (block.type === 'decision') {
if (block.status === 'completed') {
completedDecisions++;
}
}
});
});
// 更新统计显示
document.getElementById('total-discussions').textContent = discussions.length;
document.getElementById('pending-todos').textContent = pendingTodos;
document.getElementById('completed-decisions').textContent = completedDecisions;
document.getElementById('last-updated').textContent = formatDate(lastUpdated);
// 更新价值维度统计
document.getElementById('learn-stats').textContent = valueStats.learn;
document.getElementById('save-stats').textContent = valueStats.save;
document.getElementById('safe-stats').textContent = valueStats.safe;
// 更新完成率
const totalTasks = discussions.reduce((sum, d) => {
return sum + d.contentBlocks.reduce((blockSum, block) => {
return blockSum + (block.type === 'todo' ? block.items.length : 0);
}, 0);
}, 0);
const completedTasks = totalTasks - pendingTodos;
const completionRate = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
document.getElementById('completion-rate').textContent = `${completionRate}%`;
}
// ==================== UI 渲染 ====================
// 渲染分类列表
function renderCategories() {
const categories = getCategories();
const categoriesList = document.getElementById('categories-list');
categoriesList.innerHTML = '';
// 添加"全部"选项
const allOption = document.createElement('div');
allOption.className = 'flex items-center space-x-2 p-2 rounded-md hover:bg-gray-100 cursor-pointer category-option active';
allOption.dataset.category = 'all';
allOption.innerHTML = `
<div class="w-3 h-3 rounded-full bg-primary"></div>
<span class="text-sm">全部</span>
<span class="ml-auto text-xs text-gray-500">${getDiscussions().length}</span>
`;
categoriesList.appendChild(allOption);
// 添加分类选项
categories.forEach(category => {
const categoryCount = getDiscussions().filter(d => d.category === category.id).length;
const option = document.createElement('div');
option.className = 'flex items-center space-x-2 p-2 rounded-md hover:bg-gray-100 cursor-pointer category-option';
option.dataset.category = category.id;
option.innerHTML = `
<div class="w-3 h-3 rounded-full" style="background-color: ${category.color}"></div>
<span class="text-sm">${category.name}</span>
<span class="ml-auto text-xs text-gray-500">${categoryCount}</span>
<span class="adapt-tag adapt-${category.dimension}">${category.dimension === 'universal' ? '万向' : category.dimension === 'industry' ? '千行' : '百业'}</span>
`;
categoriesList.appendChild(option);
});
// 添加点击事件
document.querySelectorAll('.category-option').forEach(option => {
option.addEventListener('click', () => {
document.querySelectorAll('.category-option').forEach(o => o.classList.remove('active', 'bg-gray-100'));
option.classList.add('active', 'bg-gray-100');
renderDiscussions(option.dataset.category);
});
});
}
// 渲染讨论列表
function renderDiscussions(categoryFilter = 'all') {
const discussions = getDiscussions();
const discussionList = document.getElementById('discussion-list');
const emptyMsg = document.getElementById('empty-discussion-msg');
// 过滤讨论
let filteredDiscussions = discussions;
if (categoryFilter !== 'all') {
filteredDiscussions = discussions.filter(d => d.category === categoryFilter);
}
// 按更新时间排序
filteredDiscussions.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
// 渲染讨论列表
if (filteredDiscussions.length === 0) {
discussionList.innerHTML = '';
emptyMsg.classList.remove('hidden');
return;
}
emptyMsg.classList.add('hidden');
discussionList.innerHTML = '';
filteredDiscussions.forEach(discussion => {
const category = getCategories().find(c => c.id === discussion.category);
const item = document.createElement('div');
item.className = 'p-3 rounded-lg hover:bg-gray-100 cursor-pointer transition-all-300 border border-transparent hover:border-gray-200';
item.dataset.id = discussion.id;
// 计算待办事项数量
const todoCount = discussion.contentBlocks.reduce((sum, block) => {
if (block.type === 'todo') {
return sum + block.items.filter(item => !item.completed).length;
}
return sum;
}, 0);
item.innerHTML = `
<div class="flex items-start justify-between">
<div class="flex-1">
<h4 class="font-medium text-gray-800 truncate">${discussion.title}</h4>
<div class="flex items-center mt-1 text-xs text-gray-500">
<span class="inline-block w-2 h-2 rounded-full mr-1" style="background-color: ${category ? category.color : '#ccc'}"></span>
<span>${category ? category.name : '未分类'}</span>
<span class="mx-1">•</span>
<span>${discussion.subject}</span>
</div>
</div>
${todoCount > 0 ? `<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full">${todoCount} 待办</span>` : ''}
</div>
<div class="mt-2 text-xs text-gray-500">
<span>${formatDate(discussion.updatedAt)}</span>
</div>
`;
// 添加点击事件
item.addEventListener('click', () => {
openDiscussion(discussion.id);
});
discussionList.appendChild(item);
});
}
// 渲染仪表盘
function renderDashboard() {
// 更新统计数据
updateStats();
// 渲染三层次动态记录体系
renderDynamicRecordingDashboard();
// 渲染分类分布图表
renderCategoryChart();
// 渲染最近讨论
renderRecentDiscussions();
// 渲染提示词导航
renderPrompts();
}
// 渲染分类分布图表
function renderCategoryChart() {
const discussions = getDiscussions();
const categories = getCategories();
const sectorsContainer = document.getElementById('dashboard-sectors');
const legendContainer = document.getElementById('category-legend');
// 计算每个分类的讨论数量
const categoryCounts = {};
categories.forEach(category => {
categoryCounts[category.id] = discussions.filter(d => d.category === category.id).length;
});
// 计算总讨论数
const totalDiscussions = discussions.length;
// 渲染扇区
sectorsContainer.innerHTML = '';
let startAngle = 0;
categories.forEach(category => {
const count = categoryCounts[category.id] || 0;
if (count === 0) return;
const percentage = (count / totalDiscussions) * 100;
const endAngle = startAngle + (percentage / 100) * 360;
// 创建扇区
const sector = document.createElement('div');
sector.className = 'absolute inset-0 dashboard-sector';
sector.style.backgroundColor = category.color;
sector.style.clipPath = `polygon(50% 50%, ${50 + 50 * Math.cos(startAngle * Math.PI / 180)}% ${50 + 50 * Math.sin(startAngle * Math.PI / 180)}%, ${50 + 50 * Math.cos(endAngle * Math.PI / 180)}% ${50 + 50 * Math.sin(endAngle * Math.PI / 180)}%)`;
sector.title = `${category.name}: ${count} 个讨论 (${percentage.toFixed(1)}%)`;
sectorsContainer.appendChild(sector);
startAngle = endAngle;
});
// 渲染图例
legendContainer.innerHTML = '';
categories.forEach(category => {
const count = categoryCounts[category.id] || 0;
if (count === 0) return;
const percentage = (count / totalDiscussions) * 100;
const legendItem = document.createElement('div');
legendItem.className = 'flex items-center text-xs';
legendItem.innerHTML = `
<div class="w-3 h-3 rounded-full mr-2" style="background-color: ${category.color}"></div>
<span class="flex-1 truncate">${category.name}</span>
<span class="text-gray-500">${percentage.toFixed(1)}%</span>
`;
legendContainer.appendChild(legendItem);
});
}
// 渲染最近讨论
function renderRecentDiscussions() {
const discussions = getDiscussions();
const recentContainer = document.getElementById('recent-discussions');
// 按更新时间排序并取最近5个
const recentDiscussions = [...discussions]
.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
.slice(0, 5);
if (recentDiscussions.length === 0) {
recentContainer.innerHTML = `
<div class="text-center py-8 text-gray-500">
<p>暂无讨论记录</p>
</div>
`;
return;
}
recentContainer.innerHTML = '';
recentDiscussions.forEach(discussion => {
const category = getCategories().find(c => c.id === discussion.category);
const item = document.createElement('div');
item.className = 'p-4 border border-gray-200 rounded-lg hover:border-primary transition-all-300 cursor-pointer';
item.dataset.id = discussion.id;
// 提取讨论要点
const keyPoints = [];
discussion.contentBlocks.forEach(block => {
if (block.type === 'decision' && block.content) {
keyPoints.push(`<span class="text-purple-600">✓ ${block.content}</span>`);
} else if (block.type === 'todo') {
const pendingTasks = block.items.filter(item => !item.completed);
if (pendingTasks.length > 0) {
keyPoints.push(`<span class="text-yellow-600">• ${pendingTasks[0].text}</span>`);
}
}
});
item.innerHTML = `
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center">
<h4 class="font-medium text-gray-800">${discussion.title}</h4>
<span class="inline-flex items-center justify-center w-5 h-5 ml-2 text-xs bg-${category ? category.dimension === 'universal' ? 'blue' : category.dimension === 'industry' ? 'purple' : 'green'}-100 text-${category ? category.dimension === 'universal' ? 'blue' : category.dimension === 'industry' ? 'purple' : 'green'}-600 rounded-full">
${category ? category.dimension === 'universal' ? '万' : category.dimension === 'industry' ? '千' : '百'}
</span>
</div>
<div class="flex items-center mt-1 text-xs text-gray-500">
<span class="inline-block w-2 h-2 rounded-full mr-1" style="background-color: ${category ? category.color : '#ccc'}"></span>
<span>${category ? category.name : '未分类'}</span>
<span class="mx-1">•</span>
<span>${discussion.subject}</span>
<span class="mx-1">•</span>
<span>${formatDate(discussion.updatedAt)}</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-600 delete-discussion" data-id="${discussion.id}">
<i class="fa fa-trash-o"></i>
</button>
</div>
${keyPoints.length > 0 ? `
<div class="mt-2 text-sm">
<p>要点：${keyPoints.slice(0, 2).join('、')}${keyPoints.length > 2 ? '...' : ''}</p>
</div>
` : ''}
`;
// 添加点击事件
item.addEventListener('click', (e) => {
if (!e.target.closest('.delete-discussion')) {
openDiscussion(discussion.id);
}
});
recentContainer.appendChild(item);
});
// 添加删除事件
document.querySelectorAll('.delete-discussion').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const id = btn.dataset.id;
if (confirm('确定要删除这个讨论吗？')) {
deleteDiscussion(id);
renderDashboard();
renderDiscussions();
renderCategories();
showToast('讨论已删除', 'success');
}
});
});
}