@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/TeamEmptyState.tsx

@@ -0,0 +1,102 @@
+import { Button } from '@renderer/components/ui/button';
+import type { CcAgentType } from '@shared/types/ccConnect';
+import { ALL_AGENT_TYPES, AGENT_TYPE_LABELS } from './HarnessCards';
+
+interface TeamEmptyStateProps {
+  canCreate: boolean;
+  onCreateTeam: () => void;
+  onSelectHarness?: (harness: CcAgentType) => void;
+}
+
+const HARNESS_DESCRIPTIONS: Record<CcAgentType, string> = {
+  claudecode: 'Anthropic 官方 CLI',
+  codex: 'OpenAI Codex CLI',
+  cursor: 'Cursor IDE Agent',
+  gemini: 'Google Gemini CLI',
+  iflow: 'iFlow CLI',
+  kimi: 'Moonshot Kimi',
+  devin: 'Cognition Devin',
+  opencode: 'OpenCode CLI',
+  qoder: 'Qoder CLI',
+  pi: 'Inflection Pi',
+  acp: 'Agent Communication Protocol',
+  tmux: 'Tmux Session',
+};
+
+export const TeamEmptyState = ({
+  canCreate,
+  onCreateTeam,
+  onSelectHarness,
+}: TeamEmptyStateProps): React.JSX.Element => {
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-6 px-6">
+      <div className="text-center">
+        <p className="text-lg font-medium text-[var(--color-text)]">没有找到团队</p>
+        <p className="mt-2 text-sm text-[var(--color-text-muted)]">
+          选择一种 Agent 类型开始，或创建自定义团队。
+        </p>
+      </div>
+
+      {/* Harness 卡片网格 */}
+      {onSelectHarness && (
+        <div className="w-full max-w-2xl">
+          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+            选择 Agent 类型
+          </p>
+          <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+            {ALL_AGENT_TYPES.map((type) => (
+              <button
+                key={type}
+                type="button"
+                className="flex flex-col items-center gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-3 text-center transition-colors hover:border-[var(--color-border-emphasis)] hover:bg-[var(--color-surface-raised)]"
+                onClick={() => onSelectHarness(type)}
+              >
+                <span className="text-lg">{getHarnessIcon(type)}</span>
+                <span className="text-xs font-medium text-[var(--color-text)]">
+                  {AGENT_TYPE_LABELS[type]}
+                </span>
+                <span className="text-[10px] text-[var(--color-text-muted)]">
+                  {HARNESS_DESCRIPTIONS[type]}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-center gap-3">
+        <div className="h-px w-12 bg-[var(--color-border)]" />
+        <span className="text-xs text-[var(--color-text-muted)]">或</span>
+        <div className="h-px w-12 bg-[var(--color-border)]" />
+      </div>
+
+      <Button size="sm" disabled={!canCreate} onClick={onCreateTeam}>
+        创建自定义团队
+      </Button>
+
+      {!canCreate && (
+        <p className="text-xs text-[var(--color-text-muted)]">
+          只有本地桌面模式支持创建团队。
+        </p>
+      )}
+    </div>
+  );
+};
+
+function getHarnessIcon(type: CcAgentType): string {
+  switch (type) {
+    case 'claudecode': return '🤖';
+    case 'codex': return '🔬';
+    case 'cursor': return '💻';
+    case 'gemini': return '💎';
+    case 'iflow': return '🌊';
+    case 'kimi': return '🌙';
+    case 'devin': return '🧑‍💻';
+    case 'opencode': return '🔓';
+    case 'qoder': return '⚡';
+    case 'pi': return '🥧';
+    case 'acp': return '🔗';
+    case 'tmux': return '🖥️';
+    default: return '📦';
+  }
+}

package/src/renderer/components/team/TeamListFilterPopover.tsx

@@ -0,0 +1,183 @@
+/* eslint-disable react-refresh/only-export-components -- TeamListFilterState and EMPTY_TEAM_FILTER shared with TeamListView */
+import { useMemo } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { Checkbox } from '@renderer/components/ui/checkbox';
+import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { getBaseName } from '@renderer/utils/pathUtils';
+import { Filter } from 'lucide-react';
+
+import type { TeamSummary } from '@shared/types';
+
+export interface TeamListFilterState {
+  selectedStatuses: Set<string>;
+}
+
+export const EMPTY_TEAM_FILTER: TeamListFilterState = {
+  selectedStatuses: new Set(),
+};
+
+function folderName(fullPath: string): string {
+  return getBaseName(fullPath) || fullPath;
+}
+
+interface TeamListFilterPopoverProps {
+  filter: TeamListFilterState;
+  selectedProjectPath: string | null;
+  teams: TeamSummary[];
+  aliveTeams: string[];
+  onFilterChange: (filter: TeamListFilterState) => void;
+  onProjectChange: (projectPath: string | null) => void;
+}
+
+export const TeamListFilterPopover = ({
+  filter,
+  selectedProjectPath,
+  teams,
+  aliveTeams,
+  onFilterChange,
+  onProjectChange,
+}: TeamListFilterPopoverProps): React.JSX.Element => {
+  const activeCount = useMemo(() => {
+    let count = 0;
+    if (filter.selectedStatuses.size > 0) count += 1;
+    return count;
+  }, [filter.selectedStatuses]);
+
+  const uniqueProjects = useMemo(() => {
+    const paths = new Set<string>();
+    for (const team of teams) {
+      if (team.projectPath?.trim()) paths.add(team.projectPath.trim());
+    }
+    if (selectedProjectPath?.trim()) {
+      paths.add(selectedProjectPath.trim());
+    }
+    return [...paths].sort((a, b) => folderName(a).localeCompare(folderName(b)));
+  }, [selectedProjectPath, teams]);
+
+  const handleStatusToggle = (status: string): void => {
+    const next = new Set(filter.selectedStatuses);
+    if (next.has(status)) {
+      next.delete(status);
+    } else {
+      next.add(status);
+    }
+    onFilterChange({ ...filter, selectedStatuses: next });
+  };
+
+  const handleProjectToggle = (project: string): void => {
+    onProjectChange(selectedProjectPath === project ? null : project);
+  };
+
+  const handleClearAll = (): void => {
+    onFilterChange(EMPTY_TEAM_FILTER);
+  };
+
+  const aliveSet = useMemo(() => new Set(aliveTeams), [aliveTeams]);
+  const runningCount = useMemo(
+    () => teams.filter((t) => aliveSet.has(t.teamName)).length,
+    [teams, aliveSet]
+  );
+  const offlineCount = useMemo(
+    () => teams.filter((t) => !aliveSet.has(t.teamName)).length,
+    [teams, aliveSet]
+  );
+
+  return (
+    <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="relative h-8 px-2 text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+              aria-label="筛选团队"
+            >
+              <Filter size={14} />
+              {activeCount > 0 && (
+                <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-blue-500 text-[10px] font-medium text-white">
+                  {activeCount}
+                </span>
+              )}
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">筛选团队</TooltipContent>
+      </Tooltip>
+      <PopoverContent align="end" className="w-72 p-0">
+        {/* Status section */}
+        <div className="border-b border-[var(--color-border)] p-3">
+          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+            Status
+          </p>
+          <div className="space-y-1.5">
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- Radix Checkbox renders a button, not a native input */}
+            <label className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]">
+              <Checkbox
+                checked={filter.selectedStatuses.has('running')}
+                onCheckedChange={() => handleStatusToggle('running')}
+              />
+              <span className="flex items-center gap-1.5">
+                <span className="size-1.5 rounded-full bg-emerald-400" />
+                运行中
+                <span className="text-[var(--color-text-muted)]">({runningCount})</span>
+              </span>
+            </label>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- Radix Checkbox renders a button, not a native input */}
+            <label className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]">
+              <Checkbox
+                checked={filter.selectedStatuses.has('offline')}
+                onCheckedChange={() => handleStatusToggle('offline')}
+              />
+              <span className="flex items-center gap-1.5">
+                <span className="size-1.5 rounded-full bg-zinc-500" />
+                离线
+                <span className="text-[var(--color-text-muted)]">({offlineCount})</span>
+              </span>
+            </label>
+          </div>
+        </div>
+
+        {/* Project section */}
+        {uniqueProjects.length > 0 && (
+          <div className="border-b border-[var(--color-border)] p-3">
+            <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+              项目优先级
+            </p>
+            <div className="max-h-40 space-y-1.5 overflow-y-auto">
+              {uniqueProjects.map((project) => (
+                <label
+                  key={project}
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]"
+                  title={project}
+                >
+                  <Checkbox
+                    checked={selectedProjectPath === project}
+                    onCheckedChange={() => handleProjectToggle(project)}
+                  />
+                  <span className="truncate">{folderName(project)}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="flex justify-end p-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2 text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+            disabled={activeCount === 0}
+            onClick={handleClearAll}
+          >
+            清除全部
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+/* eslint-enable react-refresh/only-export-components -- pair for file-level disable */