Initial Commit

pages/group/create-group/create-group.js

@@ -0,0 +1,374 @@
+// 👥 创建群聊页面逻辑
+const app = getApp();
+const groupChatManager = require('../../../utils/group-chat-manager.js');
+const apiClient = require('../../../utils/api-client.js');
+
+Page({
+  data: {
+    // 系统信息
+    statusBarHeight: 44,
+    navBarHeight: 88,
+    
+    // 群信息
+    groupName: '',
+    groupDescription: '',
+    groupAvatar: '',
+    
+    // 配置限制
+    maxGroupNameLength: 20,
+    maxDescriptionLength: 200,
+    
+    // 成员选择
+    friendsList: [],
+    filteredFriends: [],
+    selectedMembers: [],
+    searchKeyword: '',
+    
+    // 群设置
+    allowMemberInvite: true,
+    saveToContacts: true,
+    showQRCode: true,
+    
+    // 状态
+    isCreating: false,
+    canCreate: false
+  },
+
+  onLoad(options) {
+    console.log('👥 创建群聊页面加载');
+    
+    // 获取系统信息
+    this.getSystemInfo();
+    
+    // 加载好友列表
+    this.loadFriendsList();
+    
+    // 处理预选成员
+    if (options.preSelectedMembers) {
+      try {
+        const preSelected = JSON.parse(decodeURIComponent(options.preSelectedMembers));
+        this.setData({
+          selectedMembers: preSelected
+        });
+        this.updateCanCreate();
+      } catch (error) {
+        console.error('❌ 解析预选成员失败:', error);
+      }
+    }
+  },
+
+  onShow() {
+    console.log('👥 创建群聊页面显示');
+  },
+
+  // 获取系统信息
+  getSystemInfo() {
+    const systemInfo = wx.getSystemInfoSync();
+    this.setData({
+      statusBarHeight: systemInfo.statusBarHeight || 44,
+      navBarHeight: 88
+    });
+  },
+
+  // 加载好友列表
+  async loadFriendsList() {
+    try {
+      wx.showLoading({
+        title: '加载好友列表...'
+      });
+      
+      const response = await apiClient.request({
+        url: '/api/v1/friends',
+        method: 'GET'
+      });
+      
+      wx.hideLoading();
+      
+      if (response.success) {
+        const friends = response.data || [];
+        
+        // 标记已选择的好友
+        const friendsWithSelection = friends.map(friend => ({
+          ...friend,
+          selected: this.data.selectedMembers.some(member => member.userId === friend.userId)
+        }));
+        
+        this.setData({
+          friendsList: friendsWithSelection,
+          filteredFriends: friendsWithSelection
+        });
+        
+        console.log('✅ 好友列表加载完成:', friends.length);
+      } else {
+        throw new Error(response.error || '加载好友列表失败');
+      }
+      
+    } catch (error) {
+      wx.hideLoading();
+      console.error('❌ 加载好友列表失败:', error);
+      wx.showToast({
+        title: '加载好友列表失败',
+        icon: 'none'
+      });
+    }
+  },
+
+  // 👥 ===== 群信息设置 =====
+
+  // 选择群头像
+  selectGroupAvatar() {
+    console.log('👥 选择群头像');
+    
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        const tempFilePath = res.tempFilePaths[0];
+        this.setData({
+          groupAvatar: tempFilePath
+        });
+        console.log('✅ 群头像选择成功');
+      },
+      fail: (error) => {
+        console.error('❌ 选择群头像失败:', error);
+        wx.showToast({
+          title: '选择头像失败',
+          icon: 'none'
+        });
+      }
+    });
+  },
+
+  // 群名称输入
+  onGroupNameInput(e) {
+    const value = e.detail.value;
+    this.setData({
+      groupName: value
+    });
+    this.updateCanCreate();
+  },
+
+  // 群描述输入
+  onGroupDescInput(e) {
+    const value = e.detail.value;
+    this.setData({
+      groupDescription: value
+    });
+  },
+
+  // 👤 ===== 成员选择 =====
+
+  // 搜索输入
+  onSearchInput(e) {
+    const keyword = e.detail.value;
+    this.setData({
+      searchKeyword: keyword
+    });
+    this.filterFriends(keyword);
+  },
+
+  // 清除搜索
+  clearSearch() {
+    this.setData({
+      searchKeyword: ''
+    });
+    this.filterFriends('');
+  },
+
+  // 过滤好友
+  filterFriends(keyword) {
+    let filtered = this.data.friendsList;
+    
+    if (keyword.trim()) {
+      filtered = this.data.friendsList.filter(friend => {
+        const name = (friend.nickname || friend.username || '').toLowerCase();
+        return name.includes(keyword.toLowerCase());
+      });
+    }
+    
+    this.setData({
+      filteredFriends: filtered
+    });
+  },
+
+  // 切换成员选择
+  toggleMember(e) {
+    const userId = e.currentTarget.dataset.userId;
+    const friend = this.data.friendsList.find(f => f.userId === userId);
+    
+    if (!friend) return;
+    
+    console.log('👤 切换成员选择:', friend.nickname || friend.username);
+    
+    let selectedMembers = [...this.data.selectedMembers];
+    let friendsList = [...this.data.friendsList];
+    let filteredFriends = [...this.data.filteredFriends];
+    
+    const isSelected = selectedMembers.some(member => member.userId === userId);
+    
+    if (isSelected) {
+      // 移除选择
+      selectedMembers = selectedMembers.filter(member => member.userId !== userId);
+    } else {
+      // 添加选择
+      selectedMembers.push(friend);
+    }
+    
+    // 更新好友列表的选择状态
+    friendsList = friendsList.map(f => ({
+      ...f,
+      selected: selectedMembers.some(member => member.userId === f.userId)
+    }));
+    
+    filteredFriends = filteredFriends.map(f => ({
+      ...f,
+      selected: selectedMembers.some(member => member.userId === f.userId)
+    }));
+    
+    this.setData({
+      selectedMembers: selectedMembers,
+      friendsList: friendsList,
+      filteredFriends: filteredFriends
+    });
+    
+    this.updateCanCreate();
+  },
+
+  // 移除成员
+  removeMember(e) {
+    const userId = e.currentTarget.dataset.userId;
+    console.log('👤 移除成员:', userId);
+    
+    let selectedMembers = this.data.selectedMembers.filter(member => member.userId !== userId);
+    let friendsList = [...this.data.friendsList];
+    let filteredFriends = [...this.data.filteredFriends];
+    
+    // 更新好友列表的选择状态
+    friendsList = friendsList.map(f => ({
+      ...f,
+      selected: selectedMembers.some(member => member.userId === f.userId)
+    }));
+    
+    filteredFriends = filteredFriends.map(f => ({
+      ...f,
+      selected: selectedMembers.some(member => member.userId === f.userId)
+    }));
+    
+    this.setData({
+      selectedMembers: selectedMembers,
+      friendsList: friendsList,
+      filteredFriends: filteredFriends
+    });
+    
+    this.updateCanCreate();
+  },
+
+  // ⚙️ ===== 群设置 =====
+
+  // 允许成员邀请设置变化
+  onAllowInviteChange(e) {
+    this.setData({
+      allowMemberInvite: e.detail.value
+    });
+  },
+
+  // 保存到通讯录设置变化
+  onSaveContactsChange(e) {
+    this.setData({
+      saveToContacts: e.detail.value
+    });
+  },
+
+  // 显示群二维码设置变化
+  onShowQRCodeChange(e) {
+    this.setData({
+      showQRCode: e.detail.value
+    });
+  },
+
+  // 🎯 ===== 群聊创建 =====
+
+  // 更新是否可以创建
+  updateCanCreate() {
+    const canCreate = this.data.groupName.trim().length > 0 && this.data.selectedMembers.length > 0;
+    this.setData({
+      canCreate: canCreate
+    });
+  },
+
+  // 创建群聊
+  async createGroup() {
+    if (!this.data.canCreate || this.data.isCreating) {
+      return;
+    }
+    
+    console.log('👥 开始创建群聊');
+    
+    try {
+      this.setData({
+        isCreating: true
+      });
+      
+      // 构建群聊信息
+      const groupInfo = {
+        name: this.data.groupName.trim(),
+        description: this.data.groupDescription.trim(),
+        avatar: this.data.groupAvatar,
+        memberIds: this.data.selectedMembers.map(member => member.userId),
+        settings: {
+          allowMemberInvite: this.data.allowMemberInvite,
+          saveToContacts: this.data.saveToContacts,
+          showQRCode: this.data.showQRCode
+        }
+      };
+      
+      // 调用群聊管理器创建群聊
+      const result = await groupChatManager.createGroup(groupInfo);
+      
+      this.setData({
+        isCreating: false
+      });
+      
+      if (result.success) {
+        wx.showToast({
+          title: '群聊创建成功',
+          icon: 'success'
+        });
+        
+        console.log('✅ 群聊创建成功:', result.data.groupId);
+        
+        // 跳转到群聊页面
+        setTimeout(() => {
+          wx.redirectTo({
+            url: `/pages/message/chat/chat?chatType=1&targetId=${result.data.groupId}&chatName=${encodeURIComponent(result.data.name)}`
+          });
+        }, 1500);
+        
+      } else {
+        wx.showToast({
+          title: result.error || '创建群聊失败',
+          icon: 'none'
+        });
+      }
+      
+    } catch (error) {
+      this.setData({
+        isCreating: false
+      });
+      
+      console.error('❌ 创建群聊失败:', error);
+      wx.showToast({
+        title: '创建群聊失败',
+        icon: 'none'
+      });
+    }
+  },
+
+  // 🧭 ===== 页面导航 =====
+
+  // 返回上一页
+  goBack() {
+    wx.navigateBack();
+  }
+});

