1. 海报

2026-08-03 09:31:32 +08:00
parent 38558b0b43
commit 631c1afcc0
16 changed files with 1921 additions and 9 deletions
--- a/hunliji-api/configsection/section.go
+++ b/hunliji-api/configsection/section.go
@@ -10,7 +10,7 @@ import (

 type templateConfig struct {
 	ID         uint   `gorm:"primaryKey"`
-	ConfigData string `gorm:"type:json;column:config_data;not null;default:'{}'"`
+	ConfigData string `gorm:"type:json;column:config_data;not null"`
 }

 func (templateConfig) TableName() string { return "template_configs" }
@@ -75,7 +75,7 @@ func saveConfigMap(m map[string]interface{}) error {
 		return err
 	}
 	var config templateConfig
-	db.FirstOrCreate(&config, 1)
+	db.Attrs(templateConfig{ConfigData: "{}"}).FirstOrCreate(&config, templateConfig{ID: 1})
 	config.ConfigData = string(jsonBytes)
 	return db.Save(&config).Error
 }
--- a/hunliji-api/main.go
+++ b/hunliji-api/main.go
@@ -29,6 +29,7 @@ func migrateSchema(db *gorm.DB) {
 		name    string
 	}{
 		{&models.TemplateConfig{}, "请柬模板配置", "template_configs"},
+		{&models.PosterConfig{}, "邀请函海报配置", "poster_configs"},
 		{&models.UploadConfig{}, "上传配置", "upload_configs"},
 		{&models.Rsvp{}, "出席回执", "rsvps"},
 		{&models.Danmaku{}, "祝福弹幕", "danmakus"},
--- a/hunliji-api/models/models.go
+++ b/hunliji-api/models/models.go
@@ -3,13 +3,22 @@ package models
 import "time"

 type TemplateConfig struct {
-	ID         uint      `gorm:"primaryKey;comment:主键ID" json:"id"`
-	ConfigData string    `gorm:"type:json;column:config_data;not null;default:'{}';comment:请柬配置JSON" json:"config_data"`
+	ID uint `gorm:"primaryKey;comment:主键ID" json:"id"`
+	// 旧版 MySQL 的 JSON 列不能带 DEFAULT，空值由业务层回落为 {}
+	ConfigData string    `gorm:"type:json;column:config_data;not null;comment:请柬配置JSON" json:"config_data"`
 	UpdatedAt  time.Time `gorm:"column:updated_at;comment:更新时间" json:"updated_at"`
 }

 func (TemplateConfig) TableName() string { return "template_configs" }

+type PosterConfig struct {
+	ID         uint      `gorm:"primaryKey;comment:主键ID" json:"id"`
+	ConfigData string    `gorm:"type:json;column:config_data;not null;comment:海报配置JSON" json:"config_data"`
+	UpdatedAt  time.Time `gorm:"column:updated_at;comment:更新时间" json:"updated_at"`
+}
+
+func (PosterConfig) TableName() string { return "poster_configs" }
+
 type UploadConfig struct {
 	ID              uint      `gorm:"primaryKey;comment:主键ID" json:"id"`
 	Provider        string    `gorm:"column:provider;size:20;not null;default:local;comment:上传方式 local|oss" json:"provider"`
--- a/hunliji-api/posterconfig/poster.go
+++ b/hunliji-api/posterconfig/poster.go
@@ -0,0 +1,138 @@
+package posterconfig
+
+import (
+	"encoding/json"
+	"strings"
+
+	"hunliji-api/models"
+
+	"github.com/gin-gonic/gin"
+	"gorm.io/gorm"
+)
+
+var (
+	db           *gorm.DB
+	requireAdmin func(*gin.Context) bool
+)
+
+// Register 挂载海报配置路由：GET 公开，POST 需管理员
+func Register(api *gin.RouterGroup, database *gorm.DB, adminGuard func(*gin.Context) bool) {
+	db = database
+	requireAdmin = adminGuard
+	api.GET("/poster/config", handleGetPosterConfig)
+	api.POST("/poster/config", handleSavePosterConfig)
+}
+
+func resolveSide(raw string) string {
+	v := strings.ToLower(strings.TrimSpace(raw))
+	switch v {
+	case "female", "nv", "f", "bride":
+		return "female"
+	case "male", "n", "m", "groom":
+		return "male"
+	default:
+		return ""
+	}
+}
+
+func isLegacyFlat(m map[string]interface{}) bool {
+	if m == nil {
+		return false
+	}
+	if _, ok := m["male"]; ok {
+		return false
+	}
+	if _, ok := m["female"]; ok {
+		return false
+	}
+	for _, k := range []string{"title", "lines", "heroImg", "sonName"} {
+		if _, ok := m[k]; ok {
+			return true
+		}
+	}
+	return false
+}
+
+func emptyObj() map[string]interface{} {
+	return map[string]interface{}{}
+}
+
+func asObject(v interface{}) map[string]interface{} {
+	if m, ok := v.(map[string]interface{}); ok {
+		return m
+	}
+	return emptyObj()
+}
+
+// normalizeBundle 统一为 { male, female }；旧扁平配置迁入 male
+func normalizeBundle(raw map[string]interface{}) map[string]interface{} {
+	if raw == nil {
+		raw = emptyObj()
+	}
+	out := map[string]interface{}{
+		"male":   emptyObj(),
+		"female": emptyObj(),
+	}
+	if isLegacyFlat(raw) {
+		out["male"] = raw
+		return out
+	}
+	if m := asObject(raw["male"]); len(m) > 0 {
+		out["male"] = m
+	}
+	if f := asObject(raw["female"]); len(f) > 0 {
+		out["female"] = f
+	}
+	return out
+}
+
+func loadBundle() map[string]interface{} {
+	var config models.PosterConfig
+	if err := db.First(&config, 1).Error; err != nil {
+		return normalizeBundle(nil)
+	}
+	raw := strings.TrimSpace(config.ConfigData)
+	if raw == "" {
+		raw = "{}"
+	}
+	var parsed map[string]interface{}
+	if err := json.Unmarshal([]byte(raw), &parsed); err != nil {
+		return normalizeBundle(nil)
+	}
+	return normalizeBundle(parsed)
+}
+
+func handleGetPosterConfig(c *gin.Context) {
+	bundle := loadBundle()
+	side := resolveSide(c.Query("side"))
+	if side != "" {
+		c.JSON(200, gin.H{"code": 200, "data": bundle[side]})
+		return
+	}
+	c.JSON(200, gin.H{"code": 200, "data": bundle})
+}
+
+func handleSavePosterConfig(c *gin.Context) {
+	if !requireAdmin(c) {
+		return
+	}
+	var rawBody map[string]interface{}
+	if err := c.BindJSON(&rawBody); err != nil {
+		c.JSON(400, gin.H{"error": "无效的JSON数据"})
+		return
+	}
+	bundle := normalizeBundle(rawBody)
+	jsonBytes, err := json.Marshal(bundle)
+	if err != nil {
+		c.JSON(400, gin.H{"error": "无效的JSON数据"})
+		return
+	}
+	var config models.PosterConfig
+	db.Attrs(models.PosterConfig{ConfigData: "{}"}).FirstOrCreate(&config, models.PosterConfig{ID: 1})
+	config.ConfigData = string(jsonBytes)
+	if err := db.Save(&config).Error; err != nil {
+		c.JSON(500, gin.H{"error": "海报配置保存失败"})
+		return
+	}
+	c.JSON(200, gin.H{"code": 200, "msg": "海报配置保存成功", "data": bundle})
+}
--- a/hunliji-api/router/routers.go
+++ b/hunliji-api/router/routers.go
@@ -15,6 +15,7 @@ import (

 	"hunliji-api/configsection"
 	"hunliji-api/models"
+	"hunliji-api/posterconfig"
 	"hunliji-api/spark"
 	"hunliji-api/utils"
 	"hunliji-api/visit"
@@ -80,6 +81,7 @@ func registerAPI(api *gin.RouterGroup) {

 	visit.Register(api, db, utils.RequireAdmin)
 	configsection.Register(api, db, utils.RequireAdmin)
+	posterconfig.Register(api, db, utils.RequireAdmin)
 }

 func handleAdminLogin(c *gin.Context) {
@@ -126,7 +128,7 @@ func handleSaveConfig(c *gin.Context) {
 	}
 	jsonBytes, _ := json.Marshal(rawBody)
 	var config models.TemplateConfig
-	db.FirstOrCreate(&config, 1)
+	db.Attrs(models.TemplateConfig{ConfigData: "{}"}).FirstOrCreate(&config, models.TemplateConfig{ID: 1})
 	config.ConfigData = string(jsonBytes)
 	if err := db.Save(&config).Error; err != nil {
 		c.JSON(500, gin.H{"error": "数据库保存配置失败"})
--- a/vite-tailwindcss/package-lock.json
+++ b/vite-tailwindcss/package-lock.json
@@ -19,7 +19,9 @@
        "ant-design-vue": "^4.1.1",
        "axios": "^1.6.2",
        "echarts": "^6.1.0",
+        "gsap": "^3.15.0",
        "lucide-vue-next": "^0.507.0",
+        "motion-v": "^2.3.0",
        "pinia": "^2.1.7",
        "swiper": "^11.0.5",
        "tailwindcss": "^4.1.4",
@@ -1529,6 +1531,13 @@
      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
      "license": "MIT"
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/@unhead/dom": {
      "version": "1.11.20",
      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.20.tgz",
@@ -1717,6 +1726,24 @@
      "integrity": "sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==",
      "license": "MIT"
    },
+    "node_modules/@vueuse/core": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.4.0.tgz",
+      "integrity": "sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.4.0",
+        "@vueuse/shared": "14.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
    "node_modules/@vueuse/head": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-2.0.0.tgz",
@@ -1732,6 +1759,29 @@
        "vue": ">=2.7 || >=3"
      }
    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.4.0.tgz",
+      "integrity": "sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.4.0.tgz",
+      "integrity": "sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
    "node_modules/agent-base": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -2125,6 +2175,39 @@
        "node": ">= 6"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.43.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.43.0.tgz",
+      "integrity": "sha512-1eaL3RvR/kAlbG7UYcpMptEyzPoENO0c6w7ZnB3/hh2vSAz/6uGAFn6fdoqTBguNstf3MsFhJHsD/0DHiclG+g==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.43.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framer-motion/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2203,6 +2286,12 @@
      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
      "license": "ISC"
    },
+    "node_modules/gsap": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
+      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
    "node_modules/has-symbols": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -2242,6 +2331,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
    "node_modules/hookable": {
      "version": "5.5.3",
      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -2637,6 +2732,37 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/motion-dom": {
+      "version": "12.43.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.43.0.tgz",
+      "integrity": "sha512-azKON4d9S65PEoFUiQTMTgPheEmzf2QngdRc50AKfJp9Q9mmcBVw22c8eMq9k8kxOFHdL7+WZY7N/5F/lwiDag==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
+    "node_modules/motion-v": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/motion-v/-/motion-v-2.3.0.tgz",
+      "integrity": "sha512-J0CCfXtICCni9RjotDUBOs57xNpYI9yyBSohEOxaRHrmjwOtlw291fhRu/mdgEdSasys96R028YDDOAtWBbRaA==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.40.0",
+        "hey-listen": "^1.0.8",
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0"
+      },
+      "peerDependencies": {
+        "@vueuse/core": ">=10.0.0",
+        "vue": ">=3.0.0"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
--- a/vite-tailwindcss/package.json
+++ b/vite-tailwindcss/package.json
@@ -20,7 +20,9 @@
    "ant-design-vue": "^4.1.1",
    "axios": "^1.6.2",
    "echarts": "^6.1.0",
+    "gsap": "^3.15.0",
    "lucide-vue-next": "^0.507.0",
+    "motion-v": "^2.3.0",
    "pinia": "^2.1.7",
    "swiper": "^11.0.5",
    "tailwindcss": "^4.1.4",
--- a/vite-tailwindcss/pnpm-lock.yaml
+++ b/vite-tailwindcss/pnpm-lock.yaml
@@ -41,9 +41,15 @@ importers:
      echarts:
        specifier: ^6.1.0
        version: 6.1.0
+      gsap:
+        specifier: ^3.15.0
+        version: 3.15.0
      lucide-vue-next:
        specifier: ^0.507.0
        version: 0.507.0(vue@3.5.40)
+      motion-v:
+        specifier: ^2.3.0
+        version: 2.3.0(@vueuse/core@14.4.0(vue@3.5.40))(vue@3.5.40)
      pinia:
        specifier: ^2.1.7
        version: 2.3.1(vue@3.5.40)
@@ -630,6 +636,9 @@ packages:
  '@types/estree@1.0.9':
    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}

+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
  '@unhead/dom@1.11.20':
    resolution: {integrity: sha512-jgfGYdOH+xHJF/j8gudjsYu3oIjFyXhCWcgKaw3vQnT616gSqyqnGQGOItL+BQtQZACKNISwIfx5PuOtztMKLA==}

@@ -684,11 +693,24 @@ packages:
  '@vue/shared@3.5.40':
    resolution: {integrity: sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==}

+  '@vueuse/core@14.4.0':
+    resolution: {integrity: sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ==}
+    peerDependencies:
+      vue: ^3.5.0
+
  '@vueuse/head@2.0.0':
    resolution: {integrity: sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==}
    peerDependencies:
      vue: '>=2.7 || >=3'

+  '@vueuse/metadata@14.4.0':
+    resolution: {integrity: sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g==}
+
+  '@vueuse/shared@14.4.0':
+    resolution: {integrity: sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g==}
+    peerDependencies:
+      vue: ^3.5.0
+
  agent-base@6.0.2:
    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
    engines: {node: '>= 6.0.0'}
@@ -819,6 +841,20 @@ packages:
    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
    engines: {node: '>= 6'}

+  framer-motion@12.43.0:
+    resolution: {integrity: sha512-1eaL3RvR/kAlbG7UYcpMptEyzPoENO0c6w7ZnB3/hh2vSAz/6uGAFn6fdoqTBguNstf3MsFhJHsD/0DHiclG+g==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
  fsevents@2.3.3:
    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -842,6 +878,9 @@ packages:
  graceful-fs@4.2.11:
    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}

+  gsap@3.15.0:
+    resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
+
  has-symbols@1.1.0:
    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
    engines: {node: '>= 0.4'}
@@ -854,6 +893,9 @@ packages:
    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
    engines: {node: '>= 0.4'}

+  hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
+
  hookable@5.5.3:
    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}

@@ -988,6 +1030,18 @@ packages:
    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
    engines: {node: '>= 0.6'}

+  motion-dom@12.43.0:
+    resolution: {integrity: sha512-azKON4d9S65PEoFUiQTMTgPheEmzf2QngdRc50AKfJp9Q9mmcBVw22c8eMq9k8kxOFHdL7+WZY7N/5F/lwiDag==}
+
+  motion-utils@12.39.0:
+    resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
+
+  motion-v@2.3.0:
+    resolution: {integrity: sha512-J0CCfXtICCni9RjotDUBOs57xNpYI9yyBSohEOxaRHrmjwOtlw291fhRu/mdgEdSasys96R028YDDOAtWBbRaA==}
+    peerDependencies:
+      '@vueuse/core': '>=10.0.0'
+      vue: '>=3.0.0'
+
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}

