1. 海报
This commit is contained in:
李琦
@@ -10,7 +10,7 @@ import (
|
|||||||
|
|
||||||
type templateConfig struct {
|
type templateConfig struct {
|
||||||
ID uint `gorm:"primaryKey"`
|
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" }
|
func (templateConfig) TableName() string { return "template_configs" }
|
||||||
@@ -75,7 +75,7 @@ func saveConfigMap(m map[string]interface{}) error {
|
|||||||
return err
|
return err
|
||||||
}
|
}
|
||||||
var config templateConfig
|
var config templateConfig
|
||||||
db.FirstOrCreate(&config, 1)
|
db.Attrs(templateConfig{ConfigData: "{}"}).FirstOrCreate(&config, templateConfig{ID: 1})
|
||||||
config.ConfigData = string(jsonBytes)
|
config.ConfigData = string(jsonBytes)
|
||||||
return db.Save(&config).Error
|
return db.Save(&config).Error
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ func migrateSchema(db *gorm.DB) {
|
|||||||
name string
|
name string
|
||||||
}{
|
}{
|
||||||
{&models.TemplateConfig{}, "请柬模板配置", "template_configs"},
|
{&models.TemplateConfig{}, "请柬模板配置", "template_configs"},
|
||||||
|
{&models.PosterConfig{}, "邀请函海报配置", "poster_configs"},
|
||||||
{&models.UploadConfig{}, "上传配置", "upload_configs"},
|
{&models.UploadConfig{}, "上传配置", "upload_configs"},
|
||||||
{&models.Rsvp{}, "出席回执", "rsvps"},
|
{&models.Rsvp{}, "出席回执", "rsvps"},
|
||||||
{&models.Danmaku{}, "祝福弹幕", "danmakus"},
|
{&models.Danmaku{}, "祝福弹幕", "danmakus"},
|
||||||
|
|||||||
@@ -3,13 +3,22 @@ package models
|
|||||||
import "time"
|
import "time"
|
||||||
|
|
||||||
type TemplateConfig struct {
|
type TemplateConfig struct {
|
||||||
ID uint `gorm:"primaryKey;comment:主键ID" json:"id"`
|
ID uint `gorm:"primaryKey;comment:主键ID" json:"id"`
|
||||||
ConfigData string `gorm:"type:json;column:config_data;not null;default:'{}';comment:请柬配置JSON" json:"config_data"`
|
// 旧版 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"`
|
UpdatedAt time.Time `gorm:"column:updated_at;comment:更新时间" json:"updated_at"`
|
||||||
}
|
}
|
||||||
|
|
||||||
func (TemplateConfig) TableName() string { return "template_configs" }
|
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 {
|
type UploadConfig struct {
|
||||||
ID uint `gorm:"primaryKey;comment:主键ID" json:"id"`
|
ID uint `gorm:"primaryKey;comment:主键ID" json:"id"`
|
||||||
Provider string `gorm:"column:provider;size:20;not null;default:local;comment:上传方式 local|oss" json:"provider"`
|
Provider string `gorm:"column:provider;size:20;not null;default:local;comment:上传方式 local|oss" json:"provider"`
|
||||||
|
|||||||
138
hunliji-api/posterconfig/poster.go
Normal file
138
hunliji-api/posterconfig/poster.go
Normal file
@@ -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})
|
||||||
|
}
|
||||||
@@ -15,6 +15,7 @@ import (
|
|||||||
|
|
||||||
"hunliji-api/configsection"
|
"hunliji-api/configsection"
|
||||||
"hunliji-api/models"
|
"hunliji-api/models"
|
||||||
|
"hunliji-api/posterconfig"
|
||||||
"hunliji-api/spark"
|
"hunliji-api/spark"
|
||||||
"hunliji-api/utils"
|
"hunliji-api/utils"
|
||||||
"hunliji-api/visit"
|
"hunliji-api/visit"
|
||||||
@@ -80,6 +81,7 @@ func registerAPI(api *gin.RouterGroup) {
|
|||||||
|
|
||||||
visit.Register(api, db, utils.RequireAdmin)
|
visit.Register(api, db, utils.RequireAdmin)
|
||||||
configsection.Register(api, db, utils.RequireAdmin)
|
configsection.Register(api, db, utils.RequireAdmin)
|
||||||
|
posterconfig.Register(api, db, utils.RequireAdmin)
|
||||||
}
|
}
|
||||||
|
|
||||||
func handleAdminLogin(c *gin.Context) {
|
func handleAdminLogin(c *gin.Context) {
|
||||||
@@ -126,7 +128,7 @@ func handleSaveConfig(c *gin.Context) {
|
|||||||
}
|
}
|
||||||
jsonBytes, _ := json.Marshal(rawBody)
|
jsonBytes, _ := json.Marshal(rawBody)
|
||||||
var config models.TemplateConfig
|
var config models.TemplateConfig
|
||||||
db.FirstOrCreate(&config, 1)
|
db.Attrs(models.TemplateConfig{ConfigData: "{}"}).FirstOrCreate(&config, models.TemplateConfig{ID: 1})
|
||||||
config.ConfigData = string(jsonBytes)
|
config.ConfigData = string(jsonBytes)
|
||||||
if err := db.Save(&config).Error; err != nil {
|
if err := db.Save(&config).Error; err != nil {
|
||||||
c.JSON(500, gin.H{"error": "数据库保存配置失败"})
|
c.JSON(500, gin.H{"error": "数据库保存配置失败"})
|
||||||
|
|||||||
126
vite-tailwindcss/package-lock.json
generated
126
vite-tailwindcss/package-lock.json
generated
@@ -19,7 +19,9 @@
|
|||||||
"ant-design-vue": "^4.1.1",
|
"ant-design-vue": "^4.1.1",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"echarts": "^6.1.0",
|
"echarts": "^6.1.0",
|
||||||
|
"gsap": "^3.15.0",
|
||||||
"lucide-vue-next": "^0.507.0",
|
"lucide-vue-next": "^0.507.0",
|
||||||
|
"motion-v": "^2.3.0",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"swiper": "^11.0.5",
|
"swiper": "^11.0.5",
|
||||||
"tailwindcss": "^4.1.4",
|
"tailwindcss": "^4.1.4",
|
||||||
@@ -1529,6 +1531,13 @@
|
|||||||
"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
|
"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@unhead/dom": {
|
||||||
"version": "1.11.20",
|
"version": "1.11.20",
|
||||||
"resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.20.tgz",
|
"resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.20.tgz",
|
||||||
@@ -1717,6 +1726,24 @@
|
|||||||
"integrity": "sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==",
|
"integrity": "sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@vueuse/head": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@vueuse/head/-/head-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@vueuse/head/-/head-2.0.0.tgz",
|
||||||
@@ -1732,6 +1759,29 @@
|
|||||||
"vue": ">=2.7 || >=3"
|
"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": {
|
"node_modules/agent-base": {
|
||||||
"version": "6.0.2",
|
"version": "6.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
|
||||||
@@ -2125,6 +2175,39 @@
|
|||||||
"node": ">= 6"
|
"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": {
|
"node_modules/fsevents": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
"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==",
|
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
|
||||||
"license": "ISC"
|
"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": {
|
"node_modules/has-symbols": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||||
@@ -2242,6 +2331,12 @@
|
|||||||
"node": ">= 0.4"
|
"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": {
|
"node_modules/hookable": {
|
||||||
"version": "5.5.3",
|
"version": "5.5.3",
|
||||||
"resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
|
||||||
@@ -2637,6 +2732,37 @@
|
|||||||
"node": ">= 0.6"
|
"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": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
|
|||||||
@@ -20,7 +20,9 @@
|
|||||||
"ant-design-vue": "^4.1.1",
|
"ant-design-vue": "^4.1.1",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"echarts": "^6.1.0",
|
"echarts": "^6.1.0",
|
||||||
|
"gsap": "^3.15.0",
|
||||||
"lucide-vue-next": "^0.507.0",
|
"lucide-vue-next": "^0.507.0",
|
||||||
|
"motion-v": "^2.3.0",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"swiper": "^11.0.5",
|
"swiper": "^11.0.5",
|
||||||
"tailwindcss": "^4.1.4",
|
"tailwindcss": "^4.1.4",
|
||||||
|
|||||||
103
vite-tailwindcss/pnpm-lock.yaml
generated
103
vite-tailwindcss/pnpm-lock.yaml
generated
@@ -41,9 +41,15 @@ importers:
|
|||||||
echarts:
|
echarts:
|
||||||
specifier: ^6.1.0
|
specifier: ^6.1.0
|
||||||
version: 6.1.0
|
version: 6.1.0
|
||||||
|
gsap:
|
||||||
|
specifier: ^3.15.0
|
||||||
|
version: 3.15.0
|
||||||
lucide-vue-next:
|
lucide-vue-next:
|
||||||
specifier: ^0.507.0
|
specifier: ^0.507.0
|
||||||
version: 0.507.0(vue@3.5.40)
|
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:
|
pinia:
|
||||||
specifier: ^2.1.7
|
specifier: ^2.1.7
|
||||||
version: 2.3.1(vue@3.5.40)
|
version: 2.3.1(vue@3.5.40)
|
||||||
@@ -630,6 +636,9 @@ packages:
|
|||||||
'@types/estree@1.0.9':
|
'@types/estree@1.0.9':
|
||||||
resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
|
resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
|
||||||
|
|
||||||
|
'@types/web-bluetooth@0.0.21':
|
||||||
|
resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
|
||||||
|
|
||||||
'@unhead/dom@1.11.20':
|
'@unhead/dom@1.11.20':
|
||||||
resolution: {integrity: sha512-jgfGYdOH+xHJF/j8gudjsYu3oIjFyXhCWcgKaw3vQnT616gSqyqnGQGOItL+BQtQZACKNISwIfx5PuOtztMKLA==}
|
resolution: {integrity: sha512-jgfGYdOH+xHJF/j8gudjsYu3oIjFyXhCWcgKaw3vQnT616gSqyqnGQGOItL+BQtQZACKNISwIfx5PuOtztMKLA==}
|
||||||
|
|
||||||
@@ -684,11 +693,24 @@ packages:
|
|||||||
'@vue/shared@3.5.40':
|
'@vue/shared@3.5.40':
|
||||||
resolution: {integrity: sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==}
|
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':
|
'@vueuse/head@2.0.0':
|
||||||
resolution: {integrity: sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==}
|
resolution: {integrity: sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
vue: '>=2.7 || >=3'
|
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:
|
agent-base@6.0.2:
|
||||||
resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
|
resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
|
||||||
engines: {node: '>= 6.0.0'}
|
engines: {node: '>= 6.0.0'}
|
||||||
@@ -819,6 +841,20 @@ packages:
|
|||||||
resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
|
resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
|
||||||
engines: {node: '>= 6'}
|
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:
|
fsevents@2.3.3:
|
||||||
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
|
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
|
||||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||||
@@ -842,6 +878,9 @@ packages:
|
|||||||
graceful-fs@4.2.11:
|
graceful-fs@4.2.11:
|
||||||
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
|
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:
|
has-symbols@1.1.0:
|
||||||
resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
|
resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
@@ -854,6 +893,9 @@ packages:
|
|||||||
resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
|
resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
|
|
||||||
|
hey-listen@1.0.8:
|
||||||
|
resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
|
||||||
|
|
||||||
hookable@5.5.3:
|
hookable@5.5.3:
|
||||||
resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
|
resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
|
||||||
|
|
||||||
@@ -988,6 +1030,18 @@ packages:
|
|||||||
resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
|
resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
|
||||||
engines: {node: '>= 0.6'}
|
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:
|
ms@2.1.3:
|
||||||
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
||||||
|
|
||||||
@@ -1084,6 +1138,9 @@ packages:
|
|||||||
tslib@2.3.0:
|
tslib@2.3.0:
|
||||||
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
|
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
|
||||||
|
|
||||||
|
tslib@2.8.1:
|
||||||
|
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
|
||||||
|
|
||||||
unhead@1.11.20:
|
unhead@1.11.20:
|
||||||
resolution: {integrity: sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==}
|
resolution: {integrity: sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==}
|
||||||
|
|
||||||
@@ -1526,6 +1583,8 @@ snapshots:
|
|||||||
|
|
||||||
'@types/estree@1.0.9': {}
|
'@types/estree@1.0.9': {}
|
||||||
|
|
||||||
|
'@types/web-bluetooth@0.0.21': {}
|
||||||
|
|
||||||
'@unhead/dom@1.11.20':
|
'@unhead/dom@1.11.20':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@unhead/schema': 1.11.20
|
'@unhead/schema': 1.11.20
|
||||||
@@ -1615,6 +1674,13 @@ snapshots:
|
|||||||
|
|
||||||
'@vue/shared@3.5.40': {}
|
'@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)':
|
'@vueuse/head@2.0.0(vue@3.5.40)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@unhead/dom': 1.11.20
|
'@unhead/dom': 1.11.20
|
||||||
@@ -1623,6 +1689,12 @@ snapshots:
|
|||||||
'@unhead/vue': 1.11.20(vue@3.5.40)
|
'@unhead/vue': 1.11.20(vue@3.5.40)
|
||||||
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:
|
agent-base@6.0.2:
|
||||||
dependencies:
|
dependencies:
|
||||||
debug: 4.4.3
|
debug: 4.4.3
|
||||||
@@ -1784,6 +1856,12 @@ snapshots:
|
|||||||
hasown: 2.0.4
|
hasown: 2.0.4
|
||||||
mime-types: 2.1.35
|
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:
|
fsevents@2.3.3:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
@@ -1811,6 +1889,8 @@ snapshots:
|
|||||||
|
|
||||||
graceful-fs@4.2.11: {}
|
graceful-fs@4.2.11: {}
|
||||||
|
|
||||||
|
gsap@3.15.0: {}
|
||||||
|
|
||||||
has-symbols@1.1.0: {}
|
has-symbols@1.1.0: {}
|
||||||
|
|
||||||
has-tostringtag@1.0.2:
|
has-tostringtag@1.0.2:
|
||||||
@@ -1821,6 +1901,8 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
function-bind: 1.1.2
|
function-bind: 1.1.2
|
||||||
|
|
||||||
|
hey-listen@1.0.8: {}
|
||||||
|
|
||||||
hookable@5.5.3: {}
|
hookable@5.5.3: {}
|
||||||
|
|
||||||
https-proxy-agent@5.0.1:
|
https-proxy-agent@5.0.1:
|
||||||
@@ -1919,6 +2001,25 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
mime-db: 1.52.0
|
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: {}
|
ms@2.1.3: {}
|
||||||
|
|
||||||
nanoid@3.3.16: {}
|
nanoid@3.3.16: {}
|
||||||
@@ -2020,6 +2121,8 @@ snapshots:
|
|||||||
|
|
||||||
tslib@2.3.0: {}
|
tslib@2.3.0: {}
|
||||||
|
|
||||||
|
tslib@2.8.1: {}
|
||||||
|
|
||||||
unhead@1.11.20:
|
unhead@1.11.20:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@unhead/dom': 1.11.20
|
'@unhead/dom': 1.11.20
|
||||||
|
|||||||
@@ -84,6 +84,16 @@ export function saveUploadConfig(payload) {
|
|||||||
return service.post('/upload/config', 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) {
|
export function uploadImage(file) {
|
||||||
const form = new FormData()
|
const form = new FormData()
|
||||||
form.append('file', file)
|
form.append('file', file)
|
||||||
|
|||||||
159
vite-tailwindcss/src/components/vue-bits/BlurText.vue
Normal file
159
vite-tailwindcss/src/components/vue-bits/BlurText.vue
Normal file
@@ -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"> </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>
|
||||||
186
vite-tailwindcss/src/components/vue-bits/TextType.vue
Normal file
186
vite-tailwindcss/src/components/vue-bits/TextType.vue
Normal file
@@ -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>
|
||||||
147
vite-tailwindcss/src/composables/posterDefaults.js
Normal file
147
vite-tailwindcss/src/composables/posterDefaults.js
Normal file
@@ -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]
|
||||||
|
}
|
||||||
@@ -8,6 +8,22 @@ const routes = [
|
|||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: () => import('@/views/index/index.vue'),
|
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',
|
path: '/login',
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
|
|||||||
@@ -13,6 +13,17 @@
|
|||||||
<a-button size="small" @click="openPreview">
|
<a-button size="small" @click="openPreview">
|
||||||
<i class="fa-solid fa-eye mr-1 text-[#a88c6b]"></i>预览请柬
|
<i class="fa-solid fa-eye mr-1 text-[#a88c6b]"></i>预览请柬
|
||||||
</a-button>
|
</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
|
<a-button
|
||||||
v-if="isConfigTab"
|
v-if="isConfigTab"
|
||||||
type="primary"
|
type="primary"
|
||||||
@@ -399,6 +410,85 @@
|
|||||||
</a-card>
|
</a-card>
|
||||||
</a-tab-pane>
|
</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="相册页管理">
|
<a-tab-pane key="photos" tab="相册页管理">
|
||||||
<div class="admin-panel !p-4 mb-3">
|
<div class="admin-panel !p-4 mb-3">
|
||||||
<div class="flex justify-between items-center gap-3 flex-wrap">
|
<div class="flex justify-between items-center gap-3 flex-wrap">
|
||||||
@@ -731,12 +821,17 @@ import { CanvasRenderer } from 'echarts/renderers'
|
|||||||
import {
|
import {
|
||||||
getConfigSection, saveConfigSection, uploadImage, getRsvpList, getUploadConfig, saveUploadConfig,
|
getConfigSection, saveConfigSection, uploadImage, getRsvpList, getUploadConfig, saveUploadConfig,
|
||||||
getDanmakuList, updateDanmakuStatus, getVisitStats, getVisitList,
|
getDanmakuList, updateDanmakuStatus, getVisitStats, getVisitList,
|
||||||
|
getPosterConfig, savePosterConfig,
|
||||||
} from '@/api/wedding'
|
} from '@/api/wedding'
|
||||||
import { useAdminStore } from '@/stores/admin'
|
import { useAdminStore } from '@/stores/admin'
|
||||||
import ImageField from '@/components/ImageField.vue'
|
import ImageField from '@/components/ImageField.vue'
|
||||||
import { BORDER_STYLES, borderClass } from '@/composables/borderStyles'
|
import { BORDER_STYLES, borderClass } from '@/composables/borderStyles'
|
||||||
import { resolveDanmakuSwatch } from '@/utils/danmakuColors'
|
import { resolveDanmakuSwatch } from '@/utils/danmakuColors'
|
||||||
import { getSlotResizeSpecs, resizeSlotToFile, probeResizedMeta, metaHasFileSize } from '@/composables/resizeImage'
|
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])
|
echarts.use([PieChart, TooltipComponent, LegendComponent, CanvasRenderer])
|
||||||
|
|
||||||
@@ -745,7 +840,7 @@ const adminStore = useAdminStore()
|
|||||||
|
|
||||||
const TAB_KEY = 'wedding_admin_active_tab'
|
const TAB_KEY = 'wedding_admin_active_tab'
|
||||||
const CONFIG_SECTIONS = ['basic', 'copy', 'visual', 'music', 'photos', 'schedule']
|
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 = {
|
const SECTION_KEYS = {
|
||||||
basic: ['groom', 'bride', 'date', 'lunar', 'calendarDate', 'hotel', 'address', 'heroImg', 'endImg'],
|
basic: ['groom', 'bride', 'date', 'lunar', 'calendarDate', 'hotel', 'address', 'heroImg', 'endImg'],
|
||||||
@@ -774,6 +869,8 @@ const uploading = ref(false)
|
|||||||
const resizingPage = ref(false)
|
const resizingPage = ref(false)
|
||||||
const resizeProgress = ref('')
|
const resizeProgress = ref('')
|
||||||
const uploadConfigSaving = ref(false)
|
const uploadConfigSaving = ref(false)
|
||||||
|
const posterSaving = ref(false)
|
||||||
|
const posterLoading = ref(false)
|
||||||
const tabLoading = ref(false)
|
const tabLoading = ref(false)
|
||||||
const rsvpLoading = ref(false)
|
const rsvpLoading = ref(false)
|
||||||
const rsvpList = ref([])
|
const rsvpList = ref([])
|
||||||
@@ -791,6 +888,22 @@ let regionChart = null
|
|||||||
|
|
||||||
const cfg = reactive(defaultConfig())
|
const cfg = reactive(defaultConfig())
|
||||||
const uploadCfg = reactive(defaultUploadConfig())
|
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 currentPhotoIndex = computed(() => Math.min(Number(activePhotoTab.value) || 0, Math.max(cfg.photoPages.length - 1, 0)))
|
||||||
const isConfigTab = computed(() => CONFIG_SECTIONS.includes(activeTab.value))
|
const isConfigTab = computed(() => CONFIG_SECTIONS.includes(activeTab.value))
|
||||||
const visitPagination = computed(() => ({
|
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) {
|
function pickSectionData(section) {
|
||||||
const keys = SECTION_KEYS[section] || []
|
const keys = SECTION_KEYS[section] || []
|
||||||
const data = {}
|
const data = {}
|
||||||
@@ -1390,6 +1533,10 @@ async function onTabActivate(tab) {
|
|||||||
await loadUploadConfig()
|
await loadUploadConfig()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if (tab === 'poster') {
|
||||||
|
await loadPosterConfig()
|
||||||
|
return
|
||||||
|
}
|
||||||
if (tab === 'rsvp') {
|
if (tab === 'rsvp') {
|
||||||
await loadRsvp()
|
await loadRsvp()
|
||||||
return
|
return
|
||||||
@@ -1400,6 +1547,10 @@ async function onTabActivate(tab) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function openPreview() { window.open('/', '_blank') }
|
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() {
|
function onLogout() {
|
||||||
adminStore.logout()
|
adminStore.logout()
|
||||||
|
|||||||
862
vite-tailwindcss/src/views/hb/index.vue
Normal file
862
vite-tailwindcss/src/views/hb/index.vue
Normal file
@@ -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>
|
||||||
@@ -17,10 +17,10 @@ export default defineConfig({
|
|||||||
server: {
|
server: {
|
||||||
port: 8888,
|
port: 8888,
|
||||||
proxy: {
|
proxy: {
|
||||||
// 婚礼纪 Go 后端运行在 :8080，接口统一以 /api 开头，无需重写
|
// 婚礼纪 Go 后端运行在 :15201，接口统一以 /api 开头，无需重写
|
||||||
'/api': {
|
'/api': {
|
||||||
// target: 'http://127.0.0.1:15201',
|
target: 'http://127.0.0.1:15201',
|
||||||
target: 'https://hl.yqh.nailaoyun.cn',
|
// target: 'https://hl.yqh.nailaoyun.cn',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user