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

430
pages/group/group-announcement/group-announcement.js Normal file
View file

@ -0,0 +1,430 @@
// 📢 群公告页面逻辑
const app = getApp();
const groupChatManager = require('../../../utils/group-chat-manager.js');
const apiClient = require('../../../utils/api-client.js');
Page({
data: {
// 系统信息
statusBarHeight: 44,
navBarHeight: 88,
// 群信息
groupId: '',
groupInfo: {},
// 页面模式
mode: 'view', // view, edit
// 用户权限
currentUserId: '',
userRole: 'member',
canEdit: false,
// 公告数据
currentAnnouncement: null,
announcementHistory: [],
// 编辑状态
editContent: '',
maxLength: 500,
canSave: false,
// 弹窗状态
showHistoryDetail: false,
selectedHistory: {},
showDeleteConfirm: false,
// 加载状态
loading: false,
loadingText: '加载中...'
},
onLoad(options) {
console.log('📢 群公告页面加载:', options);
// 获取系统信息
this.getSystemInfo();
// 获取参数
if (options.groupId) {
this.setData({
groupId: options.groupId,
mode: options.mode || 'view'
});
// 加载群公告
this.loadGroupAnnouncement();
} else {
wx.showToast({
title: '群聊ID不能为空',
icon: 'none'
});
setTimeout(() => {
wx.navigateBack();
}, 1500);
}
},
onShow() {
console.log('📢 群公告页面显示');
},
// 获取系统信息
getSystemInfo() {
const systemInfo = wx.getSystemInfoSync();
this.setData({
statusBarHeight: systemInfo.statusBarHeight || 44,
navBarHeight: 88,
currentUserId: wx.getStorageSync('userId')
});
},
// 加载群公告
async loadGroupAnnouncement() {
try {
this.setData({
loading: true,
loadingText: '加载群公告中...'
});
// 获取群基本信息
const groupResponse = await apiClient.request({
url: `/api/v1/groups/${this.data.groupId}`,
method: 'GET'
});
if (!groupResponse.success) {
throw new Error(groupResponse.error || '获取群信息失败');
}
// 获取当前用户角色
const membersResult = await groupChatManager.getGroupMembers(this.data.groupId);
if (membersResult.success) {
const currentUser = membersResult.data.find(member => member.userId === this.data.currentUserId);
const userRole = currentUser ? currentUser.role : 'member';
const canEdit = userRole === 'owner' || userRole === 'admin';
this.setData({
userRole: userRole,
canEdit: canEdit
});
}
// 获取群公告
const announcementResponse = await apiClient.request({
url: `/api/v1/groups/${this.data.groupId}/announcements`,
method: 'GET'
});
if (announcementResponse.success) {
const announcements = announcementResponse.data || [];
const currentAnnouncement = announcements.find(a => a.isCurrent);
const history = announcements.filter(a => !a.isCurrent);
// 处理时间显示
if (currentAnnouncement) {
currentAnnouncement.publishTimeText = this.formatDateTime(new Date(currentAnnouncement.publishTime));
}
history.forEach(item => {
item.publishTimeText = this.formatDateTime(new Date(item.publishTime));
});
this.setData({
groupInfo: groupResponse.data,
currentAnnouncement: currentAnnouncement,
announcementHistory: history,
loading: false
});
// 如果是编辑模式，设置编辑内容
if (this.data.mode === 'edit' && currentAnnouncement) {
this.setData({
editContent: currentAnnouncement.content
});
this.updateCanSave();
}
}
console.log('✅ 群公告加载完成');
} catch (error) {
this.setData({
loading: false
});
console.error('❌ 加载群公告失败:', error);
wx.showToast({
title: error.message || '加载群公告失败',
icon: 'none'
});
}
},
// 📝 ===== 编辑功能 =====
// 创建公告
createAnnouncement() {
if (!this.data.canEdit) {
wx.showToast({
title: '没有发布权限',
icon: 'none'
});
return;
}
console.log('📝 创建公告');
this.setData({
mode: 'edit',
editContent: ''
});
this.updateCanSave();
},
// 编辑公告
editAnnouncement() {
if (!this.data.canEdit) {
wx.showToast({
title: '没有编辑权限',
icon: 'none'
});
return;
}
console.log('📝 编辑公告');
this.setData({
mode: 'edit',
editContent: this.data.currentAnnouncement ? this.data.currentAnnouncement.content : ''
});
this.updateCanSave();
},
// 内容输入
onContentInput(e) {
const content = e.detail.value;
this.setData({
editContent: content
});
this.updateCanSave();
},
// 更新是否可以保存
updateCanSave() {
const canSave = this.data.editContent.trim().length > 0;
this.setData({
canSave: canSave
});
},
// 取消编辑
cancelEdit() {
console.log('📝 取消编辑');
if (this.data.editContent.trim() && this.data.editContent !== (this.data.currentAnnouncement?.content || '')) {
wx.showModal({
title: '取消编辑',
content: '确定要取消编辑吗？未保存的内容将丢失。',
success: (res) => {
if (res.confirm) {
this.setData({
mode: 'view',
editContent: '',
canSave: false
});
}
}
});
} else {
this.setData({
mode: 'view',
editContent: '',
canSave: false
});
}
},
// 保存公告
async saveAnnouncement() {
if (!this.data.canSave) {
return;
}
const content = this.data.editContent.trim();
if (!content) {
wx.showToast({
title: '公告内容不能为空',
icon: 'none'
});
return;
}
console.log('📝 保存公告');
try {
this.setData({
loading: true,
loadingText: '发布公告中...'
});
const result = await groupChatManager.setGroupAnnouncement(this.data.groupId, content);
this.setData({
loading: false
});
if (result.success) {
wx.showToast({
title: '公告发布成功',
icon: 'success'
});
// 切换到查看模式
this.setData({
mode: 'view',
editContent: '',
canSave: false
});
// 重新加载公告
this.loadGroupAnnouncement();
} else {
throw new Error(result.error || '发布公告失败');
}
} catch (error) {
this.setData({
loading: false
});
console.error('❌ 保存公告失败:', error);
wx.showToast({
title: error.message || '发布公告失败',
icon: 'none'
});
}
},
// 删除公告
deleteAnnouncement() {
if (!this.data.canEdit) {
wx.showToast({
title: '没有删除权限',
icon: 'none'
});
return;
}
console.log('📝 删除公告');
this.setData({
showDeleteConfirm: true
});
},
// 确认删除公告
async confirmDeleteAnnouncement() {
try {
this.setData({
loading: true,
loadingText: '删除公告中...',
showDeleteConfirm: false
});
const result = await groupChatManager.setGroupAnnouncement(this.data.groupId, '');
this.setData({
loading: false
});
if (result.success) {
wx.showToast({
title: '公告已删除',
icon: 'success'
});
// 重新加载公告
this.loadGroupAnnouncement();
} else {
throw new Error(result.error || '删除公告失败');
}
} catch (error) {
this.setData({
loading: false
});
console.error('❌ 删除公告失败:', error);
wx.showToast({
title: error.message || '删除公告失败',
icon: 'none'
});
}
},
// 关闭删除确认弹窗
closeDeleteConfirm() {
this.setData({
showDeleteConfirm: false
});
},
// 📜 ===== 历史公告 =====
// 查看历史公告
viewHistoryAnnouncement(e) {
const announcement = e.currentTarget.dataset.announcement;
console.log('📜 查看历史公告:', announcement);
this.setData({
selectedHistory: announcement,
showHistoryDetail: true
});
},
// 关闭历史公告详情
closeHistoryDetail() {
this.setData({
showHistoryDetail: false,
selectedHistory: {}
});
},
// 🔧 ===== 工具方法 =====
// 格式化日期时间
formatDateTime(date) {
const now = new Date();
const diff = now.getTime() - date.getTime();
if (diff < 60000) { // 1分钟内
return '刚刚';
} else if (diff < 3600000) { // 1小时内
return `${Math.floor(diff / 60000)}分钟前`;
} else if (diff < 86400000) { // 1天内
return `${Math.floor(diff / 3600000)}小时前`;
} else if (diff < 604800000) { // 1周内
return `${Math.floor(diff / 86400000)}天前`;
} else {
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}
},
// 阻止事件冒泡
stopPropagation() {
// 阻止点击事件冒泡
},
// 🧭 ===== 页面导航 =====
// 返回上一页
goBack() {
if (this.data.mode === 'edit') {
this.cancelEdit();
} else {
wx.navigateBack();
}
}
});

