docs: 新增演示登录页与重截截图指引（干净环境，替代含企业内网信息截图）

2026-09-24 15:59:30 +08:00
parent 419ab656d0
commit 48a532927c
2 changed files with 154 additions and 0 deletions
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>安全登录 · 示例演示页</title>
+<style>
+  :root{--brand:#2563eb}
+  *{box-sizing:border-box;margin:0;padding:0}
+  body{min-height:100vh;display:flex;align-items:center;justify-content:center;
+       font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
+       background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 100%);color:#1f2937}
+  .card{width:400px;max-width:92vw;background:#fff;border-radius:16px;
+        padding:40px 36px;box-shadow:0 18px 40px rgba(31,41,55,.14)}
+  .logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#4f46e5);
+        display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;
+        margin-bottom:18px;user-select:none}
+  h1{font-size:22px;font-weight:700;margin-bottom:4px}
+  .sub{color:#6b7280;font-size:13px;margin-bottom:26px}
+  label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px}
+  input[type=text],input[type=password]{width:100%;height:44px;padding:0 14px;
+       border:1px solid #d1d5db;border-radius:10px;font-size:14px;outline:none;background:#f9fafb}
+  input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
+  .row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 22px;font-size:13px}
+  .row a{color:var(--brand);text-decoration:none}
+  button{width:100%;height:46px;border:none;border-radius:10px;background:var(--brand);color:#fff;
+         font-size:15px;font-weight:600;cursor:pointer;letter-spacing:2px}
+  button:hover{background:#1d4ed8}
+  .foot{text-align:center;color:#9ca3af;font-size:12px;margin-top:22px}
+</style>
+</head>
+<body>
+  <form class="card" id="loginForm">
+    <div class="logo">↗</div>
+    <h1>安全登录</h1>
+    <div class="sub">示例演示页面 · 仅用于功能说明</div>
+
+    <label for="username">用户名 / 邮箱</label>
+    <input type="text" id="username" name="username" placeholder="输入用户名或邮箱"
+           autocomplete="username" spellcheck="false">
+
+    <label for="password">密码</label>
+    <input type="password" id="password" name="password" placeholder="输入密码"
+           autocomplete="current-password">
+
+    <div class="row">
+      <label style="margin:0;font-weight:400;display:flex;align-items:center;gap:6px">
+        <input type="checkbox" name="remember"> 记住我
+      </label>
+      <a href="javascript:void(0)" onclick="return false">忘记密码？</a>
+    </div>
+
+    <button type="submit" id="loginBtn">登&nbsp;&nbsp;录</button>
+
+    <div id="tip" class="foot"></div>
+  </form>
+
+  <script>
+    // 仅为演示停留页面：提交不真实跳转，并回显填充结果，方便截图。
+    document.getElementById('loginForm').addEventListener('submit', function (e) {
+      e.preventDefault();
+      var u = document.getElementById('username').value;
+      var p = document.getElementById('password').value;
+      document.getElementById('tip').textContent =
+        '（演示）登录请求已发出 · 用户名=' + (u ? '已填写' : '空') + ' · 密码=' + (p ? '已填写' : '空');
+    });
+  </script>
+</body>
+</html>
@@ -0,0 +1,85 @@
+# 重截商店截图指引 — 演示环境（无企业敏感信息）
+
+> 目标：在**干净、无任何企业标识**的演示环境里重截 5 张 1280×800 商店截图，替换掉现有一批含内网域名/工号/品牌标识的 `截图/` 原图。
+> 演示页已生成：`cws-store/demo/demo-login.html`。所有步骤只使用**虚拟演示数据**。
+
+---
+
+## 0. 红线清单（截图里绝对不能出现）
+
+- ❌ 任何 `*.gientech.com` 域名、`中电金信 / GienTech` 字样或 Logo
+- ❌ 真实工号/账号（如 `P6006197`）、内网 IP（如 `10.64.16.158`）、内部系统名
+- ❌ 你的个人书签、真实导出的数据文件、真实通讯记录
+- ✅ 只出现：`127.0.0.1 / localhost` 演示地址、虚拟账号（如 `demo`）、虚拟密码（如 `Demo@123`）
+
+---
+
+## 第 0 步：本地起一个 HTTP 服务，打开演示页
+
+二选一，任选其一（本机 `python` 更通用）：
+
+```powershell
+# 方式 A：Python（若已安装）
+cd "e:\gitea\Chrome extension\auto-login\cws-store\demo"
+python -m http.server 8080
+# 然后浏览器访问：http://127.0.0.1:8080/demo-login.html
+```
+
+```powershell
+# 方式 B：Node（项目内已带 node_modules）
+cd "e:\gitea\Chrome extension\auto-login\cws-store\demo"
+npx http-server -p 8080
+# 访问同上：http://127.0.0.1:8080/demo-login.html
+```
+
+> 若 8080 被占用，换成 8090 等任意空闲端口，后面地址同步改即可。
+> 屏幕缩放建议临时设为 100%，截图再缩放能保持最清晰。
+
+---
+
+## 第 1 步：在扩展里添加一条"演示配置"
+
+1. 侧边栏（Auto Login Manager）中进入 **添加配置**。
+2. **域名/URL 匹配规则**：先打开上面演示页后，直接点"**填入当前域名**"，会填入 `127.0.0.1`（或 `localhost`）。
+3. **用户名**：`demo`（虚拟）
+4. **密码**：`Demo@123`（虚拟；填充后可用 👁 切到掩码星号再截图，观感更专业）
+5. 别名：`演示环境`，保存。
+
+---
+
+## 第 2 步：先在工作里验证自动填充可用（再截图）
+
+1. 保持演示页为当前标签页，侧边栏选中"演示环境"配置，点"**一键填充**"。
+2. 确认演示页用户名/密码被自动填入、登录按钮可点。
+3. 若提示"当前域名未匹配"，检查配置的 URL 匹配规则是否含 `127.0.0.1`/`localhost`（与地址栏一致）。
+4. 验证通过后再进入第 3 步截图（避免截到失败画面）。
+
+---
+
+## 第 3 步：按顺序截取 5 张（浏览器最大化，按需 Ctrl+Shift+B 隐藏书签栏）
+
+| # | 文件名（建议） | 画面内容 | 操作要点 |
+|---|---|---|---|
+| 1 | `01-sidebar.png` | 侧边栏主界面：配置列表（含演示环境） | 打开演示页，侧边栏停在列表页，无需填充 |
+| 2 | `02-add-config.png` | "添加配置"弹窗 | 打开演示页点"填入当前域名"，其余留空或占位 |
+| 3 | `03-edit-config.png` | "编辑配置"弹窗 | 显示演示账号；密码保持掩码/星号 |
+| 4 | `04-autofill-demo.png` | **核心功能**：演示页被自动填充 | 点"一键填充"后立即截图，用户名 `demo` 已填入，密码掩码 |
+| 5 | `05-encrypt-export.png` | 加密导出 / 解密导入对话框 | 侧边栏"加密导出"，文件密码留空的干净界面 |
+
+> 每张都含两部分：左侧 = 演示登录页，右侧 = 扩展侧边栏，正好展示真实使用场景。
+> 密码一律掩码（星号/圆点），不填明文实密码；演示密码本身也是虚拟的。
+
+---
+
+## 第 4 步：把截图放回，交给我处理
+
+1. 将 5 张 PNG 放入原 `e:\gitea\Chrome extension\auto-login\截图\` 目录（或单独建一个 `截图-demo\`）。
+2. 告诉我已放好，我会：统一等比缩放到 **1280×800** → 重命名 `screenshot-1…5.png` → 替换进 `cws-store/screenshots/` → 复核内容合规。
+
+---
+
+## 常见问题
+
+- **Q：演示页上自动填充没反应？** A：确认当前标签页就是演示页、配置 URL 匹配规则与地址栏 host 一致（`127.0.0.1` 或 `localhost` 二选一，别混填）。
+- **Q：一键填充后想切回掩码截图？** A：在密码框点一下，部分浏览器会建议保存，用 👁 图标或重载前把 value 置掩码；截图只需展示"已填充"状态即可。
+- **Q：侧边栏没显示？** A：点工具栏扩展图标固定，或用扩展设置"在浏览器侧边栏打开"。