优化页面、修复BUG

client/src/components/admin/InquiryDetailModal.vue

@@ -0,0 +1,161 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+      @click.self="close"
+    >
+      <div class="bg-[#1a1a1a] border border-white/10 rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-hidden flex flex-col animate-reveal">
+        <div class="p-4 border-b border-white/10 flex justify-between items-center shrink-0">
+          <h3 class="text-lg font-serif italic text-white">咨询详情</h3>
+          <button type="button" @click="close" class="text-white/50 hover:text-white p-1">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+
+        <div v-if="inquiry" class="p-6 overflow-y-auto flex-1 space-y-4">
+          <div class="admin-card p-5 space-y-4">
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <p class="text-xs text-art-muted mb-1">姓名</p>
+                <p class="text-white font-medium">{{ inquiry.name }}</p>
+              </div>
+              <span class="px-2 py-1 rounded text-xs shrink-0" :class="statusClass">{{ statusLabel }}</span>
+            </div>
+
+            <div>
+              <p class="text-xs text-art-muted mb-1">公司 / 组织</p>
+              <p class="text-white/90">{{ inquiry.company || '—' }}</p>
+            </div>
+
+            <div>
+              <p class="text-xs text-art-muted mb-1">联系方式</p>
+              <p class="text-xs text-art-muted mb-2">{{ contactMethodLabel }}</p>
+              <div class="flex items-center gap-2 flex-wrap">
+                <span class="text-white font-mono break-all">{{ inquiry.contactValue }}</span>
+                <button
+                  type="button"
+                  class="admin-btn-secondary py-1 px-2 text-xs shrink-0"
+                  @click="copyContact"
+                >
+                  复制
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <p class="text-xs text-art-muted mb-1">预估预算</p>
+              <p class="text-white/90">{{ inquiry.budget || '—' }}</p>
+            </div>
+
+            <div>
+              <p class="text-xs text-art-muted mb-1">需求描述</p>
+              <p class="text-white/90 text-sm leading-relaxed whitespace-pre-wrap">{{ inquiry.description || '—' }}</p>
+            </div>
+
+            <div>
+              <p class="text-xs text-art-muted mb-1">提交时间</p>
+              <p class="text-white/70 text-sm">{{ formattedCreatedAt }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="p-4 border-t border-white/10 flex justify-end gap-2 shrink-0 bg-white/[0.02]">
+          <button type="button" class="admin-btn-secondary py-1.5 px-3 text-sm" @click="close">关闭</button>
+          <button
+            v-if="inquiry?.status === 0"
+            type="button"
+            class="admin-btn-secondary py-1.5 px-3 text-sm"
+            @click="emitStatus(1)"
+          >
+            标记已读
+          </button>
+          <button
+            v-if="inquiry?.status !== 2"
+            type="button"
+            class="admin-btn-primary py-1.5 px-3 text-sm"
+            @click="emitStatus(2)"
+          >
+            标记已联系
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Inquiry } from '../../services/api'
+import { useToast } from '../../composables/useToast'
+
+const props = defineProps<{
+  isOpen: boolean
+  inquiry: Inquiry | null
+}>()
+
+const emit = defineEmits<{
+  'update:isOpen': [value: boolean]
+  'update-status': [status: number]
+}>()
+
+const toast = useToast()
+
+const close = () => {
+  emit('update:isOpen', false)
+}
+
+const contactMethodLabel = computed(() => {
+  const map: Record<string, string> = {
+    wechat: '微信',
+    email: '邮箱',
+    phone: '电话'
+  }
+  return map[props.inquiry?.contactMethod || ''] || props.inquiry?.contactMethod || '—'
+})
+
+const statusLabel = computed(() => {
+  switch (props.inquiry?.status) {
+    case 0: return '未读'
+    case 1: return '已读'
+    case 2: return '已联系'
+    default: return '未知'
+  }
+})
+
+const statusClass = computed(() => {
+  switch (props.inquiry?.status) {
+    case 0: return 'bg-red-500/20 text-red-400'
+    case 1: return 'bg-blue-500/20 text-blue-400'
+    case 2: return 'bg-green-500/20 text-green-400'
+    default: return 'bg-gray-500/20 text-gray-400'
+  }
+})
+
+const formattedCreatedAt = computed(() => {
+  const raw = props.inquiry?.createdAt
+  if (raw === undefined || raw === null || raw === '') return '—'
+  const timestamp = typeof raw === 'number' ? raw : Number(raw)
+  if (Number.isNaN(timestamp)) return '—'
+  const ms = timestamp > 1e12 ? timestamp : timestamp * 1000
+  return new Date(ms).toLocaleString()
+})
+
+const copyContact = async () => {
+  const value = props.inquiry?.contactValue
+  if (!value) return
+  try {
+    await navigator.clipboard.writeText(value)
+    toast.success('已复制到剪贴板')
+  } catch {
+    toast.error('复制失败，请手动复制')
+  }
+}
+
+const emitStatus = (status: number) => {
+  emit('update-status', status)
+}
+</script>