@yolk_vat-y/dsh-project-memory 0.4.2 → 0.4.4

package/src/client/TaskComponents.tsx

@@ -0,0 +1,341 @@
+/**
+ * Task Panel Presentational 组件 — MiniBar（折叠迷你条）与 TaskCard（任务卡）。
+ * 纯渲染 + 卡片局部行内编辑/拖拽状态，动作经 props 回调交给容器（TaskPanel.tsx）。
+ */
+import { useRef, useState } from 'react'
+import {
+  Button,
+  IconChevronDownOutline14,
+  IconChevronUpOutline14,
+  IconCheckOutline16,
+  IconPlayOutline16,
+  IconFolderOpenOutline16,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { createTranslate } from './locales.ts'
+import { useTaskDrag } from './task-hooks.ts'
+import { type Task, type TaskStep } from './task-data-store.ts'
+import css from './TaskPanel.module.css'
+
+function timeAgo(iso?: string) {
+  if (!iso) return ''
+  const diff = Date.now() - new Date(iso).getTime()
+  const m = Math.floor(diff / 60000)
+  if (m < 1) return '刚刚'
+  if (m < 60) return `${m}分钟前`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h}小时前`
+  return `${Math.floor(h / 24)}天前`
+}
+
+function StepIcon({ status }: { status: TaskStep['status'] }) {
+  if (status === 'completed') return <IconCheckOutline16 className={css.stepDone} />
+  if (status === 'in_progress') return <IconPlayOutline16 className={css.stepRun} />
+  return <span className={css.stepPending} />
+}
+
+interface MiniBarProps {
+  label: string
+  hint: string
+  position: { x: number; y: number }
+  theme: string
+  onMove: (pos: { x: number; y: number }) => void
+  open: () => void
+}
+
+export function MiniBar({ label, hint, position, theme, onMove, open }: MiniBarProps) {
+  const barRef = useRef<HTMLDivElement>(null)
+  const down = useRef<{ dx: number; dy: number; sx: number; sy: number; moved: boolean } | null>(null)
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 0) return
+    const rect = barRef.current?.getBoundingClientRect()
+    if (!rect) return
+    down.current = { dx: e.clientX - rect.left, dy: e.clientY - rect.top, sx: e.clientX, sy: e.clientY, moved: false }
+    const onMoveEv = (ev: MouseEvent) => {
+      const d = down.current
+      if (!d) return
+      if (!d.moved && Math.abs(ev.clientX - d.sx) + Math.abs(ev.clientY - d.sy) > 4) d.moved = true
+      if (d.moved) {
+        const w = barRef.current?.offsetWidth ?? 260
+        const h = barRef.current?.offsetHeight ?? 34
+        const x = Math.max(8, Math.min(window.innerWidth - w - 8, ev.clientX - d.dx))
+        const y = Math.max(8, Math.min(window.innerHeight - h - 8, ev.clientY - d.dy))
+        onMove({ x, y })
+      }
+    }
+    const onUpEv = () => {
+      const d = down.current
+      down.current = null
+      window.removeEventListener('mousemove', onMoveEv)
+      window.removeEventListener('mouseup', onUpEv)
+      if (d && !d.moved) open()
+    }
+    window.addEventListener('mousemove', onMoveEv)
+    window.addEventListener('mouseup', onUpEv)
+  }
+
+  return (
+    <div
+      ref={barRef}
+      className={css.miniBar}
+      style={{ left: position.x, top: position.y }}
+      data-theme={theme === 'native' ? undefined : theme}
+      onMouseDown={onMouseDown}
+      role="button"
+      title={hint}
+      aria-label={hint}
+    >
+      <IconFolderOpenOutline16 className={css.miniIcon} />
+      <span className={css.miniText}>{label}</span>
+      <IconChevronUpOutline14 className={css.miniChevron} />
+    </div>
+  )
+}
+
+interface TaskCardProps {
+  task: Task
+  isBound: boolean
+  expanded: boolean
+  onToggleExpand: () => void
+  onSwitch: () => void
+  onUnbind: () => void
+  onArchive: () => void
+  onRename: (value: string) => void
+  onEditStep: (index: number, value: string) => void
+  onCycleStatus: (index: number) => void
+  onReorderSteps: (fromIndex: number, toIndex: number) => void
+  showHints: boolean
+  syncing: boolean
+  t: ReturnType<typeof createTranslate>
+}
+
+export function TaskCard({
+  task,
+  isBound,
+  expanded,
+  onToggleExpand,
+  onSwitch,
+  onUnbind,
+  onArchive,
+  onRename,
+  onEditStep,
+  onCycleStatus,
+  onReorderSteps,
+  showHints,
+  syncing,
+  t,
+}: TaskCardProps) {
+  const steps = task.steps || []
+  const { dragState, dropTargetIndex, startDrag, cancelDrag } = useTaskDrag(task.id, steps, isBound, onReorderSteps)
+
+  // 行内编辑状态（本卡片局部）：双击进入，Enter/失焦提交，Esc 取消。
+  const [stepEdit, setStepEdit] = useState<{ index: number; value: string } | null>(null)
+  const [titleEdit, setTitleEdit] = useState<{ value: string } | null>(null)
+
+  const done = steps.filter((s) => s.status === 'completed').length
+  const pct = steps.length > 0 ? Math.round((done / steps.length) * 100) : 0
+
+  const commitStepEdit = (index: number) => {
+    if (!stepEdit || stepEdit.index !== index) return
+    const value = stepEdit.value
+    setStepEdit(null)
+    onEditStep(index, value)
+  }
+
+  const commitTitleEdit = () => {
+    if (titleEdit === null) return
+    const value = titleEdit.value
+    setTitleEdit(null)
+    onRename(value)
+  }
+
+  return (
+    <article data-task-id={task.id} className={`${css.card}${isBound ? ` ${css.cardBound}` : ''}`}>
+      <button
+        className={css.cardHead}
+        onClick={() => { if (titleEdit !== null) return; onToggleExpand() }}
+        aria-expanded={expanded}
+      >
+        <div className={css.cardTitleRow}>
+          {isBound && <span className={css.boundBadge}>{t('task.current')}</span>}
+          {isBound && titleEdit !== null ? (
+            <input
+              className={css.stepInput}
+              value={titleEdit.value}
+              autoFocus
+              onChange={(e) => setTitleEdit({ value: e.target.value })}
+              onBlur={commitTitleEdit}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') commitTitleEdit()
+                else if (e.key === 'Escape') setTitleEdit(null)
+              }}
+            />
+          ) : (
+            <span
+              className={`${css.cardTitle}${isBound ? ` ${css.cardTitleEditable}` : ''}`}
+              title={isBound ? t('task.title-edit') : undefined}
+              onDoubleClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                if (isBound) setTitleEdit({ value: String(task.title ?? '') })
+              }}
+            >
+              {task.title}
+            </span>
+          )}
+        </div>
+        <div className={css.cardMeta}>
+          {steps.length > 0 && <span className={css.progressText}>{done}/{steps.length}</span>}
+          <span className={css.updated}>{timeAgo(task.updatedAt || task.lastActiveAt)}</span>
+          <span className={css.chevron}>{expanded ? <IconChevronUpOutline14 /> : <IconChevronDownOutline14 />}</span>
+        </div>
+      </button>
+      {steps.length > 0 && (
+        <div className={css.track}>
+          <div className={css.trackFill} style={{ width: `${pct}%` }} />
+        </div>
+      )}
+      {expanded && (
+        <div className={css.cardBody}>
+          <div className={css.section}>
+            <div className={css.sectionLabel}>
+              {t('task.steps')}
+              {steps.length > 0 && <span className={css.sectionCount}>{steps.length}</span>}
+            </div>
+            {steps.length > 0 ? (
+              <>
+                <ol className={css.stepsList}>
+                  {steps.map((step, i) => {
+                    const stepIsEditing = stepEdit !== null && stepEdit.index === i
+                    const stepIsDragging = dragState?.dragging && dragState.fromIndex === i
+                    const isDropTarget = dropTargetIndex === i
+                    const isDropTargetAfter = dropTargetIndex === i + 1
+                    return (
+                      <li
+                        key={i}
+                        data-step-row
+                        className={`${css.stepRow}${stepIsDragging ? ` ${css.stepDragging}` : ''}${isDropTarget ? ` ${css.dropTargetBefore}` : ''}${isDropTargetAfter ? ` ${css.dropTargetAfter}` : ''}`}
+                        onMouseDown={(e) => {
+                          if (e.button !== 0) return
+                          if (!isBound || syncing) return
+                          // 交互控件（状态图标、编辑输入框等）上不进入拖拽
+                          const el = e.target as HTMLElement
+                          if (el.closest('button, input, textarea, a')) return
+                          startDrag(i, step.content, e)
+                        }}
+                      >
+                        {isBound ? (
+                          <button
+                            type="button"
+                            className={css.stepToggle}
+                            disabled={syncing}
+                            onClick={(e) => { e.stopPropagation(); onCycleStatus(i) }}
+                            title={`${t('step.completed')}/${t('step.in-progress')}/${t('step.pending')}`}
+                          >
+                            <StepIcon status={step.status} />
+                          </button>
+                        ) : (
+                          <StepIcon status={step.status} />
+                        )}
+                        {stepIsEditing ? (
+                          <input
+                            className={css.stepInput}
+                            value={stepEdit!.value}
+                            autoFocus
+                            onChange={(e) => setStepEdit({ index: i, value: e.target.value })}
+                            onBlur={() => commitStepEdit(i)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') commitStepEdit(i)
+                              else if (e.key === 'Escape') setStepEdit(null)
+                            }}
+                          />
+                        ) : (
+                          <span
+                            className={`${css.stepContent}${step.status === 'completed' ? ` ${css.stepContentDone}` : ''}${step.status === 'in_progress' ? ` ${css.stepContentRun}` : ''}${isBound ? ` ${css.stepEditable}` : ''}`}
+                            title={isBound && showHints ? t('step.edit-hint') : undefined}
+                            onDoubleClick={(e) => {
+                              e.stopPropagation()
+                              if (isBound) setStepEdit({ index: i, value: String(step.content ?? '') })
+                            }}
+                          >
+                            {step.content}
+                          </span>
+                        )}
+                      </li>
+                    )
+                  })}
+                </ol>
+                {dragState && dragState.dragging && (
+                  <div
+                    className={css.dragGhost}
+                    style={{
+                      left: dragState.clientX + 12,
+                      top: dragState.clientY - 20,
+                    }}
+                  >
+                    <div className={css.dragGhostCard}>
+                      <span className={css.dragGhostContent}>{dragState.stepContent}</span>
+                      <button
+                        type="button"
+                        className={css.dragGhostClose}
+                        style={{ pointerEvents: 'auto' }}
+                        onClick={(e) => { e.stopPropagation(); cancelDrag() }}
+                        title={showHints ? t('drag.cancel') : undefined}
+                        aria-label={t('drag.cancel')}
+                      >
+                        ×
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className={css.muted}>{t('panel.empty-desc')}</div>
+            )}
+          </div>
+
+          {(task.files?.length ?? 0) > 0 && (
+            <div className={css.section}>
+              <div className={css.sectionLabel}>
+                {t('task.files')}
+                <span className={css.sectionCount}>{task.files.length}</span>
+              </div>
+              <ul className={css.filesList}>
+                {task.files.slice(0, 12).map((file, i) => (
+                  <li key={i}>
+                    <button
+                      className={css.fileRow}
+                      onClick={() => navigator.clipboard?.writeText(file.path)}
+                      title={`${t('file.copy')}: ${file.path}${file.line ? `:${file.line}` : ''}`}
+                    >
+                      <span className={css.fileDot} />
+                      <span className={css.filePath}>{file.path}</span>
+                      {file.line && <span className={css.fileLine}>:{file.line}</span>}
+                    </button>
+                  </li>
+                ))}
+                {(task.files?.length ?? 0) > 12 && (
+                  <li className={css.muted}>… 共 {task.files.length} 个</li>
+                )}
+              </ul>
+            </div>
+          )}
+
+          <div className={css.cardFooter}>
+            <Button variant="outline" size="sm" disabled={isBound || syncing} onClick={onSwitch}>
+              {t('task.switch')}
+            </Button>
+            {isBound && (
+              <Button variant="outline" size="sm" disabled={syncing} onClick={onUnbind} title={t('task.unbind')}>
+                {t('task.unbind')}
+              </Button>
+            )}
+            <Button variant="outline" size="sm" disabled={syncing} onClick={onArchive}>
+              {t('task.archive')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </article>
+  )
+}

package/src/client/TaskPanel.module.css

@@ -2,8 +2,7 @@
    全部用 dsh 别名 token（--dsw-alias-*），亮暗随宿主主题自动切换；
    轻边框 + 轻阴影，无玻璃拟态、无默认 AI 渐变，与 dsh 控件同语言。 */
 
-.panel,
-.pill {
+.panel {
   /* shell.overlay 默认 click-through，条目自身开启 pointer-events */
   pointer-events: auto;
   font-family: inherit;
@@ -102,17 +101,6 @@
   background: var(--dsw-alias-button-primary-fill, #3a6ef5);
   white-space: nowrap;
 }
-.softBadge {
-  flex: none;
-  font-size: 10px;
-  line-height: 14px;
-  padding: 0 6px;
-  border-radius: 7px;
-  color: var(--dsw-alias-label-tertiary);
-  background: var(--dsw-alias-interactive-bg-hover, rgba(127, 127, 127, 0.12));
-  white-space: nowrap;
-}
-
 .notice {
   margin: 8px 12px 0;
   padding: 6px 10px;
@@ -238,6 +226,9 @@
 .cardBody {
   border-top: 1px solid var(--dsw-alias-border-l1, rgba(127, 127, 127, 0.14));
   padding: 8px 10px 10px;
+  max-height: 300px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 .section { margin-bottom: 8px; }
 .section:last-child { margin-bottom: 0; }
@@ -355,17 +346,9 @@
   margin-top: 8px;
 }
 
-.spinning svg {
-  animation: spin 0.9s linear infinite;
-}
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .panel { animation: none; }
-  .trackFill, .card, .pill { transition: none; }
-  .spinning svg { animation-duration: 2.4s; }
+  .trackFill, .card { transition: none; }
 }
 
 /* —— 折叠迷你条（顶部可拖拽） —— */
@@ -404,11 +387,6 @@
   flex: 1 1 auto;
   min-height: 0;
 }
-.cardBody {
-  max-height: 300px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
 .card {
   display: flex;
   flex-direction: column;
@@ -452,9 +430,12 @@
   outline: 1px dashed var(--dsw-alias-border-l3, rgba(127,127,127,.4));
   outline-offset: 1px;
 }
+/* 行内编辑框（步骤/标题共用，单行 input） */
 .stepInput {
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
+  width: auto;
+  box-sizing: border-box;
   font: inherit;
   font-size: 12px;
   line-height: 20px;
@@ -465,19 +446,12 @@
   padding: 0 5px;
 }
 
-/* —— 行内编辑框（自动长高） —— */
-.stepInput {
-  display: block;
-  flex: 1 1 auto;
-  min-width: 0;
-  width: auto;
-  resize: none;
-  overflow: hidden;
-  box-sizing: border-box;
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 20px;
+/* —— 步骤拖拽重排：源行半透明 —— */
+.stepDragging {
+  opacity: 0.3;
+  background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.08));
 }
+
 .cardTitleEditable {
   cursor: text;
   border-radius: 3px;
@@ -562,3 +536,92 @@
 .headerTitle { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .headerRight { min-width: 0; }
 .counts { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; margin-left: auto; }
+
+/* —— 长按拖拽浮动卡片 —— */
+.dragGhost {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  transform: translate(-50%, -50%);
+  transition: left 0.05s ease, top 0.05s ease;
+}
+.dragGhostCard {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-base, #fff));
+  border: 1px solid var(--dsw-alias-border-l3, rgba(127,127,127,.35));
+  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
+  white-space: nowrap;
+  max-width: 280px;
+  transform: scale(0.9);
+}
+.dragGhostContent {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+.dragGhostClose {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
+}
+.dragGhostClose:hover {
+  opacity: 1;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.12));
+}
+
+/* —— 步骤列表插入指示线 —— */
+.dropTargetBefore { position: relative; }
+.dropTargetBefore::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -1px;
+  height: 2px;
+  background: var(--dsw-alias-button-primary-fill, #3a6ef5);
+  border-radius: 1px;
+  box-shadow: 0 0 4px var(--dsw-alias-button-primary-fill, #3a6ef5);
+  animation: dropPulse 0.8s ease-in-out infinite;
+}
+.dropTargetAfter { position: relative; }
+.dropTargetAfter::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--dsw-alias-button-primary-fill, #3a6ef5);
+  border-radius: 1px;
+  box-shadow: 0 0 4px var(--dsw-alias-button-primary-fill, #3a6ef5);
+  animation: dropPulse 0.8s ease-in-out infinite;
+}
+@keyframes dropPulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+/* —— header 防重叠 —— */