合作页面的内容

2026-01-16 09:08:07 +08:00
parent e99560ba87
commit 7ed2f55282
13 changed files with 1327 additions and 106 deletions
--- a/client/src/components/InquiryModal.vue
+++ b/client/src/components/InquiryModal.vue
@@ -26,7 +26,7 @@
        </button>
        <form id="inquiry-form" class="space-y-10 relative z-10" @submit.prevent="handleSubmit">
          <div class="space-y-8">
-            <p class="font-mono text-xs text-art-accent uppercase tracking-widest border-b border-white/10 pb-2 mb-6">01 // 身份识别</p>
+            <p class="font-mono text-xs text-art-accent uppercase tracking-widest border-b border-white/10 pb-2 mb-6">01 身份识别</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div class="relative group/input">
                <input 
@@ -35,6 +35,7 @@
                  class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent" 
                  placeholder="Name"
                  v-model="formData.name"
+                  required
                >
                <label 
                  class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-autofill:-top-4 peer-autofill:text-art-accent pointer-events-none"
@@ -55,22 +56,44 @@
                >公司 / 组织</label>
              </div>
            </div>
+            
+            <!-- Contact Method Selection -->
+            <div class="space-y-4">
+               <label class="text-xs font-mono text-white/30 block">联系方式类型</label>
+               <RadioGroup 
+                 name="contactMethod" 
+                 :options="contactOptions"
+                 v-model="formData.contactMethod"
+               />
+            </div>
+
+            <!-- Dynamic Contact Input -->
            <div class="relative group/input">
-              <input 
-                name="contact" 
-                type="text" 
-                class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent" 
-                placeholder="Contact"
-                v-model="formData.contact"
-              >
-              <label 
-                class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-autofill:-top-4 peer-autofill:text-art-accent pointer-events-none"
-                :class="formData.contact ? '-top-4 text-white/50' : ''"
-              >联系方式 (Email / WeChat)</label>
+              <EmailAutocomplete
+                v-if="formData.contactMethod === 'email'"
+                name="contactValue"
+                label="邮箱地址"
+                v-model="formData.contactValue"
+              />
+              <div v-else class="relative group/input">
+                <input 
+                  name="contactValue" 
+                  type="text" 
+                  class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent" 
+                  placeholder="Contact"
+                  v-model="formData.contactValue"
+                  required
+                >
+                <label 
+                  class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-autofill:-top-4 peer-autofill:text-art-accent pointer-events-none"
+                  :class="formData.contactValue ? '-top-4 text-white/50' : ''"
+                >{{ getContactLabel }}</label>
+              </div>
            </div>
          </div>
+          
          <div class="space-y-6">
-            <p class="font-mono text-xs text-art-accent uppercase tracking-widest border-b border-white/10 pb-2 mb-6">02 // 项目细节</p>
+            <p class="font-mono text-xs text-art-accent uppercase tracking-widest border-b border-white/10 pb-2 mb-6">02 项目细节</p>
            <div class="space-y-3">
              <label class="text-xs font-mono text-white/30 block mb-2">预估预算范围</label>
              <div class="flex flex-wrap gap-3">
@@ -78,7 +101,7 @@
                  <input 
                    type="radio" 
                    name="budget" 
-                    value="10k-50k" 
+                    value="1w-5w" 
                    class="peer hidden"
                    v-model="formData.budget"
                  >
@@ -88,7 +111,7 @@
                  <input 
                    type="radio" 
                    name="budget" 
-                    value="50k-200k" 
+                    value="5w-20w" 
                    class="peer hidden"
                    v-model="formData.budget"
                  >
@@ -98,7 +121,7 @@
                  <input 
                    type="radio" 
                    name="budget" 
-                    value="200k+" 
+                    value="20w+" 
                    class="peer hidden"
                    v-model="formData.budget"
                  >
@@ -124,12 +147,14 @@
          <div class="pt-6">
            <button 
              type="submit" 
