Toolbox/public/tools/ai-lib/index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AI开发库</title>
    <link rel="icon" href="/icons/ai-lib.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="/common/common.css" />
    <link rel="stylesheet" href="/tools/cloud/theme/tokens.css" />
    <link rel="stylesheet" href="/tools/cloud/theme/components.css" />
    <link rel="stylesheet" href="/tools/ai-lib/ai-lib.css" />
  </head>
  <body class="theme-cloud">
    <main class="container">
      <section id="auth" class="card">
        <h2>🔐 登录AI开发库</h2>
        <div class="form">
          <input id="login-user" placeholder="👤 用户名" autocomplete="off" readonly />
          <input id="login-pass" placeholder="🔒 密码" type="password" autocomplete="off" readonly />
          <button id="btn-login" class="btn">🚀 登录</button>
        </div>
        <div id="auth-status" class="status" style="display:none"></div>
      </section>

      <section id="app" style="display:none">
        <div class="layout">
          <aside class="sidebar">
            <div class="sidebar-header">
              <h3>📦 系统列表</h3>
              <button id="btn-refresh-tree" class="btn-icon" data-tip="刷新系统树形">🔄</button>
              <button id="btn-manage-categories" class="btn-icon" data-tip="大类管理">🔧</button>
              <button id="btn-new-system" class="btn">➕ 新增系统</button>
            </div>
            <div id="systems" class="list"></div>
            


          </aside>
          
          <div class="main">
            <div class="toolbar">
            <span id="current-path">请选择系统 → 子模块 → 开发纪要</span>
            <div id="filter-major-category" class="filter-group">
              <label><input type="radio" name="filter-major" value="" checked> 全部</label>
              <span id="filter-major-dynamic"></span>
            </div>
          </div>
          
          <div id="system-detail" class="card" style="display:none">
            <h3>📦 系统详情</h3>
            <div class="form">
              <div class="form-row radio-group">
                 <span class="label">大类：</span>
                 <span id="sys-major-dynamic"></span>
              </div>
              <input id="sys-name" placeholder="🏷️ 系统名称" data-tip="系统名称，建议简洁唯一" />
              <textarea id="sys-intro" rows="3" placeholder="📝 系统简介" data-tip="系统简介：用途、边界与关键技术"></textarea>
              <button id="btn-save-system" class="btn">💾 保存系统</button>
            </div>
          </div>
            
            <div id="module-detail" class="card" style="display:none">
              <h3>🔧 子模块详情</h3>
              <div class="form">
                <input id="mod-name" placeholder="🏷️ 子模块名称" data-tip="子模块名称" />
                <input id="mod-desc" placeholder="📝 子模块说明" data-tip="子模块说明：功能与职责" />
                <input id="mod-addr" placeholder="🌐 服务器地址" data-tip="服务器地址或域名" />
                <input id="mod-port" placeholder="🔌 服务器端口" data-tip="端口号" />
                <input id="mod-code" placeholder="💻 代码类型" data-tip="代码类型或技术栈" />
                <input id="mod-deploy" placeholder="🚀 部署方式" data-tip="部署方式，如 Docker/K8s/物理机" />
              </div>
              <div class="form">
                <textarea id="mod-soft" rows="8" placeholder="📦 涉及部署软件和版本（多行）" data-tip="涉及部署软件及版本（每行一条）"></textarea>
                <button id="btn-save-module" class="btn">💾 保存子模块</button>
              </div>
            </div>
            
            <div id="note-detail" class="card" style="display:none">
              <h3>📝 开发纪要详情</h3>
              <div class="form">
                <select id="note-type" data-tip="纪要类型（需求/开发/部署/维护）">
                  <option value="需求">📋 需求</option>
                  <option value="开发">💻 开发</option>
                  <option value="部署">🚀 部署</option>
                  <option value="维护">🔧 维护</option>
                </select>
                <textarea id="note-content" rows="12" placeholder="📝 纪要内容（多行）" data-tip="纪要内容，支持多行文本"></textarea>
                <button id="btn-save-note" class="btn">💾 保存纪要</button>
              </div>
              
              <div class="attachment-section" style="margin-top: 24px;">
                <h4>📎 附件管理</h4>
                <div class="form">
                  <input type="file" id="attachment-file" multiple data-tip="选择要上传的附件，支持多选" />
                  <button id="btn-upload-attachment" class="btn">📤 上传选中文件</button>
                </div>
                <div id="upload-progress" style="margin-top: 16px;"></div>
                
                <div class="attachment-list" style="margin-top: 20px;">
                  <h5>📋 附件列表</h5>
                  <div id="attachments" class="list"></div>
                </div>
              </div>
            </div>
            

          </div>
        </div>
      </section>
    </main>

    <div class="modal-overlay" id="modal-overlay">
      <div class="modal" id="modal">
        <div class="modal-header">
          <h3 id="modal-title"></h3>
          <button class="modal-close" id="modal-close">×</button>
        </div>
        <div class="modal-body" id="modal-body"></div>
        <div class="modal-footer" id="modal-footer">
          <button class="btn btn-secondary" id="modal-cancel">取消</button>
          <button class="btn" id="modal-confirm">确认</button>
        </div>
      </div>
    </div>
    <div id="loading-overlay" class="loading-overlay" style="display:none">
      <div class="loading-box">
        <div class="loading-spinner"></div>
        <div id="loading-text">正在处理，请稍候...</div>
      </div>
    </div>

    <script src="/common/common.js"></script>
    <script src="/tools/ai-lib/ai-lib.js"></script>
  </body>
  </html>