feat: 音视频/文件传输 + 产品 UX 改进 + 镜像源可切换

媒体链路（生产 HTTPS 下可用，含降级）
- 音频(听)：PulseAudio + KasmVNC 工具条，开箱即用
- 麦克风(说)：virtmic 管道源已就绪，运行时需 HTTPS（非 HTTPS 前端提示）
- 摄像头(视频)：docker.ts 条件化 v4l2 设备直通 + 加 video 组；无设备/无 HTTPS 时优雅降级，音频麦克风不受影响
- WOC_VIDEO_DEVICES 显式指定或经 /host-dev 自动探测

文件传输（原生拖拽）
- 面板侧拖拽上传 + 下载：dockerode putArchive/getArchive 到实例 ~/Desktop（持久卷）
- 纯 JS 单文件 tar 编解码（免依赖），文本/二进制均无损；全程走面板鉴权与权限校验

安全 & UX
- 默认密码告警条 + mustChangePassword 追踪（兼容旧账号文件迁移）
- 会话过期(401) 自动跳登录；桌面连接 loading 态
- 停止/未创建实例一键启动（新增 /api/admin/instances/:id/start）
- 统一牛奶布艺弹窗 + Toast，替换 Admin 原生 alert/confirm/prompt
- 密码可见切换；实例重命名；退出二次确认；空状态改用品牌终端图标

其它
- gen-icons 生成终端风格图标（此前仅空白绿块，影响 Docker/CI 产物）
- 镜像源可切换 WOC_IMAGE_PREFIX（国内反代/ACR）；品牌名「云微」
- 文档：.env.example / docker-compose 增加音视频(v4l2loopback/HTTPS)、镜像源、视频设备说明

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.env.example

@@ -27,3 +27,19 @@ WOC_TZ=Asia/Shanghai
 # 面板对外端口（宿主侧，默认用冷门端口避免冲突；容器内固定 8080）。
 # 面板是唯一对外入口；微信实例不直接对宿主暴露，由面板反向代理。
 WOC_HTTP_PORT=36080
+
+# ── 音频 / 麦克风 / 摄像头 ───────────────────────────────────
+# 音频(听)：开箱即用，进入桌面后点 KasmVNC 左侧工具条的扬声器开启。
+# 麦克风(说) / 摄像头(视频)：浏览器要求"安全上下文"，即必须通过 HTTPS 访问面板
+#   （或 localhost）。生产环境务必给面板套 HTTPS（反代/证书），否则浏览器会禁用麦克风与摄像头。
+#
+# 摄像头还需要宿主提供一个虚拟视频设备（v4l2loopback）：
+#   1) 宿主安装并加载内核模块：
+#        Ubuntu/Debian:  sudo apt install v4l2loopback-dkms && sudo modprobe v4l2loopback
+#        （飞牛/其它发行版若自带 v4l2loopback 同理 modprobe；没有则摄像头不可用，其余功能正常）
+#   2) 确认出现了 /dev/videoN 设备。
+#   3) 二选一让实例容器拿到该设备：
+#        a) 自动：保留 compose 里的 `/dev:/host-dev:ro` 挂载，面板会自动探测并映射；
+#        b) 显式：在下面列出设备（逗号分隔），并可删掉那条 /host-dev 挂载。
+# 留空 = 不映射摄像头（音频/麦克风不受影响）。
+WOC_VIDEO_DEVICES=

.gitignore

@@ -140,3 +140,4 @@ dist
 # WechatOnCloud: 面板账号数据（含密码哈希，勿提交）
 /data-panel/
 /.claude
+.DS_Store

docker-compose.yml

@@ -18,6 +18,9 @@ services:
       - PUID=${WOC_PUID:-1000}
       - PGID=${WOC_PGID:-1000}
       - TZ=${WOC_TZ:-Asia/Shanghai}
+      # 摄像头直通：逗号分隔的宿主视频设备（如 /dev/video0）。留空则自动探测（见下方 /host-dev 挂载）或禁用摄像头。
+      # 启用前需在宿主加载 v4l2loopback 内核模块。详见 .env.example。
+      - WOC_VIDEO_DEVICES=${WOC_VIDEO_DEVICES:-}
       # 面板首个管理员账号（仅首次启动、无账号文件时写入；务必改掉默认密码）
       - PANEL_ADMIN_USER=${WOC_USER:-admin}
       - PANEL_ADMIN_PASSWORD=${WOC_PASSWORD:-wechat}
@@ -29,6 +32,9 @@ services:
       # 面板经 docker 引擎创建/启动/删除微信实例容器、exec 触发下载、读取进度。
       # 注意：docker.sock 等同宿主 root 权限，故实例增删仅限管理员，docker API 绝不暴露给前端。
       - /var/run/docker.sock:/var/run/docker.sock
+      # 摄像头自动探测（可选）：把宿主 /dev 只读挂进来，面板据此发现 /dev/videoN 并映射给实例。
+      # 不想自动探测就删掉此行，改用上面的 WOC_VIDEO_DEVICES 显式指定。
+      - /dev:/host-dev:ro
 
     ports:
       - "${WOC_HTTP_PORT:-36080}:8080"   # 面板 = 唯一对外入口

panel/server/src/docker.ts

@@ -1,4 +1,5 @@
 import { hostname } from 'node:os';
+import { existsSync, readdirSync } from 'node:fs';
 import Docker from 'dockerode';
 import type { Instance } from './store.js';
 
@@ -30,6 +31,32 @@ export async function ensureNetwork(): Promise<string | null> {
   return networkName;
 }
 
+// 摄像头直通：把宿主的 v4l2 视频设备映射进实例容器
+// （浏览器摄像头 → KasmVNC → 容器内 /dev/videoN(v4l2loopback) → 微信）。
+// 来源优先级：
+//   1) WOC_VIDEO_DEVICES 显式指定（逗号分隔，如 /dev/video0,/dev/video1）——Ubuntu/无法自动探测时用；
+//   2) 自动探测：把宿主 /dev 以只读挂到面板的 /host-dev（compose 可选），扫描其中的 videoN。
+// 一个都找不到则返回空：音频/麦克风不受影响，仅摄像头不可用（优雅降级）。
+function videoDevices(): string[] {
+  const explicit = (process.env.WOC_VIDEO_DEVICES || '')
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  if (explicit.length) return explicit;
+  for (const dir of ['/host-dev', '/dev']) {
+    try {
+      if (!existsSync(dir)) continue;
+      const vids = readdirSync(dir)
+        .filter((n) => /^video\d+$/.test(n))
+        .map((n) => `/dev/${n}`); // 宿主侧设备路径
+      if (vids.length) return vids;
+    } catch {
+      /* 无权限/不可读，忽略 */
+    }
+  }
+  return [];
+}
+
 function envList(inst: Instance): string[] {
   return [
     `PUID=${PUID}`,
@@ -62,19 +89,27 @@ export async function runInstance(inst: Instance): Promise<void> {
   } catch {
     /* 不存在，正常 */
   }
+  // 摄像头设备（探测不到则为空数组 → 仅摄像头不可用，音频/麦克风照常）
+  const vids = videoDevices();
+  const hostConfig: Docker.HostConfig = {
+    Binds: [`${inst.volumeName}:/config`],
+    NetworkMode: net || undefined,
+    SecurityOpt: ['seccomp=unconfined'],
+    ShmSize: SHM_SIZE,
+    RestartPolicy: { Name: 'unless-stopped' },
+  };
+  if (vids.length) {
+    hostConfig.Devices = vids.map((d) => ({ PathOnHost: d, PathInContainer: d, CgroupPermissions: 'rwm' }));
+    hostConfig.GroupAdd = ['video']; // 让容器内 abc 用户能访问 /dev/videoN
+    console.log(`[docker] 实例 ${inst.id} 挂载摄像头设备: ${vids.join(', ')}`);
+  }
   const container = await docker.createContainer({
     name: inst.containerName,
     Image: WECHAT_IMAGE,
     Hostname: inst.containerName,
     Env: envList(inst),
     ExposedPorts: { '3000/tcp': {} },
-    HostConfig: {
-      Binds: [`${inst.volumeName}:/config`],
-      NetworkMode: net || undefined,
-      SecurityOpt: ['seccomp=unconfined'],
-      ShmSize: SHM_SIZE,
-      RestartPolicy: { Name: 'unless-stopped' },
-    },
+    HostConfig: hostConfig,
   });
   await container.start();
 }
@@ -178,6 +213,79 @@ export async function pullImage(onProgress?: (line: any) => void): Promise<void>
   });
 }
 
