feat: 修改铸造页面的样式

frontend/pages/castlove/craft-select.vue

@@ -1,18 +1,41 @@
 <template>
   <view class="page">
-        <image class="bg-wrapper" src="/static/castlove/beijingban.png" mode="aspectFill"></image>
+    <image
+      class="bg-wrapper"
+      src="/static/castlove/beijingban.png"
+      mode="aspectFill"
+    ></image>
     <view class="main-container">
-            <view class="cards-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+      <view
+        class="cards-container"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+      >
         <view v-if="currentCardList.length">
-                    <view v-for="(card, index) in currentCardList" :key="index" class="card-item"
-                        :class="{ 'no-transition': disableTransition }" :style="getCardStyle(index)">
-                        <view class="card-frame"
-                            :class="{ 'no-border': card.comingSoon, 'card-frame--tappable': !card.comingSoon }"
-                            @tap.stop="onCardFrameTap(index)">
+          <view
+            v-for="(card, index) in currentCardList"
+            :key="index"
+            class="card-item"
+            :class="{ 'no-transition': disableTransition }"
+            :style="getCardStyle(index)"
+          >
+            <view
+              class="card-frame"
+              :class="{
+                'no-border': card.comingSoon,
+                'card-frame--tappable': !card.comingSoon,
+              }"
+              @tap.stop="onCardFrameTap(index)"
+            >
               <image class="card-image" :src="card.image" mode="aspectFill" />
-                            <image v-if="card.comingSoon" class="coming-soon-badge"
-                                src="/static/castlove/jinqingqidai.png" />
+              <image
+                v-if="card.comingSoon"
+                class="coming-soon-badge"
+                src="/static/castlove/jinqingqidai.png"
+              />
             </view>
+            <text class="card-name">{{ card.name }}</text>
           </view>
         </view>
         <!-- 空态:当前分类暂无卡片时显示 -->
@@ -25,12 +48,24 @@
 
       <view v-if="showMenu" class="text-panel">
         <view class="arrow-btn arrow-up" @click="scrollUp">
-                    <image class="arrow-icon" src="/static/castlove/jiantou.png" style="transform:rotate(180deg)" />
+          <image
+            class="arrow-icon"
+            src="/static/castlove/jiantou.png"
+            style="transform: rotate(180deg)"
+          />
         </view>
         <view class="text-list">
-                    <view v-for="(category, index) in categoryList" :key="index" class="text-item"
-                        :class="{ active: selectedCategoryIndex === index, 'font-large': index === 1, 'font-mid': index === 0 || index === 2 }"
-                        @click="selectCategory(index)">
+          <view
+            v-for="(category, index) in categoryList"
+            :key="index"
+            class="text-item"
+            :class="{
+              active: selectedCategoryIndex === index,
+              'font-large': index === 1,
+              'font-mid': index === 0 || index === 2,
+            }"
+            @click="selectCategory(index)"
+          >
             <text>{{ category.name }}</text>
           </view>
         </view>
