wangpeng/JianSu-Naming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善见素起名小程序功能

Browse Source 
- 添加收藏锦囊功能，支持查看和删除收藏
- 实现积分系统，每日赠送5次灵感次数
- 添加静心阅读功能，阅读15秒可获得额外次数
- 实现灵感广场，展示用户分享的名字
- 添加字源溯源组件，长按汉字查看详情
- 优化空状态和结语卡片样式统一
- 添加音频控制（静音/风铃/雨落/古琴/白噪音/森林/溪流）
- 优化名字生成逻辑，确保每次返回5个不重复名字
- 修复卡片翻转样式问题
- 移除首页动态提醒气泡
This commit is contained in:
王鹏
2026-04-18 16:56:31 +08:00
parent be1f5722ab
commit 2c47fb8f65
59 changed files with 4643 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
miniprogram/pages/square/square.js Normal file
View File

@@ -0,0 +1,184 @@
// 灵感广场页面
Page({
data: {
posts: [],
leftPosts: [],
rightPosts: [],
page: 0,
size: 20,
loading: false,
hasMore: true,
currentTag: '',
sortType: 'latest',
showDetail: false,
selectedPost: {}
},
onLoad() {
this.loadPosts();
},
onShow() {
// 刷新列表
if (this.data.posts.length === 0) {
this.loadPosts();
}
},
// 加载帖子列表
loadPosts(reset = false) {
if (this.data.loading) return;
if (reset) {
this.setData({
page: 0,
posts: [],
leftPosts: [],
rightPosts: [],
hasMore: true
});
}
this.setData({ loading: true });
const apiBaseUrl = getApp().globalData.apiBaseUrl;
const { page, size, currentTag, sortType } = this.data;
let url = `${apiBaseUrl}/api/square/posts?page=${page}&size=${size}&sort=${sortType}`;
if (currentTag) {
url += `&tag=${encodeURIComponent(currentTag)}`;
}
wx.request({
url,
success: (res) => {
if (res.data && res.data.success) {
const newPosts = res.data.data || [];
const allPosts = reset ? newPosts : [...this.data.posts, ...newPosts];
// 分配到左右两列
const leftPosts = [];
const rightPosts = [];
allPosts.forEach((post, index) => {
if (index % 2 === 0) {
leftPosts.push(post);
} else {
rightPosts.push(post);
}
});
this.setData({
posts: allPosts,
leftPosts,
rightPosts,
hasMore: res.data.hasMore,
page: page + 1,
loading: false
});
} else {
this.setData({ loading: false });
}
},
fail: () => {
this.setData({ loading: false });
wx.showToast({ title: '加载失败', icon: 'none' });
}
});
},
// 点击标签
onTagTap(e) {
const tag = e.currentTarget.dataset.tag;
this.setData({ currentTag: tag });
this.loadPosts(true);
},
// 切换排序
onSortTap(e) {
const type = e.currentTarget.dataset.type;
this.setData({ sortType: type });
this.loadPosts(true);
},
// 点击帖子
onPostTap(e) {
const post = e.currentTarget.dataset.post;
this.setData({
selectedPost: post,
showDetail: true
});
},
// 关闭详情
onCloseDetail() {
this.setData({ showDetail: false });
},
// 阻止冒泡
onDetailTap() {
// 什么都不做
},
// 点赞
onLikeTap() {
const { selectedPost } = this.data;
const apiBaseUrl = getApp().globalData.apiBaseUrl;
wx.request({
url: `${apiBaseUrl}/api/square/posts/${selectedPost.id}/like`,
method: 'POST',
success: (res) => {
if (res.data && res.data.success) {
// 更新本地数据
const updatedPost = { ...selectedPost, likeCount: (selectedPost.likeCount || 0) + 1 };
this.setData({ selectedPost: updatedPost });
// 更新列表中的数据
const posts = this.data.posts.map(p =>
p.id === selectedPost.id ? updatedPost : p
);
this.setData({ posts });
wx.showToast({ title: '已共鸣', icon: 'none' });
}
}
});
},
// 同款跳转（卡片上）
onCopyTap(e) {
const { keyword, mode } = e.currentTarget.dataset;
this.navigateToHome(keyword, mode);
},
// 同款跳转（详情中）
onDetailCopyTap() {
const { keyword, mode } = this.data.selectedPost;
this.navigateToHome(keyword, mode);
},
// 跳转到首页
navigateToHome(keyword, mode) {
if (!keyword) {
wx.showToast({ title: '无法获取关键词', icon: 'none' });
return;
}
wx.reLaunch({
url: `/pages/home/home?keyword=${encodeURIComponent(keyword)}&mode=${mode || 'poetic'}`
});
},
// 下拉刷新
onPullDownRefresh() {
this.loadPosts(true);
wx.stopPullDownRefresh();
},
// 上拉加载更多
onReachBottom() {
if (this.data.hasMore && !this.data.loading) {
this.loadPosts();
}
}
});