-              class="group relative w-full overflow-hidden bg-white text-black rounded-full font-bold hover:scale-105 transition-transform"
+              class="group relative w-full overflow-hidden bg-art-accent text-black rounded-full font-bold hover:scale-105 transition-transform"
+              :disabled="isSubmitting"
            >
-              <div class="absolute inset-0 w-0 bg-art-accent transition-all duration-[250ms] ease-out group-hover:w-full"></div>
+              <div class="absolute inset-0 w-0 bg-white transition-all duration-[250ms] ease-out group-hover:w-full"></div>
              <span class="relative flex items-center justify-between z-10 px-8 py-4">
-                <span class="font-mono uppercase tracking-widest text-sm">INITIATE_PROTOCOL // 发送</span>
-                <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
+                <span class="font-mono uppercase tracking-widest text-sm">{{ isSubmitting ? '发送中...' : '发送' }}</span>
+                <i v-if="!isSubmitting" data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
+                <i v-else data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
              </span>
            </button>
            <p class="mt-4 text-[10px] text-white/20 font-mono text-center tracking-widest">SECURED BY DIGITAL FINGERPRINTING</p>
@@ -141,16 +166,36 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
+import RadioGroup from './ui/RadioGroup.vue'
+import EmailAutocomplete from './ui/EmailAutocomplete.vue'
+import { submitInquiry } from '../services/api'
+
+const isSubmitting = ref(false)

 const formData = ref({
  name: '',
  company: '',
-  contact: '',
-  budget: '',
+  contactMethod: 'wechat',
+  contactValue: '',
+  budget: '1w-5w',
  description: ''
 })

+const contactOptions = [
+  { label: '微信', value: 'wechat', icon: 'message-circle' },
+  { label: '邮箱', value: 'email', icon: 'mail' },
+  { label: '电话', value: 'phone', icon: 'phone' }
+]
+
+const getContactLabel = computed(() => {
+  switch (formData.value.contactMethod) {
+    case 'wechat': return '微信号'
+    case 'phone': return '手机号码'
+    default: return '联系方式'
+  }
+})
+
 const openModal = () => {
  const modal = document.getElementById('inquiry-modal')
  if (modal) {
@@ -169,11 +214,37 @@ const closeModal = () => {
  }
 }

-const handleSubmit = () => {
-  console.log('Form submitted:', formData.value)
-  // 这里可以添加表单提交逻辑
-  closeModal()
-  showToast('合作咨询已发送，我们会尽快与您联系！')
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+  isSubmitting.value = true
+  
+  try {
+    await submitInquiry({
+      name: formData.value.name,
+      company: formData.value.company,
+      contactMethod: formData.value.contactMethod,
+      contactValue: formData.value.contactValue,
+      budget: formData.value.budget,
+      description: formData.value.description
+    })
+    
+    closeModal()
+    showToast('合作咨询已发送，我们会尽快与您联系！')
+    // Reset form
+    formData.value = {
+      name: '',
+      company: '',
+      contactMethod: 'wechat',
+      contactValue: '',
+      budget: '1w-5w',
+      description: ''
+    }
+  } catch (error) {
+    console.error(error)
+    showToast('发送失败，请稍后重试', 'error')
+  } finally {
+    isSubmitting.value = false
+  }
 }

 const autoResizeTextarea = (event: Event) => {
@@ -189,8 +260,8 @@ const showToast = (message: string, type: string = 'success') => {
    toast.className = `toast ${type === 'success' ? 'toast-success' : 'toast-error'}`
    toast.innerHTML = `<i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-5 h-5 ${type === 'success' ? 'text-[#d4b383]' : 'text-red-500'}"></i><span class="text-sm font-medium">${message}</span>`
    container.appendChild(toast)
-    if (window.lucide) {
-      window.lucide.createIcons()
+    if ((window as any).lucide) {
+      (window as any).lucide.createIcons()
    }
    requestAnimationFrame(() => toast.classList.add('show'))
    setTimeout(() => {
@@ -201,6 +272,17 @@ const showToast = (message: string, type: string = 'success') => {
 }

 // 暴露方法给全局使用
-window.openInquiry = openModal
-window.closeInquiry = closeModal
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    (window as any).openInquiry = openModal;
+    (window as any).closeInquiry = closeModal;
+  }
+})
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    delete (window as any).openInquiry;
+    delete (window as any).closeInquiry;
+  }
+})
 </script>
