feat(export): support name and comment XLSX headers

apps/desktop/src/components/export/XlsxHeaderDialog.vue

@@ -3,20 +3,21 @@ import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import type { XlsxHeaderMode } from "@/lib/export/xlsxHeader";
 
 const { t } = useI18n();
 
 const open = defineModel<boolean>("open", { default: false });
-const selected = ref<"original" | "comment">("original");
+const selected = ref<XlsxHeaderMode>("name");
 
 const emit = defineEmits<{
-  confirm: [useCommentHeader: boolean];
+  confirm: [mode: XlsxHeaderMode];
   cancel: [];
 }>();
 
 function onConfirm() {
   open.value = false;
-  emit("confirm", selected.value === "comment");
+  emit("confirm", selected.value);
 }
 
 function onCancel() {
@@ -39,18 +40,22 @@ function onOpenChange(value: boolean) {
         <p class="text-sm text-muted-foreground mb-3">{{ t("grid.xlsxHeaderPrompt") }}</p>
         <div class="flex flex-col gap-3">
           <label class="flex items-center gap-2 cursor-pointer">
-            <input type="radio" v-model="selected" value="original" class="h-4 w-4" />
+            <input type="radio" v-model="selected" value="name" class="h-4 w-4" />
             <span class="text-sm">{{ t("grid.xlsxHeaderOriginal") }}</span>
           </label>
           <label class="flex items-center gap-2 cursor-pointer">
             <input type="radio" v-model="selected" value="comment" class="h-4 w-4" />
             <span class="text-sm">{{ t("grid.xlsxHeaderComment") }}</span>
           </label>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input type="radio" v-model="selected" value="name-comment" class="h-4 w-4" />
+            <span class="text-sm">{{ t("grid.xlsxHeaderNameAndComment") }}</span>
+          </label>
         </div>
       </div>
       <DialogFooter>
         <Button variant="outline" @click="onCancel">{{ t("common.cancel") }}</Button>
-        <Button @click="onConfirm">{{ t("common.confirm") }}</Button>
+        <Button data-xlsx-header-confirm @click="onConfirm">{{ t("common.confirm") }}</Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>

apps/desktop/src/components/export/__tests__/XlsxHeaderDialog.spec.ts

@@ -30,4 +30,27 @@ describe("XlsxHeaderDialog", () => {
     expect(cancelCount).toBe(1);
     app.unmount();
   });
+
+  it("emits the combined name and comment mode", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    let selectedMode = "";
+    const app = createApp(XlsxHeaderDialog, {
+      open: true,
+      onConfirm: (mode: string) => {
+        selectedMode = mode;
+      },
+    });
+    app.use(i18n);
+    app.mount(container);
+    await nextTick();
+
+    document.querySelector<HTMLInputElement>('input[value="name-comment"]')!.click();
+    await nextTick();
+    document.querySelector<HTMLButtonElement>("[data-xlsx-header-confirm]")!.click();
+    await nextTick();
+
+    expect(selectedMode).toBe("name-comment");
+    app.unmount();
+  });
 });