@@ -1084,6 +1138,9 @@ packages:
  tslib@2.3.0:
    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}

+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
  unhead@1.11.20:
    resolution: {integrity: sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==}

@@ -1526,6 +1583,8 @@ snapshots:

  '@types/estree@1.0.9': {}

+  '@types/web-bluetooth@0.0.21': {}
+
  '@unhead/dom@1.11.20':
    dependencies:
      '@unhead/schema': 1.11.20
@@ -1615,6 +1674,13 @@ snapshots:

  '@vue/shared@3.5.40': {}

+  '@vueuse/core@14.4.0(vue@3.5.40)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.4.0
+      '@vueuse/shared': 14.4.0(vue@3.5.40)
+      vue: 3.5.40
+
  '@vueuse/head@2.0.0(vue@3.5.40)':
    dependencies:
      '@unhead/dom': 1.11.20
@@ -1623,6 +1689,12 @@ snapshots:
      '@unhead/vue': 1.11.20(vue@3.5.40)
      vue: 3.5.40

+  '@vueuse/metadata@14.4.0': {}
+
+  '@vueuse/shared@14.4.0(vue@3.5.40)':
+    dependencies:
+      vue: 3.5.40
+
  agent-base@6.0.2:
    dependencies:
      debug: 4.4.3
@@ -1784,6 +1856,12 @@ snapshots:
      hasown: 2.0.4
      mime-types: 2.1.35

+  framer-motion@12.43.0:
+    dependencies:
+      motion-dom: 12.43.0
+      motion-utils: 12.39.0
+      tslib: 2.8.1
+
  fsevents@2.3.3:
    optional: true

@@ -1811,6 +1889,8 @@ snapshots:

  graceful-fs@4.2.11: {}

+  gsap@3.15.0: {}
+
  has-symbols@1.1.0: {}

  has-tostringtag@1.0.2:
@@ -1821,6 +1901,8 @@ snapshots:
    dependencies:
      function-bind: 1.1.2

+  hey-listen@1.0.8: {}
+
  hookable@5.5.3: {}

  https-proxy-agent@5.0.1:
@@ -1919,6 +2001,25 @@ snapshots:
    dependencies:
      mime-db: 1.52.0

+  motion-dom@12.43.0:
+    dependencies:
+      motion-utils: 12.39.0
+
+  motion-utils@12.39.0: {}
+
+  motion-v@2.3.0(@vueuse/core@14.4.0(vue@3.5.40))(vue@3.5.40):
+    dependencies:
+      '@vueuse/core': 14.4.0(vue@3.5.40)
+      framer-motion: 12.43.0
+      hey-listen: 1.0.8
+      motion-dom: 12.43.0
+      motion-utils: 12.39.0
+      vue: 3.5.40
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - react
+      - react-dom
+
  ms@2.1.3: {}

  nanoid@3.3.16: {}
@@ -2020,6 +2121,8 @@ snapshots:

  tslib@2.3.0: {}

+  tslib@2.8.1: {}
+
  unhead@1.11.20:
    dependencies:
      '@unhead/dom': 1.11.20
--- a/vite-tailwindcss/src/api/wedding.js
+++ b/vite-tailwindcss/src/api/wedding.js
@@ -84,6 +84,16 @@ export function saveUploadConfig(payload) {
  return service.post('/upload/config', payload)
 }