--- a/client/src/components/admin/AdminLayout.vue
+++ b/client/src/components/admin/AdminLayout.vue
@@ -1,83 +1,47 @@
 <template>
  <div class="admin-layout">
    <!-- Sidebar Navigation -->
-    <aside class="admin-sidebar">
+    <aside class="admin-sidebar" :class="{ 'collapsed': !isSidebarOpen }">
      <div class="sidebar-header">
        <h1 class="sidebar-title">管理后台</h1>
      </div>
      <nav class="sidebar-nav">
        <ul>
-          <li>
-            <router-link to="/admin/dashboard" class="nav-link" active-class="active">
-              <span class="nav-icon">📊</span>
-              <span class="nav-text">仪表盘</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/users" class="nav-link" active-class="active">
-              <span class="nav-icon">👥</span>
-              <span class="nav-text">用户管理</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/roles" class="nav-link" active-class="active">
-              <span class="nav-icon">🔒</span>
-              <span class="nav-text">角色管理</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/posts" class="nav-link" active-class="active">
-              <span class="nav-icon">📝</span>
-              <span class="nav-text">文章管理</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/works" class="nav-link" active-class="active">
-              <span class="nav-icon">🎨</span>
-              <span class="nav-text">作品管理</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/tags" class="nav-link" active-class="active">
-              <span class="nav-icon">🏷️</span>
-              <span class="nav-text">标签管理</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/about" class="nav-link" active-class="active">
-              <span class="nav-icon">👤</span>
-              <span class="nav-text">关于页面</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/testimonials" class="nav-link" active-class="active">
-              <span class="nav-icon">💬</span>
-              <span class="nav-text">客户评价</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/partners" class="nav-link" active-class="active">
-              <span class="nav-icon">🤝</span>
-              <span class="nav-text">合作伙伴</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/snippets" class="nav-link" active-class="active">
-              <span class="nav-icon">💻</span>
-              <span class="nav-text">代码片段</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/settings" class="nav-link" active-class="active">
-              <span class="nav-icon">⚙️</span>
-              <span class="nav-text">系统配置</span>
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/admin/logs" class="nav-link" active-class="active">
-              <span class="nav-icon">📋</span>
-              <span class="nav-text">操作日志</span>
+          <li v-for="(item, index) in menuItems" :key="index">
+            <!-- Parent Menu Item -->
+            <div 
+              v-if="item.children" 
+              class="nav-item-parent" 
+              :class="{ 'expanded': item.isOpen }"
+              @click="toggleMenu(index)"
+            >
+              <div class="nav-link-content">
+                <span class="nav-icon">{{ item.icon }}</span>
+                <span class="nav-text">{{ item.title }}</span>
+              </div>
+              <span class="nav-arrow">▼</span>
+            </div>
+            
+            <!-- Single Menu Item -->
+            <router-link 
+              v-else 
+              :to="item.path || ''" 
+              class="nav-link" 
+              active-class="active"
+            >
+              <span class="nav-icon">{{ item.icon }}</span>
+              <span class="nav-text">{{ item.title }}</span>
            </router-link>
+
+            <!-- Submenu -->
+            <ul v-if="item.children" class="submenu" :style="{ maxHeight: item.isOpen ? (item.children.length * 50) + 'px' : '0px' }">
+              <li v-for="(child, childIndex) in item.children" :key="childIndex">
+                <router-link :to="child.path" class="nav-link sub-link" active-class="active">
+                  <span class="nav-icon">{{ child.icon }}</span>
+                  <span class="nav-text">{{ child.title }}</span>
+                </router-link>
+              </li>
+            </ul>
          </li>
        </ul>
      </nav>
@@ -124,6 +88,74 @@ const toast = useToast()
 const isSidebarOpen = ref(true)
 const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))

