重构: 拆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/views/ProjectDetail.vue

@@ -172,57 +172,13 @@
       </div>
     </div>
 
-    <!-- 人工审批对话框 -->
-    <div v-if="showApprovalDialog" class="modal-overlay">
-      <div class="modal-box" style="width: 500px">
-        <h3 class="modal-title">{{ $t('projectDetail.approvalTitle') }}</h3>
-        <div v-if="store.pendingApproval">
-          <h3>{{ store.pendingApproval.title }}</h3>
-          <p style="margin: 16px 0; color: var(--df-text-secondary);">{{ store.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 store.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 store.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="handleCancelApproval">{{ $t('projectDetail.approvalCancel') }}</button>
-          <button class="btn btn-ghost" @click="showApprovalDialog = false">{{ $t('projectDetail.approvalLater') }}</button>
-        </div>
-      </div>
-    </div>
+    <!-- 人工审批对话框(抽离至 components/project/ApprovalDialog.vue)-->
+    <ApprovalDialog
+      :visible="showApprovalDialog"
+      :store="store"
+      @cancel="handleCancelApproval"
+      @later="showApprovalDialog = false"
+    />
 
     <!-- 确认弹层（删除/重定位确认，替代原生 window.confirm/alert） -->
     <ConfirmDialog :visible="confirmState.visible" :msg="confirmState.msg" @result="answerConfirm" />
@@ -241,6 +197,7 @@ import { formatDate } from '@/utils/time'
 import { parseStack } from '@/utils/project'
 import { projectStatusLabel, projectStageInfo, taskStatusLabel, taskStatusClass } from '../constants/project'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import ApprovalDialog from '@/components/project/ApprovalDialog.vue'
 import { useConfirm } from '@/composables/useConfirm'
 import { useRendered } from '@/composables/useMarkdown'
 
@@ -414,32 +371,9 @@ async function handleImportDir() {
 }
 
 // ── 审批处理 ──
-async function handleApproval(decision: string) {
-  submitting.value = true
-  try {
-    await store.approveHumanApproval([decision])
-    showApprovalDialog.value = false
-  } finally {
-    submitting.value = false
-  }
-}
-
-// F-260615-01: 多选审批
-const isMultipleSelect = computed(() => store.pendingApproval?.select_type === 'multiple')
-const multiDecisions = ref<string[]>([])
-
-async function handleApprovalMulti() {
-  if (multiDecisions.value.length === 0) return
-  submitting.value = true
-  try {
-    // 统一传 decisions 数组,store 按 select_type 分派单/多选
-    await store.approveHumanApproval([...multiDecisions.value])
-    multiDecisions.value = []
-    showApprovalDialog.value = false
-  } finally {
-    submitting.value = false
-  }
-}
+// 审批对话框 UI + 单/多选决策逻辑抽离至 components/project/ApprovalDialog.vue
+// handleApproval/handleApprovalMulti/isMultipleSelect/multiDecisions 已迁移;
+// submitting(UX-260618-17)在子组件自治,父级 submitting 仅用于 submitNewTask
 
 // ── 取消审批（调 cancel_workflow_node IPC 置节点 Cancelled）──
 async function handleCancelApproval() {
@@ -461,11 +395,9 @@ watch(formattedEvents, () => {
   if (logListRef.value) logListRef.value.scrollTop = logListRef.value.scrollHeight
 })
 
-// 监听审批请求
+// 监听审批请求(pendingApproval → 开弹窗;多选清空已在 ApprovalDialog 内 watch)
 watch(() => store.pendingApproval, (newApproval) => {
   if (newApproval) {
-    // F-260615-01: 每次新审批清空多选状态(避免上轮残留)
-    multiDecisions.value = []
     showApprovalDialog.value = true
   }
 }, { immediate: true })