feat: replace export with copy-to-clipboard and add dynamic label filter

[MiaoZang]

Changes

1. Copy Button (replaces Export)

• Replace per-account export button with copy-to-clipboard
• Icon: Download -> Copy
• Copies single account JSON to clipboard
• Files: AccountCard.tsx, AccountGrid.tsx, AccountTable.tsx, AccountRow.tsx, Accounts.tsx

2. Dynamic Label Filter

• Add dynamic label filter tabs after PRO/ULTRA/FREE
• Labels auto-collected from custom_label field
• Purple theme for visual distinction
• File: Accounts.tsx

[MiaoZang]

筛选优化 - 新增标签筛选功能

修改时间: 2026-02-23 02:05
测试通过: 2026-02-23 02:18

需求

原始筛选条件为固定 4 项：全部 PRO ULTRA FREE

用户给账号添加自定义标签后，标签应自动出现在筛选条件栏末尾：

【全部(10) PRO(3) ULTRA(2) FREE(5) | 标签1(2) 标签2(3) 标签3(1)】

修改文件

Accounts.tsx

1. 扩展 FilterType 类型（第 34 行）

-type FilterType = "all" | "pro" | "ultra" | "free";
+type FilterType = "all" | "pro" | "ultra" | "free" | string;

2. 新增：收集唯一标签 + 计算标签计数（约第 258 行后）

// 收集所有唯一的自定义标签
const uniqueLabels = useMemo(() => {
  const labels = new Set<string>();
  searchedAccounts.forEach((a) => {
    if (a.custom_label?.trim()) labels.add(a.custom_label.trim());
  });
  return Array.from(labels).sort();
}, [searchedAccounts]);

// 计算各标签的数量
const labelCounts = useMemo(() => {
  const counts: Record<string, number> = {};
  uniqueLabels.forEach((label) => {
    counts[label] = searchedAccounts.filter(
      (a) => a.custom_label?.trim() === label
    ).length;
  });
  return counts;
}, [searchedAccounts, uniqueLabels]);

3. 扩展 filteredAccounts 过滤逻辑（约第 280 行）

 } else if (filter === "free") {
   // ... existing free filter
+} else if (filter !== "all") {
+  // 自定义标签筛选
+  result = result.filter((a) => a.custom_label?.trim() === filter);
 }

4. 在 UI 按钮组中动态渲染标签按钮（FREE 按钮后，约第 920 行）

• 有标签时显示竖线分隔符 |
• 每个标签渲染一个按钮，显示标签名 + 计数
• 紫色主题（text-purple-600），区别于系统筛选的蓝色

关联数据

• 标签字段：Account.custom_label?: string（定义在 src/types/account.ts:16）
• 标签通过账号卡片上的编辑功能添加，存储在 Rust 后端

[MiaoZang]

复制按钮修改

修改时间: 2026-02-11
版本: v4.1.14 首次实施，后续 v4.1.16 / v4.1.21 更新时重新应用

需求

将账号卡片/列表中每个账号的「导出」按钮改为「复制」按钮：

• 点击后将该账号信息以 单行 JSON 格式复制到剪贴板
• 图标从 Download（下载）改为 Copy（复制）
• 按钮提示文字从 common.export 改为 common.copy

修改文件

1. Accounts.tsx

将原来的 handleExportOne（下载单个账号 JSON 文件）替换为 handleCopyOne（复制到剪贴板）：

const handleCopyOne = async (accountId: string) => {
  try {
    const response = await exportAccounts([accountId]);
    if (!response.accounts || response.accounts.length === 0) {
      showToast(t("dashboard.toast.export_no_accounts"), "warning");
      return;
    }
    // 单行 JSON，不格式化
    const content = JSON.stringify(response.accounts[0]);
    await navigator.clipboard.writeText(content);
    showToast(t("common.copy") + " " + t("common.success"), "success");
  } catch (error: any) {
    console.error("Copy failed:", error);
    showToast(`${t("common.error")}: ${error}`, "error");
  }
};

调用处：onCopy={handleCopyOne}（替换原来的 onExport={handleExportOne}）

---

2. AccountCard.tsx

位置	原始	修改后
import	Download from lucide-react	Copy from lucide-react
Props 接口	onExport: () => void	onCopy: () => void
函数参数	onExport	onCopy
onClick	onExport()	onCopy()
title	t('common.export')	t('common.copy')
图标	<Download />	<Copy />

---

3. AccountGrid.tsx

位置	原始	修改后
Props 接口	onExport: (accountId: string) => void	onCopy: (accountId: string) => void
函数参数	onExport	onCopy
传递给 AccountCard	onExport={() => onExport(account.id)}	onCopy={() => onCopy(account.id)}

---

4. AccountTable.tsx

同上模式，所有 onExport → onCopy，Download 图标 → Copy 图标。

---

5. AccountRow.tsx

同上模式，所有 onExport → onCopy，Download 图标 → Copy 图标。

关键差异

项目	原始（导出）	修改后（复制）
行为	下载 JSON 文件到本地	复制 JSON 到剪贴板
JSON 格式	JSON.stringify(data, null, 2) 格式化	JSON.stringify(data) 单行
图标	Download（下载箭头）	Copy（复制图标）
提示文字	导出	复制

注意事项

每次从 GitHub 拉取新版本后，需要重新应用此修改（上游仍使用 onExport）。
涉及文件：AccountCard.tsx、AccountGrid.tsx（需 git checkout origin/main 恢复后重新修改）。
AccountTable.tsx 和 AccountRow.tsx 的修改在 stash 中保留了。