zclaw_openfang/.superpowers/brainstorm/1909-1775055381/knowledge-base-layout.html

<h2>知识库管理 - UI 布局方案</h2>
<p class="subtitle">三种页面布局方案，请选择最适合的方案</p>

<div class="cards">
  <div class="card" data-choice="layout-a" onclick="toggleSelect(this)">
    <div class="card-image">
      <div style="background:#f8f9fa;border-radius:8px;padding:16px;font-size:12px;">
        <div class="mock-nav" style="background:#1a1a2e;color:#fff;padding:8px;margin:-8px -8px 8px;border-radius:4px;">
          知识库管理
        </div>
        <div style="display:flex;gap:8px;">
          <div style="width:200px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:8px;">
            <div style="font-weight:bold;margin-bottom:8px;color:#1890ff;">📁 行业分类</div>
            <div style="padding:4px 8px;background:#e6f7ff;border-radius:2px;margin-bottom:4px;">🏭 制造业</div>
            <div style="padding:4px 8px;margin-bottom:4px;">🏥 医疗健康</div>
            <div style="padding:4px 8px;margin-bottom:4px;">🎓 教育培训</div>
            <div style="padding:4px 8px;margin-bottom:4px;">👔 企业管理</div>
            <div style="padding:4px 8px;color:#999;">+ 新增分类</div>
          </div>
          <div style="flex:1;background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:8px;">
            <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
              <span style="font-weight:bold;">🏭 制造业 (24条)</span>
              <div>
                <span style="background:#1890ff;color:#fff;padding:2px 8px;border-radius:2px;font-size:11px;">+ 新增</span>
                <span style="background:#f0f0f0;padding:2px 8px;border-radius:2px;font-size:11px;margin-left:4px;">导入</span>
              </div>
            </div>
            <div style="border:1px solid #f0f0f0;border-radius:2px;padding:6px;margin-bottom:4px;">
              <b>注塑成型工艺参数指南</b><br>
              <span style="font-size:10px;color:#999;">关键词: 注塑, 工艺参数, 温度控制 | 更新于 2小时前</span>
            </div>
            <div style="border:1px solid #f0f0f0;border-radius:2px;padding:6px;margin-bottom:4px;">
              <b>模具设计常见问题集</b><br>
              <span style="font-size:10px;color:#999;">关键词: 模具, 设计, FAQ | 更新于 1天前</span>
            </div>
            <div style="border:1px solid #f0f0f0;border-radius:2px;padding:6px;">
              <b>QC 质检标准流程</b><br>
              <span style="font-size:10px;color:#999;">关键词: 质检, QC, 流程 | 更新于 3天前</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>A: 左树右表（经典管理布局）</h3>
      <p>左侧分类树 + 右侧条目列表。空间利用率高，浏览效率好。适合分类层级清晰的场景。</p>
    </div>
  </div>

  <div class="card" data-choice="layout-b" onclick="toggleSelect(this)">
    <div class="card-image">
      <div style="background:#f8f9fa;border-radius:8px;padding:16px;font-size:12px;">
        <div class="mock-nav" style="background:#1a1a2e;color:#fff;padding:8px;margin:-8px -8px 8px;border-radius:4px;">
          知识库管理
        </div>
        <div style="display:flex;gap:8px;margin-bottom:8px;">
          <span style="background:#1890ff;color:#fff;padding:4px 12px;border-radius:12px;font-size:11px;">全部 (68)</span>
          <span style="background:#f0f0f0;padding:4px 12px;border-radius:12px;font-size:11px;">🏭 制造业 (24)</span>
          <span style="background:#f0f0f0;padding:4px 12px;border-radius:12px;font-size:11px;">🏥 医疗健康 (18)</span>
          <span style="background:#f0f0f0;padding:4px 12px;border-radius:12px;font-size:11px;">🎓 教育培训 (15)</span>
          <span style="background:#f0f0f0;padding:4px 12px;border-radius:12px;font-size:11px;">👔 企业管理 (11)</span>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
          <div style="border:1px solid #e0e0e0;border-radius:4px;padding:8px;">
            <b>注塑成型工艺参数指南</b>
            <p style="font-size:10px;color:#666;margin:4px 0;">详细描述注塑成型的温度、压力、冷却时间等关键参数...</p>
            <span style="font-size:10px;color:#1890ff;">🏭 制造业</span>
            <span style="font-size:10px;color:#999;margin-left:8px;">引用 42 次</span>
          </div>
          <div style="border:1px solid #e0e0e0;border-radius:4px;padding:8px;">
            <b>药品 GMP 合规检查清单</b>
            <p style="font-size:10px;color:#666;margin:4px 0;">涵盖药品生产质量管理的完整合规要求...</p>
            <span style="font-size:10px;color:#52c41a;">🏥 医疗健康</span>
            <span style="font-size:10px;color:#999;margin-left:8px;">引用 38 次</span>
          </div>
          <div style="border:1px solid #e0e0e0;border-radius:4px;padding:8px;">
            <b>模具设计常见问题集</b>
            <p style="font-size:10px;color:#666;margin:4px 0;">汇总模具设计过程中的常见技术问题和解决方案...</p>
            <span style="font-size:10px;color:#1890ff;">🏭 制造业</span>
            <span style="font-size:10px;color:#999;margin-left:8px;">引用 27 次</span>
          </div>
          <div style="border:1px solid #e0e0e0;border-radius:4px;padding:8px;">
            <b>在线课程设计方法论</b>
            <p style="font-size:10px;color:#666;margin:4px 0;">系统化的在线教育课程设计和评估方法...</p>
            <span style="font-size:10px;color:#fa8c16;">🎓 教育培训</span>
            <span style="font-size:10px;color:#999;margin-left:8px;">引用 19 次</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>B: 卡片网格（标签筛选）</h3>
      <p>顶部标签切换 + 卡片网格展示。视觉友好，快速浏览内容概要。适合知识条目不多且偏内容展示的场景。</p>
    </div>
  </div>

  <div class="card" data-choice="layout-c" onclick="toggleSelect(this)">
    <div class="card-image">
      <div style="background:#f8f9fa;border-radius:8px;padding:16px;font-size:12px;">
        <div class="mock-nav" style="background:#1a1a2e;color:#fff;padding:8px;margin:-8px -8px 8px;border-radius:4px;">
          知识库管理
        </div>
        <div style="display:flex;gap:8px;margin-bottom:8px;">
          <div style="background:#1890ff;color:#fff;padding:4px 12px;border-radius:4px;font-size:11px;">📋 知识条目</div>
          <div style="background:#f0f0f0;padding:4px 12px;border-radius:4px;font-size:11px;">📂 分类管理</div>
          <div style="background:#f0f0f0;padding:4px 12px;border-radius:4px;font-size:11px;">📊 分析看板</div>
        </div>
        <div style="margin-bottom:8px;display:flex;gap:4px;">
          <input style="flex:1;padding:4px 8px;border:1px solid #d9d9d9;border-radius:4px;font-size:11px;" placeholder="搜索知识条目...">
          <select style="padding:4px 8px;border:1px solid #d9d9d9;border-radius:4px;font-size:11px;">
            <option>全部分类</option><option>制造业</option><option>医疗健康</option>
          </select>
          <select style="padding:4px 8px;border:1px solid #d9d9d9;border-radius:4px;font-size:11px;">
            <option>状态</option><option>活跃</option><option>已归档</option>
          </select>
        </div>
        <div style="border-collapse:collapse;width:100%;">
          <div style="display:flex;background:#fafafa;padding:6px;border:1px solid #f0f0f0;font-size:10px;font-weight:bold;">
            <span style="width:30px;">☑</span>
            <span style="flex:2;">标题</span>
            <span style="flex:1;">分类</span>
            <span style="flex:1;">关键词</span>
            <span style="width:60px;">引用</span>
            <span style="width:60px;">状态</span>
            <span style="width:80px;">更新时间</span>
            <span style="width:60px;">操作</span>
          </div>
          <div style="display:flex;padding:6px;border:1px solid #f0f0f0;border-top:0;font-size:10px;">
            <span style="width:30px;">☐</span>
            <span style="flex:2;font-weight:bold;">注塑成型工艺参数指南</span>
            <span style="flex:1;color:#1890ff;">🏭 制造业</span>
            <span style="flex:1;color:#999;">注塑, 工艺</span>
            <span style="width:60px;">42</span>
            <span style="width:60px;color:#52c41a;">活跃</span>
            <span style="width:80px;color:#999;">2h 前</span>
            <span style="width:60px;color:#1890ff;">编辑</span>
          </div>
          <div style="display:flex;padding:6px;border:1px solid #f0f0f0;border-top:0;font-size:10px;">
            <span style="width:30px;">☐</span>
            <span style="flex:2;font-weight:bold;">药品 GMP 合规检查清单</span>
            <span style="flex:1;color:#52c41a;">🏥 医疗</span>
            <span style="flex:1;color:#999;">GMP, 合规</span>
            <span style="width:60px;">38</span>
            <span style="width:60px;color:#52c41a;">活跃</span>
            <span style="width:80px;color:#999;">1d 前</span>
            <span style="width:60px;color:#1890ff;">编辑</span>
          </div>
          <div style="display:flex;padding:6px;border:1px solid #f0f0f0;border-top:0;font-size:10px;">
            <span style="width:30px;">☐</span>
            <span style="flex:2;font-weight:bold;">模具设计常见问题集</span>
            <span style="flex:1;color:#1890ff;">🏭 制造业</span>
            <span style="flex:1;color:#999;">模具, FAQ</span>
            <span style="width:60px;">27</span>
            <span style="width:60px;color:#52c41a;">活跃</span>
            <span style="width:80px;color:#999;">3d 前</span>
            <span style="width:60px;color:#1890ff;">编辑</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>C: 标签页表格（Ant Design 风格）</h3>
      <p>顶部标签页切换模块 + 标准表格。最符合现有 Admin V2 风格，信息密度高，适合批量操作。与现有页面一致。</p>
    </div>
  </div>
</div>