From fae9966a11d1a03302a08f408f9ef6033782c7be Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 13 May 2026 03:37:47 +0000
Subject: [PATCH] feat(web): add reimbursements service and ConfirmDialog
 component

- services/reimbursements.js: add reimbursement API service client
- components/shared/ConfirmDialog.vue: add shared confirm dialog component
---
 web/src/components/shared/ConfirmDialog.vue | 261 ++++++++++++++++++++
 web/src/services/reimbursements.js          |  29 +++
 2 files changed, 290 insertions(+)
 create mode 100644 web/src/components/shared/ConfirmDialog.vue
 create mode 100644 web/src/services/reimbursements.js

diff --git a/web/src/components/shared/ConfirmDialog.vue b/web/src/components/shared/ConfirmDialog.vue
new file mode 100644
index 0000000..897a646
--- /dev/null
+++ b/web/src/components/shared/ConfirmDialog.vue
@@ -0,0 +1,261 @@
+<template>
+  <Teleport to="body">
+    <Transition name="shared-confirm">
+      <div
+        v-if="open"
+        class="shared-confirm-mask"
+        role="presentation"
+        @click.self="handleMaskClose"
+      >
+        <section
+          class="shared-confirm-card"
+          role="alertdialog"
+          aria-modal="true"
+          :aria-labelledby="titleId"
+          @click.stop
+        >
+          <span v-if="badge" class="shared-confirm-badge" :class="badgeTone">
+            {{ badge }}
+          </span>
+          <h4 :id="titleId">{{ title }}</h4>
+          <p v-if="description">{{ description }}</p>
+
+          <div v-if="$slots.default" class="shared-confirm-body">
+            <slot></slot>
+          </div>
+
+          <div class="shared-confirm-actions">
+            <button
+              type="button"
+              class="shared-confirm-btn cancel"
+              :disabled="busy"
+              @click="handleCancel"
+            >
+              {{ cancelText }}
+            </button>
+            <button
+              type="button"
+              class="shared-confirm-btn confirm"
+              :class="confirmTone"
+              :disabled="busy"
+              @click="$emit('confirm')"
+            >
+              <i v-if="confirmIcon" :class="busy ? 'mdi mdi-loading mdi-spin' : confirmIcon"></i>
+              <span>{{ busy ? busyText : confirmText }}</span>
+            </button>
+          </div>
+        </section>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  badge: { type: String, default: '' },
+  badgeTone: { type: String, default: 'info' },
+  title: { type: String, required: true },
+  description: { type: String, default: '' },
+  cancelText: { type: String, default: '取消' },
+  confirmText: { type: String, default: '确认' },
+  busyText: { type: String, default: '处理中...' },
+  confirmTone: { type: String, default: 'primary' },
+  confirmIcon: { type: String, default: '' },
+  busy: { type: Boolean, default: false },
+  closeOnMask: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['close', 'cancel', 'confirm'])
+const instance = getCurrentInstance()
+
+const titleId = computed(() => `shared-confirm-title-${instance?.uid || 'dialog'}`)
+
+function handleMaskClose() {
+  if (!props.closeOnMask || props.busy) {
+    return
+  }
+
+  emit('close')
+}
+
+function handleCancel() {
+  if (props.busy) {
+    return
+  }
+
+  emit('cancel')
+  emit('close')
+}
+</script>
+
+<style scoped>
+.shared-confirm-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.32);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.shared-confirm-card {
+  width: min(480px, 100%);
+  display: grid;
+  gap: 14px;
+  padding: 24px;
+  border: 1px solid rgba(16, 185, 129, 0.14);
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
+  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.18);
+}
+
+.shared-confirm-badge {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.shared-confirm-badge.info {
+  background: rgba(59, 130, 246, 0.12);
+  color: #1d4ed8;
+}
+
+.shared-confirm-badge.warning {
+  background: rgba(245, 158, 11, 0.14);
+  color: #b45309;
+}
+
+.shared-confirm-badge.danger {
+  background: rgba(239, 68, 68, 0.12);
+  color: #dc2626;
+}
+
+.shared-confirm-card h4 {
+  margin: 0;
+  color: #0f172a;
+  font-size: 22px;
+  line-height: 1.35;
+  font-weight: 800;
+}
+
+.shared-confirm-card p {
+  margin: 0;
+  color: #5b6b83;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.shared-confirm-body {
+  display: grid;
+  gap: 10px;
+}
+
+.shared-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.shared-confirm-btn {
+  min-width: 140px;
+  min-height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 16px;
+  border-radius: 14px;
+  font-size: 14px;
+  font-weight: 800;
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
+}
+
+.shared-confirm-btn.cancel {
+  border: 1px solid #d7e0ea;
+  background: rgba(255, 255, 255, 0.92);
+  color: #475569;
+}
+
+.shared-confirm-btn.confirm {
+  border: 1px solid transparent;
+  color: #fff;
+}
+
+.shared-confirm-btn.confirm.primary {
+  background: linear-gradient(135deg, #10b981, #059669);
+  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.22);
+}
+
+.shared-confirm-btn.confirm.danger {
+  background: linear-gradient(135deg, #f97316, #ea580c);
+  box-shadow: 0 12px 24px rgba(234, 88, 12, 0.22);
+}
+
+.shared-confirm-btn.cancel:hover:not(:disabled) {
+  border-color: rgba(16, 185, 129, 0.3);
+  color: #047857;
+}
+
+.shared-confirm-btn.confirm:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.shared-confirm-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+  box-shadow: none;
+  transform: none;
+}
+
+.shared-confirm-enter-active,
+.shared-confirm-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.shared-confirm-enter-from,
+.shared-confirm-leave-to {
+  opacity: 0;
+}
+
+.shared-confirm-enter-from .shared-confirm-card,
+.shared-confirm-leave-to .shared-confirm-card {
+  transform: translateY(8px) scale(0.98);
+}
+
+@media (max-width: 720px) {
+  .shared-confirm-mask {
+    padding: 18px;
+  }
+
+  .shared-confirm-card {
+    padding: 20px;
+    border-radius: 20px;
+  }
+
+  .shared-confirm-card h4 {
+    font-size: 19px;
+  }
+
+  .shared-confirm-actions {
+    flex-direction: column;
+  }
+
+  .shared-confirm-btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/web/src/services/reimbursements.js b/web/src/services/reimbursements.js
new file mode 100644
index 0000000..c293d9e
--- /dev/null
+++ b/web/src/services/reimbursements.js
@@ -0,0 +1,29 @@
+import { apiRequest } from './api.js'
+
+export function fetchExpenseClaims() {
+  return apiRequest('/reimbursements/claims')
+}
+
+export function fetchExpenseClaimDetail(claimId) {
+  return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}`)
+}
+
+export function updateExpenseClaimItem(claimId, itemId, payload) {
+  return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}/items/${encodeURIComponent(String(itemId || '').trim())}`, {
+    method: 'PATCH',
+    body: JSON.stringify(payload)
+  })
+}
+
+export function submitExpenseClaim(claimId) {
+  return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}/submit`, {
+    method: 'POST',
+    body: JSON.stringify({})
+  })
+}
+
+export function deleteExpenseClaim(claimId) {
+  return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}`, {
+    method: 'DELETE'
+  })
+}