feat: 添加无需授权场景的可选联系方式填写的对话框

Author: LuSrackhall

frontend/src/components/export-flow/OptionalContactDialog.vue

@@ -0,0 +1,170 @@
+<template>
+  <q-dialog v-model="isVisible" persistent>
+    <q-card style="width: 90%; max-width: 360px">
+      <!-- Header -->
+      <q-card-section class="bg-teal text-white q-pa-sm">
+        <div class="text-subtitle1">{{ t('exportFlow.optionalContact.title') }}</div>
+      </q-card-section>
+
+      <!-- Content -->
+      <q-card-section class="q-pa-md">
+        <div class="text-caption text-grey-7 q-mb-md">
+          {{ t('exportFlow.optionalContact.description') }}
+        </div>
+
+        <!-- Email Input -->
+        <q-input
+          v-model="formData.email"
+          :label="t('exportFlow.contact.emailLabel')"
+          :placeholder="t('exportFlow.contact.emailPlaceholder')"
+          filled
+          dense
+          type="email"
+          counter
+          maxlength="200"
+          @blur="validateEmail"
+        />
+        <div v-if="emailError" class="text-caption text-negative q-mt-xs">
+          {{ emailError }}
+        </div>
+
+        <!-- Additional Contact Input -->
+        <q-input
+          v-model="formData.additional"
+          :label="t('exportFlow.contact.additionalLabel')"
+          :placeholder="t('exportFlow.contact.additionalPlaceholder')"
+          filled
+          dense
+          type="textarea"
+          autogrow
+          counter
+          maxlength="500"
+          class="q-mt-sm"
+        />
+
+        <div class="text-caption text-grey q-mt-sm">
+          {{ t('exportFlow.optionalContact.hint') }}
+        </div>
+      </q-card-section>
+
+      <!-- Actions -->
+      <q-card-actions align="right" class="q-pa-sm q-gutter-xs">
+        <q-btn flat :label="t('exportFlow.optionalContact.skip')" color="grey" size="sm" @click="onSkip" />
+        <q-btn
+          unelevated
+          :label="t('exportFlow.optionalContact.continue')"
+          color="teal"
+          size="sm"
+          :disable="!canContinue"
+          @click="onSubmit"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+interface OptionalContactDialogProps {
+  visible: boolean;
+}
+
+interface OptionalContactDialogEmits {
+  (e: 'submit', data: { email?: string; additional?: string }): void;
+  (e: 'skip'): void;
+  (e: 'cancel'): void;
+}
+
+const props = withDefaults(defineProps<OptionalContactDialogProps>(), {
+  visible: false,
+});
+
+const emit = defineEmits<OptionalContactDialogEmits>();
+const { t } = useI18n();
+
+const isVisible = ref(false);
+const formData = ref({
+  email: '',
+  additional: '',
+});
+const emailError = ref('');
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// Validate email format (only if email is not empty)
+const isValidEmail = (value: string) => {
+  const trimmed = value.trim();
+  if (!trimmed) return true; // Empty is valid (optional)
+  return emailPattern.test(trimmed);
+};
+
+// Computed: Can continue button be enabled?
+const canContinue = computed(() => {
+  // If email is entered, it must be valid format
+  return isValidEmail(formData.value.email);
+});
+
+// Watch visible prop
+watch(
+  () => props.visible,
+  (newVal) => {
+    isVisible.value = newVal;
+    if (newVal) {
+      // Reset form on open
+      formData.value = {
+        email: '',
+        additional: '',
+      };
+      emailError.value = '';
+    }
+  }
+);
+
+// Watch isVisible to sync with parent
+watch(isVisible, (newVal) => {
+  if (!newVal) {
+    emit('cancel');
+  }
+});
+
+// Validate email on blur
+const validateEmail = () => {
+  const trimmed = formData.value.email.trim();
+  if (!trimmed) {
+    emailError.value = '';
+    return;
+  }
+
+  if (!isValidEmail(trimmed)) {
+    emailError.value = t('exportFlow.contact.emailInvalid');
+    return;
+  }
+
+  emailError.value = '';
+};
+
+// Skip - proceed without contact info
+const onSkip = () => {
+  emit('skip');
+  isVisible.value = false;
+};
+
+// Submit - proceed with contact info
+const onSubmit = () => {
+  if (!canContinue.value) {
+    validateEmail();
+    return;
+  }
+
+  const email = formData.value.email.trim();
+  const additional = formData.value.additional.trim();
+
+  emit('submit', {
+    email: email || undefined,
+    additional: additional || undefined,
+  });
+
+  isVisible.value = false;
+};
+</script>

