fix: 为兼容移动端，暂时删除了身份面板的resize

Author: FreecellRaid

src/components/panels/IdentityPanel.vue

@@ -15,30 +15,17 @@
         </div>
 
         <div class="panel-block-list">
-            <div class="list-header" :style="gridStyle">
+            <div class="list-header">
                 <span class="header-cell">名称/账号</span>
-                <div
-                    class="col-resize-handle"
-                    @mousedown="startColResize(0, $event)"
-                ></div>
                 <span class="header-cell">发言</span>
-                <div
-                    class="col-resize-handle"
-                    @mousedown="startColResize(1, $event)"
-                ></div>
                 <span class="header-cell">身份</span>
-                <div
-                    class="col-resize-handle"
-                    @mousedown="startColResize(2, $event)"
-                ></div>
                 <span class="header-cell">染色</span>
             </div>
 
             <div
                 v-for="item in identityList"
                 :key="item.id"
                 class="identity-item"
-                :style="gridStyle"
             >
                 <div class="col-name" @dblclick="startEdit(item.id)">
                     <input
@@ -53,11 +40,9 @@
                         <span class="text">{{ item.id }}</span>
                     </div>
                 </div>
-                <div class="col-divider"></div>
                 <div class="col-count">
                     <span class="count">{{ item.msgCount }}</span>
                 </div>
-                <div class="col-divider"></div>
 
                 <div class="col-role">
                     <select
@@ -76,7 +61,6 @@
                         <option value="unknown">其他</option>
                     </select>
                 </div>
-                <div class="col-divider"></div>
 
                 <div class="col-color">
                     <div
@@ -106,11 +90,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch } from 'vue';
+import { ref, computed } from 'vue';
 import { IdCard, UserRound } from '@lucide/vue';
 import { useStyleStore } from '@/stores/styleStore';
 import { useLogStore } from '@/stores/logStore';
-import { useUiStore, PANEL_MAX_WIDTH } from '@/stores/uiStore';
 import { useHistoryStore } from '@/stores/historyStore';
 import { useLogEditorStore } from '@/stores/editorStore';
 import type { RoleType } from '@/types/log';
