chenwu/PetCommunity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checkpoint: pre-refactor state before fixing P0/P1 issues

Browse Source
This commit is contained in:
chenwu
2026-06-11 18:40:59 +08:00
parent 2c3c2653fa
commit d55ed60907
41 changed files with 1129 additions and 1051 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
miniprogram/pages/feed/feed.ts
View File

@@ -26,8 +26,7 @@ Page({
refreshing: false,
hasMore: true,
page: 0,
hasUnread: false,
myAvatarGradient: 'linear-gradient(135deg, #ffd6e8, #fff1a6)',
myAvatarGradient: 'linear-gradient(135deg, #d9d2fb, #efedfd)',
myEmoji: '🐶',
},
@@ -49,10 +48,6 @@ Page({
tabBar?.setSelected?.(0)
},
onPullDownRefresh() {
this.onRefresh()
},
async onRefresh() {
this.setData({ refreshing: true, page: 0, hasMore: true })
await this.loadFeed(true)
@@ -121,10 +116,6 @@ Page({
wx.navigateTo({ url: '/pages/search/search' })
},
onNotify() {
wx.navigateTo({ url: '/pages/notifications/notifications' })
},
onMyStory() {
wx.navigateTo({ url: '/pages/post/post?type=story' })
},

103
miniprogram/pages/feed/feed.wxml
View File

@@ -1,68 +1,71 @@
<view class="feed-page">
<!-- 状态栏占位 -->
<view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
<!-- 主导航栏：与胶囊按钮同高，右侧留出胶囊空间 -->
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
<view class="topbar-logo">汪<text class="logo-accent">圈</text></view>
</view>
<!-- 次级菜单栏：位于胶囊按钮下方，全宽可用 -->
<view class="subbar">
<view class="topbar-tabs">
<view
wx:for="{{feedTabs}}"
wx:key="key"
class="feed-tab {{activeTab === item.key ? 'feed-tab-active' : ''}}"
bindtap="onSwitchTab"
data-key="{{item.key}}"
>{{item.label}}</view>
</view>
<view class="topbar-actions">
<view class="topbar-btn" bindtap="onSearch">🔍</view>
<view class="topbar-btn {{hasUnread ? 'has-badge' : ''}}" bindtap="onNotify">🔔</view>
<!-- 固定液态玻璃顶栏:标题 + 搜索图标(紧贴胶囊按钮) -->
<view class="glass-topbar">
<view style="height: {{statusBarHeight}}px;"></view>
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
<view class="topbar-logo">汪<text class="logo-accent">圈</text></view>
<view class="navbar-action" bindtap="onSearch">
<view class="icon-line icon-search-line"></view>
</view>
</view>
</view>
<!-- 故事圈 -->
<scroll-view class="stories-scroll" scroll-x="true" enhanced="true" show-scrollbar="false">
<!-- 我的故事 -->
<view class="story" bindtap="onMyStory">
<view class="story-ring story-ring-me">
<view class="story-inner" style="background: {{myAvatarGradient}}">
<text class="story-emoji">{{myEmoji}}</text>
</view>
</view>
<text class="story-name">我的</text>
</view>
<!-- 关注的宠物故事 -->
<view
wx:for="{{stories}}"
wx:key="_id"
class="story"
bindtap="onStoryTap"
data-id="{{item._id}}"
>
<view class="story-ring {{item.hasNew ? '' : 'story-ring-seen'}}">
<view class="story-inner" style="background: {{item.gradient}}">
<text class="story-emoji">{{item.emoji}}</text>
</view>
</view>
<text class="story-name">{{item.name}}</text>
</view>
</scroll-view>
<!-- 顶栏占位 -->
<view style="height: {{statusBarHeight + navbarHeight}}px; flex-shrink: 0;"></view>
<!-- 信息流 -->
<!-- 信息流:tabs、故事圈与帖子同在滚动区,下拉刷新只在真正顶部触发 -->
<scroll-view
class="feed-scroll"
scroll-y="true"
enhanced="true"
bounces="{{false}}"
show-scrollbar="false"
bindscrolltolower="onLoadMore"
refresher-enabled="true"
bindrefresherrefresh="onRefresh"
refresher-triggered="{{refreshing}}"
>
<!-- 次级菜单栏:信息流 tabs -->
<view class="subbar">
<view class="topbar-tabs">
<view
wx:for="{{feedTabs}}"
wx:key="key"
class="feed-tab {{activeTab === item.key ? 'feed-tab-active' : ''}}"
bindtap="onSwitchTab"
data-key="{{item.key}}"
>{{item.label}}</view>
</view>
</view>
<!-- 故事圈 -->
<scroll-view class="stories-scroll" scroll-x="true" enhanced="true" show-scrollbar="false">
<!-- 我的故事 -->
<view class="story" bindtap="onMyStory">
<view class="story-ring story-ring-me">
<view class="story-inner" style="background: {{myAvatarGradient}}">
<text class="story-emoji">{{myEmoji}}</text>
</view>
</view>
<text class="story-name">我的</text>
</view>
<!-- 关注的宠物故事 -->
<view
wx:for="{{stories}}"
wx:key="_id"
class="story"
bindtap="onStoryTap"
data-id="{{item._id}}"
>
<view class="story-ring {{item.hasNew ? '' : 'story-ring-seen'}}">
<view class="story-inner" style="background: {{item.gradient}}">
<text class="story-emoji">{{item.emoji}}</text>
</view>
</view>
<text class="story-name">{{item.name}}</text>
</view>
</scroll-view>
<!-- 骨架屏 -->
<view wx:if="{{loading && posts.length === 0}}" class="skeleton-wrap">
<view wx:for="{{[1,2,3]}}" wx:key="index" class="skeleton-card">

107
miniprogram/pages/feed/feed.wxss
View File

@@ -1,11 +1,16 @@
/* ── 广场页:Vital 风格 ──
顶部紫色渐变向下淡出融入灰底,白卡信息流叠压其上 */
.feed-page {
min-height: 100vh;
background: #ffffff;
height: 100vh;
background-color: #f1f2f6;
background-image: linear-gradient(180deg, #9181f4 0%, #a99bf8 52%, rgba(241, 242, 246, 0) 100%);
background-repeat: no-repeat;
background-size: 100% 520rpx;
display: flex;
flex-direction: column;
}
/* 主导航栏：与胶囊按钮同高，右侧避让胶囊 */
/* 主导航栏:与胶囊按钮同高,右侧避让胶囊 */
.navbar {
display: flex;
align-items: center;
@@ -14,7 +19,7 @@
box-sizing: border-box;
}
/* 次级菜单栏：胶囊按钮下方，全宽 */
/* 次级菜单栏:胶囊按钮下方,全宽 */
.subbar {
display: flex;
align-items: center;
@@ -23,21 +28,14 @@
flex-shrink: 0;
}
/* logo:玻璃顶栏上的深色标题(颜色由 .glass-topbar 统一控制) */
.topbar-logo {
font-size: 46rpx;
font-weight: 800;
font-weight: 700;
letter-spacing: -0.5rpx;
color: #2b2438;
flex-shrink: 0;
}
.logo-accent {
background: linear-gradient(120deg, #ff2d6e, #ff7a1a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.topbar-tabs {
flex: 1;
display: flex;
@@ -45,54 +43,21 @@
justify-content: center;
}
/* 紫底上的 tab:半透明白文字,激活态为白色胶囊 + 黑字 */
.feed-tab {
font-size: 26rpx;
font-weight: 700;
color: #a59cb5;
font-weight: 600;
color: rgba(255, 255, 255, 0.72);
padding: 8rpx 20rpx;
border-radius: 999rpx;
transition: all 0.2s;
}
.feed-tab-active {
color: #ff2d6e;
background: rgba(255, 45, 110, 0.12);
font-weight: 900;
}
.topbar-actions {
display: flex;
gap: 12rpx;
flex-shrink: 0;
}
.topbar-btn {
width: 64rpx;
height: 64rpx;
border-radius: 26rpx;
background: var(--glass);
backdrop-filter: blur(28rpx) saturate(170%);
-webkit-backdrop-filter: blur(28rpx) saturate(170%);
border: 1rpx solid var(--glass-edge);
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #6e6480;
position: relative;
}
.has-badge::after {
content: '';
position: absolute;
top: 8rpx;
right: 8rpx;
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background: #ff2d6e;
border: 2rpx solid #fff;
color: #1b1b20;
background: #ffffff;
font-weight: 700;
box-shadow: 0 8rpx 20rpx rgba(27, 27, 32, 0.10);
}
/* 故事圈 */
@@ -111,22 +76,24 @@
white-space: normal;
}
/* 故事环:未读 = 紫色渐变环(单一主色家族),已读 = 浅灰 */
.story-ring {
width: 116rpx;
height: 116rpx;
border-radius: 40rpx;
padding: 6rpx;
box-sizing: border-box;
background: conic-gradient(from 130deg, #ff2d6e, #ff7a1a, #ffd400, #00d9a0, #1f9bff, #8b5cf6, #ff2d6e);
box-shadow: 0 18rpx 36rpx rgba(120, 70, 150, 0.20);
background: linear-gradient(135deg, #7563e0, #a99bf8);
box-shadow: 0 16rpx 36rpx rgba(27, 27, 32, 0.10);
}
.story-ring-seen {
background: rgba(165, 156, 181, 0.35);
background: rgba(27, 27, 32, 0.10);
}
/* 我的故事:强调黑(与发布 CTA 呼应) */
.story-ring-me {
background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
background: #2b2b30;
}
.story-inner {
@@ -146,8 +113,8 @@
.story-name {
font-size: 21rpx;
font-weight: 700;
color: #6e6480;
font-weight: 600;
color: #6e7280;
}
/* 信息流 */
@@ -163,11 +130,9 @@
.skeleton-card {
margin: 0 28rpx 32rpx;
background: var(--glass);
backdrop-filter: blur(28rpx) saturate(170%);
-webkit-backdrop-filter: blur(28rpx) saturate(170%);
border: 1rpx solid var(--glass-edge);
border-radius: 56rpx;
background: #ffffff;
border-radius: 48rpx;
box-shadow: 0 16rpx 48rpx rgba(27, 27, 32, 0.06);
overflow: hidden;
padding-bottom: 20rpx;
}
@@ -209,7 +174,7 @@
.w40 { width: 40%; }
.skeleton {
background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%);
background: linear-gradient(90deg, #ebecf1 25%, #e2e4ea 50%, #ebecf1 75%);
background-size: 200% 100%;
animation: shine 1.4s infinite;
}
@@ -231,7 +196,7 @@
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background: #ff2d6e;
background: var(--purple);
animation: bounce 1.2s infinite;
}
@@ -247,7 +212,7 @@
.end-tip {
text-align: center;
font-size: 24rpx;
color: #a59cb5;
color: var(--text-tertiary);
padding: 32rpx;
}
@@ -267,13 +232,13 @@
.empty-title {
font-size: 34rpx;
font-weight: 900;
color: #2b2438;
font-weight: 700;
color: var(--text-primary);
}
.empty-desc {
font-size: 26rpx;
color: #a59cb5;
color: var(--text-tertiary);
text-align: center;
line-height: 1.6;
}
@@ -282,5 +247,5 @@
margin-top: 24rpx;
padding: 22rpx 60rpx;
font-size: 28rpx;
font-weight: 800;
font-weight: 600;
}