frontend/src/components/export-flow/useExportSignatureFlow.ts

@@ -45,6 +45,7 @@ interface State {
     | 'auth-requirement' // 二次创作是否需要授权（推荐不需要）
     | 'auth-impact-confirm' // 选择需要授权后的二次确认弹窗
     | 'auth-contact' // 需要授权时的联系方式填写
+    | 'optional-contact' // 无需授权时的可选联系方式填写
     | 'auth-gate' // 已有签名且原作者要求授权时的授权门控
     | 'auth-gate-from-picker' // 从签名选择页面打开的授权门控（用于导入授权文件）
     | 'auth-request' // 授权申请流程（用于申请签名授权）
@@ -90,6 +91,7 @@ export function useExportSignatureFlow() {
   const authRequirementDialogVisible = ref(false);
   const authImpactConfirmDialogVisible = ref(false);
   const authContactDialogVisible = ref(false);
+  const optionalContactDialogVisible = ref(false);
   const authGateDialogVisible = ref(false);
   const authRequestDialogVisible = ref(false);
   const pickerDialogVisible = ref(false);
@@ -193,9 +195,9 @@ export function useExportSignatureFlow() {
     if (!payload.requireAuthorization) {
       const needSignature = state.value.flowData?.needSignature ?? true;
       if (needSignature) {
-        // 仍需落地签名，继续选择
-        state.value.step = 'picker';
-        pickerDialogVisible.value = true;
+        // 无需授权但需要签名 → 进入可选联系方式填写
+        state.value.step = 'optional-contact';
+        optionalContactDialogVisible.value = true;
       } else {
         // 无需签名且无需授权 → 就地完成
         state.value.step = 'done';
@@ -242,6 +244,29 @@ export function useExportSignatureFlow() {
     state.value.step = 'idle';
   };
 
+  // ========== Step: optional-contact ==========
+  const handleOptionalContactSubmit = (payload: { email?: string; additional?: string }) => {
+    state.value.flowData = {
+      ...(state.value.flowData ?? {}),
+      contactEmail: payload.email,
+      contactAdditional: payload.additional,
+    };
+    optionalContactDialogVisible.value = false;
+    // 进入签名选择
+    state.value.step = 'picker';
+    pickerDialogVisible.value = true;
+  };
+  const handleOptionalContactSkip = () => {
+    optionalContactDialogVisible.value = false;
+    // 直接进入签名选择（不保存联系方式）
+    state.value.step = 'picker';
+    pickerDialogVisible.value = true;
+  };
+  const handleOptionalContactCancel = () => {
+    optionalContactDialogVisible.value = false;
+    state.value.step = 'idle';
+  };
+
   /**
    * Check if authorization is needed, and proceed accordingly.
    */
@@ -363,6 +388,7 @@ export function useExportSignatureFlow() {
     authRequirementDialogVisible.value = false;
     authImpactConfirmDialogVisible.value = false;
     authContactDialogVisible.value = false;
+    optionalContactDialogVisible.value = false;
     state.value.step = 'idle';
   };
 
@@ -396,6 +422,7 @@ export function useExportSignatureFlow() {
     authRequirementDialogVisible.value = false;
     authImpactConfirmDialogVisible.value = false;
     authContactDialogVisible.value = false;
+    optionalContactDialogVisible.value = false;
     authGateDialogVisible.value = false;
     authRequestDialogVisible.value = false;
     pickerDialogVisible.value = false;
@@ -412,6 +439,7 @@ export function useExportSignatureFlow() {
     authRequirementDialogVisible,
     authImpactConfirmDialogVisible,
     authContactDialogVisible,
+    optionalContactDialogVisible,
     authGateDialogVisible,
     authRequestDialogVisible,
     pickerDialogVisible,
@@ -428,6 +456,9 @@ export function useExportSignatureFlow() {
     handleAuthImpactConfirm,
     handleAuthContactSubmit,
     handleAuthContactCancel,
+    handleOptionalContactSubmit,
+    handleOptionalContactSkip,
+    handleOptionalContactCancel,
     handleAuthGateAuthorized,
     handleAuthGateCancel,
     openAuthGateFromPicker,

frontend/src/i18n/en-US/index.json

@@ -371,6 +371,13 @@
       "additionalPlaceholder": "Add social media, website, or other contact info",
       "hint": "These details are stored with the signature so requesters can reach you"
     },
+    "optionalContact": {
+      "title": "Leave Contact Info (Optional)",
+      "description": "You can optionally provide contact information for others to reach you. This step is optional and can be skipped.",
+      "hint": "Contact info will be stored with the signature for others to view",
+      "skip": "Skip",
+      "continue": "Save & Continue"
+    },
     "policyDialog": {
       "title": "Signature Policy & Requirements",
       "noSignatureTitle": "Set Signature Policy",

frontend/src/i18n/zh-CN/index.json

@@ -365,6 +365,13 @@
       "additionalPlaceholder": "可补充社交媒体、官网等信息",
       "hint": "这些联系方式将随签名一同保存，供申请授权者查阅"
     },
+    "optionalContact": {
+      "title": "留下联系方式（可选）",
+      "description": "您可以选择留下联系方式，便于他人与您取得联系。此步骤为可选，可直接跳过。",
+      "hint": "联系方式将随签名一同保存，供他人查阅",
+      "skip": "跳过",
+      "continue": "保存并继续"
+    },
     "policyDialog": {
       "title": "签名策略与要求",
       "noSignatureTitle": "设置签名策略",

frontend/src/pages/Keytone_album_page_new.vue

@@ -312,6 +312,13 @@
       @submit="exportFlow.handleAuthContactSubmit"
       @cancel="exportFlow.handleAuthContactCancel"
     />
+    <!-- 4.5) 可选联系方式（无需授权时） -->
+    <optional-contact-dialog
+      :visible="exportFlow.optionalContactDialogVisible.value"
+      @submit="exportFlow.handleOptionalContactSubmit"
+      @skip="exportFlow.handleOptionalContactSkip"
+      @cancel="exportFlow.handleOptionalContactCancel"
+    />
     <!-- 5) 已有签名且需要授权 → 授权门控（导入授权文件） -->
     <export-authorization-gate-dialog
       :visible="exportFlow.authGateDialogVisible.value"
@@ -371,6 +378,7 @@ import ExportReexportWarningDialog from 'src/components/export-flow/ExportReexpo
 import ExportAuthorizationRequirementDialog from 'src/components/export-flow/ExportAuthorizationRequirementDialog.vue';
 import ExportAuthorizationImpactConfirmDialog from 'src/components/export-flow/ExportAuthorizationImpactConfirmDialog.vue';
 import ExportAuthorizationContactDialog from 'src/components/export-flow/ExportAuthorizationContactDialog.vue';
+import OptionalContactDialog from 'src/components/export-flow/OptionalContactDialog.vue';
 import ExportAuthorizationGateDialog from 'src/components/export-flow/ExportAuthorizationGateDialog.vue';
 import SignaturePickerDialog from 'src/components/export-flow/SignaturePickerDialog.vue';
 import AuthRequestDialog from 'src/components/export-flow/AuthRequestDialog.vue';