app/templates/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GJB438C DOCX 规范分析</title>
    <link rel="stylesheet" href="/static/styles.css">
  </head>
  <body>
    <main class="shell">
      <section class="panel">
        <div class="header">
          <div>
            <p class="eyebrow">GJB438C / GJB2786</p>
            <h1>DOCX 规范分析</h1>
          </div>
          <div class="meta">
            <span>{{ skill_collection_count }} 个合集</span>
            <span>默认 {{ default_provider }}</span>
          </div>
        </div>

        <form id="skill-upload-form" class="collection-upload">
          <label>
            上传技能合集
            <input id="skill-archive" name="file" type="file" accept=".zip" required>
          </label>
          <button type="submit">上传合集</button>
          <p id="skill-upload-status" class="status-text" role="status">仅支持 zip 压缩包，解压后会进入 skills/ 目录</p>
        </form>

        <form id="upload-form" class="form">
          <label class="drop-zone">
            <input id="file" name="file" type="file" accept=".docx" required>
            <span class="drop-title">选择 DOCX 文件</span>
            <span class="drop-subtitle">上传后自动匹配技能规范并生成报告</span>
          </label>

          <div class="controls">
            <label>
              模型供应商
              <select name="provider">
                <option value="{{ default_provider }}">默认：{{ default_provider }}</option>
                <option value="intranet">intranet / qwen3-coder</option>
                <option value="deepseek">deepseek / deepseek-chat</option>
              </select>
            </label>
            <label>
              技能合集
              <select id="skill-collection" name="skill_collection">
                {% for collection in skill_collections %}
                  <option value="{{ collection.slug }}" {% if collection.slug == default_skill_collection %}selected{% endif %}>
                    {{ collection.label }}（{{ collection.skill_count }}）
                  </option>
                {% endfor %}
              </select>
            </label>
            <label class="checkbox">
              <input type="checkbox" name="use_model" value="true" checked>
              调用模型分析
            </label>
          </div>

          {# 预留后续版本：单个技能集合内的 skill 筛选功能
          <section class="skill-picker" aria-label="技能筛选">
            <div class="skill-picker-head">
              <label for="skill-filter">筛选技能</label>
              <span id="skill-count-label">{{ skill_count }} 项</span>
            </div>
            <input id="skill-filter" type="search" placeholder="输入技能名称、说明或 slug">
            <div id="skill-list" class="skill-list">
              {% for skill in skills %}
                <label class="skill-option" data-skill-item data-skill-key="{{ skill.slug }} {{ skill.name }} {{ skill.description }} {{ skill.use_when }}">
                  <input type="checkbox" name="selected_skills" value="{{ skill.slug }}">
                  <span class="skill-main">
                    <span class="skill-name">{{ skill.name }}</span>
                    <span class="skill-desc">{{ skill.description or skill.use_when }}</span>
                  </span>
                  <span class="skill-slug">{{ skill.slug }}</span>
                </label>
              {% endfor %}
            </div>
          </section>
          #}

          <button type="submit">开始分析</button>
        </form>

        <section id="result" class="result" hidden>
          <h2>分析结果</h2>
          <div class="progress-wrap">
            <div class="progress-track">
              <div id="analysis-progress" class="progress-bar" style="width: 0%"></div>
            </div>
            <p id="analysis-status" class="status-text">等待提交文件</p>
          </div>
          <p id="summary"></p>
          <div id="skills" class="skills"></div>
          <div class="downloads">
            <a id="download-review-docx" href="#">下载 DOCX 审查单</a>
            <a id="download-md" href="#">下载 Markdown 报告</a>
          </div>
        </section>
      </section>
    </main>
    <script src="/static/app.js"></script>
  </body>
</html>