8
miniprogram/pages/square/square.json Normal file
View File

@@ -0,0 +1,8 @@
{
"navigationBarTitleText": "灵感广场",
"navigationBarBackgroundColor": "#F5F5F0",
"navigationBarTextStyle": "black",
"backgroundColor": "#F5F5F0",
"enablePullDownRefresh": true,
"onReachBottomDistance": 100
}

141
miniprogram/pages/square/square.wxml Normal file
View File

@@ -0,0 +1,141 @@
<!-- 灵感广场页面 - 瀑布流展示 -->
<view class="square-container">
<!-- 顶部导航 -->
<view class="header">
<view class="title">灵感广场</view>
<view class="subtitle">发现诗意，共鸣美好</view>
</view>
<!-- 筛选标签 -->
<scroll-view class="tag-bar" scroll-x>
<view class="tag-list">
<view class="tag {{currentTag === '' ? 'active' : ''}}" bindtap="onTagTap" data-tag="">全部</view>
<view class="tag {{currentTag === '清冷' ? 'active' : ''}}" bindtap="onTagTap" data-tag="清冷">清冷</view>
<view class="tag {{currentTag === '温柔' ? 'active' : ''}}" bindtap="onTagTap" data-tag="温柔">温柔</view>
<view class="tag {{currentTag === '古雅' ? 'active' : ''}}" bindtap="onTagTap" data-tag="古雅">古雅</view>
<view class="tag {{currentTag === '诗意' ? 'active' : ''}}" bindtap="onTagTap" data-tag="诗意">诗意</view>
<view class="tag {{currentTag === '自然' ? 'active' : ''}}" bindtap="onTagTap" data-tag="自然">自然</view>
</view>
</scroll-view>
<!-- 排序切换 -->
<view class="sort-bar">
<view class="sort-item {{sortType === 'latest' ? 'active' : ''}}" bindtap="onSortTap" data-type="latest">最新</view>
<view class="sort-item {{sortType === 'hot' ? 'active' : ''}}" bindtap="onSortTap" data-type="hot">热门</view>
</view>
<!-- 瀑布流列表 -->
<view class="waterfall">
<view class="column left">
<view class="post-card"
wx:for="{{leftPosts}}"
wx:key="id"
bindtap="onPostTap"
data-post="{{item}}">
<image class="post-image"
src="{{item.imageUrl}}"
mode="widthFix"
lazy-load
show-menu-by-longpress
wx:if="{{item.imageUrl}}"/>
<view class="post-image-placeholder" wx:if="{{!item.imageUrl}}">
<text class="placeholder-text">{{item.name}}</text>
</view>
<view class="post-info">
<view class="post-name">{{item.name}}</view>
<view class="post-origin" wx:if="{{item.origin}}">{{item.origin}}</view>
<view class="post-footer">
<view class="post-keyword" wx:if="{{item.keyword}}">#{{item.keyword}}</view>
<view class="post-likes">
<text class="like-icon">♡</text>
<text class="like-count">{{item.likeCount || 0}}</text>
</view>
</view>
</view>
<!-- 同款跳转按钮 -->
<view class="copy-btn"
catchtap="onCopyTap"
data-keyword="{{item.keyword}}"
data-mode="{{item.mode}}">
<text>同款意境</text>
</view>
</view>
</view>
<view class="column right">
<view class="post-card"
wx:for="{{rightPosts}}"
wx:key="id"
bindtap="onPostTap"
data-post="{{item}}">
<image class="post-image"
src="{{item.imageUrl}}"
mode="widthFix"
lazy-load
show-menu-by-longpress
wx:if="{{item.imageUrl}}"/>
<view class="post-image-placeholder" wx:if="{{!item.imageUrl}}">
<text class="placeholder-text">{{item.name}}</text>
</view>
<view class="post-info">
<view class="post-name">{{item.name}}</view>
<view class="post-origin" wx:if="{{item.origin}}">{{item.origin}}</view>
<view class="post-footer">
<view class="post-keyword" wx:if="{{item.keyword}}">#{{item.keyword}}</view>
<view class="post-likes">
<text class="like-icon">♡</text>
<text class="like-count">{{item.likeCount || 0}}</text>
</view>
</view>
</view>
<!-- 同款跳转按钮 -->
<view class="copy-btn"
catchtap="onCopyTap"
data-keyword="{{item.keyword}}"
data-mode="{{item.mode}}">
<text>同款意境</text>
</view>
</view>
</view>
</view>
<!-- 加载更多 -->
<view class="load-more" wx:if="{{loading}}">
<view class="loading-dots">
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
</view>
</view>
<view class="no-more" wx:if="{{!hasMore && posts.length > 0}}">
<text>没有更多了</text>
</view>
<view class="empty" wx:if="{{!loading && posts.length === 0}}">
<text class="empty-icon">✿</text>
<text class="empty-text">暂无灵感，快去生成并分享吧</text>
</view>
</view>
<!-- 帖子详情弹窗 -->
<view class="detail-mask {{showDetail ? 'show' : ''}}" bindtap="onCloseDetail">
<view class="detail-container {{showDetail ? 'show' : ''}}" catchtap="onDetailTap">
<image class="detail-image" src="{{selectedPost.imageUrl}}" mode="widthFix"/>
<view class="detail-info">
<view class="detail-name">{{selectedPost.name}}</view>
<view class="detail-origin" wx:if="{{selectedPost.origin}}">{{selectedPost.origin}}</view>
<view class="detail-desc" wx:if="{{selectedPost.description}}">{{selectedPost.description}}</view>
<view class="detail-actions">
<view class="action-btn like" bindtap="onLikeTap">
<text class="action-icon">♡</text>
<text class="action-text">共鸣 {{selectedPost.likeCount || 0}}</text>
</view>
<view class="action-btn copy" bindtap="onDetailCopyTap">
<text class="action-text">同款意境</text>
</view>
</view>
</view>
<view class="detail-close" bindtap="onCloseDetail">×</view>
</view>
</view>