+/** side 可选：male|female|n|nv；不传则返回 { male, female } 整包 */
+export function getPosterConfig(side) {
+  const params = side ? { side } : undefined
+  return service.get('/poster/config', { params })
+}
+
+export function savePosterConfig(payload) {
+  return service.post('/poster/config', payload)
+}
+
 export function uploadImage(file) {
  const form = new FormData()
  form.append('file', file)
--- a/vite-tailwindcss/src/components/vue-bits/BlurText.vue
+++ b/vite-tailwindcss/src/components/vue-bits/BlurText.vue
@@ -0,0 +1,159 @@
+<template>
+  <p ref="rootRef" :class="className" style="display: flex; flex-wrap: wrap; margin: 0">
+    <Motion
+      v-for="(segment, index) in elements"
+      :key="`${index}-${segment}`"
+      tag="span"
+      :initial="fromSnapshot"
+      :animate="started ? buildKeyframes(fromSnapshot, toSnapshots) : fromSnapshot"
+      :transition="getTransition(index)"
+      :on-animation-complete="() => handleAnimationComplete(index)"
+      style="display: inline-block; will-change: transform, filter, opacity"
+    >
+      {{ segment === ' ' ? '\u00A0' : segment }}
+      <span v-if="animateBy === 'words' && index < elements.length - 1">&nbsp;</span>
+    </Motion>
+  </p>
+</template>
+
+<script setup>
+import { Motion } from 'motion-v'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+  text: { type: String, default: '' },
+  delay: { type: Number, default: 80 },
+  className: { type: String, default: '' },
+  animateBy: { type: String, default: 'letters' }, // words | letters
+  direction: { type: String, default: 'top' }, // top | bottom
+  threshold: { type: Number, default: 0.1 },
+  rootMargin: { type: String, default: '0px' },
+  animationFrom: { type: Object, default: null },
+  animationTo: { type: Array, default: null },
+  stepDuration: { type: Number, default: 0.35 },
+  /** 为 true 时立即开启动画；false 时等 IntersectionObserver；null 等同 false */
+  active: { type: Boolean, default: undefined },
+})
+
+const emit = defineEmits(['animationComplete'])
+
+const rootRef = ref(null)
+const inView = ref(false)
+let observer = null
+let completed = false
+let fallbackTimer = null
+
+const started = computed(() => {
+  if (props.active === true) return true
+  if (props.active === false) return false
+  return inView.value
+})
+
+function clearFallback() {
+  if (fallbackTimer) {
+    clearTimeout(fallbackTimer)
+    fallbackTimer = null
+  }
+}
+
+function markComplete() {
+  if (completed) return
+  completed = true
+  clearFallback()
+  emit('animationComplete')
+}
+
+function armFallback() {
+  clearFallback()
+  completed = false
+  const n = Math.max(elements.value.length, 1)
+  const ms = props.delay * n + props.stepDuration * 1000 * 2 + 240
+  fallbackTimer = setTimeout(markComplete, ms)
+}
+
+function buildKeyframes(from, steps) {
+  const keys = new Set([...Object.keys(from), ...steps.flatMap((s) => Object.keys(s))])
+  const keyframes = {}
+  keys.forEach((k) => {
+    keyframes[k] = [from[k], ...steps.map((s) => s[k])]
+  })
+  return keyframes
+}
+
+onMounted(() => {
+  if (props.active === true || !rootRef.value) return
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry.isIntersecting) {
+        inView.value = true
+        observer?.unobserve(rootRef.value)
+      }
+    },
+    { threshold: props.threshold, rootMargin: props.rootMargin },
+  )
+  observer.observe(rootRef.value)
+})
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  clearFallback()
+})
+
+const elements = computed(() =>
+  props.animateBy === 'words' ? props.text.split(' ') : props.text.split(''),
+)
+
+watch(
+  () => [props.text, props.animateBy, props.direction, props.delay, props.active],
+  () => {
+    if (props.active === true) {
+      armFallback()
+      return
+    }
+    inView.value = false
+    if (rootRef.value && observer) observer.observe(rootRef.value)
+  },
+)
+
+watch(started, (v) => {
+  if (v) armFallback()
+  else clearFallback()
+}, { immediate: true })
+
+const defaultFrom = computed(() =>
+  props.direction === 'top'
+    ? { filter: 'blur(10px)', opacity: 0, y: -40 }
+    : { filter: 'blur(10px)', opacity: 0, y: 40 },
+)
+
+const defaultTo = computed(() => [
+  {
+    filter: 'blur(5px)',
+    opacity: 0.5,
+    y: props.direction === 'top' ? 4 : -4,
+  },
+  { filter: 'blur(0px)', opacity: 1, y: 0 },
+])
+
+const fromSnapshot = computed(() => props.animationFrom || defaultFrom.value)
+const toSnapshots = computed(() => props.animationTo || defaultTo.value)
+const stepCount = computed(() => toSnapshots.value.length + 1)
+const totalDuration = computed(() => props.stepDuration * (stepCount.value - 1))
+const times = computed(() =>
+  Array.from({ length: stepCount.value }, (_, i) =>
+    stepCount.value === 1 ? 0 : i / (stepCount.value - 1),
+  ),
+)
+
+function getTransition(index) {
+  return {
+    duration: totalDuration.value,
+    times: times.value,
+    delay: (index * props.delay) / 1000,
+  }
+}
+
+function handleAnimationComplete(index) {
+  if (index === elements.value.length - 1) markComplete()
+}
+</script>
--- a/vite-tailwindcss/src/components/vue-bits/TextType.vue
+++ b/vite-tailwindcss/src/components/vue-bits/TextType.vue
@@ -0,0 +1,186 @@
+<template>
+  <component
+    :is="as"
+    ref="containerRef"
+    :class="['inline-block whitespace-pre-wrap tracking-tight', className]"
+  >
+    <span :style="{ color: currentColor }">{{ displayedText }}</span>
+    <span
+      v-if="showCursor"
+      ref="cursorRef"
+      :class="[
+        'ml-0.5 inline-block',
+        cursorClassName,
+        hideCursorWhileTyping && isTyping ? 'opacity-0' : '',
+      ]"
+    >{{ cursorCharacter }}</span>
+  </component>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { gsap } from 'gsap'
+
+const props = defineProps({
+  text: { type: [String, Array], required: true },
+  as: { type: String, default: 'div' },
+  typingSpeed: { type: Number, default: 55 },
+  initialDelay: { type: Number, default: 0 },
+  pauseDuration: { type: Number, default: 2000 },
+  deletingSpeed: { type: Number, default: 30 },
+  loop: { type: Boolean, default: false },
+  className: { type: String, default: '' },
+  showCursor: { type: Boolean, default: true },
+  hideCursorWhileTyping: { type: Boolean, default: false },
+  cursorCharacter: { type: String, default: '|' },
+  cursorBlinkDuration: { type: Number, default: 0.5 },
+  cursorClassName: { type: String, default: '' },
+  textColors: { type: Array, default: () => [] },
+  startOnVisible: { type: Boolean, default: false },
+  reverseMode: { type: Boolean, default: false },
+  /** 外部控制：为 true 时开始打字 */
+  active: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['sentenceComplete', 'animationComplete'])
+
+const displayedText = ref('')
+const currentCharIndex = ref(0)
+const isDeleting = ref(false)
+const currentTextIndex = ref(0)
+const isVisible = ref(!props.startOnVisible)
+const cursorRef = ref(null)
+const containerRef = ref(null)
+let timeout = null
+let blinkTween = null
+let observer = null
+let finished = false
+
+const textArray = computed(() => (Array.isArray(props.text) ? props.text : [props.text]))
+const isTyping = computed(
+  () => currentCharIndex.value < (textArray.value[currentTextIndex.value]?.length || 0) || isDeleting.value,
+)
+const currentColor = computed(() => {
+  if (!props.textColors.length) return undefined
+  return props.textColors[currentTextIndex.value % props.textColors.length]
+})
+
+function clearTimeoutIfNeeded() {
+  if (timeout) {
+    clearTimeout(timeout)
+    timeout = null
+  }
+}
+
+function resetState() {
+  clearTimeoutIfNeeded()
+  displayedText.value = ''
+  currentCharIndex.value = 0
+  isDeleting.value = false
+  currentTextIndex.value = 0
+  finished = false
+}
+
+function executeTypingAnimation() {
+  if (finished || !props.active || !isVisible.value) return
+  const currentText = textArray.value[currentTextIndex.value] || ''
+  const processedText = props.reverseMode ? currentText.split('').reverse().join('') : currentText
+
+  if (isDeleting.value) {
+    if (displayedText.value === '') {
+      isDeleting.value = false
+      if (currentTextIndex.value === textArray.value.length - 1 && !props.loop) {
+        finished = true
+        emit('animationComplete')
+        return
+      }
+      emit('sentenceComplete', textArray.value[currentTextIndex.value], currentTextIndex.value)
+      currentTextIndex.value = (currentTextIndex.value + 1) % textArray.value.length
+      currentCharIndex.value = 0
+      timeout = setTimeout(() => executeTypingAnimation(), props.pauseDuration)
+    } else {
+      timeout = setTimeout(() => {
+        displayedText.value = displayedText.value.slice(0, -1)
+        executeTypingAnimation()
+      }, props.deletingSpeed)
+    }
+    return
+  }
+
+  if (currentCharIndex.value < processedText.length) {
+    timeout = setTimeout(() => {
+      displayedText.value += processedText[currentCharIndex.value]
+      currentCharIndex.value += 1
+      executeTypingAnimation()
+    }, props.typingSpeed)
+    return
+  }
+
+  // 当前句打完
+  emit('sentenceComplete', textArray.value[currentTextIndex.value], currentTextIndex.value)
+  if (textArray.value.length > 1 && props.loop) {
+    timeout = setTimeout(() => {
+      isDeleting.value = true
+      executeTypingAnimation()
+    }, props.pauseDuration)
+    return
+  }
+  if (currentTextIndex.value < textArray.value.length - 1) {
+    timeout = setTimeout(() => {
+      currentTextIndex.value += 1
+      currentCharIndex.value = 0
+      displayedText.value = ''
+      executeTypingAnimation()
+    }, props.pauseDuration)
+    return
+  }
+  finished = true
+  emit('animationComplete')
+}
+
+function startTyping() {
+  if (!props.active || !isVisible.value || finished) return
+  clearTimeoutIfNeeded()
+  timeout = setTimeout(() => executeTypingAnimation(), props.initialDelay)
+}
+
+watch(
+  () => [props.active, isVisible.value, props.text],
+  () => {
+    resetState()
+    if (props.active && isVisible.value) startTyping()
+  },
+  { immediate: true },
+)
+
+onMounted(() => {
+  if (props.showCursor && cursorRef.value) {
+    gsap.set(cursorRef.value, { opacity: 1 })
+    blinkTween = gsap.to(cursorRef.value, {
+      opacity: 0,
+      duration: props.cursorBlinkDuration,
+      repeat: -1,
+      yoyo: true,
+      ease: 'power2.inOut',
+    })
+  }
+  if (props.startOnVisible && containerRef.value) {
+    observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) isVisible.value = true
+        })
+      },
+      { threshold: 0.1 },
+    )
+    const el = containerRef.value?.$el || containerRef.value
+    if (el instanceof Element) observer.observe(el)
+  }
+})
+
+onBeforeUnmount(() => {
+  clearTimeoutIfNeeded()
+  blinkTween?.kill()
+  observer?.disconnect()
+})
+</script>
--- a/vite-tailwindcss/src/composables/posterDefaults.js
+++ b/vite-tailwindcss/src/composables/posterDefaults.js
@@ -0,0 +1,147 @@
+/** 海报 side：male=/hb-n 男方，female=/hb-nv 女方 */
+
+export const POSTER_SIDES = [
+  { key: 'male', route: '/hb-n', label: '男方', short: 'n' },
+  { key: 'female', route: '/hb-nv', label: '女方', short: 'nv' },
+]
+
+export function resolvePosterSide(input) {
+  const v = String(input || '').trim().toLowerCase()
+  if (v === 'female' || v === 'nv' || v === 'f' || v === 'bride') return 'female'
+  if (v === 'male' || v === 'n' || v === 'm' || v === 'groom') return 'male'
+  return ''
+}
+
+function baseFields() {
+  return {
+    enabled: true,
+    heroImg: '',
+    title: '婚礼邀请函',
+    footer: '—诚挚邀请 ♥ 恭请光临—',
+    loadingEffect: 'redSeal',
+    enterEffect: 'fadeUp',
+    showInviteButton: true,
+    inviteButtonText: '打开请柬',
+    invitePath: '/',
+  }
+}
+
+/** 男方默认文案 */
+export function defaultMalePosterConfig() {
+  return {
+    ...baseFields(),
+    sonLabel: '儿子：',
+    sonName: '张浩强',
+    daughterInLawLabel: '儿媳：',
+    daughterInLawName: '刘佳怡',
+    lines: [
+      '各位亲朋好友',
+      '吾家有喜 儿子结婚',
+      '良辰已定 吉日待访',
+      '兹定于2026年10月3日 星期日',
+      '农历九月初八 中午11:08分',
+      '为儿子儿媳举办结婚典礼',
+      '敬备喜宴 诚邀您携家人光临',
+      '地址：幸福大酒店二楼宴会厅',
+      '张国栋 & 陈晓玲 夫 妇 敬邀',
+    ],
+  }
+}
+
+/** 女方默认文案 */
+export function defaultFemalePosterConfig() {
+  return {
+    ...baseFields(),
+    sonLabel: '女儿：',
+    sonName: '刘佳怡',
+    daughterInLawLabel: '女婿：',
+    daughterInLawName: '张浩强',
+    lines: [
+      '各位亲朋好友',
+      '吾家有喜 女儿出嫁',
+      '良辰已定 吉日待访',
+      '兹定于2026年10月3日 星期日',
+      '农历九月初八 中午11:08分',
+      '为女儿女婿举办结婚典礼',
+      '敬备喜宴 诚邀您携家人光临',
+      '地址：幸福大酒店二楼宴会厅',
+      '刘建国 & 王秀兰 夫 妇 敬邀',
+    ],
+  }
+}
+
+/** @deprecated 兼容旧调用，等同男方默认 */
+export function defaultPosterConfig() {
+  return defaultMalePosterConfig()
+}
+
+export function defaultPosterBundle() {
+  return {
+    male: defaultMalePosterConfig(),
+    female: defaultFemalePosterConfig(),
+  }
+}
+
+export const LOADING_EFFECTS = [
+  { value: 'fade', label: '淡入加载' },
+  { value: 'redSeal', label: '红印囍字' },
+  { value: 'goldShimmer', label: '金字微光' },
+]
+
+export const ENTER_EFFECTS = [
+  { value: 'fadeUp', label: '上浮淡入' },
+  { value: 'scaleIn', label: '缩放进入' },
+  { value: 'curtain', label: '金幕拉开' },
+]
+
+/** 是否为旧版扁平配置（未分男女方） */
+function isLegacyFlatPoster(raw) {
+  if (!raw || typeof raw !== 'object') return false
+  if (raw.male || raw.female) return false
+  return 'title' in raw || 'lines' in raw || 'heroImg' in raw || 'sonName' in raw
+}
+
+export function normalizePosterConfig(raw, side = 'male') {
+  const s = resolvePosterSide(side) || 'male'
+  const base = s === 'female' ? defaultFemalePosterConfig() : defaultMalePosterConfig()
+  const loaded = raw && typeof raw === 'object' ? raw : {}
+  const lines = Array.isArray(loaded.lines)
+    ? loaded.lines.map((l) => String(l ?? ''))
+    : base.lines
+  return {
+    ...base,
+    ...loaded,
+    lines: lines.length ? lines : base.lines,
+    enabled: loaded.enabled !== false,
+    showInviteButton: loaded.showInviteButton !== false,
+    loadingEffect: LOADING_EFFECTS.some((e) => e.value === loaded.loadingEffect)
+      ? loaded.loadingEffect
+      : base.loadingEffect,
+    enterEffect: ENTER_EFFECTS.some((e) => e.value === loaded.enterEffect)
+      ? loaded.enterEffect
+      : base.enterEffect,
+    invitePath: loaded.invitePath || '/',
+    inviteButtonText: loaded.inviteButtonText || base.inviteButtonText,
+  }
+}
+
+/** 归一化整包 { male, female }；兼容旧扁平数据迁入 male */
+export function normalizePosterBundle(raw) {
+  const loaded = raw && typeof raw === 'object' ? raw : {}
+  if (isLegacyFlatPoster(loaded)) {
+    return {
+      male: normalizePosterConfig(loaded, 'male'),
+      female: defaultFemalePosterConfig(),
+    }
+  }
+  return {
+    male: normalizePosterConfig(loaded.male, 'male'),
+    female: normalizePosterConfig(loaded.female, 'female'),
+  }
+}
+
+export function pickPosterSide(bundle, side) {
+  const normalized = normalizePosterBundle(bundle)
+  const s = resolvePosterSide(side) || 'male'
+  return normalized[s]
+}
--- a/vite-tailwindcss/src/router/index.js
+++ b/vite-tailwindcss/src/router/index.js
@@ -8,6 +8,22 @@ const routes = [
    name: 'Home',
    component: () => import('@/views/index/index.vue'),
  },
