<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="本地开发环境启动排查清单：通用建议，非自动诊断，无网络请求。"
    />
    <title>开发环境启动排查清单（本地）</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrap">
      <div class="banner" role="note">
        <strong>重要说明：</strong
        >本工具提供通用排查建议与勾选记录，<strong>不是自动诊断</strong>，也<strong>不是任何云平台的官方工具</strong>。「已检查」不等于「已解决」。请勿关闭安全措施；请勿向本页或公开渠道上传 HAR、Cookie、令牌或未脱敏日志。
      </div>

      <header class="hero">
        <h1>开发环境启动排查清单</h1>
        <p class="sub">
          离线本地小工具：按症状分流建议，记录你已做的检查。双击本目录中的
          <code>index.html</code> 即可使用，无需安装、无需登录。
        </p>
        <div class="badges" aria-label="特性标签">
          <span class="badge">纯本地</span>
          <span class="badge">无遥测</span>
          <span class="badge">无第三方依赖</span>
          <span class="badge">可导出 Markdown</span>
        </div>
      </header>

      <section class="panel" aria-labelledby="symptom-heading">
        <h2 id="symptom-heading">1. 选择你看到的症状</h2>
        <p class="muted">可多选。多选时会分区展示各自建议，不会把「自行 clone」塞进整页空白流程。</p>
        <div id="symptom-list" class="symptom-list"></div>
        <div id="diff-hint" class="diff-hint">
          <strong>如何区分：</strong>「整页空白」通常几乎看不到界面或明确错误；「工作区目录为空」是界面/工作区已出现，但文件树没有预期内容；「资源加载慢」则是长时间转圈或半加载。若不确定，可先只选最接近的一项。
        </div>
      </section>

      <section class="panel" aria-labelledby="steps-heading">
        <div class="toolbar">
          <h2 id="steps-heading">2. 按步骤排查并标记状态</h2>
          <p id="progress-text" class="progress" aria-live="polite"></p>
        </div>
        <p class="muted">
          每项可标为「待验证 / 已检查 / 不适用」。状态仅表示你的人工核对进度。
        </p>
        <div id="steps-host"></div>
      </section>

      <section class="panel" aria-labelledby="notes-heading">
        <h2 id="notes-heading">3. 备注（可选，请勿填写秘密）</h2>
        <p class="muted">
          只写脱敏后的现象描述。不要填写密码、令牌、Cookie、手机号或完整含密钥的链接。
        </p>
        <label class="visually-hidden" for="notes">备注</label>
        <textarea
          id="notes"
          maxlength="2000"
          placeholder="例如：约 14:10 从任务入口进入；换浏览器后仍空白；未保存日志。"
        ></textarea>
      </section>

      <section class="panel" aria-labelledby="export-heading">
        <h2 id="export-heading">4. 保存、导出与重置</h2>
        <p class="muted">
          勾选进度默认写入本机浏览器 localStorage，可随时清除。导出前请预览并自行脱敏。
        </p>
        <div class="actions">
          <button type="button" class="primary" id="btn-export-preview">
            预览 Markdown
          </button>
          <button type="button" id="btn-export-download">下载 Markdown</button>
          <button type="button" id="btn-reset">重置当前进度</button>
          <button type="button" class="danger" id="btn-clear-storage">
            清除本机保存
          </button>
        </div>
        <p id="save-hint" class="save-hint" aria-live="polite"></p>
        <div id="export-preview" class="export-preview" hidden>
          <div class="toolbar">
            <strong>导出预览</strong>
            <button type="button" id="btn-hide-preview">隐藏预览</button>
          </div>
          <pre id="export-preview-text"></pre>
        </div>
      </section>

      <footer class="site-foot">
        <p>
          本页面不会发起网络请求、不会读取剪贴板或本机其他文件。关闭浏览器后，除你主动保存在
          localStorage 中的勾选进度外，无其他云端副本。源码与说明见同目录
          <code>README.md</code>。
        </p>
      </footer>
    </div>

    <style>
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space:nowrap;
        border: 0;
      }
    </style>
    <script src="checklist-core.js"></script>
    <script src="app.js"></script>
  </body>
</html>