376
miniprogram/pages/square/square.wxss Normal file
View File

@@ -0,0 +1,376 @@
/* 灵感广场页面 - 瀑布流风格 */
.square-container {
min-height: 100vh;
background: #F5F5F0;
padding-bottom: 40rpx;
}
/* 顶部导航 */
.header {
padding: 40rpx 30rpx 20rpx;
text-align: center;
}
.title {
font-size: 40rpx;
font-weight: 600;
color: #2D2D2D;
letter-spacing: 8rpx;
}
.subtitle {
font-size: 24rpx;
color: #999;
margin-top: 8rpx;
letter-spacing: 4rpx;
}
/* 标签栏 */
.tag-bar {
padding: 20rpx 0;
white-space: nowrap;
}
.tag-list {
padding: 0 20rpx;
}
.tag {
display: inline-block;
padding: 12rpx 28rpx;
margin: 0 10rpx;
background: #fff;
border-radius: 30rpx;
font-size: 26rpx;
color: #666;
transition: all 0.3s;
}
.tag.active {
background: #2D2D2D;
color: #fff;
}
/* 排序栏 */
.sort-bar {
display: flex;
justify-content: center;
padding: 10rpx 0 20rpx;
gap: 40rpx;
}
.sort-item {
font-size: 26rpx;
color: #999;
padding: 8rpx 16rpx;
position: relative;
}
.sort-item.active {
color: #2D2D2D;
font-weight: 500;
}
.sort-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20rpx;
height: 4rpx;
background: #B22222;
border-radius: 2rpx;
}
/* 瀑布流 */
.waterfall {
display: flex;
padding: 0 20rpx;
gap: 20rpx;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
gap: 20rpx;
}
/* 帖子卡片 */
.post-card {
background: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
transition: transform 0.3s;
}
.post-card:active {
transform: scale(0.98);
}
.post-image {
width: 100%;
display: block;
}
.post-image-placeholder {
width: 100%;
height: 300rpx;
background: linear-gradient(135deg, #F5F5F0 0%, #E8E8E0 100%);
display: flex;
align-items: center;
justify-content: center;
}
.placeholder-text {
font-size: 48rpx;
font-family: 'KaiTi', 'STKaiti', serif;
color: #999;
letter-spacing: 8rpx;
}
.post-info {
padding: 20rpx;
}
.post-name {
font-size: 32rpx;
font-weight: 600;
color: #2D2D2D;
margin-bottom: 8rpx;
}
.post-origin {
font-size: 22rpx;
color: #999;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16rpx;
padding-top: 16rpx;
border-top: 1rpx solid #f0f0f0;
}
.post-keyword {
font-size: 22rpx;
color: #B22222;
}
.post-likes {
display: flex;
align-items: center;
gap: 6rpx;
}
.like-icon {
font-size: 24rpx;
color: #999;
}
.like-count {
font-size: 22rpx;
color: #999;
}
/* 同款按钮 */
.copy-btn {
margin: 0 20rpx 20rpx;
padding: 16rpx 0;
background: #F5F5F0;
border-radius: 8rpx;
text-align: center;
}
.copy-btn text {
font-size: 24rpx;
color: #666;
}
/* 加载更多 */
.load-more {
padding: 40rpx 0;
display: flex;
justify-content: center;
}
.loading-dots {
display: flex;
gap: 12rpx;
}
.dot {
width: 12rpx;
height: 12rpx;
background: #ccc;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out both;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
.no-more {
text-align: center;
padding: 40rpx 0;
color: #999;
font-size: 24rpx;
}
/* 空状态 */
.empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 100rpx 0;
}
.empty-icon {
font-size: 80rpx;
color: #ccc;
margin-bottom: 20rpx;
}
.empty-text {
font-size: 26rpx;
color: #999;
}
/* 详情弹窗 */
.detail-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
z-index: 1000;
}
.detail-mask.show {
opacity: 1;
visibility: visible;
}
.detail-container {
width: 640rpx;
max-height: 80vh;
background: #fff;
border-radius: 20rpx;
overflow: hidden;
transform: scale(0.9);
transition: all 0.3s;
position: relative;
}
.detail-container.show {
transform: scale(1);
}
.detail-image {
width: 100%;
max-height: 400rpx;
object-fit: cover;
}
.detail-info {
padding: 30rpx;
}
.detail-name {
font-size: 40rpx;
font-weight: 600;
color: #2D2D2D;
text-align: center;
margin-bottom: 16rpx;
}
.detail-origin {
font-size: 24rpx;
color: #666;
line-height: 1.6;
text-align: center;
margin-bottom: 20rpx;
}
.detail-desc {
font-size: 26rpx;
color: #555;
line-height: 1.8;
text-align: justify;
}
.detail-actions {
display: flex;
justify-content: center;
gap: 40rpx;
margin-top: 30rpx;
padding-top: 30rpx;
border-top: 1rpx solid #f0f0f0;
}
.action-btn {
display: flex;
align-items: center;
gap: 8rpx;
padding: 16rpx 40rpx;
border-radius: 40rpx;
}
.action-btn.like {
background: #F5F5F0;
}
.action-btn.copy {
background: #2D2D2D;
}
.action-icon {
font-size: 28rpx;
color: #999;
}
.action-btn.copy .action-text {
color: #fff;
}
.action-text {
font-size: 26rpx;
color: #666;
}
.detail-close {
position: absolute;
top: 20rpx;
right: 20rpx;
width: 60rpx;
height: 60rpx;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
color: #fff;
}