+interface MenuItem {
+  title: string
+  icon: string
+  path?: string
+  children?: { title: string; path: string; icon: string }[]
+  isOpen?: boolean
+}
+
+const menuItems = ref<MenuItem[]>([
+  {
+    title: '概览',
+    icon: '📊',
+    path: '/admin/dashboard'
+  },
+  {
+    title: '内容管理',
+    icon: '📚',
+    isOpen: true,
+    children: [
+      { title: '文章管理', path: '/admin/posts', icon: '📝' },
+      { title: '作品管理', path: '/admin/works', icon: '🎨' },
+      { title: '代码片段', path: '/admin/snippets', icon: '💻' },
+      { title: '标签管理', path: '/admin/tags', icon: '🏷️' }
+    ]
+  },
+  {
+    title: '页面配置',
+    icon: '🔧',
+    isOpen: false,
+    children: [
+      { title: '关于页面', path: '/admin/about', icon: '👤' },
+      { title: '客户评价', path: '/admin/testimonials', icon: '💬' },
+      { title: '合作伙伴', path: '/admin/partners', icon: '🤝' }
+    ]
+  },
+  {
+    title: '业务中心',
+    icon: '💼',
+    isOpen: false,
+    children: [
+      { title: '合作咨询', path: '/admin/inquiries', icon: '📩' },
+      { title: '邮箱配置', path: '/admin/email-suffixes', icon: '📧' }
+    ]
+  },
+  {
+    title: '用户权限',
+    icon: '🛡️',
+    isOpen: false,
+    children: [
+      { title: '用户管理', path: '/admin/users', icon: '👥' },
+      { title: '角色管理', path: '/admin/roles', icon: '🔒' }
+    ]
+  },
+  {
+    title: '系统设置',
+    icon: '⚙️',
+    isOpen: false,
+    children: [
+      { title: '全局配置', path: '/admin/settings', icon: '🛠️' },
+      { title: '操作日志', path: '/admin/logs', icon: '📋' }
+    ]
+  }
+])
+
+const toggleMenu = (index: number) => {
+  menuItems.value[index].isOpen = !menuItems.value[index].isOpen
+}
+
 const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
 }
