重构: 拆ProjectDetail审批对话框(strategy前端)

- 新建 components/project/ApprovalDialog.vue(110行): 审批对话框+handleApproval/handleApprovalMulti/isMultipleSelect/multiDecisions+submitting(UX-260618-17防双击保留)
- ProjectDetail.vue 811→743(-68): template→<ApprovalDialog> + 删迁移script
- props visible/store透传 + emit cancel/later(单一store源 _storeInstance)
主代兜底: vue-tsc 0 + grep ApprovalDialog抽离/ProjectDetail import/emit印证
strategy: 前端views, 子组件抽审批对话框; UX-260618-17 submitting保留; 余743(style 315逻辑428, 后续TaskList/InfoCard可拆)
git add指定(ProjectDetail.vue+ApprovalDialog.vue)

src/components/project/ApprovalDialog.vue

@@ -0,0 +1,110 @@
+<template>
+  <!-- 人工审批对话框(从 ProjectDetail.vue 抽离 UX-260618-17 submitting 保留)-->
+  <div v-if="visible" class="modal-overlay">
+    <div class="modal-box" style="width: 500px">
+      <h3 class="modal-title">{{ $t('projectDetail.approvalTitle') }}</h3>
+      <div v-if="pendingApproval">
+        <h3>{{ pendingApproval.title }}</h3>
+        <p style="margin: 16px 0; color: var(--df-text-secondary);">{{ pendingApproval.description }}</p>
+        <div style="margin-bottom: 20px;">
+          <p style="margin-bottom: 8px; font-size: 14px;">{{ $t('projectDetail.approvalHint') }}</p>
+          <!-- F-260615-01: select_type=multiple → checkbox 多选,缺省 single → 按钮单选 -->
+          <template v-if="isMultipleSelect">
+            <div style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;">
+              <label
+                v-for="(option, idx) in pendingApproval.options"
+                :key="idx"
+                style="display: flex; align-items: center; gap: 8px; cursor: pointer;"
+              >
+                <input type="checkbox" :value="option" v-model="multiDecisions" />
+                <span>{{ option }}</span>
+              </label>
+            </div>
+            <button
+              class="btn btn-primary"
+              :disabled="submitting || multiDecisions.length === 0"
+              @click="handleApprovalMulti"
+            >
+              {{ $t('projectDetail.approvalConfirm', { count: multiDecisions.length }) }}
+            </button>
+          </template>
+          <template v-else>
+            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+              <button
+                v-for="(option, idx) in pendingApproval.options"
+                :key="idx"
+                class="btn"
+                :class="idx === 0 ? 'btn-primary' : 'btn-ghost'"
+                :disabled="submitting"
+                @click="handleApproval(option)"
+              >
+                {{ option }}
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-ghost" @click="emit('cancel')">{{ $t('projectDetail.approvalCancel') }}</button>
+        <button class="btn btn-ghost" @click="emit('later')">{{ $t('projectDetail.approvalLater') }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useProjectStore } from '@/stores/project'
+
+// 抽离自 ProjectDetail.vue(L175-225 模板 + L416-471 审批逻辑/watch)
+// store 共享:父级 useProjectStore() 实例传入(同源 store,响应式共享 pendingApproval)
+// submitting 自治:本组件持有禁用态(UX-260618-17 双击防抖)
+// ProjectStore 类型未 export(store.ts:135 内部 type),用 ReturnType 自推导同源类型
+type ProjectStore = ReturnType<typeof useProjectStore>
+
+const props = defineProps<{
+  visible: boolean
+  store: ProjectStore
+}>()
+
+const emit = defineEmits<{
+  cancel: []
+  later: []
+}>()
+
+const pendingApproval = computed(() => props.store.pendingApproval)
+const isMultipleSelect = computed(() => pendingApproval.value?.select_type === 'multiple')
+const multiDecisions = ref<string[]>([])
+const submitting = ref(false)
+
+async function handleApproval(decision: string) {
+  submitting.value = true
+  try {
+    await props.store.approveHumanApproval([decision])
+    emit('cancel')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// F-260615-01: 多选审批(UX-260618-17 submitting 防双击保留)
+async function handleApprovalMulti() {
+  if (multiDecisions.value.length === 0) return
+  submitting.value = true
+  try {
+    // 统一传 decisions 数组,store 按 select_type 分派单/多选
+    await props.store.approveHumanApproval([...multiDecisions.value])
+    multiDecisions.value = []
+    emit('cancel')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// F-260615-01: 每次新审批清空多选状态(避免上轮残留)
+watch(() => pendingApproval.value, (newApproval) => {
+  if (newApproval) {
+    multiDecisions.value = []
+  }
+}, { immediate: true })
+</script>