feat(grid): support binary cell downloads

apps/desktop/src/components/grid/DataGrid.vue

@@ -96,6 +96,14 @@ import {
 } from "@/lib/dataGridTranspose";
 import { matchesRowStatusFilter, type RowStatus, type RowStatusFilter } from "@/lib/gridRowStatus";
 import { displayCellValue, type CellValue } from "@/lib/cellValue";
+import {
+  BINARY_CELL_DOWNLOAD_MODES,
+  binaryCellDownloadFileName,
+  binaryCellDownloadPayload,
+  canDownloadBinaryCellValue,
+  downloadBinaryCellPayload,
+  type BinaryCellDownloadMode,
+} from "@/lib/binaryCellDownload";
 import {
   canFormatCellDetailJson,
   cellDetailEditorText,
@@ -2198,6 +2206,11 @@ const contextCellValue = computed<CellValue | null>(() => {
   if (!contextCell.value || contextCell.value.col < 0) return null;
   return contextRowItem.value?.data[contextCell.value.col] ?? null;
 });
+const contextCellDetail = computed(() => {
+  const cell = contextCell.value;
+  if (!cell || cell.col < 0) return null;
+  return cellDetailFor(cell.rowIndex, cell.col);
+});
 function cellDetailFor(rowIndex: number, columnIndex: number): DataGridCellDetail | null {
   const item = displayItems.value[rowIndex];
   if (!item) return null;
@@ -3344,6 +3357,45 @@ function copyDetailColumnName() {
   copyText(activeCellDetail.value.column);
 }
 
+function canDownloadDetailBinaryValue(detail: DataGridCellDetail | null): boolean {
+  return !!detail && canDownloadBinaryCellValue(detail.value, detail.type);
+}
+
+async function downloadDetailBinaryValue(detail: DataGridCellDetail | null, mode: BinaryCellDownloadMode) {
+  if (!detail || !canDownloadDetailBinaryValue(detail)) return;
+  try {
+    const payload = binaryCellDownloadPayload(detail.value, mode);
+    const fileName = binaryCellDownloadFileName({
+      column: detail.column,
+      rowNumber: detail.rowNumber,
+      mode,
+      extension: payload.extension,
+    });
+    const result = await downloadBinaryCellPayload(payload, fileName);
+    if (result.kind === "saved" && result.path) {
+      toast(t("grid.downloadSaved", { path: result.path }));
+    } else if (result.kind === "browser-download") {
+      toast(t("grid.downloadStarted", { fileName: result.fileName ?? fileName }));
+    }
+  } catch (e: any) {
+    toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
+  }
+}
+
+function binaryDownloadSubmenu(detail: DataGridCellDetail | null): ContextMenuItem | null {
+  if (!canDownloadDetailBinaryValue(detail)) return null;
+  return {
+    label: t("grid.downloadBinaryValue"),
+    icon: Download,
+    children: BINARY_CELL_DOWNLOAD_MODES.map((mode) => ({
+      label: t(`grid.binaryDownload.${mode}`),
+      action: () => {
+        void downloadDetailBinaryValue(detail, mode);
+      },
+    })),
+  };
+}
+
 async function copyDetailSqlCondition() {
   if (!canCopyPreparedDetailSqlCondition()) return;
   copyText(detailSqlConditionCopy.value.text);
@@ -4331,6 +4383,8 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
   if (contextCell.value) {
     if (contextColumn.value) {
       items.push({ label: t("grid.openCellDetailsDialog"), action: openContextCellDetailDialog, icon: Maximize2 });
+      const downloadItem = binaryDownloadSubmenu(contextCellDetail.value);
+      if (downloadItem) items.push(downloadItem);
       items.push({
         label: t("grid.openColumnDetailsDialog"),
         action: openContextColumnDetailDialog,
@@ -6049,7 +6103,46 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                     </div>
                   </div>
                   <div class="space-y-1">
-                    <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
+                    <div class="flex items-center justify-between gap-2">
+                      <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
+                      <div v-if="!isEditingDetail" class="flex items-center gap-1">
+                        <Button
+                          v-if="activeCellDetail.isEditable"
+                          variant="ghost"
+                          size="icon"
+                          class="h-6 w-6"
+                          :title="t('grid.editValue')"
+                          @click="startDetailEdit"
+                        >
+                          <Pencil class="h-3 w-3" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          class="h-6 w-6"
+                          :title="t('grid.copyValue')"
+                          @click="copyDetailValue"
+                        >
+                          <Copy class="h-3 w-3" />
+                        </Button>
+                        <DropdownMenu v-if="canDownloadDetailBinaryValue(activeCellDetail)">
+                          <DropdownMenuTrigger as-child>
+                            <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.downloadBinaryValue')">
+                              <Download class="h-3 w-3" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" class="w-44">
+                            <DropdownMenuItem
+                              v-for="mode in BINARY_CELL_DOWNLOAD_MODES"
+                              :key="mode"
+                              @click="downloadDetailBinaryValue(activeCellDetail, mode)"
+                            >
+                              {{ t(`grid.binaryDownload.${mode}`) }}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </div>
                     <div v-if="activeCellDetail.imagePreviewUrl && !isEditingDetail" class="space-y-1.5">
                       <div class="text-muted-foreground">{{ t("grid.imagePreview") }}</div>
                       <a
@@ -6129,15 +6222,6 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                 </div>
 
                 <div class="border-t p-2 grid grid-cols-1 gap-1">
-                  <Button
-                    v-if="activeCellDetail.isEditable && !isEditingDetail"
-                    variant="ghost"
-                    size="sm"
-                    class="h-7 justify-start text-xs"
-                    @click="startDetailEdit"
-                  >
-                    <Pencil class="w-3 h-3 mr-2" /> {{ t("grid.editValue") }}
-                  </Button>
                   <Button
                     v-if="activeCellDetail.isEditable && activeCellDetail.value !== null"
                     variant="ghost"
@@ -6147,9 +6231,6 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                   >
                     <X class="w-3 h-3 mr-2" /> {{ t("grid.setNull") }}
                   </Button>
-                  <Button variant="ghost" size="sm" class="h-7 justify-start text-xs" @click="copyDetailValue">
-                    <Copy class="w-3 h-3 mr-2" /> {{ t("grid.copyValue") }}
-                  </Button>
                   <Button variant="ghost" size="sm" class="h-7 justify-start text-xs" @click="copyDetailColumnName">
                     <Copy class="w-3 h-3 mr-2" /> {{ t("grid.copyColumnName") }}
                   </Button>
@@ -6379,7 +6460,46 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
           </div>
 
           <div class="space-y-2">
-            <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
+            <div class="flex items-center justify-between gap-2">
+              <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
+              <div class="flex items-center gap-1">
+                <Button
+                  v-if="dialogCellDetail.isEditable"
+                  variant="ghost"
+                  size="icon"
+                  class="h-6 w-6"
+                  :title="t('grid.editValue')"
+                  @click="openDialogCellInSidePanel"
+                >
+                  <Pencil class="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  class="h-6 w-6"
+                  :title="t('grid.copyValue')"
+                  @click="copyDialogCellValue"
+                >
+                  <Copy class="h-3 w-3" />
+                </Button>
+                <DropdownMenu v-if="canDownloadDetailBinaryValue(dialogCellDetail)">
+                  <DropdownMenuTrigger as-child>
+                    <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.downloadBinaryValue')">
+                      <Download class="h-3 w-3" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" class="w-44">
+                    <DropdownMenuItem
+                      v-for="mode in BINARY_CELL_DOWNLOAD_MODES"
+                      :key="mode"
+                      @click="downloadDetailBinaryValue(dialogCellDetail, mode)"
+                    >
+                      {{ t(`grid.binaryDownload.${mode}`) }}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
             <a
               v-if="dialogCellDetail.imagePreviewUrl"
               :href="dialogCellDetail.imagePreviewUrl"
@@ -6432,22 +6552,10 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
 
         <DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
           <div class="flex flex-wrap gap-2">
-            <Button variant="outline" size="sm" class="h-7 text-xs" @click="copyDialogCellValue">
-              <Copy class="mr-1.5 h-3 w-3" /> {{ t("grid.copyValue") }}
-            </Button>
             <Button variant="outline" size="sm" class="h-7 text-xs" @click="copyDialogCellColumnName">
               <Copy class="mr-1.5 h-3 w-3" /> {{ t("grid.copyColumnName") }}
             </Button>
           </div>
-          <Button
-            v-if="dialogCellDetail.isEditable"
-            variant="ghost"
-            size="sm"
-            class="h-7 text-xs"
-            @click="openDialogCellInSidePanel"
-          >
-            <Pencil class="mr-1.5 h-3 w-3" /> {{ t("grid.editValue") }}
-          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

apps/desktop/src/i18n/locales/en.ts

@@ -551,6 +551,14 @@ export default {
     formattedValue: "Formatted Value",
     rawValue: "Raw Value",
     copyValue: "Copy Value",
+    downloadBinaryValue: "Download Value",
+    downloadSaved: "Saved to {path}",
+    downloadStarted: "Download started: {fileName}",
+    binaryDownload: {
+      binary: "Raw binary",
+      utf8: "Decoded text (UTF-8)",
+      gbk: "Decoded text (GBK)",
+    },
     copyRowTsv: "Copy Row (TSV)",
     copyColumnValues: "Copy Column (JSON)",
     copyColumnTsv: "Copy Column (TSV)",

apps/desktop/src/i18n/locales/es.ts

@@ -522,6 +522,14 @@ export default {
     formattedValue: "Valor formateado",
     rawValue: "Valor sin procesar",
     copyValue: "Copiar valor",
+    downloadBinaryValue: "Descargar valor",
+    downloadSaved: "Guardado en {path}",
+    downloadStarted: "Descarga iniciada: {fileName}",
+    binaryDownload: {
+      binary: "Binario sin procesar",
+      utf8: "Texto decodificado (UTF-8)",
+      gbk: "Texto decodificado (GBK)",
+    },
     copyRowTsv: "Copiar fila (TSV)",
     copyColumnValues: "Copiar columna (JSON)",
     copyColumnTsv: "Copiar columna (TSV)",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -546,6 +546,14 @@ export default {
     formattedValue: "格式化值",
     rawValue: "原始值",
     copyValue: "复制值",
+    downloadBinaryValue: "下载值",
+    downloadSaved: "已保存到 {path}",
+    downloadStarted: "已交给浏览器下载：{fileName}",
+    binaryDownload: {
+      binary: "原始二进制",
+      utf8: "解码文本 (UTF-8)",
+      gbk: "解码文本 (GBK)",
+    },
     copyRowTsv: "复制行 (TSV)",
     copyColumnValues: "复制列 (JSON)",
     copyColumnTsv: "复制列 (TSV)",

apps/desktop/src/lib/binaryCellDownload.ts

@@ -0,0 +1,118 @@
+import type { CellValue } from "@/lib/cellValue";
+import { isTauriRuntime } from "@/lib/tauriRuntime";
+
+export type BinaryCellDownloadMode = "binary" | "utf8" | "gbk";
+
+export interface BinaryCellDownloadPayload {
+  data: Uint8Array | string;
+  mimeType: string;
+  extension: string;
+}
+
+export interface BinaryCellDownloadResult {
+  kind: "saved" | "browser-download" | "cancelled";
+  path?: string;
+  fileName?: string;
+}
+
+export const BINARY_CELL_DOWNLOAD_MODES: BinaryCellDownloadMode[] = ["binary", "utf8", "gbk"];
+
+const HEX_VALUE_RE = /^(?:0[xX]|\\x)([0-9a-fA-F\s]+)$/;
+const BINARY_TYPE_RE =
+  /^(?:blob|tinyblob|mediumblob|longblob|bytea|bytes|binary|varbinary|image|raw|long\s+raw)(?:\b|\()/i;
+
+export function parseBinaryCellHexValue(value: CellValue): Uint8Array | null {
+  if (typeof value !== "string") return null;
+  const match = value.trim().match(HEX_VALUE_RE);
+  if (!match) return null;
+
+  const hex = match[1].replace(/\s+/g, "");
+  if (!hex || hex.length % 2 !== 0) return null;
+
+  const bytes = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < bytes.length; i++) {
+    const parsed = Number.parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+    if (Number.isNaN(parsed)) return null;
+    bytes[i] = parsed;
+  }
+  return bytes;
+}
+
+export function isBinaryCellColumnType(columnType?: string): boolean {
+  const type = (columnType ?? "").trim();
+  return !!type && BINARY_TYPE_RE.test(type);
+}
+
+export function canDownloadBinaryCellValue(value: CellValue, columnType?: string): boolean {
+  if (!parseBinaryCellHexValue(value)) return false;
+  return isBinaryCellColumnType(columnType) || typeof value === "string";
+}
+
+export function binaryCellDownloadPayload(value: CellValue, mode: BinaryCellDownloadMode): BinaryCellDownloadPayload {
+  const bytes = parseBinaryCellHexValue(value);
+  if (!bytes) {
+    throw new Error("Cell value is not a hexadecimal binary value.");
+  }
+
+  if (mode === "binary") {
+    return {
+      data: bytes,
+      mimeType: "application/octet-stream",
+      extension: "bin",
+    };
+  }
+
+  const decoder = new TextDecoder(mode === "gbk" ? "gbk" : "utf-8", { fatal: false });
+  return {
+    data: decoder.decode(bytes),
+    mimeType: "text/plain;charset=utf-8",
+    extension: "txt",
+  };
+}
+
+export function binaryCellDownloadFileName(options: {
+  column: string;
+  rowNumber: number;
+  mode: BinaryCellDownloadMode;
+  extension: string;
+}): string {
+  const column = options.column
+    .trim()
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/\s+/g, "_")
+    .slice(0, 48);
+  const safeColumn = column || "cell";
+  const suffix = options.mode === "binary" ? "" : `-${options.mode}`;
+  return `${safeColumn}-row-${options.rowNumber}${suffix}.${options.extension}`;
+}
+
+export async function downloadBinaryCellPayload(
+  payload: BinaryCellDownloadPayload,
+  fileName: string,
+): Promise<BinaryCellDownloadResult> {
+  if (isTauriRuntime()) {
+    const [{ save }, fs] = await Promise.all([import("@tauri-apps/plugin-dialog"), import("@tauri-apps/plugin-fs")]);
+    const path = await save({
+      defaultPath: fileName,
+      filters: [{ name: payload.extension.toUpperCase(), extensions: [payload.extension] }],
+    });
+    if (!path) return { kind: "cancelled" };
+    if (typeof payload.data === "string") {
+      await fs.writeTextFile(path, payload.data);
+    } else {
+      await fs.writeFile(path, payload.data);
+    }
+    return { kind: "saved", path };
+  }
+
+  const blob = new Blob([payload.data], { type: payload.mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+  return { kind: "browser-download", fileName };
+}