@@ -163,6 +195,16 @@ onMounted(() => {
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow-y: auto;
+}
+
+.admin-sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.admin-sidebar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
 }

 .sidebar-header {
@@ -190,7 +232,7 @@ onMounted(() => {
  margin: 0;
 }

-.nav-link {
+.nav-link, .nav-item-parent {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
@@ -199,9 +241,19 @@ onMounted(() => {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 3px solid transparent;
  position: relative;
+  cursor: pointer;
 }

-.nav-link:hover {
+.nav-item-parent {
+  justify-content: space-between;
+}
+
+.nav-link-content {
+  display: flex;
+  align-items: center;
+}
+
+.nav-link:hover, .nav-item-parent:hover {
  background-color: rgba(212, 179, 131, 0.1);
  color: white;
  border-left-color: rgba(212, 179, 131, 0.3);
@@ -217,6 +269,8 @@ onMounted(() => {
 .nav-icon {
  margin-right: 0.75rem;
  font-size: 1.1rem;
+  min-width: 1.5rem;
+  text-align: center;
 }

 .nav-text {
@@ -224,6 +278,35 @@ onMounted(() => {
  font-family: 'Inter', sans-serif;
 }

+.nav-arrow {
+  font-size: 0.7rem;
+  transition: transform 0.3s ease;
+  opacity: 0.5;
+}
+
+.nav-item-parent.expanded .nav-arrow {
+  transform: rotate(180deg);
+  opacity: 1;
+}
+
+/* Submenu Styles */
+.submenu {
+  background-color: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+}
+
+.sub-link {
+  padding-left: 2.5rem;
+  font-size: 0.9rem;
+  border-left: 3px solid transparent;
+}
+
+.sub-link .nav-icon {
+  font-size: 1rem;
+  margin-right: 0.5rem;
+}
+
 .sidebar-footer {
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
@@ -356,4 +439,4 @@ onMounted(() => {
    transform: translateX(-100%);
  }
 }
-</style>
+</style>
--- a/client/src/components/ui/EmailAutocomplete.vue
+++ b/client/src/components/ui/EmailAutocomplete.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="relative group/input" ref="containerRef">
+    <input 
+      :name="name" 
+      type="text" 
+      class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent" 
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="showDropdown = true"
+      @blur="handleBlur"
+      autocomplete="off"
+    >
+    <label 
+      class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-autofill:-top-4 peer-autofill:text-art-accent pointer-events-none"
+      :class="modelValue ? '-top-4 text-white/50' : ''"
+    >{{ label }}</label>
+
+    <!-- Autocomplete Dropdown -->
+    <div v-if="showDropdown && suggestions.length > 0" class="absolute z-50 left-0 right-0 top-full mt-1 bg-[#1a1a1a] border border-white/10 shadow-lg max-h-48 overflow-y-auto rounded-b-md">
+      <div 
+        v-for="(suggestion, index) in suggestions" 
+        :key="index"
+        class="px-4 py-2 text-sm text-white/70 hover:bg-art-accent hover:text-black cursor-pointer transition-colors font-mono"
+        @mousedown.prevent="selectSuggestion(suggestion)"
+      >
+        {{ suggestion }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { fetchEmailSuffixes, type EmailSuffix } from '../../services/api'
+
+const props = defineProps<{
+  name: string
+  label: string
+  placeholder?: string
+  modelValue: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const showDropdown = ref(false)
+const emailSuffixes = ref<string[]>([])
+const containerRef = ref<HTMLElement | null>(null)
+
+// Load suffixes from API
+onMounted(async () => {
+  try {
+    const suffixes = await fetchEmailSuffixes()
+    emailSuffixes.value = suffixes.map(s => s.suffix)
+  } catch (e) {
+    // Fallback defaults if API fails
+    emailSuffixes.value = ['@gmail.com', '@163.com', '@qq.com', '@outlook.com']
+  }
+})
+
+const handleInput = (e: Event) => {
+  const val = (e.target as HTMLInputElement).value
+  emit('update:modelValue', val)
+  showDropdown.value = true
+}
+
+const handleBlur = () => {
+  // Delay hiding to allow click event on dropdown to fire
+  setTimeout(() => {
+    showDropdown.value = false
+  }, 200)
+}
+
+const suggestions = computed(() => {
+  if (!props.modelValue || props.modelValue.includes('@')) return []
+  return emailSuffixes.value.map(suffix => `${props.modelValue}${suffix}`)
+})
+
+const selectSuggestion = (val: string) => {
+  emit('update:modelValue', val)
+  showDropdown.value = false
+}
+</script>
--- a/client/src/components/ui/RadioGroup.vue
+++ b/client/src/components/ui/RadioGroup.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-wrap gap-3">
+    <label v-for="option in options" :key="option.value" class="cursor-pointer group">
+      <input 
+        type="radio" 
+        :name="name" 
+        :value="option.value" 
+        :checked="modelValue === option.value"
+        @change="$emit('update:modelValue', option.value)"
+        class="peer hidden"
+      >
+      <span class="px-4 py-2 border border-white/10 rounded-none text-xs font-mono text-white/50 hover:border-art-accent hover:text-white transition-all peer-checked:bg-art-accent peer-checked:text-black peer-checked:border-art-accent flex items-center gap-2">
+        <i v-if="option.icon" :data-lucide="option.icon" class="w-3 h-3"></i>
+        {{ option.label }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onUpdated, nextTick } from 'vue'
+
+interface Option {
+  label: string
+  value: string
+  icon?: string
+}
+
+const props = defineProps<{
+  name: string
+  options: Option[]
+  modelValue: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+onUpdated(() => {
+  nextTick(() => {
+    if ((window as any).lucide) {
+      (window as any).lucide.createIcons()
+    }
+  })
+})
+</script>