+  {
+    path: '/hb',
+    redirect: '/hb-n',
+  },
+  {
+    path: '/hb-n',
+    name: 'PosterMale',
+    component: () => import('@/views/hb/index.vue'),
+    meta: { posterSide: 'male' },
+  },
+  {
+    path: '/hb-nv',
+    name: 'PosterFemale',
+    component: () => import('@/views/hb/index.vue'),
+    meta: { posterSide: 'female' },
+  },
  {
    path: '/login',
    name: 'Login',
--- a/vite-tailwindcss/src/views/admin/AdminEditor.vue
+++ b/vite-tailwindcss/src/views/admin/AdminEditor.vue
@@ -13,6 +13,17 @@
        <a-button size="small" @click="openPreview">
          <i class="fa-solid fa-eye mr-1 text-[#a88c6b]"></i>预览请柬
        </a-button>
+        <a-dropdown>
+          <a-button size="small">
+            <i class="fa-solid fa-scroll mr-1 text-[#a88c6b]"></i>预览海报 <i class="fa-solid fa-chevron-down ml-1 text-[10px]"></i>
+          </a-button>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="male" @click="openPosterPreview('male')">男方 /hb-n</a-menu-item>
+              <a-menu-item key="female" @click="openPosterPreview('female')">女方 /hb-nv</a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
        <a-button
          v-if="isConfigTab"
          type="primary"
@@ -399,6 +410,85 @@
          </a-card>
        </a-tab-pane>

+        <!-- 海报（独立 poster_configs：男方 /hb-n、女方 /hb-nv） -->
+        <a-tab-pane key="poster" tab="海报">
+          <a-card v-if="activeTab === 'poster'" :bordered="false" class="!shadow-sm">
+            <a-alert
+              type="info"
+              show-icon
+              class="mb-4"
+              message="海报配置独立存储。男方前台 /hb-n，女方前台 /hb-nv"
+            />
+            <a-tabs v-model:activeKey="posterSideTab" size="small" type="card" class="mb-3">
+              <a-tab-pane key="male" tab="男方海报" />
+              <a-tab-pane key="female" tab="女方海报" />
+            </a-tabs>
+            <a-form layout="vertical" :class="{ 'opacity-60 pointer-events-none': posterLoading }">
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <a-form-item label="启用海报页">
+                  <a-switch v-model:checked="posterCfg.enabled" />
+                </a-form-item>
+                <a-form-item label="显示跳转请柬按钮">
+                  <a-switch v-model:checked="posterCfg.showInviteButton" />
+                </a-form-item>
+                <a-form-item label="按钮文案">
+                  <a-input v-model:value="posterCfg.inviteButtonText" :disabled="!posterCfg.showInviteButton" />
+                </a-form-item>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
+                <a-form-item label="进页 Loading">
+                  <a-select v-model:value="posterCfg.loadingEffect">
+                    <a-select-option v-for="opt in LOADING_EFFECTS" :key="opt.value" :value="opt.value">{{ opt.label }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+                <a-form-item label="打开页面过场">
+                  <a-select v-model:value="posterCfg.enterEffect">
+                    <a-select-option v-for="opt in ENTER_EFFECTS" :key="opt.value" :value="opt.value">{{ opt.label }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+                <a-form-item label="跳转路径">
+                  <a-input v-model:value="posterCfg.invitePath" placeholder="/" />
+                </a-form-item>
+              </div>
+              <a-form-item label="顶部照片">
+                <image-field v-model="posterCfg.heroImg" label="海报顶图" @pick="openUpload(u => posterCfg.heroImg = u)" :uploading="uploading" />
+              </a-form-item>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
+                <a-form-item :label="posterSideTab === 'female' ? '女儿称谓 / 姓名' : '儿子称谓 / 姓名'">
+                  <div class="flex gap-2">
+                    <a-input v-model:value="posterCfg.sonLabel" class="!w-[100px]" :placeholder="posterSideTab === 'female' ? '女儿：' : '儿子：'" />
+                    <a-input v-model:value="posterCfg.sonName" placeholder="姓名" />
+                  </div>
+                </a-form-item>
+                <a-form-item :label="posterSideTab === 'female' ? '女婿称谓 / 姓名' : '儿媳称谓 / 姓名'">
+                  <div class="flex gap-2">
+                    <a-input v-model:value="posterCfg.daughterInLawLabel" class="!w-[100px]" :placeholder="posterSideTab === 'female' ? '女婿：' : '儿媳：'" />
+                    <a-input v-model:value="posterCfg.daughterInLawName" placeholder="姓名" />
+                  </div>
+                </a-form-item>
+              </div>
+              <a-form-item label="主标题">
+                <a-input v-model:value="posterCfg.title" placeholder="婚礼邀请函" />
+              </a-form-item>
+              <a-form-item label="正文（每行一条）">
+                <a-textarea v-model:value="posterLinesText" :rows="10" placeholder="每行一条正文" />
+              </a-form-item>
+              <a-form-item label="底部文案">
+                <a-input v-model:value="posterCfg.footer" />
+              </a-form-item>
+              <div class="flex gap-2 flex-wrap">
+                <a-button type="primary" :loading="posterSaving" @click="onSavePosterConfig"
+                          class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]">
+                  <i class="fa-solid fa-floppy-disk mr-1"></i>保存海报配置
+                </a-button>
+                <a-button @click="openPosterPreview(posterSideTab)">
+                  <i class="fa-solid fa-eye mr-1"></i>打开 {{ posterSideTab === 'female' ? '/hb-nv' : '/hb-n' }} 预览
+                </a-button>
+              </div>
+            </a-form>
+          </a-card>
+        </a-tab-pane>
+
        <a-tab-pane key="photos" tab="相册页管理">
          <div class="admin-panel !p-4 mb-3">
            <div class="flex justify-between items-center gap-3 flex-wrap">
@@ -731,12 +821,17 @@ import { CanvasRenderer } from 'echarts/renderers'
 import {
  getConfigSection, saveConfigSection, uploadImage, getRsvpList, getUploadConfig, saveUploadConfig,
  getDanmakuList, updateDanmakuStatus, getVisitStats, getVisitList,
+  getPosterConfig, savePosterConfig,
 } from '@/api/wedding'
 import { useAdminStore } from '@/stores/admin'
 import ImageField from '@/components/ImageField.vue'
 import { BORDER_STYLES, borderClass } from '@/composables/borderStyles'
 import { resolveDanmakuSwatch } from '@/utils/danmakuColors'
 import { getSlotResizeSpecs, resizeSlotToFile, probeResizedMeta, metaHasFileSize } from '@/composables/resizeImage'
+import {
+  defaultPosterBundle, normalizePosterBundle, normalizePosterConfig,
+  LOADING_EFFECTS, ENTER_EFFECTS, POSTER_SIDES,
+} from '@/composables/posterDefaults'

 echarts.use([PieChart, TooltipComponent, LegendComponent, CanvasRenderer])

@@ -745,7 +840,7 @@ const adminStore = useAdminStore()

 const TAB_KEY = 'wedding_admin_active_tab'
 const CONFIG_SECTIONS = ['basic', 'copy', 'visual', 'music', 'photos', 'schedule']
-const VALID_TABS = ['overview', ...CONFIG_SECTIONS, 'upload', 'rsvp', 'danmaku']
+const VALID_TABS = ['overview', ...CONFIG_SECTIONS, 'upload', 'poster', 'rsvp', 'danmaku']

 const SECTION_KEYS = {
  basic: ['groom', 'bride', 'date', 'lunar', 'calendarDate', 'hotel', 'address', 'heroImg', 'endImg'],
@@ -774,6 +869,8 @@ const uploading = ref(false)
 const resizingPage = ref(false)
 const resizeProgress = ref('')
 const uploadConfigSaving = ref(false)
+const posterSaving = ref(false)
+const posterLoading = ref(false)
 const tabLoading = ref(false)
 const rsvpLoading = ref(false)
 const rsvpList = ref([])
@@ -791,6 +888,22 @@ let regionChart = null

 const cfg = reactive(defaultConfig())
 const uploadCfg = reactive(defaultUploadConfig())
+const posterSideTab = ref('male')
+const posterBundle = reactive(defaultPosterBundle())
+const posterCfg = computed(() => posterBundle[posterSideTab.value] || posterBundle.male)
+const posterLinesText = computed({
+  get: () => {
+    const lines = posterCfg.value?.lines
+    return Array.isArray(lines) ? lines.join('\n') : ''
+  },
+  set: (v) => {
+    const side = posterSideTab.value
+    if (!posterBundle[side]) posterBundle[side] = normalizePosterConfig(null, side)
+    posterBundle[side].lines = String(v || '')
+      .split('\n')
+      .map((s) => s.trimEnd())
+  },
+})
 const currentPhotoIndex = computed(() => Math.min(Number(activePhotoTab.value) || 0, Math.max(cfg.photoPages.length - 1, 0)))
 const isConfigTab = computed(() => CONFIG_SECTIONS.includes(activeTab.value))
 const visitPagination = computed(() => ({
@@ -1206,6 +1319,36 @@ async function onSaveUploadConfig() {
  }
 }

+async function loadPosterConfig() {
+  posterLoading.value = true
+  try {
+    const res = await getPosterConfig()
+    const bundle = normalizePosterBundle(res.data || {})
+    posterBundle.male = bundle.male
+    posterBundle.female = bundle.female
+  } catch (e) {
+    message.error(e?.message || '海报配置加载失败')
+  } finally {
+    posterLoading.value = false
+  }
+}
+
+async function onSavePosterConfig() {
+  posterSaving.value = true
+  try {
+    const payload = normalizePosterBundle(posterBundle)
+    const res = await savePosterConfig(payload)
+    const bundle = normalizePosterBundle(res.data || payload)
+    posterBundle.male = bundle.male
+    posterBundle.female = bundle.female
+    message.success('海报配置已保存')
+  } catch (e) {
+    message.error(e?.message || '海报配置保存失败')
+  } finally {
+    posterSaving.value = false
+  }
+}
+
 function pickSectionData(section) {
  const keys = SECTION_KEYS[section] || []
  const data = {}
@@ -1390,6 +1533,10 @@ async function onTabActivate(tab) {
    await loadUploadConfig()
    return
  }
+  if (tab === 'poster') {
+    await loadPosterConfig()
+    return
+  }
  if (tab === 'rsvp') {
    await loadRsvp()
    return
@@ -1400,6 +1547,10 @@ async function onTabActivate(tab) {
 }

 function openPreview() { window.open('/', '_blank') }
+function openPosterPreview(side = 'male') {
+  const meta = POSTER_SIDES.find((s) => s.key === side) || POSTER_SIDES[0]
+  window.open(meta.route, '_blank')
+}

 function onLogout() {
  adminStore.logout()
--- a/vite-tailwindcss/src/views/hb/index.vue
+++ b/vite-tailwindcss/src/views/hb/index.vue
@@ -0,0 +1,862 @@
+<template>
+  <div class="hb-root">
+    <!-- 全屏背景婚礼装饰 -->
+    <div class="hb-bg-decor" aria-hidden="true">
+      <span class="hb-bg-xi hb-bg-xi-1">囍</span>
+      <span class="hb-bg-xi hb-bg-xi-2">囍</span>
+      <span class="hb-bg-xi hb-bg-xi-3">囍</span>
+      <span class="hb-bg-xi hb-bg-xi-4">囍</span>
+      <span class="hb-bg-xi hb-bg-xi-5">囍</span>
+      <span class="hb-bg-xi hb-bg-xi-6">囍</span>
+      <svg class="hb-bg-knot hb-bg-knot-1" viewBox="0 0 64 64" fill="none"><use href="#hb-icon-knot" /></svg>
+      <svg class="hb-bg-knot hb-bg-knot-2" viewBox="0 0 64 64" fill="none"><use href="#hb-icon-knot" /></svg>
+      <svg class="hb-bg-knot hb-bg-knot-3" viewBox="0 0 64 64" fill="none"><use href="#hb-icon-knot" /></svg>
+      <svg class="hb-bg-knot hb-bg-knot-4" viewBox="0 0 64 64" fill="none"><use href="#hb-icon-knot" /></svg>
+      <svg class="hb-bg-lantern hb-bg-lantern-1" viewBox="0 0 40 56" fill="none"><use href="#hb-icon-lantern" /></svg>
+      <svg class="hb-bg-lantern hb-bg-lantern-2" viewBox="0 0 40 56" fill="none"><use href="#hb-icon-lantern" /></svg>
+      <i class="hb-bg-spark hb-bg-spark-1"></i>
+      <i class="hb-bg-spark hb-bg-spark-2"></i>
+      <i class="hb-bg-spark hb-bg-spark-3"></i>
+      <i class="hb-bg-spark hb-bg-spark-4"></i>
+    </div>
+
+    <!-- 共用 SVG 图标定义 -->
+    <svg class="hb-sprite" aria-hidden="true">
+      <symbol id="hb-icon-knot" viewBox="0 0 64 64">
+        <path d="M32 6c-4 8-14 12-14 22 0 6 4 10 10 12-6 2-10 6-10 12 0 10 10 14 14 22 4-8 14-12 14-22 0-6-4-10-10-12 6-2 10-6 10-12 0-10-10-14-14-22z" stroke="currentColor" stroke-width="2.2" fill="none"/>
+        <circle cx="32" cy="32" r="5" fill="currentColor" opacity="0.85"/>
+        <path d="M32 8v10M32 46v10M18 32h10M36 32h10" stroke="currentColor" stroke-width="1.6" opacity="0.7"/>
+        <path d="M22 18c6 4 14 4 20 0M22 46c6-4 14-4 20 0" stroke="currentColor" stroke-width="1.5" opacity="0.55"/>
+      </symbol>
+      <symbol id="hb-icon-lantern" viewBox="0 0 40 56">
+        <rect x="16" y="2" width="8" height="5" rx="1" fill="currentColor"/>
+        <ellipse cx="20" cy="28" rx="14" ry="18" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.18"/>
+        <path d="M8 20h24M8 28h24M8 36h24" stroke="currentColor" stroke-width="1.2" opacity="0.55"/>
+        <path d="M20 46v6M16 52h8" stroke="currentColor" stroke-width="1.6"/>
+        <circle cx="20" cy="28" r="3" fill="currentColor"/>
+      </symbol>
+      <symbol id="hb-icon-cloud" viewBox="0 0 80 36">
+        <path d="M8 28c0-8 6-14 14-14 2-8 10-12 18-10 4-6 14-8 20-2 8-2 16 4 16 12 0 8-6 12-16 12H18C10 26 8 22 8 28z" stroke="currentColor" stroke-width="1.8" fill="currentColor" fill-opacity="0.12"/>
+      </symbol>
+      <symbol id="hb-icon-corner" viewBox="0 0 48 48">
+        <path d="M4 44V18c0-8 6-14 14-14h26" stroke="currentColor" stroke-width="2" fill="none"/>
+        <path d="M10 44V24c0-6 4-10 10-10h24" stroke="currentColor" stroke-width="1.2" opacity="0.55" fill="none"/>
+        <circle cx="18" cy="18" r="3" fill="currentColor"/>
+        <path d="M18 8c6 2 10 6 12 12" stroke="currentColor" stroke-width="1.2" opacity="0.7"/>
+      </symbol>
+    </svg>
+
+    <!-- Loading -->
+    <div v-if="phase === 'loading'" class="hb-loading" :class="`hb-loading--${cfg.loadingEffect}`">
+      <div v-if="cfg.loadingEffect === 'redSeal'" class="hb-seal">囍</div>
+      <div v-else-if="cfg.loadingEffect === 'goldShimmer'" class="hb-shimmer">婚礼邀请函</div>
+      <div v-else class="hb-fade-dot"></div>
+    </div>
+
+    <!-- Enter curtain -->
+    <div
+      v-if="phase === 'enter'"
+      class="hb-enter"
+      :class="[`hb-enter--${cfg.enterEffect}`, { 'is-done': enterLeaving }]"
+    >
+      <div class="hb-enter-panel hb-enter-left"></div>
+      <div class="hb-enter-panel hb-enter-right"></div>
+      <div class="hb-enter-veil"></div>
+    </div>
+
+    <!-- Poster -->
+    <div v-show="phase === 'content' || phase === 'enter'" class="hb-stage" :class="{ 'is-visible': contentVisible }">
+      <div class="hb-frame">
+        <div class="hb-frame-ornament hb-frame-ornament-tl" aria-hidden="true">
+          <svg viewBox="0 0 48 48"><use href="#hb-icon-corner" /></svg>
+        </div>
+        <div class="hb-frame-ornament hb-frame-ornament-tr" aria-hidden="true">
+          <svg viewBox="0 0 48 48"><use href="#hb-icon-corner" /></svg>
+        </div>
+        <div class="hb-frame-ornament hb-frame-ornament-bl" aria-hidden="true">
+          <svg viewBox="0 0 48 48"><use href="#hb-icon-corner" /></svg>
+        </div>
+        <div class="hb-frame-ornament hb-frame-ornament-br" aria-hidden="true">
+          <svg viewBox="0 0 48 48"><use href="#hb-icon-corner" /></svg>
+        </div>
+        <div class="hb-inner">
+          <!-- 纸面装饰：角花、水印囍、同心结、祥云 -->
+          <div class="hb-paper-decor" aria-hidden="true">
+            <span class="hb-paper-watermark">囍</span>
+            <svg class="hb-paper-knot hb-paper-knot-tl" viewBox="0 0 64 64"><use href="#hb-icon-knot" /></svg>
+            <svg class="hb-paper-knot hb-paper-knot-tr" viewBox="0 0 64 64"><use href="#hb-icon-knot" /></svg>
+            <svg class="hb-paper-knot hb-paper-knot-bl" viewBox="0 0 64 64"><use href="#hb-icon-knot" /></svg>
+            <svg class="hb-paper-knot hb-paper-knot-br" viewBox="0 0 64 64"><use href="#hb-icon-knot" /></svg>
+            <svg class="hb-paper-cloud hb-paper-cloud-t" viewBox="0 0 80 36"><use href="#hb-icon-cloud" /></svg>
+            <svg class="hb-paper-cloud hb-paper-cloud-b" viewBox="0 0 80 36"><use href="#hb-icon-cloud" /></svg>
+            <span class="hb-paper-xi hb-paper-xi-l">囍</span>
+            <span class="hb-paper-xi hb-paper-xi-r">囍</span>
+            <span class="hb-paper-dot hb-paper-dot-1"></span>
+            <span class="hb-paper-dot hb-paper-dot-2"></span>
+            <span class="hb-paper-dot hb-paper-dot-3"></span>
+            <span class="hb-paper-dot hb-paper-dot-4"></span>
+            <div class="hb-paper-side hb-paper-side-l"></div>
+            <div class="hb-paper-side hb-paper-side-r"></div>
+          </div>
+
+          <div class="hb-hero-wrap" :class="{ 'is-show': stage >= 1 }">
+            <div class="hb-hero">
+              <img v-if="cfg.heroImg" :src="cfg.heroImg" alt="" class="hb-hero-img" />
+              <div v-else class="hb-hero-placeholder">婚礼照片</div>
+              <span class="hb-xi hb-xi-l">囍</span>
+              <span class="hb-xi hb-xi-r">囍</span>
+            </div>
+          </div>
+
+          <div class="hb-names" :class="{ 'is-show': stage >= 2 }">
+            <BlurText
+              v-if="stage >= 2"
+              :text="nameLeft"
+              :active="stage >= 2"
+              animate-by="letters"
+              :delay="40"
+              class-name="hb-name"
+              @animation-complete="onNamesLeftDone"
+            />
+            <span class="hb-xi-circle">囍</span>
+            <BlurText
+              v-if="namesRightReady"
+              :text="nameRight"
+              :active="namesRightReady"
+              animate-by="letters"
+              :delay="40"
+              class-name="hb-name"
+              @animation-complete="bumpStage(3)"
+            />
+          </div>
+
+          <div class="hb-title-wrap" :class="{ 'is-show': stage >= 3 }">
+            <BlurText
+              v-if="stage >= 3"
+              :text="cfg.title"
+              :active="stage >= 3"
+              animate-by="letters"
+              direction="bottom"
+              :delay="70"
+              :step-duration="0.4"
+              class-name="hb-title calligraphy-strong"
+              @animation-complete="bumpStage(4)"
+            />
+          </div>
+
+          <div class="hb-body">
+            <template v-for="(line, i) in cfg.lines" :key="`line-${i}-${line}`">
+              <TextType
+                v-if="lineStage > i && i % 2 === 0"
+                :text="line"
+                :active="lineStage > i"
+                :loop="false"
+                :show-cursor="lineStage === i + 1"
+                cursor-character="|"
+                cursor-class-name="hb-cursor"
+                :typing-speed="48"
+                :initial-delay="80"
+                class-name="hb-line"
+                @animation-complete="onLineDone(i)"
+              />
+              <BlurText
+                v-else-if="lineStage > i"
+                :text="line"
+                :active="lineStage > i"
+                animate-by="words"
+                :delay="90"
+                class-name="hb-line"
+                @animation-complete="onLineDone(i)"
+              />
+            </template>
+          </div>
+
+          <div class="hb-footer" :class="{ 'is-show': stage >= 5 }">
+            <BlurText
+              v-if="stage >= 5"
+              :text="cfg.footer"
+              :active="stage >= 5"
+              animate-by="letters"
+              :delay="35"
+              class-name="hb-footer-text"
+              @animation-complete="bumpStage(6)"
+            />
+          </div>
+
+          <div v-if="cfg.showInviteButton && stage >= 6" class="hb-cta is-show">
+            <button type="button" class="hb-cta-btn" @click="goInvite">
+              {{ cfg.inviteButtonText }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!cfg.enabled && phase === 'content'" class="hb-disabled">
+      <p>海报暂未开放</p>
+      <button type="button" class="hb-cta-btn" @click="goInvite">前往请柬</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getPosterConfig } from '@/api/wedding'
+import { normalizePosterConfig, resolvePosterSide } from '@/composables/posterDefaults'
+import BlurText from '@/components/vue-bits/BlurText.vue'
+import TextType from '@/components/vue-bits/TextType.vue'
+
+const route = useRoute()
+const router = useRouter()
+const posterSide = computed(() => resolvePosterSide(route.meta.posterSide) || 'male')
+const cfg = reactive(normalizePosterConfig(null, posterSide.value))
+const phase = ref('loading') // loading | enter | content
+const enterLeaving = ref(false)
+const contentVisible = ref(false)
+const stage = ref(0)
+const lineStage = ref(0)
+const namesRightReady = ref(false)
+const nameLeft = computed(() => `${cfg.sonLabel || ''}${cfg.sonName || ''}`)
+const nameRight = computed(() => `${cfg.daughterInLawLabel || ''}${cfg.daughterInLawName || ''}`)
+let timers = []
+
+function later(fn, ms) {
+  const id = setTimeout(fn, ms)
+  timers.push(id)
+  return id
+}
+
+function bumpStage(n) {
+  if (stage.value < n) stage.value = n
+  if (n === 4) {
+    if (!cfg.lines?.length) {
+      later(() => bumpStage(5), 200)
+      return
+    }
+    lineStage.value = 1
+  }
+}
+
+function onNamesLeftDone() {
+  namesRightReady.value = true
+}
+
+function onLineDone(i) {
+  if (i + 1 >= cfg.lines.length) {
+    bumpStage(5)
+    return
+  }
+  if (lineStage.value === i + 1) lineStage.value = i + 2
+}
+
+function goInvite() {
+  const path = cfg.invitePath || '/'
+  if (path.startsWith('http')) window.location.href = path
+  else router.push(path)
+}
+
+async function runSequence() {
+  const loadMs = cfg.loadingEffect === 'fade' ? 700 : 1100
+  await new Promise((r) => later(r, loadMs))
+
+  if (!cfg.enabled) {
+    phase.value = 'content'
+    contentVisible.value = true
+    return
+  }
+
+  phase.value = 'enter'
+  contentVisible.value = false
+  await nextTick()
+
+  const enterMs = { fadeUp: 700, scaleIn: 800, curtain: 1000 }[cfg.enterEffect] || 700
+  later(() => {
+    enterLeaving.value = true
+    contentVisible.value = true
+  }, 80)
+  await new Promise((r) => later(r, enterMs))
+
+  phase.value = 'content'
+  later(() => { stage.value = 1 }, 200)
+  later(() => { stage.value = 2 }, 700)
+}
+
+onMounted(async () => {
+  const side = posterSide.value
+  try {
+    const res = await getPosterConfig(side)
+    Object.assign(cfg, normalizePosterConfig(res.data || {}, side))
+  } catch {
+    Object.assign(cfg, normalizePosterConfig(null, side))
+  }
+  runSequence()
+})
+
+onUnmounted(() => {
+  timers.forEach(clearTimeout)
+  timers = []
+})
+</script>
+
+<style scoped>
+.hb-root {
+  --hb-red: #9b0000;
+  --hb-red-deep: #7a0000;
+  --hb-red-bright: #c41e3a;
+  --hb-gold: #d4af37;
+  --hb-gold-soft: #f0d78c;
+  --hb-cream: #f7e7c3;
+  position: relative;
+  min-height: 100dvh;
+  background:
+    radial-gradient(ellipse at 50% 18%, #c20808 0%, transparent 42%),
+    radial-gradient(circle at 12% 80%, rgba(212, 175, 55, 0.12), transparent 28%),
+    radial-gradient(circle at 88% 75%, rgba(212, 175, 55, 0.1), transparent 26%),
+    radial-gradient(ellipse at 50% 20%, #b30000 0%, var(--hb-red) 45%, var(--hb-red-deep) 100%);
+  color: var(--hb-gold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
+}
+
+.hb-sprite {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+/* —— 全屏背景装饰 —— */
+.hb-bg-decor {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.hb-bg-xi {
+  position: absolute;
+  color: rgba(240, 215, 140, 0.14);
+  font-weight: 700;
+  line-height: 1;
+  user-select: none;
+  animation: hb-pulse-soft 7s ease-in-out infinite;
+}
+.hb-bg-xi-1 { top: 6%; left: 4%; font-size: 56px; transform: rotate(-12deg); animation-delay: 0s; }
+.hb-bg-xi-2 { top: 14%; right: 6%; font-size: 42px; transform: rotate(10deg); animation-delay: 1.2s; color: rgba(196, 30, 58, 0.22); }
+.hb-bg-xi-3 { bottom: 18%; left: 8%; font-size: 48px; transform: rotate(8deg); animation-delay: 2s; }
+.hb-bg-xi-4 { bottom: 10%; right: 10%; font-size: 64px; transform: rotate(-8deg); animation-delay: 0.6s; color: rgba(196, 30, 58, 0.18); }
+.hb-bg-xi-5 { top: 42%; left: 2%; font-size: 36px; opacity: 0.8; animation-delay: 3s; }
+.hb-bg-xi-6 { top: 48%; right: 3%; font-size: 40px; opacity: 0.75; animation-delay: 2.4s; }
+
+.hb-bg-knot {
+  position: absolute;
+  color: rgba(212, 175, 55, 0.28);
+  width: 72px;
+  height: 72px;
+  animation: hb-float 10s ease-in-out infinite;
+}
+.hb-bg-knot-1 { top: 8%; left: 14%; width: 64px; height: 64px; animation-delay: 0.4s; }
+.hb-bg-knot-2 { top: 22%; right: 12%; width: 56px; height: 56px; color: rgba(196, 30, 58, 0.28); animation-delay: 1.8s; }
+.hb-bg-knot-3 { bottom: 22%; left: 10%; width: 60px; height: 60px; animation-delay: 2.6s; }
+.hb-bg-knot-4 { bottom: 12%; right: 14%; width: 70px; height: 70px; color: rgba(240, 215, 140, 0.22); animation-delay: 1s; }
+
+.hb-bg-lantern {
+  position: absolute;
+  color: rgba(240, 215, 140, 0.35);
+  width: 36px;
+  height: 50px;
+  animation: hb-swing 5.5s ease-in-out infinite;
+}
+.hb-bg-lantern-1 { top: 4%; left: 22%; }
+.hb-bg-lantern-2 { top: 5%; right: 20%; animation-delay: 1.4s; }
+
+.hb-bg-spark {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--hb-gold-soft), transparent 70%);
+  box-shadow: 0 0 10px rgba(240, 215, 140, 0.55);
+  animation: hb-twinkle 2.8s ease-in-out infinite;
+}
+.hb-bg-spark-1 { top: 18%; left: 30%; animation-delay: 0s; }
+.hb-bg-spark-2 { top: 28%; right: 28%; animation-delay: 0.7s; }
+.hb-bg-spark-3 { bottom: 30%; left: 26%; animation-delay: 1.3s; }
+.hb-bg-spark-4 { bottom: 24%; right: 24%; animation-delay: 2s; }
+
+.hb-loading {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hb-red-deep);
+}
+
+.hb-seal {
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+  border: 3px solid var(--hb-gold);
+  color: var(--hb-gold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 42px;
+  font-weight: 700;
+  animation: hb-seal-pop 1s ease both;
+  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.15);
+}
+
+.hb-shimmer {
+  font-size: 28px;
+  letter-spacing: 0.35em;
+  background: linear-gradient(90deg, #8a6a1a, var(--hb-gold-soft), #8a6a1a);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: hb-shimmer 1.2s linear infinite;
+}
+
+.hb-fade-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--hb-gold);
+  animation: hb-fade-pulse 0.9s ease-in-out infinite;
+}
+
+.hb-enter {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  pointer-events: none;
+}
+
+.hb-enter--curtain .hb-enter-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 50%;
+  background: linear-gradient(180deg, #8b0000, #5c0000);
+  transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
+}
+.hb-enter--curtain .hb-enter-left { left: 0; border-right: 1px solid rgba(212, 175, 55, 0.35); }
+.hb-enter--curtain .hb-enter-right { right: 0; border-left: 1px solid rgba(212, 175, 55, 0.35); }
+.hb-enter--curtain.is-done .hb-enter-left { transform: translateX(-105%); }
+.hb-enter--curtain.is-done .hb-enter-right { transform: translateX(105%); }
+
+.hb-enter--fadeUp .hb-enter-veil,
+.hb-enter--scaleIn .hb-enter-veil {
+  position: absolute;
+  inset: 0;
+  background: var(--hb-red-deep);
+  transition: opacity 0.7s ease, transform 0.8s ease;
+}
+.hb-enter--fadeUp.is-done .hb-enter-veil {
+  opacity: 0;
+  transform: translateY(-24px);
+}
+.hb-enter--scaleIn.is-done .hb-enter-veil {
+  opacity: 0;
+  transform: scale(1.08);
+}
+
+.hb-stage {
+  position: relative;
+  z-index: 1;
+  width: min(420px, 100%);
+  opacity: 0;
+  transform: translateY(18px) scale(0.98);
+  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.hb-stage.is-visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.hb-frame {
+  position: relative;
+  border: 1.5px solid var(--hb-gold);
+  border-radius: 10px;
+  padding: 8px;
+  background:
+    linear-gradient(135deg, rgba(212, 175, 55, 0.18), transparent 40%),
+    linear-gradient(180deg, rgba(155, 0, 0, 0.4), rgba(90, 0, 0, 0.25));
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.35),
+    inset 0 0 0 1px rgba(240, 215, 140, 0.2);
+}
+
+.hb-frame-ornament {
+  position: absolute;
+  width: 34px;
+  height: 34px;
+  color: var(--hb-gold-soft);
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0.9;
+}
+.hb-frame-ornament svg { width: 100%; height: 100%; display: block; }
+.hb-frame-ornament-tl { top: 2px; left: 2px; }
+.hb-frame-ornament-tr { top: 2px; right: 2px; transform: scaleX(-1); }
+.hb-frame-ornament-bl { bottom: 2px; left: 2px; transform: scaleY(-1); }
+.hb-frame-ornament-br { bottom: 2px; right: 2px; transform: scale(-1); }
+
+.hb-inner {
+  position: relative;
+  border: 1.5px solid rgba(212, 175, 55, 0.85);
+  border-radius: 6px;
+  padding: 14px 14px 20px;
+  background:
+    linear-gradient(180deg, rgba(130, 0, 0, 0.58), rgba(110, 0, 0, 0.38)),
+    radial-gradient(circle at 90% 8%, rgba(255, 255, 255, 0.08), transparent 28%),
+    radial-gradient(circle at 10% 92%, rgba(196, 30, 58, 0.2), transparent 30%);
+  min-height: min(780px, calc(100dvh - 40px));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}
+
+.hb-inner::before {
+  content: '';
+  position: absolute;
+  inset: 5px;
+  border: 1px solid rgba(240, 215, 140, 0.35);
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 1;
+  clip-path: polygon(
+    0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
+    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
+  );
+}
+
+.hb-inner::after {
+  content: '';
+  position: absolute;
+  inset: 10px;
+  pointer-events: none;
+  z-index: 1;
+  border: 1px dashed rgba(212, 175, 55, 0.18);
+  border-radius: 2px;
+  opacity: 0.8;
+}
+
+/* —— 纸面装饰 —— */
+.hb-paper-decor {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.hb-paper-watermark {
+  position: absolute;
+  left: 50%;
+  top: 52%;
+  transform: translate(-50%, -50%);
+  font-size: min(220px, 58vw);
+  font-weight: 700;
+  color: rgba(196, 30, 58, 0.1);
+  line-height: 1;
+  letter-spacing: 0.05em;
+  text-shadow: 0 0 1px rgba(212, 175, 55, 0.15);
+}
+
+.hb-paper-knot {
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  color: rgba(212, 175, 55, 0.45);
+}
+.hb-paper-knot-tl { top: 10px; left: 10px; }
+.hb-paper-knot-tr { top: 10px; right: 10px; transform: scaleX(-1); color: rgba(240, 215, 140, 0.4); }
+.hb-paper-knot-bl { bottom: 12px; left: 10px; transform: scaleY(-1); color: rgba(240, 215, 140, 0.38); }
+.hb-paper-knot-br { bottom: 12px; right: 10px; transform: scale(-1); }
+
+.hb-paper-cloud {
+  position: absolute;
+  width: 96px;
+  height: 42px;
+  color: rgba(212, 175, 55, 0.32);
+}
+.hb-paper-cloud-t { top: 8px; left: 50%; transform: translateX(-50%); }
+.hb-paper-cloud-b { bottom: 8px; left: 50%; transform: translateX(-50%) scaleY(-1); color: rgba(196, 30, 58, 0.28); }
+
+.hb-paper-xi {
+  position: absolute;
+  top: 46%;
+  font-size: 22px;
+  font-weight: 700;
+  color: rgba(196, 30, 58, 0.28);
+  text-shadow: 0 0 8px rgba(212, 175, 55, 0.15);
+}
+.hb-paper-xi-l { left: 8px; transform: rotate(-18deg); }
+.hb-paper-xi-r { right: 8px; transform: rotate(18deg); }
+
+.hb-paper-dot {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgba(212, 175, 55, 0.45);
+  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.12);
+}
+.hb-paper-dot-1 { top: 22%; left: 14px; }
+.hb-paper-dot-2 { top: 22%; right: 14px; }
+.hb-paper-dot-3 { bottom: 26%; left: 16px; }
+.hb-paper-dot-4 { bottom: 26%; right: 16px; }
+
+.hb-paper-side {
+  position: absolute;
+  top: 28%;
+  bottom: 28%;
+  width: 10px;
+  background:
+    repeating-linear-gradient(
+      180deg,
+      transparent 0 10px,
+      rgba(212, 175, 55, 0.22) 10px 11px,
+      transparent 11px 20px
+    );
+  opacity: 0.7;
+}
+.hb-paper-side-l {
+  left: 4px;
+  border-left: 1px solid rgba(212, 175, 55, 0.25);
+}
+.hb-paper-side-r {
+  right: 4px;
+  border-right: 1px solid rgba(212, 175, 55, 0.25);
+}
+
+.hb-hero-wrap,
+.hb-names,
+.hb-title-wrap,
+.hb-body,
+.hb-footer,
+.hb-cta {
+  position: relative;
+  z-index: 2;
+}
+
+.hb-hero-wrap {
+  width: 100%;
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 0.55s ease, transform 0.55s ease;
+  margin-bottom: 14px;
+}
+.hb-hero-wrap.is-show {
+  opacity: 1;
+  transform: none;
+}
+
+.hb-hero {
+  position: relative;
+  border: 1.5px solid var(--hb-gold);
+  padding: 3px;
+  background: rgba(0, 0, 0, 0.15);
+  aspect-ratio: 16 / 11;
+  overflow: hidden;
+}
+
+.hb-hero-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.hb-hero-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(240, 215, 140, 0.55);
+  letter-spacing: 0.3em;
+  font-size: 13px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.hb-xi {
+  position: absolute;
+  top: 10%;
+  font-size: 28px;
+  color: #c41e3a;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+  font-weight: 700;
+  opacity: 0.92;
+  pointer-events: none;
+}
+.hb-xi-l { left: 8%; }
+.hb-xi-r { right: 8%; }
+
+.hb-names {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 28px;
+  margin-bottom: 8px;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+.hb-names.is-show { opacity: 1; }
+
+.hb-name {
+  color: #f7efe0 !important;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  justify-content: center;
+}
+
+.hb-xi-circle {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid var(--hb-gold);
+  color: var(--hb-gold);
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: rgba(155, 0, 0, 0.5);
+}
+
+.hb-title-wrap {
+  margin: 4px 0 12px;
+  min-height: 48px;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+.hb-title-wrap.is-show { opacity: 1; }
+
+.hb-title {
+  color: var(--hb-gold-soft) !important;
+  font-size: clamp(30px, 9vw, 40px);
+  letter-spacing: 0.18em;
+  justify-content: center;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+}
+
+.hb-body {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 9px;
+  padding: 4px 4px 10px;
+}
+
+.hb-line {
+  color: var(--hb-gold-soft) !important;
+  font-size: 13px;
+  letter-spacing: 0.14em;
+  line-height: 1.55;
+  text-align: center;
+  justify-content: center;
+}
+
+.hb-cursor {
+  color: var(--hb-gold);
+}
+
+.hb-footer {
+  margin-top: 8px;
+  min-height: 24px;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+.hb-footer.is-show { opacity: 1; }
+
+.hb-footer-text {
+  color: #f7efe0 !important;
+  font-size: 12px;
+  letter-spacing: 0.2em;
+  justify-content: center;
+}
+
+.hb-cta {
+  margin-top: 16px;
+  opacity: 0;
+  transform: translateY(8px);
+  animation: hb-cta-in 0.5s ease forwards;
+}
+.hb-cta.is-show { opacity: 1; }
+
+.hb-cta-btn {
+  appearance: none;
+  border: 1px solid var(--hb-gold);
+  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
+  color: var(--hb-gold-soft);
+  padding: 8px 22px;
+  border-radius: 999px;
+  letter-spacing: 0.28em;
+  font-size: 13px;
+  cursor: pointer;
+}
+.hb-cta-btn:active { transform: scale(0.98); }
+
+.hb-disabled {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  background: rgba(80, 0, 0, 0.92);
+  color: var(--hb-cream);
+}
+
+@keyframes hb-seal-pop {
+  0% { opacity: 0; transform: scale(0.4) rotate(-12deg); }
+  60% { opacity: 1; transform: scale(1.08) rotate(2deg); }
+  100% { opacity: 1; transform: scale(1) rotate(0); }
+}
+@keyframes hb-shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+@keyframes hb-fade-pulse {
+  0%, 100% { opacity: 0.25; transform: scale(0.85); }
+  50% { opacity: 1; transform: scale(1.1); }
+}
+@keyframes hb-cta-in {
+  to { opacity: 1; transform: none; }
+}
+@keyframes hb-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+@keyframes hb-pulse-soft {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+@keyframes hb-swing {
+  0%, 100% { transform: rotate(-4deg); }
+  50% { transform: rotate(4deg); }
+}
+@keyframes hb-twinkle {
+  0%, 100% { opacity: 0.25; transform: scale(0.7); }
+  50% { opacity: 1; transform: scale(1.25); }
+}
+</style>
--- a/vite-tailwindcss/vite.config.js
+++ b/vite-tailwindcss/vite.config.js
@@ -17,10 +17,10 @@ export default defineConfig({
    server: {
        port: 8888,
        proxy: {
-            // 婚礼纪 Go 后端运行在 :8080，接口统一以 /api 开头，无需重写
+            // 婚礼纪 Go 后端运行在 :15201，接口统一以 /api 开头，无需重写
            '/api': {
-                // target: 'http://127.0.0.1:15201',
-                target: 'https://hl.yqh.nailaoyun.cn',
+                target: 'http://127.0.0.1:15201',
+                // target: 'https://hl.yqh.nailaoyun.cn',
                changeOrigin: true
            }
        }