pages/group/create-group/create-group.json

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

pages/group/create-group/create-group.wxml

@@ -0,0 +1,191 @@
+<!-- 👥 创建群聊页面 -->
+<view class="create-group-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">创建群聊</text>
+      </view>
+      
+      <view class="navbar-right" bindtap="createGroup">
+        <text class="create-text {{canCreate ? 'active' : ''}}">创建</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 页面内容 -->
+  <scroll-view class="page-content" scroll-y="true">
+    <!-- 群信息设置 -->
+    <view class="group-info-section">
+      <!-- 群头像 -->
+      <view class="group-avatar-setting">
+        <view class="avatar-container" bindtap="selectGroupAvatar">
+          <image wx:if="{{groupAvatar}}" 
+                 class="group-avatar" 
+                 src="{{groupAvatar}}" 
+                 mode="aspectFill" />
+          <view wx:else class="avatar-placeholder">
+            <text class="avatar-icon">📷</text>
+            <text class="avatar-text">设置群头像</text>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 群名称 -->
+      <view class="group-name-setting">
+        <view class="setting-label">
+          <text class="label-text">群名称</text>
+          <text class="label-required">*</text>
+        </view>
+        <input class="group-name-input"
+               placeholder="请输入群名称"
+               value="{{groupName}}"
+               bindinput="onGroupNameInput"
+               maxlength="{{maxGroupNameLength}}" />
+        <view class="input-counter">
+          <text class="counter-text">{{groupName.length}}/{{maxGroupNameLength}}</text>
+        </view>
+      </view>
+      
+      <!-- 群描述 -->
+      <view class="group-desc-setting">
+        <view class="setting-label">
+          <text class="label-text">群描述</text>
+        </view>
+        <textarea class="group-desc-input"
+                  placeholder="请输入群描述（可选）"
+                  value="{{groupDescription}}"
+                  bindinput="onGroupDescInput"
+                  maxlength="{{maxDescriptionLength}}"
+                  auto-height />
+        <view class="input-counter">
+          <text class="counter-text">{{groupDescription.length}}/{{maxDescriptionLength}}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 选择成员 -->
+    <view class="member-selection-section">
+      <view class="section-header">
+        <text class="section-title">选择成员</text>
+        <text class="member-count">已选择 {{selectedMembers.length}} 人</text>
+      </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>
+      
+      <!-- 已选成员 -->
+      <view class="selected-members" wx:if="{{selectedMembers.length > 0}}">
+        <view class="selected-member-item"
+              wx:for="{{selectedMembers}}"
+              wx:key="userId"
+              bindtap="removeMember"
+              data-user-id="{{item.userId}}">
+          <image class="selected-avatar" 
+                 src="{{item.avatar || '/images/default-avatar.png'}}" 
+                 mode="aspectFill" />
+          <text class="selected-name">{{item.nickname || item.username}}</text>
+          <view class="remove-btn">
+            <text class="remove-icon">✕</text>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 好友列表 -->
+      <view class="friends-list">
+        <view class="friend-item {{item.selected ? 'selected' : ''}}"
+              wx:for="{{filteredFriends}}"
+              wx:key="userId"
+              bindtap="toggleMember"
+              data-user-id="{{item.userId}}">
+          <view class="friend-avatar-container">
+            <image class="friend-avatar" 
+                   src="{{item.avatar || '/images/default-avatar.png'}}" 
+                   mode="aspectFill" />
+            <view class="selection-indicator {{item.selected ? 'selected' : ''}}">
+              <text class="indicator-icon">{{item.selected ? '✓' : ''}}</text>
+            </view>
+          </view>
+          
+          <view class="friend-info">
+            <text class="friend-name">{{item.nickname || item.username}}</text>
+            <text class="friend-status">{{item.status || ''}}</text>
+          </view>
+        </view>
+        
+        <!-- 空状态 -->
+        <view class="empty-state" wx:if="{{filteredFriends.length === 0}}">
+          <text class="empty-icon">👥</text>
+          <text class="empty-text">{{searchKeyword ? '没有找到相关好友' : '暂无好友'}}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 群设置 -->
+    <view class="group-settings-section">
+      <view class="section-title">
+        <text class="title-text">群设置</text>
+      </view>
+      
+      <view class="setting-items">
+        <!-- 允许成员邀请 -->
+        <view class="setting-item">
+          <view class="item-info">
+            <text class="item-title">允许成员邀请好友</text>
+            <text class="item-desc">群成员可以邀请其他人加入群聊</text>
+          </view>
+          <switch class="setting-switch"
+                  checked="{{allowMemberInvite}}"
+                  bindchange="onAllowInviteChange" />
+        </view>
+        
+        <!-- 保存到通讯录 -->
+        <view class="setting-item">
+          <view class="item-info">
+            <text class="item-title">保存到通讯录</text>
+            <text class="item-desc">将群聊保存到通讯录中</text>
+          </view>
+          <switch class="setting-switch"
+                  checked="{{saveToContacts}}"
+                  bindchange="onSaveContactsChange" />
+        </view>
+        
+        <!-- 显示群二维码 -->
+        <view class="setting-item">
+          <view class="item-info">
+            <text class="item-title">显示群二维码</text>
+            <text class="item-desc">允许通过二维码加入群聊</text>
+          </view>
+          <switch class="setting-switch"
+                  checked="{{showQRCode}}"
+                  bindchange="onShowQRCodeChange" />
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</view>
+
+<!-- 加载提示 -->
+<view class="loading-overlay" wx:if="{{isCreating}}">
+  <view class="loading-content">
+    <view class="loading-spinner"></view>
+    <text class="loading-text">正在创建群聊...</text>
+  </view>
+</view>

