+ O
+ p
+ e
+ n
+ I
+ M
+
+
+
+
+
diff --git a/pc-client/public/sql-wasm.wasm b/pc-client/public/sql-wasm.wasm
new file mode 100644
index 0000000..18b392e
Binary files /dev/null and b/pc-client/public/sql-wasm.wasm differ
diff --git a/pc-client/public/wasm_exec.js b/pc-client/public/wasm_exec.js
new file mode 100644
index 0000000..d71af9e
--- /dev/null
+++ b/pc-client/public/wasm_exec.js
@@ -0,0 +1,575 @@
+// Copyright 2018 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+"use strict";
+
+(() => {
+ const enosys = () => {
+ const err = new Error("not implemented");
+ err.code = "ENOSYS";
+ return err;
+ };
+
+ if (!globalThis.fs) {
+ let outputBuf = "";
+ globalThis.fs = {
+ constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1, O_DIRECTORY: -1 }, // unused
+ writeSync(fd, buf) {
+ outputBuf += decoder.decode(buf);
+ const nl = outputBuf.lastIndexOf("\n");
+ if (nl != -1) {
+ console.log(outputBuf.substring(0, nl));
+ outputBuf = outputBuf.substring(nl + 1);
+ }
+ return buf.length;
+ },
+ write(fd, buf, offset, length, position, callback) {
+ if (offset !== 0 || length !== buf.length || position !== null) {
+ callback(enosys());
+ return;
+ }
+ const n = this.writeSync(fd, buf);
+ callback(null, n);
+ },
+ chmod(path, mode, callback) { callback(enosys()); },
+ chown(path, uid, gid, callback) { callback(enosys()); },
+ close(fd, callback) { callback(enosys()); },
+ fchmod(fd, mode, callback) { callback(enosys()); },
+ fchown(fd, uid, gid, callback) { callback(enosys()); },
+ fstat(fd, callback) { callback(enosys()); },
+ fsync(fd, callback) { callback(null); },
+ ftruncate(fd, length, callback) { callback(enosys()); },
+ lchown(path, uid, gid, callback) { callback(enosys()); },
+ link(path, link, callback) { callback(enosys()); },
+ lstat(path, callback) { callback(enosys()); },
+ mkdir(path, perm, callback) { callback(enosys()); },
+ open(path, flags, mode, callback) { callback(enosys()); },
+ read(fd, buffer, offset, length, position, callback) { callback(enosys()); },
+ readdir(path, callback) { callback(enosys()); },
+ readlink(path, callback) { callback(enosys()); },
+ rename(from, to, callback) { callback(enosys()); },
+ rmdir(path, callback) { callback(enosys()); },
+ stat(path, callback) { callback(enosys()); },
+ symlink(path, link, callback) { callback(enosys()); },
+ truncate(path, length, callback) { callback(enosys()); },
+ unlink(path, callback) { callback(enosys()); },
+ utimes(path, atime, mtime, callback) { callback(enosys()); },
+ };
+ }
+
+ if (!globalThis.process) {
+ globalThis.process = {
+ getuid() { return -1; },
+ getgid() { return -1; },
+ geteuid() { return -1; },
+ getegid() { return -1; },
+ getgroups() { throw enosys(); },
+ pid: -1,
+ ppid: -1,
+ umask() { throw enosys(); },
+ cwd() { throw enosys(); },
+ chdir() { throw enosys(); },
+ }
+ }
+
+ if (!globalThis.path) {
+ globalThis.path = {
+ resolve(...pathSegments) {
+ return pathSegments.join("/");
+ }
+ }
+ }
+
+ if (!globalThis.crypto) {
+ throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)");
+ }
+
+ if (!globalThis.performance) {
+ throw new Error("globalThis.performance is not available, polyfill required (performance.now only)");
+ }
+
+ if (!globalThis.TextEncoder) {
+ throw new Error("globalThis.TextEncoder is not available, polyfill required");
+ }
+
+ if (!globalThis.TextDecoder) {
+ throw new Error("globalThis.TextDecoder is not available, polyfill required");
+ }
+
+ const encoder = new TextEncoder("utf-8");
+ const decoder = new TextDecoder("utf-8");
+
+ globalThis.Go = class {
+ constructor() {
+ this.argv = ["js"];
+ this.env = {};
+ this.exit = (code) => {
+ if (code !== 0) {
+ console.warn("exit code:", code);
+ }
+ };
+ this._exitPromise = new Promise((resolve) => {
+ this._resolveExitPromise = resolve;
+ });
+ this._pendingEvent = null;
+ this._scheduledTimeouts = new Map();
+ this._nextCallbackTimeoutID = 1;
+
+ const setInt64 = (addr, v) => {
+ this.mem.setUint32(addr + 0, v, true);
+ this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true);
+ }
+
+ const setInt32 = (addr, v) => {
+ this.mem.setUint32(addr + 0, v, true);
+ }
+
+ const getInt64 = (addr) => {
+ const low = this.mem.getUint32(addr + 0, true);
+ const high = this.mem.getInt32(addr + 4, true);
+ return low + high * 4294967296;
+ }
+
+ const loadValue = (addr) => {
+ const f = this.mem.getFloat64(addr, true);
+ if (f === 0) {
+ return undefined;
+ }
+ if (!isNaN(f)) {
+ return f;
+ }
+
+ const id = this.mem.getUint32(addr, true);
+ return this._values[id];
+ }
+
+ const storeValue = (addr, v) => {
+ const nanHead = 0x7FF80000;
+
+ if (typeof v === "number" && v !== 0) {
+ if (isNaN(v)) {
+ this.mem.setUint32(addr + 4, nanHead, true);
+ this.mem.setUint32(addr, 0, true);
+ return;
+ }
+ this.mem.setFloat64(addr, v, true);
+ return;
+ }
+
+ if (v === undefined) {
+ this.mem.setFloat64(addr, 0, true);
+ return;
+ }
+
+ let id = this._ids.get(v);
+ if (id === undefined) {
+ id = this._idPool.pop();
+ if (id === undefined) {
+ id = this._values.length;
+ }
+ this._values[id] = v;
+ this._goRefCounts[id] = 0;
+ this._ids.set(v, id);
+ }
+ this._goRefCounts[id]++;
+ let typeFlag = 0;
+ switch (typeof v) {
+ case "object":
+ if (v !== null) {
+ typeFlag = 1;
+ }
+ break;
+ case "string":
+ typeFlag = 2;
+ break;
+ case "symbol":
+ typeFlag = 3;
+ break;
+ case "function":
+ typeFlag = 4;
+ break;
+ }
+ this.mem.setUint32(addr + 4, nanHead | typeFlag, true);
+ this.mem.setUint32(addr, id, true);
+ }
+
+ const loadSlice = (addr) => {
+ const array = getInt64(addr + 0);
+ const len = getInt64(addr + 8);
+ return new Uint8Array(this._inst.exports.mem.buffer, array, len);
+ }
+
+ const loadSliceOfValues = (addr) => {
+ const array = getInt64(addr + 0);
+ const len = getInt64(addr + 8);
+ const a = new Array(len);
+ for (let i = 0; i < len; i++) {
+ a[i] = loadValue(array + i * 8);
+ }
+ return a;
+ }
+
+ const loadString = (addr) => {
+ const saddr = getInt64(addr + 0);
+ const len = getInt64(addr + 8);
+ return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len));
+ }
+
+ const testCallExport = (a, b) => {
+ this._inst.exports.testExport0();
+ return this._inst.exports.testExport(a, b);
+ }
+
+ const timeOrigin = Date.now() - performance.now();
+ this.importObject = {
+ _gotest: {
+ add: (a, b) => a + b,
+ callExport: testCallExport,
+ },
+ gojs: {
+ // Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
+ // may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
+ // function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
+ // This changes the SP, thus we have to update the SP used by the imported function.
+
+ // func wasmExit(code int32)
+ "runtime.wasmExit": (sp) => {
+ sp >>>= 0;
+ const code = this.mem.getInt32(sp + 8, true);
+ this.exited = true;
+ delete this._inst;
+ delete this._values;
+ delete this._goRefCounts;
+ delete this._ids;
+ delete this._idPool;
+ this.exit(code);
+ },
+
+ // func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
+ "runtime.wasmWrite": (sp) => {
+ sp >>>= 0;
+ const fd = getInt64(sp + 8);
+ const p = getInt64(sp + 16);
+ const n = this.mem.getInt32(sp + 24, true);
+ fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
+ },
+
+ // func resetMemoryDataView()
+ "runtime.resetMemoryDataView": (sp) => {
+ sp >>>= 0;
+ this.mem = new DataView(this._inst.exports.mem.buffer);
+ },
+
+ // func nanotime1() int64
+ "runtime.nanotime1": (sp) => {
+ sp >>>= 0;
+ setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000);
+ },
+
+ // func walltime() (sec int64, nsec int32)
+ "runtime.walltime": (sp) => {
+ sp >>>= 0;
+ const msec = (new Date).getTime();
+ setInt64(sp + 8, msec / 1000);
+ this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true);
+ },
+
+ // func scheduleTimeoutEvent(delay int64) int32
+ "runtime.scheduleTimeoutEvent": (sp) => {
+ sp >>>= 0;
+ const id = this._nextCallbackTimeoutID;
+ this._nextCallbackTimeoutID++;
+ this._scheduledTimeouts.set(id, setTimeout(
+ () => {
+ this._resume();
+ while (this._scheduledTimeouts.has(id)) {
+ // for some reason Go failed to register the timeout event, log and try again
+ // (temporary workaround for https://github.com/golang/go/issues/28975)
+ console.warn("scheduleTimeoutEvent: missed timeout event");
+ this._resume();
+ }
+ },
+ getInt64(sp + 8),
+ ));
+ this.mem.setInt32(sp + 16, id, true);
+ },
+
+ // func clearTimeoutEvent(id int32)
+ "runtime.clearTimeoutEvent": (sp) => {
+ sp >>>= 0;
+ const id = this.mem.getInt32(sp + 8, true);
+ clearTimeout(this._scheduledTimeouts.get(id));
+ this._scheduledTimeouts.delete(id);
+ },
+
+ // func getRandomData(r []byte)
+ "runtime.getRandomData": (sp) => {
+ sp >>>= 0;
+ crypto.getRandomValues(loadSlice(sp + 8));
+ },
+
+ // func finalizeRef(v ref)
+ "syscall/js.finalizeRef": (sp) => {
+ sp >>>= 0;
+ const id = this.mem.getUint32(sp + 8, true);
+ this._goRefCounts[id]--;
+ if (this._goRefCounts[id] === 0) {
+ const v = this._values[id];
+ this._values[id] = null;
+ this._ids.delete(v);
+ this._idPool.push(id);
+ }
+ },
+
+ // func stringVal(value string) ref
+ "syscall/js.stringVal": (sp) => {
+ sp >>>= 0;
+ storeValue(sp + 24, loadString(sp + 8));
+ },
+
+ // func valueGet(v ref, p string) ref
+ "syscall/js.valueGet": (sp) => {
+ sp >>>= 0;
+ const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16));
+ sp = this._inst.exports.getsp() >>> 0; // see comment above
+ storeValue(sp + 32, result);
+ },
+
+ // func valueSet(v ref, p string, x ref)
+ "syscall/js.valueSet": (sp) => {
+ sp >>>= 0;
+ Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
+ },
+
+ // func valueDelete(v ref, p string)
+ "syscall/js.valueDelete": (sp) => {
+ sp >>>= 0;
+ Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16));
+ },
+
+ // func valueIndex(v ref, i int) ref
+ "syscall/js.valueIndex": (sp) => {
+ sp >>>= 0;
+ storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
+ },
+
+ // valueSetIndex(v ref, i int, x ref)
+ "syscall/js.valueSetIndex": (sp) => {
+ sp >>>= 0;
+ Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
+ },
+
+ // func valueCall(v ref, m string, args []ref) (ref, bool)
+ "syscall/js.valueCall": (sp) => {
+ sp >>>= 0;
+ try {
+ const v = loadValue(sp + 8);
+ const m = Reflect.get(v, loadString(sp + 16));
+ const args = loadSliceOfValues(sp + 32);
+ const result = Reflect.apply(m, v, args);
+ sp = this._inst.exports.getsp() >>> 0; // see comment above
+ storeValue(sp + 56, result);
+ this.mem.setUint8(sp + 64, 1);
+ } catch (err) {
+ sp = this._inst.exports.getsp() >>> 0; // see comment above
+ storeValue(sp + 56, err);
+ this.mem.setUint8(sp + 64, 0);
+ }
+ },
+
+ // func valueInvoke(v ref, args []ref) (ref, bool)
+ "syscall/js.valueInvoke": (sp) => {
+ sp >>>= 0;
+ try {
+ const v = loadValue(sp + 8);
+ const args = loadSliceOfValues(sp + 16);
+ const result = Reflect.apply(v, undefined, args);
+ sp = this._inst.exports.getsp() >>> 0; // see comment above
+ storeValue(sp + 40, result);
+ this.mem.setUint8(sp + 48, 1);
+ } catch (err) {
+ sp = this._inst.exports.getsp() >>> 0; // see comment above
+ storeValue(sp + 40, err);
+ this.mem.setUint8(sp + 48, 0);
+ }
+ },
+
+ // func valueNew(v ref, args []ref) (ref, bool)
+ "syscall/js.valueNew": (sp) => {
+ sp >>>= 0;
+ try {
+ const v = loadValue(sp + 8);
+ const args = loadSliceOfValues(sp + 16);
+ const result = Reflect.construct(v, args);
+ sp = this._inst.exports.getsp() >>> 0; // see comment above
+ storeValue(sp + 40, result);
+ this.mem.setUint8(sp + 48, 1);
+ } catch (err) {
+ sp = this._inst.exports.getsp() >>> 0; // see comment above
+ storeValue(sp + 40, err);
+ this.mem.setUint8(sp + 48, 0);
+ }
+ },
+
+ // func valueLength(v ref) int
+ "syscall/js.valueLength": (sp) => {
+ sp >>>= 0;
+ setInt64(sp + 16, parseInt(loadValue(sp + 8).length));
+ },
+
+ // valuePrepareString(v ref) (ref, int)
+ "syscall/js.valuePrepareString": (sp) => {
+ sp >>>= 0;
+ const str = encoder.encode(String(loadValue(sp + 8)));
+ storeValue(sp + 16, str);
+ setInt64(sp + 24, str.length);
+ },
+
+ // valueLoadString(v ref, b []byte)
+ "syscall/js.valueLoadString": (sp) => {
+ sp >>>= 0;
+ const str = loadValue(sp + 8);
+ loadSlice(sp + 16).set(str);
+ },
+
+ // func valueInstanceOf(v ref, t ref) bool
+ "syscall/js.valueInstanceOf": (sp) => {
+ sp >>>= 0;
+ this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0);
+ },
+
+ // func copyBytesToGo(dst []byte, src ref) (int, bool)
+ "syscall/js.copyBytesToGo": (sp) => {
+ sp >>>= 0;
+ const dst = loadSlice(sp + 8);
+ const src = loadValue(sp + 32);
+ if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
+ this.mem.setUint8(sp + 48, 0);
+ return;
+ }
+ const toCopy = src.subarray(0, dst.length);
+ dst.set(toCopy);
+ setInt64(sp + 40, toCopy.length);
+ this.mem.setUint8(sp + 48, 1);
+ },
+
+ // func copyBytesToJS(dst ref, src []byte) (int, bool)
+ "syscall/js.copyBytesToJS": (sp) => {
+ sp >>>= 0;
+ const dst = loadValue(sp + 8);
+ const src = loadSlice(sp + 16);
+ if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
+ this.mem.setUint8(sp + 48, 0);
+ return;
+ }
+ const toCopy = src.subarray(0, dst.length);
+ dst.set(toCopy);
+ setInt64(sp + 40, toCopy.length);
+ this.mem.setUint8(sp + 48, 1);
+ },
+
+ "debug": (value) => {
+ console.log(value);
+ },
+ }
+ };
+ }
+
+ async run(instance) {
+ if (!(instance instanceof WebAssembly.Instance)) {
+ throw new Error("Go.run: WebAssembly.Instance expected");
+ }
+ this._inst = instance;
+ this.mem = new DataView(this._inst.exports.mem.buffer);
+ this._values = [ // JS values that Go currently has references to, indexed by reference id
+ NaN,
+ 0,
+ null,
+ true,
+ false,
+ globalThis,
+ this,
+ ];
+ this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id
+ this._ids = new Map([ // mapping from JS values to reference ids
+ [0, 1],
+ [null, 2],
+ [true, 3],
+ [false, 4],
+ [globalThis, 5],
+ [this, 6],
+ ]);
+ this._idPool = []; // unused ids that have been garbage collected
+ this.exited = false; // whether the Go program has exited
+
+ // Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory.
+ let offset = 4096;
+
+ const strPtr = (str) => {
+ const ptr = offset;
+ const bytes = encoder.encode(str + "\0");
+ new Uint8Array(this.mem.buffer, offset, bytes.length).set(bytes);
+ offset += bytes.length;
+ if (offset % 8 !== 0) {
+ offset += 8 - (offset % 8);
+ }
+ return ptr;
+ };
+
+ const argc = this.argv.length;
+
+ const argvPtrs = [];
+ this.argv.forEach((arg) => {
+ argvPtrs.push(strPtr(arg));
+ });
+ argvPtrs.push(0);
+
+ const keys = Object.keys(this.env).sort();
+ keys.forEach((key) => {
+ argvPtrs.push(strPtr(`${key}=${this.env[key]}`));
+ });
+ argvPtrs.push(0);
+
+ const argv = offset;
+ argvPtrs.forEach((ptr) => {
+ this.mem.setUint32(offset, ptr, true);
+ this.mem.setUint32(offset + 4, 0, true);
+ offset += 8;
+ });
+
+ // The linker guarantees global data starts from at least wasmMinDataAddr.
+ // Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
+ const wasmMinDataAddr = 4096 + 8192;
+ if (offset >= wasmMinDataAddr) {
+ throw new Error("total length of command line and environment variables exceeds limit");
+ }
+
+ this._inst.exports.run(argc, argv);
+ if (this.exited) {
+ this._resolveExitPromise();
+ }
+ await this._exitPromise;
+ }
+
+ _resume() {
+ if (this.exited) {
+ throw new Error("Go program has already exited");
+ }
+ this._inst.exports.resume();
+ if (this.exited) {
+ this._resolveExitPromise();
+ }
+ }
+
+ _makeFuncWrapper(id) {
+ const go = this;
+ return function () {
+ const event = { id: id, this: this, args: arguments };
+ go._pendingEvent = event;
+ go._resume();
+ return event.result;
+ };
+ }
+ }
+})();
diff --git a/pc-client/scripts/mock-account-server.js b/pc-client/scripts/mock-account-server.js
new file mode 100644
index 0000000..ad17491
--- /dev/null
+++ b/pc-client/scripts/mock-account-server.js
@@ -0,0 +1,161 @@
+/**
+ * 本地开发用 mock 账号服务（畅联 PC 端联调用）
+ *
+ * ⚠️ 仅供本地开发联调！
+ * - 内置测试环境默认密钥（OpenIM secret / LiveKit key），都是内网测试环境的公开默认值
+ * - 禁止打包进客户端、禁止用于正式环境
+ * - 真实员工账号由管理员在服务器上的账号服务（:10010）开通
+ *
+ * 用法：
+ * 1. node scripts/mock-account-server.js（或 npm run mock:account）
+ * 2. 把 .env 里的 VITE_ACCOUNT_URL 临时指向 http://127.0.0.1:11010
+ * 3. 用 test001 / test123（或 test002 / test123）登录
+ *
+ * 接口形状与真实账号服务完全一致：POST /api/login、POST /api/rtc_token。
+ * 零依赖，Node >= 18（用到全局 fetch）。
+ */
+
+'use strict';
+
+const http = require('http');
+const crypto = require('crypto');
+
+const PORT = 11010;
+const OPENIM_API_URL = 'http://192.168.200.11:10002';
+const OPENIM_SECRET = 'openIM123';
+const LIVEKIT_API_KEY = 'openimLKkey';
+const LIVEKIT_API_SECRET = 'lk-secret-9f2c7a41d5e8b063f1a4c795e2d8b3a6';
+
+// 本地测试账号（密码均为 test123）
+const USERS = {
+ test001: { password: 'test123', nickname: '测试一号' },
+ test002: { password: 'test123', nickname: '测试二号' },
+};
+
+// ---------------- OpenIM 管理接口 ----------------
+
+async function imApi(route, body, token) {
+ const res = await fetch(OPENIM_API_URL + route, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ operationID: crypto.randomUUID(),
+ ...(token ? { token } : {}),
+ },
+ body: JSON.stringify(body),
+ });
+ return res.json();
+}
+
+async function getAdminToken() {
+ const r = await imApi('/auth/get_admin_token', {
+ secret: OPENIM_SECRET,
+ userID: 'imAdmin',
+ });
+ if (r.errCode !== 0) throw new Error('OpenIM 管理员令牌获取失败: ' + (r.errMsg || r.errCode));
+ return r.data.token;
+}
+
+/** 确保 OpenIM 里存在该用户（不存在则注册，尽力而为） */
+async function ensureImUser(userID, nickname, admin) {
+ try {
+ await imApi('/user/user_register', {
+ users: [{ userID, nickname, faceURL: '' }],
+ }, admin);
+ } catch { /* 忽略，后面取令牌时再报错 */ }
+}
+
+async function getImUserToken(userID, platformID) {
+ const admin = await getAdminToken();
+ await ensureImUser(userID, USERS[userID].nickname, admin);
+ const r = await imApi('/auth/get_user_token', { secret: OPENIM_SECRET, platformID, userID }, admin);
+ if (r.errCode !== 0) throw new Error('OpenIM 用户令牌获取失败: ' + (r.errMsg || r.errCode));
+ return r.data;
+}
+
+// ---------------- LiveKit RTC 令牌签发 ----------------
+
+const b64url = (s) => Buffer.from(s).toString('base64url');
+
+function signLivekitToken(userID, room) {
+ const now = Math.floor(Date.now() / 1000);
+ const header = b64url(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
+ const payload = b64url(JSON.stringify({
+ iss: LIVEKIT_API_KEY,
+ sub: userID,
+ exp: now + 3600,
+ nbf: now - 10,
+ video: { roomJoin: true, room },
+ metadata: '',
+ }));
+ const sig = crypto.createHmac('sha256', LIVEKIT_API_SECRET).update(`${header}.${payload}`).digest('base64url');
+ return `${header}.${payload}.${sig}`;
+}
+
+// ---------------- HTTP 服务 ----------------
+
+function send(res, status, obj) {
+ res.writeHead(status, {
+ 'Content-Type': 'application/json; charset=utf-8',
+ 'Access-Control-Allow-Origin': '*',
+ 'Access-Control-Allow-Headers': 'Content-Type, authorization',
+ 'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
+ });
+ res.end(JSON.stringify(obj));
+}
+
+const ok = (res, data) => send(res, 200, { code: 0, msg: '', data });
+const fail = (res, msg, httpStatus = 200) => send(res, httpStatus, { code: 1, msg });
+
+function readBody(req) {
+ return new Promise((resolve, reject) => {
+ let buf = '';
+ req.on('data', (c) => { buf += c; });
+ req.on('end', () => {
+ if (!buf) return resolve({});
+ try { resolve(JSON.parse(buf)); } catch { reject(new Error('请求体不是合法 JSON')); }
+ });
+ req.on('error', reject);
+ });
+}
+
+const server = http.createServer(async (req, res) => {
+ try {
+ const url = new URL(req.url, 'http://localhost');
+ if (req.method === 'OPTIONS') return send(res, 204, {});
+
+ if (req.method === 'POST' && url.pathname === '/api/login') {
+ const body = await readBody(req);
+ const { staffNo, password, platformID } = body;
+ if (!staffNo || !password) return fail(res, '工号和密码不能为空');
+ const user = USERS[staffNo];
+ if (!user || user.password !== String(password)) return fail(res, '工号或密码错误');
+ const t = await getImUserToken(staffNo, Number.isInteger(platformID) ? platformID : 3);
+ return ok(res, {
+ userID: staffNo,
+ nickname: user.nickname,
+ imToken: t.token,
+ expireTimeSeconds: t.expireTimeSeconds,
+ });
+ }
+
+ if (req.method === 'POST' && url.pathname === '/api/rtc_token') {
+ // 与真实账号服务一致：Authorization: Bearer
+ {
+ setLine(Number(e.target.value));
+ }}
+ type="number"
+ />
+
+
+
+
+
+ );
+ };
+
+ const openSelectLine = () => {
+ const current = modal.info({
+ title: null,
+ icon: null,
+ footer: null,
+ width: 300,
+ className: "no-padding-modal",
+ centered: true,
+ maskTransitionName: "",
+ content:
+
+
+ {t("placeholder.about")}
+
+
+ 
+
+
+
+
+ {`${APP_NAME} ${APP_VERSION}`}
+ {SDK_VERSION}
+ tryLogReport(10000)}
+ >
+
+ {t("placeholder.reportLog")}
+
+
+
+ )}
+ {t("placeholder.reportSpecificLog")}
+
+
+ );
+};
+
+export const BlackListContent = ({ closeOverlay }: { closeOverlay?: () => void }) => {
+ const blackList = useContactStore((state) => state.blackList);
+
+ const removeBlack = async (userID: string) => {
+ try {
+ await IMSDK.removeBlack(userID);
+ } catch (error) {
+ feedbackToast({ error });
+ }
+ };
+
+ return (
+
+
+
+ {black.nickname}
+
+
+ );
+};
diff --git a/pc-client/src/layout/LeftNavBar/PersonalSettings.tsx b/pc-client/src/layout/LeftNavBar/PersonalSettings.tsx
new file mode 100644
index 0000000..40a7fb7
--- /dev/null
+++ b/pc-client/src/layout/LeftNavBar/PersonalSettings.tsx
@@ -0,0 +1,105 @@
+import { CloseOutlined } from "@ant-design/icons";
+import { Checkbox, Modal } from "antd";
+import { t } from "i18next";
+import { forwardRef, ForwardRefRenderFunction, memo } from "react";
+
+import { useUserStore } from "@/store";
+
+import { OverlayVisibleHandle, useOverlayVisible } from "../../hooks/useOverlayVisible";
+
+const PersonalSettings: ForwardRefRenderFunction
+ {t("placeholder.blackList")}
+
+
+ {blackList.length > 0 ? (
+ blackList.map((black) => (
+
+
+
+ );
+};
diff --git a/pc-client/src/layout/LeftNavBar/index.tsx b/pc-client/src/layout/LeftNavBar/index.tsx
new file mode 100644
index 0000000..3ce30ea
--- /dev/null
+++ b/pc-client/src/layout/LeftNavBar/index.tsx
@@ -0,0 +1,307 @@
+import {
+ ContactsFilled,
+ ContactsOutlined,
+ MessageFilled,
+ MessageOutlined,
+ RightOutlined,
+} from "@ant-design/icons";
+import { Badge, Divider, Popover, Upload } from "antd";
+import clsx from "clsx";
+import i18n, { t } from "i18next";
+import React, { memo, useRef, useState } from "react";
+import ImageResizer from "react-image-file-resizer";
+import { UNSAFE_NavigationContext, useResolvedPath } from "react-router-dom";
+
+import { modal } from "@/AntdGlobalComp";
+import { updateBusinessUserInfo } from "@/api/login";
+import change_avatar from "@/assets/images/profile/change_avatar.png";
+import OIMAvatar from "@/components/OIMAvatar";
+import { useContactStore, useConversationStore, useUserStore } from "@/store";
+import { feedbackToast } from "@/utils/common";
+import { emit } from "@/utils/events";
+import { uploadFile } from "@/utils/imCommon";
+
+import { OverlayVisibleHandle } from "../../hooks/useOverlayVisible";
+import About from "./About";
+import styles from "./left-nav-bar.module.scss";
+import PersonalSettings from "./PersonalSettings";
+
+const AppIcon = () => (
+
+ {t("placeholder.accountSetting")}
+
+
+
+
+
+
+
+
+ {t("placeholder.personalSetting")}
+
+ {Boolean(window.electronAPI) && (
+
+
+ )}
+
+ {t("placeholder.closeButtonEvent")}
+
+
+ closeActionChange(e.target.checked, "quit")}
+ >
+ {t("placeholder.exitApplication")}
+
+ closeActionChange(e.target.checked, "miniSize")}
+ >
+ {t("placeholder.minimize")}
+
+
+
+
+
+);
+
+const NavList = [
+ {
+ icon: MessageOutlined,
+ icon_active: MessageFilled,
+ title: t("placeholder.chat"),
+ path: "/chat",
+ },
+ {
+ icon: ContactsOutlined,
+ icon_active: ContactsFilled,
+ title: t("placeholder.contact"),
+ path: "/contact",
+ },
+];
+
+i18n.on("languageChanged", () => {
+ NavList[0].title = t("placeholder.chat");
+ NavList[1].title = t("placeholder.contact");
+});
+
+const resizeFile = (file: File): Promise
+
+
+
+ );
+};
+
+const profileMenuList = [
+ {
+ title: t("placeholder.myInfo"),
+ gap: true,
+ idx: 0,
+ },
+ {
+ title: t("placeholder.accountSetting"),
+ gap: true,
+ idx: 1,
+ },
+ {
+ title: t("placeholder.about"),
+ gap: false,
+ idx: 2,
+ },
+ {
+ title: t("placeholder.logOut"),
+ gap: false,
+ idx: 3,
+ },
+];
+
+i18n.on("languageChanged", () => {
+ profileMenuList[0].title = t("placeholder.myInfo");
+ profileMenuList[1].title = t("placeholder.accountSetting");
+ profileMenuList[2].title = t("placeholder.about");
+ profileMenuList[3].title = t("placeholder.logOut");
+});
+
+const LeftNavBar = memo(() => {
+ const aboutRef = useRef
+
+ );
+
+ return (
+
+
+
+
+ {profileMenuList.map((menu) => (
+
+
+
+ 
+
+
+
+ {selfInfo.nickname}
+
+
+ ))}
+ profileMenuClick(menu.idx)}
+ >
+
+ {menu.gap && (
+ {menu.title}
+
+
+ )}
+
+ setShowProfile(vis)}
+ >
+
+
+ );
+});
+
+export default LeftNavBar;
diff --git a/pc-client/src/layout/LeftNavBar/left-nav-bar.module.scss b/pc-client/src/layout/LeftNavBar/left-nav-bar.module.scss
new file mode 100644
index 0000000..dd6befe
--- /dev/null
+++ b/pc-client/src/layout/LeftNavBar/left-nav-bar.module.scss
@@ -0,0 +1,13 @@
+.avatar-wrapper {
+ @apply mr-4 relative;
+
+ &:hover {
+ .mask {
+ @apply opacity-100 cursor-pointer;
+ }
+ }
+
+ .mask {
+ @apply flex justify-center items-center bg-[rgba(0,0,0,.6)] absolute z-10 top-0 left-0 w-full h-full rounded-md opacity-0 transition-opacity;
+ }
+}
diff --git a/pc-client/src/layout/MainContentLayout.tsx b/pc-client/src/layout/MainContentLayout.tsx
new file mode 100644
index 0000000..28ec79d
--- /dev/null
+++ b/pc-client/src/layout/MainContentLayout.tsx
@@ -0,0 +1,49 @@
+import { useMount } from "ahooks";
+import { Layout, Spin } from "antd";
+import { t } from "i18next";
+import { Outlet, useMatches, useNavigate } from "react-router-dom";
+
+import WindowControlBar from "@/components/WindowControlBar";
+import { useUserStore } from "@/store";
+
+import GlobalModals from "./GlobalModals";
+import LeftNavBar from "./LeftNavBar";
+import { useGlobalEvent } from "./useGlobalEvents";
+
+export const MainContentLayout = () => {
+ useGlobalEvent();
+ const matches = useMatches();
+ const navigate = useNavigate();
+
+ const progress = useUserStore((state) => state.progress);
+ const syncState = useUserStore((state) => state.syncState);
+ const reinstall = useUserStore((state) => state.reinstall);
+ const isLogining = useUserStore((state) => state.isLogining);
+
+ useMount(() => {
+ const isRoot = !matches.find((item) => item.pathname !== "/");
+ const inConversation = matches.some((item) => item.params.conversationID);
+ if (isRoot || inConversation) {
+ navigate("chat", {
+ replace: true,
+ });
+ }
+ });
+
+ const loadingTip = isLogining ? t("toast.loading") : `${progress}%`;
+ const showLockLoading = isLogining || (reinstall && syncState === "loading");
+
+ return (
+
+ {NavList.map((nav) => (
+
+
+
+
+
+
+ );
+};
+
+export default memo(ConversationItem);
diff --git a/pc-client/src/pages/chat/ConversationSider/conversation-item.module.scss b/pc-client/src/pages/chat/ConversationSider/conversation-item.module.scss
new file mode 100644
index 0000000..ddeadfe
--- /dev/null
+++ b/pc-client/src/pages/chat/ConversationSider/conversation-item.module.scss
@@ -0,0 +1,19 @@
+.conversation-item {
+ @apply relative mx-2 my-0.5 flex cursor-pointer items-center rounded-lg px-3 py-2.5;
+
+ &-pined {
+ &::after {
+ content: "";
+ position: absolute;
+ right: 0;
+ top: 0;
+ border: 4px solid;
+ border-color: var(--primary) var(--primary) transparent transparent;
+ }
+ }
+
+ :global(.emojione) {
+ width: 16px;
+ height: 16px;
+ }
+}
diff --git a/pc-client/src/pages/chat/ConversationSider/index.module.scss b/pc-client/src/pages/chat/ConversationSider/index.module.scss
new file mode 100644
index 0000000..cbcab2b
--- /dev/null
+++ b/pc-client/src/pages/chat/ConversationSider/index.module.scss
@@ -0,0 +1,13 @@
+@keyframes loading {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.loading {
+ animation: loading 1.5s infinite;
+}
diff --git a/pc-client/src/pages/chat/ConversationSider/index.tsx b/pc-client/src/pages/chat/ConversationSider/index.tsx
new file mode 100644
index 0000000..f7ff480
--- /dev/null
+++ b/pc-client/src/pages/chat/ConversationSider/index.tsx
@@ -0,0 +1,168 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Spin } from "antd";
+import { t } from "i18next";
+import { useMemo, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+
+import FlexibleSider from "@/components/FlexibleSider";
+import { useConversationStore, useUserStore } from "@/store";
+
+import ConversationItemComp from "./ConversationItem";
+
+// 断网时顶部的深色提示横条
+const OfflineBar = () => (
+
+
+
+
+
+
+ {conversation.showName}
+
+ {latestMessageTime}
+
+
+
+
+
+
+
+);
+
+const EmptyIcon = () => (
+
+);
+
+const ConversationSider = () => {
+ const { conversationID } = useParams();
+ const navigate = useNavigate();
+ const conversationList = useConversationStore((state) => state.conversationList);
+ const getConversationListByReq = useConversationStore(
+ (state) => state.getConversationListByReq,
+ );
+ const syncState = useUserStore((state) => state.syncState);
+ const connectState = useUserStore((state) => state.connectState);
+ const [keyword, setKeyword] = useState("");
+ const virtuoso = useRef
+
+ {t("states.offline")}
+
+
+ {t("states.offlineTip")}
+
+
+
+ );
+ }
+ if (syncState === "failed" && conversationList.length === 0) {
+ return (
+ {t("states.loading")}
+
+ {t("states.loadingTip")}
+
+
+
+ );
+ }
+ if (conversationList.length === 0) {
+ return (
+ {t("states.loadFailed")}
+
+ {t("states.loadFailedTip")}
+
+
+
+
+ );
+ }
+ return (
+ {t("states.noMessage")}
+
+ {t("states.noMessageTip")}
+
+
+
+
+ {renderBody()}
+ {t("placeholder.chat")}
+ }
+ placeholder={t("placeholder.search")}
+ allowClear
+ value={keyword}
+ onChange={(e) => setKeyword(e.target.value)}
+ />
+
+
+
+
+
+ {t("placeholder.title")}
+
+ {t("placeholder.subTitle")}
+
+
+
+ );
+ }
+ if (loadError) {
+ return (
+ {t("states.loading")}
+
+ {t("states.loadingTip")}
+
+
+
+ );
+ }
+ return (
+ {t("states.loadFailed")}
+
+ {t("states.loadFailedTip")}
+
+
+
+
+ ) : null,
+ }}
+ computeItemKey={(_, item) => item.clientMsgID}
+ itemContent={(index, message) => {
+ const dataIndex = index - loadState.firstItemIndex;
+ const prevMessage = loadState.messageList[dataIndex - 1];
+ const showTimeDivider =
+ !prevMessage ||
+ message.sendTime - prevMessage.sendTime > TIME_DIVIDER_GAP;
+
+ return (
+
+ {showTimeDivider && (
+
+ );
+ }}
+ />
+ );
+ };
+
+ return (
+
+ {formatMessageTime(message.sendTime)}
+
+ )}
+ {SystemMessageTypes.includes(message.contentType) ? (
+
+ {EMOJI_LIST.map((emoji) => (
+
+);
+
+const ChatFooter: ForwardRefRenderFunction onSelect(emoji)}
+ >
+ {emoji}
+
+ ))}
+
+
+
+ {/* 给悬浮窗口控制条留出空间 */}
+ {Boolean(window.electronAPI) && }
+
+
+
+
+ {currentConversation?.showName}
+
+
+ {fetchState.groupMemberList.length === 0 ? (
+ (fetchState.loading ?
+ );
+};
+
+export default GroupMemberList;
+
+interface IMemberItemProps {
+ member: GroupMemberItem;
+ selfUserID: string;
+}
+
+const MemberItem = memo(({ member }: IMemberItemProps) => {
+ const isOwner = member.roleLevel === GroupMemberRole.Owner;
+ return (
+
+
+ );
+});
diff --git a/pc-client/src/pages/chat/queryChat/GroupSetting/GroupMemberListHeader.tsx b/pc-client/src/pages/chat/queryChat/GroupSetting/GroupMemberListHeader.tsx
new file mode 100644
index 0000000..b4ba518
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/GroupSetting/GroupMemberListHeader.tsx
@@ -0,0 +1,38 @@
+import { LeftOutlined } from "@ant-design/icons";
+import { t } from "i18next";
+import { memo } from "react";
+
+import invite_header from "@/assets/images/chatSetting/invite_header.png";
+import { useConversationStore } from "@/store";
+import { emit } from "@/utils/events";
+
+const GroupMemberListHeader = ({ back2Settings }: { back2Settings: () => void }) => {
+ return (
+ window.userClick(member.userID, member.groupID)}
+ >
+
+
+
+ {member.nickname}
+ {isOwner && (
+
+ {t("placeholder.groupOwner")}
+
+ )}
+
+
+ );
+};
+
+export default memo(GroupMemberListHeader);
diff --git a/pc-client/src/pages/chat/queryChat/GroupSetting/GroupMemberRow.tsx b/pc-client/src/pages/chat/queryChat/GroupSetting/GroupMemberRow.tsx
new file mode 100644
index 0000000..2a07974
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/GroupSetting/GroupMemberRow.tsx
@@ -0,0 +1,103 @@
+import { GroupItem } from "@openim/wasm-client-sdk/lib/types/entity";
+import clsx from "clsx";
+import { t } from "i18next";
+import { memo, useEffect } from "react";
+
+import invite from "@/assets/images/chatSetting/invite.png";
+import kick from "@/assets/images/chatSetting/kick.png";
+import OIMAvatar from "@/components/OIMAvatar";
+import useGroupMembers from "@/hooks/useGroupMembers";
+import { emit } from "@/utils/events";
+
+import styles from "./group-setting.module.scss";
+
+const GroupMemberRow = ({
+ currentGroupInfo,
+ isNomal,
+ updateTravel,
+}: {
+ currentGroupInfo: GroupItem;
+ isNomal: boolean;
+ updateTravel: () => void;
+}) => {
+ const { fetchState, getMemberData, resetState } = useGroupMembers();
+
+ useEffect(() => {
+ if (currentGroupInfo?.groupID) {
+ getMemberData(true);
+ }
+ return () => {
+ resetState();
+ };
+ }, [currentGroupInfo?.groupID]);
+
+ const sliceCount = isNomal ? 17 : 16;
+
+ const inviteMember = (e: React.MouseEvent
+
+ {t("placeholder.memberList")}
+
+ 
+ emit("OPEN_CHOOSE_MODAL", {
+ type: "INVITE_TO_GROUP",
+ extraData: useConversationStore.getState().currentConversation?.groupID,
+ })
+ }
+ />
+
+
+
+ );
+};
+
+export default memo(GroupMemberRow);
diff --git a/pc-client/src/pages/chat/queryChat/GroupSetting/GroupSettings.tsx b/pc-client/src/pages/chat/queryChat/GroupSetting/GroupSettings.tsx
new file mode 100644
index 0000000..83b3a8e
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/GroupSetting/GroupSettings.tsx
@@ -0,0 +1,167 @@
+import { RightOutlined } from "@ant-design/icons";
+import { Button, Divider, Upload } from "antd";
+import clsx from "clsx";
+import { t } from "i18next";
+import { memo, useCallback } from "react";
+import { useCopyToClipboard } from "react-use";
+
+import copy from "@/assets/images/chatSetting/copy.png";
+import edit_avatar from "@/assets/images/chatSetting/edit_avatar.png";
+import EditableContent from "@/components/EditableContent";
+import OIMAvatar from "@/components/OIMAvatar";
+import SettingRow from "@/components/SettingRow";
+import { useCurrentMemberRole } from "@/hooks/useCurrentMemberRole";
+import { feedbackToast } from "@/utils/common";
+import { emit } from "@/utils/events";
+import { uploadFile } from "@/utils/imCommon";
+
+import { FileWithPath } from "../ChatFooter/SendActionBar/useFileMessage";
+import GroupMemberRow from "./GroupMemberRow";
+import { useGroupSettings } from "./useGroupSettings";
+
+const GroupSettings = ({
+ updateTravel,
+ closeOverlay,
+}: {
+ updateTravel: () => void;
+ closeOverlay: () => void;
+}) => {
+ const { isNomal, isOwner, isAdmin, isJoinGroup } = useCurrentMemberRole();
+
+ const { currentGroupInfo, updateGroupInfo, tryQuitGroup, tryDismissGroup } =
+ useGroupSettings({ closeOverlay });
+
+ const [_, copyToClipboard] = useCopyToClipboard();
+
+ const customUpload = async ({ file }: { file: FileWithPath }) => {
+ try {
+ const {
+ data: { url },
+ } = await uploadFile(file);
+ await updateGroupInfo({ faceURL: url });
+ } catch (error) {
+ feedbackToast({ error: t("toast.updateAvatarFailed") });
+ }
+ };
+
+ const updateGroupName = useCallback(
+ async (groupName: string) => {
+ await updateGroupInfo({ groupName });
+ },
+ [updateGroupInfo],
+ );
+
+ const transferGroup = () => {
+ emit("OPEN_CHOOSE_MODAL", {
+ type: "TRANSFER_IN_GROUP",
+ extraData: currentGroupInfo?.groupID,
+ });
+ };
+
+ const hasPermissions = isAdmin || isOwner;
+
+ return (
+
+ {t("placeholder.groupMember")}
+ {currentGroupInfo?.memberCount}
+
+
+ {fetchState.groupMemberList.slice(0, sliceCount).map((member) => (
+
+ window.userClick(member.userID, member.groupID)}
+ >
+
+ ))}
+
+ {member.nickname}
+
+
+ 
+
+ {!isNomal && (
+
+ {t("placeholder.add")}
+
+
+ 
+
+ )}
+
+ {t("placeholder.remove")}
+
+
+ {t("placeholder.viewMore")}
+
+
+
+
+
+
+ {t("placeholder.workGroup")}
+
+
+
+
+
+
+ )}
+
+
+ {isJoinGroup && (
+
+ );
+};
+
+export default memo(GroupSettings);
diff --git a/pc-client/src/pages/chat/queryChat/GroupSetting/group-setting.module.scss b/pc-client/src/pages/chat/queryChat/GroupSetting/group-setting.module.scss
new file mode 100644
index 0000000..59781e7
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/GroupSetting/group-setting.module.scss
@@ -0,0 +1,23 @@
+.member-item {
+ @apply flex flex-col items-center w-9 mr-3 mb-3;
+
+ &:nth-child(9n) {
+ margin-right: 0;
+ }
+}
+
+.list-member-item {
+ @apply flex items-center justify-between px-3.5 py-1 rounded-md;
+
+ .tools-row {
+ @apply flex items-center invisible;
+ }
+
+ &:hover {
+ @apply bg-[var(--primary-active)];
+
+ .tools-row {
+ @apply visible;
+ }
+ }
+}
diff --git a/pc-client/src/pages/chat/queryChat/GroupSetting/index.tsx b/pc-client/src/pages/chat/queryChat/GroupSetting/index.tsx
new file mode 100644
index 0000000..afe3a43
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/GroupSetting/index.tsx
@@ -0,0 +1,61 @@
+import { Drawer } from "antd";
+import { t } from "i18next";
+import { forwardRef, ForwardRefRenderFunction, memo, useRef, useState } from "react";
+
+import { OverlayVisibleHandle, useOverlayVisible } from "@/hooks/useOverlayVisible";
+
+import GroupMemberList from "./GroupMemberList";
+import GroupMemberListHeader from "./GroupMemberListHeader";
+import GroupSettings from "./GroupSettings";
+
+const GroupSetting: ForwardRefRenderFunction
+
+
+
+
+
+
+
+
+ 
+ )}
+
+
+
+ {currentGroupInfo?.groupID}
+
+ 
{
+ copyToClipboard(currentGroupInfo?.groupID ?? "");
+ feedbackToast({ msg: t("toast.copySuccess") });
+ }}
+ />
+
+
+ {!isOwner ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+ ),
+ onOk: async () => {
+ try {
+ await IMSDK.dismissGroup(currentGroupInfo.groupID);
+ closeOverlay();
+ } catch (error) {
+ feedbackToast({ error });
+ }
+ modalRef.current = null;
+ },
+ onCancel: () => {
+ modalRef.current = null;
+ },
+ });
+ };
+
+ const tryQuitGroup = () => {
+ if (!currentGroupInfo || modalRef.current) return;
+
+ modalRef.current = modal.confirm({
+ title: t("placeholder.exitGroup"),
+ content: (
+ {t("toast.confirmDisbandGroup")}
+
+ {t("placeholder.disbandGroupToast")}
+
+
+
+ ),
+ onOk: async () => {
+ try {
+ await IMSDK.quitGroup(currentGroupInfo.groupID);
+ closeOverlay();
+ } catch (error) {
+ feedbackToast({ error });
+ }
+ modalRef.current = null;
+ },
+ onCancel: () => {
+ modalRef.current = null;
+ },
+ });
+ };
+
+ return {
+ currentGroupInfo,
+ updateGroupInfo,
+ tryQuitGroup,
+ tryDismissGroup,
+ };
+}
diff --git a/pc-client/src/pages/chat/queryChat/MessageItem/CatchMsgRenderer.tsx b/pc-client/src/pages/chat/queryChat/MessageItem/CatchMsgRenderer.tsx
new file mode 100644
index 0000000..15a0597
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/MessageItem/CatchMsgRenderer.tsx
@@ -0,0 +1,19 @@
+import { MessageType } from "@openim/wasm-client-sdk";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+import { IMessageItemProps } from ".";
+import styles from "./message-item.module.scss";
+
+const CatchMessageRender: FC{t("toast.confirmExitGroup")}
+
+ {t("placeholder.exitGroupToast")}
+
+ {text}
;
+};
+
+export default CatchMessageRender;
diff --git a/pc-client/src/pages/chat/queryChat/MessageItem/FileMessageRender.tsx b/pc-client/src/pages/chat/queryChat/MessageItem/FileMessageRender.tsx
new file mode 100644
index 0000000..a2f1ce1
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/MessageItem/FileMessageRender.tsx
@@ -0,0 +1,90 @@
+import { FC, useState } from "react";
+
+import { feedbackToast } from "@/utils/common";
+
+import { IMessageItemProps } from ".";
+
+const formatFileSize = (size: number) => {
+ if (!size && size !== 0) return "";
+ if (size < 1024) return `${size} B`;
+ if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+ if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MB`;
+ return `${(size / 1024 / 1024 / 1024).toFixed(1)} GB`;
+};
+
+const FileIcon = () => (
+
+
+
+);
+
+const FileMessageRender: FC
+
+ );
+};
+
+export default FileMessageRender;
diff --git a/pc-client/src/pages/chat/queryChat/MessageItem/MediaMessageRender.tsx b/pc-client/src/pages/chat/queryChat/MessageItem/MediaMessageRender.tsx
new file mode 100644
index 0000000..c535b9f
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/MessageItem/MediaMessageRender.tsx
@@ -0,0 +1,41 @@
+import { MessageStatus } from "@openim/wasm-client-sdk";
+import { Image, Spin } from "antd";
+import { FC } from "react";
+
+import { IMessageItemProps } from ".";
+
+const min = (a: number, b: number) => (a > b ? b : a);
+
+const MediaMessageRender: FC
+
+
+ {fileElem.fileName}
+
+
+ {formatFileSize(fileElem.fileSize)}
+
+
+
+
+ }
+ />
+
+
+ {showSending && message.status === MessageStatus.Sending && (
+
+
+ )}
+
+ );
+};
+
+export default MessageSuffix;
diff --git a/pc-client/src/pages/chat/queryChat/MessageItem/SoundMessageRender.tsx b/pc-client/src/pages/chat/queryChat/MessageItem/SoundMessageRender.tsx
new file mode 100644
index 0000000..0b58f5d
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/MessageItem/SoundMessageRender.tsx
@@ -0,0 +1,97 @@
+import clsx from "clsx";
+import { t } from "i18next";
+import { FC, useEffect, useRef, useState } from "react";
+
+import { feedbackToast } from "@/utils/common";
+
+import { IMessageItemProps } from ".";
+import styles from "./message-item.module.scss";
+
+const PLAYED_KEY = "chaglian_played_sounds";
+
+const getPlayedMap = (): Record
+
+ );
+};
+
+export default SoundMessageRender;
diff --git a/pc-client/src/pages/chat/queryChat/MessageItem/TextMessageRender.tsx b/pc-client/src/pages/chat/queryChat/MessageItem/TextMessageRender.tsx
new file mode 100644
index 0000000..684d5ff
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/MessageItem/TextMessageRender.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+import { formatBr } from "@/utils/common";
+
+import { IMessageItemProps } from ".";
+import styles from "./message-item.module.scss";
+
+const TextMessageRender: FC
+
+ {!isSender && !played && (
+
+ )}
+
+
+ );
+};
+
+export default memo(MessageItem);
diff --git a/pc-client/src/pages/chat/queryChat/MessageItem/message-item.module.scss b/pc-client/src/pages/chat/queryChat/MessageItem/message-item.module.scss
new file mode 100644
index 0000000..35d1258
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/MessageItem/message-item.module.scss
@@ -0,0 +1,73 @@
+.message-container {
+ @apply flex flex-1 overflow-hidden;
+
+ .message-wrap {
+ @apply mx-3 flex flex-1 flex-col overflow-hidden;
+
+ .message-profile {
+ @apply mb-1 flex w-full text-xs;
+ }
+
+ .bubble {
+ @apply w-fit rounded-xl p-2.5;
+ word-break: break-word;
+ background-color: var(--chat-bubble);
+ }
+
+ .suffix {
+ @apply ml-3 flex items-center;
+ }
+ }
+
+ .menu-wrap {
+ @apply flex w-fit items-center;
+ }
+
+ &-sender {
+ @apply flex-row-reverse;
+
+ .message-wrap {
+ @apply items-end;
+
+ .message-profile {
+ @apply flex-row-reverse;
+ }
+
+ .bubble {
+ background-color: var(--chat-bubble-sender);
+ }
+
+ .suffix {
+ @apply ml-0 mr-3;
+ }
+ }
+
+ .menu-wrap {
+ @apply flex-row-reverse;
+ }
+ }
+}
+
+.animate-container {
+ // background-color: var(--primary-active);
+ animation: animate 2s ease-in-out;
+}
+@keyframes animate {
+ from {
+ background-color: var(--primary-active);
+ }
+ to {
+ background-color: transparent;
+ }
+}
+
+.card-shadow {
+ @apply w-60 cursor-pointer overflow-hidden rounded-md shadow-md;
+ box-shadow: 3px 3px 8px 1px rgba(81, 94, 112, 0.1);
+}
+
+.bubble {
+ word-wrap: break-word;
+ word-break: break-word;
+ white-space: pre-wrap;
+}
diff --git a/pc-client/src/pages/chat/queryChat/NotificationMessage.tsx b/pc-client/src/pages/chat/queryChat/NotificationMessage.tsx
new file mode 100644
index 0000000..8b64045
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/NotificationMessage.tsx
@@ -0,0 +1,25 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+import clsx from "clsx";
+import { FC, memo, useRef } from "react";
+
+import { notificationMessageFormat } from "@/utils/imCommon";
+
+const NotificationMessage: FC<{
+ message: MessageItem;
+}> = ({ message }) => {
+ const messageWrapRef = useRef
+
+
+ {showNickname && (
+
+
+
+ )}
+
+
+ {message.senderNickname}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default memo(NotificationMessage);
diff --git a/pc-client/src/pages/chat/queryChat/SingleSetting/index.tsx b/pc-client/src/pages/chat/queryChat/SingleSetting/index.tsx
new file mode 100644
index 0000000..ec1b004
--- /dev/null
+++ b/pc-client/src/pages/chat/queryChat/SingleSetting/index.tsx
@@ -0,0 +1,133 @@
+import { RightOutlined } from "@ant-design/icons";
+import { Button, Divider, Drawer } from "antd";
+import { t } from "i18next";
+import { forwardRef, ForwardRefRenderFunction, memo } from "react";
+
+import { modal } from "@/AntdGlobalComp";
+import OIMAvatar from "@/components/OIMAvatar";
+import SettingRow from "@/components/SettingRow";
+import { OverlayVisibleHandle, useOverlayVisible } from "@/hooks/useOverlayVisible";
+import { IMSDK } from "@/layout/MainContentWrap";
+import { useContactStore } from "@/store/contact";
+import { feedbackToast } from "@/utils/common";
+import { emit } from "@/utils/events";
+import { useConversationStore } from "@/store";
+
+// export interface SingleSettingProps {}
+
+const SingleSetting: ForwardRefRenderFunction
+
+ ),
+ onOk: execFunc,
+ });
+ } else {
+ await execFunc();
+ }
+ };
+
+ const tryUnfriend = () => {
+ if (!currentConversation) return;
+ modal.confirm({
+ title: t("placeholder.unfriend"),
+ content: t("toast.confirmUnfriend"),
+ onOk: async () => {
+ try {
+ await IMSDK.deleteFriend(currentConversation.userID);
+ } catch (error) {
+ feedbackToast({ error, msg: t("toast.unfriendFailed") });
+ }
+ },
+ });
+ };
+
+ const openUserCard = () => {
+ emit("OPEN_USER_CARD", { userID: currentConversation?.userID });
+ };
+
+ return (
+ {t("toast.confirmMoveBlacklist")}
+
+ {t("placeholder.willFilterThisUserMessage")}
+
+
+
+
+
+ {currentConversation?.showName}
+
+
+
+ )}
+
+
+
+
+ )}
+
+ {t("placeholder.dropToSend")}
+
+ !isDisabled && itemClick?.(data)}
+ >
+ {
+ e.stopPropagation();
+ cancelClick?.(data);
+ }}
+ />
+ )}
+
+ );
+};
+
+export default memo(CheckItem);
diff --git a/pc-client/src/pages/common/ChooseModal/ChooseBox/MenuItem.tsx b/pc-client/src/pages/common/ChooseModal/ChooseBox/MenuItem.tsx
new file mode 100644
index 0000000..f827d6b
--- /dev/null
+++ b/pc-client/src/pages/common/ChooseModal/ChooseBox/MenuItem.tsx
@@ -0,0 +1,25 @@
+import { RightOutlined } from "@ant-design/icons";
+
+import { ChooseMenuItem } from ".";
+
+const MenuItem = ({
+ menu,
+ menuClick,
+}: {
+ menu: ChooseMenuItem;
+ menuClick: (idx: number) => void;
+}) => (
+
+ {showCheck && (
+
+ {showCheck ? (
+ {showName}
+ menuClick(menu.idx)}
+ >
+
+);
+
+export default MenuItem;
diff --git a/pc-client/src/pages/common/ChooseModal/ChooseBox/index.tsx b/pc-client/src/pages/common/ChooseModal/ChooseBox/index.tsx
new file mode 100644
index 0000000..99a7ead
--- /dev/null
+++ b/pc-client/src/pages/common/ChooseModal/ChooseBox/index.tsx
@@ -0,0 +1,336 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { SessionType } from "@openim/wasm-client-sdk";
+import { GroupMemberItem } from "@openim/wasm-client-sdk/lib/types/entity";
+import { useDebounceFn, useLatest } from "ahooks";
+import { Breadcrumb, Input, Spin } from "antd";
+import { BreadcrumbItemType } from "antd/es/breadcrumb/Breadcrumb";
+import clsx from "clsx";
+import i18n, { t } from "i18next";
+import {
+ ChangeEvent,
+ FC,
+ forwardRef,
+ ForwardRefRenderFunction,
+ memo,
+ useCallback,
+ useEffect,
+ useImperativeHandle,
+ useRef,
+ useState,
+} from "react";
+import { Virtuoso } from "react-virtuoso";
+
+import friend from "@/assets/images/chooseModal/friend.png";
+import group from "@/assets/images/chooseModal/group.png";
+import recently from "@/assets/images/chooseModal/recently.png";
+import { useCurrentMemberRole } from "@/hooks/useCurrentMemberRole";
+import useGroupMembers from "@/hooks/useGroupMembers";
+import { IMSDK } from "@/layout/MainContentWrap";
+import { useConversationStore } from "@/store";
+import { useContactStore } from "@/store/contact";
+import { feedbackToast } from "@/utils/common";
+
+import CheckItem, { CheckListItem } from "./CheckItem";
+import MenuItem from "./MenuItem";
+
+const menuList = [
+ {
+ idx: 0,
+ title: t("placeholder.myFriend"),
+ icon: friend,
+ },
+];
+
+i18n.on("languageChanged", () => {
+ menuList[0].title = t("placeholder.myFriend");
+});
+
+export type ChooseMenuItem = (typeof menuList)[0];
+
+interface IChooseBoxProps {
+ className?: string;
+ isCheckInGroup?: boolean;
+ showGroupMember?: boolean;
+ chooseOneOnly?: boolean;
+ checkMemberRole?: boolean;
+}
+
+export interface ChooseBoxHandle {
+ getCheckedList: () => CheckListItem[];
+ updatePrevCheckList: (data: CheckListItem[]) => void;
+ resetState: () => void;
+}
+
+const ChooseBox: ForwardRefRenderFunction
+ 
+
+ {menu.title}
+
+
+ );
+};
+
+export default memo(forwardRef(ChooseBox));
+
+interface ICommonLeftProps {
+ isCheckInGroup: boolean;
+ checkClick: (data: CheckListItem) => void;
+ isChecked: (data: CheckListItem) => boolean;
+}
+
+const CommonLeft: FC
+
+
+ {showGroupMember ? (
+
+
+
+
+ {t("placeholder.selected")}
+ {` ${checkedList.length} `}
+
+
+ {checkedList.map((item) => (
+
+
+ {menuList.map((menu) => (
+
+ ))}
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+const ForwardCommonLeft = memo(CommonLeft);
+
+interface IGroupMemberListProps {
+ checkMemberRole?: boolean;
+ checkClick: (data: CheckListItem) => void;
+ isChecked: (data: CheckListItem) => boolean;
+}
+
+const GroupMemberList: FC
+ (
+
+
+
+ {type === "CRATE_GROUP" ? (
+ {titleMap[type]}
+
+
+ ) : (
+
+
+ {t("placeholder.groupName")}
+
+ setGroupBaseInfo((state) => ({ ...state, groupName: e.target.value }))
+ }
+ />
+
+
+
+ {t("placeholder.groupAvatar")}
+
+
+
+
+ {t("placeholder.clickToModify")}
+
+
+
+
+
+
+ {t("placeholder.groupMember")}
+
+
+
+
+
+
+ );
+};
diff --git a/pc-client/src/pages/common/GroupCardModal/index.tsx b/pc-client/src/pages/common/GroupCardModal/index.tsx
new file mode 100644
index 0000000..f63b574
--- /dev/null
+++ b/pc-client/src/pages/common/GroupCardModal/index.tsx
@@ -0,0 +1,190 @@
+import { LeftOutlined } from "@ant-design/icons";
+import { GroupJoinSource, SessionType } from "@openim/wasm-client-sdk";
+import { GroupItem } from "@openim/wasm-client-sdk/lib/types/entity";
+import { useRequest } from "ahooks";
+import { Button, Input } from "antd";
+import dayjs from "dayjs";
+import { t } from "i18next";
+import { forwardRef, ForwardRefRenderFunction, memo, useEffect, useState } from "react";
+
+import clock from "@/assets/images/common/clock.png";
+import member_etc from "@/assets/images/common/member_etc.png";
+import DraggableModalWrap from "@/components/DraggableModalWrap";
+import OIMAvatar from "@/components/OIMAvatar";
+import { useConversationToggle } from "@/hooks/useConversationToggle";
+import useGroupMembers from "@/hooks/useGroupMembers";
+import { OverlayVisibleHandle, useOverlayVisible } from "@/hooks/useOverlayVisible";
+import { IMSDK } from "@/layout/MainContentWrap";
+import { feedbackToast } from "@/utils/common";
+
+interface IGroupCardModalProps {
+ groupData?: GroupItem & { inGroup?: boolean };
+}
+
+const GroupCardModal: ForwardRefRenderFunction<
+ OverlayVisibleHandle,
+ IGroupCardModalProps
+> = ({ groupData }, ref) => {
+ const [reqMsg, setReqMsg] = useState("");
+ const [isSendRequest, setIsSendRequest] = useState(false);
+
+ const { fetchState, getMemberData, resetState } = useGroupMembers({
+ groupID: groupData?.groupID,
+ });
+
+ const { toSpecifiedConversation } = useConversationToggle();
+ const { isOverlayOpen, closeOverlay } = useOverlayVisible(ref);
+
+ const { runAsync, loading } = useRequest(IMSDK.joinGroup, {
+ manual: true,
+ });
+
+ useEffect(() => {
+ if (isOverlayOpen) {
+ getMemberData(true);
+ }
+ }, [isOverlayOpen]);
+
+ const createTimeStr = dayjs(groupData?.createTime ?? 0).format("YYYY/M/D");
+
+ const sliceNum = groupData?.memberCount === 8 ? 8 : 7;
+ const renderList = fetchState.groupMemberList.slice(0, sliceNum);
+
+ const joinOrSendMessage = () => {
+ if (groupData?.inGroup) {
+ toSpecifiedConversation({
+ sourceID: groupData.groupID,
+ sessionType: SessionType.WorkingGroup,
+ });
+ closeOverlay();
+ return;
+ }
+
+ setIsSendRequest(true);
+ };
+
+ const sendApplication = async () => {
+ try {
+ await runAsync({
+ groupID: groupData!.groupID,
+ reqMsg,
+ joinSource: GroupJoinSource.Search,
+ });
+ feedbackToast({ msg: t("toast.sendJoinGroupRequestSuccess") });
+ setIsSendRequest(false);
+ } catch (error) {
+ feedbackToast({ error, msg: t("toast.sendApplicationFailed") });
+ }
+ };
+
+ return (
+
+ {isSendRequest && (
+
+ setIsSendRequest(false)}
+ >
+
+ )}
+ {t("placeholder.groupVerification")}
+
+
+ {isSendRequest ? (
+
+
+
+ {groupData?.groupName}
+
+
+
+ {`ID：${groupData?.groupID}`}
+
+ 
+
+ {createTimeStr}
+
+
+ ) : (
+
+ {t("application.information")}
+
+
+ setReqMsg(e.target.value)}
+ className="bg-[var(--chat-bubble)] hover:bg-[var(--chat-bubble)]"
+ />
+
+
+
+
+
+
+ )}
+ {`${t("placeholder.groupMember")}：${
+ groupData?.memberCount
+ }`}
+
+ {renderList.map((item) => (
+
+
+
+
+
+
+ );
+};
+
+export const ForwardCounter = memo(forwardRef(Counter));
diff --git a/pc-client/src/pages/common/RtcCallModal/RtcControl.tsx b/pc-client/src/pages/common/RtcCallModal/RtcControl.tsx
new file mode 100644
index 0000000..c0feeb8
--- /dev/null
+++ b/pc-client/src/pages/common/RtcCallModal/RtcControl.tsx
@@ -0,0 +1,216 @@
+import {
+ TrackToggle,
+ useLocalParticipant,
+ useRoomContext,
+} from "@livekit/components-react";
+import { CbEvents, MessageType } from "@openim/wasm-client-sdk";
+import {
+ MessageItem,
+ RtcInvite,
+ WSEvent,
+} from "@openim/wasm-client-sdk/lib/types/entity";
+import clsx from "clsx";
+import { t } from "i18next";
+import { RemoteParticipant, RoomEvent, Track } from "livekit-client";
+import { useEffect, useRef } from "react";
+
+import { getRtcConnectData } from "@/api/imApi";
+import rtc_accept from "@/assets/images/rtc/rtc_accept.png";
+import rtc_camera from "@/assets/images/rtc/rtc_camera.png";
+import rtc_camera_off from "@/assets/images/rtc/rtc_camera_off.png";
+import rtc_hungup from "@/assets/images/rtc/rtc_hungup.png";
+import rtc_mic from "@/assets/images/rtc/rtc_mic.png";
+import rtc_mic_off from "@/assets/images/rtc/rtc_mic_off.png";
+import { CustomType } from "@/constants";
+import { IMSDK } from "@/layout/MainContentWrap";
+import { useUserStore } from "@/store";
+import { feedbackToast } from "@/utils/common";
+
+import { CounterHandle, ForwardCounter } from "./Counter";
+import { AuthData } from "./data";
+
+interface IRtcControlProps {
+ isWaiting: boolean;
+ isRecv: boolean;
+ isConnected: boolean;
+ invitation: RtcInvite;
+ connectRtc: (data?: AuthData) => void;
+ closeOverlay: () => void;
+ sendCustomSignal: (recvID: string, customType: CustomType) => Promise{secondsToMS(count)}
+
+ {!isWaiting && (
+
+ 
+ {t("placeholder.microphone")}
+
+ )}
+
+ 
+ {t("placeholder.camera")}
+
+ )}
+
+ );
+};
diff --git a/pc-client/src/pages/common/RtcCallModal/RtcLayout.tsx b/pc-client/src/pages/common/RtcCallModal/RtcLayout.tsx
new file mode 100644
index 0000000..28bef0f
--- /dev/null
+++ b/pc-client/src/pages/common/RtcCallModal/RtcLayout.tsx
@@ -0,0 +1,150 @@
+import {
+ RoomAudioRenderer,
+ TrackLoop,
+ TrackRefContext,
+ useConnectionState,
+ useTracks,
+ VideoTrack,
+} from "@livekit/components-react";
+import { PublicUserItem } from "@openim/wasm-client-sdk/lib/types/entity";
+import { Spin } from "antd";
+import clsx from "clsx";
+import {
+ ConnectionState,
+ LocalParticipant,
+ Participant,
+ ParticipantEvent,
+ Track,
+} from "livekit-client";
+import { useEffect, useState } from "react";
+
+import OIMAvatar from "@/components/OIMAvatar";
+import { CustomType } from "@/constants";
+
+import { AuthData, InviteData } from "./data";
+import { RtcControl } from "./RtcControl";
+
+const localVideoClasses =
+ "absolute right-3 top-3 !w-[100px] !h-[150px] rounded-md z-10";
+const remoteVideoClasses = "absolute top-0 z-0";
+
+interface IRtcLayoutProps {
+ connect: boolean;
+ isConnected: boolean;
+ isRecv: boolean;
+ inviteData?: InviteData;
+ closeOverlay: () => void;
+ sendCustomSignal: (recvID: string, customType: CustomType) => Promise
+ 
+
+ {isWaiting ? t("cancel") : t("hangUp")}
+
+
+ {isRecv && isWaiting && (
+
+ 
+
+ {t("answer")}
+
+
+ )}
+ {!isWaiting && isVideoCall && (
+
+
+
+ {(track) =>
+ track && (
+
+
+ )}
+
+
+ {renderContent()}
+
+ {isConnected && (
+
+
+ );
+};
+
+const isLocal = (p: Participant) => {
+ return p instanceof LocalParticipant;
+};
diff --git a/pc-client/src/pages/common/RtcCallModal/data.ts b/pc-client/src/pages/common/RtcCallModal/data.ts
new file mode 100644
index 0000000..8197943
--- /dev/null
+++ b/pc-client/src/pages/common/RtcCallModal/data.ts
@@ -0,0 +1,30 @@
+import {
+ GroupItem,
+ GroupMemberItem,
+ PublicUserItem,
+ RtcInvite,
+} from "@openim/wasm-client-sdk/lib/types/entity";
+
+export interface InviteData {
+ invitation?: RtcInvite;
+ participant?: ParticipantInfo;
+ isJoin?: boolean;
+}
+
+export interface ParticipantInfo {
+ userInfo: PublicUserItem;
+ groupMemberInfo?: GroupMemberItem;
+ groupInfo?: GroupItem;
+}
+
+export interface RtcInviteResults {
+ liveURL: string;
+ roomID: string;
+ token: string;
+ busyLineUserIDList?: string[];
+}
+
+export interface AuthData {
+ serverUrl: string;
+ token: string;
+}
diff --git a/pc-client/src/pages/common/RtcCallModal/index.tsx b/pc-client/src/pages/common/RtcCallModal/index.tsx
new file mode 100644
index 0000000..3de5e3b
--- /dev/null
+++ b/pc-client/src/pages/common/RtcCallModal/index.tsx
@@ -0,0 +1,169 @@
+import "@livekit/components-styles";
+
+import { LiveKitRoom } from "@livekit/components-react";
+import { t } from "i18next";
+import {
+ forwardRef,
+ ForwardRefRenderFunction,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from "react";
+
+import DraggableModalWrap from "@/components/DraggableModalWrap";
+import { CustomType } from "@/constants";
+import { OverlayVisibleHandle, useOverlayVisible } from "@/hooks/useOverlayVisible";
+import { IMSDK } from "@/layout/MainContentWrap";
+import { useUserStore } from "@/store";
+import { feedbackToast } from "@/utils/common";
+
+import { AuthData, InviteData } from "./data";
+import { RtcLayout } from "./RtcLayout";
+
+interface IRtcCallModalProps {
+ inviteData: InviteData;
+}
+
+const RtcCallModal: ForwardRefRenderFunction<
+ OverlayVisibleHandle,
+ IRtcCallModalProps
+> = ({ inviteData }, ref) => {
+ const { invitation } = inviteData;
+ const [connect, setConnect] = useState(false);
+ const [isConnected, setIsConnected] = useState(false);
+ const [authData, setAuthData] = useState
+ {userInfo?.nickname}
+
+
+ {isOverlayOpen && (
+ setIsConnected(true)}
+ onDisconnected={() => {
+ closeOverlayAndClearTimer();
+ setIsConnected(false);
+ setConnect(false);
+ }}
+ >
+
+ )}
+
+
+
+
+ {t("placeholder.editInfo")}
+
+ {isOverlayOpen && (
+
+ )}
+
+
+ );
+};
+
+export default SendRequest;
diff --git a/pc-client/src/pages/common/UserCardModal/index.tsx b/pc-client/src/pages/common/UserCardModal/index.tsx
new file mode 100644
index 0000000..b2b96ee
--- /dev/null
+++ b/pc-client/src/pages/common/UserCardModal/index.tsx
@@ -0,0 +1,369 @@
+import { CbEvents } from "@openim/wasm-client-sdk";
+import { SessionType } from "@openim/wasm-client-sdk";
+import {
+ FriendUserItem,
+ GroupMemberItem,
+ WSEvent,
+} from "@openim/wasm-client-sdk/lib/types/entity";
+import { useLatest } from "ahooks";
+import { Button, Divider, Spin } from "antd";
+import dayjs from "dayjs";
+import { t } from "i18next";
+import {
+ FC,
+ forwardRef,
+ ForwardRefRenderFunction,
+ memo,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from "react";
+import { useQuery } from "react-query";
+import { useCopyToClipboard } from "react-use";
+
+import { BusinessUserInfo, getBusinessUserInfo } from "@/api/login";
+import DraggableModalWrap from "@/components/DraggableModalWrap";
+import EditableContent from "@/components/EditableContent";
+import OIMAvatar from "@/components/OIMAvatar";
+import { useConversationToggle } from "@/hooks/useConversationToggle";
+import { OverlayVisibleHandle, useOverlayVisible } from "@/hooks/useOverlayVisible";
+import { IMSDK } from "@/layout/MainContentWrap";
+import { useContactStore, useUserStore } from "@/store";
+import { feedbackToast } from "@/utils/common";
+
+import EditSelfInfo from "./EditSelfInfo";
+import SendRequest from "./SendRequest";
+
+interface IUserCardModalProps {
+ userID?: string;
+ groupID?: string;
+ isSelf?: boolean;
+ notAdd?: boolean;
+ cardInfo?: CardInfo;
+}
+
+export type CardInfo = Partial
+
+
+
+ {t("placeholder.friendVerification")}
+
+
+
+
+
+
+
+ {cardInfo?.nickname}
+
+
+ {cardInfo?.userID}
+
+
+
+
+ {t("application.information")}
+
+
+ setReqMsg(e.target.value)}
+ className="bg-[var(--chat-bubble)] hover:bg-[var(--chat-bubble)]"
+ />
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {cardInfo?.nickname}
+
+
+
+ {
+ copyToClipboard(cardInfo?.userID ?? "");
+ feedbackToast({ msg: t("toast.copySuccess") });
+ }}
+ >
+ {cardInfo?.userID}
+
+
+
+
+ {showAddFriend && (
+
+ )}
+ {isSelf && (
+
+ )}
+ {!isSelf && (
+
+ )}
+
+
+
+ );
+};
diff --git a/pc-client/src/pages/contact/ContactSider.tsx b/pc-client/src/pages/contact/ContactSider.tsx
new file mode 100644
index 0000000..55b9461
--- /dev/null
+++ b/pc-client/src/pages/contact/ContactSider.tsx
@@ -0,0 +1,117 @@
+import { Badge } from "antd";
+import clsx from "clsx";
+import i18n, { t } from "i18next";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import group_notifications from "@/assets/images/contact/group_notifications.png";
+import my_friends from "@/assets/images/contact/my_friends.png";
+import my_groups from "@/assets/images/contact/my_groups.png";
+import new_friends from "@/assets/images/contact/new_friends.png";
+import FlexibleSider from "@/components/FlexibleSider";
+import { useContactStore } from "@/store";
+
+const Links = [
+ {
+ label: t("placeholder.newFriends"),
+ icon: new_friends,
+ path: "/contact/newFriends",
+ },
+ {
+ label: t("placeholder.groupNotification"),
+ icon: group_notifications,
+ path: "/contact/groupNotifications",
+ },
+ {
+ label: t("placeholder.myFriend"),
+ icon: my_friends,
+ path: "/contact",
+ },
+ {
+ label: t("placeholder.myGroup"),
+ icon: my_groups,
+ path: "/contact/myGroups",
+ },
+];
+
+i18n.on("languageChanged", () => {
+ Links[0].label = t("placeholder.newFriends");
+ Links[1].label = t("placeholder.groupNotification");
+ Links[2].label = t("placeholder.myFriend");
+ Links[3].label = t("placeholder.myGroup");
+});
+
+const ContactSider = () => {
+ const [selectIndex, setSelectIndex] = useState(2);
+ const unHandleFriendApplicationCount = useContactStore(
+ (state) => state.unHandleFriendApplicationCount,
+ );
+ const unHandleGroupApplicationCount = useContactStore(
+ (state) => state.unHandleGroupApplicationCount,
+ );
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (location.hash.includes("/contact/newFriends")) {
+ setSelectIndex(0);
+ }
+ if (location.hash.includes("/contact/groupNotifications")) {
+ setSelectIndex(1);
+ }
+ if (location.hash.includes("/contact/myGroups")) {
+ setSelectIndex(3);
+ }
+ }, []);
+
+ const getBadge = (index: number) => {
+ if (index === 0) {
+ return unHandleFriendApplicationCount;
+ }
+ if (index === 1) {
+ return unHandleGroupApplicationCount;
+ }
+ return 0;
+ };
+
+ return (
+ {title}
+ {fieldRows.map((fieldRow, idx) => (
+
+
+ ))}
+
+ {divider && {fieldRow.title}
+ {fieldRow.editable ? (
+ {fieldRow.value}
+ )}
+
+
+ {t("placeholder.contact")}
+
+
+ -
+ {Links.map((item, index) => {
+ return (
+
- {
+ setSelectIndex(index);
+ navigate(String(item.path));
+ }}
+ >
+
+ ++
{item.label}+
+ );
+ })}
+
+
+ );
+};
+
+const sortArray = (list: GroupApplicationItem[]) => {
+ list.sort((a, b) => {
+ if (a.handleResult === 0 && b.handleResult !== 0) {
+ return -1;
+ } else if (b.handleResult === 0 && a.handleResult !== 0) {
+ return 1;
+ }
+ return b.reqTime - a.reqTime;
+ });
+ return list;
+};
diff --git a/pc-client/src/pages/contact/index.tsx b/pc-client/src/pages/contact/index.tsx
new file mode 100644
index 0000000..3630279
--- /dev/null
+++ b/pc-client/src/pages/contact/index.tsx
@@ -0,0 +1,13 @@
+import { Layout } from "antd";
+import { Outlet } from "react-router-dom";
+
+import ContactSider from "@/pages/contact/ContactSider";
+
+export const Contact = () => {
+ return (
+ + {t("placeholder.groupNotification")} +
+
+ (
+
+
+ {indexList.map((letter, idx) => (
+ jumpToLetter(idx, letter)}
+ >
+ {letter}
+
+ ))}
+
+ );
+};
+
+export default memo(forwardRef(AlphabetIndex));
diff --git a/pc-client/src/pages/contact/myFriends/FriendListItem.tsx b/pc-client/src/pages/contact/myFriends/FriendListItem.tsx
new file mode 100644
index 0000000..b43597e
--- /dev/null
+++ b/pc-client/src/pages/contact/myFriends/FriendListItem.tsx
@@ -0,0 +1,23 @@
+import { FriendUserItem } from "@openim/wasm-client-sdk/lib/types/entity";
+
+import OIMAvatar from "@/components/OIMAvatar";
+
+const FriendListItem = ({
+ friend,
+ showUserCard,
+}: {
+ friend: FriendUserItem;
+ showUserCard: (userID: string) => void;
+}) => {
+ return (
+ showUserCard(friend.userID)}
+ >
+
+ );
+};
+
+export default FriendListItem;
diff --git a/pc-client/src/pages/contact/myFriends/index.tsx b/pc-client/src/pages/contact/myFriends/index.tsx
new file mode 100644
index 0000000..fe9a9e4
--- /dev/null
+++ b/pc-client/src/pages/contact/myFriends/index.tsx
@@ -0,0 +1,115 @@
+import { useRequest } from "ahooks";
+import { Empty, Spin } from "antd";
+import { useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { GroupedVirtuoso, GroupedVirtuosoHandle } from "react-virtuoso";
+
+import { useContactStore } from "@/store";
+import { formatContactsByWorker } from "@/utils/contactsFormat";
+import { emit } from "@/utils/events";
+
+import AlphabetIndex from "./AlphabetIndex";
+import FriendListItem from "./FriendListItem";
+
+export const MyFriends = () => {
+ const { t } = useTranslation();
+ const friendList = useContactStore((state) => state.friendList);
+ const virtuoso = useRef{friend.remark || friend.nickname}
+
+
+ );
+};
diff --git a/pc-client/src/pages/contact/myGroups/GroupListItem.tsx b/pc-client/src/pages/contact/myGroups/GroupListItem.tsx
new file mode 100644
index 0000000..3881292
--- /dev/null
+++ b/pc-client/src/pages/contact/myGroups/GroupListItem.tsx
@@ -0,0 +1,26 @@
+import { GroupItem } from "@openim/wasm-client-sdk/lib/types/entity";
+
+import OIMAvatar from "@/components/OIMAvatar";
+
+const GroupListItem = ({
+ source,
+ showGroupCard,
+}: {
+ source: GroupItem;
+ showGroupCard: (group: GroupItem) => void;
+}) => {
+ return (
+ {t("placeholder.myFriend")}
+ {!sectionData ? (
+
+ (
+
+ )}
+
+
+ )}
+ itemContent={(index) => {
+ return (
+
+ {sectionData.indexList[index]}
+
+
+ showGroupCard(source)}
+ >
+
+ );
+};
+
+export default GroupListItem;
diff --git a/pc-client/src/pages/contact/myGroups/index.tsx b/pc-client/src/pages/contact/myGroups/index.tsx
new file mode 100644
index 0000000..40aa07c
--- /dev/null
+++ b/pc-client/src/pages/contact/myGroups/index.tsx
@@ -0,0 +1,77 @@
+import { GroupItem } from "@openim/wasm-client-sdk/lib/types/entity";
+import { Select } from "antd";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Virtuoso } from "react-virtuoso";
+
+import { useContactStore, useUserStore } from "@/store";
+import { emit } from "@/utils/events";
+
+import GroupListItem from "./GroupListItem";
+
+export enum GroupTypeEnum {
+ JoinedGroup,
+ CreatedGroup,
+}
+
+export const MyGroups = () => {
+ const { t } = useTranslation();
+ const [selectGroup, setSelectGroup] = useState(GroupTypeEnum.CreatedGroup);
+
+ const joinedGroupList = useContactStore((state) => state.groupList);
+ const { userID } = useUserStore((state) => state.selfInfo);
+
+ const handleChange = (value: string) => {
+ setSelectGroup(Number(value));
+ };
+
+ const filterGroup = joinedGroupList.filter((group) => {
+ if (selectGroup === GroupTypeEnum.JoinedGroup) {
+ return group.creatorUserID !== userID;
+ } else if (selectGroup === GroupTypeEnum.CreatedGroup) {
+ return group.creatorUserID === userID;
+ }
+ return false;
+ });
+
+ const showGroupCard = useCallback((group: GroupItem) => {
+ emit("OPEN_GROUP_CARD", group);
+ }, []);
+
+ return (
+
+
+ {source.groupName}
+{source.memberCount}
+
+
+ );
+};
diff --git a/pc-client/src/pages/contact/newFriends/index.tsx b/pc-client/src/pages/contact/newFriends/index.tsx
new file mode 100644
index 0000000..d8860cf
--- /dev/null
+++ b/pc-client/src/pages/contact/newFriends/index.tsx
@@ -0,0 +1,115 @@
+import { ApplicationHandleResult } from "@openim/wasm-client-sdk";
+import { FriendApplicationItem } from "@openim/wasm-client-sdk/lib/types/entity";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Virtuoso } from "react-virtuoso";
+
+import ApplicationItem, { AccessFunction } from "@/components/ApplicationItem";
+import { IMSDK } from "@/layout/MainContentWrap";
+import { useUserStore } from "@/store";
+import { useContactStore } from "@/store/contact";
+import { feedbackToast } from "@/utils/common";
+import { calcApplicationBadge } from "@/utils/imCommon";
+
+export const NewFriends = () => {
+ const { t } = useTranslation();
+ const currentUserID = useUserStore((state) => state.selfInfo.userID);
+
+ const recvFriendApplicationList = useContactStore(
+ (state) => state.recvFriendApplicationList,
+ );
+ const sendFriendApplicationList = useContactStore(
+ (state) => state.sendFriendApplicationList,
+ );
+ const updateRecvFriendApplication = useContactStore(
+ (state) => state.updateRecvFriendApplication,
+ );
+ const updateSendFriendApplication = useContactStore(
+ (state) => state.updateSendFriendApplication,
+ );
+
+ const friendApplicationList = sortArray(
+ recvFriendApplicationList.concat(sendFriendApplicationList),
+ );
+
+ const onAccept = useCallback(
+ async (application: FriendApplicationItem, isRecv: boolean) => {
+ try {
+ await IMSDK.acceptFriendApplication({
+ toUserID: application.fromUserID,
+ handleMsg: "",
+ });
+ const newApplication = {
+ ...application,
+ handleResult: ApplicationHandleResult.Agree,
+ };
+ if (isRecv) {
+ updateRecvFriendApplication(newApplication);
+ } else {
+ updateSendFriendApplication(newApplication);
+ }
+ } catch (error) {
+ feedbackToast({ error });
+ }
+ },
+ [],
+ );
+
+ const onReject = useCallback(
+ async (application: FriendApplicationItem, isRecv: boolean) => {
+ try {
+ await IMSDK.refuseFriendApplication({
+ toUserID: application.fromUserID,
+ handleMsg: "",
+ });
+ const newApplication = {
+ ...application,
+ handleResult: ApplicationHandleResult.Reject,
+ };
+ if (isRecv) {
+ updateRecvFriendApplication(newApplication);
+ } else {
+ updateSendFriendApplication(newApplication);
+ }
+ } catch (error) {
+ feedbackToast({ error });
+ }
+ },
+ [],
+ );
+
+ return (
+
+
+ {t("placeholder.myGroup")}
+ +
+ (
+
+
+
+ );
+};
+
+const sortArray = (list: FriendApplicationItem[]) => {
+ list.sort((a, b) => {
+ if (a.handleResult === 0 && b.handleResult !== 0) {
+ return -1;
+ } else if (b.handleResult === 0 && a.handleResult !== 0) {
+ return 1;
+ }
+ return b.createTime - a.createTime;
+ });
+ return list;
+};
diff --git a/pc-client/src/pages/login/LoginForm.tsx b/pc-client/src/pages/login/LoginForm.tsx
new file mode 100644
index 0000000..c47de6c
--- /dev/null
+++ b/pc-client/src/pages/login/LoginForm.tsx
@@ -0,0 +1,91 @@
+import { Button, Form, Input } from "antd";
+import axios from "axios";
+import { t } from "i18next";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { feedbackToast } from "@/utils/common";
+import { setIMProfile } from "@/utils/storage";
+
+interface LoginResult {
+ code: number;
+ msg: string;
+ data?: {
+ userID: string;
+ nickname: string;
+ imToken: string;
+ expireTimeSeconds?: number;
+ };
+}
+
+const LoginForm = () => {
+ const navigate = useNavigate();
+ const [loading, setLoading] = useState(false);
+
+ const onFinish = async (values: { staffNo: string; password: string }) => {
+ setLoading(true);
+ try {
+ const { data: res } = await axios.post{t("placeholder.newFriends")}
+
+ (
+
+
+
+
+
+ );
+};
+
+export default LoginForm;
diff --git a/pc-client/src/pages/login/index.module.scss b/pc-client/src/pages/login/index.module.scss
new file mode 100644
index 0000000..dce3103
--- /dev/null
+++ b/pc-client/src/pages/login/index.module.scss
@@ -0,0 +1,18 @@
+.login {
+ :global {
+ .ant-form-item-label {
+ padding: 0;
+ }
+ }
+}
+
+.login-method-tab {
+ :global {
+ .ant-tabs-nav {
+ margin: 24px 0 12px 0;
+ }
+ .ant-tabs-tab {
+ padding: 6px 0;
+ }
+ }
+}
diff --git a/pc-client/src/pages/login/index.tsx b/pc-client/src/pages/login/index.tsx
new file mode 100644
index 0000000..2c5b4c6
--- /dev/null
+++ b/pc-client/src/pages/login/index.tsx
@@ -0,0 +1,55 @@
+import { t } from "i18next";
+import { useCopyToClipboard } from "react-use";
+
+import login_bg from "@/assets/images/login/login_bg.png";
+import WindowControlBar from "@/components/WindowControlBar";
+import { APP_NAME, APP_VERSION, SDK_VERSION } from "@/config";
+import { feedbackToast } from "@/utils/common";
+
+import styles from "./index.module.scss";
+import LoginForm from "./LoginForm";
+
+export const Login = () => {
+ const [_, copyToClipboard] = useCopyToClipboard();
+
+ const handleCopy = () => {
+ copyToClipboard(`${`${APP_NAME} ${APP_VERSION}`}/${SDK_VERSION}`);
+ feedbackToast({ msg: t("toast.copySuccess") });
+ };
+
+ return (
+ {t("placeholder.welcome")}
+
+
+ );
+};
+
+const LeftBar = () => {
+ return (
+
+
+
+
+
+
+
+
+ {`${APP_NAME} ${APP_VERSION}`}
+ {SDK_VERSION}
+
+
+ );
+};
diff --git a/pc-client/src/processShim.ts b/pc-client/src/processShim.ts
new file mode 100644
index 0000000..243c7ee
--- /dev/null
+++ b/pc-client/src/processShim.ts
@@ -0,0 +1,9 @@
+// 部分依赖（如 react-draggable）在模块加载时会读取 process.env，
+// 而浏览器环境下 OpenIM SDK 注入的 process 对象可能没有 env，导致白屏。
+// 这里在最前面补齐，保证渲染进程（web 预览）也能正常运行。
+const w = window as unknown as { process?: { env?: Record
+ 
+
+ {t("placeholder.title")}
+ {t("placeholder.subTitle")}
+
+
+ {t("placeholder.recover")}
+
+ }
+ />
+
+ );
+};
+
+export default GlobalErrorElement;
diff --git a/pc-client/src/routes/index.tsx b/pc-client/src/routes/index.tsx
new file mode 100644
index 0000000..d6a402e
--- /dev/null
+++ b/pc-client/src/routes/index.tsx
@@ -0,0 +1,59 @@
+import { createHashRouter } from "react-router-dom";
+
+import { MainContentLayout } from "@/layout/MainContentLayout";
+import { MainContentWrap } from "@/layout/MainContentWrap";
+import { EmptyChat } from "@/pages/chat/EmptyChat";
+import { QueryChat } from "@/pages/chat/queryChat";
+
+import contactRoutes from "./ContactRoutes";
+import GlobalErrorElement from "./GlobalErrorElement";
+
+const router = createHashRouter([
+ {
+ path: "/",
+ element: