数据结构优化

client/src/pages/admin/WorkForm.vue

@@ -13,6 +13,7 @@
             v-model="form.title"
             placeholder="请输入作品标题"
             required
+            class="admin-input"
           />
           <div class="error-message" v-if="errors.title">
             {{ errors.title }}
@@ -28,6 +29,7 @@
             v-model="form.category"
             placeholder="请输入作品分类"
             required
+            class="admin-input"
           />
           <div class="error-message" v-if="errors.category">
             {{ errors.category }}
@@ -43,6 +45,7 @@
             v-model="form.year"
             placeholder="请输入创作年份"
             required
+            class="admin-input"
           />
           <div class="error-message" v-if="errors.year">
             {{ errors.year }}
@@ -51,13 +54,10 @@
         
         <!-- Hero Image Field -->
         <div class="form-group">
-          <label for="heroImg">作品主图 URL</label>
-          <input 
-            type="url" 
-            id="heroImg" 
+          <label>作品主图</label>
+          <ImageUpload 
             v-model="form.heroImg"
-            placeholder="请输入作品主图 URL"
-            required
+            :category-id="1"
           />
           <div class="error-message" v-if="errors.heroImg">
             {{ errors.heroImg }}
@@ -73,52 +73,150 @@
             placeholder="请输入作品描述"
             rows="5"
             required
+            class="admin-input resize-none"
           ></textarea>
           <div class="error-message" v-if="errors.desc">
             {{ errors.desc }}
           </div>
         </div>
         
-        <!-- Tech Stack Field (Simplified for now) -->
+        <!-- Tech Stack Field -->
         <div class="form-group">
-          <label for="techStack">技术栈（JSON格式）</label>
-          <textarea 
-            id="techStack" 
-            v-model="techStackJson"
-            placeholder='请输入技术栈 JSON，例如：[{"category": "前端", "items": ["Vue 3", "TypeScript"]}]'
-            rows="3"
-            required
-          ></textarea>
+          <div class="flex justify-between items-center mb-2">
+            <label>技术栈</label>
+            <button 
+              type="button" 
+              @click="addTechStackCategory"
+              class="admin-btn-secondary text-xs py-1 px-3"
+            >
+              + 添加分类
+            </button>
+          </div>
+          
+          <div class="space-y-4">
+            <div
+              v-for="(item, index) in form.techStack"
+              :key="index"
+              class="tech-stack-item p-4 border border-white/10 rounded-lg bg-white/5 relative"
+            >
+              <button
+                type="button"
+                @click="removeTechStackCategory(index)"
+                class="absolute top-2 right-2 text-red-400 hover:text-red-300 text-lg"
+              >
+                &times;
+              </button>
+              
+              <div class="space-y-3">
+                <div>
+                  <label class="block text-xs text-art-muted mb-1">分类名称</label>
+                  <input
+                    type="text"
+                    v-model="item.category"
+                    placeholder="例如：前端"
+                    class="admin-input text-sm"
+                  />
+                </div>
+                
+                <div>
+                  <div class="flex justify-between items-center mb-1">
+                    <label class="block text-xs text-art-muted">技术标签</label>
+                    <button
+                      type="button"
+                      @click="addTechItem(index)"
+                      class="text-xs text-art-accent hover:text-art-accent/80"
+                    >
+                      + 添加标签
+                    </button>
+                  </div>
+                  
+                  <div class="space-y-2">
+                    <div
+                      v-for="(tech, techIndex) in item.items"
+                      :key="techIndex"
+                      class="flex gap-2"
+                    >
+                      <input
+                        type="text"
+                        v-model="item.items[techIndex]"
+                        placeholder="例如：Vue 3"
+                        class="admin-input text-sm flex-1"
+                      />
+                      <button
+                        type="button"
+                        @click="removeTechItem(index, techIndex)"
+                        class="px-3 py-2 text-red-400 hover:text-red-300 text-sm"
+                      >
+                        删除
+                      </button>
+                    </div>
+                    
+                    <div v-if="item.items.length === 0" class="text-center text-art-muted text-sm py-2">
+                      暂无技术标签，请点击"添加标签"
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div v-if="form.techStack.length === 0" class="text-center text-art-muted py-4 border border-dashed border-white/10 rounded-lg">
+              暂无技术栈分类，请点击"添加分类"
+            </div>
+          </div>
+          
           <div class="error-message" v-if="errors.techStack">
             {{ errors.techStack }}
           </div>
         </div>
         
-        <!-- Gallery Field (Simplified for now) -->
+        <!-- Gallery Field -->
         <div class="form-group">
-          <label for="gallery">作品图库（JSON格式）</label>
-          <textarea 
-            id="gallery" 
-            v-model="galleryJson"
-            placeholder='请输入图库 JSON，例如：["image1.jpg", "image2.jpg"]'
-            rows="3"
-            required
-          ></textarea>
+          <label>作品图库</label>
+          <ImageUpload 
+            v-model="form.gallery"
+            :multiple="true"
+            :max-count="20"
+            :category-id="1"
+          />
           <div class="error-message" v-if="errors.gallery">
             {{ errors.gallery }}
           </div>
         </div>
         
-        <!-- Links Field (Simplified for now) -->
+        <!-- Links Field -->
         <div class="form-group">
-          <label for="links">链接（JSON格式）</label>
-          <textarea 
-            id="links" 
-            v-model="linksJson"
-            placeholder='请输入链接 JSON，例如：{"live": "https://example.com"}'
-            rows="3"
-            required
-          ></textarea>
+          <label>链接</label>
+          <div class="space-y-3">
+            <div>
+              <label class="block text-xs text-art-muted mb-1">在线演示链接</label>
+              <input
+                type="url"
+                v-model="form.links.live"
+                placeholder="https://example.com"
+                class="admin-input"
+              />
+            </div>
+            
+            <div>
+              <label class="block text-xs text-art-muted mb-1">GitHub 链接</label>
+              <input
+                type="url"
+                v-model="form.links.github"
+                placeholder="https://github.com/..."
+                class="admin-input"
+              />
+            </div>
+            
+            <div>
+              <label class="block text-xs text-art-muted mb-1">演示链接</label>
+              <input
+                type="url"
+                v-model="form.links.demo"
+                placeholder="https://demo.example.com"
+                class="admin-input"
+              />
+            </div>
+          </div>
           <div class="error-message" v-if="errors.links">
             {{ errors.links }}
           </div>
@@ -126,10 +224,10 @@
         
         <!-- Submit Buttons -->
         <div class="form-actions">
-          <button type="button" class="cancel-btn" @click="handleCancel">
+          <button type="button" class="admin-btn-secondary" @click="handleCancel">
             取消
           </button>
-          <button type="submit" class="submit-btn" :disabled="isSubmitting">
+          <button type="submit" class="admin-btn-primary" :disabled="isSubmitting">
             {{ isSubmitting ? '提交中...' : (isEditing ? '更新作品' : '创建作品') }}
           </button>
         </div>
@@ -139,10 +237,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed, watch } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useToast } from '../../composables/useToast'
 import { createWork, updateWork, fetchWork } from '../../services/api'
+import ImageUpload from '../../components/admin/ImageUpload.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -162,41 +261,32 @@ const form = reactive({
   desc: '',
   techStack: [] as { category: string; items: string[] }[],
   gallery: [] as string[],
-  links: { live: '' }
+  links: {
+    live: '',
+    github: '',
+    demo: ''
+  } as { live?: string; github?: string; demo?: string }
 })
 
-// JSON string representations for easy editing
-const techStackJson = ref('[]')
-const galleryJson = ref('[]')
-const linksJson = ref('{"live": ""}')
+// Tech Stack management
+const addTechStackCategory = () => {
+  form.techStack.push({
+    category: '',
+    items: []
+  })
+}
 
-// Watch JSON strings and update form data
-watch(techStackJson, (newVal) => {
-  try {
-    form.techStack = JSON.parse(newVal)
-    delete errors.techStack
-  } catch (e) {
-    // Validation will catch this
-  }
-})
+const removeTechStackCategory = (index: number) => {
+  form.techStack.splice(index, 1)
+}
 
-watch(galleryJson, (newVal) => {
-  try {
-    form.gallery = JSON.parse(newVal)
-    delete errors.gallery
-  } catch (e) {
-    // Validation will catch this
-  }
-})
+const addTechItem = (categoryIndex: number) => {
+  form.techStack[categoryIndex].items.push('')
+}
 
-watch(linksJson, (newVal) => {
-  try {
-    form.links = JSON.parse(newVal)
-    delete errors.links
-  } catch (e) {
-    // Validation will catch this
-  }
-})
+const removeTechItem = (categoryIndex: number, itemIndex: number) => {
+  form.techStack[categoryIndex].items.splice(itemIndex, 1)
+}
 
 // Validation function
 const validateForm = (): boolean => {
@@ -225,7 +315,7 @@ const validateForm = (): boolean => {
   
   // Validate hero image
   if (!form.heroImg.trim()) {
-    errors.heroImg = '作品主图 URL 不能为空'
+    errors.heroImg = '作品主图不能为空'
     isValid = false
   }
   
@@ -235,28 +325,32 @@ const validateForm = (): boolean => {
     isValid = false
   }
   
-  // Validate tech stack JSON
-  try {
-    JSON.parse(techStackJson.value)
-  } catch (e) {
-    errors.techStack = '技术栈 JSON 格式无效'
-    isValid = false
-  }
-  
-  // Validate gallery JSON
-  try {
-    JSON.parse(galleryJson.value)
-  } catch (e) {
-    errors.gallery = '图库 JSON 格式无效'
-    isValid = false
-  }
-  
-  // Validate links JSON
-  try {
-    JSON.parse(linksJson.value)
-  } catch (e) {
-    errors.links = '链接 JSON 格式无效'
+  // Validate tech stack
+  if (form.techStack.length === 0) {
+    errors.techStack = '请至少添加一个技术栈分类'
     isValid = false
+  } else {
+    for (let i = 0; i < form.techStack.length; i++) {
+      const item = form.techStack[i]
+      if (!item.category.trim()) {
+        errors.techStack = `第 ${i + 1} 个分类的名称不能为空`
+        isValid = false
+        break
+      }
+      if (item.items.length === 0) {
+        errors.techStack = `第 ${i + 1} 个分类至少需要一个技术标签`
+        isValid = false
+        break
+      }
+      for (let j = 0; j < item.items.length; j++) {
+        if (!item.items[j].trim()) {
+          errors.techStack = `第 ${i + 1} 个分类的第 ${j + 1} 个技术标签不能为空`
+          isValid = false
+          break
+        }
+      }
+      if (!isValid) break
+    }
   }
   
   return isValid
@@ -274,18 +368,18 @@ const handleSubmit = async () => {
     if (isEditing.value) {
       // Update existing work
       await updateWork(route.params.id as string, form)
-      toast.success('作品更新成功')
+      toast.showToast('作品更新成功', 'success')
     } else {
       // Create new work
       await createWork(form)
-      toast.success('作品创建成功')
+      toast.showToast('作品创建成功', 'success')
     }
     
     // Redirect to works list
     router.push('/admin/works')
   } catch (error: any) {
     console.error('Error submitting form:', error)
-    toast.error(error.message || (isEditing.value ? '更新作品失败' : '创建作品失败'))
+    toast.showToast(error.message || (isEditing.value ? '更新作品失败' : '创建作品失败'), 'error')
   } finally {
     isSubmitting.value = false
   }
@@ -308,17 +402,22 @@ onMounted(async () => {
       form.year = work.year
       form.heroImg = work.heroImg
       form.desc = work.desc
-      form.techStack = work.techStack
-      form.gallery = work.gallery
-      form.links = work.links
+      form.techStack = work.techStack || []
+      form.gallery = work.gallery || []
       
-      // Update JSON string representations
-      techStackJson.value = JSON.stringify(work.techStack, null, 2)
-      galleryJson.value = JSON.stringify(work.gallery, null, 2)
-      linksJson.value = JSON.stringify(work.links, null, 2)
+      // Handle links - support both old format (just live) and new format
+      if (typeof work.links === 'object' && work.links !== null) {
+        form.links = {
+          live: work.links.live || '',
+          github: (work.links as any).github || '',
+          demo: (work.links as any).demo || ''
+        }
+      } else {
+        form.links = { live: '', github: '', demo: '' }
+      }
     } catch (error: any) {
       console.error('Failed to fetch work data:', error)
-      toast.error('加载作品数据失败: ' + (error.message || '未知错误'))
+      toast.showToast('加载作品数据失败: ' + (error.message || '未知错误'), 'error')
     }
   }
 })
@@ -364,34 +463,6 @@ onMounted(async () => {
   font-family: 'Inter', sans-serif;
 }
 
-.form-group input,
-.form-group textarea,
-.form-group select {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 0.5rem;
-  font-size: 0.95rem;
-  background: rgba(255, 255, 255, 0.05);
-  color: white;
-  font-family: 'Inter', sans-serif;
-  resize: vertical;
-}
-
-.form-group input::placeholder,
-.form-group textarea::placeholder,
-.form-group select::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.form-group input:focus,
-.form-group textarea:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #d4b383;
-  box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
-}
-
 .error-message {
   color: #ef4444;
   font-size: 0.875rem;
@@ -405,46 +476,12 @@ onMounted(async () => {
   margin-top: 2rem;
 }
 
-.cancel-btn {
-  padding: 0.75rem 1.5rem;
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  font-family: 'Inter', sans-serif;
+.tech-stack-item {
+  transition: all 0.2s;
 }
 
-.cancel-btn:hover {
-  background: rgba(212, 179, 131, 0.1);
-  border-color: #d4b383;
-  color: #d4b383;
-}
-
-.submit-btn {
-  padding: 0.75rem 1.5rem;
-  background-color: #d4b383;
-  color: #050505;
-  border: 1px solid #d4b383;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  font-family: 'Inter', sans-serif;
-}
-
-.submit-btn:hover:not(:disabled) {
-  background-color: transparent;
-  color: #d4b383;
-  transform: translateY(-1px);
-  box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
-}
-
-.submit-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.tech-stack-item:hover {
+  border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Responsive Design */
@@ -457,8 +494,8 @@ onMounted(async () => {
     flex-direction: column;
   }
   
-  .cancel-btn,
-  .submit-btn {
+  .admin-btn-secondary,
+  .admin-btn-primary {
     width: 100%;
   }
 }