pages/group/create-group/create-group.wxss

@@ -0,0 +1,639 @@
+/* 👥 创建群聊页面样式 */
+
+/* CSS变量定义 */
+page {
+  --primary-color: #007AFF;
+  --primary-light: #5AC8FA;
+  --primary-dark: #0051D5;
+  --success-color: #34C759;
+  --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;
+    --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);
+  }
+}
+
+.create-group-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 {
+  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;
+}
+
+.create-text {
+  font-size: 32rpx;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.create-text.active {
+  color: white;
+}
+
+.create-text:active {
+  transform: scale(0.95);
+}
+
+/* 🎨 页面内容 */
+.page-content {
+  flex: 1;
+  padding: 32rpx;
+}
+
+/* 🎨 群信息设置 */
+.group-info-section {
+  background: var(--surface-color);
+  border-radius: var(--radius-medium);
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  border: 1rpx solid var(--border-color);
+  box-shadow: var(--shadow-light);
+}
+
+.group-avatar-setting {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 32rpx;
+}
+
+.avatar-container {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: var(--radius-large);
+  overflow: hidden;
+  border: 2rpx solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+.avatar-container:active {
+  transform: scale(0.95);
+}
+
+.group-avatar {
+  width: 100%;
+  height: 100%;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  background: var(--background-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+}
+
+.avatar-icon {
+  font-size: 48rpx;
+  color: var(--text-secondary);
+}
+
+.avatar-text {
+  font-size: 24rpx;
+  color: var(--text-secondary);
+}
+
+.group-name-setting,
+.group-desc-setting {
+  margin-bottom: 24rpx;
+}
+
+.group-desc-setting {
+  margin-bottom: 0;
+}
+
+.setting-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.label-text {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.label-required {
+  font-size: 28rpx;
+  color: #FF3B30;
+  margin-left: 8rpx;
+}
+
+.group-name-input,
+.group-desc-input {
+  width: 100%;
+  padding: 24rpx;
+  border: 1rpx solid var(--border-color);
+  border-radius: var(--radius-small);
+  font-size: 30rpx;
+  color: var(--text-primary);
+  background: var(--background-color);
+  transition: all 0.3s ease;
+}
+
+.group-name-input:focus,
+.group-desc-input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
+}
+
+.group-desc-input {
+  min-height: 120rpx;
+  resize: none;
+}
+
+.input-counter {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8rpx;
+}
+
+.counter-text {
+  font-size: 24rpx;
+  color: var(--text-tertiary);
+}
+
+/* 🎨 成员选择 */
+.member-selection-section {
+  background: var(--surface-color);
+  border-radius: var(--radius-medium);
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  border: 1rpx solid var(--border-color);
+  box-shadow: var(--shadow-light);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.member-count {
+  font-size: 26rpx;
+  color: var(--text-secondary);
+}
+
+.search-container {
+  margin-bottom: 24rpx;
+}
+
+.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;
+}
+
+/* 🎨 已选成员 */
+.selected-members {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  margin-bottom: 24rpx;
+  padding: 24rpx;
+  background: var(--background-color);
+  border-radius: var(--radius-small);
+  border: 1rpx solid var(--border-color);
+}
+
+.selected-member-item {
+  display: flex;
+  align-items: center;
+  background: var(--primary-color);
+  border-radius: 32rpx;
+  padding: 8rpx 16rpx 8rpx 8rpx;
+  transition: all 0.3s ease;
+}
+
+.selected-member-item:active {
+  transform: scale(0.95);
+}
+
+.selected-avatar {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 24rpx;
+  margin-right: 12rpx;
+}
+
+.selected-name {
+  font-size: 26rpx;
+  color: white;
+  margin-right: 12rpx;
+  max-width: 120rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remove-btn {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 16rpx;
+  background: rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.remove-icon {
+  font-size: 20rpx;
+  color: white;
+}
+
+/* 🎨 好友列表 */
+.friends-list {
+  max-height: 600rpx;
+  overflow-y: auto;
+}
+
+.friend-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+.friend-item:last-child {
+  border-bottom: none;
+}
+
+.friend-item:active {
+  background: var(--background-color);
+}
+
+.friend-item.selected {
+  background: rgba(0, 122, 255, 0.05);
+}
+
+.friend-avatar-container {
+  position: relative;
+  margin-right: 24rpx;
+}
+
+.friend-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+}
+
+.selection-indicator {
+  position: absolute;
+  top: -8rpx;
+  right: -8rpx;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 20rpx;
+  border: 2rpx solid var(--surface-color);
+  background: var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.selection-indicator.selected {
+  background: var(--success-color);
+}
+
+.indicator-icon {
+  font-size: 24rpx;
+  color: white;
+  font-weight: bold;
+}
+
+.friend-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.friend-name {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.friend-status {
+  font-size: 26rpx;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 🎨 空状态 */
+.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);
+}
+
+/* 🎨 群设置 */
+.group-settings-section {
+  background: var(--surface-color);
+  border-radius: var(--radius-medium);
+  padding: 32rpx;
+  border: 1rpx solid var(--border-color);
+  box-shadow: var(--shadow-light);
+}
+
+.group-settings-section .section-title {
+  margin-bottom: 24rpx;
+}
+
+.setting-items {
+  border-radius: var(--radius-small);
+  overflow: hidden;
+  border: 1rpx solid var(--border-color);
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  border-bottom: 1rpx solid var(--border-color);
+  background: var(--background-color);
+  transition: all 0.2s ease;
+}
+
+.setting-item:last-child {
+  border-bottom: none;
+}
+
+.setting-item:active {
+  background: var(--border-color);
+}
+
+.item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.item-title {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.item-desc {
+  font-size: 26rpx;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.setting-switch {
+  transform: scale(0.8);
+}
+
+/* 🎨 加载状态 */
+.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;
+  }
+  
+  .group-info-section,
+  .member-selection-section,
+  .group-settings-section {
+    padding: 24rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .avatar-container {
+    width: 120rpx;
+    height: 120rpx;
+  }
+  
+  .friend-avatar {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 32rpx;
+  }
+  
+  .selection-indicator {
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 16rpx;
+  }
+}
+
+@media screen and (min-width: 414px) {
+  .page-content {
+    padding: 40rpx;
+  }
+  
+  .group-info-section,
+  .member-selection-section,
+  .group-settings-section {
+    padding: 40rpx;
+    margin-bottom: 40rpx;
+  }
+  
+  .avatar-container {
+    width: 180rpx;
+    height: 180rpx;
+  }
+  
+  .friend-avatar {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 48rpx;
+  }
+}