refactor(V0.2): 看板卡片左列布局 / 列表负责人右移 / 把手再收窄

- 看板卡片: 状态点与 ⋯ 竖排移到卡片左侧, 负责人+成员靠右, 标题独占中间
- 列表行: 负责人从第二行元信息移到行右侧 (⋯ 左边)
- ⠿ 把手: 宽度收到约 10px, 负外距悬进卡片内边距, 基本不占横向空间

src/components/task/TaskCard.jsx

@@ -20,8 +20,8 @@ export default function TaskCard({
       onClick={onClick}
       {...(bindDrag ? bindDrag(task) : {})}
     >
-      <div className="brow1">
+      {/* 左侧竖排: 状态点 + ⋯ */}
-        <span className="btitle">{task.title}</span>
+      <div className="bcard-left">
         <span
           className="bstat"
           onClick={(e) => { e.stopPropagation(); onToggle?.(task) }}
@@ -30,15 +30,6 @@ export default function TaskCard({
         >
           <StatusDot status={task.status} />
         </span>
-      </div>
-
-      <div className="bmeta">
-        <span className={`bassignee${task.assignee ? '' : ' none'}`}>
-          {task.assignee?.name || '未指派'}
-        </span>
-        {task.members?.length > 0 && (
-          <span className="bmembers">+ {task.members.map((m) => m.name).join('、')}</span>
-        )}
         {onMore && (
           <span
             className="bmore-btn"
@@ -48,19 +39,34 @@ export default function TaskCard({
         )}
       </div>
 
-      {shown.map((c) => (
+      <div className="bcard-body">
-        <div
+        <div className="brow1">
-          key={c.id}
+          <span className="btitle">{task.title}</span>
-          className={`bsub${c.status === 'done' ? ' done' : ''}`}
-          onClick={(e) => { e.stopPropagation(); onToggleSub?.(c) }}
-          onPointerDown={(e) => e.stopPropagation()}
-        >
-          <span className="sbox" />
-          <span className="stitle">{c.title}</span>
-          <StatusDot status={c.status} />
         </div>
-      ))}
+
-      {rest > 0 && <div className="bmore">+{rest} 个子任务</div>}
+        <div className="bmeta">
+          <span className={`bassignee${task.assignee ? '' : ' none'}`}>
+            {task.assignee?.name || '未指派'}
+          </span>
+          {task.members?.length > 0 && (
+            <span className="bmembers">+ {task.members.map((m) => m.name).join('、')}</span>
+          )}
+        </div>
+
+        {shown.map((c) => (
+          <div
+            key={c.id}
+            className={`bsub${c.status === 'done' ? ' done' : ''}`}
+            onClick={(e) => { e.stopPropagation(); onToggleSub?.(c) }}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            <span className="sbox" />
+            <span className="stitle">{c.title}</span>
+            <StatusDot status={c.status} />
+          </div>
+        ))}
+        {rest > 0 && <div className="bmore">+{rest} 个子任务</div>}
+      </div>
     </div>
   )
 }

src/components/task/TaskRow.jsx

@@ -51,15 +51,15 @@ export default function TaskRow({
               <div className="task-meta">
                 <StatusDot status={task.status} />
                 <span>{statusLabel(task.status)}</span>
-                <span className={`assignee${task.assignee ? '' : ' none'}`}>
-                  {task.assignee?.name || '未指派'}
-                </span>
                 {task.members?.length > 0 && (
                   <span className="members">+ {task.members.map((m) => m.name).join('、')}</span>
                 )}
               </div>
             </div>
             <div className="task-right">
+              <span className={`assignee${task.assignee ? '' : ' none'}`}>
+                {task.assignee?.name || '未指派'}
+              </span>
               <span
                 className="more"
                 onClick={(e) => { e.stopPropagation(); onMore?.(task) }}

src/styles/globals.css

@@ -682,8 +682,8 @@ body.me-safe-top .app-safe-top { height: 0; }
    指针流不会被滚动抢占取消, 是 Android WebView 上唯一可靠的拖动入口 */
 .grip {
   touch-action: none; -webkit-user-select: none; user-select: none;
-  color: #c2c7cf; font-size: 12px; line-height: 1;
+  color: #c2c7cf; font-size: 10px; line-height: 1;
-  padding: 10px 3px; margin: -6px 0; min-width: 20px; min-height: 28px;
+  padding: 10px 1px; margin: -6px -2px; min-width: 8px; min-height: 26px;
   display: inline-flex; align-items: center; justify-content: center;
   cursor: grab; flex-shrink: 0; align-self: center;
 }
@@ -1002,7 +1002,9 @@ body.me-safe-top .app-safe-top { height: 0; }
 .task-meta .assignee { font-size: 12px; font-weight: 600; color: var(--color-text); }
 .task-meta .assignee.none { color: #b8bcc4; font-weight: 400; }
 .task-meta .members { font-size: 10.5px; color: #a7adb6; }
-.task-right { display: flex; align-items: center; flex-shrink: 0; }
+.task-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+.task-right .assignee { font-size: 12px; font-weight: 600; color: var(--color-text); }
+.task-right .assignee.none { color: #b8bcc4; font-weight: 400; }
 .more { color: #c2c7cf; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
 .sub-row {
   display: flex; align-items: flex-start; gap: 8px; background: #fff; border-radius: 8px;
@@ -1045,12 +1047,16 @@ body.me-safe-top .app-safe-top { height: 0; }
 .bcard {
   background: #fff; border-radius: 8px; padding: 9px 10px;
   box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer; flex-shrink: 0;
+  display: flex; gap: 7px; align-items: flex-start;
 }
+/* 左侧竖排操作列: 状态点 + ⋯ */
+.bcard-left { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; padding-top: 1px; }
+.bcard-body { flex: 1; min-width: 0; }
 .bcard.hl { outline: 2px solid var(--color-primary); outline-offset: 1px; }
 .brow1 { display: flex; align-items: flex-start; gap: 6px; }
 .btitle { flex: 1; font-size: 12.5px; font-weight: 600; line-height: 1.45; word-break: break-word; }
 .bstat { display: flex; align-items: center; padding: 2px; cursor: pointer; }
-.bmeta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; }
+.bmeta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; font-size: 10.5px; }
 .bassignee { font-size: 11px; font-weight: 600; color: #4a5160; }
 .bassignee.none { color: #b8bcc4; font-weight: 400; }
 .bmembers { font-size: 10px; color: #a7adb6; }
@@ -1202,7 +1208,8 @@ textarea.inp { resize: vertical; }
 .seg div.on { background: #fff; color: var(--color-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
 
 /* ---- 看板卡片 ⋯ 菜单入口 ---- */
-.bmore-btn { margin-left: auto; color: #c2c7cf; font-size: 14px; line-height: 1; padding: 2px 4px; cursor: pointer; }
+.bmore-btn { color: #c2c7cf; font-size: 14px; line-height: 1; padding: 2px 4px; cursor: pointer; }
+.bcard-left .bmore-btn { padding: 0 4px; }
 
 /* ---- ActionSheet 标题 (任务 ⋯ 菜单) ---- */
 .as-extra { padding: 4px 0 8px; }