workbuddy-portal/workbuddy_portal/web/templates/users.html

{% extends "base.html" %}
{% block title %}用户管理 · {{ project_title }}{% endblock %}
{% block body %}

<div class="pagehead">
  <div>
    <h1>用户管理</h1>
    <p class="lead">门户在局域网可访问，因此必须靠账号隔离；这里维护账号、管理员身份与密码</p>
  </div>
  <div class="actions">
    <span class="tag accent">仅管理员可见</span>
  </div>
</div>

<div class="grid2">
  <section class="card">
    <h2>新建账号</h2>
    <form id="formNewUser">
      <label class="row"><span>用户名</span>
        <input name="username" maxlength="32" placeholder="登录名（≤32 字符）" autocomplete="off" spellcheck="false"></label>
      <label class="row"><span>显示名</span>
        <input name="display_name" maxlength="64" placeholder="留空则与用户名相同"></label>
      <label class="row"><span>密码</span>
        <input name="password" type="password" autocomplete="new-password"></label>
      <label class="row"><span>确认密码</span>
        <input name="password2" type="password" autocomplete="new-password"></label>
      <label class="row"><span>权限</span>
        <select name="is_admin">
          <option value="1">管理员（可管理用户）</option>
          <option value="0">普通账号（只读数据与日志）</option>
        </select>
      </label>
      <button class="btn primary" type="submit">创建账号</button>
      <p class="hint">密码至少 6 位、最多 128 位。普通账号不能用本页，也调不动用户管理接口。</p>
    </form>
  </section>

  <section class="card">
    <div class="cardhead">
      <h2>账号列表</h2>
      <span class="hint">共 {{ users|length }} 个</span>
    </div>
    <div class="tablewrap">
      <table class="tbl" id="userTable">
        <thead><tr><th class="num">ID</th><th>用户名</th><th>显示名</th><th>权限</th>
          <th>最后登录</th><th class="num">次数</th><th>操作</th></tr></thead>
        <tbody>
        {% for u in users %}
          <tr data-uid="{{ u.id }}" data-name="{{ u.username }}">
            <td class="num muted">{{ u.id }}</td>
            <td class="nowrap"><b>{{ u.username }}</b>
              {% if u.id == me.id %}<span class="tag accent">当前</span>{% endif %}</td>
            <td><input class="inp inp-sm" name="display_name" maxlength="64"
                       value="{{ u.display_name or '' }}" spellcheck="false"></td>
            <td>
              {# 不能取消自己的管理员身份，所以本人的下拉直接禁用（服务端也会再拦一次） #}
              <select class="inp inp-sm" name="is_admin" {{ 'disabled' if u.id == me.id }}>
                <option value="1" {{ 'selected' if u.is_admin }}>管理员</option>
                <option value="0" {{ 'selected' if not u.is_admin }}>普通</option>
              </select>
            </td>
            <td class="mono sm nowrap">{{ u.last_login_at or '—' }}</td>
            <td class="num">{{ u.login_count }}</td>
            <td class="nowrap">
              <button class="btn sm" type="button" data-act="save">保存</button>
              <button class="btn sm ghost" type="button" data-act="pwd">改密</button>
              {% if u.id != me.id %}
              <button class="btn sm danger" type="button" data-act="del">删除</button>
              {% endif %}
            </td>
          </tr>
        {% else %}
          <tr><td colspan="7" class="empty">还没有账号</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    <p class="hint">「改密」会依次询问新密码与确认；管理员不能取消自己的管理员身份，任何人也不能删除自己。</p>
  </section>
</div>

<section class="card">
  <div class="cardhead">
    <h2>用户操作审计</h2>
    <span class="hint">最近 20 条</span>
  </div>
  <div class="tablewrap scroll-y">
    <table class="tbl">
      <thead><tr><th>时间</th><th>操作者</th><th>动作</th><th>说明</th><th>IP</th></tr></thead>
      <tbody>
      {% for a in audits %}
        <tr>
          <td class="mono sm nowrap">{{ a.at[5:] if a.at else '' }}</td>
          <td>{{ a.actor or '—' }}</td>
          <td><span class="tag mute">{{ a.action }}</span></td>
          <td>{{ a.detail or '—' }}</td>
          <td class="mono sm">{{ a.ip or '' }}</td>
        </tr>
      {% else %}
        <tr><td colspan="5" class="empty">暂无用户操作记录</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</section>

{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
<script>
  WBU.bindForm('#formNewUser', '/api/users', {
    validate: function (d) {
      if (!d.username) return '用户名必填';
      return d.password === d.password2 ? null : '两次输入的密码不一致';
    }
  });

  // 行内操作走事件委托：表格动态渲染也不会丢绑定
  document.getElementById('userTable').addEventListener('click', function (e) {
    var btn = e.target.closest('button[data-act]');
    if (!btn) return;
    var row = btn.closest('tr'), uid = row.dataset.uid, name = row.dataset.name;
    var act = btn.dataset.act;
    var old = btn.textContent;
    btn.disabled = true;
    btn.textContent = '…';

    function done(p) {
      p.then(function (j) {
        if (j.ok === false) { WBU.say(j.message || '操作失败', 'error'); return; }
        WBU.say(j.message || '已保存', 'ok');
        window.setTimeout(function () { location.reload(); }, 900);
      }).catch(function (err) {
        if (String(err.message) !== 'unauthorized') WBU.say('请求失败：' + err.message, 'error');
      }).finally(function () { btn.disabled = false; btn.textContent = old; });
    }

    if (act === 'save') {
      var fields = {};
      fields.display_name = row.querySelector('[name=display_name]').value;
      var sel = row.querySelector('[name=is_admin]');
      if (sel && !sel.disabled) fields.is_admin = sel.value;
      done(WBU.post('/api/users/' + uid, fields));
    } else if (act === 'pwd') {
      var p1 = window.prompt('为用户「' + name + '」设置新密码（至少 6 位）');
      if (p1 === null) { btn.disabled = false; btn.textContent = old; return; }
      var p2 = window.prompt('再输入一次新密码以确认');
      if (p2 === null) { btn.disabled = false; btn.textContent = old; return; }
      if (p1 !== p2) { WBU.say('两次输入的密码不一致', 'warn'); btn.disabled = false; btn.textContent = old; return; }
      done(WBU.post('/api/users/' + uid, { password: p1, password2: p2 }));
    } else if (act === 'del') {
      if (!window.confirm('确定删除用户「' + name + '」？该操作不可撤销（其历史审计记录会保留）。')) {
        btn.disabled = false; btn.textContent = old; return;
      }
      done(WBU.post('/api/users/' + uid + '/delete', {}));
    } else {
      btn.disabled = false; btn.textContent = old;
    }
  });
</script>
{% endblock %}