diff --git a/index.php b/index.php
index 5c71998..ea5faa5 100644
--- a/index.php
+++ b/index.php
@@ -224,6 +224,7 @@ function public_user($u)
         'username' => $u['username'],
         'role' => isset($u['role']) ? $u['role'] : 'user',
         'disabled' => !empty($u['disabled']),
+        'protected' => !empty($u['protected']),
         'mustChangePassword' => !empty($u['must_change_password']),
         'createdAt' => isset($u['created_at']) ? $u['created_at'] : '',
         'lastLoginAt' => isset($u['last_login_at']) ? $u['last_login_at'] : '',
@@ -246,33 +247,42 @@ function log_row_out($r)
 }
 
 function can_write_topo($row, $user)
+{
+    $p = topo_permission_for($row, $user);
+    return $p === 'owner' || $p === 'edit';
+}
+
+function can_read_topo($row, $user)
+{
+    return topo_permission_for($row, $user) !== 'none';
+}
+
+/* 共享管理(增删共享 / 开关共享模式)仅限创建者本人或管理员 */
+function can_manage_shares($row, $user)
 {
     if (!$row || !$user) {
         return false;
     }
-    if ($user['role'] === 'admin') {
+    if (isset($user['role']) && $user['role'] === 'admin') {
         return true;
     }
     return $row['owner_id'] === $user['id'];
 }
 
-function can_read_topo($row, $user)
+/**
+ * 受保护账号(默认管理员)不允许被任何用户改动
+ */
+function assert_not_protected($target, $action)
 {
-    if (!$row || !$user) {
-        return false;
+    if (!empty($target['protected'])) {
+        api_error('受保护的默认管理员账号不允许' . $action, 403);
     }
-    if ($user['role'] === 'admin') {
-        return true;
-    }
-    if ($row['owner_id'] === $user['id']) {
-        return true;
-    }
-    return $row['visibility'] === 'public';
 }
 
 function topo_summary($row, $user, $names)
 {
     $ownerId = $row['owner_id'];
+    $perm = topo_permission_for($row, $user);
     return array(
         'id' => $row['id'],
         'name' => $row['name'],
@@ -283,7 +293,11 @@ function topo_summary($row, $user, $names)
         'updatedAt' => isset($row['updated_at']) ? $row['updated_at'] : '',
         'nodeCount' => (int) $row['node_count'],
         'edgeCount' => (int) $row['edge_count'],
-        'canEdit' => can_write_topo($row, $user),
+        'canEdit' => ($perm === 'owner' || $perm === 'edit'),
+        'permission' => $perm,
+        'shareMode' => !empty($row['share_mode']),
+        'sharedWithMe' => ($ownerId !== $user['id'] && !empty($row['share_mode']) && ($perm === 'edit' || $perm === 'view')),
+        'rev' => isset($row['rev']) ? (int) $row['rev'] : 0,
     );
 }
 
@@ -488,6 +502,9 @@ function api_user_update($admin, $id, $in)
     if (!$u) {
         api_error('用户不存在', 404);
     }
+    if (!empty($u['protected']) && (isset($in['role']) || isset($in['disabled']))) {
+        api_error('受保护的默认管理员账号不允许修改角色或状态', 403);
+    }
 
     $fields = array();
     $changes = array();
@@ -531,6 +548,7 @@ function api_user_reset_password($admin, $id, $in)
     if (!$u) {
         api_error('用户不存在', 404);
     }
+    assert_not_protected($u, '重置密码');
     $adminPw = isset($in['adminPassword']) ? (string) $in['adminPassword'] : '';
     $newPw = isset($in['newPassword']) ? (string) $in['newPassword'] : '';
     if (!password_verify($adminPw, $admin['password_hash'])) {
@@ -557,6 +575,7 @@ function api_user_delete($admin, $id)
     if (!$u) {
         api_error('用户不存在', 404);
     }
+    assert_not_protected($u, '删除');
     if ($u['id'] === $admin['id']) {
         api_error('不能删除当前登录账号');
     }
@@ -648,6 +667,29 @@ function api_topo_save($user, $id, $in)
     if (!can_write_topo($row, $user)) {
         api_error('无权修改该拓扑', 403);
     }
+
+    // 协同版本冲突检测:客户端携带的 baseRev 与服务端不一致时,返回最新数据供三方合并
+    if (isset($in['baseRev'])) {
+        $curRev = isset($row['rev']) ? (int) $row['rev'] : 0;
+        if ((int) $in['baseRev'] !== $curRev) {
+            $content = json_decode($row['data'], true);
+            if (!is_array($content)) {
+                $content = array();
+            }
+            json_out(array(
+                'ok' => false,
+                'error' => '版本冲突:该拓扑已被其他协作者更新',
+                'conflict' => true,
+                'rev' => $curRev,
+                'topology' => topo_summary($row, $user, user_name_map()),
+                'data' => array(
+                    'nodes' => (isset($content['nodes']) && is_array($content['nodes'])) ? $content['nodes'] : array(),
+                    'edges' => (isset($content['edges']) && is_array($content['edges'])) ? $content['edges'] : array(),
+                ),
+            ), 409);
+        }
+    }
+
     $nodes = (isset($in['nodes']) && is_array($in['nodes'])) ? $in['nodes'] : array();
     $edges = (isset($in['edges']) && is_array($in['edges'])) ? $in['edges'] : array();
 
@@ -883,6 +925,434 @@ function api_logs()
     api_ok(array('logs' => $list, 'total' => $total, 'page' => $page, 'pageSize' => $pageSize));
 }
 
+/* ============================================================
+ * 用户分组接口(管理员)
+ * ============================================================ */
+function group_out($g, $count)
+{
+    return array(
+        'id' => $g['id'],
+        'name' => $g['name'],
+        'description' => isset($g['description']) ? $g['description'] : '',
+        'memberCount' => (int) $count,
+        'createdAt' => isset($g['created_at']) ? $g['created_at'] : '',
+        'updatedAt' => isset($g['updated_at']) ? $g['updated_at'] : '',
+    );
+}
+
+function api_groups_list()
+{
+    $counts = group_member_counts();
+    $list = array();
+    foreach (group_list() as $g) {
+        $list[] = group_out($g, isset($counts[$g['id']]) ? $counts[$g['id']] : 0);
+    }
+    api_ok(array('groups' => $list));
+}
+
+function api_group_create($admin, $in)
+{
+    $name = isset($in['name']) ? trim((string) $in['name']) : '';
+    $desc = isset($in['description']) ? trim((string) $in['description']) : '';
+    if ($name === '') {
+        api_error('请输入分组名称');
+    }
+    if (str_len($name) > 40) {
+        $name = str_cut($name, 40);
+    }
+    if (str_len($desc) > 120) {
+        $desc = str_cut($desc, 120);
+    }
+    if (group_find_by_name($name)) {
+        api_error('分组名称已存在', 409);
+    }
+    $id = gen_id('g');
+    group_insert(array('id' => $id, 'name' => $name, 'description' => $desc));
+    log_add($admin['id'], $admin['username'], 'group_create', $id, '创建分组 ' . $name, client_ip());
+    api_ok(array('group' => group_out(group_find($id), 0)));
+}
+
+function api_group_update($admin, $id, $in)
+{
+    $g = group_find($id);
+    if (!$g) {
+        api_error('分组不存在', 404);
+    }
+    $fields = array();
+    if (isset($in['name'])) {
+        $name = trim((string) $in['name']);
+        if ($name === '') {
+            api_error('分组名称不能为空');
+        }
+        if (str_len($name) > 40) {
+            $name = str_cut($name, 40);
+        }
+        $dup = group_find_by_name($name);
+        if ($dup && $dup['id'] !== $id) {
+            api_error('分组名称已存在', 409);
+        }
+        $fields['name'] = $name;
+    }
+    if (isset($in['description'])) {
+        $desc = trim((string) $in['description']);
+        if (str_len($desc) > 120) {
+            $desc = str_cut($desc, 120);
+        }
+        $fields['description'] = $desc;
+    }
+    if ($fields) {
+        group_update($id, $fields);
+        log_add($admin['id'], $admin['username'], 'group_update', $id, '更新分组 ' . $g['name'], client_ip());
+    }
+    $counts = group_member_counts();
+    api_ok(array('group' => group_out(group_find($id), isset($counts[$id]) ? $counts[$id] : 0)));
+}
+
+function api_group_delete($admin, $id)
+{
+    $g = group_find($id);
+    if (!$g) {
+        api_error('分组不存在', 404);
+    }
+    group_delete($id);
+    log_add($admin['id'], $admin['username'], 'group_delete', $id, '删除分组 ' . $g['name'], client_ip());
+    api_ok();
+}
+
+function api_group_members($id)
+{
+    if (!group_find($id)) {
+        api_error('分组不存在', 404);
+    }
+    api_ok(array('members' => group_members($id)));
+}
+
+function api_group_members_set($admin, $id, $in)
+{
+    $g = group_find($id);
+    if (!$g) {
+        api_error('分组不存在', 404);
+    }
+    $ids = (isset($in['userIds']) && is_array($in['userIds'])) ? $in['userIds'] : array();
+    $valid = array();
+    foreach ($ids as $uid) {
+        $uid = (string) $uid;
+        if ($uid !== '' && user_find_by_id($uid) && !in_array($uid, $valid, true)) {
+            $valid[] = $uid;
+        }
+    }
+    group_set_members($id, $valid);
+    log_add($admin['id'], $admin['username'], 'group_members', $id, '更新分组成员 ' . $g['name'] . ':共 ' . count($valid) . ' 人', client_ip());
+    api_ok(array('members' => group_members($id)));
+}
+
+function group_name_map()
+{
+    $map = array();
+    foreach (group_list() as $g) {
+        $map[$g['id']] = $g['name'];
+    }
+    return $map;
+}
+
+/* ============================================================
+ * 拓扑共享接口
+ * ============================================================ */
+function share_out($s, $userNames, $groupNames)
+{
+    if ($s['target_type'] === 'user') {
+        $name = isset($userNames[$s['target_id']]) ? $userNames[$s['target_id']] : '未知用户';
+    } else {
+        $name = isset($groupNames[$s['target_id']]) ? $groupNames[$s['target_id']] : '未知分组';
+    }
+    return array(
+        'id' => $s['id'],
+        'targetType' => $s['target_type'],
+        'targetId' => $s['target_id'],
+        'targetName' => $name,
+        'permission' => ($s['permission'] === 'edit') ? 'edit' : 'view',
+    );
+}
+
+function api_topo_shares_get($user, $id)
+{
+    if (!valid_id($id)) {
+        api_error('非法的拓扑 ID');
+    }
+    $row = topo_find($id);
+    if (!$row) {
+        api_error('拓扑不存在', 404);
+    }
+    if (!can_manage_shares($row, $user)) {
+        api_error('仅创建者可管理该拓扑的共享', 403);
+    }
+    $userNames = user_name_map();
+    $groupNames = group_name_map();
+    $shares = array();
+    foreach (share_list_by_topo($id) as $s) {
+        $shares[] = share_out($s, $userNames, $groupNames);
+    }
+    api_ok(array(
+        'shareMode' => !empty($row['share_mode']),
+        'shares' => $shares,
+    ));
+}
+
+function api_topo_shares_set($user, $id, $in)
+{
+    if (!valid_id($id)) {
+        api_error('非法的拓扑 ID');
+    }
+    $row = topo_find($id);
+    if (!$row) {
+        api_error('拓扑不存在', 404);
+    }
+    if (!can_manage_shares($row, $user)) {
+        api_error('仅创建者可管理该拓扑的共享', 403);
+    }
+    $shareMode = !empty($in['shareMode']);
+    $rows = array();
+    $seen = array();
+    if ($shareMode && isset($in['shares']) && is_array($in['shares'])) {
+        foreach ($in['shares'] as $s) {
+            if (!is_array($s)) {
+                continue;
+            }
+            $tt = (isset($s['targetType']) && $s['targetType'] === 'group') ? 'group' : 'user';
+            $tid = isset($s['targetId']) ? (string) $s['targetId'] : '';
+            if ($tid === '') {
+                continue;
+            }
+            if ($tt === 'user') {
+                if ($tid === $row['owner_id'] || !user_find_by_id($tid)) {
+                    continue;
+                }
+            } else {
+                if (!group_find($tid)) {
+                    continue;
+                }
+            }
+            $key = $tt . ':' . $tid;
+            if (isset($seen[$key])) {
+                continue;
+            }
+            $seen[$key] = true;
+            $rows[] = array(
+                'target_type' => $tt,
+                'target_id' => $tid,
+                'permission' => (isset($s['permission']) && $s['permission'] === 'edit') ? 'edit' : 'view',
+            );
+        }
+    }
+    share_replace($id, $rows, $user['id']);
+    topo_set_share_mode($id, $shareMode, now_iso());
+    log_add(
+        $user['id'],
+        $user['username'],
+        'topo_share',
+        $id,
+        ($shareMode ? '开启共享' : '关闭共享') . '(共 ' . count($rows) . ' 项):' . $row['name'],
+        client_ip()
+    );
+    api_topo_shares_get($user, $id);
+}
+
+/* ============================================================
+ * 通讯录 / 概览
+ * ============================================================ */
+function api_directory()
+{
+    $users = array();
+    foreach (db_all('SELECT id, username FROM users WHERE disabled = 0 ORDER BY username ASC') as $u) {
+        $users[] = array('id' => $u['id'], 'username' => $u['username']);
+    }
+    $groups = array();
+    foreach (group_list() as $g) {
+        $groups[] = array('id' => $g['id'], 'name' => $g['name']);
+    }
+    api_ok(array('users' => $users, 'groups' => $groups));
+}
+
+function api_overview($user)
+{
+    $own = 0;
+    $shared = 0;
+    foreach (topo_list_for_user($user) as $r) {
+        if ($r['owner_id'] === $user['id']) {
+            $own++;
+            continue;
+        }
+        $perm = topo_permission_for($r, $user);
+        if (!empty($r['share_mode']) && ($perm === 'edit' || $perm === 'view')) {
+            $shared++;
+        }
+    }
+    api_ok(array(
+        'overview' => array(
+            'myTopo' => $own,
+            'sharedToMe' => $shared,
+            'myGroups' => count(group_ids_of_user($user['id'])),
+            'publicTopo' => (int) db_val("SELECT COUNT(*) FROM topologies WHERE visibility = 'public'"),
+        )
+    ));
+}
+
+/* 当前用户所属分组(普通用户可用) */
+function api_my_groups($user)
+{
+    $out = array();
+    foreach (group_ids_of_user($user['id']) as $gid) {
+        $g = group_find($gid);
+        if (!$g) {
+            continue;
+        }
+        $out[] = array(
+            'id' => $g['id'],
+            'name' => $g['name'],
+            'description' => isset($g['description']) ? $g['description'] : '',
+            'memberCount' => count(group_member_ids($gid)),
+        );
+    }
+    api_ok(array('groups' => $out));
+}
+
+/* ============================================================
+ * 协同:在线状态 / 版本推送
+ * ============================================================ */
+function presence_online_out($plist, $selfId)
+{
+    $out = array();
+    foreach ($plist as $p) {
+        $out[] = array(
+            'id' => $p['user_id'],
+            'username' => $p['username'],
+            'self' => ($p['user_id'] === $selfId),
+        );
+    }
+    return $out;
+}
+
+function sse_event($event, $data)
+{
+    echo 'event: ' . $event . "\n";
+    echo 'data: ' . json_encode($data, JSON_UNESCAPED_UNICODE) . "\n\n";
+    if (ob_get_level() > 0) {
+        @ob_flush();
+    }
+    @flush();
+}
+
+/**
+ * SSE 推送:拓扑版本变化 + 在线成员。
+ * 有界存活(约 30s)后关闭,由前端 EventSource 自动重连。
+ * 注意:php -S 单进程下会占用一个 worker,建议设置 PHP_CLI_SERVER_WORKERS;
+ * Apache / PHP-FPM 无此限制。
+ */
+function api_topo_stream($user, $id, $since)
+{
+    if (!valid_id($id)) {
+        api_error('非法的拓扑 ID');
+    }
+    $row = topo_find($id);
+    if (!$row) {
+        api_error('拓扑不存在', 404);
+    }
+    if (!can_read_topo($row, $user)) {
+        api_error('无权访问该拓扑', 403);
+    }
+
+    @ini_set('zlib.output_compression', '0');
+    @ini_set('output_buffering', '0');
+    @set_time_limit(0);
+    while (ob_get_level() > 0) {
+        @ob_end_flush();
+    }
+
+    header('Content-Type: text/event-stream; charset=utf-8');
+    header('Cache-Control: no-cache, no-store');
+    header('X-Accel-Buffering: no');
+
+    $deadline = time() + 30;
+    $lastRev = null;
+    $lastPresence = null;
+
+    presence_touch($id, $user);
+    presence_purge(time() - 120);
+
+    while (time() < $deadline) {
+        if (connection_aborted()) {
+            return;
+        }
+        $cur = topo_find($id);
+        if (!$cur) {
+            sse_event('gone', array('reason' => 'deleted'));
+            return;
+        }
+        $rev = isset($cur['rev']) ? (int) $cur['rev'] : 0;
+        if ($rev !== $lastRev) {
+            $lastRev = $rev;
+            if ($rev !== $since) {
+                sse_event('revision', array('rev' => $rev));
+            }
+        }
+
+        presence_touch($id, $user);
+        $plist = presence_online_out(presence_list($id, 15), $user['id']);
+        $hash = md5(json_encode($plist));
+        if ($hash !== $lastPresence) {
+            $lastPresence = $hash;
+            sse_event('presence', array('users' => $plist));
+        }
+
+        sse_event('ping', array('t' => time()));
+        usleep(1500000);
+    }
+    sse_event('bye', array('t' => time()));
+}
+
+function api_topo_poll($user, $id, $since)
+{
+    if (!valid_id($id)) {
+        api_error('非法的拓扑 ID');
+    }
+    $row = topo_find($id);
+    if (!$row) {
+        api_error('拓扑不存在', 404);
+    }
+    if (!can_read_topo($row, $user)) {
+        api_error('无权访问该拓扑', 403);
+    }
+    presence_touch($id, $user);
+    presence_purge(time() - 120);
+    $rev = isset($row['rev']) ? (int) $row['rev'] : 0;
+    api_ok(array(
+        'rev' => $rev,
+        'changed' => ($since >= 0 && (int) $since !== $rev),
+        'presence' => presence_online_out(presence_list($id, 15), $user['id']),
+    ));
+}
+
+function api_topo_presence($user, $id, $in)
+{
+    if (!valid_id($id)) {
+        api_error('非法的拓扑 ID');
+    }
+    $row = topo_find($id);
+    if (!$row) {
+        api_error('拓扑不存在', 404);
+    }
+    if (!can_read_topo($row, $user)) {
+        api_error('无权访问该拓扑', 403);
+    }
+    if (!empty($in['leave'])) {
+        presence_remove($id, $user['id']);
+    } else {
+        presence_touch($id, $user);
+    }
+    presence_purge(time() - 120);
+    api_ok(array('presence' => presence_online_out(presence_list($id, 15), $user['id'])));
+}
+
 /* ============================================================
  * 路由
  * ============================================================ */
@@ -923,6 +1393,30 @@ function handle_api($method, $segments)
             api_ok(array('user' => $u ? public_user($u) : null));
             break;
 
+        case 'directory':
+            require_auth();
+            if ($method !== 'GET') {
+                api_error('方法不允许', 405);
+            }
+            api_directory();
+            break;
+
+        case 'overview':
+            $u = require_auth();
+            if ($method !== 'GET') {
+                api_error('方法不允许', 405);
+            }
+            api_overview($u);
+            break;
+
+        case 'mygroups':
+            $u = require_auth();
+            if ($method !== 'GET') {
+                api_error('方法不允许', 405);
+            }
+            api_my_groups($u);
+            break;
+
         case 'site':
             if ($method !== 'GET') {
                 api_error('方法不允许', 405);
@@ -975,6 +1469,33 @@ function handle_api($method, $segments)
             api_error('接口不存在', 404);
             break;
 
+        case 'groups':
+            $admin = require_admin();
+            if ($method === 'GET' && $id === '') {
+                api_groups_list();
+            }
+            if ($method === 'POST' && $id === '') {
+                api_group_create($admin, json_input());
+            }
+            if ($id !== '') {
+                if ($action === 'members') {
+                    if ($method === 'GET') {
+                        api_group_members($id);
+                    }
+                    if ($method === 'PUT') {
+                        api_group_members_set($admin, $id, json_input());
+                    }
+                }
+                if ($action === '' && $method === 'PUT') {
+                    api_group_update($admin, $id, json_input());
+                }
+                if ($action === '' && $method === 'DELETE') {
+                    api_group_delete($admin, $id);
+                }
+            }
+            api_error('接口不存在', 404);
+            break;
+
         case 'admin':
             $admin = require_admin();
             if ($id === 'topologies' && $action === '' && $method === 'GET') {
@@ -1009,6 +1530,22 @@ function handle_api($method, $segments)
                 if ($action === 'rename' && $method === 'PUT') {
                     api_topo_rename($user, $id, json_input());
                 }
+                if ($action === 'shares' && $method === 'GET') {
+                    api_topo_shares_get($user, $id);
+                }
+                if ($action === 'shares' && $method === 'PUT') {
+                    api_topo_shares_set($user, $id, json_input());
+                }
+                if ($action === 'stream' && $method === 'GET') {
+                    api_topo_stream($user, $id, isset($_GET['since']) ? (int) $_GET['since'] : -1);
+                    exit;
+                }
+                if ($action === 'poll' && $method === 'GET') {
+                    api_topo_poll($user, $id, isset($_GET['since']) ? (int) $_GET['since'] : -1);
+                }
+                if ($action === 'presence' && $method === 'POST') {
+                    api_topo_presence($user, $id, json_input());
+                }
                 if ($action === '') {
                     if ($method === 'GET') {
                         api_topo_get($user, $id);
diff --git a/lib/db.php b/lib/db.php
index 1ebc3fa..c1be6c6 100644
--- a/lib/db.php
+++ b/lib/db.php
@@ -129,6 +129,47 @@ function init_schema($pdo, $driver)
             PRIMARY KEY (skey)
         ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
 
+        $pdo->exec("CREATE TABLE IF NOT EXISTS user_groups (
+            id VARCHAR(32) NOT NULL,
+            name VARCHAR(64) NOT NULL,
+            description VARCHAR(255) DEFAULT NULL,
+            created_at VARCHAR(32) DEFAULT NULL,
+            updated_at VARCHAR(32) DEFAULT NULL,
+            PRIMARY KEY (id),
+            UNIQUE KEY uk_groups_name (name)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
+
+        $pdo->exec("CREATE TABLE IF NOT EXISTS user_group_members (
+            group_id VARCHAR(32) NOT NULL,
+            user_id VARCHAR(32) NOT NULL,
+            created_at VARCHAR(32) DEFAULT NULL,
+            PRIMARY KEY (group_id, user_id),
+            KEY idx_ugm_user (user_id)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
+
+        $pdo->exec("CREATE TABLE IF NOT EXISTS topo_shares (
+            id VARCHAR(32) NOT NULL,
+            topo_id VARCHAR(32) NOT NULL,
+            target_type VARCHAR(8) NOT NULL,
+            target_id VARCHAR(32) NOT NULL,
+            permission VARCHAR(8) NOT NULL,
+            created_by VARCHAR(32) DEFAULT NULL,
+            created_at VARCHAR(32) DEFAULT NULL,
+            PRIMARY KEY (id),
+            KEY idx_shares_topo (topo_id),
+            KEY idx_shares_target (target_type, target_id)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
+
+        $pdo->exec("CREATE TABLE IF NOT EXISTS topo_presence (
+            topo_id VARCHAR(32) NOT NULL,
+            user_id VARCHAR(32) NOT NULL,
+            username VARCHAR(32) DEFAULT NULL,
+            last_seen BIGINT NOT NULL DEFAULT 0,
+            PRIMARY KEY (topo_id, user_id),
+            KEY idx_presence_seen (last_seen)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
+
+        migrate_columns($pdo, $driver);
         return;
     }
 
@@ -183,7 +224,80 @@ function init_schema($pdo, $driver)
         updated_at TEXT
     )");
 
+    $pdo->exec("CREATE TABLE IF NOT EXISTS user_groups (
+        id TEXT NOT NULL PRIMARY KEY,
+        name TEXT NOT NULL UNIQUE,
+        description TEXT,
+        created_at TEXT,
+        updated_at TEXT
+    )");
+
+    $pdo->exec("CREATE TABLE IF NOT EXISTS user_group_members (
+        group_id TEXT NOT NULL,
+        user_id TEXT NOT NULL,
+        created_at TEXT,
+        PRIMARY KEY (group_id, user_id)
+    )");
+
+    $pdo->exec("CREATE TABLE IF NOT EXISTS topo_shares (
+        id TEXT NOT NULL PRIMARY KEY,
+        topo_id TEXT NOT NULL,
+        target_type TEXT NOT NULL,
+        target_id TEXT NOT NULL,
+        permission TEXT NOT NULL,
+        created_by TEXT,
+        created_at TEXT
+    )");
+
+    $pdo->exec("CREATE TABLE IF NOT EXISTS topo_presence (
+        topo_id TEXT NOT NULL,
+        user_id TEXT NOT NULL,
+        username TEXT,
+        last_seen INTEGER NOT NULL DEFAULT 0,
+        PRIMARY KEY (topo_id, user_id)
+    )");
+
     $pdo->exec("CREATE INDEX IF NOT EXISTS idx_sessions_user ON sessions(user_id)");
     $pdo->exec("CREATE INDEX IF NOT EXISTS idx_topo_owner ON topologies(owner_id)");
     $pdo->exec("CREATE INDEX IF NOT EXISTS idx_logs_created ON activity_logs(created_at)");
+    $pdo->exec("CREATE INDEX IF NOT EXISTS idx_ugm_user ON user_group_members(user_id)");
+    $pdo->exec("CREATE INDEX IF NOT EXISTS idx_shares_topo ON topo_shares(topo_id)");
+    $pdo->exec("CREATE INDEX IF NOT EXISTS idx_shares_target ON topo_shares(target_type, target_id)");
+    $pdo->exec("CREATE INDEX IF NOT EXISTS idx_presence_seen ON topo_presence(last_seen)");
+
+    migrate_columns($pdo, $driver);
+}
+
+/**
+ * 幂等加列:已存在的库平滑升级(表名/列名均为代码内常量,无注入风险)
+ */
+function ensure_column($pdo, $driver, $table, $col, $ddl)
+{
+    if ($driver === 'mysql') {
+        $cols = array();
+        foreach ($pdo->query('SHOW COLUMNS FROM ' . $table) as $r) {
+            $cols[] = isset($r['Field']) ? $r['Field'] : '';
+        }
+        if (!in_array($col, $cols, true)) {
+            $pdo->exec('ALTER TABLE ' . $table . ' ADD COLUMN ' . $ddl);
+        }
+        return;
+    }
+    $cols = array();
+    foreach ($pdo->query('PRAGMA table_info(' . $table . ')') as $r) {
+        $cols[] = $r['name'];
+    }
+    if (!in_array($col, $cols, true)) {
+        $pdo->exec('ALTER TABLE ' . $table . ' ADD COLUMN ' . $ddl);
+    }
+}
+
+/**
+ * 列迁移:为老库补齐新增字段
+ */
+function migrate_columns($pdo, $driver)
+{
+    ensure_column($pdo, $driver, 'users', 'protected', 'protected INTEGER NOT NULL DEFAULT 0');
+    ensure_column($pdo, $driver, 'topologies', 'rev', 'rev INTEGER NOT NULL DEFAULT 0');
+    ensure_column($pdo, $driver, 'topologies', 'share_mode', 'share_mode INTEGER NOT NULL DEFAULT 0');
 }
diff --git a/lib/repo.php b/lib/repo.php
index 7f16464..6232f41 100644
--- a/lib/repo.php
+++ b/lib/repo.php
@@ -99,8 +99,8 @@ function user_count($q)
 function user_insert($data)
 {
     db_run(
-        'INSERT INTO users (id, username, password_hash, role, disabled, must_change_password, created_at, last_login_at, login_count)
-         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
+        'INSERT INTO users (id, username, password_hash, role, disabled, must_change_password, protected, created_at, last_login_at, login_count)
+         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
         array(
             $data['id'],
             $data['username'],
@@ -108,6 +108,7 @@ function user_insert($data)
             isset($data['role']) ? $data['role'] : 'user',
             !empty($data['disabled']) ? 1 : 0,
             !empty($data['must_change_password']) ? 1 : 0,
+            !empty($data['protected']) ? 1 : 0,
             isset($data['created_at']) ? $data['created_at'] : now_iso(),
             isset($data['last_login_at']) ? $data['last_login_at'] : null,
             isset($data['login_count']) ? (int) $data['login_count'] : 0,
@@ -146,6 +147,120 @@ function user_touch_login($id)
     db_run('UPDATE users SET last_login_at = ?, login_count = login_count + 1 WHERE id = ?', array(now_iso(), $id));
 }
 
+/* ============================================================
+ * 用户分组
+ * ============================================================ */
+function group_list()
+{
+    return db_all('SELECT * FROM user_groups ORDER BY created_at ASC, name ASC');
+}
+
+function group_find($id)
+{
+    return db_one('SELECT * FROM user_groups WHERE id = ?', array($id));
+}
+
+function group_find_by_name($name)
+{
+    return db_one('SELECT * FROM user_groups WHERE name = ?', array($name));
+}
+
+function group_insert($data)
+{
+    db_run(
+        'INSERT INTO user_groups (id, name, description, created_at, updated_at) VALUES (?, ?, ?, ?, ?)',
+        array(
+            $data['id'],
+            $data['name'],
+            isset($data['description']) ? $data['description'] : '',
+            isset($data['created_at']) ? $data['created_at'] : now_iso(),
+            isset($data['updated_at']) ? $data['updated_at'] : now_iso(),
+        )
+    );
+    return $data['id'];
+}
+
+function group_update($id, $fields)
+{
+    $allowed = array('name', 'description');
+    $sets = array();
+    $params = array();
+    foreach ($allowed as $f) {
+        if (array_key_exists($f, $fields)) {
+            $sets[] = $f . ' = ?';
+            $params[] = $fields[$f];
+        }
+    }
+    if (!$sets) {
+        return false;
+    }
+    $sets[] = 'updated_at = ?';
+    $params[] = now_iso();
+    $params[] = $id;
+    db_run('UPDATE user_groups SET ' . implode(', ', $sets) . ' WHERE id = ?', $params);
+    return true;
+}
+
+function group_delete($id)
+{
+    db_run('DELETE FROM user_groups WHERE id = ?', array($id));
+    db_run('DELETE FROM user_group_members WHERE group_id = ?', array($id));
+    db_run("DELETE FROM topo_shares WHERE target_type = 'group' AND target_id = ?", array($id));
+}
+
+function group_members($gid)
+{
+    return db_all(
+        'SELECT u.id, u.username FROM user_group_members m JOIN users u ON u.id = m.user_id
+         WHERE m.group_id = ? ORDER BY u.username ASC',
+        array($gid)
+    );
+}
+
+function group_member_ids($gid)
+{
+    $out = array();
+    foreach (db_all('SELECT user_id FROM user_group_members WHERE group_id = ?', array($gid)) as $r) {
+        $out[] = $r['user_id'];
+    }
+    return $out;
+}
+
+function group_set_members($gid, $userIds)
+{
+    db_run('DELETE FROM user_group_members WHERE group_id = ?', array($gid));
+    $seen = array();
+    foreach ((array) $userIds as $uid) {
+        $uid = (string) $uid;
+        if ($uid === '' || isset($seen[$uid])) {
+            continue;
+        }
+        $seen[$uid] = true;
+        db_run(
+            'INSERT INTO user_group_members (group_id, user_id, created_at) VALUES (?, ?, ?)',
+            array($gid, $uid, now_iso())
+        );
+    }
+}
+
+function group_ids_of_user($uid)
+{
+    $out = array();
+    foreach (db_all('SELECT group_id FROM user_group_members WHERE user_id = ?', array($uid)) as $r) {
+        $out[] = $r['group_id'];
+    }
+    return $out;
+}
+
+function group_member_counts()
+{
+    $map = array();
+    foreach (db_all('SELECT group_id, COUNT(*) AS c FROM user_group_members GROUP BY group_id') as $r) {
+        $map[$r['group_id']] = (int) $r['c'];
+    }
+    return $map;
+}
+
 /* ============================================================
  * 会话
  * ============================================================ */
@@ -187,11 +302,21 @@ function topo_find($id)
 
 function topo_list_for_user($user)
 {
-    /* 主应用「我的拓扑」仅返回:当前用户创建的 + 公开的。
+    /* 主应用 / 用户后台返回:本人创建的 + 公开的 + 通过成员/分组共享且已开启共享模式的。
        全部拓扑(含他人私有)只能在管理后台查看,见 topo_admin_search()。 */
     return db_all(
-        'SELECT * FROM topologies WHERE owner_id = ? OR visibility = ? ORDER BY updated_at DESC',
-        array($user['id'], 'public')
+        "SELECT DISTINCT t.* FROM topologies t
+         LEFT JOIN topo_shares s ON s.topo_id = t.id
+         WHERE t.owner_id = ?
+            OR t.visibility = 'public'
+            OR (t.share_mode = 1 AND (
+                 (s.target_type = 'user' AND s.target_id = ?)
+                 OR (s.target_type = 'group' AND s.target_id IN (
+                       SELECT group_id FROM user_group_members WHERE user_id = ?
+                 ))
+            ))
+         ORDER BY t.updated_at DESC",
+        array($user['id'], $user['id'], $user['id'])
     );
 }
 
@@ -276,12 +401,12 @@ function topo_update($id, $data, $nodeCount, $edgeCount, $updatedAt, $name = nul
 {
     if ($name !== null && $name !== '') {
         db_run(
-            'UPDATE topologies SET data = ?, node_count = ?, edge_count = ?, updated_at = ?, name = ? WHERE id = ?',
+            'UPDATE topologies SET data = ?, node_count = ?, edge_count = ?, updated_at = ?, rev = rev + 1, name = ? WHERE id = ?',
             array($data, (int) $nodeCount, (int) $edgeCount, $updatedAt, $name, $id)
         );
     } else {
         db_run(
-            'UPDATE topologies SET data = ?, node_count = ?, edge_count = ?, updated_at = ? WHERE id = ?',
+            'UPDATE topologies SET data = ?, node_count = ?, edge_count = ?, updated_at = ?, rev = rev + 1 WHERE id = ?',
             array($data, (int) $nodeCount, (int) $edgeCount, $updatedAt, $id)
         );
     }
@@ -294,12 +419,146 @@ function topo_delete($id)
 
 function topo_set_visibility($id, $vis, $updatedAt)
 {
-    db_run('UPDATE topologies SET visibility = ?, updated_at = ? WHERE id = ?', array($vis, $updatedAt, $id));
+    db_run('UPDATE topologies SET visibility = ?, updated_at = ?, rev = rev + 1 WHERE id = ?', array($vis, $updatedAt, $id));
 }
 
 function topo_set_name($id, $name, $updatedAt)
 {
-    db_run('UPDATE topologies SET name = ?, updated_at = ? WHERE id = ?', array($name, $updatedAt, $id));
+    db_run('UPDATE topologies SET name = ?, updated_at = ?, rev = rev + 1 WHERE id = ?', array($name, $updatedAt, $id));
+}
+
+function topo_set_share_mode($id, $on, $updatedAt)
+{
+    db_run('UPDATE topologies SET share_mode = ?, updated_at = ?, rev = rev + 1 WHERE id = ?', array($on ? 1 : 0, $updatedAt, $id));
+}
+
+/* ============================================================
+ * 拓扑共享
+ * ============================================================ */
+function share_list_by_topo($topoId)
+{
+    return db_all('SELECT * FROM topo_shares WHERE topo_id = ? ORDER BY created_at ASC', array($topoId));
+}
+
+/**
+ * 整体替换某拓扑的共享列表(事务)
+ */
+function share_replace($topoId, $rows, $by)
+{
+    $pdo = db();
+    $pdo->beginTransaction();
+    try {
+        db_run('DELETE FROM topo_shares WHERE topo_id = ?', array($topoId));
+        foreach ((array) $rows as $r) {
+            db_run(
+                'INSERT INTO topo_shares (id, topo_id, target_type, target_id, permission, created_by, created_at)
+                 VALUES (?, ?, ?, ?, ?, ?, ?)',
+                array(
+                    gen_id('s'),
+                    $topoId,
+                    $r['target_type'],
+                    $r['target_id'],
+                    $r['permission'],
+                    $by,
+                    now_iso(),
+                )
+            );
+        }
+        $pdo->commit();
+    } catch (Exception $e) {
+        if ($pdo->inTransaction()) {
+            $pdo->rollBack();
+        }
+        throw $e;
+    }
+}
+
+/**
+ * 计算用户对拓扑的有效权限:owner | edit | view | none
+ */
+function topo_permission_for($row, $user)
+{
+    if (!$row || !$user) {
+        return 'none';
+    }
+    if (isset($user['role']) && $user['role'] === 'admin') {
+        return 'owner';
+    }
+    if ($row['owner_id'] === $user['id']) {
+        return 'owner';
+    }
+    $best = 'none';
+    if (!empty($row['share_mode'])) {
+        $gids = group_ids_of_user($user['id']);
+        foreach (share_list_by_topo($row['id']) as $s) {
+            $hit = false;
+            if ($s['target_type'] === 'user' && $s['target_id'] === $user['id']) {
+                $hit = true;
+            } elseif ($s['target_type'] === 'group' && in_array($s['target_id'], $gids, true)) {
+                $hit = true;
+            }
+            if (!$hit) {
+                continue;
+            }
+            if ($s['permission'] === 'edit') {
+                return 'edit';
+            }
+            if ($s['permission'] === 'view') {
+                $best = 'view';
+            }
+        }
+    }
+    if ($best === 'view') {
+        return 'view';
+    }
+    if ($row['visibility'] === 'public') {
+        return 'view';
+    }
+    return 'none';
+}
+
+/* ============================================================
+ * 在线状态(协同)
+ * ============================================================ */
+function presence_touch($topoId, $user)
+{
+    $now = time();
+    $exists = db_one('SELECT topo_id FROM topo_presence WHERE topo_id = ? AND user_id = ?', array($topoId, $user['id']));
+    if ($exists) {
+        db_run(
+            'UPDATE topo_presence SET username = ?, last_seen = ? WHERE topo_id = ? AND user_id = ?',
+            array($user['username'], $now, $topoId, $user['id'])
+        );
+    } else {
+        db_run(
+            'INSERT INTO topo_presence (topo_id, user_id, username, last_seen) VALUES (?, ?, ?, ?)',
+            array($topoId, $user['id'], $user['username'], $now)
+        );
+    }
+}
+
+function presence_list($topoId, $activeWithin)
+{
+    $cut = time() - (int) $activeWithin;
+    return db_all(
+        'SELECT user_id, username, last_seen FROM topo_presence WHERE topo_id = ? AND last_seen >= ? ORDER BY last_seen DESC',
+        array($topoId, $cut)
+    );
+}
+
+function presence_remove($topoId, $userId)
+{
+    db_run('DELETE FROM topo_presence WHERE topo_id = ? AND user_id = ?', array($topoId, $userId));
+}
+
+function presence_purge($beforeTs)
+{
+    db_run('DELETE FROM topo_presence WHERE last_seen < ?', array((int) $beforeTs));
+}
+
+function topo_rev($id)
+{
+    return (int) db_val('SELECT rev FROM topologies WHERE id = ?', array($id));
 }
 
 /* ============================================================
@@ -463,6 +722,7 @@ function ensure_seed()
     migrate_legacy_json();
 
     if ((int) db_val('SELECT COUNT(*) FROM users') > 0) {
+        protect_configured_admin();
         return;
     }
     $cfg = app_config();
@@ -475,5 +735,18 @@ function ensure_seed()
         'disabled' => 0,
         'must_change_password' => 1,
         'created_at' => now_iso(),
+        'protected' => 1,
     ));
 }
+
+/**
+ * 默认管理员(配置文件中的 default_admin)始终置为受保护账号,不可被其他用户改动
+ */
+function protect_configured_admin()
+{
+    $cfg = app_config();
+    $name = isset($cfg['default_admin']['username']) ? $cfg['default_admin']['username'] : 'admin';
+    if ($name !== '' && $name !== null) {
+        db_run('UPDATE users SET protected = 1 WHERE username = ?', array($name));
+    }
+}
diff --git a/web/admin.html b/web/admin.html
index 7e5bb4c..fbf3db9 100644
--- a/web/admin.html
+++ b/web/admin.html
@@ -49,22 +49,41 @@
 
     <!-- 用户管理 -->
     <section class="view" id="view-users" hidden>
-      <div class="view-head">
-        <h2>用户管理</h2>
-        <div class="view-tools">
+      <div class="view-head"><h2>用户管理</h2></div>
+      <div class="tabs" id="userTabs">
+        <div class="tab active" data-tab="list">用户列表</div>
+        <div class="tab" data-tab="groups">分组管理</div>
+      </div>
+
+      <div class="tab-pane" id="userTab-list">
+        <div class="tools-inline">
           <input class="search" id="userSearch" placeholder="搜索用户名 / 角色" spellcheck="false">
           <button class="btn primary" id="btnNewUser">＋ 新建用户</button>
         </div>
+        <div class="table-wrap">
+          <table class="grid">
+            <thead><tr>
+              <th>用户名</th><th>角色</th><th>状态</th><th>登录次数</th><th>最近登录</th><th>创建时间</th><th>操作</th>
+            </tr></thead>
+            <tbody id="userRows"></tbody>
+          </table>
+        </div>
+        <div class="pager" id="userPager"></div>
       </div>
-      <div class="table-wrap">
-        <table class="grid">
-          <thead><tr>
-            <th>用户名</th><th>角色</th><th>状态</th><th>登录次数</th><th>最近登录</th><th>创建时间</th><th>操作</th>
-          </tr></thead>
-          <tbody id="userRows"></tbody>
-        </table>
+
+      <div class="tab-pane" id="userTab-groups" hidden>
+        <div class="tools-inline">
+          <button class="btn primary" id="btnNewGroup">＋ 新建分组</button>
+        </div>
+        <div class="table-wrap">
+          <table class="grid">
+            <thead><tr>
+              <th>分组名称</th><th>描述</th><th>成员数</th><th>创建时间</th><th>操作</th>
+            </tr></thead>
+            <tbody id="groupRows"></tbody>
+          </table>
+        </div>
       </div>
-      <div class="pager" id="userPager"></div>
     </section>
 
     <!-- 拓扑管理 -->
@@ -199,6 +218,39 @@
   </div>
 </div>
 
+<!-- ================= 新建 / 编辑 分组 ================= -->
+<div class="overlay" id="groupOverlay" hidden>
+  <div class="dialog">
+    <div class="dlg-head"><h2 id="groupDlgTitle">新建分组</h2><span class="dlg-close" id="btnCloseGroup">×</span></div>
+    <label>分组名称
+      <input id="gName" type="text" spellcheck="false" maxlength="40" placeholder="例如:红队 / 运维组">
+    </label>
+    <label>描述
+      <input id="gDesc" type="text" spellcheck="false" maxlength="120" placeholder="可选">
+    </label>
+    <div class="dlg-err" id="groupErr"></div>
+    <div class="dlg-actions">
+      <button class="btn" id="btnCancelGroup" type="button">取消</button>
+      <button class="btn primary" id="btnSaveGroup" type="button">保存</button>
+    </div>
+  </div>
+</div>
+
+<!-- ================= 管理分组成员 ================= -->
+<div class="overlay" id="memberOverlay" hidden>
+  <div class="dialog wide share-dialog">
+    <div class="dlg-head"><h2 id="memberDlgTitle">管理成员</h2><span class="dlg-close" id="btnCloseMember">×</span></div>
+    <div class="dlg-msg" id="memberMsg"></div>
+    <input class="search" id="memberFilter" placeholder="搜索用户" spellcheck="false">
+    <div class="share-list" id="memberList"></div>
+    <div class="dlg-err" id="memberErr"></div>
+    <div class="dlg-actions">
+      <button class="btn" id="btnCancelMember" type="button">取消</button>
+      <button class="btn primary" id="btnSaveMember" type="button">保存成员</button>
+    </div>
+  </div>
+</div>
+
 <!-- ================= 站内确认 / 输入弹窗 ================= -->
 <div class="overlay" id="confirmOverlay" hidden>
   <div class="dialog">
diff --git a/web/admin.js b/web/admin.js
index 7f9c0ec..d76de27 100644
--- a/web/admin.js
+++ b/web/admin.js
@@ -103,7 +103,13 @@
     saveSiteSettings: function (p) { return this.req('PUT', '/admin/settings', p); },
     setVisibility: function (id, vis) { return this.req('PUT', '/topologies/' + encodeURIComponent(id) + '/permission', { visibility: vis }); },
     renameTopo: function (id, name) { return this.req('PUT', '/topologies/' + encodeURIComponent(id) + '/rename', { name: name }); },
-    deleteTopo: function (id) { return this.req('DELETE', '/topologies/' + encodeURIComponent(id)); }
+    deleteTopo: function (id) { return this.req('DELETE', '/topologies/' + encodeURIComponent(id)); },
+    groups: function () { return this.req('GET', '/groups'); },
+    createGroup: function (p) { return this.req('POST', '/groups', p); },
+    updateGroup: function (id, p) { return this.req('PUT', '/groups/' + encodeURIComponent(id), p); },
+    deleteGroup: function (id) { return this.req('DELETE', '/groups/' + encodeURIComponent(id)); },
+    groupMembers: function (id) { return this.req('GET', '/groups/' + encodeURIComponent(id) + '/members'); },
+    setGroupMembers: function (id, ids) { return this.req('PUT', '/groups/' + encodeURIComponent(id) + '/members', { userIds: ids }); }
   };
 
   /* ============================================================
@@ -224,6 +230,8 @@
   const state = {
     view: 'overview',
     currentUser: null,
+    usersTab: 'list',
+    groups: [],
     users: { page: 1, pageSize: 10, q: '', total: 0 },
     topos: { page: 1, pageSize: 10, q: '', owner: '', total: 0 },
     logs: { page: 1, pageSize: 12, q: '', total: 0 }
@@ -249,12 +257,28 @@
       it.classList.toggle('active', it.getAttribute('data-view') === name);
     });
     if (name === 'overview') { loadOverview(); }
-    else if (name === 'users') { loadUsers(); }
+    else if (name === 'users') { loadUserTab(); }
     else if (name === 'topo') { loadTopoOwnerOptions(); loadTopoAdmin(); }
     else if (name === 'settings') { loadSettings(); }
     else if (name === 'logs') { loadLogs(); }
   }
 
+  /* 用户管理:用户列表 / 分组管理 子页切换 */
+  function applyUserTab() {
+    const isGroups = (state.usersTab === 'groups');
+    $('userTab-list').hidden = isGroups;
+    $('userTab-groups').hidden = !isGroups;
+    Array.prototype.forEach.call(document.querySelectorAll('#userTabs .tab'), function (t) {
+      t.classList.toggle('active', t.getAttribute('data-tab') === state.usersTab);
+    });
+  }
+
+  function loadUserTab() {
+    applyUserTab();
+    if (state.usersTab === 'groups') { loadGroups(); }
+    else { loadUsers(); }
+  }
+
   /* ============================================================
      概览
      ============================================================ */
@@ -300,8 +324,9 @@
           ? '<span class="badge ro">已禁用</span>'
           : '<span class="badge public">正常</span>';
         const pwdFlag = u.mustChangePassword ? ' <span class="badge ro">待改密</span>' : '';
+        const protFlag = u.protected ? ' <span class="badge owner">受保护</span>' : '';
         return '<tr>' +
-          '<td>' + esc(u.username) + '</td>' +
+          '<td>' + esc(u.username) + protFlag + '</td>' +
           '<td>' + roleBadge + '</td>' +
           '<td>' + status + pwdFlag + '</td>' +
           '<td>' + esc(u.loginCount) + '</td>' +
@@ -316,6 +341,9 @@
 
   function userActions(u) {
     const isSelf = state.currentUser && state.currentUser.id === u.id;
+    if (u.protected) {
+      return '<span class="hint-sm">受保护账号,不可被修改</span>';
+    }
     const btns = [];
     btns.push('<button class="btn" data-act="pwd" data-id="' + esc(u.id) + '" data-name="' + esc(u.username) + '">重置密码</button>');
     btns.push('<button class="btn" data-act="role" data-id="' + esc(u.id) + '" data-role="' +
@@ -435,6 +463,144 @@
     });
   }
 
+  /* ============================================================
+     用户分组
+     ============================================================ */
+  let editingGroupId = null;
+  let memberGroupId = null;
+  let memberSelected = {};
+  let memberCandidates = [];
+
+  function loadGroups() {
+    API.groups().then(function (d) {
+      state.groups = d.groups || [];
+      renderGroups();
+    }).catch(handleErr);
+  }
+
+  function renderGroups() {
+    const rows = state.groups || [];
+    $('groupRows').innerHTML = rows.length ? rows.map(function (g) {
+      return '<tr>' +
+        '<td>' + esc(g.name) + '</td>' +
+        '<td>' + esc(g.description || '—') + '</td>' +
+        '<td>' + esc(g.memberCount) + '</td>' +
+        '<td>' + esc(fmtTime(g.createdAt)) + '</td>' +
+        '<td class="actions">' +
+          '<button class="btn" data-act="members" data-id="' + esc(g.id) + '" data-name="' + esc(g.name) + '">管理成员</button>' +
+          '<button class="btn" data-act="edit" data-id="' + esc(g.id) + '" data-name="' + esc(g.name) + '" data-desc="' + esc(g.description || '') + '">编辑</button>' +
+          '<button class="btn danger" data-act="del" data-id="' + esc(g.id) + '" data-name="' + esc(g.name) + '">删除</button>' +
+        '</td>' +
+        '</tr>';
+    }).join('') : '<tr><td colspan="5" class="empty-row">暂无分组</td></tr>';
+  }
+
+  function onGroupRowClick(e) {
+    const b = e.target.closest('button[data-act]');
+    if (!b) { return; }
+    const act = b.getAttribute('data-act');
+    const id = b.getAttribute('data-id');
+    if (act === 'edit') {
+      openGroupDialog(id, b.getAttribute('data-name'), b.getAttribute('data-desc'));
+    } else if (act === 'del') {
+      uiConfirm('确认删除分组「' + b.getAttribute('data-name') + '」?该分组将从所有共享设置中移除。',
+        { title: '删除分组', danger: true, okText: '删除' }).then(function (ok) {
+        if (!ok) { return; }
+        API.deleteGroup(id).then(function () {
+          toast('分组已删除', 'ok'); loadGroups();
+        }).catch(handleErr);
+      });
+    } else if (act === 'members') {
+      openMemberDialog(id, b.getAttribute('data-name'));
+    }
+  }
+
+  function openGroupDialog(id, name, desc) {
+    editingGroupId = id || null;
+    $('groupDlgTitle').textContent = id ? '编辑分组' : '新建分组';
+    $('gName').value = name || '';
+    $('gDesc').value = desc || '';
+    $('groupErr').textContent = '';
+    openOverlay('groupOverlay');
+    setTimeout(function () { $('gName').focus(); $('gName').select(); }, 30);
+  }
+
+  function submitGroupDialog() {
+    const name = $('gName').value.trim();
+    const desc = $('gDesc').value.trim();
+    if (!name) { $('groupErr').textContent = '请输入分组名称'; return; }
+    $('btnSaveGroup').disabled = true;
+    const req = editingGroupId
+      ? API.updateGroup(editingGroupId, { name: name, description: desc })
+      : API.createGroup({ name: name, description: desc });
+    req.then(function () {
+      $('btnSaveGroup').disabled = false;
+      closeOverlay('groupOverlay');
+      toast(editingGroupId ? '分组已更新' : '分组已创建', 'ok');
+      editingGroupId = null;
+      loadGroups();
+    }).catch(function (err) {
+      $('btnSaveGroup').disabled = false;
+      $('groupErr').textContent = (err && err.message) || '保存失败';
+    });
+  }
+
+  function openMemberDialog(id, name) {
+    memberGroupId = id;
+    memberSelected = {};
+    memberCandidates = [];
+    $('memberDlgTitle').textContent = '管理成员';
+    $('memberMsg').textContent = '为分组「' + name + '」选择成员,保存后该分组的共享将对选中成员生效。';
+    $('memberFilter').value = '';
+    $('memberErr').textContent = '';
+    $('memberList').innerHTML = '<div class="empty-row">加载中…</div>';
+    openOverlay('memberOverlay');
+    Promise.all([API.listUsers({ page: 1, pageSize: 100 }), API.groupMembers(id)]).then(function (res) {
+      memberCandidates = res[0].users || [];
+      (res[1].members || []).forEach(function (m) { memberSelected[m.id] = true; });
+      renderMemberList();
+    }).catch(function (err) {
+      $('memberList').innerHTML = '<div class="empty-row">' + esc((err && err.message) || '加载失败') + '</div>';
+    });
+  }
+
+  function renderMemberList() {
+    const q = ($('memberFilter').value || '').trim().toLowerCase();
+    const list = memberCandidates.filter(function (u) {
+      return !q || (u.username || '').toLowerCase().indexOf(q) >= 0;
+    });
+    $('memberList').innerHTML = list.length ? list.map(function (u) {
+      return '<label class="share-item">' +
+        '<input type="checkbox" class="member-chk" data-id="' + esc(u.id) + '"' + (memberSelected[u.id] ? ' checked' : '') + '>' +
+        '<span class="share-name">' + esc(u.username) + '</span>' +
+        (u.role === 'admin' ? '<span class="badge owner">管理员</span>' : '') +
+        '</label>';
+    }).join('') : '<div class="empty-row">无匹配用户</div>';
+  }
+
+  function onMemberListChange(e) {
+    const t = e.target;
+    if (!t.classList || !t.classList.contains('member-chk')) { return; }
+    const id = t.getAttribute('data-id');
+    if (t.checked) { memberSelected[id] = true; } else { delete memberSelected[id]; }
+  }
+
+  function submitMemberDialog() {
+    if (!memberGroupId) { return; }
+    const ids = Object.keys(memberSelected);
+    $('btnSaveMember').disabled = true;
+    API.setGroupMembers(memberGroupId, ids).then(function () {
+      $('btnSaveMember').disabled = false;
+      closeOverlay('memberOverlay');
+      toast('成员已保存(共 ' + ids.length + ' 人)', 'ok');
+      memberGroupId = null;
+      loadGroups();
+    }).catch(function (err) {
+      $('btnSaveMember').disabled = false;
+      $('memberErr').textContent = (err && err.message) || '保存失败';
+    });
+  }
+
   /* ============================================================
      拓扑管理
      ============================================================ */
@@ -725,6 +891,26 @@
     $('userRows').addEventListener('click', onUserRowClick);
     $('topoRows').addEventListener('click', onTopoRowClick);
 
+    Array.prototype.forEach.call(document.querySelectorAll('#userTabs .tab'), function (t) {
+      t.addEventListener('click', function () {
+        state.usersTab = t.getAttribute('data-tab');
+        loadUserTab();
+      });
+    });
+    $('btnNewGroup').addEventListener('click', function () { openGroupDialog(null, '', ''); });
+    $('btnSaveGroup').addEventListener('click', submitGroupDialog);
+    $('btnCancelGroup').addEventListener('click', function () { closeOverlay('groupOverlay'); });
+    $('btnCloseGroup').addEventListener('click', function () { closeOverlay('groupOverlay'); });
+    $('gName').addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') { e.preventDefault(); submitGroupDialog(); }
+    });
+    $('groupRows').addEventListener('click', onGroupRowClick);
+    $('btnSaveMember').addEventListener('click', submitMemberDialog);
+    $('btnCancelMember').addEventListener('click', function () { closeOverlay('memberOverlay'); });
+    $('btnCloseMember').addEventListener('click', function () { closeOverlay('memberOverlay'); });
+    $('memberList').addEventListener('change', onMemberListChange);
+    $('memberFilter').addEventListener('input', renderMemberList);
+
     $('btnNewUser').addEventListener('click', openUserDialog);
     $('btnSaveUser').addEventListener('click', submitUserDialog);
     $('btnCancelUser').addEventListener('click', function () { closeOverlay('userOverlay'); });
diff --git a/web/app.js b/web/app.js
index abd2ae5..13dac43 100644
--- a/web/app.js
+++ b/web/app.js
@@ -39,6 +39,7 @@ let currentUser = null;       // {id,username,role,...} 或 null
 let topoId = null;            // 当前打开的拓扑 ID
 let topoName = '';            // 当前拓扑名称
 let topoCanEdit = false;      // 当前拓扑是否可写
+let topoPermission = 'owner'; // 当前用户对当前拓扑的权限:owner|edit|view
 let readOnly = false;         // 登录但无写权限(他人公开拓扑)
 let topoScope = 'mine';       // 我的拓扑面板范围:'mine'(当前用户) | 'public'(公开)
 let dirty = false;
@@ -49,6 +50,12 @@ let lastSavedAt = null;
 let loginMode = 'login';      // 'login' | 'register'
 let siteAllowRegistration = true;  // 站点是否开放注册(由后端设置控制)
 
+/* 协同:版本号 / 基线数据 / 连接态 */
+let baseRev = 0;              // 已同步的服务端版本号
+let baseData = null;          // 最近一次同步的基线数据 {nodes,edges}
+let collabStarted = false;
+const collab = { es: null, pollTimer: null, errCount: 0, present: [], topoId: null };
+
 /* ============================================================
    DOM
    ============================================================ */
@@ -112,6 +119,74 @@ function fmtTime(iso) {
   return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
 }
 
+/* 稳定序列化(忽略键顺序,用于并发合并的相等比较) */
+function stableStr(o) {
+  if (o === null || o === undefined || typeof o !== 'object') {
+    return JSON.stringify(o === undefined ? null : o);
+  }
+  if (Array.isArray(o)) {
+    return '[' + o.map(stableStr).join(',') + ']';
+  }
+  return '{' + Object.keys(o).sort().map(function (k) {
+    return JSON.stringify(k) + ':' + stableStr(o[k]);
+  }).join(',') + '}';
+}
+
+/* 当前画布数据快照(深拷贝) */
+function snapData() {
+  return {
+    nodes: JSON.parse(JSON.stringify(state.nodes)),
+    edges: JSON.parse(JSON.stringify(state.edges))
+  };
+}
+
+function byId(arr) {
+  const m = new Map();
+  (arr || []).forEach(function (x) {
+    if (x && x.id !== undefined && x.id !== null) m.set(String(x.id), x);
+  });
+  return m;
+}
+
+/* 按 id 合并单个列表:base 基线 / local 本地 / remote 远端 */
+function mergeList(baseArr, localArr, remoteArr) {
+  const b = byId(baseArr), r = byId(remoteArr);
+  const out = [];
+  const used = new Set();
+  let conflicts = 0;
+
+  (localArr || []).forEach(function (item) {
+    const id = String(item.id);
+    used.add(id);
+    if (!b.has(id)) { out.push(item); return; }            // 本地新增
+    const bv = b.get(id);
+    const lChanged = stableStr(item) !== stableStr(bv);
+    if (!r.has(id)) {
+      if (lChanged) { out.push(item); conflicts++; }        // 本地改 / 远端删 → 保留本地
+      return;                                              // 否则删除
+    }
+    const rv = r.get(id);
+    const rChanged = stableStr(rv) !== stableStr(bv);
+    if (rChanged && !lChanged) { out.push(rv); return; }    // 仅远端改 → 取远端
+    out.push(item);                                        // 本地改或未改 → 本地优先
+    if (rChanged && lChanged && stableStr(item) !== stableStr(rv)) { conflicts++; }
+  });
+
+  (remoteArr || []).forEach(function (item) {
+    const id = String(item.id);
+    if (used.has(id) || b.has(id)) return;                 // 已处理 / 本地已删 (尊重本地删除)
+    out.push(item);                                        // 远端新增
+  });
+
+  return { items: out, conflicts: conflicts };
+}
+
+function mergeThreeWay(base, local, remote) {
+  const nodes = mergeList(base && base.nodes, local.nodes, remote.nodes);
+  const edges = mergeList(base && base.edges, local.edges, remote.edges);
+  return { nodes: nodes.items, edges: edges.items, conflicts: nodes.conflicts + edges.conflicts };
+}
+
 const _mc = document.createElement('canvas').getContext('2d');
 function textWidth(text, font) {
   _mc.font = font;
@@ -789,7 +864,7 @@ document.getElementById('btnDelete').addEventListener('click', function () {
 /* 根据权限启用/禁用编辑相关控件 */
 function updateEditability() {
   const ok = canEdit();
-  ['btnAdd','btnUndo','btnAuto','btnClear','btnAddChild','btnDelete'].forEach(id => {
+  ['btnUndo','btnAuto','btnClear','btnAddChild','btnDelete'].forEach(id => {
     const b = document.getElementById(id);
     if (b) b.disabled = !ok;
   });
@@ -801,7 +876,6 @@ function updateEditability() {
 /* ============================================================
    工具栏
    ============================================================ */
-document.getElementById('btnAdd').addEventListener('click', addNodeAtCenter);
 btnUndo.addEventListener('click', undo);
 
 document.getElementById('btnFit').addEventListener('click', fitView);
@@ -942,6 +1016,7 @@ function onDataChanged() {
 }
 
 function updateSaveState() {
+  updateTopoCurrent();
   if (!saveStateEl) return;
   saveStateEl.className = 'save-state';
   if (!currentUser) { saveStateEl.textContent = ''; return; }
@@ -953,6 +1028,19 @@ function updateSaveState() {
   saveStateEl.classList.add('ok');
 }
 
+/* 右下角状态区:显示当前正在编辑的拓扑名称与脏标记 */
+function updateTopoCurrent() {
+  const box = document.getElementById('topoCurrent');
+  if (!box) return;
+  const nameEl = box.querySelector('.tc-name');
+  let text;
+  if (!currentUser) text = '未登录';
+  else if (topoName) text = topoName;
+  else text = '未保存的新拓扑';
+  if (nameEl) { nameEl.textContent = text; nameEl.title = text; }
+  box.classList.toggle('dirty', !!dirty);
+}
+
 function scheduleSave() {
   // 仅在已绑定拓扑时自动保存;未绑定拓扑需手动点「保存」触发新建
   if (!canSave() || !topoId) return;
@@ -973,7 +1061,7 @@ function saveNow(silent) {
 
   let p;
   if (topoId && topoCanEdit) {
-    p = API.saveTopo(topoId, { nodes: state.nodes, edges: state.edges, name: topoName });
+    p = API.saveTopo(topoId, { nodes: state.nodes, edges: state.edges, name: topoName, baseRev: baseRev });
   } else {
     const name = (topoName && topoName.trim()) ? topoName.trim() : defaultTopoName();
     p = API.createTopo({ name: name, nodes: state.nodes, edges: state.edges });
@@ -985,12 +1073,21 @@ function saveNow(silent) {
       topoName = r.topology.name;
       topoCanEdit = true;
       readOnly = false;
+      topoPermission = 'owner';
       lastSavedAt = r.topology.updatedAt;
+      if (typeof r.topology.rev === 'number') baseRev = r.topology.rev;
       try { localStorage.setItem(LAST_TOPO_KEY, topoId); } catch (e) {}
     }
+    baseData = snapData();
     dirty = false;
     if (!silent) toast('已保存:' + topoName, 'ok');
+    updateShareEntry();
+    startCollab();
   }).catch(function (e) {
+    if (e && e.conflict) {
+      handleConflict(e);
+      return;
+    }
     saveStateEl.textContent = '保存失败';
     saveStateEl.className = 'save-state err';
     if (!silent) toastErr('保存失败:' + e.message);
@@ -1002,6 +1099,281 @@ function saveNow(silent) {
   });
 }
 
+/* ============================================================
+   协同:SSE 推送 + 在线成员 + 三方合并
+   ============================================================ */
+const COLLAB_MAX_ES_ERRORS = 2;
+
+function collabActive() { return !!currentUser && !!topoId; }
+
+function startCollab() {
+  if (!collabActive()) { renderPresence([]); return; }
+  if (collabStarted && collab.topoId === topoId) return;
+  stopCollab();
+  collab.topoId = topoId;
+  collabStarted = true;
+  collab.errCount = 0;
+  connectStream();
+}
+
+function stopCollab() {
+  collabStarted = false;
+  collab.topoId = null;
+  if (collab.es) { try { collab.es.close(); } catch (e) {} collab.es = null; }
+  if (collab.pollTimer) { clearInterval(collab.pollTimer); collab.pollTimer = null; }
+  renderPresence([]);
+}
+
+function connectStream() {
+  if (!collabActive()) return;
+  if (typeof window.EventSource !== 'function') { startPolling(); return; }
+  if (collab.es) { try { collab.es.close(); } catch (e) {} collab.es = null; }
+  if (collab.pollTimer) { clearInterval(collab.pollTimer); collab.pollTimer = null; }
+
+  const url = 'index.php?r=' + encodeURIComponent('/api/topologies/' + encodeURIComponent(topoId) + '/stream') + '&since=' + baseRev;
+  let es;
+  try { es = new EventSource(url); } catch (e) { startPolling(); return; }
+  collab.es = es;
+
+  es.addEventListener('revision', function (ev) {
+    let d = {};
+    try { d = JSON.parse(ev.data); } catch (e) {}
+    onRemoteRevision(d.rev);
+  });
+  es.addEventListener('presence', function (ev) {
+    let d = {};
+    try { d = JSON.parse(ev.data); } catch (e) {}
+    renderPresence(d.users || []);
+  });
+  es.addEventListener('gone', function () {
+    if (collab.es === es) stopCollab();
+  });
+  es.addEventListener('bye', function () {
+    if (collab.es === es) { try { es.close(); } catch (e) {} collab.es = null; }
+    setTimeout(function () { if (collabStarted) connectStream(); }, 300);
+  });
+  es.onerror = function () {
+    if (collab.es !== es) return;              // 已被 bye / stopCollab 接管,避免重复连接
+    if (es.readyState === 2) {                 // CLOSED:无法建立连接,降级轮询
+      collab.es = null;
+      collab.errCount++;
+      if (collab.errCount >= COLLAB_MAX_ES_ERRORS) { startPolling(); }
+      else { setTimeout(function () { if (collabStarted) connectStream(); }, 1200); }
+    }
+  };
+}
+
+function startPolling() {
+  if (!collabActive()) return;
+  if (collab.es) { try { collab.es.close(); } catch (e) {} collab.es = null; }
+  if (collab.pollTimer) clearInterval(collab.pollTimer);
+  const tick = function () {
+    if (!collabActive()) return;
+    API.req('GET', '/topologies/' + encodeURIComponent(topoId) + '/poll?since=' + baseRev).then(function (d) {
+      if (d.presence) renderPresence(d.presence);
+      if (d.changed && typeof d.rev === 'number' && d.rev !== baseRev) onRemoteRevision(d.rev);
+    }).catch(function () {});
+  };
+  tick();
+  collab.pollTimer = setInterval(tick, 4000);
+}
+
+function onRemoteRevision(rev) {
+  if (!collabActive() || typeof rev !== 'number') return;
+  if (rev === baseRev) return;
+  if (!topoCanEdit || readOnly) { reloadRemote(); return; }
+  if (dirty) {
+    // 本地有未保存改动:先保存,由版本冲突触发合并,避免覆盖他人
+    saveNow(true);
+  } else {
+    reloadRemote();
+  }
+}
+
+function reloadRemote() {
+  if (!topoId) return Promise.resolve();
+  return API.getTopo(topoId).then(function (r) {
+    if (!r || !r.topology) return;
+    loading = true;
+    topoName = r.topology.name;
+    topoCanEdit = !!r.topology.canEdit;
+    readOnly = !topoCanEdit;
+    topoPermission = r.topology.permission || (topoCanEdit ? 'edit' : 'view');
+    if (typeof r.topology.rev === 'number') baseRev = r.topology.rev;
+    loadData(r.data, false);
+    loading = false;
+    baseData = snapData();
+    history = [];
+    dirty = false;
+    updateBanner(); updateEditability(); updateSaveState(); updateUndoBtn(); updateShareEntry();
+    toast('已同步其他协作者的改动', 'ok');
+  }).catch(function () {});
+}
+
+function handleConflict(e) {
+  if (!topoCanEdit) return;
+  const d = e.data || {};
+  const remoteData = d.data || { nodes: [], edges: [] };
+  const remoteRev = (typeof d.rev === 'number') ? d.rev : (baseRev + 1);
+  const merged = mergeThreeWay(baseData, { nodes: state.nodes, edges: state.edges }, remoteData);
+  loading = true;
+  state.nodes = merged.nodes;
+  state.edges = merged.edges;
+  loading = false;
+  baseRev = remoteRev;
+  baseData = { nodes: remoteData.nodes || [], edges: remoteData.edges || [] };
+  render();
+  syncInspector();
+  dirty = true;
+  updateSaveState();
+  if (merged.conflicts > 0) {
+    toast('检测到 ' + merged.conflicts + ' 处并发修改,已自动合并并重新保存', 'warn');
+  } else {
+    toast('已合并其他协作者的改动', 'ok');
+  }
+  setTimeout(function () { saveNow(true); }, 80);
+}
+
+function renderPresence(users) {
+  collab.present = users || [];
+  const bar = document.getElementById('collabBar');
+  if (!bar) return;
+  if (!users || !users.length) { bar.hidden = true; bar.innerHTML = ''; return; }
+  bar.hidden = false;
+  const chips = users.slice(0, 6).map(function (u) {
+    const initial = esc((u.username || '?').slice(0, 1).toUpperCase());
+    return '<span class="collab-chip' + (u.self ? ' self' : '') + '" title="' + esc(u.username) + '">' +
+      '<i class="av">' + initial + '</i><span class="nm">' + esc(u.username) + (u.self ? '(我)' : '') + '</span></span>';
+  }).join('');
+  const more = users.length > 6 ? '<span class="collab-more">+' + (users.length - 6) + '</span>' : '';
+  bar.innerHTML = '<span class="collab-title"><i class="dot"></i>' + users.length + ' 人在线</span>' + chips + more;
+}
+
+function sendPresenceLeave() {
+  if (!currentUser || !topoId) return;
+  const url = 'index.php?r=' + encodeURIComponent('/api/topologies/' + encodeURIComponent(topoId) + '/presence');
+  const body = JSON.stringify({ leave: true });
+  try {
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon(url, new Blob([body], { type: 'application/json' }));
+      return;
+    }
+  } catch (e) {}
+  try {
+    fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: body, keepalive: true });
+  } catch (e) {}
+}
+
+/* ============================================================
+   共享与协作弹窗
+   ============================================================ */
+let shareCandidates = { users: [], groups: [] };
+let shareSelected = {};
+
+function updateShareEntry() {
+  const b = document.getElementById('btnShare');
+  if (!b) return;
+  b.hidden = !(currentUser && topoId && topoPermission === 'owner');
+}
+
+function shareRow(key, name, sel) {
+  return '<label class="share-item">' +
+    '<input type="checkbox" class="share-chk" data-key="' + esc(key) + '"' + (sel ? ' checked' : '') + '>' +
+    '<span class="share-name">' + esc(name) + '</span>' +
+    '<select class="share-perm" data-key="' + esc(key) + '">' +
+      '<option value="edit"' + (sel && sel.permission === 'edit' ? ' selected' : '') + '>可编辑</option>' +
+      '<option value="view"' + (sel && sel.permission === 'view' ? ' selected' : '') + '>只读</option>' +
+    '</select></label>';
+}
+
+function renderShareLists() {
+  const uf = (document.getElementById('shareUserFilter').value || '').trim().toLowerCase();
+  const gf = (document.getElementById('shareGroupFilter').value || '').trim().toLowerCase();
+  const myId = currentUser ? currentUser.id : '';
+  const ul = document.getElementById('shareUserList');
+  const gl = document.getElementById('shareGroupList');
+
+  const users = shareCandidates.users.filter(function (u) {
+    if (u.id === myId) return false;
+    return !uf || (u.username || '').toLowerCase().indexOf(uf) >= 0;
+  });
+  ul.innerHTML = users.length ? users.map(function (u) {
+    return shareRow('user:' + u.id, u.username, shareSelected['user:' + u.id]);
+  }).join('') : '<div class="empty">无匹配成员</div>';
+
+  const groups = shareCandidates.groups.filter(function (g) {
+    return !gf || (g.name || '').toLowerCase().indexOf(gf) >= 0;
+  });
+  gl.innerHTML = groups.length ? groups.map(function (g) {
+    return shareRow('group:' + g.id, g.name, shareSelected['group:' + g.id]);
+  }).join('') : '<div class="empty">暂无分组</div>';
+}
+
+function openShareDialog() {
+  if (!currentUser) { openLogin(); return; }
+  if (!topoId) { toast('请先保存拓扑后再共享', 'warn'); return; }
+  if (topoPermission !== 'owner') { toast('仅创建者可管理共享', 'warn'); return; }
+  document.getElementById('shareErr').textContent = '';
+  document.getElementById('shareUserFilter').value = '';
+  document.getElementById('shareGroupFilter').value = '';
+  Promise.all([API.directory(), API.topoShares(topoId)]).then(function (res) {
+    const dir = res[0] || {};
+    const cur = res[1] || {};
+    shareCandidates = { users: dir.users || [], groups: dir.groups || [] };
+    shareSelected = {};
+    (cur.shares || []).forEach(function (s) {
+      shareSelected[s.targetType + ':' + s.targetId] = { type: s.targetType, id: s.targetId, permission: s.permission };
+    });
+    document.getElementById('shareMode').checked = !!cur.shareMode;
+    document.getElementById('shareMsg').textContent =
+      '开启共享模式后,选中的成员 / 分组可访问该拓扑,并可选择「可编辑」进行协同修改。';
+    renderShareLists();
+    openOverlay('shareOverlay');
+  }).catch(function (e) { toastErr(e.message); });
+}
+
+function onShareListChange(e) {
+  const t = e.target;
+  const key = t.getAttribute && t.getAttribute('data-key');
+  if (!key) return;
+  const parts = key.split(':');
+  if (t.classList.contains('share-chk')) {
+    if (t.checked) {
+      const sel = t.parentNode.querySelector('.share-perm');
+      shareSelected[key] = { type: parts[0], id: parts[1], permission: sel ? sel.value : 'edit' };
+    } else {
+      delete shareSelected[key];
+    }
+  } else if (t.classList.contains('share-perm')) {
+    if (shareSelected[key]) {
+      shareSelected[key].permission = t.value;
+    } else {
+      const chk = t.parentNode.querySelector('.share-chk');
+      if (chk) chk.checked = true;
+      shareSelected[key] = { type: parts[0], id: parts[1], permission: t.value };
+    }
+  }
+}
+
+function saveShare() {
+  if (!topoId) return;
+  const shareMode = document.getElementById('shareMode').checked;
+  const shares = Object.keys(shareSelected).map(function (k) {
+    const s = shareSelected[k];
+    return { targetType: s.type, targetId: s.id, permission: s.permission };
+  });
+  const btn = document.getElementById('btnSaveShare');
+  btn.disabled = true;
+  API.setShares(topoId, { shareMode: shareMode, shares: shares }).then(function () {
+    btn.disabled = false;
+    closeOverlay('shareOverlay');
+    toast(shareMode ? ('已开启共享,共 ' + shares.length + ' 项') : '已关闭共享模式', 'ok');
+  }).catch(function (e) {
+    btn.disabled = false;
+    document.getElementById('shareErr').textContent = e.message;
+  });
+}
+
 /* ============================================================
    轻提示
    ============================================================ */
@@ -1048,6 +1420,8 @@ const API = {
           const msg = (data && data.error) ? data.error : ('请求失败 (' + r.status + ')');
           const err = new Error(msg);
           err.status = r.status;
+          err.data = data;
+          err.conflict = !!(data && data.conflict);
           throw err;
         }
         return data || {};
@@ -1073,7 +1447,11 @@ const API = {
   deleteUser: function (id) { return this.req('DELETE', '/users/' + encodeURIComponent(id)); },
   dashboard: function () { return this.req('GET', '/dashboard'); },
   logs: function (p) { return this.req('GET', '/logs' + qs(p)); },
-  adminTopologies: function (p) { return this.req('GET', '/admin/topologies' + qs(p)); }
+  adminTopologies: function (p) { return this.req('GET', '/admin/topologies' + qs(p)); },
+  directory: function () { return this.req('GET', '/directory'); },
+  overview: function () { return this.req('GET', '/overview'); },
+  topoShares: function (id) { return this.req('GET', '/topologies/' + encodeURIComponent(id) + '/shares'); },
+  setShares: function (id, p) { return this.req('PUT', '/topologies/' + encodeURIComponent(id) + '/shares', p); }
 };
 
 /* ============================================================
@@ -1304,6 +1682,7 @@ function onUserChanged() {
       currentUser.username + ' · ' + (currentUser.role === 'admin' ? '管理员' : '普通用户');
   } else {
     btnUserEl.textContent = '登录';
+    stopCollab();
   }
   document.getElementById('userMenu').hidden = true;
   updateAdminEntry();
@@ -1311,6 +1690,7 @@ function onUserChanged() {
   updateEditability();
   updateSaveState();
   updateUndoBtn();
+  updateShareEntry();
 }
 
 function updateAdminEntry() {
@@ -1365,24 +1745,32 @@ function openTopology(id) {
     topoName = r.topology.name;
     topoCanEdit = !!r.topology.canEdit;
     readOnly = !topoCanEdit;
+    topoPermission = r.topology.permission || (topoCanEdit ? 'edit' : 'view');
+    baseRev = (typeof r.topology.rev === 'number') ? r.topology.rev : 0;
     history = [];
     dirty = false;
     loadData(r.data, false);
+    baseData = snapData();
     loading = false;
     try { localStorage.setItem(LAST_TOPO_KEY, topoId); } catch (e) {}
-    updateBanner(); updateEditability(); updateSaveState(); updateUndoBtn();
+    updateBanner(); updateEditability(); updateSaveState(); updateUndoBtn(); updateShareEntry();
     closeOverlay('topoOverlay');
     requestAnimationFrame(fitView);
+    startCollab();
     toast('已打开:' + topoName + (readOnly ? '(只读)' : ''), 'ok');
   }).catch(function (e) { toastErr(e.message); });
 }
 
 function loadDraft() {
+  stopCollab();
   loading = true;
   topoId = null;
   topoName = '';
   topoCanEdit = true;
   readOnly = false;
+  topoPermission = 'owner';
+  baseRev = 0;
+  baseData = null;
   state.nodes = [];
   state.edges = [];
   state.view = { tx: 0, ty: 0, s: 1 };
@@ -1391,16 +1779,20 @@ function loadDraft() {
   dirty = false;
   loadData(demoData(), false);
   loading = false;
-  updateBanner(); updateEditability(); updateSaveState(); updateUndoBtn();
+  updateBanner(); updateEditability(); updateSaveState(); updateUndoBtn(); updateShareEntry();
   requestAnimationFrame(fitView);
 }
 
 function startNewTopology() {
+  stopCollab();
   loading = true;
   topoId = null;
   topoName = '';
   topoCanEdit = true;
   readOnly = false;
+  topoPermission = 'owner';
+  baseRev = 0;
+  baseData = null;
   state.nodes = [];
   state.edges = [];
   state.view = { tx: 0, ty: 0, s: 1 };
@@ -1410,7 +1802,7 @@ function startNewTopology() {
   loading = false;
   render();
   syncInspector();
-  updateBanner(); updateEditability(); updateSaveState(); updateUndoBtn();
+  updateBanner(); updateEditability(); updateSaveState(); updateUndoBtn(); updateShareEntry();
 }
 
 /* ============================================================
@@ -1464,14 +1856,18 @@ function refreshTopoList() {
   API.listTopos().then(function (r) {
     const all = r.topologies || [];
     const uid = currentUser ? currentUser.id : '';
-    const list = (topoScope === 'public')
-      ? all.filter(function (t) { return t.visibility === 'public'; })
-      : all.filter(function (t) { return t.ownerId === uid; });
+    const list = (topoScope === 'shared')
+      ? all.filter(function (t) { return t.sharedWithMe; })
+      : (topoScope === 'public')
+        ? all.filter(function (t) { return t.visibility === 'public'; })
+        : all.filter(function (t) { return t.ownerId === uid; });
 
     box.innerHTML = '';
     if (!list.length) {
       box.innerHTML = '<div class="empty">' +
-        (topoScope === 'public' ? '暂无公开拓扑。' : '还没有拓扑,输入名称点击「新建」开始。') +
+        (topoScope === 'shared' ? '暂无共享给你的拓扑。'
+          : topoScope === 'public' ? '暂无公开拓扑。'
+          : '还没有拓扑,输入名称点击「新建」开始。') +
         '</div>';
       return;
     }
@@ -1480,9 +1876,13 @@ function refreshTopoList() {
         cls: t.visibility === 'public' ? 'public' : 'private',
         text: t.visibility === 'public' ? '公开' : '私有'
       }];
-      if (!t.canEdit) { badges.push({ cls: 'ro', text: '只读' }); }
+      if (t.sharedWithMe) {
+        badges.push({ cls: 'owner', text: t.permission === 'edit' ? '共享·可编辑' : '共享·只读' });
+      } else if (!t.canEdit) {
+        badges.push({ cls: 'ro', text: '只读' });
+      }
       const actions = [{ text: '打开', primary: true, fn: function () { openTopology(t.id); } }];
-      if (t.canEdit) {
+      if (t.ownerId === uid) {
         actions.push({ text: '重命名', fn: function () { renameTopo(t.id, t.name); } });
         actions.push({ text: t.visibility === 'public' ? '设为私有' : '设为公开', fn: function () { toggleVisibility(t.id, t.visibility); } });
         actions.push({ text: '删除', danger: true, fn: function () { deleteTopo(t.id, t.name); } });
@@ -1530,7 +1930,7 @@ function renameTopo(id, curName, cb) {
     if (v === curName) return;
     API.renameTopo(id, v).then(function () {
       toast('已重命名', 'ok');
-      if (topoId === id) { topoName = v; updateBanner(); }
+      if (topoId === id) { topoName = v; updateBanner(); updateTopoCurrent(); }
       if (cb) cb(); else refreshTopoList();
     }).catch(function (e) { toastErr(e.message); });
   });
@@ -1988,6 +2388,30 @@ document.querySelectorAll('.overlay').forEach(function (o) {
   });
 });
 
+/* ---------- 共享与协作弹窗 ---------- */
+document.getElementById('btnShare').addEventListener('click', openShareDialog);
+document.getElementById('btnCloseShare').addEventListener('click', function () { closeOverlay('shareOverlay'); });
+document.getElementById('btnCancelShare').addEventListener('click', function () { closeOverlay('shareOverlay'); });
+document.getElementById('btnSaveShare').addEventListener('click', saveShare);
+document.getElementById('shareUserList').addEventListener('change', onShareListChange);
+document.getElementById('shareGroupList').addEventListener('change', onShareListChange);
+document.getElementById('shareUserFilter').addEventListener('input', function () { renderShareLists(); });
+document.getElementById('shareGroupFilter').addEventListener('input', function () { renderShareLists(); });
+
+/* ---------- 检查器分区折叠 ---------- */
+Array.prototype.forEach.call(document.querySelectorAll('#inspBody .insp-sec-head'), function (h) {
+  h.addEventListener('click', function () { h.parentNode.classList.toggle('collapsed'); });
+});
+
+/* ---------- 用户菜单:我的工作台 ---------- */
+document.getElementById('ddWorkspace').addEventListener('click', function () {
+  document.getElementById('userMenu').hidden = true;
+  window.location.href = 'web/user.html';
+});
+
+/* 离开页面时告知服务端下线 */
+window.addEventListener('beforeunload', function () { sendPresenceLeave(); });
+
 /* ---------- 站内确认 / 输入弹窗 ---------- */
 document.getElementById('confirmOk').addEventListener('click', _dlgConfirmOk);
 document.getElementById('confirmCancel').addEventListener('click', function () { _dlgFinish(null); });
@@ -2003,6 +2427,23 @@ document.addEventListener('keydown', function (e) {
 /* ============================================================
    启动
    ============================================================ */
+function pendingOpenId() {
+  try {
+    const p = new URLSearchParams(window.location.search);
+    const id = p.get('topo');
+    if (id) { return id; }
+  } catch (e) {}
+  return null;
+}
+
+function pendingShare() {
+  try {
+    const p = new URLSearchParams(window.location.search);
+    return p.get('share') === '1';
+  } catch (e) {}
+  return false;
+}
+
 function init() {
   updateEditability();
   API.site().then(function (r) { applySite(r.site); }).catch(function () { /* 忽略:回退页面默认值 */ });
@@ -2010,8 +2451,16 @@ function init() {
     if (r && r.user) {
       currentUser = r.user;
       onUserChanged();
-      bootAfterLogin();
-      maybeForcePwdChange();
+      const openId = pendingOpenId();
+      if (openId) {
+        openTopology(openId).then(function () {
+          const forced = maybeForcePwdChange();
+          if (!forced && pendingShare()) { openShareDialog(); }
+        });
+      } else {
+        bootAfterLogin();
+        maybeForcePwdChange();
+      }
     } else {
       onUserChanged();
       loadDraft();
diff --git a/web/index.html b/web/index.html
index c82af39..5170baf 100644
--- a/web/index.html
+++ b/web/index.html
@@ -11,18 +11,20 @@
 
   <header class="topbar">
     <div class="brand"><div class="logo" id="brandLogo">R</div><h1 id="brandName">路由拓扑</h1></div>
+    <div class="tb-group">
+      <button class="btn" id="btnUndo" disabled title="撤销上一次操作">↶<span class="lbl">撤销</span></button>
+      <button class="btn" id="btnAuto" title="自动整理布局">⌗<span class="lbl">自动整理</span></button>
+      <button class="btn" id="btnFit" title="适应窗口">⤢<span class="lbl">适应窗口</span></button>
+    </div>
     <span class="sep"></span>
-    <button class="btn primary" id="btnAdd">＋ 添加节点</button>
-    <button class="btn" id="btnUndo" disabled>↶ 撤销</button>
-    <button class="btn" id="btnAuto">⌗ 自动整理</button>
-    <button class="btn" id="btnFit">⤢ 适应窗口</button>
-    <span class="sep"></span>
-    <button class="btn" id="btnImport">⇩ 导入</button>
-    <button class="btn" id="btnExport">⇧ 导出</button>
-    <span class="sep"></span>
-    <button class="btn danger" id="btnClear">清空</button>
+    <div class="tb-group">
+      <button class="btn" id="btnImport" title="导入拓扑">⇩<span class="lbl">导入</span></button>
+      <button class="btn" id="btnExport" title="导出拓扑">⇧<span class="lbl">导出</span></button>
+      <button class="btn danger" id="btnClear" title="清空画布">⌫<span class="lbl">清空</span></button>
+    </div>
     <div class="topbar-right">
       <span class="save-state" id="saveState"></span>
+      <button class="btn" id="btnShare" title="共享与协作" hidden>⇗<span class="lbl">共享</span></button>
       <button class="btn primary" id="btnSave">保存</button>
       <button class="btn" id="btnMyTopos">我的拓扑</button>
       <div class="user-wrap">
@@ -55,29 +57,44 @@
         点击图中节点进行编辑
       </div>
       <div id="inspBody" hidden>
-        <label>名称 / 地址
-          <input id="fLabel" type="text" placeholder="192.168.1.10 / dc.corp.local" spellcheck="false">
-        </label>
-        <label>类型
-          <select id="fType">
-            <option value="net">网段 (CIDR)</option>
-            <option value="host">主机 (IP)</option>
-            <option value="domain">域名</option>
-            <option value="other">其他</option>
-          </select>
-        </label>
-        <label>状态
-          <select id="fStatus"></select>
-        </label>
-        <label>端口 / 服务
-          <input id="fPorts" type="text" placeholder="22, 80, 445 / ssh、smb" spellcheck="false">
-        </label>
-        <label>备注
-          <textarea id="fNote" placeholder="凭据、漏洞、横向思路…"></textarea>
-        </label>
-        <div class="btn-row">
-          <button class="btn" id="btnAddChild">＋ 子节点</button>
-          <button class="btn danger" id="btnDelete">删除节点</button>
+        <div class="insp-section" data-sec="basic">
+          <div class="insp-sec-head"><span>基本信息</span><span class="insp-chevron">▾</span></div>
+          <div class="insp-sec-body">
+            <label>名称 / 地址
+              <input id="fLabel" type="text" placeholder="192.168.1.10 / dc.corp.local" spellcheck="false">
+            </label>
+            <label>类型
+              <select id="fType">
+                <option value="net">网段 (CIDR)</option>
+                <option value="host">主机 (IP)</option>
+                <option value="domain">域名</option>
+                <option value="other">其他</option>
+              </select>
+            </label>
+            <label>状态
+              <select id="fStatus"></select>
+            </label>
+            <label>端口 / 服务
+              <input id="fPorts" type="text" placeholder="22, 80, 445 / ssh、smb" spellcheck="false">
+            </label>
+          </div>
+        </div>
+        <div class="insp-section" data-sec="note">
+          <div class="insp-sec-head"><span>备注</span><span class="insp-chevron">▾</span></div>
+          <div class="insp-sec-body">
+            <label>备注
+              <textarea id="fNote" placeholder="凭据、漏洞、横向思路…"></textarea>
+            </label>
+          </div>
+        </div>
+        <div class="insp-section" data-sec="actions">
+          <div class="insp-sec-head"><span>操作</span><span class="insp-chevron">▾</span></div>
+          <div class="insp-sec-body">
+            <div class="btn-row">
+              <button class="btn" id="btnAddChild">＋ 子节点</button>
+              <button class="btn danger" id="btnDelete">删除节点</button>
+            </div>
+          </div>
         </div>
         <div class="meta" id="inspMeta"></div>
       </div>
@@ -120,12 +137,41 @@
     </div>
     <div class="seg" id="topoScope">
       <button class="seg-btn active" type="button" data-scope="mine">我的拓扑</button>
+      <button class="seg-btn" type="button" data-scope="shared">共享拓扑</button>
       <button class="seg-btn" type="button" data-scope="public">公开拓扑</button>
     </div>
     <div class="topo-list" id="topoList"></div>
   </div>
 </div>
 
+<!-- ================= 共享与协作 ================= -->
+<div class="overlay" id="shareOverlay" hidden>
+  <div class="dialog wide share-dialog">
+    <div class="dlg-head"><h2>共享与协作</h2><span class="dlg-close" id="btnCloseShare">×</span></div>
+    <div class="dlg-msg" id="shareMsg"></div>
+    <label class="set-row">
+      <input type="checkbox" id="shareMode"> <span>开启共享模式(允许以下成员 / 分组访问与协同编辑)</span>
+    </label>
+    <div class="share-cols">
+      <div class="share-col">
+        <div class="share-col-title">成员</div>
+        <input class="search" id="shareUserFilter" placeholder="搜索成员" spellcheck="false">
+        <div class="share-list" id="shareUserList"></div>
+      </div>
+      <div class="share-col">
+        <div class="share-col-title">分组</div>
+        <input class="search" id="shareGroupFilter" placeholder="搜索分组" spellcheck="false">
+        <div class="share-list" id="shareGroupList"></div>
+      </div>
+    </div>
+    <div class="dlg-err" id="shareErr"></div>
+    <div class="dlg-actions">
+      <button class="btn" id="btnCancelShare" type="button">取消</button>
+      <button class="btn primary" id="btnSaveShare" type="button">保存共享</button>
+    </div>
+  </div>
+</div>
+
 <!-- 管理员控制台已拆分为独立页面:web/admin.html -->
 
 <!-- ================= 修改密码 ================= -->
@@ -170,10 +216,19 @@
 <!-- 用户菜单置于 body 直属并使用 fixed 定位,避免被顶部栏的 overflow / backdrop-filter 裁剪 -->
 <div class="dropdown" id="userMenu" hidden>
   <div class="dd-name" id="ddName"></div>
+  <div class="dd-item" id="ddWorkspace">我的工作台</div>
   <div class="dd-item" id="ddPwd">修改密码</div>
   <div class="dd-item" id="ddLogout">退出登录</div>
 </div>
 
+<!-- 右下角状态区:当前正在编辑的拓扑 + 在线协作(始终固定右下角) -->
+<div class="corner-status" id="cornerStatus">
+  <div class="topo-current" id="topoCurrent">
+    <i class="tc-dot"></i><span class="tc-label">当前拓扑</span><span class="tc-name">—</span>
+  </div>
+  <div class="collab-bar" id="collabBar" hidden></div>
+</div>
+
 <div class="toast" id="toast"></div>
 
 <script src="web/app.js"></script>
diff --git a/web/style.css b/web/style.css
index 0229a84..af9b4e5 100644
--- a/web/style.css
+++ b/web/style.css
@@ -146,7 +146,7 @@ button{font-family:inherit;}
 /* -------------------------------- 右侧检查器 -------------------------------- */
 .inspector{
   flex:0 0 296px;background:var(--surface);border-left:1px solid var(--border);
-  padding:18px;overflow-y:auto;
+  padding:18px 18px 118px;overflow-y:auto;
 }
 .inspector label{display:block;margin-bottom:14px;font-size:12px;color:var(--ink-500);letter-spacing:.2px;}
 .inspector input,.inspector select,.inspector textarea{
@@ -449,3 +449,74 @@ body.admin-page .view-tools select.search{cursor:pointer;min-width:172px;}
 body.admin-page .cnav-close{display:flex;align-items:center;justify-content:center;gap:8px;}
 body.admin-page .cnav-close .ci{font-size:14px;}
 body.admin-page .empty-row{width:100%;}
+
+/* -------------------------------- 顶部工具栏分组 -------------------------------- */
+.tb-group{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
+
+/* -------------------------------- 协作状态条 -------------------------------- */
+.collab-bar{
+  display:flex;align-items:center;gap:8px;flex:0 0 auto;
+  padding:3px 10px 3px 6px;border:1px solid var(--border);border-radius:999px;background:var(--ink-100);
+}
+.collab-title{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-500);white-space:nowrap;}
+.collab-title .dot{width:7px;height:7px;border-radius:50%;background:var(--ok-fg);box-shadow:0 0 0 3px var(--ok-bg);}
+.collab-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 2px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:12px;color:var(--ink-600);white-space:nowrap;}
+.collab-chip.self{border-color:var(--info-bd);background:var(--info-bg);color:var(--info-fg);}
+.collab-chip .av{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--blue-600);color:#fff;font-size:11px;font-weight:700;font-style:normal;}
+.collab-chip .nm{max-width:84px;overflow:hidden;text-overflow:ellipsis;}
+.collab-more{font-size:12px;color:var(--ink-500);}
+
+/* 右下角状态区:当前拓扑 + 在线协作(始终固定右下角) */
+.corner-status{
+  position:fixed;right:16px;bottom:16px;z-index:35;
+  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
+  max-width:calc(100% - 32px);pointer-events:none;
+}
+.corner-status > *{pointer-events:auto;}
+.topo-current{
+  display:inline-flex;align-items:center;gap:8px;max-width:360px;
+  padding:7px 13px;border:1px solid var(--border);border-radius:999px;
+  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:var(--sh-1);
+  font-size:12.5px;color:var(--ink-700);
+}
+.topo-current .tc-dot{width:7px;height:7px;border-radius:50%;background:var(--blue-500);box-shadow:0 0 0 3px var(--blue-50);flex:0 0 auto;}
+.topo-current.dirty .tc-dot{background:var(--warn-fg);box-shadow:0 0 0 3px var(--warn-bg);}
+.topo-current .tc-label{color:var(--ink-400);flex:0 0 auto;}
+.topo-current .tc-name{font-weight:600;color:var(--ink-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}
+.corner-status .collab-bar{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:var(--sh-1);}
+
+/* -------------------------------- 检查器分区 -------------------------------- */
+.insp-section{border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;background:var(--surface);}
+.insp-sec-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-600);background:var(--ink-100);user-select:none;transition:background var(--t-fast),color var(--t-fast);}
+.insp-sec-head:hover{color:var(--blue-600);}
+.insp-chevron{color:var(--ink-400);font-size:11px;transition:transform var(--t-fast);}
+.insp-section.collapsed .insp-chevron{transform:rotate(-90deg);}
+.insp-sec-body{padding:14px 12px 2px;}
+.insp-section.collapsed .insp-sec-body{display:none;}
+
+/* -------------------------------- 共享弹窗 -------------------------------- */
+.dialog.wide.share-dialog{height:auto;max-height:86vh;}
+.share-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;min-height:0;margin-bottom:8px;}
+.share-col{display:flex;flex-direction:column;min-height:0;border:1px solid var(--border);border-radius:var(--r-md);padding:12px;background:var(--surface);}
+.share-col-title{font-size:12.5px;font-weight:600;color:var(--ink-600);margin-bottom:8px;}
+.share-col .search{width:100%;min-width:0;margin-bottom:10px;}
+.share-list{flex:1;min-height:160px;max-height:44vh;overflow-y:auto;}
+.share-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--ink-700);margin:0 0 2px;}
+.share-item:hover{background:var(--blue-50);}
+.share-item input[type=checkbox]{flex:0 0 auto;width:15px;height:15px;margin:0;accent-color:var(--blue-600);cursor:pointer;}
+.share-item .share-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.share-item .share-perm{flex:0 0 auto;width:auto;margin:0;padding:4px 8px;font-size:12px;border:1px solid var(--ink-300);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-700);cursor:pointer;font-family:inherit;outline:none;}
+.share-item .share-perm:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100);}
+.share-dialog .set-row{margin-bottom:14px;}
+
+@media (max-width:1240px){
+  .btn .lbl{display:none;}
+  .collab-chip .nm{display:none;}
+}
+@media (max-width:900px){
+  .share-cols{grid-template-columns:1fr;}
+}
+
+/* -------------------------------- 通用工具条 -------------------------------- */
+.tools-inline{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:12px;}
+.tab-pane .table-wrap{margin-bottom:0;}
diff --git a/web/user.html b/web/user.html
new file mode 100644
index 0000000..bbec15b
--- /dev/null
+++ b/web/user.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>我的工作台 · 路由拓扑</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="admin-page">
+
+<div class="console" id="console">
+  <!-- ================= 左侧深蓝可收缩侧栏 ================= -->
+  <aside class="console-nav">
+    <div class="console-brand">
+      <div class="logo" id="navLogo">R</div>
+      <div class="cb-text"><b>我的工作台</b><i id="navUser">—</i></div>
+      <button class="cnav-toggle" id="btnCollapseNav" title="收起 / 展开侧栏">☰</button>
+    </div>
+
+    <div class="cnav-item active" data-view="overview"><span class="ci">📊</span><span class="cl">概览</span></div>
+    <div class="cnav-item" data-view="mine"><span class="ci">🗺️</span><span class="cl">我的拓扑</span></div>
+    <div class="cnav-item" data-view="shared"><span class="ci">🤝</span><span class="cl">共享给我</span></div>
+    <div class="cnav-item" data-view="groups"><span class="ci">👥</span><span class="cl">我的分组</span></div>
+
+    <div class="cnav-foot">
+      <div class="cnav-close" id="btnGotoAdmin" hidden><span class="ci">🛠️</span><span class="cl">管理控制台</span></div>
+      <div class="cnav-close" id="btnBackEditor"><span class="ci">←</span><span class="cl">返回拓扑</span></div>
+    </div>
+  </aside>
+
+  <!-- ================= 右侧主区域 ================= -->
+  <main class="console-main">
+
+    <!-- 概览 -->
+    <section class="view" id="view-overview">
+      <div class="view-head"><h2>概览</h2></div>
+      <div class="cards" id="statCards"></div>
+      <div class="split">
+        <div class="panel">
+          <div class="panel-title">我的拓扑 · 最近更新</div>
+          <div class="mini-list" id="recentMine"></div>
+        </div>
+        <div class="panel">
+          <div class="panel-title">共享给我</div>
+          <div class="mini-list" id="recentShared"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 我的拓扑 -->
+    <section class="view" id="view-mine" hidden>
+      <div class="view-head">
+        <h2>我的拓扑</h2>
+        <div class="view-tools">
+          <input class="search" id="mineSearch" placeholder="搜索拓扑名称" spellcheck="false">
+          <input class="search" id="newTopoName" placeholder="新建拓扑名称" spellcheck="false">
+          <select class="search" id="newTopoTemplate"></select>
+          <button class="btn primary" id="btnCreateTopo">＋ 新建</button>
+        </div>
+      </div>
+      <div class="table-wrap">
+        <table class="grid">
+          <thead><tr>
+            <th>名称</th><th>可见性</th><th>共享</th><th>节点 / 连线</th><th>更新时间</th><th>操作</th>
+          </tr></thead>
+          <tbody id="mineRows"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- 共享给我 -->
+    <section class="view" id="view-shared" hidden>
+      <div class="view-head">
+        <h2>共享给我</h2>
+        <div class="view-tools">
+          <input class="search" id="sharedSearch" placeholder="搜索拓扑名称" spellcheck="false">
+        </div>
+      </div>
+      <div class="table-wrap">
+        <table class="grid">
+          <thead><tr>
+            <th>名称</th><th>所有者</th><th>我的权限</th><th>节点 / 连线</th><th>更新时间</th><th>操作</th>
+          </tr></thead>
+          <tbody id="sharedRows"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- 我的分组 -->
+    <section class="view" id="view-groups" hidden>
+      <div class="view-head"><h2>我的分组</h2></div>
+      <div class="table-wrap">
+        <table class="grid">
+          <thead><tr><th>分组名称</th><th>描述</th><th>成员数</th></tr></thead>
+          <tbody id="groupRows"></tbody>
+        </table>
+      </div>
+    </section>
+
+  </main>
+</div>
+
+<!-- ================= 站内确认 / 输入弹窗 ================= -->
+<div class="overlay" id="confirmOverlay" hidden>
+  <div class="dialog">
+    <div class="dlg-head"><h2 id="confirmTitle">请确认</h2><span class="dlg-close" id="confirmClose">×</span></div>
+    <div class="dlg-msg" id="confirmMsg"></div>
+    <label id="confirmFieldWrap" hidden><span id="confirmFieldLabel"></span>
+      <input id="confirmField" type="text" spellcheck="false" autocomplete="off">
+    </label>
+    <div class="dlg-err" id="confirmErr"></div>
+    <div class="dlg-actions">
+      <button class="btn" id="confirmCancel" type="button">取消</button>
+      <button class="btn primary" id="confirmOk" type="button">确定</button>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script src="user.js"></script>
+</body>
+</html>
diff --git a/web/user.js b/web/user.js
new file mode 100644
index 0000000..146d3b5
--- /dev/null
+++ b/web/user.js
@@ -0,0 +1,512 @@
+/* =========================================================================
+   路由拓扑 · 我的工作台(普通用户后台)
+   页面地址:web/user.html,资源相对 web/,API 相对站点根(../index.php)
+   ========================================================================= */
+(function () {
+  'use strict';
+
+  /* ============================================================
+     基础工具
+     ============================================================ */
+  function $(id) { return document.getElementById(id); }
+
+  function esc(s) {
+    return String(s === null || s === undefined ? '' : s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+
+  function qs(obj) {
+    const parts = [];
+    for (const k in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, k) && obj[k] !== '' && obj[k] !== null && obj[k] !== undefined) {
+        parts.push(encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]));
+      }
+    }
+    return parts.length ? ('?' + parts.join('&')) : '';
+  }
+
+  function fmtTime(iso) {
+    if (!iso) { return '—'; }
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) { return String(iso); }
+    const p = function (n) { return n < 10 ? '0' + n : '' + n; };
+    return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) +
+      ' ' + p(d.getHours()) + ':' + p(d.getMinutes());
+  }
+
+  function debounce(fn, ms) {
+    let t = null;
+    return function () {
+      const self = this, args = arguments;
+      clearTimeout(t);
+      t = setTimeout(function () { fn.apply(self, args); }, ms || 260);
+    };
+  }
+
+  /* ============================================================
+     API 客户端(独立页,base = ../index.php)
+     ============================================================ */
+  const API = {
+    req: function (method, path, body) {
+      const opt = { method: method, credentials: 'same-origin', headers: {} };
+      if (body !== undefined) {
+        opt.headers['Content-Type'] = 'application/json';
+        opt.body = JSON.stringify(body);
+      }
+      return fetch('../index.php?r=' + encodeURIComponent('/api' + path), opt).then(function (r) {
+        return r.text().then(function (txt) {
+          let data = null;
+          try { data = txt ? JSON.parse(txt) : null; } catch (e) { data = null; }
+          if (!r.ok || (data && data.ok === false)) {
+            const msg = (data && data.error) ? data.error : ('请求失败 (' + r.status + ')');
+            const err = new Error(msg);
+            err.status = r.status;
+            throw err;
+          }
+          return data || {};
+        });
+      });
+    },
+    me: function () { return this.req('GET', '/me'); },
+    site: function () { return this.req('GET', '/site'); },
+    overview: function () { return this.req('GET', '/overview'); },
+    mygroups: function () { return this.req('GET', '/mygroups'); },
+    listTopos: function () { return this.req('GET', '/topologies'); },
+    createTopo: function (p) { return this.req('POST', '/topologies', p); },
+    renameTopo: function (id, name) { return this.req('PUT', '/topologies/' + encodeURIComponent(id) + '/rename', { name: name }); },
+    setVisibility: function (id, vis) { return this.req('PUT', '/topologies/' + encodeURIComponent(id) + '/permission', { visibility: vis }); },
+    deleteTopo: function (id) { return this.req('DELETE', '/topologies/' + encodeURIComponent(id)); }
+  };
+
+  /* ============================================================
+     提示条 / 站内弹窗
+     ============================================================ */
+  let toastTimer = null;
+  function toast(msg, type) {
+    const el = $('toast');
+    el.textContent = msg;
+    el.className = 'toast' + (type ? (' ' + type) : '');
+    el.classList.add('show');
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(function () { el.classList.remove('show'); }, 2600);
+  }
+
+  function openOverlay(id) { const o = $(id); if (o) { o.hidden = false; } }
+  function closeOverlay(id) { const o = $(id); if (o) { o.hidden = true; } }
+
+  let _dlgResolve = null;
+  let _dlgInput = false;
+  function _dlgFinish(result) {
+    closeOverlay('confirmOverlay');
+    const r = _dlgResolve;
+    _dlgResolve = null;
+    if (r) { r(result); }
+  }
+  function _dlgConfirmOk() {
+    if (_dlgInput) {
+      const v = $('confirmField').value.trim();
+      if (!v) { $('confirmErr').textContent = '请输入内容'; return; }
+      _dlgFinish(v);
+    } else {
+      _dlgFinish(true);
+    }
+  }
+  function _uiDialog(o) {
+    return new Promise(function (resolve) {
+      _dlgResolve = resolve;
+      _dlgInput = !!o.input;
+      $('confirmTitle').textContent = o.title || '请确认';
+      const msg = $('confirmMsg');
+      msg.textContent = o.message || '';
+      msg.hidden = !o.message;
+      const okBtn = $('confirmOk');
+      okBtn.textContent = o.okText || '确定';
+      okBtn.className = 'btn ' + (o.danger ? 'danger' : 'primary');
+      const wrap = $('confirmFieldWrap');
+      const field = $('confirmField');
+      if (o.input) {
+        wrap.hidden = false;
+        $('confirmFieldLabel').textContent = o.input.label || '';
+        field.type = o.input.type || 'text';
+        field.placeholder = o.input.placeholder || '';
+        field.value = o.input.value || '';
+      } else {
+        wrap.hidden = true;
+      }
+      $('confirmErr').textContent = '';
+      openOverlay('confirmOverlay');
+      setTimeout(function () {
+        if (o.input) { field.focus(); field.select(); } else { okBtn.focus(); }
+      }, 30);
+    });
+  }
+  function uiConfirm(message, opts) {
+    opts = opts || {};
+    return _uiDialog({
+      title: opts.title || '请确认', message: message,
+      okText: opts.okText || '确定', danger: !!opts.danger
+    });
+  }
+  function uiPrompt(label, opts) {
+    opts = opts || {};
+    return _uiDialog({
+      title: opts.title || '请输入', message: opts.message || '',
+      okText: opts.okText || '确定',
+      input: { label: label, placeholder: opts.placeholder || '', type: opts.type || 'text', value: opts.value || '' }
+    });
+  }
+
+  /* ============================================================
+     渲染小工具
+     ============================================================ */
+  function statCard(label, num, cls) {
+    return '<div class="card ' + (cls || '') + '">' +
+      '<div class="num">' + esc(num === null || num === undefined ? 0 : num) + '</div>' +
+      '<div class="lbl">' + esc(label) + '</div></div>';
+  }
+  function miniRow(time, content) {
+    return '<div class="mini-row"><span class="t">' + esc(time) + '</span><span class="c">' + content + '</span></div>';
+  }
+  function emptyRow(msg) { return '<div class="empty-row">' + esc(msg) + '</div>'; }
+
+  /* ============================================================
+     状态
+     ============================================================ */
+  const state = {
+    view: 'overview',
+    currentUser: null,
+    all: [],
+    mygroups: [],
+    mine: { q: '' },
+    shared: { q: '' }
+  };
+
+  function isMine(t) { return state.currentUser && t.ownerId === state.currentUser.id; }
+  function isShared(t) { return !!t.sharedWithMe; }
+
+  function handleErr(err) {
+    toast((err && err.message) || '操作失败', 'err');
+    if (err && (err.status === 401 || err.status === 403)) {
+      setTimeout(function () { window.location.href = '../index.php'; }, 1200);
+    }
+  }
+
+  /* ============================================================
+     拓扑模板
+     ============================================================ */
+  function tplDemo() {
+    return {
+      nodes: [
+        { id: 'n1', label: '192.168.1.0/24', type: 'net',    x: 120, y: 130, status: 'confirmed', ports: '', note: '办公网段' },
+        { id: 'n2', label: '192.168.1.10',  type: 'host',   x: 120, y: 232, status: 'owned',     ports: '80, 443', note: 'Web 服务器', parentId: 'n1' },
+        { id: 'n3', label: '10.10.10.0/24', type: 'net',    x: 430, y: 100, status: 'confirmed', ports: '', note: '内网核心区' },
+        { id: 'n4', label: 'dc.corp.local', type: 'domain', x: 430, y: 226, status: 'unknown',   ports: '389, 445', note: '域控' },
+        { id: 'n5', label: '172.16.0.0/16', type: 'net',    x: 740, y: 168, status: 'unknown',   ports: '', note: '未知区域' }
+      ],
+      edges: [
+        { id: 'e1', from: 'n1', to: 'n3', label: '' },
+        { id: 'e2', from: 'n1', to: 'n4', label: '' },
+        { id: 'e3', from: 'n3', to: 'n5', label: '' },
+        { id: 'e4', from: 'n2', to: 'n3', label: '' }
+      ]
+    };
+  }
+
+  const TEMPLATES = {
+    blank: { label: '空白画布',       data: function () { return { nodes: [], edges: [] }; } },
+    demo:  { label: '示例:小型内网', data: tplDemo }
+  };
+
+  function initTemplates() {
+    const sel = $('newTopoTemplate');
+    if (!sel) { return; }
+    sel.innerHTML = Object.keys(TEMPLATES).map(function (k) {
+      return '<option value="' + k + '">' + esc(TEMPLATES[k].label) + '</option>';
+    }).join('');
+  }
+
+  /* ============================================================
+     视图切换
+     ============================================================ */
+  function switchView(name) {
+    state.view = name;
+    ['overview', 'mine', 'shared', 'groups'].forEach(function (v) {
+      const el = $('view-' + v);
+      if (el) { el.hidden = (v !== name); }
+    });
+    Array.prototype.forEach.call(document.querySelectorAll('.cnav-item'), function (it) {
+      it.classList.toggle('active', it.getAttribute('data-view') === name);
+    });
+    if (name === 'overview') { loadOverview(); }
+    else if (name === 'mine') { fetchTopos().then(renderMine).catch(handleErr); }
+    else if (name === 'shared') { fetchTopos().then(renderShared).catch(handleErr); }
+    else if (name === 'groups') { loadGroups(); }
+  }
+
+  function fetchTopos() {
+    return API.listTopos().then(function (r) {
+      state.all = r.topologies || [];
+      return state.all;
+    });
+  }
+
+  /* ============================================================
+     概览
+     ============================================================ */
+  function loadOverview() {
+    Promise.all([API.overview(), fetchTopos(), API.mygroups()]).then(function (res) {
+      const ov = res[0].overview || {};
+      state.mygroups = (res[2] && res[2].groups) || [];
+      $('statCards').innerHTML = [
+        statCard('我的拓扑', ov.myTopo, ''),
+        statCard('共享给我', ov.sharedToMe, 'accent'),
+        statCard('我的分组', ov.myGroups, ''),
+        statCard('公开拓扑', ov.publicTopo, 'green')
+      ].join('');
+
+      const mine = state.all.filter(isMine).slice(0, 6);
+      $('recentMine').innerHTML = mine.length ? mine.map(function (t) {
+        return miniRow(fmtTime(t.updatedAt), esc(t.name));
+      }).join('') : emptyRow('暂无拓扑');
+
+      const shared = state.all.filter(isShared).slice(0, 6);
+      $('recentShared').innerHTML = shared.length ? shared.map(function (t) {
+        return miniRow(fmtTime(t.updatedAt), esc(t.name + ' · ' + (t.ownerName || '')));
+      }).join('') : emptyRow('暂无共享');
+    }).catch(handleErr);
+  }
+
+  /* ============================================================
+     我的拓扑
+     ============================================================ */
+  function mineActions(t) {
+    return '<button class="btn" data-act="open" data-id="' + esc(t.id) + '">打开</button>' +
+      '<button class="btn" data-act="share" data-id="' + esc(t.id) + '">共享</button>' +
+      '<button class="btn" data-act="rename" data-id="' + esc(t.id) + '" data-name="' + esc(t.name) + '">重命名</button>' +
+      '<button class="btn" data-act="vis" data-id="' + esc(t.id) + '" data-vis="' +
+        (t.visibility === 'public' ? 'private' : 'public') + '">' +
+        (t.visibility === 'public' ? '设为私有' : '设为公开') + '</button>' +
+      '<button class="btn danger" data-act="del" data-id="' + esc(t.id) + '" data-name="' + esc(t.name) + '">删除</button>';
+  }
+
+  function renderMine() {
+    const q = state.mine.q.toLowerCase();
+    const rows = state.all.filter(isMine).filter(function (t) {
+      return !q || (t.name || '').toLowerCase().indexOf(q) >= 0;
+    });
+    $('mineRows').innerHTML = rows.length ? rows.map(function (t) {
+      const vis = t.visibility === 'public'
+        ? '<span class="badge public">公开</span>'
+        : '<span class="badge private">私有</span>';
+      const share = t.shareMode
+        ? '<span class="badge owner">已共享</span>'
+        : '<span class="badge">未共享</span>';
+      return '<tr>' +
+        '<td>' + esc(t.name) + '</td>' +
+        '<td>' + vis + '</td>' +
+        '<td>' + share + '</td>' +
+        '<td>' + esc(t.nodeCount) + ' / ' + esc(t.edgeCount) + '</td>' +
+        '<td>' + esc(fmtTime(t.updatedAt)) + '</td>' +
+        '<td class="actions">' + mineActions(t) + '</td>' +
+        '</tr>';
+    }).join('') : '<tr><td colspan="6" class="empty-row">暂无拓扑</td></tr>';
+  }
+
+  function onMineRowClick(e) {
+    const b = e.target.closest('button[data-act]');
+    if (!b) { return; }
+    const act = b.getAttribute('data-act');
+    const id = b.getAttribute('data-id');
+
+    if (act === 'open') {
+      window.location.href = '../index.php?topo=' + encodeURIComponent(id);
+    } else if (act === 'share') {
+      window.location.href = '../index.php?topo=' + encodeURIComponent(id) + '&share=1';
+    } else if (act === 'rename') {
+      const curName = b.getAttribute('data-name');
+      uiPrompt('新名称', {
+        title: '重命名拓扑', message: '为拓扑「' + curName + '」设置新名称(最多 60 个字符)。',
+        placeholder: '例如:某内网横向拓扑', value: curName, okText: '保存'
+      }).then(function (v) {
+        if (v === null) { return; }
+        v = String(v).trim();
+        if (!v || v === curName) { return; }
+        API.renameTopo(id, v).then(function () {
+          toast('已重命名', 'ok');
+          fetchTopos().then(renderMine).catch(handleErr);
+        }).catch(handleErr);
+      });
+    } else if (act === 'vis') {
+      const vis = b.getAttribute('data-vis');
+      const label = (vis === 'public' ? '公开' : '私有');
+      uiConfirm('确认将该拓扑设为「' + label + '」?', { title: '修改可见性' }).then(function (ok) {
+        if (!ok) { return; }
+        API.setVisibility(id, vis).then(function () {
+          toast('可见性已更新', 'ok');
+          fetchTopos().then(renderMine).catch(handleErr);
+        }).catch(handleErr);
+      });
+    } else if (act === 'del') {
+      uiConfirm('确认删除拓扑「' + b.getAttribute('data-name') + '」?该操作不可恢复。',
+        { title: '删除拓扑', danger: true, okText: '删除' }).then(function (ok) {
+        if (!ok) { return; }
+        API.deleteTopo(id).then(function () {
+          toast('拓扑已删除', 'ok');
+          fetchTopos().then(renderMine).catch(handleErr);
+        }).catch(handleErr);
+      });
+    }
+  }
+
+  function createNewTopo() {
+    const name = $('newTopoName').value.trim();
+    if (!name) { toast('请输入拓扑名称', 'warn'); return; }
+    const sel = $('newTopoTemplate');
+    const tpl = (sel && TEMPLATES[sel.value]) ? TEMPLATES[sel.value] : TEMPLATES.blank;
+    const data = tpl.data() || { nodes: [], edges: [] };
+    API.createTopo({ name: name, nodes: data.nodes || [], edges: data.edges || [] }).then(function (r) {
+      $('newTopoName').value = '';
+      toast('已创建:' + name, 'ok');
+      window.location.href = '../index.php?topo=' + encodeURIComponent(r.topology.id);
+    }).catch(handleErr);
+  }
+
+  /* ============================================================
+     共享给我
+     ============================================================ */
+  function renderShared() {
+    const q = state.shared.q.toLowerCase();
+    const rows = state.all.filter(isShared).filter(function (t) {
+      return !q || (t.name || '').toLowerCase().indexOf(q) >= 0;
+    });
+    $('sharedRows').innerHTML = rows.length ? rows.map(function (t) {
+      const perm = t.permission === 'edit'
+        ? '<span class="badge owner">可编辑</span>'
+        : '<span class="badge ro">只读</span>';
+      return '<tr>' +
+        '<td>' + esc(t.name) + '</td>' +
+        '<td>' + esc(t.ownerName || '—') + '</td>' +
+        '<td>' + perm + '</td>' +
+        '<td>' + esc(t.nodeCount) + ' / ' + esc(t.edgeCount) + '</td>' +
+        '<td>' + esc(fmtTime(t.updatedAt)) + '</td>' +
+        '<td class="actions"><button class="btn" data-act="open" data-id="' + esc(t.id) + '">打开</button></td>' +
+        '</tr>';
+    }).join('') : '<tr><td colspan="6" class="empty-row">暂无共享拓扑</td></tr>';
+  }
+
+  function onSharedRowClick(e) {
+    const b = e.target.closest('button[data-act]');
+    if (!b) { return; }
+    if (b.getAttribute('data-act') === 'open') {
+      window.location.href = '../index.php?topo=' + encodeURIComponent(b.getAttribute('data-id'));
+    }
+  }
+
+  /* ============================================================
+     我的分组
+     ============================================================ */
+  function loadGroups() {
+    API.mygroups().then(function (r) {
+      state.mygroups = r.groups || [];
+      renderGroups();
+    }).catch(handleErr);
+  }
+
+  function renderGroups() {
+    const gs = state.mygroups || [];
+    $('groupRows').innerHTML = gs.length ? gs.map(function (g) {
+      return '<tr><td>' + esc(g.name) + '</td><td>' + esc(g.description || '—') +
+        '</td><td>' + esc(g.memberCount) + '</td></tr>';
+    }).join('') : '<tr><td colspan="3" class="empty-row">你还没有加入任何分组</td></tr>';
+  }
+
+  /* ============================================================
+     品牌
+     ============================================================ */
+  function applyBrand(site) {
+    if (!site) { return; }
+    if (site.name) { document.title = site.name + ' · 我的工作台'; }
+    const el = $('navLogo');
+    if (el && site.logo) {
+      el.innerHTML = '';
+      const img = document.createElement('img');
+      img.src = site.logo;
+      img.alt = '';
+      el.appendChild(img);
+      el.classList.add('has-img');
+    }
+  }
+
+  /* ============================================================
+     事件绑定
+     ============================================================ */
+  function bindEvents() {
+    Array.prototype.forEach.call(document.querySelectorAll('.cnav-item'), function (it) {
+      it.addEventListener('click', function () { switchView(it.getAttribute('data-view')); });
+    });
+
+    $('btnCollapseNav').addEventListener('click', function () {
+      $('console').classList.toggle('nav-collapsed');
+    });
+    $('btnBackEditor').addEventListener('click', function () {
+      window.location.href = '../index.php';
+    });
+    $('btnGotoAdmin').addEventListener('click', function () {
+      window.location.href = 'admin.html';
+    });
+
+    $('mineSearch').addEventListener('input', debounce(function () {
+      state.mine.q = this.value.trim(); renderMine();
+    }));
+    $('sharedSearch').addEventListener('input', debounce(function () {
+      state.shared.q = this.value.trim(); renderShared();
+    }));
+
+    $('btnCreateTopo').addEventListener('click', createNewTopo);
+    $('newTopoName').addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') { e.preventDefault(); createNewTopo(); }
+    });
+
+    $('mineRows').addEventListener('click', onMineRowClick);
+    $('sharedRows').addEventListener('click', onSharedRowClick);
+
+    $('confirmOk').addEventListener('click', _dlgConfirmOk);
+    $('confirmCancel').addEventListener('click', function () { _dlgFinish(false); });
+    $('confirmClose').addEventListener('click', function () { _dlgFinish(false); });
+    $('confirmField').addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') { e.preventDefault(); _dlgConfirmOk(); }
+    });
+    $('confirmOverlay').addEventListener('click', function (e) {
+      if (e.target === this) { _dlgFinish(false); }
+    });
+  }
+
+  /* ============================================================
+     启动
+     ============================================================ */
+  function boot() {
+    bindEvents();
+    API.me().then(function (d) {
+      const u = d.user;
+      if (!u) {
+        window.location.href = '../index.php';
+        return;
+      }
+      state.currentUser = u;
+      $('navUser').textContent = u.username + ' · ' + (u.role === 'admin' ? '管理员' : '普通用户');
+      if (u.role === 'admin') { $('btnGotoAdmin').hidden = false; }
+      initTemplates();
+      API.site().then(applyBrand).catch(function () { /* 忽略:回退默认品牌 */ });
+      switchView('overview');
+    }).catch(function () {
+      window.location.href = '../index.php';
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+})();