+// ---------- 文件中转（上传/下载） ----------
+// 中转目录 = abc 家目录下的 Desktop（/config 持久卷）。上传落这里，微信文件选择器可直接选到；
+// 反向：把微信收到的文件另存到桌面，即可在面板里下载。
+const TRANSFER_DIR = '/config/Desktop';
+
+// 极简单文件 tar 编码（putArchive 需要 tar；避免引入第三方依赖）。
+function tarSingleFile(name: string, content: Buffer): Buffer {
+  const h = Buffer.alloc(512, 0);
+  h.write(name.slice(0, 100), 0, 'utf8'); // name
+  h.write('0000644\0', 100); // mode
+  h.write('0001750\0', 108); // uid 1000(octal 1750)
+  h.write('0001750\0', 116); // gid 1000
+  h.write(content.length.toString(8).padStart(11, '0') + '\0', 124); // size
+  h.write('00000000000\0', 136); // mtime
+  h.write('        ', 148); // checksum 占位（8 空格）
+  h.write('0', 156); // typeflag 普通文件
+  h.write('ustar\0', 257);
+  h.write('00', 263);
+  let sum = 0;
+  for (let i = 0; i < 512; i++) sum += h[i];
+  h.write(sum.toString(8).padStart(6, '0') + '\0 ', 148); // 真实校验和
+  const pad = (512 - (content.length % 512)) % 512;
+  return Buffer.concat([h, content, Buffer.alloc(pad, 0), Buffer.alloc(1024, 0)]);
+}
+
+// 校验文件名为安全 basename（防路径穿越）。
+function safeName(name: string): boolean {
+  return !!name && name.length <= 200 && !name.includes('/') && !name.includes('\0') && name !== '.' && name !== '..';
+}
+
+export async function uploadToInstance(inst: Instance, name: string, content: Buffer): Promise<void> {
+  if (!safeName(name)) throw new Error('文件名不合法');
+  await execCapture(inst, ['sh', '-c', `mkdir -p ${TRANSFER_DIR}`]); // abc 家目录可写
+  const c = docker.getContainer(inst.containerName);
+  await c.putArchive(tarSingleFile(name, content), { path: TRANSFER_DIR });
+}
+
+export interface TransferFile {
+  name: string;
+  size: number;
+}
+export async function listInstanceFiles(inst: Instance): Promise<TransferFile[]> {
+  const out = await execCapture(inst, [
+    'sh',
+    '-c',
+    `find ${TRANSFER_DIR} -maxdepth 1 -type f -printf '%f\\t%s\\n' 2>/dev/null`,
+  ]);
+  return out
+    .split('\n')
+    .filter(Boolean)
+    .map((line) => {
+      const [name, size] = line.split('\t');
+      return { name, size: Number(size) || 0 };
+    });
+}
+
+export async function downloadFromInstance(inst: Instance, name: string): Promise<Buffer> {
+  if (!safeName(name)) throw new Error('文件名不合法');
+  const c = docker.getContainer(inst.containerName);
+  const stream = (await c.getArchive({ path: `${TRANSFER_DIR}/${name}` })) as NodeJS.ReadableStream;
+  const chunks: Buffer[] = [];
+  await new Promise<void>((resolve, reject) => {
+    stream.on('data', (d: Buffer) => chunks.push(d));
+    stream.on('end', () => resolve());
+    stream.on('error', reject);
+  });
+  const tar = Buffer.concat(chunks);
+  if (tar.length < 512) return Buffer.alloc(0);
+  const sizeStr = tar.toString('ascii', 124, 135).replace(/\0/g, '').trim();
+  const size = parseInt(sizeStr, 8) || 0;
+  return tar.subarray(512, 512 + size);
+}
+
 // 实例容器名（供反代构造 target）。
 export function instanceTarget(inst: Instance): string {
   return `http://${inst.containerName}:3000`;

panel/server/src/index.ts

@@ -24,6 +24,7 @@ import {
   userCanAccess,
   createInstance,
   removeInstance as removeInstanceRecord,
+  renameInstance,
   setInstanceUsers,
   publicInstance,
   type User,
@@ -38,6 +39,9 @@ import {
   triggerWechat,
   wechatStatus,
   instanceTarget,
+  uploadToInstance,
+  listInstanceFiles,
+  downloadFromInstance,
 } from './docker.js';
 import { createSession, getSession, destroySession, destroyUserSessions } from './sessions.js';
 
@@ -56,6 +60,8 @@ initStore();
 
 const app = Fastify({ logger: true, trustProxy: true });
 await app.register(cookie);
+// 文件上传走原始二进制（前端以 application/octet-stream 直传 File）
+app.addContentTypeParser('application/octet-stream', { parseAs: 'buffer' }, (_req, body, done) => done(null, body));
 
 // ---------- 鉴权辅助 ----------
 function currentUser(req: FastifyRequest): User | null {
@@ -245,6 +251,30 @@ app.delete('/api/admin/instances/:id', async (req, reply) => {
   return { ok: true };
 });
 
+// 重命名实例（仅管理员）：只改显示名，不动容器/卷。
+app.post('/api/admin/instances/:id/rename', async (req, reply) => {
+  if (!requireAdmin(req, reply)) return;
+  const { name } = (req.body as any) ?? {};
+  try {
+    return { instance: renameInstance((req.params as any).id, String(name ?? '')) };
+  } catch (e: any) {
+    return reply.code(400).send({ error: e.message });
+  }
+});
+
+// 启动/重启实例容器（仅管理员）：容器停止或被删后，一键拉起（不重建数据卷）。
+app.post('/api/admin/instances/:id/start', async (req, reply) => {
+  if (!requireAdmin(req, reply)) return;
+  const inst = findInstance((req.params as any).id);
+  if (!inst) return reply.code(404).send({ error: '实例不存在' });
+  try {
+    await ensureRunning(inst);
+    return { ok: true };
+  } catch (e: any) {
+    return reply.code(500).send({ error: '启动失败：' + (e?.message || e) });
+  }
+});
+
 // 实例侧：设置该实例可被哪些账户访问
 app.post('/api/admin/instances/:id/users', async (req, reply) => {
   if (!requireAdmin(req, reply)) return;
@@ -258,6 +288,54 @@ app.post('/api/admin/instances/:id/users', async (req, reply) => {
   }
 });
 
+// ---------- 文件中转（有访问权限即可用；走面板鉴权，不额外暴露） ----------
+// 上传：原始二进制直传，落到实例 ~/Desktop，微信文件选择器可直接选到。
+app.post('/api/instances/:id/upload', { bodyLimit: 512 * 1024 * 1024 }, async (req, reply) => {
+  const u = requireAuth(req, reply);
+  if (!u) return;
+  const id = (req.params as any).id;
+  if (!userCanAccess(u, id)) return reply.code(403).send({ error: '无权访问该实例' });
+  const name = String((req.query as any)?.name || '').trim();
+  const body = req.body as Buffer;
+  if (!Buffer.isBuffer(body) || body.length === 0) return reply.code(400).send({ error: '空文件或格式错误' });
+  try {
+    await uploadToInstance(findInstance(id)!, name, body);
+    return { ok: true };
+  } catch (e: any) {
+    return reply.code(400).send({ error: e?.message || '上传失败' });
+  }
+});
+
+// 列出可下载的中转文件
+app.get('/api/instances/:id/files', async (req, reply) => {
+  const u = requireAuth(req, reply);
+  if (!u) return;
+  const id = (req.params as any).id;
+  if (!userCanAccess(u, id)) return reply.code(403).send({ error: '无权访问该实例' });
+  try {
+    return { files: await listInstanceFiles(findInstance(id)!) };
+  } catch {
+    return { files: [] };
+  }
+});
+
+// 下载某个中转文件
+app.get('/api/instances/:id/download', async (req, reply) => {
+  const u = requireAuth(req, reply);
+  if (!u) return;
+  const id = (req.params as any).id;
+  if (!userCanAccess(u, id)) return reply.code(403).send({ error: '无权访问该实例' });
+  const name = String((req.query as any)?.name || '').trim();
+  try {
+    const buf = await downloadFromInstance(findInstance(id)!, name);
+    reply.header('content-type', 'application/octet-stream');
+    reply.header('content-disposition', `attachment; filename*=UTF-8''${encodeURIComponent(name)}`);
+    return reply.send(buf);
+  } catch (e: any) {
+    return reply.code(400).send({ error: e?.message || '下载失败' });
+  }
+});
+
 // 该实例的微信安装状态（有访问权限即可看）
 app.get('/api/instances/:id/wechat/status', async (req, reply) => {
   const u = requireAuth(req, reply);

panel/server/src/store.ts

@@ -14,8 +14,13 @@ export interface User {
   createdAt: string;
   // 该账户可访问的微信实例 id 列表。admin 隐式全部，忽略此字段。
   allowedInstances: string[];
+  // 仍在使用初始默认密码时为 true，前端据此提示尽快改密；任意一次改密/重置后清除。
+  mustChangePassword?: boolean;
 }
 
+// 初始默认管理员密码；管理员仍在用它时强烈提示改密。
+const DEFAULT_ADMIN_PASSWORD = 'wechat';
+
 export interface Instance {
   id: string; // 短 id，用于容器/卷命名
   name: string; // 显示名
@@ -68,9 +73,19 @@ export function initStore() {
   }
   if (!data.users.some((u) => u.role === 'admin')) {
     const username = process.env.PANEL_ADMIN_USER || 'admin';
-    const password = process.env.PANEL_ADMIN_PASSWORD || 'wechat';
-    data.users.push(makeUser(username, password, 'admin'));
+    const password = process.env.PANEL_ADMIN_PASSWORD || DEFAULT_ADMIN_PASSWORD;
+    const admin = makeUser(username, password, 'admin');
+    // 用默认密码初始化时标记，提醒尽快改密
+    if (password === DEFAULT_ADMIN_PASSWORD) admin.mustChangePassword = true;
+    data.users.push(admin);
     console.log(`[store] 已初始化管理员账号 '${username}'`);
+  } else {
+    // 兼容旧账号文件：管理员若仍能用默认密码登录，补打"需改密"标记
+    for (const u of data.users) {
+      if (u.role === 'admin' && u.mustChangePassword === undefined) {
+        u.mustChangePassword = bcrypt.compareSync(DEFAULT_ADMIN_PASSWORD, u.passwordHash);
+      }
+    }
   }
   persist();
 }
@@ -84,6 +99,7 @@ export function publicUser(u: User) {
     disabled: u.disabled,
     createdAt: u.createdAt,
     allowedInstances: u.role === 'admin' ? [] : u.allowedInstances,
+    mustChangePassword: !!u.mustChangePassword,
   };
 }
 
@@ -128,6 +144,7 @@ export function resetPassword(id: string, password: string) {
   const u = findById(id);
   if (!u) throw new Error('用户不存在');
   u.passwordHash = bcrypt.hashSync(password, 10);
+  u.mustChangePassword = false; // 改过密就不再提示
   persist();
   return publicUser(u);
 }
@@ -205,6 +222,16 @@ export function createInstance(name: string, createdBy: string, allowedUserIds:
   return inst;
 }
 
+export function renameInstance(id: string, name: string) {
+  const inst = findInstance(id);
+  if (!inst) throw new Error('实例不存在');
+  const n = (name || '').trim();
+  if (!n || n.length > 30) throw new Error('实例名称为 1-30 个字符');
+  inst.name = n;
+  persist();
+  return publicInstance(inst);
+}
+
 export function removeInstance(id: string) {
   const inst = findInstance(id);
   if (!inst) throw new Error('实例不存在');

panel/web/scripts/gen-icons.mjs

@@ -1,11 +1,14 @@
-// 生成 PWA / Apple 图标：微信绿圆角方块（纯前端依赖，无需外部工具）。
-// 想换成更精致的图标，直接用设计稿替换 public/icon-*.png 即可。
+// 生成 PWA / Apple 图标：绿底 macOS 终端风格（白色 `>_` 提示符 + 左上小圆点）。
+// 纯 Node 实现，无需外部工具（rsvg/imagemagick），保证本地 / Docker / CI 构建都产出一致图标。
+// 与 public/favicon.svg 同一视觉；改图标时两边一起改（坐标基于 100×100 视图）。
 import { deflateSync } from 'node:zlib';
 import { writeFileSync, mkdirSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
 
-const COLOR = [7, 193, 96]; // #07C160
+const TOP = [0x13, 0xd8, 0x73]; // 顶部亮绿 #13D873
+const BOT = [0x05, 0xa8, 0x52]; // 底部深绿 #05A852
+const WHITE = [255, 255, 255];
 const OUT = join(dirname(fileURLToPath(import.meta.url)), '..', 'public');
 
 const CRC_TABLE = (() => {
@@ -33,34 +36,70 @@ function chunk(type, data) {
   return Buffer.concat([len, typeBuf, data, crc]);
 }
 
+// 点到线段距离（用于画带圆角端点的笔画）
+function distToSeg(px, py, ax, ay, bx, by) {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const len2 = dx * dx + dy * dy || 1;
+  let t = ((px - ax) * dx + (py - ay) * dy) / len2;
+  t = Math.max(0, Math.min(1, t));
+  const cx = ax + t * dx;
+  const cy = ay + t * dy;
+  return Math.hypot(px - cx, py - cy);
+}
+
+const clamp01 = (v) => Math.max(0, Math.min(1, v));
+
 function makePng(size) {
-  const radius = Math.round(size * 0.22);
+  const s = size / 100; // 视图 100 → 像素
+  const radius = 23 * s; // 圆角，与 favicon 一致
+  const stroke = (7.5 / 2) * s; // 笔画半宽
+  // 提示符坐标（基于 100 视图）
+  const chevron = [
+    [34, 30],
+    [48, 44],
+    [34, 58],
+  ].map(([x, y]) => [x * s, y * s]);
+  const underline = [
+    [56, 60],
+    [72, 60],
+  ].map(([x, y]) => [x * s, y * s]);
+  const dot = [22 * s, 36 * s, 3.4 * s]; // cx, cy, r
+
+  const inRounded = (x, y) => {
+    const r = radius;
+    const cx = x < r ? r : x > size - r ? size - r : x;
+    const cy = y < r ? r : y > size - r ? size - r : y;
+    if (cx === x && cy === y) return 1;
+    const d = Math.hypot(x - cx, y - cy);
+    return clamp01(r - d + 0.5); // 边缘 1px 抗锯齿
+  };
+
   const rowLen = size * 4 + 1;
   const raw = Buffer.alloc(rowLen * size);
-  const inRounded = (x, y) => {
-    // 圆角：四角之外的像素透明
-    const corners = [
-      [radius, radius],
-      [size - radius, radius],
-      [radius, size - radius],
-      [size - radius, size - radius],
-    ];
-    if ((x < radius || x >= size - radius) && (y < radius || y >= size - radius)) {
-      const cx = x < radius ? corners[0][0] : corners[1][0];
-      const cy = y < radius ? corners[0][1] : corners[2][1];
-      return (x - cx) ** 2 + (y - cy) ** 2 <= radius ** 2;
-    }
-    return true;
-  };
   for (let y = 0; y < size; y++) {
     raw[y * rowLen] = 0; // filter type 0
+    const gy = y + 0.5;
+    const mix = gy / size; // 竖直渐变系数
+    const bg = [
+      Math.round(TOP[0] + (BOT[0] - TOP[0]) * mix),
+      Math.round(TOP[1] + (BOT[1] - TOP[1]) * mix),
+      Math.round(TOP[2] + (BOT[2] - TOP[2]) * mix),
+    ];
     for (let x = 0; x < size; x++) {
+      const gx = x + 0.5;
+      // 白色提示符覆盖度（取各形状最大值）
+      let cov = 0;
+      cov = Math.max(cov, clamp01(stroke - distToSeg(gx, gy, chevron[0][0], chevron[0][1], chevron[1][0], chevron[1][1]) + 0.5));
+      cov = Math.max(cov, clamp01(stroke - distToSeg(gx, gy, chevron[1][0], chevron[1][1], chevron[2][0], chevron[2][1]) + 0.5));
+      cov = Math.max(cov, clamp01(stroke - distToSeg(gx, gy, underline[0][0], underline[0][1], underline[1][0], underline[1][1]) + 0.5));
+      cov = Math.max(cov, clamp01(dot[2] - Math.hypot(gx - dot[0], gy - dot[1]) + 0.5));
+
       const o = y * rowLen + 1 + x * 4;
-      const on = inRounded(x, y);
-      raw[o] = COLOR[0];
-      raw[o + 1] = COLOR[1];
-      raw[o + 2] = COLOR[2];
-      raw[o + 3] = on ? 255 : 0;
+      raw[o] = Math.round(bg[0] + (WHITE[0] - bg[0]) * cov);
+      raw[o + 1] = Math.round(bg[1] + (WHITE[1] - bg[1]) * cov);
+      raw[o + 2] = Math.round(bg[2] + (WHITE[2] - bg[2]) * cov);
+      raw[o + 3] = Math.round(255 * inRounded(gx, gy));
     }
   }
   const ihdr = Buffer.alloc(13);

panel/web/src/App.tsx

@@ -1,5 +1,6 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { AuthProvider, useAuth } from './auth';
+import { UIProvider } from './ui';
 import Login from './pages/Login';
 import Dashboard from './pages/Dashboard';
 import Admin from './pages/Admin';
@@ -57,8 +58,10 @@ function Shell() {
 
 export default function App() {
   return (
+    <UIProvider>
       <AuthProvider>
         <Shell />
       </AuthProvider>
+    </UIProvider>
   );
 }

panel/web/src/api.ts

@@ -5,6 +5,7 @@ export interface PanelUser {
   disabled: boolean;
   createdAt: string;
   allowedInstances: string[]; // admin 为空数组（隐式全部）
+  mustChangePassword?: boolean; // 仍在用默认密码时为 true
 }
 
 export type WechatPhase = 'idle' | 'downloading' | 'extracting' | 'installing' | 'done' | 'error';
@@ -38,7 +39,14 @@ async function req<T = any>(path: string, opts: RequestInit = {}): Promise<T> {
     headers,
   });
   const data = await res.json().catch(() => ({}));
-  if (!res.ok) throw new Error((data as any).error || `请求失败 (${res.status})`);
+  if (!res.ok) {
+    // 会话过期：除登录/探测接口外，任意接口收到 401 都说明 cookie 失效，直接回登录页（避免页面卡在错误态）
+    const isAuthProbe = path.includes('/api/auth/login') || path.includes('/api/auth/me');
+    if (res.status === 401 && !isAuthProbe && location.pathname !== '/login') {
+      location.assign('/login');
+    }
+    throw new Error((data as any).error || `请求失败 (${res.status})`);
+  }
   return data as T;
 }
 
@@ -72,6 +80,8 @@ export const api = {
       method: 'POST',
       body: JSON.stringify({ name, allowedUserIds }),
     }),
+  renameInstance: (id: string, name: string) =>
+    req<{ instance: PanelInstance }>(`/api/admin/instances/${id}/rename`, { method: 'POST', body: JSON.stringify({ name }) }),
   deleteInstance: (id: string, purge = false) =>
     req(`/api/admin/instances/${id}${purge ? '?purge=1' : ''}`, { method: 'DELETE' }),
   setInstanceUsers: (id: string, userIds: string[]) =>
@@ -79,4 +89,19 @@ export const api = {
   instanceWechatStatus: (id: string) => req<{ status: WechatStatus }>(`/api/instances/${id}/wechat/status`),
   instanceWechatInstall: (id: string) => req(`/api/admin/instances/${id}/wechat/install`, { method: 'POST' }),
   instanceWechatUpdate: (id: string) => req(`/api/admin/instances/${id}/wechat/update`, { method: 'POST' }),
+  instanceStart: (id: string) => req(`/api/admin/instances/${id}/start`, { method: 'POST' }),
+
+  // 文件中转
+  listFiles: (id: string) => req<{ files: { name: string; size: number }[] }>(`/api/instances/${id}/files`),
+  uploadFile: async (id: string, file: File) => {
+    const res = await fetch(`/api/instances/${id}/upload?name=${encodeURIComponent(file.name)}`, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'content-type': 'application/octet-stream' },
+      body: file,
+    });
+    if (!res.ok) throw new Error(((await res.json().catch(() => ({}))) as any).error || '上传失败');
+    return res.json();
+  },
+  downloadFileUrl: (id: string, name: string) => `/api/instances/${id}/download?name=${encodeURIComponent(name)}`,
 };

panel/web/src/pages/Admin.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { api, type PanelUser, type InstanceWithStatus } from '../api';
+import { useUI, PasswordInput } from '../ui';
 
 export default function Admin() {
   const nav = useNavigate();
+  const { toast, confirm } = useUI();
   const [users, setUsers] = useState<PanelUser[]>([]);
   const [instances, setInstances] = useState<InstanceWithStatus[]>([]);
   const [err, setErr] = useState('');
@@ -11,6 +13,9 @@ export default function Admin() {
   const [creatingInst, setCreatingInst] = useState(false);
   const [assignInst, setAssignInst] = useState<InstanceWithStatus | null>(null); // 给实例选账户
   const [assignUser, setAssignUser] = useState<PanelUser | null>(null); // 给账户选实例
+  const [resetTarget, setResetTarget] = useState<PanelUser | null>(null); // 重置密码弹窗
+  const [deleteInst, setDeleteInst] = useState<InstanceWithStatus | null>(null); // 删除实例弹窗
+  const [renameInst, setRenameInst] = useState<InstanceWithStatus | null>(null); // 重命名实例弹窗
 
   const subs = users.filter((u) => u.role !== 'admin');
 
@@ -32,31 +37,23 @@ export default function Admin() {
   const usersForInstance = (id: string) => subs.filter((u) => u.allowedInstances.includes(id));
 
   const toggle = async (u: PanelUser) => {
-    await api.setDisabled(u.id, !u.disabled).catch((e) => alert(e.message));
-    load();
-  };
-  const reset = async (u: PanelUser) => {
-    const pw = prompt(`为 ${u.username} 设置新密码（至少 6 位）`);
-    if (!pw) return;
     try {
-      await api.resetUser(u.id, pw);
-      alert('已重置');
+      await api.setDisabled(u.id, !u.disabled);
+      toast(u.disabled ? '已启用' : '已禁用', 'ok');
     } catch (e: any) {
-      alert(e.message);
+      toast(e.message, 'error');
     }
+    load();
   };
   const removeUser = async (u: PanelUser) => {
-    if (!confirm(`确定删除子账号 ${u.username}？`)) return;
-    await api.deleteUser(u.id).catch((e) => alert(e.message));
-    load();
-  };
-  const removeInst = async (inst: InstanceWithStatus) => {
-    if (!confirm(`删除实例「${inst.name}」？容器会被移除，但聊天记录（数据卷）会保留。`)) return;
-    let purge = false;
-    if (confirm('是否同时永久删除该实例的聊天记录（数据卷）？此操作不可恢复。\n\n确定=连数据一起删，取消=仅删容器保留数据')) {
-      purge = true;
+    const ok = await confirm({ title: `删除子账号「${u.username}」？`, body: '该账户将无法再登录。', danger: true, confirmText: '删除' });
+    if (!ok) return;
+    try {
+      await api.deleteUser(u.id);
+      toast('已删除', 'ok');
+    } catch (e: any) {
+      toast(e.message, 'error');
     }
-    await api.deleteInstance(inst.id, purge).catch((e) => alert(e.message));
     load();
   };
 
@@ -88,10 +85,13 @@ export default function Admin() {
                 <span className="muted small">可访问账户 {usersForInstance(inst.id).length} 人</span>
               </div>
               <div className="user-actions">
+                <button className="btn-text" onClick={() => setRenameInst(inst)}>
+                  重命名
+                </button>
                 <button className="btn-text" onClick={() => setAssignInst(inst)}>
                   分配账户
                 </button>
-                <button className="btn-text danger" onClick={() => removeInst(inst)}>
+                <button className="btn-text danger" onClick={() => setDeleteInst(inst)}>
                   删除
                 </button>
               </div>
@@ -136,7 +136,7 @@ export default function Admin() {
                   <button className="btn-text" onClick={() => toggle(u)}>
                     {u.disabled ? '启用' : '禁用'}
                   </button>
-                  <button className="btn-text" onClick={() => reset(u)}>
+                  <button className="btn-text" onClick={() => setResetTarget(u)}>
                     重置密码
                   </button>
                   <button className="btn-text danger" onClick={() => removeUser(u)}>
@@ -191,6 +191,153 @@ export default function Admin() {
           }}
         />
       )}
+      {resetTarget && (
+        <ResetPassword
+          user={resetTarget}
+          onClose={() => setResetTarget(null)}
+          onDone={() => {
+            setResetTarget(null);
+            toast('密码已重置', 'ok');
+          }}
+        />
+      )}
+      {deleteInst && (
+        <DeleteInstance
+          inst={deleteInst}
+          onClose={() => setDeleteInst(null)}
+          onDone={() => {
+            setDeleteInst(null);
+            toast('实例已删除', 'ok');
+            load();
+          }}
+        />
+      )}
+      {renameInst && (
+        <RenameInstance
+          inst={renameInst}
+          onClose={() => setRenameInst(null)}
+          onDone={() => {
+            setRenameInst(null);
+            toast('已重命名', 'ok');
+            load();
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function RenameInstance({ inst, onClose, onDone }: { inst: InstanceWithStatus; onClose: () => void; onDone: () => void }) {
+  const [name, setName] = useState(inst.name);
+  const [err, setErr] = useState('');
+  const [busy, setBusy] = useState(false);
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setErr('');
+    setBusy(true);
+    try {
+      await api.renameInstance(inst.id, name.trim());
+      onDone();
+    } catch (e: any) {
+      setErr(e.message || '重命名失败');
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <div className="modal-mask" onClick={onClose}>
+      <form className="card modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
+        <h2>重命名实例</h2>
+        <input className="input" placeholder="实例名称" value={name} onChange={(e) => setName(e.target.value)} autoFocus />
+        {err && <div className="error">{err}</div>}
+        <div className="modal-actions">
+          <button type="button" className="btn" onClick={onClose}>
+            取消
+          </button>
+          <button className="btn btn-primary" disabled={busy || !name.trim() || name.trim() === inst.name}>
+            保存
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function ResetPassword({ user, onClose, onDone }: { user: PanelUser; onClose: () => void; onDone: () => void }) {
+  const [pw, setPw] = useState('');
+  const [err, setErr] = useState('');
+  const [busy, setBusy] = useState(false);
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setErr('');
+    setBusy(true);
+    try {
+      await api.resetUser(user.id, pw);
+      onDone();
+    } catch (e: any) {
+      setErr(e.message || '重置失败');
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <div className="modal-mask" onClick={onClose}>
+      <form className="card modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
+        <h2>重置「{user.username}」的密码</h2>
+        <PasswordInput placeholder="新密码（至少 6 位）" autoComplete="new-password" value={pw} onChange={setPw} />
+        {err && <div className="error">{err}</div>}
+        <div className="modal-actions">
+          <button type="button" className="btn" onClick={onClose}>
+            取消
+          </button>
+          <button className="btn btn-primary" disabled={busy || pw.length < 6}>
+            重置
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function DeleteInstance({ inst, onClose, onDone }: { inst: InstanceWithStatus; onClose: () => void; onDone: () => void }) {
+  const [purge, setPurge] = useState(false);
+  const [err, setErr] = useState('');
+  const [busy, setBusy] = useState(false);
+  const submit = async () => {
+    setErr('');
+    setBusy(true);
+    try {
+      await api.deleteInstance(inst.id, purge);
+      onDone();
+    } catch (e: any) {
+      setErr(e.message || '删除失败');
+      setBusy(false);
+    }
+  };
+  return (
+    <div className="modal-mask" onClick={onClose}>
+      <div className="card modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 360 }}>
+        <h2>删除实例「{inst.name}」？</h2>
+        <div className="muted" style={{ fontSize: 14, lineHeight: 1.5 }}>
+          容器会被移除。默认保留聊天记录（数据卷），之后可重建同名实例恢复。
+        </div>
+        <label className={'purge-opt' + (purge ? ' on' : '')} onClick={() => setPurge((v) => !v)}>
+          <span className="purge-check">{purge ? '✓' : ''}</span>
+          <span>
+            同时永久删除聊天记录（数据卷）
+            <span className="muted small" style={{ display: 'block' }}>不可恢复，请谨慎勾选</span>
+          </span>
+        </label>
+        {err && <div className="error">{err}</div>}
+        <div className="modal-actions">
+          <button type="button" className="btn" onClick={onClose}>
+            取消
+          </button>
+          <button type="button" className="btn btn-danger" disabled={busy} onClick={submit}>
+            {purge ? '连数据一起删除' : '删除实例'}
+          </button>
+        </div>
+      </div>
     </div>
   );
 }
@@ -257,7 +404,7 @@ function CreateUser({ instances, onClose, onDone }: { instances: InstanceWithSta
           value={username}
           onChange={(e) => setUsername(e.target.value)}
         />
-        <input className="input" type="password" placeholder="初始密码（至少 6 位）" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <PasswordInput placeholder="初始密码（至少 6 位）" autoComplete="new-password" value={password} onChange={setPassword} />
         <div className="field-label">可访问的微信实例</div>
         <ChipMultiSelect
           options={instances.map((i) => ({ id: i.id, label: i.name }))}

panel/web/src/pages/Dashboard.tsx

@@ -1,16 +1,19 @@
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../auth';
+import { useUI, PasswordInput } from '../ui';
 import { api, type InstanceWithStatus } from '../api';
 
 const BUSY_PHASES = ['downloading', 'extracting', 'installing'];
 
 export default function Dashboard() {
-  const { user, logout } = useAuth();
+  const { user, logout, refresh } = useAuth();
+  const { toast, confirm } = useUI();
   const nav = useNavigate();
   const [showPw, setShowPw] = useState(false);
   const [instances, setInstances] = useState<InstanceWithStatus[] | null>(null);
   const [err, setErr] = useState('');
+  const [starting, setStarting] = useState<Set<string>>(new Set());
   const timer = useRef<number | undefined>(undefined);
   const isAdmin = user?.role === 'admin';
 
@@ -48,8 +51,28 @@ export default function Dashboard() {
       );
       window.clearTimeout(timer.current);
       timer.current = window.setTimeout(load, 1000);
+      toast(kind === 'install' ? '已开始下载微信' : '已开始更新', 'ok');
     } catch (e: any) {
       setErr(e.message || '操作失败');
+      toast(e.message || '操作失败', 'error');
+    }
+  };
+
+  const start = async (inst: InstanceWithStatus) => {
+    setErr('');
+    setStarting((s) => new Set(s).add(inst.id));
+    try {
+      await api.instanceStart(inst.id);
+      toast('实例已启动', 'ok');
+      await load();
+    } catch (e: any) {
+      toast(e.message || '启动失败', 'error');
+    } finally {
+      setStarting((s) => {
+        const n = new Set(s);
+        n.delete(inst.id);
+        return n;
+      });
     }
   };
 
@@ -57,7 +80,12 @@ export default function Dashboard() {
     <div className="page">
       <header className="topbar">
         <span className="topbar-title">云微</span>
-        <button className="btn-text" onClick={() => logout()}>
+        <button
+          className="btn-text"
+          onClick={async () => {
+            if (await confirm({ title: '退出登录？', confirmText: '退出' })) logout();
+          }}
+        >
           退出
         </button>
       </header>
@@ -68,6 +96,16 @@ export default function Dashboard() {
           {isAdmin && <span className="tag">管理员</span>}
         </div>
 
+        {user?.mustChangePassword && (
+          <button className="warn-banner" onClick={() => setShowPw(true)}>
+            <span className="warn-icon">!</span>
+            <span className="warn-text">
+              <b>你还在使用默认密码</b>
+              <span>该系统登录着你的微信，请立即修改密码 ›</span>
+            </span>
+          </button>
+        )}
+
         {err && <div className="error">{err}</div>}
 
         <div className="section-row">
@@ -81,7 +119,7 @@ export default function Dashboard() {
 
         {instances && instances.length === 0 && (
           <div className="empty-state">
-            <div className="empty-blob">📱</div>
+            <div className="empty-blob"><img src="/favicon.svg" alt="" /></div>
             <div className="empty-title">还没有微信实例</div>
             <div className="empty-sub">{isAdmin ? '去「管理」新建一个微信实例' : '请联系管理员为你分配实例'}</div>
           </div>
@@ -89,7 +127,15 @@ export default function Dashboard() {
 
         <div className="inst-grid">
           {instances?.map((inst) => (
-            <InstanceCard key={inst.id} inst={inst} isAdmin={isAdmin} onEnter={() => nav(`/desktop/${inst.id}`)} onTrigger={trigger} />
+            <InstanceCard
+              key={inst.id}
+              inst={inst}
+              isAdmin={isAdmin}
+              starting={starting.has(inst.id)}
+              onEnter={() => nav(`/desktop/${inst.id}`)}
+              onTrigger={trigger}
+              onStart={() => start(inst)}
+            />
           ))}
         </div>
 
@@ -107,7 +153,7 @@ export default function Dashboard() {
         </div>
       </main>
 
-      {showPw && <ChangePassword onClose={() => setShowPw(false)} />}
+      {showPw && <ChangePassword onClose={() => setShowPw(false)} onSaved={() => refresh()} />}
     </div>
   );
 }
@@ -115,13 +161,17 @@ export default function Dashboard() {
 function InstanceCard({
   inst,
   isAdmin,
+  starting,
   onEnter,
   onTrigger,
+  onStart,
 }: {
   inst: InstanceWithStatus;
   isAdmin?: boolean;
+  starting?: boolean;
   onEnter: () => void;
   onTrigger: (inst: InstanceWithStatus, kind: 'install' | 'update') => void;
+  onStart: () => void;
 }) {
   const wx = inst.wechat;
   const busy = BUSY_PHASES.includes(wx.phase);
@@ -135,7 +185,8 @@ function InstanceCard({
   else badge = { text: '待安装', cls: 'tag-warn' };
 
   let sub: string;
-  if (busy) sub = wx.percent >= 0 ? `${wx.message || '处理中'} ${wx.percent}%` : wx.message || '请稍候…';
+  if (offline) sub = inst.runtime === 'missing' ? '容器尚未创建' : '容器已停止，需先启动';
+  else if (busy) sub = wx.percent >= 0 ? `${wx.message || '处理中'} ${wx.percent}%` : wx.message || '请稍候…';
   else if (wx.phase === 'error') sub = wx.message || '操作失败，可重试';
   else if (installed) sub = wx.version ? `微信 ${wx.version}` : '微信已安装';
   else sub = '微信尚未安装';
@@ -160,9 +211,15 @@ function InstanceCard({
       )}
 
       <div className="inst-actions">
+        {offline && isAdmin ? (
+          <button className="btn btn-primary inst-enter" disabled={starting} onClick={onStart}>
+            {starting ? '启动中…' : inst.runtime === 'missing' ? '创建并启动' : '启动实例'}
+          </button>
+        ) : (
           <button className="btn btn-primary inst-enter" disabled={!canEnter} onClick={onEnter}>
             进入微信
           </button>
+        )}
         {isAdmin && !busy && !offline && (
           installed ? (
             <button className="btn inst-act" onClick={() => onTrigger(inst, 'update')}>
@@ -179,7 +236,7 @@ function InstanceCard({
   );
 }
 
-function ChangePassword({ onClose }: { onClose: () => void }) {
+function ChangePassword({ onClose, onSaved }: { onClose: () => void; onSaved?: () => void }) {
   const [oldPassword, setOld] = useState('');
   const [newPassword, setNew] = useState('');
   const [msg, setMsg] = useState('');
@@ -192,6 +249,7 @@ function ChangePassword({ onClose }: { onClose: () => void }) {
     try {
       await api.changePassword(oldPassword, newPassword);
       setMsg('修改成功');
+      onSaved?.(); // 刷新当前用户，清除「默认密码」提示
       setTimeout(onClose, 800);
     } catch (e: any) {
       setMsg(e.message || '修改失败');
@@ -204,8 +262,8 @@ function ChangePassword({ onClose }: { onClose: () => void }) {
     <div className="modal-mask" onClick={onClose}>
       <form className="card modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
         <h2>修改密码</h2>
-        <input className="input" type="password" placeholder="原密码" value={oldPassword} onChange={(e) => setOld(e.target.value)} />
-        <input className="input" type="password" placeholder="新密码（至少 6 位）" value={newPassword} onChange={(e) => setNew(e.target.value)} />
+        <PasswordInput placeholder="原密码" autoComplete="current-password" value={oldPassword} onChange={setOld} />
+        <PasswordInput placeholder="新密码（至少 6 位）" autoComplete="new-password" value={newPassword} onChange={setNew} />
         {msg && <div className={msg === '修改成功' ? 'ok' : 'error'}>{msg}</div>}
         <div className="modal-actions">
           <button type="button" className="btn" onClick={onClose}>

panel/web/src/pages/Desktop.tsx

@@ -1,4 +1,7 @@
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { api } from '../api';
+import { useUI } from '../ui';
 
 // 直接加载 KasmVNC 的 noVNC 页面（由 kclient 静态托管）。
 // 反代按实例隔离：所有桌面流量走 /desktop/<id>/*，网关据 <id> 选目标容器并注入该实例凭据。
@@ -10,19 +13,186 @@ function desktopUrl(id: string) {
   );
 }
 
+interface TFile {
+  name: string;
+  size: number;
+}
+function humanSize(n: number) {
+  if (n < 1024) return n + ' B';
+  if (n < 1024 * 1024) return (n / 1024).toFixed(0) + ' KB';
+  if (n < 1024 * 1024 * 1024) return (n / 1024 / 1024).toFixed(1) + ' MB';
+  return (n / 1024 / 1024 / 1024).toFixed(2) + ' GB';
+}
+
 export default function Desktop() {
   const nav = useNavigate();
+  const { toast } = useUI();
   const { id } = useParams<{ id: string }>();
+  const [loaded, setLoaded] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [showFiles, setShowFiles] = useState(false);
+  const [files, setFiles] = useState<TFile[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const dragDepth = useRef(0);
+
+  // 文件拖到窗口任意位置时，弹出落区（覆盖 iframe，否则 drop 会被 iframe 吞掉）
+  useEffect(() => {
+    const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types || []).includes('Files');
+    const onEnter = (e: DragEvent) => {
+      if (!hasFiles(e)) return;
+      e.preventDefault();
+      dragDepth.current++;
+      setDragging(true);
+    };
+    const onOver = (e: DragEvent) => {
+      if (hasFiles(e)) e.preventDefault();
+    };
+    const onLeave = (e: DragEvent) => {
+      if (!hasFiles(e)) return;
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) setDragging(false);
+    };
+    const onDropWin = (e: DragEvent) => {
+      if (hasFiles(e)) e.preventDefault();
+      dragDepth.current = 0;
+      setDragging(false);
+    };
+    window.addEventListener('dragenter', onEnter);
+    window.addEventListener('dragover', onOver);
+    window.addEventListener('dragleave', onLeave);
+    window.addEventListener('drop', onDropWin);
+    return () => {
+      window.removeEventListener('dragenter', onEnter);
+      window.removeEventListener('dragover', onOver);
+      window.removeEventListener('dragleave', onLeave);
+      window.removeEventListener('drop', onDropWin);
+    };
+  }, []);
+
   if (!id) {
     nav('/', { replace: true });
     return null;
   }
+
+  const refreshFiles = async () => {
+    try {
+      const { files } = await api.listFiles(id);
+      setFiles(files);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const uploadFiles = async (list: FileList | File[]) => {
+    const arr = Array.from(list);
+    if (!arr.length) return;
+    setUploading(true);
+    let ok = 0;
+    for (const f of arr) {
+      try {
+        await api.uploadFile(id, f);
+        ok++;
+      } catch (e: any) {
+        toast(`${f.name}: ${e.message || '上传失败'}`, 'error');
+      }
+    }
+    setUploading(false);
+    if (ok) {
+      toast(`已上传 ${ok} 个文件到桌面，微信里可直接选取`, 'ok');
+      refreshFiles();
+    }
+  };
+
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragging(false);
+    dragDepth.current = 0;
+    if (e.dataTransfer.files?.length) uploadFiles(e.dataTransfer.files);
+  };
+
   return (
     <div className="desktop-wrap">
-      <iframe className="desktop-frame" src={desktopUrl(id)} title="电脑版微信" allow="clipboard-read; clipboard-write" />
+      <iframe
+        className="desktop-frame"
+        src={desktopUrl(id)}
+        title="电脑版微信"
+        allow="clipboard-read; clipboard-write; microphone; camera; autoplay"
+        onLoad={() => setLoaded(true)}
+      />
+
+      {!loaded && (
+        <div className="desktop-loading">
+          <div className="spinner" />
+          <div className="desktop-loading-text">正在连接桌面…</div>
+          <div className="desktop-loading-sub">首次进入请扫码登录微信</div>
+          <div className="desktop-loading-sub">拖文件到窗口即可上传；语音/视频在左侧工具条开启</div>
+          {!window.isSecureContext && (
+            <div className="desktop-loading-warn">当前非 HTTPS 访问，浏览器将禁用麦克风与摄像头（音频播放不受影响）</div>
+          )}
+        </div>
+      )}
+
+      {/* 拖拽落区：仅拖入文件时出现，覆盖 iframe 接住 drop */}
+      {dragging && (
+        <div className="drop-zone" onDrop={onDrop} onDragOver={(e) => e.preventDefault()}>
+          <div className="drop-card">
+            <div className="drop-icon">⬇</div>
+            <div className="drop-title">松开上传到微信桌面</div>
+            <div className="drop-sub">上传后在微信里「+ / 文件」选择即可</div>
+          </div>
+        </div>
+      )}
+
       <button className="desktop-back" onClick={() => nav('/')} title="返回">
         ‹
       </button>
+
+      {/* 文件按钮 */}
+      <button
+        className="desktop-files-btn"
+        title="文件传输"
+        onClick={() => {
+          setShowFiles((v) => !v);
+          if (!showFiles) refreshFiles();
+        }}
+      >
+        ⇅
+      </button>
+
+      {showFiles && (
+        <div className="files-panel">
+          <div className="files-head">
+            <span>文件传输</span>
+            <button className="btn-text" onClick={() => setShowFiles(false)}>
+              关闭
+            </button>
+          </div>
+          <input
+            ref={fileInput}
+            type="file"
+            multiple
+            style={{ display: 'none' }}
+            onChange={(e) => {
+              if (e.target.files) uploadFiles(e.target.files);
+              e.target.value = '';
+            }}
+          />
+          <button className="btn btn-primary files-upload" disabled={uploading} onClick={() => fileInput.current?.click()}>
+            {uploading ? '上传中…' : '＋ 选择文件上传'}
+          </button>
+          <div className="files-hint">也可直接把文件拖到窗口。下方为桌面（~/Desktop）里的文件，微信收到的文件另存到桌面即可在此下载。</div>
+          <div className="files-list">
+            {files.length === 0 && <div className="muted small" style={{ padding: '10px 2px' }}>暂无文件</div>}
+            {files.map((f) => (
+              <a key={f.name} className="files-item" href={api.downloadFileUrl(id, f.name)} download={f.name}>
+                <span className="files-name">{f.name}</span>
+                <span className="files-size">{humanSize(f.size)} ↓</span>
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

panel/web/src/pages/Login.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../auth';
+import { PasswordInput } from '../ui';
 
 export default function Login() {
   const { login } = useAuth();
@@ -40,13 +41,7 @@ export default function Login() {
           value={username}
           onChange={(e) => setUsername(e.target.value)}
         />
-        <input
-          className="input"
-          type="password"
-          placeholder="密码"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
+        <PasswordInput placeholder="密码" autoComplete="current-password" value={password} onChange={setPassword} />
         {err && <div className="error">{err}</div>}
         <button className="btn btn-primary" disabled={busy || !username || !password}>
           {busy ? '登录中…' : '登录'}

panel/web/src/styles.css

@@ -177,6 +177,33 @@ button {
   box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.16), 0 0 0 3px rgba(var(--green-rgb) / 0.22);
 }
 
+/* 密码框 + 显示/隐藏切换 */
+.pw-field {
+  position: relative;
+}
+.pw-field .input {
+  padding-right: 46px;
+}
+.pw-toggle {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: none;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 10px;
+}
+.pw-toggle:active {
+  background: rgba(var(--shadow) / 0.06);
+}
+
 /* 按钮：浮起 blob，按下缩小 + 折痕收紧 */
 .btn {
   position: relative;
@@ -221,6 +248,18 @@ button {
 .btn-primary:active:not(:disabled) {
   background: var(--wx-green-dark);
 }
+/* 危险动作按钮：红底，折痕用 danger 色 */
+.btn-danger {
+  background: var(--danger);
+  color: #fff;
+  box-shadow: 0 1px 3px rgba(var(--danger-rgb) / 0.45), 0 4px 14px rgba(var(--danger-rgb) / 0.3);
+}
+.btn-danger::before {
+  background: radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.07) 42%, transparent 72%);
+}
+.btn-danger:active:not(:disabled) {
+  background: #e84444;
+}
 .btn:disabled {
   opacity: 0.6;
   cursor: default;
@@ -559,6 +598,125 @@ button {
   transform: scale(0.94);
   box-shadow: var(--crease-press);
 }
+/* 文件按钮：返回钮下方 */
+.desktop-files-btn {
+  position: fixed;
+  top: max(12px, env(safe-area-inset-top));
+  left: 64px;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: none;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 10;
+  box-shadow: var(--crease);
+  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.desktop-files-btn:active {
+  transform: scale(0.94);
+}
+
+/* 拖拽落区 */
+.drop-zone {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  background: rgba(7, 193, 96, 0.16);
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.drop-card {
+  background: var(--surface);
+  border-radius: var(--r-card);
+  box-shadow: var(--crease);
+  padding: 28px 36px;
+  text-align: center;
+  border: 2px dashed rgba(var(--green-rgb) / 0.5);
+}
+.drop-icon {
+  font-size: 36px;
+  color: var(--wx-green);
+}
+.drop-title {
+  margin-top: 8px;
+  font-size: 17px;
+  font-weight: 700;
+}
+.drop-sub {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* 文件传输面板 */
+.files-panel {
+  position: fixed;
+  top: max(64px, calc(env(safe-area-inset-top) + 52px));
+  left: 12px;
+  width: min(330px, calc(100vw - 24px));
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border-radius: var(--r-card);
+  box-shadow: var(--crease);
+  z-index: 11;
+  padding: 16px;
+  gap: 10px;
+}
+.files-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  font-weight: 700;
+}
+.files-upload {
+  height: 42px;
+  font-size: 15px;
+}
+.files-hint {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.5;
+}
+.files-list {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.files-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 11px 4px;
+  text-decoration: none;
+  color: var(--text);
+  font-size: 14px;
+  box-shadow: inset 0 -1px 0 rgba(var(--shadow) / 0.08);
+}
+.files-item:last-child {
+  box-shadow: none;
+}
+.files-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.files-size {
+  flex: none;
+  color: var(--wx-green-dark);
+  font-size: 12px;
+  font-weight: 600;
+}
 
 /* ── loading ───────────────────────────────────────────── */
 .spinner {
@@ -730,6 +888,11 @@ button {
   border-radius: inherit;
   background: var(--sheen);
 }
+.empty-blob img {
+  width: 52px;
+  height: 52px;
+  position: relative;
+}
 .empty-title {
   font-size: 16px;
   font-weight: 700;
@@ -740,3 +903,157 @@ button {
   font-size: 13px;
   color: var(--muted);
 }
+
+/* ── 默认密码安全告警条 ──────────────────────────────────── */
+.warn-banner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border: none;
+  cursor: pointer;
+  background: rgba(var(--danger-rgb) / 0.1);
+  border-radius: var(--r-blob);
+  padding: 14px 16px;
+  margin: 4px 0 14px;
+  box-shadow: inset 0 0 0 1.5px rgba(var(--danger-rgb) / 0.3);
+  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.warn-banner:active {
+  transform: scale(0.99);
+}
+.warn-icon {
+  flex: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--danger);
+  color: #fff;
+  font-weight: 800;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.warn-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+  color: var(--danger);
+}
+.warn-text b {
+  font-size: 14px;
+}
+
+/* ── 删除实例：勾选是否连数据卷一起删 ──────────────────────── */
+.purge-opt {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px 14px;
+  border-radius: var(--r-small);
+  background: var(--trough);
+  font-size: 14px;
+  box-shadow: inset 0 1px 2px rgba(var(--shadow) / 0.14);
+  transition: box-shadow 0.18s;
+}
+.purge-opt.on {
+  box-shadow: inset 0 0 0 1.5px rgba(var(--danger-rgb) / 0.45);
+}
+.purge-check {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  background: var(--surface);
+  box-shadow: var(--crease-press);
+  color: var(--danger);
+  font-weight: 800;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+}
+.purge-opt.on .purge-check {
+  background: var(--danger);
+  color: #fff;
+}
+
+/* ── Toast ──────────────────────────────────────────────── */
+.toast-stack {
+  position: fixed;
+  left: 50%;
+  bottom: max(24px, env(safe-area-inset-bottom));
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  z-index: 50;
+  pointer-events: none;
+}
+.toast {
+  pointer-events: auto;
+  max-width: 80vw;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 500;
+  padding: 11px 18px;
+  border-radius: 999px;
+  box-shadow: var(--crease);
+  animation: toast-in 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
+}
+.toast-ok {
+  color: var(--wx-green-dark);
+}
+.toast-error {
+  color: var(--danger);
+}
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ── 桌面连接 loading 遮罩 ──────────────────────────────── */
+.desktop-loading {
+  position: fixed;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  background: var(--base);
+}
+.desktop-loading-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+.desktop-loading-sub {
+  font-size: 13px;
+  color: var(--muted);
+  text-align: center;
+  padding: 0 24px;
+}
+.desktop-loading-warn {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--danger);
+  text-align: center;
+  padding: 0 24px;
+}

panel/web/src/ui.tsx

@@ -0,0 +1,128 @@
+import { createContext, useCallback, useContext, useRef, useState, type ReactNode } from 'react';
+
+// ── Toast ───────────────────────────────────────────────
+type ToastKind = 'ok' | 'error' | 'info';
+interface ToastItem {
+  id: number;
+  text: string;
+  kind: ToastKind;
+}
+
+// ── Confirm ─────────────────────────────────────────────
+interface ConfirmOpts {
+  title: string;
+  body?: string;
+  confirmText?: string;
+  cancelText?: string;
+  danger?: boolean;
+}
+
+interface UICtx {
+  toast: (text: string, kind?: ToastKind) => void;
+  confirm: (opts: ConfirmOpts) => Promise<boolean>;
+}
+
+const Ctx = createContext<UICtx>(null!);
+
+export function UIProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const [confirmState, setConfirmState] = useState<(ConfirmOpts & { resolve: (v: boolean) => void }) | null>(null);
+  const seq = useRef(0);
+
+  const toast = useCallback((text: string, kind: ToastKind = 'info') => {
+    const id = ++seq.current;
+    setToasts((list) => [...list, { id, text, kind }]);
+    setTimeout(() => setToasts((list) => list.filter((t) => t.id !== id)), 2600);
+  }, []);
+
+  const confirm = useCallback(
+    (opts: ConfirmOpts) => new Promise<boolean>((resolve) => setConfirmState({ ...opts, resolve })),
+    [],
+  );
+
+  const close = (v: boolean) => {
+    confirmState?.resolve(v);
+    setConfirmState(null);
+  };
+
+  return (
+    <Ctx.Provider value={{ toast, confirm }}>
+      {children}
+      <div className="toast-stack">
+        {toasts.map((t) => (
+          <div key={t.id} className={'toast toast-' + t.kind}>
+            {t.text}
+          </div>
+        ))}
+      </div>
+      {confirmState && (
+        <div className="modal-mask" onClick={() => close(false)}>
+          <div className="card modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 340 }}>
+            <h2>{confirmState.title}</h2>
+            {confirmState.body && <div className="muted" style={{ fontSize: 14, lineHeight: 1.5 }}>{confirmState.body}</div>}
+            <div className="modal-actions">
+              <button type="button" className="btn" onClick={() => close(false)}>
+                {confirmState.cancelText || '取消'}
+              </button>
+              <button
+                type="button"
+                className={'btn ' + (confirmState.danger ? 'btn-danger' : 'btn-primary')}
+                onClick={() => close(true)}
+              >
+                {confirmState.confirmText || '确定'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Ctx.Provider>
+  );
+}
+
+export const useUI = () => useContext(Ctx);
+
+// ── 带"显示/隐藏"切换的密码输入框 ────────────────────────
+export function PasswordInput({
+  value,
+  onChange,
+  placeholder,
+  autoComplete,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  autoComplete?: string;
+}) {
+  const [show, setShow] = useState(false);
+  return (
+    <div className="pw-field">
+      <input
+        className="input"
+        type={show ? 'text' : 'password'}
+        placeholder={placeholder}
+        autoComplete={autoComplete}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <button
+        type="button"
+        className="pw-toggle"
+        tabIndex={-1}
+        aria-label={show ? '隐藏密码' : '显示密码'}
+        onClick={() => setShow((s) => !s)}
+      >
+        {show ? (
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20C5 20 1 12 1 12a18.5 18.5 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19M1 1l22 22" />
+            <path d="M9.5 9.5a3 3 0 0 0 4.24 4.24" />
+          </svg>
+        ) : (
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}