7
pages/group/group-announcement/group-announcement.json Normal file
View file

@ -0,0 +1,7 @@
{
"navigationStyle": "custom",
"backgroundColor": "#F2F2F7",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50
}

174
pages/group/group-announcement/group-announcement.wxml Normal file
View file

@ -0,0 +1,174 @@
<!-- 📢 群公告页面 -->
<view class="group-announcement-container">
<!-- 自定义导航栏 -->
<view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
<view class="navbar-content" style="height: {{navBarHeight}}px;">
<view class="navbar-left" bindtap="goBack">
<text class="back-icon">‹</text>
</view>
<view class="navbar-title">
<text class="title-text">{{mode === 'edit' ? '编辑群公告' : '群公告'}}</text>
</view>
<view class="navbar-right" wx:if="{{mode === 'edit'}}" bindtap="saveAnnouncement">
<text class="save-text {{canSave ? 'active' : ''}}">保存</text>
</view>
</view>
</view>
<!-- 页面内容 -->
<view class="page-content">
<!-- 编辑模式 -->
<view wx:if="{{mode === 'edit'}}" class="edit-mode">
<!-- 编辑提示 -->
<view class="edit-tips">
<text class="tips-icon">💡</text>
<text class="tips-text">群公告将通知所有群成员，请谨慎编辑</text>
</view>
<!-- 编辑区域 -->
<view class="edit-container">
<textarea class="announcement-textarea"
placeholder="请输入群公告内容..."
value="{{editContent}}"
bindinput="onContentInput"
maxlength="{{maxLength}}"
auto-height
focus="{{true}}" />
<view class="edit-footer">
<view class="char-counter">
<text class="counter-text">{{editContent.length}}/{{maxLength}}</text>
</view>
<view class="edit-actions">
<view class="action-btn secondary" bindtap="cancelEdit">
<text class="btn-text">取消</text>
</view>
<view class="action-btn primary {{canSave ? 'active' : ''}}" bindtap="saveAnnouncement">
<text class="btn-text">发布</text>
</view>
</view>
</view>
</view>
</view>
<!-- 查看模式 -->
<view wx:else class="view-mode">
<!-- 当前公告 -->
<view wx:if="{{currentAnnouncement}}" class="current-announcement">
<view class="announcement-header">
<text class="announcement-title">当前公告</text>
<view wx:if="{{canEdit}}" class="header-actions">
<text class="action-btn" bindtap="editAnnouncement">编辑</text>
<text class="action-btn danger" bindtap="deleteAnnouncement">删除</text>
</view>
</view>
<view class="announcement-content">
<text class="content-text">{{currentAnnouncement.content}}</text>
</view>
<view class="announcement-meta">
<text class="meta-text">发布者: {{currentAnnouncement.publisherName}}</text>
<text class="meta-text">发布时间: {{currentAnnouncement.publishTimeText}}</text>
</view>
</view>
<!-- 无公告状态 -->
<view wx:else class="no-announcement">
<text class="no-announcement-icon">📢</text>
<text class="no-announcement-text">暂无群公告</text>
<view wx:if="{{canEdit}}" class="no-announcement-action">
<view class="action-btn primary" bindtap="createAnnouncement">
<text class="btn-text">发布公告</text>
</view>
</view>
</view>
<!-- 历史公告 -->
<view wx:if="{{announcementHistory.length > 0}}" class="announcement-history">
<view class="history-header">
<text class="history-title">历史公告</text>
<text class="history-count">({{announcementHistory.length}}条)</text>
</view>
<view class="history-list">
<view class="history-item"
wx:for="{{announcementHistory}}"
wx:key="id"
bindtap="viewHistoryAnnouncement"
data-announcement="{{item}}">
<view class="history-content">
<text class="history-text">{{item.content}}</text>
</view>
<view class="history-meta">
<text class="history-publisher">{{item.publisherName}}</text>
<text class="history-time">{{item.publishTimeText}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 历史公告详情弹窗 -->
<view class="history-detail-modal" wx:if="{{showHistoryDetail}}" bindtap="closeHistoryDetail">
<view class="modal-content" catchtap="stopPropagation">
<view class="modal-header">
<text class="modal-title">历史公告</text>
<view class="close-btn" bindtap="closeHistoryDetail">
<text class="close-icon">✕</text>
</view>
</view>
<view class="modal-body">
<view class="detail-content">
<text class="detail-text">{{selectedHistory.content}}</text>
</view>
<view class="detail-meta">
<view class="meta-item">
<text class="meta-label">发布者:</text>
<text class="meta-value">{{selectedHistory.publisherName}}</text>
</view>
<view class="meta-item">
<text class="meta-label">发布时间:</text>
<text class="meta-value">{{selectedHistory.publishTimeText}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 删除确认弹窗 -->
<view class="delete-confirm-modal" wx:if="{{showDeleteConfirm}}" bindtap="closeDeleteConfirm">
<view class="modal-content" catchtap="stopPropagation">
<view class="modal-header">
<text class="modal-title">删除公告</text>
</view>
<view class="modal-body">
<text class="confirm-text">确定要删除当前群公告吗？删除后所有群成员将收到通知。</text>
</view>
<view class="modal-actions">
<view class="modal-btn cancel" bindtap="closeDeleteConfirm">
<text class="btn-text">取消</text>
</view>
<view class="modal-btn confirm" bindtap="confirmDeleteAnnouncement">
<text class="btn-text">删除</text>
</view>
</view>
</view>
</view>
<!-- 加载提示 -->
<view class="loading-overlay" wx:if="{{loading}}">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">{{loadingText}}</text>
</view>
</view>

663
pages/group/group-announcement/group-announcement.wxss Normal file
View file

@ -0,0 +1,663 @@
/* 📢 群公告页面样式 */
/* CSS变量定义 */
page {
--primary-color: #007AFF;
--primary-light: #5AC8FA;
--primary-dark: #0051D5;
--success-color: #34C759;
--danger-color: #FF3B30;
--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) {
page {
--primary-color: #0A84FF;
--primary-light: #64D2FF;
--primary-dark: #0056CC;
--success-color: #30D158;
--danger-color: #FF453A;
--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);
}
}
.group-announcement-container {
height: 100vh;
background: var(--background-color);
display: flex;
flex-direction: column;
}
/* 🎨 自定义导航栏 */
.custom-navbar {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
box-shadow: var(--shadow-medium);
z-index: 1000;
}
.navbar-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
}
.navbar-left, .navbar-right {
width: 120rpx;
height: 80rpx;
display: flex;
align-items: center;
border-radius: var(--radius-medium);
transition: all 0.3s ease;
}
.navbar-left {
justify-content: flex-start;
}
.navbar-right {
justify-content: flex-end;
}
.navbar-left:active, .navbar-right:active {
background: rgba(255, 255, 255, 0.2);
transform: scale(0.95);
}
.back-icon {
font-size: 48rpx;
color: white;
font-weight: 300;
}
.navbar-title {
flex: 1;
text-align: center;
}
.title-text {
font-size: 36rpx;
font-weight: 600;
color: white;
}
.save-text {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
transition: all 0.3s ease;
}
.save-text.active {
color: white;
}
/* 🎨 页面内容 */
.page-content {
flex: 1;
padding: 32rpx;
}
/* 🎨 编辑模式 */
.edit-mode {
height: 100%;
display: flex;
flex-direction: column;
}
.edit-tips {
display: flex;
align-items: center;
background: rgba(255, 149, 0, 0.1);
border: 1rpx solid rgba(255, 149, 0, 0.3);
border-radius: var(--radius-small);
padding: 24rpx;
margin-bottom: 32rpx;
}
.tips-icon {
font-size: 32rpx;
margin-right: 16rpx;
}
.tips-text {
font-size: 26rpx;
color: var(--warning-color);
line-height: 1.4;
}
.edit-container {
flex: 1;
background: var(--surface-color);
border-radius: var(--radius-medium);
border: 1rpx solid var(--border-color);
box-shadow: var(--shadow-light);
display: flex;
flex-direction: column;
}
.announcement-textarea {
flex: 1;
padding: 32rpx;
font-size: 30rpx;
color: var(--text-primary);
line-height: 1.6;
min-height: 400rpx;
}
.edit-footer {
padding: 24rpx 32rpx;
border-top: 1rpx solid var(--border-color);
}
.char-counter {
display: flex;
justify-content: flex-end;
margin-bottom: 24rpx;
}
.counter-text {
font-size: 24rpx;
color: var(--text-tertiary);
}
.edit-actions {
display: flex;
gap: 24rpx;
}
.action-btn {
flex: 1;
height: 80rpx;
border-radius: var(--radius-medium);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 2rpx solid transparent;
}
.action-btn:active {
transform: scale(0.98);
}
.action-btn.primary {
background: var(--text-tertiary);
border-color: var(--text-tertiary);
}
.action-btn.primary.active {
background: var(--primary-color);
border-color: var(--primary-color);
}
.action-btn.primary:active {
background: var(--primary-dark);
}
.action-btn.secondary {
background: var(--surface-color);
border-color: var(--border-color);
}
.action-btn.secondary:active {
background: var(--background-color);
}
.btn-text {
font-size: 28rpx;
font-weight: 600;
}
.action-btn.primary .btn-text {
color: var(--text-tertiary);
}
.action-btn.primary.active .btn-text {
color: white;
}
.action-btn.secondary .btn-text {
color: var(--text-primary);
}
/* 🎨 查看模式 */
.view-mode {
display: flex;
flex-direction: column;
gap: 32rpx;
}
/* 🎨 当前公告 */
.current-announcement {
background: var(--surface-color);
border-radius: var(--radius-medium);
border: 1rpx solid var(--border-color);
box-shadow: var(--shadow-light);
overflow: hidden;
}
.announcement-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
border-bottom: 1rpx solid var(--border-color);
background: var(--background-color);
}
.announcement-title {
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
}
.header-actions {
display: flex;
gap: 24rpx;
}
.header-actions .action-btn {
font-size: 26rpx;
color: var(--primary-color);
transition: all 0.3s ease;
}
.header-actions .action-btn:active {
opacity: 0.7;
}
.header-actions .action-btn.danger {
color: var(--danger-color);
}
.announcement-content {
padding: 32rpx;
}
.content-text {
font-size: 30rpx;
color: var(--text-primary);
line-height: 1.6;
word-break: break-all;
}
.announcement-meta {
padding: 24rpx 32rpx;
border-top: 1rpx solid var(--border-color);
background: var(--background-color);
display: flex;
flex-direction: column;
gap: 8rpx;
}
.meta-text {
font-size: 24rpx;
color: var(--text-secondary);
}
/* 🎨 无公告状态 */
.no-announcement {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
text-align: center;
background: var(--surface-color);
border-radius: var(--radius-medium);
border: 1rpx solid var(--border-color);
box-shadow: var(--shadow-light);
}
.no-announcement-icon {
font-size: 120rpx;
margin-bottom: 24rpx;
opacity: 0.5;
}
.no-announcement-text {
font-size: 28rpx;
color: var(--text-secondary);
margin-bottom: 32rpx;
}
.no-announcement-action .action-btn {
width: 200rpx;
height: 80rpx;
background: var(--primary-color);
border-radius: var(--radius-medium);
}
.no-announcement-action .btn-text {
color: white;
}
/* 🎨 历史公告 */
.announcement-history {
background: var(--surface-color);
border-radius: var(--radius-medium);
border: 1rpx solid var(--border-color);
box-shadow: var(--shadow-light);
overflow: hidden;
}
.history-header {
display: flex;
align-items: center;
padding: 32rpx;
border-bottom: 1rpx solid var(--border-color);
background: var(--background-color);
}
.history-title {
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
margin-right: 16rpx;
}
.history-count {
font-size: 26rpx;
color: var(--text-secondary);
}
.history-list {
display: flex;
flex-direction: column;
}
.history-item {
padding: 32rpx;
border-bottom: 1rpx solid var(--border-color);
transition: all 0.2s ease;
}
.history-item:last-child {
border-bottom: none;
}
.history-item:active {
background: var(--background-color);
}
.history-content {
margin-bottom: 16rpx;
}
.history-text {
font-size: 28rpx;
color: var(--text-primary);
line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.history-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.history-publisher, .history-time {
font-size: 24rpx;
color: var(--text-secondary);
}
/* 🎨 弹窗样式 */
.history-detail-modal, .delete-confirm-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
}
.modal-content {
width: 90%;
max-width: 600rpx;
background: var(--surface-color);
border-radius: var(--radius-large);
box-shadow: var(--shadow-medium);
animation: scaleIn 0.3s ease-out;
overflow: hidden;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
border-bottom: 1rpx solid var(--border-color);
}
.modal-title {
font-size: 36rpx;
font-weight: 600;
color: var(--text-primary);
}
.close-btn {
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
background: var(--background-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);
}
.modal-body {
padding: 32rpx;
}
.detail-content {
margin-bottom: 32rpx;
}
.detail-text {
font-size: 30rpx;
color: var(--text-primary);
line-height: 1.6;
word-break: break-all;
}
.detail-meta {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.meta-item {
display: flex;
align-items: center;
}
.meta-label {
font-size: 26rpx;
color: var(--text-secondary);
margin-right: 16rpx;
min-width: 120rpx;
}
.meta-value {
font-size: 26rpx;
color: var(--text-primary);
}
.confirm-text {
font-size: 30rpx;
color: var(--text-primary);
line-height: 1.6;
text-align: center;
}
.modal-actions {
display: flex;
border-top: 1rpx solid var(--border-color);
}
.modal-btn {
flex: 1;
height: 96rpx;
display: flex;
align-items: center;
justify-content: center;
border-right: 1rpx solid var(--border-color);
transition: all 0.2s ease;
}
.modal-btn:last-child {
border-right: none;
}
.modal-btn:active {
background: var(--background-color);
}
.modal-btn.cancel .btn-text {
color: var(--text-secondary);
}
.modal-btn.confirm .btn-text {
color: var(--danger-color);
font-weight: 600;
}
/* 🎨 加载状态 */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.loading-content {
background: var(--surface-color);
border-radius: var(--radius-medium);
padding: 48rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 24rpx;
box-shadow: var(--shadow-medium);
}
.loading-spinner {
width: 60rpx;
height: 60rpx;
border: 4rpx solid var(--border-color);
border-top: 4rpx solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
font-size: 28rpx;
color: var(--text-primary);
font-weight: 500;
}
/* 📱 响应式设计 */
@media screen and (max-width: 375px) {
.page-content {
padding: 24rpx;
}
.announcement-header,
.announcement-content,
.announcement-meta,
.history-header,
.history-item {
padding: 24rpx;
}
.no-announcement {
padding: 80rpx 24rpx;
}
}
@media screen and (min-width: 414px) {
.page-content {
padding: 40rpx;
}
.announcement-header,
.announcement-content,
.announcement-meta,
.history-header,
.history-item {
padding: 40rpx;
}
.no-announcement {
padding: 160rpx 40rpx;
}
}