@@ -132,7 +115,6 @@ interface IdentityListItem {
 
 const styleStore = useStyleStore();
 const logStore = useLogStore();
-const uiStore = useUiStore();
 const historyStore = useHistoryStore();
 const logEditorStore = useLogEditorStore();
 const windowStore = useWindowStore();
@@ -251,198 +233,20 @@ function getRoleFromSelectEvent(event: Event): RoleType {
 const vFocus = {
     mounted: (el: HTMLElement) => el.focus(),
 };
-
-// --- 列宽拖拽 ---
-// 4 列总宽始终 = 面板可用宽度，拖手柄是相邻两列此消彼长
-// Grid 7 格: 名称 | handle | 发言 | handle | 身份 | handle | 染色
-
-const MIN_COL_WIDTH = 30;
-const HANDLE_COUNT = 3;
-const HANDLE_WIDTH = 4; // 与 CSS .col-resize-handle / .col-divider 的 width 一致
-const ROW_PADDING_X = 8; // 与 CSS .list-header / .identity-item 的 padding 水平值一致
-const GRID_OVERHEAD = HANDLE_COUNT * HANDLE_WIDTH + ROW_PADDING_X * 2;
-
-// 身份列的最小宽度：需容纳最宽选项 "主持人"（3 CJK + select padding/arrow）
-const MIN_ROLE_WIDTH = 65;
-// 染色列固定宽度（色块 20px + 余量）
-const COLOR_COL_WIDTH = 36;
-
-/** 面板可用于 4 列的净宽度 */
-function availableColSpace(): number {
-    return uiStore.leftPanelWidth - GRID_OVERHEAD;
-}
-
-/** 列总宽 */
-function totalColWidth(): number {
-    return colWidths.reduce((s, w) => s + w, 0);
-}
-
-/** 列总宽 + 开销 = 面板所需最小宽度 */
-function requiredPanelWidth(): number {
-    return totalColWidth() + GRID_OVERHEAD;
-}
-
-/** 用隐藏 canvas 测量文本像素宽度 */
-const measureCanvas = document.createElement('canvas');
-function measureText(text: string, font: string): number {
-    const ctx = measureCanvas.getContext('2d')!;
-    ctx.font = font;
-    return Math.ceil(ctx.measureText(text).width);
-}
-
-/** 根据当前数据计算各列理想宽度 */
-function calcIdealColWidths(
-    items: IdentityListItem[],
-): [number, number, number, number] {
-    if (items.length === 0) {
-        return [80, 40, MIN_ROLE_WIDTH, COLOR_COL_WIDTH];
-    }
-
-    // 名称列：最长名称文字宽度 + 余量
-    const nameFont = '13px sans-serif';
-    const maxNameW = items.reduce(
-        (max, item) => Math.max(max, measureText(item.id, nameFont)),
-        0,
-    );
-    const nameCol = Math.max(MIN_COL_WIDTH, maxNameW + 8);
-
-    // 发言列：最大数字宽度 + badge padding
-    const countFont = '10px sans-serif';
-    const maxCountW = items.reduce(
-        (max, item) =>
-            Math.max(max, measureText(String(item.msgCount), countFont)),
-        0,
-    );
-    const countCol = Math.max(MIN_COL_WIDTH, maxCountW + 16); // badge padding 2×6 + 余量
-
-    // 身份列：固定最小宽度（select 下拉框需要容纳最宽选项）
-    const roleCol = MIN_ROLE_WIDTH;
-
-    return [nameCol, countCol, roleCol, COLOR_COL_WIDTH];
-}
-
-// 初始化列宽
-const colWidths = reactive([80, 40, MIN_ROLE_WIDTH, COLOR_COL_WIDTH]);
-
-// 数据变化时自动调整列宽和侧边栏
-watch(
-    identityList,
-    (items) => {
-        const [nameW, countW, roleW, colorW] = calcIdealColWidths(items);
-        const idealTotal = nameW + countW + roleW + colorW;
-        const available = availableColSpace();
-
-        if (idealTotal <= available) {
-            // 空间足够：各列用理想宽度，名称列吃掉剩余
-            colWidths[1] = countW;
-            colWidths[2] = roleW;
-            colWidths[3] = colorW;
-            colWidths[0] = available - countW - roleW - colorW;
-        } else {
-            // 空间不够：优先保持当前用户设定的侧边栏宽度
-            colWidths[1] = countW;
-            colWidths[2] = roleW;
-            colWidths[3] = colorW;
-            const remainingForName = available - (countW + roleW + colorW);
-
-            if (remainingForName >= MIN_COL_WIDTH) {
-                // 只要还能满足最小宽度，就直接在内部压缩名称列，不推侧边栏
-                colWidths[0] = remainingForName;
-            } else {
-                colWidths[0] = MIN_COL_WIDTH;
-                const minimalNeeded =
-                    MIN_COL_WIDTH + countW + roleW + colorW + GRID_OVERHEAD;
-                if (uiStore.leftPanelWidth < minimalNeeded) {
-                    uiStore.leftPanelWidth = Math.min(
-                        PANEL_MAX_WIDTH,
-                        minimalNeeded,
-                    );
-                }
-            }
-        }
-    },
-    { immediate: true },
-);
-
-const gridStyle = computed(() => ({
-    gridTemplateColumns: colWidths
-        .map((w) => `${w}px`)
-        .join(` ${HANDLE_WIDTH}px `),
-}));
-
-/** 拖拽列手柄：左列和右列此消彼长，触底后推宽侧边栏 */
-function startColResize(colIndex: number, e: MouseEvent) {
-    e.preventDefault();
-    const startX = e.clientX;
-    const startLeft = colWidths[colIndex];
-    const startRight = colWidths[colIndex + 1];
-    const startPanelWidth = uiStore.leftPanelWidth;
-
-    // 身份列(index 2)有更高的最小宽度
-    const minLeft = MIN_COL_WIDTH;
-    const minRight = colIndex + 1 === 2 ? MIN_ROLE_WIDTH : MIN_COL_WIDTH;
-
-    function onMouseMove(ev: MouseEvent) {
-        const delta = ev.clientX - startX;
-        const newLeft = Math.max(minLeft, startLeft + delta);
-        const newRight = startRight - delta;
-
-        if (newRight >= minRight) {
-            colWidths[colIndex] = newLeft;
-            colWidths[colIndex + 1] = newRight;
-        } else {
-            // 右列触底，推宽侧边栏
-            colWidths[colIndex] = newLeft;
-            colWidths[colIndex + 1] = minRight;
-            const needed = requiredPanelWidth();
-            uiStore.leftPanelWidth = Math.min(
-                PANEL_MAX_WIDTH,
-                Math.max(startPanelWidth, needed),
-            );
-        }
-
-        // 反向拖时缩回侧边栏
-        if (delta < 0 && uiStore.leftPanelWidth > startPanelWidth) {
-            const needed = requiredPanelWidth();
-            if (needed < uiStore.leftPanelWidth) {
-                uiStore.leftPanelWidth = Math.max(startPanelWidth, needed);
-            }
-        }
-    }
-
-    function onMouseUp() {
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-    }
-
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-}
-
-// 侧边栏宽度变化时，名称列（第一列）吸收差值
-watch(
-    () => uiStore.leftPanelWidth,
-    () => {
-        const diff = availableColSpace() - totalColWidth();
-        if (diff !== 0) {
-            colWidths[0] = Math.max(MIN_COL_WIDTH, colWidths[0] + diff);
-        }
-    },
-);
 </script>
 
 <style scoped>
-/* --- 共享 grid 布局 (7格: col handle col handle col handle col) --- */
 .list-header,
 .identity-item {
     display: grid;
-    /* gridTemplateColumns 由 :style="gridStyle" 动态设置 */
+    grid-template-columns:
+        minmax(0, 1fr)
+        clamp(36px, 14%, 56px)
+        clamp(58px, 24%, 82px)
+        clamp(34px, 12%, 44px);
     align-items: center;
-    padding: 4px 8px;
+    column-gap: 8px;
+    padding: 4px 10px;
 }
 
 .list-header {
@@ -470,37 +274,6 @@ watch(
     background-color: var(--hover-bg);
 }
 
-/* --- 列拖拽手柄 (表头) --- */
-.col-resize-handle {
-    width: 4px;
-    height: 100%;
-    cursor: col-resize;
-    position: relative;
-}
-
-.col-resize-handle::after {
-    content: '';
-    position: absolute;
-    top: 25%;
-    bottom: 25%;
-    left: 1px;
-    width: 1px;
-    background-color: var(--border-color);
-    transition: background-color 0.15s;
-}
-
-.col-resize-handle:hover::after {
-    left: 0;
-    width: 4px;
-    background-color: var(--active-accent);
-    border-radius: 2px;
-}
-
-/* --- 数据行列分隔 (纯视觉对齐, 不可拖) --- */
-.col-divider {
-    width: 4px;
-}
-
 /* --- 各列样式 --- */
 .col-name {
     display: flex;
@@ -514,15 +287,18 @@ watch(
     align-items: center;
     justify-content: center;
     overflow: hidden;
+    min-width: 0;
 }
 
 .col-role {
     overflow: hidden;
+    min-width: 0;
 }
 
 .col-color {
     display: flex;
     justify-content: center;
+    min-width: 0;
 }
 
 .name-display {
@@ -543,11 +319,15 @@ watch(
 
 .count {
     font-size: 10px;
+    min-width: 0;
+    max-width: 100%;
     padding: 2px 6px;
     background: var(--bg-secondary);
     border-radius: 10px;
     color: var(--text-muted);
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .name-input {