Raju/miniprogramme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial Commit

Browse source
This commit is contained in:
Rajuahamedkst 2025-09-12 16:08:17 +08:00
commit 1d71a02738
237 changed files with 64293 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

181
components/mention-selector/mention-selector.js Normal file
View file

@ -0,0 +1,181 @@
// 💬 @提醒选择组件逻辑
const groupChatManager = require('../../utils/group-chat-manager.js');
Component({
properties: {
// 是否显示
visible: {
type: Boolean,
value: false
},
// 群ID
groupId: {
type: String,
value: ''
},
// 当前用户ID
currentUserId: {
type: String,
value: ''
},
// 是否显示@全体成员
showMentionAll: {
type: Boolean,
value: true
}
},
data: {
// 成员数据
allMembers: [],
filteredMembers: [],
// 搜索关键词
searchKeyword: '',
// 加载状态
loading: false
},
observers: {
'visible': function(visible) {
if (visible && this.data.groupId) {
this.loadGroupMembers();
}
},
'groupId': function(groupId) {
if (groupId && this.data.visible) {
this.loadGroupMembers();
}
}
},
methods: {
// 加载群成员
async loadGroupMembers() {
if (!this.data.groupId) return;
try {
this.setData({
loading: true
});
const result = await groupChatManager.getGroupMembers(this.data.groupId);
if (result.success) {
// 过滤掉当前用户
const members = result.data.filter(member => member.userId !== this.data.currentUserId);
this.setData({
allMembers: members,
loading: false
});
// 应用搜索过滤
this.applyFilter();
console.log('✅ 群成员加载完成:', members.length);
} else {
throw new Error(result.error || '获取群成员失败');
}
} catch (error) {
this.setData({
loading: false
});
console.error('❌ 加载群成员失败:', error);
wx.showToast({
title: '加载成员失败',
icon: 'none'
});
}
},
// 搜索输入
onSearchInput(e) {
const keyword = e.detail.value;
this.setData({
searchKeyword: keyword
});
this.applyFilter();
},
// 清除搜索
clearSearch() {
this.setData({
searchKeyword: ''
});
this.applyFilter();
},
// 应用搜索过滤
applyFilter() {
const keyword = this.data.searchKeyword.toLowerCase();
let filtered = this.data.allMembers;
if (keyword) {
filtered = this.data.allMembers.filter(member => {
const name = (member.nickname || member.username || '').toLowerCase();
return name.includes(keyword);
});
}
this.setData({
filteredMembers: filtered
});
},
// @全体成员
onMentionAll() {
console.log('💬 @全体成员');
this.triggerEvent('mention', {
type: 'all',
text: '所有人',
userIds: this.data.allMembers.map(member => member.userId)
});
this.onClose();
},
// @特定成员
onMentionMember(e) {
const member = e.currentTarget.dataset.member;
console.log('💬 @特定成员:', member);
this.triggerEvent('mention', {
type: 'user',
text: member.nickname || member.username,
userId: member.userId,
userIds: [member.userId]
});
this.onClose();
},
// 关闭选择器
onClose() {
this.setData({
searchKeyword: '',
filteredMembers: this.data.allMembers
});
this.triggerEvent('close');
},
// 点击遮罩
onMaskTap() {
this.onClose();
},
// 阻止事件冒泡
stopPropagation() {
// 阻止点击事件冒泡
}
}
});

4
components/mention-selector/mention-selector.json Normal file
View file

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

85
components/mention-selector/mention-selector.wxml Normal file
View file

@ -0,0 +1,85 @@
<!-- 💬 @提醒选择组件 -->
<view class="mention-selector-container" wx:if="{{visible}}" bindtap="onMaskTap">
<view class="selector-content" catchtap="stopPropagation">
<!-- 选择器头部 -->
<view class="selector-header">
<text class="header-title">选择要@的成员</text>
<view class="close-btn" bindtap="onClose">
<text class="close-icon">✕</text>
</view>
</view>
<!-- 搜索框 -->
<view class="search-container">
<view class="search-input-wrapper">
<text class="search-icon">🔍</text>
<input class="search-input"
placeholder="搜索群成员"
value="{{searchKeyword}}"
bindinput="onSearchInput" />
<view wx:if="{{searchKeyword}}"
class="clear-search"
bindtap="clearSearch">
<text class="clear-icon">✕</text>
</view>
</view>
</view>
<!-- 成员列表 -->
<scroll-view class="members-list" scroll-y="true">
<!-- @全体成员 -->
<view wx:if="{{showMentionAll && !searchKeyword}}"
class="member-item mention-all"
bindtap="onMentionAll">
<view class="member-avatar-container">
<view class="mention-all-avatar">
<text class="mention-all-icon">@</text>
</view>
</view>
<view class="member-info">
<text class="member-name">所有人</text>
<text class="member-desc">@全体成员</text>
</view>
<view class="member-action">
<text class="action-text">@</text>
</view>
</view>
<!-- 群成员 -->
<view class="member-item"
wx:for="{{filteredMembers}}"
wx:key="userId"
bindtap="onMentionMember"
data-member="{{item}}">
<view class="member-avatar-container">
<image class="member-avatar"
src="{{item.avatar || '/images/default-avatar.png'}}"
mode="aspectFill" />
<view wx:if="{{item.role === 'owner'}}" class="role-badge owner">
<text class="role-text">群主</text>
</view>
<view wx:elif="{{item.role === 'admin'}}" class="role-badge admin">
<text class="role-text">管理员</text>
</view>
</view>
<view class="member-info">
<text class="member-name">{{item.nickname || item.username}}</text>
<text class="member-desc">{{item.status || ''}}</text>
</view>
<view class="member-action">
<text class="action-text">@</text>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" wx:if="{{filteredMembers.length === 0 && searchKeyword}}">
<text class="empty-icon">👥</text>
<text class="empty-text">没有找到相关成员</text>
</view>
</scroll-view>
</view>
</view>