@@ -50,7 +85,7 @@ export default {
     // 初始分类:star_card | badge | poster
     type: {
       type: String,
-            default: '',
+      default: "",
     },
   },
   watch: {
@@ -59,28 +94,28 @@ export default {
     type: {
       immediate: true,
       handler(val) {
-                this.applyType(val)
+        this.applyType(val);
       },
     },
   },
   created() {
     // 组件创建时立即应用一次 type,避免 mall.vue 在 onLoad 才设置 initialType
     // 导致首次渲染拿到默认 "" 而 watch 错过的情况
-        this.applyType(this.type)
+    this.applyType(this.type);
   },
   onLoad(options) {
     // 作为页面被直接打开时,隐藏右侧分类菜单栏(根据用户需求)
-        this.showMenu = false
+    this.showMenu = false;
     // 接收从主Tab(square.vue / CastloveContent.vue)传入的 type,自动定位到对应分类
     // type 取值:star_card | badge | poster
     if (options && options.type) {
-            this.applyType(options.type)
+      this.applyType(options.type);
     }
   },
   onShow() {
     try {
-            uni.hideToast()
-            uni.hideLoading()
+      uni.hideToast();
+      uni.hideLoading();
     } catch (e) {}
   },
   data() {
@@ -97,30 +132,113 @@ export default {
         badge: 1,
         poster: 2,
       },
-            categoryList: [{ name: '星卡' }, { name: '吧唧' }, { name: '海报' }],
+      categoryList: [{ name: "星卡" }, { name: "吧唧" }, { name: "海报" }],
       cardListMap: {
-                '星卡': [
-                    { name: '光栅卡', image: '/static/castlove/guangshanka.png', comingSoon: false },
-                    { name: '拍立得', image: '/static/castlove/pailide.png', comingSoon: false },
-                    { name: '开发中', image: '/static/castlove/daikaifa.png', comingSoon: true },
-                    { name: '镭射卡', image: '/static/castlove/leisheka.png', comingSoon: false },
-                    { name: '撕拉片', image: '/static/castlove/silapian.png', comingSoon: false },
+        星卡: [
+          {
+            name: "光栅卡",
+            image: "/static/castlove/guangshanka.png",
+            comingSoon: false,
+          },
+          {
+            name: "镭射卡",
+            image: "/static/castlove/leisheka.png",
+            comingSoon: false,
+          },
+
+          {
+            name: "拍立得",
+            image: "/static/castlove/pailide.png",
+            comingSoon: false,
+          },
+          {
+            name: "开发中",
+            image: "/static/castlove/daikaifa.png",
+            comingSoon: true,
+          },
+          {
+            name: "撕拉片",
+            image: "/static/castlove/silapian.png",
+            comingSoon: false,
+          },
+        ],
+        吧唧: [
+          {
+            name: "超复古",
+            image: "/static/castlove/fugu.png",
+            comingSoon: false,
+          },
+          {
+            name: "卡通刺绣",
+            image: "/static/castlove/katongchixiu.png",
+            comingSoon: false,
+          },
+          {
+            name: "云母片",
+            image: "/static/castlove/yunmupian.png",
+            comingSoon: false,
+          },
+          {
+            name: "开发中",
+            image: "/static/castlove/daikaifa.png",
+            comingSoon: true,
+          },
+        ],
+        海报: [
+          {
+            name: "拼豆",
+            image: "/static/castlove/pindou.png",
+            comingSoon: false,
+          },
+          {
+            name: "简繁插画",
+            image: "/static/castlove/jinfanchahua.png",
+            comingSoon: false,
+          },
+          {
+            name: "街头拼贴",
+            image: "/static/castlove/jietoupintie.png",
+            comingSoon: false,
+          },
+          {
+            name: "开发中",
+            image: "/static/castlove/daikaifa.png",
+            comingSoon: true,
+          },
         ],
-                '吧唧': [],
-                '海报': []
       },
       cardList: [
-                { name: '光栅卡', image: '/static/castlove/guangshanka.png', comingSoon: false },
-                { name: '拍立得', image: '/static/castlove/pailide.png', comingSoon: false },
-                { name: '镭射卡', image: '/static/castlove/leisheka.png', comingSoon: false },
-                { name: '撕拉片', image: '/static/castlove/silapian.png', comingSoon: false },
-                { name: '开发中', image: '/static/castlove/daikaifa.png', comingSoon: true }
+        {
+          name: "光栅卡",
+          image: "/static/castlove/guangshanka.png",
+          comingSoon: false,
+        },
+        {
+          name: "拍立得",
+          image: "/static/castlove/pailide.png",
+          comingSoon: false,
+        },
+        {
+          name: "镭射卡",
+          image: "/static/castlove/leisheka.png",
+          comingSoon: false,
+        },
+        {
+          name: "撕拉片",
+          image: "/static/castlove/silapian.png",
+          comingSoon: false,
+        },
+        {
+          name: "开发中",
+          image: "/static/castlove/daikaifa.png",
+          comingSoon: true,
+        },
       ],
       cardRoutes: {
-                '光栅卡': '/pages/castlove/lenticular/lenticular-create',
-                '拍立得': '/pages/castlove/create',
-                '镭射卡': '/pages/castlove/create',
-                '撕拉片': '/pages/castlove/create',
+        光栅卡: "/pages/castlove/lenticular/lenticular-create",
+        拍立得: "/pages/castlove/create",
+        镭射卡: "/pages/castlove/create",
+        撕拉片: "/pages/castlove/create",
       },
 
       totalCard: 5,
@@ -130,149 +248,209 @@ export default {
       isDragging: false,
       disableTransition: false,
       SWIPE_STEP: 100,
-        }
+    };
   },
   computed: {
     currentCategoryName() {
-            return this.categoryList[this.selectedCategoryIndex]?.name || ''
+      return this.categoryList[this.selectedCategoryIndex]?.name || "";
     },
     currentCardList() {
-            const name = this.categoryList[this.selectedCategoryIndex]?.name
-            return this.cardListMap[name] || this.cardList
-        }
+      const name = this.categoryList[this.selectedCategoryIndex]?.name;
+      return this.cardListMap[name] || this.cardList;
+    },
+    // 当前分类下的小类型卡片数量
+    // (与 cardListMap 中该类型数组的 length 一一对应,后续新增类型无需修改此处)
+    currentCardCount() {
+      return this.currentCardList.length;
+    },
+    // 扇形中心索引(取整)
+    // 奇数 N:正中;偶数 N:稍偏下的中间位
+    currentCenterIndex() {
+      return Math.floor(this.currentCardCount / 2);
+    },
   },
   methods: {
     // 根据 type 字符串定位到对应分类索引
     applyType(type) {
-            if (!type) return
-            const idx = this.categoryTypeMap[type]
-            if (typeof idx === 'number') {
-                this.selectedCategoryIndex = idx
+      if (!type) return;
+      const idx = this.categoryTypeMap[type];
+      if (typeof idx === "number") {
+        this.selectedCategoryIndex = idx;
       }
     },
     selectCategory(index) {
-            this.selectedCategoryIndex = index
-            this.selectedIndex = 1
-            this.dragOffset = 0
-            this.isDragging = false
+      this.selectedCategoryIndex = index;
+      // 切换分类后,根据新分类的卡片数量重置中心索引
+      // (直接读 cardListMap 避免依赖 computed 在同 tick 内的更新)
+      const newCount =
+        this.cardListMap[this.categoryList[index]?.name]?.length || 0;
+      this.selectedIndex = Math.floor(newCount / 2);
+      this.dragOffset = 0;
+      this.isDragging = false;
     },
     onTouchStart(e) {
-            this.touchStartY = e.touches[0].clientY
-            this.isDragging = true
-            this.disableTransition = true
+      this.touchStartY = e.touches[0].clientY;
+      this.isDragging = true;
+      this.disableTransition = true;
     },
     onTouchMove(e) {
-            if (!this.isDragging) return
-            const moveY = e.touches[0].clientY
-            this.dragOffset = moveY - this.touchStartY
+      if (!this.isDragging) return;
+      const moveY = e.touches[0].clientY;
+      this.dragOffset = moveY - this.touchStartY;
     },
     onTouchEnd() {
-            if (!this.isDragging) return
-            this.isDragging = false
-            this.disableTransition = false
+      if (!this.isDragging) return;
+      this.isDragging = false;
+      this.disableTransition = false;
 
-            const moveCount = Math.round(-this.dragOffset / this.SWIPE_STEP)
-            let newIdx = this.selectedIndex + moveCount
-            newIdx = ((newIdx % 5) + 5) % 5
-            this.selectedIndex = newIdx
-            this.dragOffset = 0
+      const N = this.currentCardCount;
+      if (N === 0) return;
+
+      const moveCount = Math.round(-this.dragOffset / this.SWIPE_STEP);
+      let newIdx = this.selectedIndex + moveCount;
+      newIdx = ((newIdx % N) + N) % N;
+      this.selectedIndex = newIdx;
+      this.dragOffset = 0;
     },
 
     // ====================== 核心修复：z-index + 层级 + 循环 ======================
-        getCardStyle(index) {
-            const positions = [
+    // 返回当前分类对应的扇形位置
+    // 规则:基础 5 个位置保持原样不动
+    //  - N <= 5:取前 N 个
+    //  - N  > 5:基础 5 个 + (N-5) 个在末尾沿用底部样式追加
+    // 这样新增/删减小类型卡片时,既有的位置不会被打乱重组
+    getStackPositions(count) {
+      if (count <= 0) return [];
+      // 基础 5 张卡片的扇形布局(保持原状)
+      const basePositions = [
         { left: 288, top: 64, rotate: 25, scale: 0.75 },
         { left: 120, top: 288, rotate: 12, scale: 0.95 },
         { left: 60, top: 580, rotate: 0, scale: 1 },
         { left: 120, top: 888, rotate: -12, scale: 0.95 },
         { left: 224, top: 1096, rotate: -25, scale: 0.75 },
-            ]
+      ];
+      if (count <= basePositions.length) {
+        // 卡片少于 5 张:直接取前 N 个,不动基础数组
+        return basePositions.slice(0, count);
+      }
+      // 卡片多于 5 张:在末尾追加,沿用第 5 张的样式继续向下延伸
+      const positions = [...basePositions];
+      const tail = basePositions[basePositions.length - 1];
+      for (let i = basePositions.length; i < count; i++) {
+        const extra = i - basePositions.length + 1;
+        positions.push({
+          left: tail.left,
+          top: tail.top + extra * 208, // 沿用 888→1096 的间距
+          rotate: tail.rotate - extra * 12, // 沿用 -12°→-25° 的旋转步长
+          scale: tail.scale,
+        });
+      }
+      return positions;
+    },
 
-            const progress = -this.dragOffset / this.SWIPE_STEP
-            const centerIdx = this.selectedIndex + progress
+    getCardStyle(index) {
+      const N = this.currentCardCount;
+      if (N === 0) return {};
 
-            // 循环最短差值（关键）
-            let diff = index - centerIdx
-            if (diff > 2) diff -= 5
-            if (diff < -2) diff += 5
-            const cardPos = diff + 2
+      const positions = this.getStackPositions(N);
+      const centerInt = this.currentCenterIndex; // 扇形中心索引(N=5→2;N=4→2;N=6→3)
+      const centerPos = positions[centerInt] ?? positions[0];
 
-            // 插值计算
-            let pos
-            if (Number.isInteger(cardPos)) {
-                pos = positions[cardPos] ?? positions[2]
+      const progress = -this.dragOffset / this.SWIPE_STEP;
+      const centerIdx = this.selectedIndex + progress;
+
+      // 循环最短差值(关键):以 N/2 作为环绕阈值,适配任意 N
+      let diff = index - centerIdx;
+      const half = N / 2;
+      if (diff > half) diff -= N;
+      if (diff < -half) diff += N;
+      const cardPos = diff + centerInt;
+
+      // 插值计算(支持首尾环绕)
+      let pos;
+      const lowerRaw = Math.floor(cardPos);
+      const t = cardPos - lowerRaw;
+      const lowerIdx = ((lowerRaw % N) + N) % N;
+      const upperIdx = (lowerIdx + 1) % N;
+
+      if (t === 0 && lowerIdx >= 0 && lowerIdx < N) {
+        pos = positions[lowerIdx] ?? centerPos;
       } else {
-                const prev = Math.floor(cardPos)
-                const next = (prev + 1) % 5
-                const t = cardPos - prev
-                const p = positions[prev] ?? positions[2]
-                const n = positions[next] ?? positions[2]
+        const p = positions[lowerIdx] ?? centerPos;
+        const n = positions[upperIdx] ?? centerPos;
         pos = {
           left: p.left + (n.left - p.left) * t,
           top: p.top + (n.top - p.top) * t,
           rotate: p.rotate + (n.rotate - p.rotate) * t,
           scale: p.scale + (n.scale - p.scale) * t,
-                }
+        };
       }
 
       // ====================== Z‑INDEX 终极修复 ======================
-            const distance = Math.abs(cardPos - 2)
-            const zIndex = Math.round(100 - distance * 30) // 越靠近中间层级越高
-            const isCenter = distance < 0.02
+      const distance = Math.abs(cardPos - centerInt);
+      const zIndex = Math.round(100 - distance * 30); // 越靠近中间层级越高
+      const isCenter = distance < 0.02;
 
       if (isCenter) {
         return {
-                    left: pos.left + 'rpx',
-                    top: pos.top + 'rpx',
+          left: pos.left + "rpx",
+          top: pos.top + "rpx",
           transform: `scale(${pos.scale * 1.15}) rotate(${pos.rotate}deg)`,
           zIndex: 999, // 中心永远最高
-                }
+        };
       }
 
       return {
-                left: pos.left + 'rpx',
-                top: pos.top + 'rpx',
+        left: pos.left + "rpx",
+        top: pos.top + "rpx",
         transform: `scale(${pos.scale}) rotate(${pos.rotate}deg)`,
         zIndex,
-            }
+      };
     },
 
     getCardStackPosition(index) {
-            const progress = -this.dragOffset / this.SWIPE_STEP
-            const centerIdx = this.selectedIndex + progress
-            let diff = index - centerIdx
-            if (diff > 2) diff -= 5
-            if (diff < -2) diff += 5
-            return diff + 2
+      const N = this.currentCardCount;
+      if (N === 0) return 0;
+      const centerInt = this.currentCenterIndex;
+      const centerIdx = this.selectedIndex + -this.dragOffset / this.SWIPE_STEP;
+      let diff = index - centerIdx;
+      const half = N / 2;
+      if (diff > half) diff -= N;
+      if (diff < -half) diff += N;
+      return diff + centerInt;
     },
 
     onCardFrameTap(index) {
-            const card = this.currentCardList[index]
-            if (!card) return
-            const pos = this.getCardStackPosition(index)
-            if (Math.abs(pos - 2) < 0.2) {
-                if (card.name === '光栅卡') {
+      const card = this.currentCardList[index];
+      if (!card) return;
+      const pos = this.getCardStackPosition(index);
+      if (Math.abs(pos - this.currentCenterIndex) < 0.2) {
+        if (card.name === "光栅卡") {
           uni.navigateTo({
-                        url: this.cardRoutes['光栅卡'] + '?name=' + encodeURIComponent(card.name),
-                    })
+            url:
+              this.cardRoutes["光栅卡"] +
+              "?name=" +
+              encodeURIComponent(card.name),
+          });
         } else {
-                    uni.showToast({ title: '激情开发中', icon: 'none' })
+          uni.showToast({ title: "激情开发中", icon: "none" });
         }
-                return
+        return;
       }
-            this.selectedIndex = index
+      this.selectedIndex = index;
     },
 
     scrollUp() {
-            if (this.selectedCategoryIndex > 0) this.selectCategory(this.selectedCategoryIndex - 1)
+      if (this.selectedCategoryIndex > 0)
+        this.selectCategory(this.selectedCategoryIndex - 1);
     },
     scrollDown() {
       if (this.selectedCategoryIndex < this.categoryList.length - 1) {
-                this.selectCategory(this.selectedCategoryIndex + 1)
+        this.selectCategory(this.selectedCategoryIndex + 1);
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -308,8 +486,8 @@ export default {
 
 .card-item {
   position: absolute;
-    width: 344rpx;
-    height: 344rpx;
+  width: 312rpx;
+  height: 312rpx;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, z-index;
 }
@@ -322,9 +500,9 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-    border-radius: 20rpx;
-    padding: 10rpx;
-    background-image: url('/static/square/cangpinkuang1.png');
+  border-radius: 24rpx;
+  padding: 24rpx;
+  background-image: url("/static/square/cangpinkuang1.png");
   background-size: cover;
 }
 
@@ -335,7 +513,7 @@ export default {
 .card-image {
   width: 100%;
   height: 100%;
-    border-radius: 14rpx;
+  border-radius: 24rpx;
   object-fit: cover;
 }
 
@@ -348,6 +526,18 @@ export default {
   height: 160rpx;
 }
 
+.card-name {
+  position: absolute;
+  bottom: 0;
+  left: 32rpx;
+  color: #fffabd;
+
+  text-shadow: -1px 1px 4px #ce0909d6;
+
+  font-size: 32rpx;
+  font-weight: 400;
+}
+
 .text-panel {
   position: absolute;
   right: 30rpx;
@@ -359,7 +549,7 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-    background: url('/static/castlove/xiahualan.png') no-repeat center;
+  background: url("/static/castlove/xiahualan.png") no-repeat center;
   background-size: 130%;
   border-radius: 20rpx;
 }
@@ -396,7 +586,7 @@ export default {
 
 .text-item.active {
   font-weight: bold;
-    background: url('/static/nft/dingbutubiao_liang.png') no-repeat center;
+  background: url("/static/nft/dingbutubiao_liang.png") no-repeat center;
   background-size: 100% 100%;
 }
 

frontend/pages/dashboard/dashboard.vue

@@ -8,6 +8,10 @@
     :show-scrollbar="false"
   >
     <view class="dashboard-container">
+      <view class="nav-back" @tap="goBack">
+        <text class="nav-back-icon">←</text>
+      </view>
+
       <DashboardHeader
         :active-tab="activeTab"
         @update:active-tab="handleTabChange"
@@ -86,6 +90,18 @@ const { loading, error, data, refresh } = useDashboardData({
   starId: starId.value,
 });
 
+// 返回上一页
+const goBack = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack();
+  } else {
+    uni.reLaunch({
+      url: "/pages/square/square",
+    });
+  }
+};
+
 // Tab 切换：30 分钟内复用缓存；切回水晶 Tab 时 cache-aware 刷新
 function handleTabChange(tab) {
   activeTab.value = tab;
@@ -128,6 +144,26 @@ onShow(() => {
   min-height: 100vh;
 }
 
+.nav-back {
+  position: fixed;
+  top: 96rpx;
+  left: 32rpx;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background: rgba(255,255,255,0.5);
+	border-radius: 50%; */
+  z-index: 4;
+}
+
+.nav-back-icon {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
 .dashboard-box {
   min-height: 100vh;
   position: absolute;