diff --git a/README.md b/README.md
index 8c3e127..c1114b8 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1 @@
 # TopFans
-背景有什么想法？边框想要什么样式的？有没有特别想加的装饰元素？整体材质的效果想要什么样的？主色调是应援色吗，还是别的颜色？
\ No newline at end of file
diff --git a/backend/gateway/controller/asset_controller.go b/backend/gateway/controller/asset_controller.go
index 67222b4..647ffdc 100644
--- a/backend/gateway/controller/asset_controller.go
+++ b/backend/gateway/controller/asset_controller.go
@@ -276,7 +276,7 @@ func (ctrl *AssetController) CreateMintOrder(c *gin.Context) {
 		Rarity:       req.Rarity,
 		Tags:         req.Tags,
 		MaterialType: req.MaterialType,
-		Event:        req.Event,
+		Info:         req.Info,
 	})
 
 	if err != nil {
diff --git a/backend/gateway/dto/asset_converter.go b/backend/gateway/dto/asset_converter.go
index 139d70f..84260a6 100644
--- a/backend/gateway/dto/asset_converter.go
+++ b/backend/gateway/dto/asset_converter.go
@@ -83,6 +83,7 @@ func ConvertAsset(pbAsset *pbAsset.Asset) AssetDTO {
 		CreatedAt:     pbAsset.CreatedAt,
 		UpdatedAt:     pbAsset.UpdatedAt,
 		IsLiked:       pbAsset.IsLiked,
+		Info:          pbAsset.Info,
 	}
 
 	// 可选字段
diff --git a/backend/gateway/dto/asset_dto.go b/backend/gateway/dto/asset_dto.go
index 7148e52..2436274 100644
--- a/backend/gateway/dto/asset_dto.go
+++ b/backend/gateway/dto/asset_dto.go
@@ -4,14 +4,14 @@ package dto
 
 // CreateMintOrderRequestDTO 创建铸造订单请求
 type CreateMintOrderRequestDTO struct {
-	OrderID     string   `json:"order_id" binding:"required"`      // 阶段一生成的订单ID（必填）
-	Name        string   `json:"name" binding:"required"`          // 藏品名称（必填）
-	MaterialURL string   `json:"material_url" binding:"required"`  // 用户上传的素材URL（必填，前端已上传到OSS）
-	Description string   `json:"description"`                      // 藏品描述（可选）
-	Rarity      int32    `json:"rarity"`                         // 稀有度（可选）
-	Tags        []string `json:"tags"`                           // 标签列表（可选）
-	MaterialType string  `json:"material_type"`                   // 素材类型（可选）
-	Event        string  `json:"event"`                          // 藏品事件（可选）
+	OrderID      string   `json:"order_id" binding:"required"`     // 阶段一生成的订单ID（必填）
+	Name         string   `json:"name"`                            // 藏品名称（可选）
+	MaterialURL  string   `json:"material_url" binding:"required"` // 用户上传的素材URL（必填，前端已上传到OSS）
+	Description  string   `json:"description"`                     // 藏品描述（可选）
+	Rarity       int32    `json:"rarity"`                          // 稀有度（可选）
+	Tags         []string `json:"tags"`                            // 标签列表（可选）
+	MaterialType string   `json:"material_type"`                   // 素材类型（可选）
+	Info         string   `json:"info" binding:"required"`         // 藏品信息（必填）
 }
 
 // PreCreateMintOrderRequestDTO 阶段一：预创建铸造订单（返回 order_id）
@@ -79,6 +79,7 @@ type AssetDTO struct {
 	MintedAt        int64         `json:"minted_at,omitempty"`        // 上链成功时间（毫秒时间戳，可选）
 	Owner           *OwnerInfoDTO `json:"owner,omitempty"`            // 持有者信息（可选，保留用于兼容性）
 	IsLiked         bool          `json:"is_liked"`                   // 当前用户是否已点赞
+	Info            string        `json:"info"`                       // 藏品信息
 }
 
 // OwnerInfoDTO 持有者信息
diff --git a/backend/pkg/models/asset.go b/backend/pkg/models/asset.go
index 8ab5911..9faa055 100644
--- a/backend/pkg/models/asset.go
+++ b/backend/pkg/models/asset.go
@@ -22,6 +22,7 @@ type Asset struct {
 	Rarity      *int32      `gorm:"column:rarity"`                                        // 稀有度（预留）
 	Tags        StringArray `gorm:"type:jsonb;column:tags"`                               // 标签（预留，JSON数组）
 	Visibility  string      `gorm:"type:varchar(20);default:'private';column:visibility"` // 可见性：private, friends, public（预留）
+	Info        string      `gorm:"type:text;column:info"`                                // 藏品信息（必填）
 
 	// 状态字段
 	Status int32 `gorm:"not null;default:0;index:idx_assets_status;column:status"` // 0:Pending, 1:Active
@@ -122,6 +123,7 @@ type MintOrder struct {
 	Description  *string `gorm:"type:text;column:description"`          // 藏品描述（阶段一写入，可选）
 	MaterialType *string `gorm:"type:varchar(50);column:material_type"`                                                  // 素材类型（可选）
 	Event        *string `gorm:"type:varchar(100);column:event"`                                                         // 藏品事件（可选）
+	Info         *string `gorm:"type:text;column:info"`                                                                   // 藏品信息（必填）
 	CreatedAt    int64   `gorm:"not null;index:idx_mint_orders_created_at,sort:desc;column:created_at"`
 	UpdatedAt    int64   `gorm:"not null;column:updated_at"`
 	MintedAt     *int64  `gorm:"column:minted_at"` // 上链成功时间（用于 Task Service 事件）
diff --git a/backend/pkg/proto/asset/asset.pb.go b/backend/pkg/proto/asset/asset.pb.go
index efea015..cfeaca7 100644
--- a/backend/pkg/proto/asset/asset.pb.go
+++ b/backend/pkg/proto/asset/asset.pb.go
@@ -47,6 +47,7 @@ type Asset struct {
 	Owner         *OwnerInfo `protobuf:"bytes,18,opt,name=owner,proto3" json:"owner,omitempty"`                                      // 持有者信息（保留用于兼容性）
 	OwnerNickname string     `protobuf:"bytes,19,opt,name=owner_nickname,json=ownerNickname,proto3" json:"owner_nickname,omitempty"` // 持有者昵称（在该star下的昵称）
 	IsLiked       bool       `protobuf:"varint,20,opt,name=is_liked,json=isLiked,proto3" json:"is_liked,omitempty"`                  // 当前用户是否已点赞
+	Info          string     `protobuf:"bytes,21,opt,name=info,proto3" json:"info,omitempty"`                                      // 藏品信息
 	unknownFields protoimpl.UnknownFields
 	sizeCache     protoimpl.SizeCache
 }
@@ -221,6 +222,13 @@ func (x *Asset) GetIsLiked() bool {
 	return false
 }
 
+func (x *Asset) GetInfo() string {
+	if x != nil {
+		return x.Info
+	}
+	return ""
+}
+
 // 持有者信息
 type OwnerInfo struct {
 	state         protoimpl.MessageState `protogen:"open.v1"`
@@ -548,13 +556,13 @@ func (x *InitMintOrderResponse) GetOrder() *MintOrder {
 type CreateMintOrderRequest struct {
 	state         protoimpl.MessageState `protogen:"open.v1"`
 	OrderId       string                 `protobuf:"bytes,2,opt,name=order_id,json=orderId,proto3" json:"order_id,omitempty"`                // 阶段一生成的订单ID（必填）
-	Name          string                 `protobuf:"bytes,1,opt,name=name,proto3" json:"name,omitempty"`                                     // 藏品名称（必填，可覆盖阶段一保存值）
+	Name          string                 `protobuf:"bytes,1,opt,name=name,proto3" json:"name,omitempty"`                                     // 藏品名称（可选）
 	MaterialUrl   string                 `protobuf:"bytes,3,opt,name=material_url,json=materialUrl,proto3" json:"material_url,omitempty"`    // 用户上传的素材URL（必填，前端已上传到OSS）
 	Description   string                 `protobuf:"bytes,4,opt,name=description,proto3" json:"description,omitempty"`                       // 藏品描述（可选）
 	Rarity        int32                  `protobuf:"varint,5,opt,name=rarity,proto3" json:"rarity,omitempty"`                                // 稀有度（可选）
 	Tags          []string               `protobuf:"bytes,6,rep,name=tags,proto3" json:"tags,omitempty"`                                     // 标签列表（可选）
 	MaterialType  string                 `protobuf:"bytes,7,opt,name=material_type,json=materialType,proto3" json:"material_type,omitempty"` // 素材类型（可选）
-	Event         string                 `protobuf:"bytes,8,opt,name=event,proto3" json:"event,omitempty"`                                   // 藏品事件（可选）
+	Info          string                 `protobuf:"bytes,8,opt,name=info,proto3" json:"info,omitempty"`                                   // 藏品信息（必填）
 	unknownFields protoimpl.UnknownFields
 	sizeCache     protoimpl.SizeCache
 }
@@ -638,9 +646,9 @@ func (x *CreateMintOrderRequest) GetMaterialType() string {
 	return ""
 }
 
-func (x *CreateMintOrderRequest) GetEvent() string {
+func (x *CreateMintOrderRequest) GetInfo() string {
 	if x != nil {
-		return x.Event
+		return x.Info
 	}
 	return ""
 }
diff --git a/backend/proto/asset.proto b/backend/proto/asset.proto
index a250285..98aef80 100644
--- a/backend/proto/asset.proto
+++ b/backend/proto/asset.proto
@@ -28,11 +28,12 @@ message Asset {
   int64 created_at = 15;          // 创建时间（毫秒时间戳）
   int64 updated_at = 16;          // 更新时间（毫秒时间戳）
   int64 minted_at = 17;           // 上链成功时间（毫秒时间戳，可选）
-  
+
   // 扩展字段：持有者信息（用于详情展示）
   OwnerInfo owner = 18;           // 持有者信息（保留用于兼容性）
   string owner_nickname = 19;     // 持有者昵称（在该star下的昵称）
   bool is_liked = 20;             // 当前用户是否已点赞
+  string info = 21;               // 藏品信息
 } 
 
 // 持有者信息
@@ -77,13 +78,13 @@ message InitMintOrderResponse {
 // 创建铸造订单请求
 message CreateMintOrderRequest {
   string order_id = 2;            // 阶段一生成的订单ID（必填）
-  string name = 1;                // 藏品名称（必填，可覆盖阶段一保存值）
+  string name = 1;                // 藏品名称（可选）
   string material_url = 3;        // 用户上传的素材URL（必填，前端已上传到OSS）
   string description = 4;         // 藏品描述（可选）
   int32 rarity = 5;              // 稀有度（可选）
   repeated string tags = 6;       // 标签列表（可选）
   string material_type = 7;       // 素材类型（可选）
-  string event = 8;              // 藏品事件（可选）
+  string info = 8;              // 藏品信息（必填）
   // cover_url 不再需要前端传入，由后端 AI 处理完成后自动生成
 }
 
diff --git a/frontend/pages.json b/frontend/pages.json
index 947e14b..70dc7f5 100644
--- a/frontend/pages.json
+++ b/frontend/pages.json
@@ -8,6 +8,33 @@
 				}
 			}
 		},
+		{
+			"path": "pages/starbook/index",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
+		{
+			"path": "pages/starcity/index",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
+		{
+			"path": "pages/friends/index",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
 		{
 			"path": "pages/login/login",
 			"style": {
@@ -56,6 +83,30 @@
 				}
 			}
 		},
+		{
+			"path": "pages/castlove/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/castlove/create",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
+		{
+			"path": "pages/castlove/mall",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
 		{
 			"path": "pages/castlove/success",
 			"style": {
diff --git a/frontend/pages/asset-detail/asset-detail.vue b/frontend/pages/asset-detail/asset-detail.vue
index 01fcbc8..6190061 100644
--- a/frontend/pages/asset-detail/asset-detail.vue
+++ b/frontend/pages/asset-detail/asset-detail.vue
@@ -114,15 +114,15 @@
 
 <script setup>
 import { ref, computed, onUnmounted } from 'vue';
-import { onLoad } from '@dcloudio/uni-app';
+import { onLoad, onShow } from '@dcloudio/uni-app';
 import NftCard from '../components/NftCard.vue';
 import { getAssetDetailApi, getMintOrderDetailApi, likeAssetApi, unlikeAssetApi } from '@/utils/api.js';
 import { getAssetCoverRealUrl } from '@/utils/assetImageHelper.js';
-
 // 页面参数
 const assetIdParam = ref('');
 const orderIdParam = ref('');
 const fromParam = ref('');
+const lastLoadKey = ref(''); // 记录上次加载的key，避免重复加载
 
 // 数据状态
 const loading = ref(true);
@@ -188,16 +188,21 @@ const copyHash = () => {
 
 // 加载数据
 const loadData = async () => {
+	console.log('loadData 开始执行');
 	loading.value = true;
 	loadError.value = '';
 
 	try {
 		let assetId = assetIdParam.value;
+		console.log('assetIdParam:', assetIdParam.value, 'orderIdParam:', orderIdParam.value);
 
 		if (!assetId && orderIdParam.value) {
+			console.log('通过 order_id 获取资产信息');
 			const mintRes = await getMintOrderDetailApi(orderIdParam.value);
+			console.log('getMintOrderDetailApi 响应:', mintRes);
 			if (mintRes.code === 200 && mintRes.data?.asset?.asset_id) {
 				assetId = mintRes.data.asset.asset_id;
+				console.log('获取到 assetId:', assetId);
 			} else {
 				throw new Error('获取铸造订单详情失败');
 			}
@@ -205,7 +210,9 @@ const loadData = async () => {
 
 		if (!assetId) throw new Error('藏品信息不完整');
 
+		console.log('调用 getAssetDetailApi，assetId:', assetId);
 		const res = await getAssetDetailApi(assetId);
+		console.log('getAssetDetailApi 响应:', res);
 		if (res.code === 200 && res.data?.asset) {
 			const asset = res.data.asset;
 			assetData.value = asset;
@@ -216,15 +223,26 @@ const loadData = async () => {
 				remainSeconds.value = asset.remain_time;
 				startCountdown();
 			}
-
-			coverUrl.value = await getAssetCoverRealUrl(asset.cover_url);
+			console.log(res.data)
+			// 异步加载封面图片，不阻塞页面渲染
+			console.log('开始加载封面图片:', asset.cover_url);
+			getAssetCoverRealUrl(asset.cover_url).then(url => {
+				console.log('封面图片加载成功:', url);
+				coverUrl.value = url;
+			}).catch(err => {
+				console.error('加载封面图片失败:', err);
+				coverUrl.value = ''; // 失败时不显示默认图片
+			});
+			console.log('loadData 执行成功');
 		} else {
 			throw new Error(res.message || '获取藏品详情失败');
 		}
 	} catch (err) {
+		console.error('loadData 出错:', err);
 		loadError.value = err.message || '加载失败，请重试';
 	} finally {
 		loading.value = false;
+		console.log('loadData 执行完成，loading:', loading.value);
 	}
 };
 
@@ -277,10 +295,22 @@ const handleBack = () => {
 };
 
 onLoad((options) => {
+	console.log('onLoad 触发，参数:', options);
 	assetIdParam.value = options?.asset_id || '';
 	orderIdParam.value = options?.order_id || '';
 	fromParam.value = options?.from || '';
-	loadData();
+});
+
+onShow(() => {
+	console.log('onShow 触发');
+	const currentKey = `${assetIdParam.value}_${orderIdParam.value}`;
+	console.log('当前key:', currentKey, '上次key:', lastLoadKey.value);
+	
+	// 如果参数变化了，或者是首次加载，则重新加载数据
+	if ((assetIdParam.value || orderIdParam.value) && currentKey !== lastLoadKey.value) {
+		lastLoadKey.value = currentKey;
+		loadData();
+	}
 });
 
 onUnmounted(() => {
diff --git a/frontend/pages/castlove/create.vue b/frontend/pages/castlove/create.vue
new file mode 100644
index 0000000..9dfae4f
--- /dev/null
+++ b/frontend/pages/castlove/create.vue
@@ -0,0 +1,1118 @@
+<template>
+	<view class="page-container">
+		
+		<!-- 背景图片 -->
+		<image class="background-image" src="/static/background/starbook.jpg" mode="aspectFill"></image>
+		<!-- <view class="background-overlay"></view> -->
+
+		<!-- 主内容区域 -->
+		<scroll-view class="content-wrapper" scroll-y="true" :show-scrollbar="false" :enhanced="true">
+			<!-- 页面标题 -->
+			<view v-if="pageName" class="page-title">
+				<text class="title-text">创建{{ pageName }}</text>
+			</view>
+			
+			<!-- 图片上传区域 -->
+			<view class="upload-section">
+				<view class="upload-box" @click="chooseImage">
+					<image v-if="uploadedImage" class="uploaded-image" :src="uploadedImage" mode="aspectFit"></image>
+					<view v-else class="upload-placeholder">
+						<image class="upload-icon" src="/static/icon/add.png" mode="aspectFit"></image>
+						<text class="upload-text">点击上传图片</text>
+					</view>
+				</view>
+				<view class="upload-hint">支持JPG、PNG格式，大小不超过5MB</view>
+			</view>
+
+			<!-- 表单区域 -->
+			<view class="form-section">
+				<!-- 素材类型选择器 -->
+				<view class="form-item form-item-picker">
+					<text class="form-label">素材类型</text>
+					<view class="custom-picker">
+						<view class="picker-display" @click="toggleMaterialTypePicker">
+							<text class="picker-text">{{ materialTypes[materialTypeIndex] }}</text>
+							<text class="picker-arrow" :class="{ 'picker-arrow-up': showMaterialTypePicker }">›</text>
+						</view>
+						<view v-if="showMaterialTypePicker" class="picker-options">
+							<view v-for="(type, index) in materialTypes" :key="index" class="picker-option"
+								:class="{ 'picker-option-active': materialTypeIndex === index }"
+								@click.stop="selectMaterialType(index)">
+								<text class="picker-option-text">{{ type }}</text>
+								<text v-if="materialTypeIndex === index" class="picker-option-check">✓</text>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 藏品信息 -->
+				<view class="form-item">
+					<text class="form-label">藏品信息</text>
+					<textarea class="form-textarea" v-model="nftInfo" placeholder="请输入藏品相关信息"
+						placeholder-class="textarea-placeholder" maxlength="500" auto-height :show-confirm-bar="false" />
+				</view>
+			</view>
+
+			<!-- AI描述区域 -->
+			<view class="ai-section">
+				<text class="section-title">AI 生成描述</text>
+
+				<!-- AI描述输入框 -->
+				<view class="ai-input-wrapper">
+					<textarea 
+						class="ai-input" 
+						v-model="aiDescription" 
+						placeholder="背景有什么想法？边框想要什么样式的？有没有特别想加的装饰元素？整体材质的效果想要什么样的？主色调是应援色吗，还是别的颜色？" 
+						placeholder-class="ai-placeholder"
+						auto-height
+						:show-confirm-bar="false"
+						maxlength="500"
+					/>
+					<view class="input-actions">
+						<!-- 发送按钮 -->
+						<view class="action-icon-btn send-btn" @click="handleGenerate">
+							<image class="action-icon" src="/static/icon/send.png" mode="aspectFit" />
+							<text class="action-text">发送</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 底部按钮 -->
+			<view class="button-section">
+				<button class="btn-secondary" @click="handleBack">返回</button>
+				<button class="btn-skip" @click="handleSkip">跳过</button>
+			</view>
+		</scroll-view>
+
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getOssSignatureApi, createMintOrderApi } from '@/utils/api.js';
+
+// 获取页面参数
+const pageType = ref('');
+const pageName = ref('');
+
+// 表单数据
+const uploadedImage = ref('');
+const uploadedImageBase64 = ref('');
+const originalFileName = ref('');
+const isUploading = ref(false);
+const materialTypes = ['粉丝自制', '热爱痕迹', '其他'];
+const materialTypeIndex = ref(0);
+const showMaterialTypePicker = ref(false);
+const nftInfo = ref(''); // 藏品信息（合并了名称和事件）
+
+// AI描述相关
+const aiDescription = ref('');
+
+// 风格标签数据 - 已移除
+
+// 选择图片
+const chooseImage = () => {
+	if (isUploading.value) {
+		uni.showToast({ title: '图片上传中，请稍候', icon: 'none' });
+		return;
+	}
+
+	uni.chooseImage({
+		count: 1,
+		sourceType: ['album', 'camera'],
+		success: (res) => {
+			const filePath = res.tempFilePaths[0];
+			const tempFile = res.tempFiles && res.tempFiles[0];
+
+			uni.getFileInfo({
+				filePath: filePath,
+				success: (fileInfo) => {
+					const maxSize = 5 * 1024 * 1024;
+					if (fileInfo.size > maxSize) {
+						uni.showToast({ title: '图片大小不能超过5MB', icon: 'none', duration: 2000 });
+						return;
+					}
+
+					const mimeType = (tempFile && tempFile.type) ? tempFile.type.toLowerCase() : '';
+					const pathLower = filePath.toLowerCase();
+					const validByMime = mimeType === 'image/jpeg' || mimeType === 'image/png';
+					const validByExt = pathLower.endsWith('.jpg') || pathLower.endsWith('.jpeg') || pathLower.endsWith('.png');
+					if (!validByMime && !validByExt) {
+						uni.showToast({ title: '只支持JPG和PNG格式', icon: 'none', duration: 2000 });
+						return;
+					}
+
+					const rawName = (tempFile && tempFile.name) ? tempFile.name : filePath.split('/').pop();
+					originalFileName.value = rawName;
+					convertImageToBase64(filePath, originalFileName.value);
+				},
+				fail: (error) => {
+					console.error('获取文件信息失败:', error);
+					uni.showToast({ title: '获取文件信息失败', icon: 'none' });
+				}
+			});
+		},
+		fail: (err) => {
+			console.error('选择图片失败:', err);
+			uni.showToast({ title: '选择图片失败', icon: 'none' });
+		}
+	});
+};
+
+// 将图片转换为 base64
+const convertImageToBase64 = (filePath, fileName) => {
+	isUploading.value = true;
+	uni.showLoading({ title: '处理中...', mask: true });
+
+	// #ifdef H5
+	convertImageToBase64H5(filePath, fileName);
+	// #endif
+	
+	// #ifndef H5
+	convertImageToBase64Native(filePath, fileName);
+	// #endif
+};
+
+const convertImageToBase64H5 = (filePath, fileName) => {
+	fetch(filePath)
+		.then(res => res.blob())
+		.then(blob => {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				// e.target.result 已经是完整的 data:image/xxx;base64,xxx 格式
+				uploadedImageBase64.value = e.target.result;
+				uploadedImage.value = filePath;
+				
+				console.log('[CreatePage] Base64转换成功 (H5)');
+				console.log('[CreatePage] Base64长度:', uploadedImageBase64.value.length);
+				
+				uni.hideLoading();
+				uni.showToast({ title: '图片加载成功', icon: 'success', duration: 1500 });
+				isUploading.value = false;
+			};
+			reader.onerror = (error) => {
+				console.error('[CreatePage] Base64转换失败 (H5):', error);
+				uni.hideLoading();
+				uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
+				isUploading.value = false;
+			};
+			reader.readAsDataURL(blob);
+		})
+		.catch(error => {
+			console.error('[CreatePage] 获取图片失败 (H5):', error);
+			uni.hideLoading();
+			uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
+			isUploading.value = false;
+		});
+};
+
+const convertImageToBase64Native = (filePath, fileName) => {
+	// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
+	const fs = uni.getFileSystemManager();
+	fs.readFile({
+		filePath: filePath,
+		encoding: 'base64',
+		success: (res) => {
+			const ext = fileName.toLowerCase().split('.').pop();
+			let mimeType = 'image/jpeg';
+			if (ext === 'png') mimeType = 'image/png';
+			
+			uploadedImageBase64.value = `data:${mimeType};base64,${res.data}`;
+			uploadedImage.value = filePath;
+			
+			console.log('[CreatePage] Base64转换成功 (小程序)');
+			console.log('[CreatePage] Base64长度:', uploadedImageBase64.value.length);
+			
+			uni.hideLoading();
+			uni.showToast({ title: '图片加载成功', icon: 'success', duration: 1500 });
+			isUploading.value = false;
+		},
+		fail: (error) => {
+			console.error('[CreatePage] Base64转换失败 (小程序):', error);
+			uni.hideLoading();
+			uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
+			isUploading.value = false;
+		}
+	});
+	// #endif
+	
+	// #ifdef APP-PLUS
+	plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
+		entry.file((file) => {
+			const reader = new plus.io.FileReader();
+			reader.onloadend = (e) => {
+				uploadedImageBase64.value = e.target.result;
+				uploadedImage.value = filePath;
+				
+				console.log('[CreatePage] Base64转换成功 (App)');
+				console.log('[CreatePage] Base64长度:', uploadedImageBase64.value.length);
+				
+				uni.hideLoading();
+				uni.showToast({ title: '图片加载成功', icon: 'success', duration: 1500 });
+				isUploading.value = false;
+			};
+			reader.onerror = (error) => {
+				console.error('[CreatePage] Base64转换失败 (App):', error);
+				uni.hideLoading();
+				uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
+				isUploading.value = false;
+			};
+			reader.readAsDataURL(file);
+		});
+	}, (error) => {
+		console.error('[CreatePage] 读取文件失败 (App):', error);
+		uni.hideLoading();
+		uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
+		isUploading.value = false;
+	});
+	// #endif
+};
+
+// 切换素材类型选择器
+const toggleMaterialTypePicker = () => {
+	showMaterialTypePicker.value = !showMaterialTypePicker.value;
+};
+
+const selectMaterialType = (index) => {
+	materialTypeIndex.value = index;
+	showMaterialTypePicker.value = false;
+};
+
+// 上传图片到OSS的辅助函数
+const uploadImageToOss = async (base64Data, ossData) => {
+	return new Promise((resolve, reject) => {
+		const fileName = `${Date.now()}.jpg`;
+		
+		// #ifdef H5
+		// H5环境直接使用base64
+		fetch(base64Data)
+			.then(res => res.blob())
+			.then(blob => {
+				const formData = new FormData();
+				formData.append('key', ossData.dir + fileName);
+				formData.append('policy', ossData.policy);
+				formData.append('success_action_status', '200');
+				formData.append('x-oss-credential', ossData.x_oss_credential);
+				formData.append('x-oss-date', ossData.x_oss_date);
+				formData.append('x-oss-security-token', ossData.security_token);
+				formData.append('x-oss-signature', ossData.signature);
+				formData.append('x-oss-signature-version', ossData.x_oss_signature_version);
+				formData.append('file', blob, fileName);
+				
+				return fetch(ossData.host, {
+					method: 'POST',
+					body: formData
+				});
+			})
+			.then(response => {
+				if (response.ok) {
+					const imageUrl = `${ossData.host}/${ossData.dir}${fileName}`;
+					resolve(imageUrl);
+				} else {
+					reject(new Error('上传失败'));
+				}
+			})
+			.catch(error => {
+				reject(error);
+			});
+		// #endif
+		
+		// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
+		// 小程序环境 - 使用文件系统管理器
+		const base64Content = base64Data.split(',')[1];
+		const filePath = `${wx.env.USER_DATA_PATH}/${fileName}`;
+		
+		const fs = uni.getFileSystemManager();
+		fs.writeFile({
+			filePath: filePath,
+			data: base64Content,
+			encoding: 'base64',
+			success: () => {
+				uni.uploadFile({
+					url: ossData.host,
+					filePath: filePath,
+					name: 'file',
+					formData: {
+						key: ossData.dir + fileName,
+						policy: ossData.policy,
+						success_action_status: '200',
+						'x-oss-credential': ossData.x_oss_credential,
+						'x-oss-date': ossData.x_oss_date,
+						'x-oss-security-token': ossData.security_token,
+						'x-oss-signature': ossData.signature,
+						'x-oss-signature-version': ossData.x_oss_signature_version
+					},
+					success: (uploadRes) => {
+						if (uploadRes.statusCode === 200 || uploadRes.statusCode === 204) {
+							const imageUrl = `${ossData.host}/${ossData.dir}${fileName}`;
+							resolve(imageUrl);
+						} else {
+							reject(new Error(`上传失败，状态码: ${uploadRes.statusCode}`));
+						}
+					},
+					fail: (error) => {
+						reject(error);
+					}
+				});
+			},
+			fail: (error) => {
+				reject(error);
+			}
+		});
+		// #endif
+		
+		// #ifdef APP-PLUS
+		// App环境 - 将base64转为临时文件后上传
+		console.log('[CreatePage] App环境上传');
+		const base64Content = base64Data.split(',')[1];
+		const bitmap = new plus.nativeObj.Bitmap('temp');
+		
+		bitmap.loadBase64Data(base64Data, () => {
+			const tempFilePath = `_doc/${fileName}`;
+			bitmap.save(tempFilePath, {}, () => {
+				console.log('[CreatePage] App临时文件保存成功:', tempFilePath);
+				bitmap.clear();
+				
+				uni.uploadFile({
+					url: ossData.host,
+					filePath: tempFilePath,
+					name: 'file',
+					formData: {
+						key: ossData.dir + fileName,
+						policy: ossData.policy,
+						success_action_status: '200',
+						'x-oss-credential': ossData.x_oss_credential,
+						'x-oss-date': ossData.x_oss_date,
+						'x-oss-security-token': ossData.security_token,
+						'x-oss-signature': ossData.signature,
+						'x-oss-signature-version': ossData.x_oss_signature_version
+					},
+					success: (uploadRes) => {
+						console.log('[CreatePage] App上传响应:', uploadRes);
+						if (uploadRes.statusCode === 200 || uploadRes.statusCode === 204) {
+							const imageUrl = `${ossData.host}/${ossData.dir}${fileName}`;
+							resolve(imageUrl);
+						} else {
+							reject(new Error(`上传失败，状态码: ${uploadRes.statusCode}`));
+						}
+					},
+					fail: (error) => {
+						console.error('[CreatePage] App上传失败:', error);
+						reject(error);
+					}
+				});
+			}, (error) => {
+				console.error('[CreatePage] App保存临时文件失败:', error);
+				bitmap.clear();
+				reject(new Error('保存临时文件失败'));
+			});
+		}, (error) => {
+			console.error('[CreatePage] App加载base64失败:', error);
+			bitmap.clear();
+			reject(new Error('加载图片数据失败'));
+		});
+		// #endif
+	});
+};
+
+// 返回按钮
+const handleBack = async () => {
+	if (uploadedImage.value || nftInfo.value || aiDescription.value) {
+		uni.showModal({
+			title: '提示',
+			content: '确定要返回吗？未保存的数据将会丢失',
+			success: async (res) => {
+				if (res.confirm) {
+					resetForm();
+					uni.navigateBack();
+				}
+			}
+		});
+	} else {
+		uni.navigateBack();
+	}
+};
+
+// 跳过按钮 - 直接创建订单，跳过AI生成
+const handleSkip = async () => {
+	// 表单验证
+	if (!uploadedImage.value) {
+		uni.showToast({ title: '请上传藏品图片', icon: 'none' });
+		return;
+	}
+
+	if (!uploadedImageBase64.value) {
+		uni.showToast({ title: '图片尚未处理完成', icon: 'none' });
+		return;
+	}
+
+	if (!nftInfo.value.trim()) {
+		uni.showToast({ title: '请输入藏品信息', icon: 'none' });
+		return;
+	}
+
+	try {
+		// 显示加载提示
+		uni.showLoading({ title: '上传图片中...', mask: true });
+		
+		// 获取OSS签名
+		const signRes = await getOssSignatureApi('asset');
+		if (signRes.code !== 200) {
+			throw new Error(signRes.message || '获取签名失败');
+		}
+		
+		const orderId = signRes.data.order_id || '';
+		
+		// 上传原图到OSS
+		const imageUrl = await uploadImageToOss(uploadedImageBase64.value, signRes.data);
+		
+		// 更新加载提示
+		uni.showLoading({ title: '创建订单中...', mask: true });
+		
+		// 构建订单数据
+		const orderData = {
+			name: pageName.value || '藏品',
+			event: nftInfo.value.trim(),
+			info: nftInfo.value.trim(), // 添加必填的 info 字段
+			description: '',
+			material_type: materialTypes[materialTypeIndex.value],
+			material_url: imageUrl,
+			rarity: 0,
+			tags: [],
+			order_id: orderId
+		};
+		
+		// 调用创建铸造订单API
+		const response = await createMintOrderApi(orderData);
+		uni.hideLoading();
+		
+		if (response.code !== 200) {
+			throw new Error(response.message || '创建订单失败');
+		}
+		
+		// 构建藏品数据，存储到temp_nft_data
+		const nftData = {
+			image: imageUrl,
+			name: pageName.value || '藏品',
+			event: nftInfo.value.trim(),
+			info: nftInfo.value.trim(), // 添加 info 字段
+			description: '',
+			material_type: materialTypes[materialTypeIndex.value],
+			order_id: orderId
+		};
+		
+		// 存储到storage
+		uni.setStorageSync('temp_nft_data', JSON.stringify(nftData));
+		
+		// 清空表单
+		// resetForm();
+		
+		// 跳转到成功页面
+		uni.redirectTo({
+			url: '/pages/castlove/success'
+		});
+		
+	} catch (error) {
+		console.error('[CreatePage] 跳过失败:', error);
+		uni.hideLoading();
+		uni.showToast({
+			title: error.message || '操作失败，请重试',
+			icon: 'none'
+		});
+	}
+};
+
+// 底部导航切换
+const handleTabChange = (newTab) => {
+	const routes = [
+		'/pages/square/square',
+		'/pages/starbook/index',
+		'/pages/castlove/mall',
+		'/pages/starcity/index',
+		'/pages/friends/index'
+	];
+	
+	if (newTab >= 0 && newTab < routes.length) {
+		uni.redirectTo({ url: routes[newTab] });
+	}
+};
+
+// 开始生成
+const handleGenerate = async () => {
+	// 表单验证
+	if (!uploadedImage.value) {
+		uni.showToast({ title: '请上传藏品图片', icon: 'none' });
+		return;
+	}
+
+	if (!uploadedImageBase64.value) {
+		uni.showToast({ title: '图片尚未处理完成', icon: 'none' });
+		return;
+	}
+
+	if (!nftInfo.value.trim()) {
+		uni.showToast({ title: '请输入藏品信息', icon: 'none' });
+		return;
+	}
+
+	// 组合输入文字（如果有页面名称，作为隐藏前缀）
+	let fullText = aiDescription.value.trim();
+	if (pageName.value) {
+		fullText = `${pageName.value}，${fullText}`;
+	}
+	
+	if (!fullText || fullText === `${pageName.value}，`) {
+		uni.showToast({ title: '请输入AI描述', icon: 'none' });
+		return;
+	}
+
+	// 保存表单数据
+	const formData = {
+		image: uploadedImage.value,
+		imageBase64: uploadedImageBase64.value,
+		info: nftInfo.value.trim(), // 藏品信息
+		materialType: materialTypes[materialTypeIndex.value],
+		type: pageType.value, // 添加类型信息
+		typeName: pageName.value // 添加类型名称
+	};
+
+	try {
+		uni.setStorageSync('castlove_form_data', JSON.stringify(formData));
+		
+	} catch (e) {
+		console.error('保存表单数据失败:', e);
+		return;
+	}
+
+	// 发送到后端生成
+	sendToBackend(fullText);
+};
+
+// 发送数据到后端
+const sendToBackend = (aiDescription) => {
+	// 构建后端需要的数据格式（不包含base64图片）
+	const requestData = {
+		prompt: aiDescription, // AI描述文本
+		model: "image-01",
+		aspect_ratio: "16:9",
+		subject_reference: [
+			{
+				type: "character",
+				image_file: "" // 占位符，实际使用时从castlove_form_data读取
+			}
+		],
+		"n": 4
+	};
+	
+	// 将轻量数据存储到本地
+	uni.setStorageSync('generation_request_data', JSON.stringify(requestData));
+	console.log('[CreatePage] 生成请求数据已保存');
+	
+	// base64图片已经在castlove_form_data中，不需要重复存储
+
+	// 清空表单
+	// resetForm();
+
+	// 跳转到加载页面
+	uni.navigateTo({
+		url: '/pages/discover/generation-loading'
+	});
+};
+
+// 重置表单
+const resetForm = () => {
+	uploadedImage.value = '';
+	uploadedImageBase64.value = '';
+	originalFileName.value = '';
+	isUploading.value = false;
+	materialTypeIndex.value = 0;
+	nftInfo.value = '';
+	aiDescription.value = '';
+};
+
+onMounted(() => {
+	// 获取页面参数
+	const pages = getCurrentPages();
+	const currentPage = pages[pages.length - 1];
+	const options = currentPage.options || {};
+	
+	if (options.type) {
+		pageType.value = options.type;
+		console.log('[CreatePage] 页面类型:', pageType.value);
+	}
+	
+	if (options.name) {
+		pageName.value = decodeURIComponent(options.name);
+		console.log('[CreatePage] 页面名称:', pageName.value);
+		// 页面名称将作为隐藏前缀，不显示在输入框中
+	}
+});
+</script>
+
+<style scoped>
+.page-container {
+	position: relative;
+	width: 100vw;
+	height: 100vh;
+	min-height: 100vh;
+	overflow: hidden;
+}
+
+.background-image {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	object-fit: cover;
+}
+
+.background-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	background: rgba(0, 0, 0, 0.3);
+}
+
+.content-wrapper {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	min-height: 100%;
+	padding: 100rpx 32rpx 40rpx 32rpx;
+	box-sizing: border-box;
+}
+
+/* 页面标题 */
+.page-title {
+	width: 100%;
+	text-align: center;
+	margin-bottom: 40rpx;
+}
+
+.title-text {
+	font-size: 48rpx;
+	color: #ffffff;
+	font-weight: 700;
+	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
+	text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);
+	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+}
+
+/* 图片上传区域 */
+.upload-section {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 40rpx;
+}
+
+.upload-box {
+	width: 300rpx;
+	height: 300rpx;
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10rpx);
+	border-radius: 30rpx;
+	border: 4rpx dashed rgba(255, 255, 255, 0.5);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
+}
+
+.upload-hint {
+	margin-top: 20rpx;
+	font-size: 24rpx;
+	color: rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+.uploaded-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.upload-placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 20rpx;
+}
+
+.upload-icon {
+	width: 80rpx;
+	height: 80rpx;
+	opacity: 0.8;
+}
+
+.upload-text {
+	font-size: 24rpx;
+	color: rgba(255, 255, 255, 0.9);
+	font-weight: 500;
+}
+
+/* 表单区域 */
+.form-section {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 30rpx;
+	margin-bottom: 40rpx;
+}
+
+.form-item {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.form-item-picker {
+	position: relative;
+	z-index: 10;
+}
+
+.form-label {
+	font-size: 36rpx;
+	color: #e6e6e6;
+	font-weight: 500;
+	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
+	padding: 18rpx 18rpx;
+	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
+	border-radius: 44rpx;
+	display: inline-block;
+	align-self: flex-start;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
+}
+
+/* 自定义选择器 */
+.custom-picker {
+	position: relative;
+	width: 100%;
+	z-index: 10;
+}
+
+.picker-display {
+	width: 100%;
+	height: 88rpx;
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10rpx);
+	border-radius: 20rpx;
+	padding: 0 30rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+	transition: all 0.3s ease;
+}
+
+.picker-display:active {
+	background: rgba(255, 255, 255, 0.2);
+}
+
+.picker-text {
+	font-size: 32rpx;
+	color: rgba(255, 255, 255, 0.85);
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.picker-arrow {
+	font-size: 48rpx;
+	color: rgba(255, 255, 255, 0.7);
+	font-weight: bold;
+	transform: rotate(90deg);
+	transition: transform 0.3s ease;
+}
+
+.picker-arrow-up {
+	transform: rotate(-90deg);
+}
+
+.picker-options {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+	width: 100%;
+	margin-top: 10rpx;
+	background: rgba(255, 255, 255, 0.2);
+	backdrop-filter: blur(15rpx);
+	border-radius: 20rpx;
+	overflow: hidden;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
+	z-index: 10;
+	animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+	from {
+		opacity: 0;
+		transform: translateY(-10rpx);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.picker-option {
+	width: 100%;
+	height: 88rpx;
+	padding: 0 30rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	transition: background 0.2s ease;
+	border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
+}
+
+.picker-option:last-child {
+	border-bottom: none;
+}
+
+.picker-option:active {
+	background: rgba(255, 255, 255, 0.15);
+}
+
+.picker-option-active {
+	background: rgba(255, 255, 255, 0.1);
+}
+
+.picker-option-text {
+	font-size: 32rpx;
+	color: #e6e6e6;
+}
+
+.picker-option-check {
+	font-size: 36rpx;
+	color: #e6e6e6;
+	font-weight: bold;
+}
+
+.form-input {
+	width: 100%;
+	height: 88rpx;
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10rpx);
+	border-radius: 20rpx;
+	padding: 0 30rpx;
+	font-size: 32rpx;
+	color: #e6e6e6;
+	box-sizing: border-box;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.input-placeholder {
+	color: rgba(255, 255, 255, 0.85);
+	font-size: 32rpx;
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.form-textarea {
+	width: 100%;
+	min-height: 200rpx;
+	max-height: 400rpx;
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10rpx);
+	border-radius: 20rpx;
+	padding: 20rpx 30rpx;
+	font-size: 32rpx;
+	color: #e6e6e6;
+	box-sizing: border-box;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+	line-height: 1.5;
+}
+
+.textarea-placeholder {
+	color: rgba(255, 255, 255, 0.85);
+	font-size: 32rpx;
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+/* AI描述区域 */
+.ai-section {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+	margin-bottom: 40rpx;
+}
+
+.section-title {
+	font-size: 36rpx;
+	color: #e6e6e6;
+	font-weight: 500;
+	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
+	padding: 18rpx 18rpx;
+	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
+	border-radius: 44rpx;
+	display: inline-block;
+	align-self: flex-start;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
+}
+
+/* AI输入框 */
+.ai-input-wrapper {
+	width: 100%;
+	min-height: 200rpx;
+	background: rgba(255, 255, 255, 0.15);
+	border-radius: 24rpx;
+	backdrop-filter: blur(10rpx);
+	border: 2rpx solid rgba(255, 255, 255, 0.3);
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
+	display: flex;
+	align-items: flex-start;
+	padding: 20rpx 24rpx;
+	gap: 16rpx;
+	box-sizing: border-box;
+}
+
+.ai-input {
+	flex: 1;
+	min-height: 192rpx;
+	max-height: 400rpx;
+	font-size: 32rpx;
+	color: rgba(255, 255, 255, 0.95);
+	padding: 0;
+	background: transparent;
+	border: none;
+	line-height: 1.5;
+	box-sizing: border-box;
+}
+
+.ai-placeholder {
+	color: rgba(255, 255, 255, 0.6);
+	font-size: 32rpx;
+}
+
+.input-actions {
+	display: flex;
+	align-items: flex-end;
+	padding-top: 120rpx;
+}
+
+.action-icon-btn {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4rpx;
+	padding: 8rpx 12rpx;
+	transition: all 0.3s ease;
+}
+
+.action-icon {
+	width: 40rpx;
+	height: 40rpx;
+}
+
+.action-text {
+	font-size: 20rpx;
+	color: rgba(255, 255, 255, 0.8);
+	white-space: nowrap;
+}
+
+.send-btn .action-text {
+	color: rgba(255, 255, 255, 0.95);
+	font-weight: 600;
+}
+
+.send-btn:active {
+	opacity: 0.8;
+}
+
+/* 底部按钮 */
+.button-section {
+	width: 100%;
+	display: flex;
+	gap: 20rpx;
+	margin-top: 40rpx;
+	padding-bottom: 40rpx;
+}
+
+.btn-secondary,
+.btn-skip {
+	flex: 1;
+	height: 88rpx;
+	line-height: 88rpx;
+	border-radius: 44rpx;
+	font-size: 36rpx;
+	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
+	font-weight: 600;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.btn-secondary {
+	background: rgba(255, 255, 255, 0.2);
+	backdrop-filter: blur(10rpx);
+	color: #e6e6e6;
+	border: 2rpx solid rgba(255, 255, 255, 0.4);
+}
+
+.btn-secondary::after {
+	border: none;
+}
+
+.btn-skip {
+	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
+	color: #e6e6e6;
+}
+
+.btn-skip::after {
+	border: none;
+}
+
+.btn-secondary:active {
+	background: rgba(255, 255, 255, 0.3);
+}
+
+.btn-skip:active {
+	opacity: 0.9;
+}
+
+.nav-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 999;
+	animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/frontend/pages/castlove/index.vue b/frontend/pages/castlove/index.vue
new file mode 100644
index 0000000..f4f1971
--- /dev/null
+++ b/frontend/pages/castlove/index.vue
@@ -0,0 +1,946 @@
+<template>
+	<view class="page-container">
+		<Header :showBack="true" backIconColor="#e6e6e6" />
+		
+		<view class="castlove-content">
+			<!-- 背景图片 -->
+			<image class="background-image" src="/static/background/profile-bg.png" mode="aspectFill"></image>
+
+			<!-- 蒙层 -->
+			<view class="background-overlay"></view>
+
+			<!-- 内容区域 -->
+			<view class="content-wrapper">
+				<scroll-view class="content-wrapper" scroll-y="true" :show-scrollbar="false" :enhanced="true">
+				<!-- 图片上传区域 -->
+				<view class="upload-section">
+					<view class="upload-box" @click="chooseImage">
+						<image v-if="uploadedImage" class="uploaded-image" :src="uploadedImage" mode="aspectFit">
+						</image>
+						<view v-else class="upload-placeholder">
+							<image class="upload-icon" src="/static/icon/add.png" mode="aspectFit"></image>
+							<text class="upload-text">点击上传藏品图片</text>
+						</view>
+					</view>
+					<view class="upload-hint">支持JPG、PNG格式，大小不超过5MB</view>
+				</view>
+
+				<!-- 表单区域 -->
+				<view class="form-section">
+					<!-- 素材类型选择器 -->
+					<view class="form-item form-item-picker">
+						<text class="form-label">素材类型</text>
+						<view class="custom-picker">
+							<view class="picker-display" @click="toggleMaterialTypePicker">
+								<text class="picker-text">{{ materialTypes[materialTypeIndex] }}</text>
+								<text class="picker-arrow"
+									:class="{ 'picker-arrow-up': showMaterialTypePicker }">›</text>
+							</view>
+							<!-- 自定义下拉选项列表 -->
+							<view v-if="showMaterialTypePicker" class="picker-options">
+								<view v-for="(type, index) in materialTypes" :key="index" class="picker-option"
+									:class="{ 'picker-option-active': materialTypeIndex === index }"
+									@click.stop="selectMaterialType(index)">
+									<text class="picker-option-text">{{ type }}</text>
+									<text v-if="materialTypeIndex === index" class="picker-option-check">✓</text>
+								</view>
+							</view>
+						</view>
+					</view>
+
+					<!-- 藏品名称输入框 -->
+					<view class="form-item">
+						<text class="form-label">藏品名称</text>
+						<input class="form-input" v-model="nftName" placeholder="请输入藏品名称"
+							placeholder-class="input-placeholder" />
+					</view>
+
+					<!-- 藏品事件输入框 -->
+					<view class="form-item">
+						<text class="form-label">藏品事件</text>
+						<input class="form-input" v-model="nftEvent" placeholder="请输入藏品事件"
+							placeholder-class="input-placeholder" />
+					</view>
+
+					<!-- 备注输入框 -->
+					<view class="form-item">
+						<text class="form-label">备注</text>
+						<textarea class="form-textarea" v-model="nftRemark" placeholder="请输入备注信息"
+							placeholder-class="textarea-placeholder" maxlength="200" auto-height
+							:show-confirm-bar="false" />
+					</view>
+				</view>
+
+				<!-- 底部按钮区域 -->
+				<view class="button-section">
+					<button class="btn-secondary" @click="handleBack">返回</button>
+					<button class="btn-primary" @click="handleConfirm">开始铸造</button>
+				</view>
+				</scroll-view>
+			</view>
+		</view>
+		
+		<!-- 蒙层 - 导航栏展开时显示 -->
+		<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
+		
+		<BottomNav :activeTab="2" @update:activeTab="handleTabChange" :isExpanded="navExpanded" @update:isExpanded="navExpanded = $event" />
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Header from "../components/Header.vue";
+import BottomNav from "../components/BottomNav.vue";
+import { getOssSignatureApi, deleteMintOrderApi } from '@/utils/api.js';
+
+const navExpanded = ref(false);
+
+// 表单数据
+const uploadedImage = ref(''); // 本地预览路径
+const uploadedImageUrl = ref(''); // OSS完整URL
+const uploadedImageBase64 = ref(''); // Base64格式
+const originalFileName = ref(''); // 原始文件名
+const currentOrderId = ref(''); // 当前订单ID
+const isUploading = ref(false); // 上传中状态
+const materialTypes = ['粉丝自制', '热爱痕迹', '其他'];
+const materialTypeIndex = ref(0);
+const showMaterialTypePicker = ref(false);
+const nftName = ref('');
+const nftEvent = ref('');
+const nftRemark = ref('');
+
+// 选择图片
+const chooseImage = () => {
+	// 如果正在上传，禁止选择新图片
+	if (isUploading.value) {
+		uni.showToast({
+			title: '图片上传中，请稍候',
+			icon: 'none'
+		});
+		return;
+	}
+
+	uni.chooseImage({
+		count: 1,
+		sourceType: ['album', 'camera'],
+		success: (res) => {
+			const filePath = res.tempFilePaths[0];
+			const tempFile = res.tempFiles && res.tempFiles[0];
+
+			// 获取文件信息进行验证
+			uni.getFileInfo({
+				filePath: filePath,
+				success: (fileInfo) => {
+					// 验证文件大小（5MB = 5 * 1024 * 1024 bytes）
+					const maxSize = 5 * 1024 * 1024;
+					if (fileInfo.size > maxSize) {
+						uni.showToast({
+							title: '图片大小不能超过5MB',
+							icon: 'none',
+							duration: 2000
+						});
+						return;
+					}
+
+					// 验证文件格式
+					const mimeType = (tempFile && tempFile.type) ? tempFile.type.toLowerCase() : '';
+					const pathLower = filePath.toLowerCase();
+					const validByMime = mimeType === 'image/jpeg' || mimeType === 'image/png';
+					const validByExt = pathLower.endsWith('.jpg') || pathLower.endsWith('.jpeg') || pathLower.endsWith('.png');
+					if (!validByMime && !validByExt) {
+						uni.showToast({
+							title: '只支持JPG和PNG格式',
+							icon: 'none',
+							duration: 2000
+						});
+						return;
+					}
+
+					// 提取原始文件名
+					const rawName = (tempFile && tempFile.name)
+						? tempFile.name
+						: filePath.split('/').pop();
+					originalFileName.value = rawName;
+
+					// 验证通过，转换为 base64
+					convertImageToBase64(filePath, originalFileName.value);
+				},
+				fail: (error) => {
+					console.error('获取文件信息失败:', error);
+					uni.showToast({
+						title: '获取文件信息失败',
+						icon: 'none'
+					});
+				}
+			});
+		},
+		fail: (err) => {
+			console.error('选择图片失败:', err);
+			uni.showToast({
+				title: '选择图片失败',
+				icon: 'none'
+			});
+		}
+	});
+};
+
+// 将图片转换为 base64（兼容 H5、App、小程序）
+const convertImageToBase64 = (filePath, fileName) => {
+	isUploading.value = true;
+	uni.showLoading({ title: '处理中...', mask: true });
+
+	// 判断运行环境
+	// #ifdef H5
+	// H5 环境：使用 FileReader
+	convertImageToBase64H5(filePath, fileName);
+	// #endif
+	
+	// #ifndef H5
+	// App/小程序环境：使用 FileSystemManager
+	convertImageToBase64Native(filePath, fileName);
+	// #endif
+};
+
+// H5 环境的 base64 转换
+const convertImageToBase64H5 = (filePath, fileName) => {
+	// H5 环境下，filePath 是 blob URL
+	// 需要通过 fetch 获取 blob，然后用 FileReader 转换
+	fetch(filePath)
+		.then(res => res.blob())
+		.then(blob => {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				// e.target.result 已经是完整的 data:image/xxx;base64,xxx 格式
+				uploadedImageBase64.value = e.target.result;
+				uploadedImage.value = filePath;
+				
+				console.log('[CastloveContent] Base64转换成功 (H5)');
+				console.log('[CastloveContent] Base64长度:', uploadedImageBase64.value.length);
+				
+				uni.hideLoading();
+				uni.showToast({
+					title: '图片加载成功',
+					icon: 'success',
+					duration: 1500
+				});
+				
+				isUploading.value = false;
+			};
+			reader.onerror = (error) => {
+				console.error('Base64转换失败 (H5):', error);
+				uni.hideLoading();
+				uni.showToast({
+					title: '图片处理失败',
+					icon: 'none',
+					duration: 2000
+				});
+				isUploading.value = false;
+			};
+			reader.readAsDataURL(blob);
+		})
+		.catch(error => {
+			console.error('获取图片失败 (H5):', error);
+			uni.hideLoading();
+			uni.showToast({
+				title: '图片处理失败',
+				icon: 'none',
+				duration: 2000
+			});
+			isUploading.value = false;
+		});
+};
+
+// App/小程序环境的 base64 转换
+const convertImageToBase64Native = (filePath, fileName) => {
+	// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
+	// 小程序环境
+	const fs = uni.getFileSystemManager();
+	fs.readFile({
+		filePath: filePath,
+		encoding: 'base64',
+		success: (res) => {
+			const ext = fileName.toLowerCase().split('.').pop();
+			let mimeType = 'image/jpeg';
+			if (ext === 'png') {
+				mimeType = 'image/png';
+			}
+			
+			uploadedImageBase64.value = `data:${mimeType};base64,${res.data}`;
+			uploadedImage.value = filePath;
+			
+			console.log('[CastloveContent] Base64转换成功 (小程序)');
+			
+			uni.hideLoading();
+			uni.showToast({
+				title: '图片加载成功',
+				icon: 'success',
+				duration: 1500
+			});
+			
+			isUploading.value = false;
+		},
+		fail: (error) => {
+			console.error('[CastloveContent] Base64转换失败:', error);
+			uni.hideLoading();
+			uni.showToast({
+				title: '图片处理失败',
+				icon: 'none',
+				duration: 2000
+			});
+			isUploading.value = false;
+		}
+	});
+	// #endif
+	
+	// #ifdef APP-PLUS
+	// App环境：使用plus.io API
+	plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
+		entry.file((file) => {
+			const reader = new plus.io.FileReader();
+			reader.onloadend = (e) => {
+				uploadedImageBase64.value = e.target.result;
+				uploadedImage.value = filePath;
+				
+				console.log('[CastloveContent] Base64转换成功 (App)');
+				
+				uni.hideLoading();
+				uni.showToast({
+					title: '图片加载成功',
+					icon: 'success',
+					duration: 1500
+				});
+				
+				isUploading.value = false;
+			};
+			reader.onerror = (error) => {
+				console.error('[CastloveContent] Base64转换失败:', error);
+				uni.hideLoading();
+				uni.showToast({
+					title: '图片处理失败',
+					icon: 'none',
+					duration: 2000
+				});
+				isUploading.value = false;
+			};
+			reader.readAsDataURL(file);
+		});
+	}, (error) => {
+		console.error('[CastloveContent] 读取文件失败:', error);
+		uni.hideLoading();
+		uni.showToast({
+			title: '图片处理失败',
+			icon: 'none',
+			duration: 2000
+		});
+		isUploading.value = false;
+	});
+	// #endif
+};
+
+// 上传图片到OSS
+const uploadImageToOss = async (filePath, fileName) => {
+	try {
+		isUploading.value = true;
+		uni.showLoading({ title: '上传中...', mask: true });
+
+		// 1. 获取OSS签名（type='asset'），后端返回order_id
+		const signRes = await getOssSignatureApi('asset');
+		if (signRes.code !== 200) {
+			throw new Error(signRes.message || '获取签名失败');
+		}
+
+		// 保存order_id
+		currentOrderId.value = signRes.data.order_id;
+
+		// 2. 构建FormData并上传到OSS
+		uni.uploadFile({
+			url: signRes.data.host,
+			filePath: filePath,
+			name: 'file',
+			formData: {
+				key: signRes.data.dir + fileName,
+				policy: signRes.data.policy,
+				success_action_status: '200',
+				'x-oss-credential': signRes.data.x_oss_credential,
+				'x-oss-date': signRes.data.x_oss_date,
+				'x-oss-security-token': signRes.data.security_token,
+				'x-oss-signature': signRes.data.signature,
+				'x-oss-signature-version': signRes.data.x_oss_signature_version
+			},
+			success: (uploadRes) => {
+				try {
+					if (uploadRes.statusCode === 200 || uploadRes.statusCode === 204) {
+						// 3. 拼接完整URL
+						uploadedImageUrl.value = `${signRes.data.host}/${signRes.data.dir}${fileName}`;
+
+						// 4. 显示预览图（使用本地路径）
+						uploadedImage.value = filePath;
+
+						uni.hideLoading();
+						uni.showToast({
+							title: '上传成功',
+							icon: 'success',
+							duration: 1500
+						});
+					} else {
+						throw new Error(`上传失败，状态码: ${uploadRes.statusCode}`);
+					}
+				} catch (error) {
+					console.error('处理上传结果失败:', error);
+					uni.hideLoading();
+					uni.showToast({
+						title: error.message || '上传失败',
+						icon: 'none',
+						duration: 2000
+					});
+				} finally {
+					isUploading.value = false;
+				}
+			},
+			fail: (error) => {
+				console.error('OSS上传失败:', error);
+				uni.hideLoading();
+				uni.showToast({
+					title: '上传失败',
+					icon: 'none',
+					duration: 2000
+				});
+				isUploading.value = false;
+			}
+		});
+
+	} catch (error) {
+		console.error('上传图片失败:', error);
+		uni.hideLoading();
+		uni.showToast({
+			title: error.message || '上传失败',
+			icon: 'none',
+			duration: 2000
+		});
+		isUploading.value = false;
+	}
+};
+
+// 切换素材类型选择器显示
+const toggleMaterialTypePicker = () => {
+	showMaterialTypePicker.value = !showMaterialTypePicker.value;
+};
+
+// 选择素材类型
+const selectMaterialType = (index) => {
+	materialTypeIndex.value = index;
+	showMaterialTypePicker.value = false;
+};
+
+// 返回按钮
+const handleBack = async () => {
+	// 如果有未保存的数据，提示用户
+	if (uploadedImage.value || nftName.value || nftEvent.value || nftRemark.value) {
+		uni.showModal({
+			title: '提示',
+			content: '确定要返回吗？未保存的数据将会丢失',
+			success: async (res) => {
+				if (res.confirm) {
+					// 如果有订单ID，需要删除订单
+					if (currentOrderId.value) {
+						try {
+							await deleteMintOrderApi(currentOrderId.value);
+						} catch (error) {
+							console.error('删除订单失败:', error);
+						}
+					}
+
+					// 清空表单数据
+					resetForm();
+					// 返回广场页面
+					uni.redirectTo({
+						url: '/pages/square/square'
+					});
+				}
+			}
+		});
+	} else {
+		// 没有未保存数据，直接返回
+		uni.redirectTo({
+			url: '/pages/square/square'
+		});
+	}
+};
+
+// 底部导航切换
+const handleTabChange = (newTab) => {
+	const routes = [
+		'/pages/square/square',
+		'/pages/starbook/index',
+		'/pages/castlove/mall',
+		'/pages/starcity/index',
+		'/pages/friends/index'
+	];
+	
+	if (newTab >= 0 && newTab < routes.length) {
+		uni.redirectTo({
+			url: routes[newTab]
+		});
+	}
+};
+
+// 确认铸造按钮
+const handleConfirm = async () => {
+	// 表单验证
+	if (!uploadedImage.value) {
+		uni.showToast({
+			title: '请上传藏品图片',
+			icon: 'none'
+		});
+		return;
+	}
+
+	if (!uploadedImageBase64.value) {
+		uni.showToast({
+			title: '图片尚未处理完成',
+			icon: 'none'
+		});
+		return;
+	}
+
+	if (!nftName.value.trim()) {
+		uni.showToast({
+			title: '请输入藏品名称',
+			icon: 'none'
+		});
+		return;
+	}
+
+	if (!nftEvent.value.trim()) {
+		uni.showToast({
+			title: '请输入藏品事件',
+			icon: 'none'
+		});
+		return;
+	}
+
+	// 保存表单数据到全局存储
+	const formData = {
+		image: uploadedImage.value,
+		imageBase64: uploadedImageBase64.value, // Base64格式
+		name: nftName.value.trim(),
+		event: nftEvent.value.trim(),
+		remark: nftRemark.value.trim(),
+		materialType: materialTypes[materialTypeIndex.value]
+	};
+
+	try {
+		uni.setStorageSync('castlove_form_data', JSON.stringify(formData));
+		console.log('[CastloveContent] 表单数据已保存，Base64长度:', uploadedImageBase64.value.length);
+	} catch (e) {
+		console.error('保存表单数据失败:', e);
+		uni.showToast({
+			title: '保存数据失败',
+			icon: 'none'
+		});
+		return;
+	}
+
+	// 清空表单
+	resetForm();
+
+	// 跳转到发现页面
+	uni.navigateTo({
+		url: '/pages/discover/discover'
+	});
+};
+
+// 重置表单
+const resetForm = () => {
+	uploadedImage.value = '';
+	uploadedImageUrl.value = '';
+	uploadedImageBase64.value = '';
+	originalFileName.value = '';
+	currentOrderId.value = '';
+	isUploading.value = false;
+	materialTypeIndex.value = 0;
+	nftName.value = '';
+	nftEvent.value = '';
+	nftRemark.value = '';
+};
+</script>
+
+<style scoped>
+.page-container {
+	position: relative;
+	width: 100vw;
+	height: 100vh;
+	min-height: 100vh;
+	overflow: hidden;
+}
+
+.castlove-content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.background-image {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	object-fit: cover;
+	min-width: 100%;
+	min-height: 100%;
+}
+
+.background-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	background: rgba(0, 0, 0, 0.3);
+}
+
+.content-wrapper {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	min-height: 100%;
+	padding: 100rpx 40rpx 40rpx 32rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 图片上传区域 */
+.upload-section {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 40rpx;
+}
+
+.upload-box {
+	width: 500rpx;
+	height: 500rpx;
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10rpx);
+	border-radius: 30rpx;
+	border: 4rpx dashed rgba(255, 255, 255, 0.5);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
+}
+
+.upload-hint {
+	margin-top: 20rpx;
+	font-size: 24rpx;
+	color: rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+.uploaded-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.upload-placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 20rpx;
+}
+
+.upload-icon {
+	width: 120rpx;
+	height: 120rpx;
+	opacity: 0.8;
+}
+
+.upload-text {
+	font-size: 28rpx;
+	color: rgba(255, 255, 255, 0.9);
+	font-weight: 500;
+}
+
+/* 表单区域 */
+.form-section {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 30rpx;
+	margin-bottom: 40rpx;
+}
+
+.form-item {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.form-item-picker {
+	position: relative;
+	z-index: 10;
+}
+
+.form-label {
+	font-size: 36rpx;
+	color: #e6e6e6;
+	font-weight: 500;
+	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
+	padding: 18rpx 18rpx;
+	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
+	border-radius: 44rpx;
+	display: inline-block;
+	align-self: flex-start;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
+}
+
+/* 自定义选择器 */
+.custom-picker {
+	position: relative;
+	width: 100%;
+	z-index: 10;
+}
+
+.picker-display {
+	width: 100%;
+	height: 88rpx;
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10rpx);
+	border-radius: 20rpx;
+	padding: 0 30rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+	transition: all 0.3s ease;
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.picker-display:active {
+	background: rgba(255, 255, 255, 0.2);
+}
+
+.picker-text {
+	font-size: 32rpx;
+	color: rgba(255, 255, 255, 0.85);
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.picker-arrow {
+	font-size: 48rpx;
+	color: rgba(255, 255, 255, 0.7);
+	font-weight: bold;
+	transform: rotate(90deg);
+	transition: transform 0.3s ease;
+}
+
+.picker-arrow-up {
+	transform: rotate(-90deg);
+}
+
+/* 下拉选项列表 */
+.picker-options {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+	width: 100%;
+	margin-top: 10rpx;
+	background: rgba(255, 255, 255, 0.2);
+	backdrop-filter: blur(15rpx);
+	border-radius: 20rpx;
+	overflow: hidden;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
+	z-index: 10;
+	animation: slideDown 0.3s ease-out;
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+@keyframes slideDown {
+	from {
+		opacity: 0;
+		transform: translateY(-10rpx);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.picker-option {
+	width: 100%;
+	height: 88rpx;
+	padding: 0 30rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	transition: background 0.2s ease;
+	border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
+}
+
+.picker-option:last-child {
+	border-bottom: none;
+}
+
+.picker-option:active {
+	background: rgba(255, 255, 255, 0.15);
+}
+
+.picker-option-active {
+	background: rgba(255, 255, 255, 0.1);
+}
+
+.picker-option-text {
+	font-size: 32rpx;
+	color: #e6e6e6;
+}
+
+.picker-option-check {
+	font-size: 36rpx;
+	color: #e6e6e6;
+	font-weight: bold;
+}
+
+.form-input {
+	width: 100%;
+	height: 88rpx;
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10rpx);
+	border-radius: 20rpx;
+	padding: 0 30rpx;
+	font-size: 32rpx;
+	color: #e6e6e6;
+	box-sizing: border-box;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.input-placeholder {
+	color: rgba(255, 255, 255, 0.85);
+	font-size: 32rpx;
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.form-textarea {
+	width: 100%;
+	min-height: 88rpx;
+	max-height: 400rpx;
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10rpx);
+	border-radius: 20rpx;
+	padding: 20rpx 30rpx;
+	font-size: 32rpx;
+	color: #e6e6e6;
+	box-sizing: border-box;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+	line-height: 1.5;
+}
+
+.textarea-placeholder {
+	color: rgba(255, 255, 255, 0.85);
+	font-size: 32rpx;
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+/* 底部按钮区域 */
+.button-section {
+	width: 100%;
+	display: flex;
+	gap: 20rpx;
+	margin-top: auto;
+	padding-top: 40rpx;
+	padding-bottom: 40rpx;
+}
+
+.btn-secondary,
+.btn-primary {
+	flex: 1;
+	height: 88rpx;
+	line-height: 88rpx;
+	border-radius: 44rpx;
+	font-size: 36rpx;
+	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
+	font-weight: 600;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.btn-secondary {
+	background: rgba(255, 255, 255, 0.2);
+	backdrop-filter: blur(10rpx);
+	color: #e6e6e6;
+	border: 2rpx solid rgba(255, 255, 255, 0.4);
+}
+
+.btn-secondary::after {
+	border: none;
+}
+
+.btn-primary {
+	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
+	color: #e6e6e6;
+
+
+}
+
+.btn-primary::after {
+	border: none;
+}
+
+.btn-secondary:active {
+	background: rgba(255, 255, 255, 0.3);
+}
+
+.btn-primary:active {
+	opacity: 0.9;
+}
+
+.nav-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 999;
+	animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/frontend/pages/castlove/mall.vue b/frontend/pages/castlove/mall.vue
new file mode 100644
index 0000000..9a62d81
--- /dev/null
+++ b/frontend/pages/castlove/mall.vue
@@ -0,0 +1,66 @@
+<template>
+	<view class="page-container">
+		<CastloveContent />
+		
+		<!-- 蒙层 - 导航栏展开时显示 -->
+		<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
+		
+		<BottomNav :activeTab="2" :isExpanded="navExpanded" @update:activeTab="handleTabChange" @update:isExpanded="navExpanded = $event" />
+	</view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import BottomNav from "../components/BottomNav.vue";
+import CastloveContent from "../components/CastloveContent.vue";
+
+const navExpanded = ref(false);
+
+const handleTabChange = (newTab) => {
+	const routes = [
+		'/pages/square/square',
+		'/pages/starbook/index',
+		'/pages/castlove/mall',
+		'/pages/starcity/index',
+		'/pages/friends/index'
+	];
+	
+	if (newTab >= 0 && newTab < routes.length) {
+		uni.redirectTo({
+			url: routes[newTab]
+		});
+	}
+};
+</script>
+
+<style scoped>
+.page-container {
+	position: relative;
+	width: 100vw;
+	height: 100vh;
+	min-height: 100vh;
+	overflow: hidden;
+}
+
+.nav-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 999;
+	animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/frontend/pages/components/CastloveContent.vue b/frontend/pages/components/CastloveContent.vue
index eec2a68..fcde3c8 100644
--- a/frontend/pages/components/CastloveContent.vue
+++ b/frontend/pages/components/CastloveContent.vue
@@ -1,543 +1,366 @@
 <template>
-	<view class="castlove-content">
+	<view class="castlove-container">
 		<!-- 背景图片 -->
-		<image class="background-image" src="/static/background/profile-bg.png" mode="aspectFill"></image>
-
+		<image class="background-image" src="/static/background/starbook.jpg" mode="aspectFill"></image>
+		
 		<!-- 蒙层 -->
-		<view class="background-overlay"></view>
+		<!-- <view class="background-overlay"></view> -->
+		
+		<!-- 左上角返回按钮 -->
+		<view class="back-button" @click="handleBack">
+			<image class="back-icon" src="/static/icon/back.png" mode="aspectFit" />
+		</view>
 
 		<!-- 内容区域 -->
-		<view class="content-wrapper">
-			<scroll-view class="content-wrapper" scroll-y="true" :show-scrollbar="false" :enhanced="true">
-				<!-- 图片上传区域 -->
-				<view class="upload-section">
-					<view class="upload-box" @click="chooseImage">
-						<image v-if="uploadedImage" class="uploaded-image" :src="uploadedImage" mode="aspectFit">
-						</image>
-						<view v-else class="upload-placeholder">
-							<image class="upload-icon" src="/static/icon/add.png" mode="aspectFit"></image>
-							<text class="upload-text">点击上传藏品图片</text>
+		<scroll-view class="content-wrapper" :class="{ 'fixed-category': isFixed }" scroll-y @scrolltolower="loadMore" @scroll="handleScroll" :show-scrollbar="false" :scroll-top="scrollTop">
+			<!-- 区域一：顶部运营轮播图 -->
+			<view class="banner-section">
+				<swiper 
+					class="banner-swiper" 
+					:indicator-dots="true" 
+					:autoplay="true" 
+					:interval="3000" 
+					:duration="500"
+					indicator-color="rgba(255, 255, 255, 0.3)"
+					indicator-active-color="#FF6B9D"
+				>
+					<swiper-item v-for="(banner, index) in bannerList" :key="index" @click="handleBannerClick(banner)">
+						<image class="banner-image" :src="banner.image_url" mode="aspectFill"></image>
+						<view class="banner-overlay">
+							<text class="banner-title">{{ banner.title }}</text>
 						</view>
-					</view>
-					<view class="upload-hint">支持JPG、PNG格式，大小不超过5MB</view>
+					</swiper-item>
+				</swiper>
+			</view>
+			
+			<!-- 区域二：主Tab标签区（星卡/吧唧/海报） -->
+			<view class="main-tab-section">
+				<view 
+					v-for="(tab, index) in mainTabs" 
+					:key="index" 
+					class="tab-item"
+					@click="handleMainTabClick(tab)"
+				>
+					<image class="tab-icon" :src="tab.icon" mode="aspectFit"></image>
+					<text class="tab-name">{{ tab.name }}</text>
 				</view>
-
-				<!-- 表单区域 -->
-				<view class="form-section">
-					<!-- 素材类型选择器 -->
-					<view class="form-item form-item-picker">
-						<text class="form-label">素材类型</text>
-						<view class="custom-picker">
-							<view class="picker-display" @click="toggleMaterialTypePicker">
-								<text class="picker-text">{{ materialTypes[materialTypeIndex] }}</text>
-								<text class="picker-arrow"
-									:class="{ 'picker-arrow-up': showMaterialTypePicker }">›</text>
+			</view>
+			
+			<!-- 区域三：分类标签区 -->
+			<view id="category-section" class="category-section" :class="{ fixed: isFixed }">
+				<scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
+					<view 
+						v-for="(category, index) in categories" 
+						:key="index"
+						class="category-item"
+						:class="{ active: currentCategory === category.value }"
+						@click="handleCategoryChange(category.value)"
+					>
+						<text class="category-text">{{ category.label }}</text>
+					</view>
+				</scroll-view>
+			</view>
+			
+			<!-- 占位元素，始终存在但透明度为0，避免跳动 -->
+			<!-- <view class="category-placeholder" :style="{ opacity: isFixed ? 1 : 0, height: isFixed ? '32rpx' : '0' }"></view> -->
+			
+			<!-- 区域四：创作网格列表 -->
+			<view class="creation-grid">
+				<view 
+					v-for="(item, index) in creationList" 
+					:key="item.id"
+					class="creation-card"
+					@click="handleCardClick(item)"
+				>
+					<image class="creation-image" :src="item.cover_image" mode="aspectFill"></image>
+					<view class="creation-info">
+						<view class="creation-id">
+							<text class="id-text">#{{ item.certificate_id }}</text>
+						</view>
+						<view class="creation-meta">
+							<view class="creator-info">
+								<image class="creator-avatar" :src="item.creator_avatar" mode="aspectFill"></image>
+								<text class="creator-name">{{ item.creator_name }}</text>
 							</view>
-							<!-- 自定义下拉选项列表 -->
-							<view v-if="showMaterialTypePicker" class="picker-options">
-								<view v-for="(type, index) in materialTypes" :key="index" class="picker-option"
-									:class="{ 'picker-option-active': materialTypeIndex === index }"
-									@click.stop="selectMaterialType(index)">
-									<text class="picker-option-text">{{ type }}</text>
-									<text v-if="materialTypeIndex === index" class="picker-option-check">✓</text>
-								</view>
+							<view class="like-info">
+								<text class="like-icon">♡</text>
+								<text class="like-count">{{ formatCount(item.like_count) }}</text>
 							</view>
 						</view>
 					</view>
-
-					<!-- 藏品名称输入框 -->
-					<view class="form-item">
-						<text class="form-label">藏品名称</text>
-						<input class="form-input" v-model="nftName" placeholder="请输入藏品名称"
-							placeholder-class="input-placeholder" />
-					</view>
-
-					<!-- 藏品事件输入框 -->
-					<view class="form-item">
-						<text class="form-label">藏品事件</text>
-						<input class="form-input" v-model="nftEvent" placeholder="请输入藏品事件"
-							placeholder-class="input-placeholder" />
-					</view>
-
-					<!-- 备注输入框 -->
-					<view class="form-item">
-						<text class="form-label">备注</text>
-						<textarea class="form-textarea" v-model="nftRemark" placeholder="请输入备注信息"
-							placeholder-class="textarea-placeholder" maxlength="200" auto-height
-							:show-confirm-bar="false" />
-					</view>
 				</view>
-
-				<!-- 底部按钮区域 -->
-				<view class="button-section">
-					<button class="btn-secondary" @click="handleBack">返回</button>
-					<button class="btn-primary" @click="handleConfirm">开始铸造</button>
-				</view>
-			</scroll-view>
-		</view>
+			</view>
+			
+			<!-- 加载更多提示 -->
+			<view class="loading-more" v-if="loading">
+				<text class="loading-text">加载中...</text>
+			</view>
+			
+			<view class="no-more" v-if="noMore && creationList.length > 0">
+				<text class="no-more-text">没有更多了</text>
+			</view>
+		</scroll-view>
 	</view>
-
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { getOssSignatureApi, createMintOrderApi, deleteMintOrderApi } from '@/utils/api.js';
+import { ref, onMounted } from 'vue';
 
-// 定义 emits
-const emit = defineEmits(['back']);
+// 轮播图数据
+const bannerList = ref([
+	{
+		image_url: '/static/sucai/image-01.png',
+		title: '这河非遇美学宇宙联名',
+		link_type: 'activity',
+		link_value: '1'
+	},
+	{
+		image_url: '/static/sucai/image-02.png',
+		title: '限时创作活动',
+		link_type: 'activity',
+		link_value: '2'
+	},
+	{
+		image_url: '/static/sucai/image-03.png',
+		title: '精选作品展示',
+		link_type: 'topic',
+		link_value: '3'
+	}
+]);
 
-// 表单数据
-const uploadedImage = ref(''); // 本地预览路径
-const uploadedImageUrl = ref(''); // OSS完整URL
-const uploadedImageBase64 = ref(''); // Base64格式
-const originalFileName = ref(''); // 原始文件名
-const currentOrderId = ref(''); // 当前订单ID
-const isUploading = ref(false); // 上传中状态
-const materialTypes = ['粉丝自制', '热爱痕迹', '其他'];
-const materialTypeIndex = ref(0);
-const showMaterialTypePicker = ref(false);
-const nftName = ref('');
-const nftEvent = ref('');
-const nftRemark = ref('');
+// 主Tab配置
+const mainTabs = ref([
+	{
+		name: '星卡',
+		type: 'star_card',
+		icon: '/static/sucai/image-04.png'
+	},
+	{
+		name: '吧唧',
+		type: 'badge',
+		icon: '/static/sucai/image-05.png'
+	},
+	{
+		name: '海报',
+		type: 'poster',
+		icon: '/static/sucai/image-06.png'
+	}
+]);
 
-// 选择图片
-const chooseImage = () => {
-	// 如果正在上传，禁止选择新图片
-	if (isUploading.value) {
+// 分类配置
+const categories = ref([
+	{ label: '热门作品', value: 'hot' },
+	{ label: '最新作品', value: 'latest' },
+	{ label: '星卡', value: 'star_card' },
+	{ label: '吧唧', value: 'badge' },
+	{ label: '海报', value: 'poster' }
+]);
+
+// 当前选中的分类
+const currentCategory = ref('hot');
+
+// 创作列表
+const creationList = ref([]);
+
+// 分页参数
+const page = ref(1);
+const pageSize = ref(10);
+const loading = ref(false);
+const noMore = ref(false);
+
+// 分类栏吸附状态
+const isFixed = ref(false);
+
+// 滚动位置
+const scrollTop = ref(0);
+
+// 页面加载
+onMounted(() => {
+	loadBanners();
+	loadCreations();
+});
+
+// 加载轮播图
+const loadBanners = async () => {
+	try {
+		// TODO: 调用后台接口获取轮播图数据
+		// const res = await request('/api/castlove/banners', 'GET');
+		// bannerList.value = res.data;
+	} catch (e) {
+		console.error('加载轮播图失败:', e);
+	}
+};
+
+// 加载创作列表
+const loadCreations = async () => {
+	if (loading.value || noMore.value) return;
+	
+	loading.value = true;
+	try {
+		// TODO: 调用后台接口获取创作列表
+		// const res = await request('/api/castlove/creations', 'GET', {
+		// 	category: currentCategory.value,
+		// 	page: page.value,
+		// 	page_size: pageSize.value
+		// });
+		
+		// 模拟数据
+		const mockData = generateMockData();
+		
+		if (page.value === 1) {
+			creationList.value = mockData;
+		} else {
+			creationList.value = [...creationList.value, ...mockData];
+		}
+		
+		if (mockData.length < pageSize.value) {
+			noMore.value = true;
+		}
+	} catch (e) {
+		console.error('加载创作列表失败:', e);
 		uni.showToast({
-			title: '图片上传中，请稍候',
+			title: '加载失败',
 			icon: 'none'
 		});
-		return;
-	}
-
-	uni.chooseImage({
-		count: 1,
-		sourceType: ['album', 'camera'],
-		success: (res) => {
-			const filePath = res.tempFilePaths[0];
-			const tempFile = res.tempFiles && res.tempFiles[0];
-
-			// 获取文件信息进行验证
-			uni.getFileInfo({
-				filePath: filePath,
-				success: (fileInfo) => {
-					// 验证文件大小（5MB = 5 * 1024 * 1024 bytes）
-					const maxSize = 5 * 1024 * 1024;
-					if (fileInfo.size > maxSize) {
-						uni.showToast({
-							title: '图片大小不能超过5MB',
-							icon: 'none',
-							duration: 2000
-						});
-						return;
-					}
-
-					// 验证文件格式
-					const mimeType = (tempFile && tempFile.type) ? tempFile.type.toLowerCase() : '';
-					const pathLower = filePath.toLowerCase();
-					const validByMime = mimeType === 'image/jpeg' || mimeType === 'image/png';
-					const validByExt = pathLower.endsWith('.jpg') || pathLower.endsWith('.jpeg') || pathLower.endsWith('.png');
-					if (!validByMime && !validByExt) {
-						uni.showToast({
-							title: '只支持JPG和PNG格式',
-							icon: 'none',
-							duration: 2000
-						});
-						return;
-					}
-
-					// 提取原始文件名
-					const rawName = (tempFile && tempFile.name)
-						? tempFile.name
-						: filePath.split('/').pop();
-					originalFileName.value = rawName;
-
-					// 验证通过，转换为 base64
-					convertImageToBase64(filePath, originalFileName.value);
-				},
-				fail: (error) => {
-					console.error('获取文件信息失败:', error);
-					uni.showToast({
-						title: '获取文件信息失败',
-						icon: 'none'
-					});
-				}
-			});
-		},
-		fail: (err) => {
-			console.error('选择图片失败:', err);
-			uni.showToast({
-				title: '选择图片失败',
-				icon: 'none'
-			});
-		}
-	});
-};
-
-// 将图片转换为 base64（兼容 H5、App、小程序）
-const convertImageToBase64 = (filePath, fileName) => {
-	isUploading.value = true;
-	uni.showLoading({ title: '处理中...', mask: true });
-
-	// 判断运行环境
-	// #ifdef H5
-	// H5 环境：使用 FileReader
-	convertImageToBase64H5(filePath, fileName);
-	// #endif
-	
-	// #ifndef H5
-	// App/小程序环境：使用 FileSystemManager
-	convertImageToBase64Native(filePath, fileName);
-	// #endif
-};
-
-// H5 环境的 base64 转换
-const convertImageToBase64H5 = (filePath, fileName) => {
-	// H5 环境下，filePath 是 blob URL
-	// 需要通过 fetch 获取 blob，然后用 FileReader 转换
-	fetch(filePath)
-		.then(res => res.blob())
-		.then(blob => {
-			const reader = new FileReader();
-			reader.onload = (e) => {
-				// e.target.result 已经是完整的 data:image/xxx;base64,xxx 格式
-				uploadedImageBase64.value = e.target.result;
-				uploadedImage.value = filePath;
-				
-				console.log('[CastloveContent] Base64转换成功 (H5)');
-				console.log('[CastloveContent] Base64长度:', uploadedImageBase64.value.length);
-				
-				uni.hideLoading();
-				uni.showToast({
-					title: '图片加载成功',
-					icon: 'success',
-					duration: 1500
-				});
-				
-				isUploading.value = false;
-			};
-			reader.onerror = (error) => {
-				console.error('Base64转换失败 (H5):', error);
-				uni.hideLoading();
-				uni.showToast({
-					title: '图片处理失败',
-					icon: 'none',
-					duration: 2000
-				});
-				isUploading.value = false;
-			};
-			reader.readAsDataURL(blob);
-		})
-		.catch(error => {
-			console.error('获取图片失败 (H5):', error);
-			uni.hideLoading();
-			uni.showToast({
-				title: '图片处理失败',
-				icon: 'none',
-				duration: 2000
-			});
-			isUploading.value = false;
-		});
-};
-
-// App/小程序环境的 base64 转换
-const convertImageToBase64Native = (filePath, fileName) => {
-	// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
-	// 小程序环境
-	const fs = uni.getFileSystemManager();
-	fs.readFile({
-		filePath: filePath,
-		encoding: 'base64',
-		success: (res) => {
-			const ext = fileName.toLowerCase().split('.').pop();
-			let mimeType = 'image/jpeg';
-			if (ext === 'png') {
-				mimeType = 'image/png';
-			}
-			
-			uploadedImageBase64.value = `data:${mimeType};base64,${res.data}`;
-			uploadedImage.value = filePath;
-			
-			console.log('[CastloveContent] Base64转换成功 (小程序)');
-			
-			uni.hideLoading();
-			uni.showToast({
-				title: '图片加载成功',
-				icon: 'success',
-				duration: 1500
-			});
-			
-			isUploading.value = false;
-		},
-		fail: (error) => {
-			console.error('[CastloveContent] Base64转换失败:', error);
-			uni.hideLoading();
-			uni.showToast({
-				title: '图片处理失败',
-				icon: 'none',
-				duration: 2000
-			});
-			isUploading.value = false;
-		}
-	});
-	// #endif
-	
-	// #ifdef APP-PLUS
-	// App环境：使用plus.io API
-	plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
-		entry.file((file) => {
-			const reader = new plus.io.FileReader();
-			reader.onloadend = (e) => {
-				uploadedImageBase64.value = e.target.result;
-				uploadedImage.value = filePath;
-				
-				console.log('[CastloveContent] Base64转换成功 (App)');
-				
-				uni.hideLoading();
-				uni.showToast({
-					title: '图片加载成功',
-					icon: 'success',
-					duration: 1500
-				});
-				
-				isUploading.value = false;
-			};
-			reader.onerror = (error) => {
-				console.error('[CastloveContent] Base64转换失败:', error);
-				uni.hideLoading();
-				uni.showToast({
-					title: '图片处理失败',
-					icon: 'none',
-					duration: 2000
-				});
-				isUploading.value = false;
-			};
-			reader.readAsDataURL(file);
-		});
-	}, (error) => {
-		console.error('[CastloveContent] 读取文件失败:', error);
-		uni.hideLoading();
-		uni.showToast({
-			title: '图片处理失败',
-			icon: 'none',
-			duration: 2000
-		});
-		isUploading.value = false;
-	});
-	// #endif
-};
-
-// 上传图片到OSS
-const uploadImageToOss = async (filePath, fileName) => {
-	try {
-		isUploading.value = true;
-		uni.showLoading({ title: '上传中...', mask: true });
-
-		// 1. 获取OSS签名（type='asset'），后端返回order_id
-		const signRes = await getOssSignatureApi('asset');
-		if (signRes.code !== 200) {
-			throw new Error(signRes.message || '获取签名失败');
-		}
-
-		// 保存order_id
-		currentOrderId.value = signRes.data.order_id;
-
-		// 2. 构建FormData并上传到OSS
-		uni.uploadFile({
-			url: signRes.data.host,
-			filePath: filePath,
-			name: 'file',
-			formData: {
-				key: signRes.data.dir + fileName,
-				policy: signRes.data.policy,
-				success_action_status: '200',
-				'x-oss-credential': signRes.data.x_oss_credential,
-				'x-oss-date': signRes.data.x_oss_date,
-				'x-oss-security-token': signRes.data.security_token,
-				'x-oss-signature': signRes.data.signature,
-				'x-oss-signature-version': signRes.data.x_oss_signature_version
-			},
-			success: (uploadRes) => {
-				try {
-					if (uploadRes.statusCode === 200 || uploadRes.statusCode === 204) {
-						// 3. 拼接完整URL
-						uploadedImageUrl.value = `${signRes.data.host}/${signRes.data.dir}${fileName}`;
-
-						// 4. 显示预览图（使用本地路径）
-						uploadedImage.value = filePath;
-
-						uni.hideLoading();
-						uni.showToast({
-							title: '上传成功',
-							icon: 'success',
-							duration: 1500
-						});
-					} else {
-						throw new Error(`上传失败，状态码: ${uploadRes.statusCode}`);
-					}
-				} catch (error) {
-					console.error('处理上传结果失败:', error);
-					uni.hideLoading();
-					uni.showToast({
-						title: error.message || '上传失败',
-						icon: 'none',
-						duration: 2000
-					});
-				} finally {
-					isUploading.value = false;
-				}
-			},
-			fail: (error) => {
-				console.error('OSS上传失败:', error);
-				uni.hideLoading();
-				uni.showToast({
-					title: '上传失败',
-					icon: 'none',
-					duration: 2000
-				});
-				isUploading.value = false;
-			}
-		});
-
-	} catch (error) {
-		console.error('上传图片失败:', error);
-		uni.hideLoading();
-		uni.showToast({
-			title: error.message || '上传失败',
-			icon: 'none',
-			duration: 2000
-		});
-		isUploading.value = false;
+	} finally {
+		loading.value = false;
 	}
 };
 
-// 切换素材类型选择器显示
-const toggleMaterialTypePicker = () => {
-	showMaterialTypePicker.value = !showMaterialTypePicker.value;
+// 素材图片列表
+const sucaiImages = [
+	'/static/sucai/image-01.png',
+	'/static/sucai/image-02.png',
+	'/static/sucai/image-03.png',
+	'/static/sucai/image-04.png',
+	'/static/sucai/image-05.png',
+	'/static/sucai/image-06.png',
+	'/static/sucai/image-07.png',
+	'/static/sucai/image-08.png',
+	'/static/sucai/image-09.png',
+	'/static/sucai/image-10.png',
+	'/static/sucai/image-11.png',
+	'/static/sucai/image-12.png',
+	'/static/sucai/image-13.png',
+	'/static/sucai/image-14.png',
+	'/static/sucai/image-15.png',
+	'/static/sucai/image-16.png'
+];
+
+// 生成模拟数据
+const generateMockData = () => {
+	const data = [];
+	for (let i = 0; i < pageSize.value; i++) {
+		// 随机选择一张素材图片
+		const randomImageIndex = Math.floor(Math.random() * sucaiImages.length);
+		
+		data.push({
+			id: `${Date.now()}_${i}`,
+			cover_image: sucaiImages[randomImageIndex],
+			certificate_id: `ZUA-20260409-${Math.random().toString(36).substr(2, 9).toUpperCase()}`,
+			creator_name: `用户${Math.floor(Math.random() * 1000)}`,
+			creator_avatar: '/static/avatar/default.png',
+			like_count: Math.floor(Math.random() * 1000),
+			type: currentCategory.value === 'hot' || currentCategory.value === 'latest' 
+				? ['star_card', 'badge', 'poster'][Math.floor(Math.random() * 3)]
+				: currentCategory.value
+		});
+	}
+	return data;
 };
 
-// 选择素材类型
-const selectMaterialType = (index) => {
-	materialTypeIndex.value = index;
-	showMaterialTypePicker.value = false;
+// 轮播图点击
+const handleBannerClick = (banner) => {
+	console.log('点击轮播图:', banner);
+	// TODO: 根据link_type跳转
+};
+
+// 主Tab点击 - 进入铸造页面
+const handleMainTabClick = (tab) => {
+	console.log('点击主Tab:', tab);
+	// 只有星卡类型才跳转到创建页面
+	if (tab.type === 'star_card') {
+		uni.navigateTo({
+			url: `/pages/castlove/create?type=${tab.type}&name=${encodeURIComponent(tab.name)}`
+		});
+	} else {
+		// 其他类型暂时提示
+		uni.showToast({
+			title: `${tab.name}功能开发中`,
+			icon: 'none',
+			duration: 1500
+		});
+	}
+};
+
+// 分类切换
+const handleCategoryChange = (value) => {
+	if (currentCategory.value === value) return;
+	
+	currentCategory.value = value;
+	page.value = 1;
+	noMore.value = false;
+	creationList.value = [];
+	
+	// 滚动到创作网格列表的顶部（分类栏位置）
+	// 轮播图360rpx + 主Tab约280rpx + 间距 ≈ 320px
+	scrollTop.value = 360;
+	// 强制触发滚动更新
+	setTimeout(() => {
+		scrollTop.value = 361;
+	}, 100);
+	
+	loadCreations();
+};
+
+// 创作卡片点击
+const handleCardClick = (item) => {
+	console.log('点击创作卡片:', item);
+	uni.navigateTo({
+		url: `/pages/castlove/detail?id=${item.id}`
+	});
+};
+
+// 加载更多
+const loadMore = () => {
+	if (!loading.value && !noMore.value) {
+		page.value++;
+		loadCreations();
+	}
+};
+
+// 处理滚动事件
+const handleScroll = (e) => {
+	const scrollTop = e.detail.scrollTop;
+	// 当滚动超过阈值时，固定分类栏（轮播图360rpx + 主Tab约280rpx + 间距）
+	isFixed.value = scrollTop > 360; // 约640rpx转px
+};
+
+// 格式化数字
+const formatCount = (count) => {
+	if (count >= 10000) {
+		return (count / 10000).toFixed(1) + 'w';
+	}
+	return count;
 };
 
 // 返回按钮
-const handleBack = async () => {
-	// 如果有未保存的数据，提示用户
-	if (uploadedImage.value || nftName.value || nftEvent.value || nftRemark.value) {
-		uni.showModal({
-			title: '提示',
-			content: '确定要返回吗？未保存的数据将会丢失',
-			success: async (res) => {
-				if (res.confirm) {
-					// 如果有订单ID，需要删除订单
-					if (currentOrderId.value) {
-						try {
-							await deleteMintOrderApi(currentOrderId.value);
-						} catch (error) {
-							console.error('删除订单失败:', error);
-							// 删除失败不影响返回操作，只记录日志
-						}
-					}
-
-					// 清空表单数据
-					resetForm();
-					// 触发返回事件，让父组件切换到广场 tab
-					emit('back');
-				}
-			}
-		});
-	} else {
-		// 没有未保存数据，直接返回
-		emit('back');
-	}
-};
-
-// 确认铸造按钮
-const handleConfirm = async () => {
-	// 表单验证
-	if (!uploadedImage.value) {
-		uni.showToast({
-			title: '请上传藏品图片',
-			icon: 'none'
-		});
-		return;
-	}
-
-	if (!uploadedImageBase64.value) {
-		uni.showToast({
-			title: '图片尚未处理完成',
-			icon: 'none'
-		});
-		return;
-	}
-
-	if (!nftName.value.trim()) {
-		uni.showToast({
-			title: '请输入藏品名称',
-			icon: 'none'
-		});
-		return;
-	}
-
-	if (!nftEvent.value.trim()) {
-		uni.showToast({
-			title: '请输入藏品事件',
-			icon: 'none'
-		});
-		return;
-	}
-
-	// 保存表单数据到全局存储
-	const formData = {
-		image: uploadedImage.value,
-		imageBase64: uploadedImageBase64.value, // Base64格式
-		name: nftName.value.trim(),
-		event: nftEvent.value.trim(),
-		remark: nftRemark.value.trim(),
-		materialType: materialTypes[materialTypeIndex.value]
-	};
-
-	try {
-		uni.setStorageSync('castlove_form_data', JSON.stringify(formData));
-		console.log('[CastloveContent] 表单数据已保存，Base64长度:', uploadedImageBase64.value.length);
-	} catch (e) {
-		console.error('保存表单数据失败:', e);
-		uni.showToast({
-			title: '保存数据失败',
-			icon: 'none'
-		});
-		return;
-	}
-
-	// 清空表单
-	resetForm();
-
-	// 跳转到发现页面
-	uni.navigateTo({
-		url: '/pages/discover/discover'
+const handleBack = () => {
+	uni.redirectTo({
+		url: '/pages/square/square'
 	});
 };
-
-// 重置表单
-const resetForm = () => {
-	uploadedImage.value = '';
-	uploadedImageUrl.value = '';
-	uploadedImageBase64.value = '';
-	originalFileName.value = '';
-	currentOrderId.value = '';
-	isUploading.value = false;
-	materialTypeIndex.value = 0;
-	nftName.value = '';
-	nftEvent.value = '';
-	nftRemark.value = '';
-};
 </script>
 
 <style scoped>
-.castlove-content {
+.castlove-container {
+	position: relative;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+
+.background-image {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -545,27 +368,11 @@ const resetForm = () => {
 	bottom: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 1;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-
-.background-image {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	width: 100%;
-	height: 100%;
 	z-index: 0;
-	object-fit: cover;
-	min-width: 100%;
-	min-height: 100%;
 }
 
 .background-overlay {
-	position: fixed;
+	position: absolute;
 	top: 0;
 	left: 0;
 	right: 0;
@@ -573,315 +380,259 @@ const resetForm = () => {
 	width: 100%;
 	height: 100%;
 	z-index: 0;
-	background: rgba(0, 0, 0, 0.3);
+	background: rgba(0, 0, 0, 0.1);
+}
+
+
+/* 左上角返回按钮 */
+.back-button {
+	position: fixed;
+	top: calc(env(safe-area-inset-top) + 80rpx);
+	left: 32rpx;
+	width: 80rpx;
+	height: 80rpx;
+	border-radius: 20rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 101;
+}
+
+.back-icon {
+	width: 64rpx;
+	height: 64rpx;
 }
 
 .content-wrapper {
 	position: relative;
 	z-index: 1;
 	width: 100%;
-	min-height: 100%;
-	padding: 100rpx 40rpx 40rpx 32rpx;
+	height: calc(100vh - 64rpx);
+	margin-top: 160rpx;
+	padding: 0 24rpx;
 	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
+	transition: margin-top 0.3s ease;
 }
 
-/* 图片上传区域 */
-.upload-section {
+.content-wrapper.fixed-category {
+	margin-top: 5rem;
+}
+
+/* 区域一：轮播图 */
+.banner-section {
 	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin-bottom: 40rpx;
+	margin-bottom: 32rpx;
 }
 
-.upload-box {
-	width: 500rpx;
-	height: 500rpx;
-	background: rgba(255, 255, 255, 0.15);
-	backdrop-filter: blur(10rpx);
-	border-radius: 30rpx;
-	border: 4rpx dashed rgba(255, 255, 255, 0.5);
-	display: flex;
-	align-items: center;
-	justify-content: center;
+.banner-swiper {
+	width: 100%;
+	height: 360rpx;
+	border-radius: 24rpx;
 	overflow: hidden;
-	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
 }
 
-.upload-hint {
-	margin-top: 20rpx;
-	font-size: 24rpx;
-	color: rgba(255, 255, 255, 0.7);
-	text-align: center;
-}
-
-.uploaded-image {
+.banner-image {
 	width: 100%;
 	height: 100%;
-	object-fit: cover;
 }
 
-.upload-placeholder {
+.banner-overlay {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 24rpx;
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
+}
+
+.banner-title {
+	font-size: 28rpx;
+	color: #fff;
+	font-weight: 600;
+}
+
+/* 区域二：主Tab */
+.main-tab-section {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	padding: 24rpx 0;
+}
+
+.tab-item {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: 20rpx;
+	width: 200rpx;
+	height: 200rpx;
+	background: linear-gradient(135deg, rgba(240, 228, 177, 0.3), rgba(240, 131, 153, 0.3));
+	border-radius: 24rpx;
+	box-shadow: 0 8rpx 24rpx rgba(255, 107, 157, 0.2);
+	transition: all 0.3s;
 }
 
-.upload-icon {
-	width: 120rpx;
-	height: 120rpx;
+.tab-item:active {
+	transform: scale(0.95);
 	opacity: 0.8;
 }
 
-.upload-text {
+.tab-icon {
+	width: 120rpx;
+	height: 120rpx;
+	margin-bottom: 12rpx;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.tab-name {
 	font-size: 28rpx;
-	color: rgba(255, 255, 255, 0.9);
-	font-weight: 500;
+	color: #fff;
+	font-weight: 600;
+	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
 }
 
-/* 表单区域 */
-.form-section {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 30rpx;
-	margin-bottom: 40rpx;
-}
-
-.form-item {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 16rpx;
-}
-
-.form-item-picker {
-	position: relative;
-	z-index: 10;
-}
-
-.form-label {
-	font-size: 36rpx;
-	color: #e6e6e6;
-	font-weight: 500;
-	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
-	padding: 18rpx 18rpx;
-	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
-	border-radius: 44rpx;
-	display: inline-block;
-	align-self: flex-start;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
-	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
-}
-
-/* 自定义选择器 */
-.custom-picker {
-	position: relative;
-	width: 100%;
-	z-index: 10;
-}
-
-.picker-display {
-	width: 100%;
-	height: 88rpx;
-	background: rgba(255, 255, 255, 0.15);
-	backdrop-filter: blur(10rpx);
-	border-radius: 20rpx;
-	padding: 0 30rpx;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	box-sizing: border-box;
-	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+/* 区域三：分类标签 */
+.category-section {
+	margin-bottom: 24rpx;
 	transition: all 0.3s ease;
-	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+	will-change: transform;
 }
 
-.picker-display:active {
+.category-section.fixed {
+	position: fixed;
+	top: 64rpx;
+	left: 24rpx;
+	right: 24rpx;
+	z-index: 100;
+	padding: 16rpx 0;
+}
+
+/* 分类占位符 */
+.category-placeholder {
+	margin-bottom: 4rpx;
+	transition: all 0.3s ease;
+	pointer-events: none;
+}
+
+.category-scroll {
+	white-space: nowrap;
+}
+
+.category-item {
+	display: inline-block;
+	padding: 16rpx 32rpx;
+	margin-right: 16rpx;
 	background: rgba(255, 255, 255, 0.2);
+	border-radius: 40rpx;
+	backdrop-filter: blur(10rpx);
+	transition: all 0.3s;
 }
 
-.picker-text {
-	font-size: 32rpx;
-	color: rgba(255, 255, 255, 0.85);
-	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+.category-item.active {
+	background: linear-gradient(135deg, #F0E4B1, #F08399);
+	box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.4);
 }
 
-.picker-arrow {
-	font-size: 48rpx;
-	color: rgba(255, 255, 255, 0.7);
-	font-weight: bold;
-	transform: rotate(90deg);
-	transition: transform 0.3s ease;
+.category-text {
+	font-size: 26rpx;
+	color: #fff;
+	font-weight: 500;
 }
 
-.picker-arrow-up {
-	transform: rotate(-90deg);
+.category-item.active .category-text {
+	font-weight: 600;
 }
 
-/* 下拉选项列表 */
-.picker-options {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	right: 0;
-	width: 100%;
-	margin-top: 10rpx;
-	background: rgba(255, 255, 255, 0.2);
-	backdrop-filter: blur(15rpx);
+/* 区域四：创作网格 */
+.creation-grid {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding-bottom: 40rpx;
+	position: relative;
+	z-index: 1;
+}
+
+.creation-card {
+	width: 48%;
+	margin-bottom: 24rpx;
+	background: rgba(255, 255, 255, 0.15);
 	border-radius: 20rpx;
 	overflow: hidden;
-	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
-	z-index: 10;
-	animation: slideDown 0.3s ease-out;
-	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
-}
-
-@keyframes slideDown {
-	from {
-		opacity: 0;
-		transform: translateY(-10rpx);
-	}
-
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-.picker-option {
-	width: 100%;
-	height: 88rpx;
-	padding: 0 30rpx;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	box-sizing: border-box;
-	transition: background 0.2s ease;
-	border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
-}
-
-.picker-option:last-child {
-	border-bottom: none;
-}
-
-.picker-option:active {
-	background: rgba(255, 255, 255, 0.15);
-}
-
-.picker-option-active {
-	background: rgba(255, 255, 255, 0.1);
-}
-
-.picker-option-text {
-	font-size: 32rpx;
-	color: #e6e6e6;
-}
-
-.picker-option-check {
-	font-size: 36rpx;
-	color: #e6e6e6;
-	font-weight: bold;
-}
-
-.form-input {
-	width: 100%;
-	height: 88rpx;
-	background: rgba(255, 255, 255, 0.15);
 	backdrop-filter: blur(10rpx);
-	border-radius: 20rpx;
-	padding: 0 30rpx;
-	font-size: 32rpx;
-	color: #e6e6e6;
-	box-sizing: border-box;
-	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
 }
 
-.input-placeholder {
-	color: rgba(255, 255, 255, 0.85);
-	font-size: 32rpx;
-	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
-}
-
-.form-textarea {
+.creation-image {
 	width: 100%;
-	min-height: 88rpx;
-	max-height: 400rpx;
-	background: rgba(255, 255, 255, 0.15);
-	backdrop-filter: blur(10rpx);
-	border-radius: 20rpx;
-	padding: 20rpx 30rpx;
-	font-size: 32rpx;
-	color: #e6e6e6;
-	box-sizing: border-box;
-	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
-	line-height: 1.5;
+	height: 400rpx;
 }
 
-.textarea-placeholder {
-	color: rgba(255, 255, 255, 0.85);
-	font-size: 32rpx;
-	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+.creation-info {
+	padding: 16rpx;
 }
 
-/* 底部按钮区域 */
-.button-section {
-	width: 100%;
-	display: flex;
-	gap: 20rpx;
-	margin-top: auto;
-	padding-top: 40rpx;
-	padding-bottom: 40rpx;
+.creation-id {
+	margin-bottom: 12rpx;
 }
 
-.btn-secondary,
-.btn-primary {
-	flex: 1;
-	height: 88rpx;
-	line-height: 88rpx;
-	border-radius: 44rpx;
-	font-size: 36rpx;
-	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
+.id-text {
+	font-size: 22rpx;
+	color: #FFB800;
 	font-weight: 600;
-	border: none;
+	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.creation-meta {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.creator-info {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
-	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
 }
 
-.btn-secondary {
-	background: rgba(255, 255, 255, 0.2);
-	backdrop-filter: blur(10rpx);
-	color: #e6e6e6;
-	border: 2rpx solid rgba(255, 255, 255, 0.4);
+.creator-avatar {
+	width: 40rpx;
+	height: 40rpx;
+	border-radius: 50%;
+	margin-right: 8rpx;
 }
 
-.btn-secondary::after {
-	border: none;
+.creator-name {
+	font-size: 22rpx;
+	color: #fff;
 }
 
-.btn-primary {
-	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
-	color: #e6e6e6;
-
-
+.like-info {
+	display: flex;
+	align-items: center;
 }
 
-.btn-primary::after {
-	border: none;
+.like-icon {
+	font-size: 28rpx;
+	color: #FF6B9D;
+	margin-right: 4rpx;
 }
 
-.btn-secondary:active {
-	background: rgba(255, 255, 255, 0.3);
+.like-count {
+	font-size: 22rpx;
+	color: #fff;
 }
 
-.btn-primary:active {
-	opacity: 0.9;
+/* 加载提示 */
+.loading-more,
+.no-more {
+	text-align: center;
+	padding: 32rpx 0;
+}
+
+.loading-text,
+.no-more-text {
+	font-size: 24rpx;
+	color: rgba(255, 255, 255, 0.6);
 }
 </style>
diff --git a/frontend/pages/friends/index.vue b/frontend/pages/friends/index.vue
new file mode 100644
index 0000000..8fec316
--- /dev/null
+++ b/frontend/pages/friends/index.vue
@@ -0,0 +1,69 @@
+<template>
+	<view class="page-container">
+		<Header :showBack="true" backIconColor="#e6e6e6" />
+		<FriendsContent />
+		
+		<!-- 蒙层 - 导航栏展开时显示 -->
+		<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
+		
+		<BottomNav :activeTab="4" :isExpanded="navExpanded" @update:activeTab="handleTabChange" @update:isExpanded="navExpanded = $event" />
+	</view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Header from "../components/Header.vue";
+import BottomNav from "../components/BottomNav.vue";
+import FriendsContent from "../components/FriendsContent.vue";
+
+const navExpanded = ref(false);
+
+const handleTabChange = (newTab) => {
+	const routes = [
+		'/pages/square/square',
+		'/pages/starbook/index',
+		'/pages/castlove/mall',
+		'/pages/starcity/index',
+		'/pages/friends/index'
+	];
+	
+	if (newTab >= 0 && newTab < routes.length) {
+		uni.redirectTo({
+			url: routes[newTab]
+		});
+	}
+};
+</script>
+
+<style scoped>
+.page-container {
+	position: relative;
+	width: 100vw;
+	height: 100vh;
+	min-height: 100vh;
+	overflow: hidden;
+	background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.nav-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 999;
+	animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue
index da35191..b5d4abb 100644
--- a/frontend/pages/square/square.vue
+++ b/frontend/pages/square/square.vue
@@ -9,7 +9,7 @@
 		</view>
 
 		<!-- Cabin 图标层（与背景同步移动） -->
-		<view class="cabin-layer" :style="cabinLayerStyle" v-show="activeTab === 0">
+		<view class="cabin-layer" :style="cabinLayerStyle">
 			<view v-for="cabin in visibleCabins" :key="cabin.key" :id="'cabin-' + cabin.key" class="cabin-wrapper"
 				:class="{ 'cabin-nickname-mine': cabin.isMine || cabin.nickname === currentUserNickname, 'cabin-slots-zero': cabin.sharedBoothSlotsRemaining === 0 }"
 				:style="{ left: cabin.x + 'px', top: cabin.y + 'px', width: cabin.w + 'px' }"
@@ -27,8 +27,8 @@
 			</view>
 		</view>
 
-		<!-- 翻页箭头按钮（仅广场 Tab 显示） -->
-		<view v-show="activeTab === 0" class="nav-arrows">
+		<!-- 翻页箭头按钮 -->
+		<view class="nav-arrows">
 			<view class="arrow-btn arrow-left" @click="scrollPage(-1)">
 				<text class="arrow-text">‹</text>
 			</view>
@@ -38,10 +38,10 @@
 		</view>
 
 		<!-- Header组件 -->
-		<Header :showBack="activeTab !== 0" :showGuideIcon="activeTab === 0" :showTaskIcon="activeTab === 0" :showStarActivityIcon="activeTab === 0" backIconColor="#e6e6e6" />
+		<Header :showGuideIcon="true" :showTaskIcon="true" :showStarActivityIcon="true" backIconColor="#e6e6e6" />
 
-		<!-- 轮播图 + 应援活动列表（仅广场 Tab 显示，swiper 切换） -->
-		<view v-show="activeTab === 0" class="banner-carousel" @click.stop>
+		<!-- 轮播图 + 应援活动列表 -->
+		<view class="banner-carousel" @click.stop>
 			<swiper class="banner-swiper" :autoplay="true" :interval="4000" :duration="400" :circular="true"
 				:indicator-dots="false">
 				<swiper-item @click.stop="showRankingModal = true">
@@ -54,11 +54,7 @@
 			</swiper>
 		</view>
 
-		<!-- 页面内容组件 - 使用 v-show 切换 -->
-		<StarbookContent v-show="activeTab === 1" :isActive="activeTab === 1" />
-		<CastloveContent v-show="activeTab === 2" @back="handleCastloveBack" />
-		<StarCityContent v-show="activeTab === 3" />
-		<FriendsContent v-show="activeTab === 4" />
+
 
 		<!-- 蒙层 - 导航栏展开时显示 -->
 		<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
@@ -68,7 +64,7 @@
 			@update:visible="handleRankingModalClose" @visit="handleRankingVisit" />
 
 		<!-- 底部导航栏 -->
-		<BottomNav :activeTab="activeTab" :isExpanded="navExpanded" @update:activeTab="handleTabChange"
+		<BottomNav :activeTab="0" :isExpanded="navExpanded" @update:activeTab="handleTabChange"
 			@update:isExpanded="navExpanded = $event" />
 
 		<!-- 全局引导遮罩 -->
@@ -100,10 +96,6 @@ import {
 } from "vuex";
 import Header from "../components/Header.vue";
 import BottomNav from "../components/BottomNav.vue";
-import CastloveContent from "../components/CastloveContent.vue";
-import StarbookContent from "../components/StarbookContent.vue";
-import StarCityContent from "../components/StarCityContent.vue";
-import FriendsContent from "../components/FriendsContent.vue";
 import GuideStartModal from "@/components/GuideStartModal.vue";
 import GuideOverlay from "@/components/GuideOverlay.vue";
 import {
@@ -840,7 +832,7 @@ onMounted(async () => {
 
 // 从其他路由页面返回时重置
 onShow(() => {
-	if (activeTab.value === 0) resetSquare();
+	resetSquare();
 });
 
 // 页面加载完成后初始化引导
@@ -889,7 +881,6 @@ const getBannerBottom = () => (screenWidth.value / 750) * 496;
 let touchInBanner = false;
 
 const onBgTouchStart = (e) => {
-	if (activeTab.value !== 0) return;
 	const touchY = e.touches[0].clientY;
 	touchInBanner = touchY < getBannerBottom();
 	if (touchInBanner) return;
@@ -902,11 +893,9 @@ const onBgTouchStart = (e) => {
 };
 
 const onBgTouchMove = (e) => {
-	// 非 tab 0 时不阻止，让 scroll-view 正常滚动
-	if (activeTab.value !== 0) return;
-	// tab 0 时如果触摸在 banner 区域也不处理，让 banner 自己处理
+	// 如果触摸在 banner 区域也不处理，让 banner 自己处理
 	if (touchInBanner) return;
-	// tab 0 且不在 banner 区域时，阻止默认行为以实现横向背景滑动
+	// 不在 banner 区域时，阻止默认行为以实现横向背景滑动
 	e.preventDefault();
 
 	const currentX = e.touches[0].clientX;
@@ -920,7 +909,7 @@ const onBgTouchMove = (e) => {
 };
 
 const onBgTouchEnd = () => {
-	if (activeTab.value !== 0 || touchInBanner) {
+	if (touchInBanner) {
 		touchInBanner = false;
 		return;
 	}
@@ -963,14 +952,25 @@ const handleCabinClick = (cabin) => {
 
 // --- Tab 切换 ---
 const handleTabChange = (newTab) => {
-	const prevTab = activeTab.value;
-	activeTab.value = newTab;
-	navExpanded.value = false;
-	if (prevTab !== 0 && newTab === 0) resetSquare();
-};
-
-const handleCastloveBack = () => {
-	handleTabChange(0);
+	if (newTab === 0) {
+		// 已经在广场页面，不需要跳转
+		navExpanded.value = false;
+		return;
+	}
+	
+	const routes = [
+		'/pages/square/square',
+		'/pages/starbook/index',
+		'/pages/castlove/mall',
+		'/pages/starcity/index',
+		'/pages/friends/index'
+	];
+	
+	if (newTab >= 0 && newTab < routes.length) {
+		uni.redirectTo({
+			url: routes[newTab]
+		});
+	}
 };
 
 onLoad((options) => {
@@ -988,13 +988,6 @@ onLoad((options) => {
 			console.log('[Guide] 调试模式已关闭')
 		}
 	}
-
-	if (options && options.tab) {
-		const tabIndex = parseInt(options.tab);
-		if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex <= 4) {
-			activeTab.value = tabIndex;
-		}
-	}
 });
 </script>
 
diff --git a/frontend/pages/starbook/index.vue b/frontend/pages/starbook/index.vue
new file mode 100644
index 0000000..0bde579
--- /dev/null
+++ b/frontend/pages/starbook/index.vue
@@ -0,0 +1,69 @@
+<template>
+	<view class="page-container">
+		<Header :showBack="true" backIconColor="#e6e6e6" />
+		<StarbookContent :isActive="true" />
+		
+		<!-- 蒙层 - 导航栏展开时显示 -->
+		<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
+		
+		<BottomNav :activeTab="1" :isExpanded="navExpanded" @update:activeTab="handleTabChange" @update:isExpanded="navExpanded = $event" />
+	</view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Header from "../components/Header.vue";
+import BottomNav from "../components/BottomNav.vue";
+import StarbookContent from "../components/StarbookContent.vue";
+
+const navExpanded = ref(false);
+
+const handleTabChange = (newTab) => {
+	const routes = [
+		'/pages/square/square',
+		'/pages/starbook/index',
+		'/pages/castlove/mall',
+		'/pages/starcity/index',
+		'/pages/friends/index'
+	];
+	
+	if (newTab >= 0 && newTab < routes.length) {
+		uni.redirectTo({
+			url: routes[newTab]
+		});
+	}
+};
+</script>
+
+<style scoped>
+.page-container {
+	position: relative;
+	width: 100vw;
+	height: 100vh;
+	min-height: 100vh;
+	overflow: hidden;
+	background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.nav-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 999;
+	animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/frontend/pages/starcity/index.vue b/frontend/pages/starcity/index.vue
new file mode 100644
index 0000000..914c693
--- /dev/null
+++ b/frontend/pages/starcity/index.vue
@@ -0,0 +1,69 @@
+<template>
+	<view class="page-container">
+		<Header :showBack="true" backIconColor="#e6e6e6" />
+		<StarCityContent />
+		
+		<!-- 蒙层 - 导航栏展开时显示 -->
+		<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
+		
+		<BottomNav :activeTab="3" :isExpanded="navExpanded" @update:activeTab="handleTabChange" @update:isExpanded="navExpanded = $event" />
+	</view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Header from "../components/Header.vue";
+import BottomNav from "../components/BottomNav.vue";
+import StarCityContent from "../components/StarCityContent.vue";
+
+const navExpanded = ref(false);
+
+const handleTabChange = (newTab) => {
+	const routes = [
+		'/pages/square/square',
+		'/pages/starbook/index',
+		'/pages/castlove/mall',
+		'/pages/starcity/index',
+		'/pages/friends/index'
+	];
+	
+	if (newTab >= 0 && newTab < routes.length) {
+		uni.redirectTo({
+			url: routes[newTab]
+		});
+	}
+};
+</script>
+
+<style scoped>
+.page-container {
+	position: relative;
+	width: 100vw;
+	height: 100vh;
+	min-height: 100vh;
+	overflow: hidden;
+	background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.nav-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 999;
+	animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/frontend/utils/api.js b/frontend/utils/api.js
index 4dcc4b5..890c7e9 100644
--- a/frontend/utils/api.js
+++ b/frontend/utils/api.js
@@ -1,6 +1,6 @@
 // API 基础配置
-const baseURL = 'http://101.132.250.62:8080'
-// const baseURL = 'http://192.168.110.60:8080'
+// const baseURL = 'http://101.132.250.62:8080'
+const baseURL = 'http://192.168.110.60:8080'
 // const baseURL = 'http://localhost:8080'
 
 // 是否使用模拟数据（开发调试时设为 true，后端API准备好后改为 false）
diff --git a/frontend/utils/assetImageHelper.js b/frontend/utils/assetImageHelper.js
index 44a9626..3c88c21 100644
--- a/frontend/utils/assetImageHelper.js
+++ b/frontend/utils/assetImageHelper.js
@@ -72,13 +72,13 @@ export function extractOssObjectPath(url) {
  */
 export async function getAssetCoverRealUrl(coverUrl) {
   // 默认图片路径
-  const DEFAULT_IMAGE = '/static/nft/collection.png';
+  const DEFAULT_IMAGE = '';
   
   // 如果是本地静态资源，直接返回
   if (!coverUrl || coverUrl.startsWith('/static/')) {
     return coverUrl || DEFAULT_IMAGE;
   }
-  
+  console.log(coverUrl)
   try {
     // 提取完整OSS对象路径（保留 asset/13/87/filename.jpg 这样的前缀）
     const objectPath = extractOssObjectPath(coverUrl);