Toolbox/public/tools/language_behavior_lock/index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>语言和行为冷静期</title>
    <link rel="stylesheet" href="/common/common.css" />
    <link rel="stylesheet" href="/tools/language_behavior_lock/language_behavior_lock.css" />
  </head>
  <body>
    <main class="page">
      <header class="hero">
        <div class="hero-main">
          <div>
            <h1>语言和行为冷静期</h1>
            <p>把发言、行为和证券先锁住，等情绪过后再决定</p>
          </div>
          <div class="hero-auth">
            <div id="auth-login-box" class="auth-login-inline">
              <input id="login-username" autocomplete="off" readonly />
              <input id="login-password" type="password" autocomplete="off" readonly />
              <button id="btn-login" class="btn btn-primary" type="button">登录</button>
            </div>
            <div id="auth-logged-box" style="display:none">
              <div class="auth-row">
                <div id="auth-current-user" class="auth-current-user"></div>
                <button id="btn-logout" class="btn" type="button">退出登录</button>
              </div>
            </div>
            <div id="auth-status" class="status"></div>
          </div>
        </div>
      </header>

      <div id="app-content" style="display:none">
        <section class="card">
          <h2>提交冷静期申请</h2>
          <form id="application-form">
            <div class="grid two">
              <label>类型
                <select id="entry-type" required>
                  <option value="speech">发言</option>
                  <option value="behavior">行为</option>
                  <option value="securities">证券</option>
                </select>
              </label>
              <label>标题
                <input id="entry-title" required placeholder="例如：今晚要不要去陌生饭局" />
              </label>
            </div>
            <label>内容
              <textarea id="entry-content" required placeholder="发言：把你想说的原话写下来；行为：把你想做的事写下来"></textarea>
            </label>

            <h3>核心三问</h3>
            <div class="grid one">
              <label>1️⃣ 这是冲动，还是计划？
                <div class="inline-risk-field">
                  <select id="q1" required>
                    <option value="">请选择</option>
                    <option value="impulse">冲动</option>
                    <option value="mixed">说不清</option>
                    <option value="plan">计划</option>
                  </select>
                  <input id="q1-risk-note" required placeholder="请写下你为什么这样判断" />
                </div>
              </label>
              <label>2️⃣ 不做会不会后悔？
                <div class="inline-risk-field">
                  <select id="q2" required>
                    <option value="">请选择</option>
                    <option value="no_regret">大概率不会</option>
                    <option value="maybe_regret">可能会</option>
                    <option value="must_do">很可能后悔</option>
                  </select>
                  <input id="q2-risk-note" placeholder="选择后两项时，请用文字写下理由" style="display:none" />
                </div>
              </label>
              <label>3️⃣ 最坏情况我能接受吗？
                <div class="inline-risk-field">
                  <select id="q3" required>
                    <option value="">请选择</option>
                    <option value="cannot_accept">不能接受</option>
                    <option value="hard_accept">勉强接受</option>
                    <option value="accept">可以接受</option>
                  </select>
                  <input id="q3-risk-note" placeholder="涉及危害时，写下你担心的后果" style="display:none" />
                </div>
              </label>
            </div>

            <h3>风险维度</h3>
            <div class="grid two">
              <label>影响范围
                <select id="impact-scope" required>
                  <option value="">请选择</option>
                  <option value="self">仅自己</option>
                  <option value="single">一对一</option>
                  <option value="group">多人/公开场景</option>
                </select>
              </label>
              <label>可逆性
                <select id="reversible" required>
                  <option value="">请选择</option>
                  <option value="high">容易撤回</option>
                  <option value="medium">部分可补救</option>
                  <option value="low">几乎不可逆</option>
                </select>
              </label>
              <label>主要后果类型
                <select id="cost-type" required>
                  <option value="">请选择</option>
                  <option value="relationship">关系</option>
                  <option value="reputation">信誉</option>
                  <option value="money">金钱</option>
                  <option value="safety">安全</option>
                </select>
              </label>
              <label>当前情绪强度（1-5）
                <select id="emotion-level" required>
                  <option value="">请选择</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                </select>
              </label>
            </div>

            <h3>自动评估</h3>
            <div class="grid one">
              <div id="risk-box" class="result-box">请选择完整信息后自动评估</div>
              <label>冷静期时长（分钟）
                <input id="cooling-minutes" type="number" min="5" step="1" required />
              </label>
            </div>

            <h3>黑名单关键词命中提醒</h3>
            <div id="keyword-hit-box" class="warn" style="display:none"></div>

            <h3>最终确认</h3>
            <div class="check-grid" id="commit-final">
              <label><input type="checkbox" value="1" />我已完整填写，不跳步决策</label>
              <label><input type="checkbox" value="1" />我接受冷静期内不能执行最终动作</label>
              <label><input type="checkbox" value="1" />我愿意对最终选择承担责任</label>
            </div>

            <div class="form-actions">
              <button id="btn-save-draft" class="btn" type="button">保存草稿</button>
              <button id="btn-load-draft" class="btn" type="button">继续填写草稿</button>
              <button id="btn-clear-draft" class="btn" type="button">清空草稿</button>
              <button id="btn-open-keyword-settings" class="btn" type="button">设置</button>
            </div>
            <button id="btn-submit" class="btn btn-primary" type="submit">提交并开始冷静期</button>
            <div id="form-status" class="status"></div>
          </form>
        </section>

        <section class="card">
          <h2>当前冷静期与结果</h2>
          <div id="decision-panel" class="decision"></div>
        </section>

        <section class="card">
          <h2>历史记录</h2>
          <div class="history-toolbar">
            <label>搜索
              <input id="history-search" placeholder="标题/内容/结果" />
            </label>
            <label>类型
              <select id="history-type">
                <option value="all">全部</option>
                <option value="speech">发言</option>
                <option value="behavior">行为</option>
                <option value="securities">证券</option>
              </select>
            </label>
            <label>状态
              <select id="history-status">
                <option value="all">全部</option>
                <option value="cooling">冷静中</option>
                <option value="sent">已发送</option>
                <option value="done">已执行</option>
                <option value="postponed">已延后</option>
                <option value="abandoned">已放弃</option>
              </select>
            </label>
            <button id="btn-history-reset" class="btn" type="button">重置筛选</button>
          </div>
          <div id="history-list" class="list"></div>
        </section>
      </div>
    </main>

    <div id="app-modal" class="modal-mask" style="display:none">
      <div class="modal-panel">
        <div id="modal-title" class="modal-title"></div>
        <div id="modal-message" class="modal-message"></div>
        <div id="modal-actions" class="modal-actions"></div>
      </div>
    </div>
    <script src="/tools/language_behavior_lock/language_behavior_lock.js"></script>
  </body>
</html>