refactor(components): 重构积分显示组件布局并添加插槽支持

重构 TotalPointsDisplay 和 PointsCollector 组件结构，添加容器样式和 header/footer 插槽调整组件样式，移除全屏宽度限制并添加圆角和阴影优化 Dashboard 页面布局，将步数显示和拍照按钮整合到组件插槽中

refactor(components): 重构积分显示组件布局并添加插槽支持
重构 TotalPointsDisplay 和 PointsCollector 组件结构，添加容器样式和 header/footer 插槽调整组件样式，移除全屏宽度限制并添加圆角和阴影优化 Dashboard 页面布局，将步数显示和拍照按钮整合到组件插槽中
hookehuyr
Commit 435277025bdac4d665d775ac5df3c8ec3ac8b342 43527702 1 parent addb72ee
Showing 4 changed files with 106 additions and 27 deletions
components.d.ts
src/components/PointsCollector.vue
src/components/TotalPointsDisplay.vue
src/pages/Dashboard/index.vue
--- a/components.d.ts
View file @4352770
+++ b/components.d.ts
View file @4352770
@@ -19,7 +19,6 @@ declare module 'vue' {
     NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
     NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
-    NutLoading: typeof import('@nutui/nutui-taro')['Loading']
     NutPicker: typeof import('@nutui/nutui-taro')['Picker']
     NutPopup: typeof import('@nutui/nutui-taro')['Popup']
     NutRow: typeof import('@nutui/nutui-taro')['Row']
--- a/src/components/PointsCollector.vue
View file @4352770
+++ b/src/components/PointsCollector.vue
View file @4352770
 <template>
+  <view class="points-collector-container">
+    <!-- 头部slot -->
+    <view v-if="$slots.header" class="points-collector-header">
+      <slot name="header"></slot>
+    </view>
+
+    <!-- 积分收集器主体 -->
     <view class="points-collector" :style="{ height: height }">
       <!-- 积分规则提示 -->
       <view class="points-rule-tip" @tap="handleGoToPointsRule">
@@ -38,6 +45,12 @@
         <text>一键收取</text>
       </view> -->
     </view>
+
+    <!-- 底部slot -->
+    <view v-if="$slots.footer" class="points-collector-footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
 </template>
 <script setup>
@@ -435,9 +448,22 @@ const handleGoToPointsRule = () => {
 </script>
 <style lang="less">
+.points-collector-container {
+  background: white;
+  border-radius: 24rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+  margin: 32rpx;
+  overflow: hidden;
+}
+
+.points-collector-header,
+.points-collector-footer {
+  padding: 40rpx;
+}
+
 .points-collector {
   position: relative;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   overflow: hidden;
@@ -447,7 +473,7 @@ const handleGoToPointsRule = () => {
   position: absolute;
   // background-color: white;
   top: 0rpx;
-  right: 0rpx;
+  right: 15rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
--- a/src/components/TotalPointsDisplay.vue
View file @4352770
+++ b/src/components/TotalPointsDisplay.vue
View file @4352770
 <template>
+  <view class="total-points-display-container">
+    <!-- 头部slot -->
+    <view v-if="$slots.header" class="total-points-display-header">
+      <slot name="header"></slot>
+    </view>
+
+    <!-- 积分显示器主体 -->
     <view class="total-points-display" :style="{ height: height }">
       <!-- 积分规则提示 -->
       <view class="points-rule-tip" @tap="handleGoToPointsRule">
@@ -15,6 +22,12 @@
         </view>
       </view>
     </view>
+
+    <!-- 底部slot -->
+    <view v-if="$slots.footer" class="total-points-display-footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
 </template>
 <script setup>
@@ -121,9 +134,22 @@ const handleGoToPointsRule = () => {
 </script>
 <style lang="less">
+.total-points-display-container {
+  background: white;
+  border-radius: 24rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+  margin: 32rpx;
+  overflow: hidden;
+}
+
+.total-points-display-header,
+.total-points-display-footer {
+  padding: 40rpx;
+}
+
 .total-points-display {
   position: relative;
-  width: 100vw;
+  width: 100%;
   overflow: hidden;
   display: flex;
   justify-content: center;
@@ -134,7 +160,7 @@ const handleGoToPointsRule = () => {
   position: absolute;
   // background-color: white;
   top: 0rpx;
-  right: 0rpx;
+  right: 10rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
--- a/src/pages/Dashboard/index.vue
View file @4352770
+++ b/src/pages/Dashboard/index.vue
View file @4352770
 <template>
   <view class="min-h-screen flex flex-col bg-white pb-16" style="background-color: #F9FAFB;">
     <!-- Hero section with family name and background image -->
-    <view class="relative h-48">
+    <view class="relative" style="height: 30vh;">
-      <image :src="familyCover" alt="Family background" class="w-full h-full object-cover" />
+      <image :src="familyCover" mode="aspectFill" alt="Family background" class="w-full h-full object-cover" />
       <view class="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-5">
         <view v-if="familyOwner" class="absolute top-4 right-4 text-white flex items-center" @click="goToProfile">
           <Setting size="24" />
@@ -22,8 +22,19 @@
       @sync-failed="handleSyncFailed"
     >
       <template #default>
-        <!-- Today's steps section -->
+        <!-- 合并的大卡片：今日步数 + 积分收集器 + 拍照留念 -->
-        <view class="px-5 py-6 bg-white rounded-xl shadow-md mx-4 mt-4">
+        <template v-if="!showTotalPointsOnly">
+          <PointsCollector
+            ref="pointsCollectorRef"
+            height="30vh"
+            :total-points="finalTotalPoints"
+            :pending-points="pendingPoints"
+            :family-id="family_id"
+            :is-owner="familyOwner"
+            @collection-complete="handleCollectionComplete"
+          >
+            <!-- 头部：今日步数 -->
+            <template #header>
               <view class="flex justify-between items-center mb-1">
                 <span class="text-gray-500">今日</span>
               </view>
@@ -40,39 +51,56 @@
                   </view>
                 </view>
               </view>
-        </view>
+            </template>
-        <!-- Points circles -->
+            <!-- 底部：拍照留念 -->
-        <view class="flex justify-between px-3 py-3 my-4 bg-white rounded-xl shadow-md mx-4">
+            <template #footer>
-          <template v-if="!showTotalPointsOnly">
+              <view @tap="openCamera" class="w-full bg-blue-500 text-white py-3 rounded-lg flex flex-col items-center justify-center">
-            <PointsCollector
+                <view class="flex items-center justify-center">
-              ref="pointsCollectorRef"
+                  <Photograph size="20" class="mr-2" />
-              height="30vh"
+                  拍照留念，奖励积分
-              :total-points="finalTotalPoints"
+                </view>
-              :pending-points="pendingPoints"
+              </view>
-              :family-id="family_id"
+            </template>
-              :is-owner="familyOwner"
+          </PointsCollector>
-              @collection-complete="handleCollectionComplete"
-            />
         </template>
         <template v-else>
           <TotalPointsDisplay
             :total-points="finalTotalPoints"
             :is-owner="familyOwner"
             height="13vh"
-            />
+          >
-          </template>
+            <!-- 头部：今日步数 -->
+            <template #header>
+              <view class="flex justify-between items-center mb-1">
+                <span class="text-gray-500">今日</span>
               </view>
+              <view class="flex justify-between items-center">
+                <view class="flex items-baseline">
+                  <span class="text-4xl font-bold">
+                    {{ todaySteps?.toLocaleString() }}
+                  </span>
+                  <span class="ml-1 text-gray-500">步</span>
+                </view>
+                <view class="flex gap-2">
+                  <view class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
+                    一键收取
+                  </view>
+                </view>
+              </view>
+            </template>
-        <!-- Photo button -->
+            <!-- 底部：拍照留念 -->
-        <view class="px-5 mb-4">
+            <template #footer>
               <view @tap="openCamera" class="w-full bg-blue-500 text-white py-3 rounded-lg flex flex-col items-center justify-center">
                 <view class="flex items-center justify-center">
                   <Photograph size="20" class="mr-2" />
                   拍照留念，奖励积分
                 </view>
               </view>
-        </view>
+            </template>
+          </TotalPointsDisplay>
+        </template>
         <!-- Family step ranking -->
         <view class="p-5 bg-white rounded-xl shadow-md mx-4">