378
components/mention-selector/mention-selector.wxss Normal file
View file

@ -0,0 +1,378 @@
/* 💬 @提醒选择组件样式 */
/* CSS变量定义 */
:host {
--primary-color: #007AFF;
--primary-light: #5AC8FA;
--success-color: #34C759;
--warning-color: #FF9500;
--background-color: #F2F2F7;
--surface-color: #FFFFFF;
--text-primary: #000000;
--text-secondary: #8E8E93;
--text-tertiary: #C7C7CC;
--border-color: #E5E5EA;
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
--radius-small: 8rpx;
--radius-medium: 12rpx;
--radius-large: 20rpx;
}
/* 🌙 深色模式支持 */
@media (prefers-color-scheme: dark) {
:host {
--primary-color: #0A84FF;
--primary-light: #64D2FF;
--success-color: #30D158;
--warning-color: #FF9F0A;
--background-color: #000000;
--surface-color: #1C1C1E;
--text-primary: #FFFFFF;
--text-secondary: #8E8E93;
--text-tertiary: #48484A;
--border-color: #38383A;
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
}
}
.mention-selector-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: flex-end;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.selector-content {
width: 100%;
max-height: 80vh;
background: var(--surface-color);
border-radius: var(--radius-large) var(--radius-large) 0 0;
box-shadow: var(--shadow-medium);
animation: slideUp 0.3s ease-out;
display: flex;
flex-direction: column;
overflow: hidden;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* 🎨 选择器头部 */
.selector-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
border-bottom: 1rpx solid var(--border-color);
background: var(--background-color);
}
.header-title {
font-size: 36rpx;
font-weight: 600;
color: var(--text-primary);
}
.close-btn {
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
background: var(--surface-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.close-btn:active {
background: var(--border-color);
transform: scale(0.9);
}
.close-icon {
font-size: 28rpx;
color: var(--text-secondary);
}
/* 🎨 搜索框 */
.search-container {
padding: 24rpx 32rpx;
background: var(--surface-color);
border-bottom: 1rpx solid var(--border-color);
}
.search-input-wrapper {
display: flex;
align-items: center;
background: var(--background-color);
border: 1rpx solid var(--border-color);
border-radius: var(--radius-small);
padding: 0 24rpx;
transition: all 0.3s ease;
}
.search-input-wrapper:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
}
.search-icon {
font-size: 28rpx;
color: var(--text-secondary);
margin-right: 16rpx;
}
.search-input {
flex: 1;
height: 80rpx;
font-size: 28rpx;
color: var(--text-primary);
}
.clear-search {
width: 48rpx;
height: 48rpx;
border-radius: 24rpx;
background: var(--text-tertiary);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.clear-search:active {
transform: scale(0.9);
}
.clear-icon {
font-size: 24rpx;
color: white;
}
/* 🎨 成员列表 */
.members-list {
flex: 1;
background: var(--surface-color);
}
.member-item {
display: flex;
align-items: center;
padding: 24rpx 32rpx;
border-bottom: 1rpx solid var(--border-color);
transition: all 0.2s ease;
}
.member-item:last-child {
border-bottom: none;
}
.member-item:active {
background: var(--background-color);
}
.member-item.mention-all {
background: rgba(0, 122, 255, 0.05);
}
.member-item.mention-all:active {
background: rgba(0, 122, 255, 0.1);
}
.member-avatar-container {
position: relative;
margin-right: 24rpx;
}
.member-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
border: 2rpx solid var(--border-color);
}
.mention-all-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid var(--border-color);
}
.mention-all-icon {
font-size: 36rpx;
color: white;
font-weight: bold;
}
.role-badge {
position: absolute;
bottom: -6rpx;
right: -6rpx;
padding: 4rpx 8rpx;
border-radius: 12rpx;
border: 2rpx solid var(--surface-color);
}
.role-badge.owner {
background: var(--warning-color);
}
.role-badge.admin {
background: var(--primary-color);
}
.role-text {
font-size: 20rpx;
color: white;
font-weight: 600;
}
.member-info {
flex: 1;
min-width: 0;
}
.member-name {
font-size: 30rpx;
font-weight: 500;
color: var(--text-primary);
display: block;
margin-bottom: 8rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.member-desc {
font-size: 26rpx;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.member-action {
display: flex;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
background: var(--primary-color);
transition: all 0.2s ease;
}
.member-action:active {
transform: scale(0.9);
}
.action-text {
font-size: 28rpx;
color: white;
font-weight: bold;
}
/* 🎨 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 40rpx;
text-align: center;
}
.empty-icon {
font-size: 120rpx;
margin-bottom: 24rpx;
opacity: 0.5;
}
.empty-text {
font-size: 28rpx;
color: var(--text-secondary);
}
/* 📱 响应式设计 */
@media screen and (max-width: 375px) {
.selector-header,
.search-container,
.member-item {
padding-left: 24rpx;
padding-right: 24rpx;
}
.member-avatar,
.mention-all-avatar {
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
}
.mention-all-icon {
font-size: 28rpx;
}
.member-action {
width: 48rpx;
height: 48rpx;
border-radius: 24rpx;
}
.action-text {
font-size: 24rpx;
}
}
@media screen and (min-width: 414px) {
.selector-header,
.search-container,
.member-item {
padding-left: 40rpx;
padding-right: 40rpx;
}
.member-avatar,
.mention-all-avatar {
width: 96rpx;
height: 96rpx;
border-radius: 48rpx;
}
.mention-all-icon {
font-size: 40rpx;
}
.member-action {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
}
.action-text {
font-size: 32rpx;
}
}