查看“Widget:ManagePermission”的源代码

<noinclude>{{#widget:managePermission}}
</noinclude><includeonly>
<div class="mp-container">
  <!-- Loading指示器 -->
  <div v-if="isAppInitializing" class="loading-container">
    <div class="loading-spinner"></div>
    <p>应用正在加载中，请稍候...</p>
  </div>

  <!-- 应用内容，在初始化完成后显示 -->
  <div v-else id="app">
    <!-- 输入区域 -->
    <div class="input-area">
      <div class="tab-headers">
        <div class="tab-header" :class="{ active: activeInputTab === 'query' }" @click="switchInputTab('query')">查询</div>
        <div class="tab-header" :class="{ active: activeInputTab === 'input' }" @click="switchInputTab('input')">输入</div>
        <div class="tab-header" :class="{ active: activeInputTab === 'cache' }" @click="switchInputTab('cache')">缓存</div>
        <div class="tab-header" :class="{ active: activeInputTab === 'manage' }" @click="switchInputTab('manage')">管理</div>
      </div>
      
      <div class="tab-content">
        <!-- 查询标签页 -->
        <div class="tab-pane" :class="{ active: activeInputTab === 'query' }" id="query-tab">
          <div class="form-row">
            <div class="user-group-checkboxes">
              <div v-for="group in mainUserGroups" :key="group.value" class="checkbox-item">
                <div class="tri-state-checkbox" 
                     :class="getQueryGroupState(group.value)" 
                     @click="toggleQueryGroupState(group.value)"
                     :title="getQueryGroupStateTitle(group.value)">
                  <span class="state-icon">{{ getQueryGroupStateIcon(group.value) }}</span>
                  <span class="state-label">{{ group.label }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="button-group">
            <button @click="queryUsersByGroups" :disabled="isFetching">查询</button>
          </div>
        </div>
        
        <!-- 输入标签页 -->
        <div class="tab-pane" :class="{ active: activeInputTab === 'input' }" id="input-tab">
          <div class="form-row">
            <div class="form-group">
              <label for="userIds">B站ID (使用英文逗号分隔)</label>
              <textarea id="userIds" v-model="inputUserIds" rows="3" placeholder="例如: bilibili_user1,bilibili_user2"></textarea>
            </div>
          </div>
          <div class="button-group">
            <button @click="queryUsersByIds" :disabled="isFetching">查询</button>
          </div>
        </div>
        
        <!-- 缓存标签页 -->
        <div class="tab-pane" :class="{ active: activeInputTab === 'cache' }" id="cache-tab">
          <div class="form-row">
            <div class="user-group-checkboxes">
              <div v-for="group in mainUserGroups" :key="group.value" class="checkbox-item">
                <input type="checkbox" :id="'cache-group-' + group.value" v-model="selectedCacheGroups" :value="group.value">
                <label :for="'cache-group-' + group.value">{{ group.label }}</label>
              </div>
            </div>
          </div>
          <div class="button-group">
            <button @click="queryUsersFromCache" :disabled="isFetching">查询</button>
            <button @click="addUsersToCache" :disabled="isFetching || users.length === 0" class="cache-button">添加缓存</button>
          </div>
          <div v-if="users.length > 0" class="cache-info">
            <h4>当前用户列表包含的用户组：</h4>
            <div class="detected-groups">
              <span v-for="group in detectedUserGroups" :key="group.value" class="group-tag">
                {{ group.label }} ({{ group.count }}人)
              </span>
              <span v-if="detectedUserGroups.length === 0" class="no-groups">未检测到用户组</span>
            </div>
            <p class="cache-help">点击"添加缓存"将自动根据用户的实际用户组添加到对应缓存中</p>
          </div>
        </div>
        
        <!-- 管理标签页 -->
        <div class="tab-pane" :class="{ active: activeInputTab === 'manage' }" id="manage-tab">
          <div class="form-row">
            <div class="user-group-checkboxes">
              <div v-for="group in mainUserGroups" :key="group.value" class="checkbox-item">
                <input type="checkbox" :id="'manage-group-' + group.value" v-model="selectedManageGroups" :value="group.value">
                <label :for="'manage-group-' + group.value">{{ group.label }}</label>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label for="permissionExpiry">权限过期日期（可选）</label>
              <input type="date" id="permissionExpiry" v-model="permissionExpiry" class="date-input">
              <small class="form-help">留空表示永久权限，设置日期后权限将在该日 23:59 过期</small>
            </div>
          </div>
          <div class="button-group">
            <button @click="addPermissions" :disabled="isManaging || !hasSelectedUsers">添加权限</button>
            <button @click="removePermissions" :disabled="isManaging || !hasSelectedUsers">移除权限</button>
            <div class="checkbox-item">
              <input type="checkbox" id="autoCache" v-model="autoCache">
              <label for="autoCache">自动缓存</label>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 进度条区域 -->
    <div v-if="showProgress" class="progress-area">
      <div class="progress-container">
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
        </div>
        <div class="progress-text">{{ progressText }}</div>
        <div class="progress-details" v-if="progressDetails">{{ progressDetails }}</div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <div class="tab-headers">
        <div class="tab-header" :class="{ active: activeContentTab === 'users' }" @click="switchContentTab('users')">用户</div>
        <div class="tab-header" :class="{ active: activeContentTab === 'logs' }" @click="switchContentTab('logs')">日志</div>
      </div>
      
      <div class="tab-content">
        <!-- 用户标签页 -->
        <div class="tab-pane" :class="{ active: activeContentTab === 'users' }" id="users-tab">
          <div v-if="users.length === 0" class="no-data-message">暂无用户数据</div>
          <div v-else class="users-table-container">
            <table class="users-table">
              <thead>
                <tr>
                  <th>
                    <input type="checkbox" id="selectAll" v-model="selectAllUsers" @change="toggleSelectAllUsers">
                    <label for="selectAll">选择</label>
                  </th>
                  <th>用户</th>
                  <th v-for="group in mainUserGroups" :key="group.value">{{ group.label }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="user in users" :key="user.name">
                  <td>
                    <input type="checkbox" :id="'user-' + user.name" v-model="selectedUsers" :value="user.name">
                  </td>
                  <td>
                    <div class="user-info">
                      <div class="user-avatar" v-if="user.biliInfo && user.biliInfo.face">
                        <img :src="user.biliInfo.face" :alt="user.biliInfo.name" class="user-avatar-img">
                      </div>
                      <div class="user-avatar-placeholder" v-else>{{ user.name && user.name.charAt(0) ? user.name.charAt(0).toUpperCase() : '?' }}</div>
                      <div class="user-details">
                        <div class="user-name">{{ user.biliInfo ? user.biliInfo.name : user.name }}</div>
                        <div class="user-id">B站ID: {{ user.name }}</div>
                      </div>
                    </div>
                  </td>
                  <td v-for="group in mainUserGroups" :key="group.value" class="group-cell">
                    <span v-if="calculateGroupExpiry(user, group.value) === 'permanent'" class="group-indicator permanent">★</span>
                    <span v-else-if="calculateGroupExpiry(user, group.value) === 'expired'" class="group-indicator expired">已过期</span>
                    <span v-else-if="typeof calculateGroupExpiry(user, group.value) === 'number'" class="group-indicator days">
                      {{ calculateGroupExpiry(user, group.value) }}天
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 日志标签页 -->
        <div class="tab-pane" :class="{ active: activeContentTab === 'logs' }" id="logs-tab">
          <div class="log-container" ref="logContainer">
            <div v-for="(log, index) in logs" :key="index">{{ log }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type='text/javascript' src="https://wiki.biligame.com/tools/MediaWiki:Vue3-global.js?action=raw&ctype=text/javascript"></script>
<script>
// 本地缓存管理对象
const LocalCacheManager = {
  // 数据库名称
  dbName: 'WikiPermissionCache',
  // 存储对象名称
  storeName: 'permissionCache',
  // 用户组缓存存储对象名称
  groupStoreName: 'groupCache',
  // 数据库版本
  dbVersion: 1,
  // 数据库实例
  db: null,
  
  // 初始化数据库
  async initDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.dbVersion);
      
      request.onerror = (event) => {
        this.log('无法打开数据库', 'error');
        reject(event.target.error);
      };
      
      request.onsuccess = (event) => {
        this.db = event.target.result;
        this.log('数据库连接成功');
        resolve(this.db);
      };
      
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        
        // 如果存储对象不存在，则创建它
        if (!db.objectStoreNames.contains(this.storeName)) {
          const objectStore = db.createObjectStore(this.storeName, { keyPath: 'id' });
          this.log('创建用户信息存储对象成功');
        }
        
        // 如果用户组缓存存储对象不存在，则创建它
        if (!db.objectStoreNames.contains(this.groupStoreName)) {
          const groupStore = db.createObjectStore(this.groupStoreName, { keyPath: 'id' });
          this.log('创建用户组缓存存储对象成功');
        }
      };
    });
  },
  
  // 从IndexDB读取缓存
  async get(key) {
    if (!this.db) {
      await this.initDB();
    }
    
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.storeName], 'readonly');
      const objectStore = transaction.objectStore(this.storeName);
      const request = objectStore.get(key);
      
      request.onerror = (event) => {
        this.log(`读取缓存失败: ${event.target.error}`, 'error');
        reject(event.target.error);
      };
      
      request.onsuccess = (event) => {
        const result = event.target.result;
        if (result) {
          this.log(`从缓存中读取到用户 ${key} 的信息`);
        } else {
          this.log(`缓存中不存在用户 ${key} 的信息`);
        }
        resolve(result ? result.data : null);
      };
    });
  },
  
  // 将内容存入IndexDB
  async set(key, data) {
    if (!this.db) {
      await this.initDB();
    }
    
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.storeName], 'readwrite');
      const objectStore = transaction.objectStore(this.storeName);
      const request = objectStore.put({ id: key, data });
      
      request.onerror = (event) => {
        this.log(`存入缓存失败: ${event.target.error}`, 'error');
        reject(event.target.error);
      };
      
      request.onsuccess = (event) => {
        this.log(`用户 ${key} 的信息已存入缓存`);
        resolve(true);
      };
    });
  },
  
  // 获取用户组缓存
  async getGroupCache(key) {
    if (!this.db) {
      await this.initDB();
    }
    
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.groupStoreName], 'readonly');
      const objectStore = transaction.objectStore(this.groupStoreName);
      const request = objectStore.get(key);
      
      request.onerror = (event) => {
        this.log(`读取用户组缓存失败: ${event.target.error}`, 'error');
        reject(event.target.error);
      };
      
      request.onsuccess = (event) => {
        const result = event.target.result;
        if (result) {
          this.log(`从缓存中读取到用户组 ${key} 的信息`);
        } else {
          this.log(`缓存中不存在用户组 ${key} 的信息`);
        }
        resolve(result ? result.data : null);
      };
    });
  },
  
  // 设置用户组缓存
  async setGroupCache(key, data) {
    if (!this.db) {
      await this.initDB();
    }
    
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.groupStoreName], 'readwrite');
      const objectStore = transaction.objectStore(this.groupStoreName);
      const request = objectStore.put({ id: key, data });
      
      request.onerror = (event) => {
        this.log(`存入用户组缓存失败: ${event.target.error}`, 'error');
        reject(event.target.error);
      };
      
      request.onsuccess = (event) => {
        this.log(`用户组 ${key} 的信息已存入缓存`);
        resolve(true);
      };
    });
  },
  
  // 清空缓存
  async clear() {
    if (!this.db) {
      await this.initDB();
    }
    
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction([this.storeName, this.groupStoreName], 'readwrite');
      const userStore = transaction.objectStore(this.storeName);
      const groupStore = transaction.objectStore(this.groupStoreName);
      
      const userRequest = userStore.clear();
      const groupRequest = groupStore.clear();
      
      let completed = 0;
      const onComplete = () => {
        completed++;
        if (completed === 2) {
          this.log('缓存已清空');
          resolve(true);
        }
      };
      
      userRequest.onerror = groupRequest.onerror = (event) => {
        this.log(`清空缓存失败: ${event.target.error}`, 'error');
        reject(event.target.error);
      };
      
      userRequest.onsuccess = groupRequest.onsuccess = onComplete;
    });
  },
  
  // 日志函数引用
  logFunction: null,
  
  // 设置日志函数
  setLogFunction(logFn) {
    this.logFunction = logFn;
  },
  
  // 内部日志方法
  log(message, type = 'info') {
    if (this.logFunction) {
      this.logFunction(`[本地缓存] ${message}`, type);
    } else {
      // 如果没有设置日志函数，则使用console作为备选
      if (type === 'error') {
        console.error(`[本地缓存] ${message}`);
      } else {
        console.log(`[本地缓存] ${message}`);
      }
    }
  }
};

// B站用户信息管理对象
const BilibiliUserManager = {
  // 用户信息缓存
  userInfoCache: {},
  
  // 日志函数引用
  logFunction: null,
  
  // 设置日志函数
  setLogFunction(logFn) {
    this.logFunction = logFn;
  },
  
  // 内部日志方法
  log(message, type = 'info') {
    if (this.logFunction) {
      this.logFunction(message, type);
    } else {
      // 如果没有设置日志函数，则使用console作为备选
      if (type === 'error') {
        console.error(message);
      } else {
        console.log(message);
      }
    }
  },
  
  // 获取单个B站用户信息
  async getUserInfo(userId) {
    // 如果已经获取过该用户信息，直接返回
    if (this.userInfoCache[userId]) {
      return this.userInfoCache[userId];
    }
    
    this.log(`获取B站用户信息，userId: ${userId}`);
    
    // 首先尝试从本地缓存获取
    const cachedUserInfo = await LocalCacheManager.get(userId);
    if (cachedUserInfo) {
      this.log(`从本地缓存获取到用户 ${cachedUserInfo.name} 的信息`);
      // 存储到内存缓存
      this.userInfoCache[userId] = cachedUserInfo;
      return cachedUserInfo;
    }
    
    // 如果本地缓存中没有，则从网络获取
    return await this.getUserInfoFromNetwork(userId);
  },
  
  // 按序获取多个用户信息
  async getUsersInfo(userIds) {
    this.log(`开始按序获取 ${userIds.length} 个用户信息...`);
    
    // 1. 有一个希望获取用户信息的用户id序列
    this.log(`需要获取用户信息的ID序列: ${userIds.join(', ')}`);
    
    // 2. 获取本地缓存，获得已有的用户id序列
    const cachedUserIds = [];
    const uncachedUserIds = [];
    
    // 检查每个用户ID是否在本地缓存中
    for (const userId of userIds) {
      const cachedUserInfo = await LocalCacheManager.get(userId);
      if (cachedUserInfo) {
        cachedUserIds.push(userId);
        // 将缓存中的用户信息存入内存缓存
        this.userInfoCache[userId] = cachedUserInfo;
      } else {
        uncachedUserIds.push(userId);
      }
    }
    
    this.log(`本地缓存中已存在的用户ID: ${cachedUserIds.join(', ') || '无'}`);
    this.log(`需要从网络获取的用户ID: ${uncachedUserIds.join(', ') || '无'}`);
    
    // 3. 比对1和2，将不存在于本地缓存中的用户id序列提取出来
    
    // 4. 开始请求3的用户id的信息
    const results = {};
    let successCount = 0;
    let failCount = 0;
    
    // 首先将缓存中的用户信息加入结果
    cachedUserIds.forEach(userId => {
      results[userId] = this.userInfoCache[userId];
      successCount++;
    });
    
    // 一个一个获取未缓存的用户信息
    for (const userId of uncachedUserIds) {
      try {
        const userInfo = await this.getUserInfoFromNetwork(userId);
        results[userId] = userInfo;
        successCount++;
      } catch (error) {
        this.log(`获取用户 ${userId} 信息失败: ${error.message}`, 'error');
        results[userId] = null;
        failCount++;
        
        // 每个失败请求后添加延迟，避免连续失败
        await new Promise(resolve => setTimeout(resolve, 1000));
      }
    }
    
    this.log(`按序获取用户信息完成，成功获取 ${successCount} 个，失败 ${failCount} 个`);
    return results;
  },
  
  // 从网络获取单个B站用户信息（不检查缓存）
  async getUserInfoFromNetwork(userId, retryCount = 0) {
    // 最大重试次数
    const maxRetries = 3;
    
    try {
      this.log(`从网络获取B站用户信息，userId: ${userId}${retryCount > 0 ? ` (重试 ${retryCount}/${maxRetries})` : ''}`);
      
      // 发送请求到B站API
      const response = await fetch(`https://line1-h5-pc-api.biligame.com/game/user/space/user_detail?uid=${userId}`);
      const data = await response.json();
      
      if (data.code === 0 && data.data) {
        // 存储用户信息，只保留头像、昵称和ID
        const userInfo = {
          mid: data.data.mid,
          name: data.data.uname,
          face: data.data.face
        };
        
        // 存储到内存缓存
        this.userInfoCache[userId] = userInfo;
        
        // 存储到本地缓存
        await LocalCacheManager.set(userId, userInfo);
        
        this.log(`成功获取用户 ${userInfo.name} 的信息`);
        return userInfo;
      } else {
        // 如果是请求过于频繁的错误，并且还有重试次数，则进行重试
        if (data.message && data.message.includes('请求过于频繁') && retryCount < maxRetries) {
          this.log(`请求过于频繁，${1000 * (retryCount + 1)}ms后重试...`);
          
          // 延迟后重试，每次重试延迟时间增加
          await new Promise(resolve => setTimeout(resolve, 1000 * (retryCount + 1)));
          return await this.getUserInfoFromNetwork(userId, retryCount + 1);
        } else {
          throw new Error(data.message || '获取用户信息失败');
        }
      }
    } catch (error) {
      // 如果是请求过于频繁的错误，并且还有重试次数，则进行重试
      if (error.message && error.message.includes('请求过于频繁') && retryCount < maxRetries) {
        this.log(`请求过于频繁，${1000 * (retryCount + 1)}ms后重试...`);
        
        // 延迟后重试，每次重试延迟时间增加
        await new Promise(resolve => setTimeout(resolve, 1000 * (retryCount + 1)));
        return await this.getUserInfoFromNetwork(userId, retryCount + 1);
      } else {
        this.log(`获取B站用户 ${userId} 信息错误: ${error.message}`, 'error');
        throw error;
      }
    }
  },
  
  // 清空缓存
  clearCache() {
    this.userInfoCache = {};
    // 清空本地缓存
    LocalCacheManager.clear().catch(error => {
      this.log(`清空本地缓存失败: ${error.message}`, 'error');
    });
  }
};

// MediaWiki API 权限管理对象
const PermissionManager = {
  // 用户组映射
  userGroups: {
    "automoderated": "免审",
    "interface-admin": "界面管理",
    "bureaucrat": "行政员",
    "sysop": "管理员",
    "widgeteditor": "部件编辑",
    "bilibili": "B站用户",
    "bot": "机器人",
    "checkuser": "用户检查员",
    "moderator": "版主",
    "push-subscription-manager": "推送订阅管理员",
    "smwadministrator": "SMW管理员",
    "smwcurator": "SMW策展人",
    "smweditor": "SMW编辑者",
    "suppress": "监督用户组"
  },
  
  // 主要用户组（前5个）
  mainUserGroups: [
    { value: "sysop", label: "管理员" },
    { value: "bureaucrat", label: "行政员" },
    { value: "automoderated", label: "免审" },
    { value: "interface-admin", label: "界面管理" },
    { value: "widgeteditor", label: "部件编辑" }
  ],
  
  // 日志函数引用
  logFunction: null,
  
  // 设置日志函数
  setLogFunction(logFn) {
    this.logFunction = logFn;
  },
  
  // 内部日志方法
  log(message, type = 'info') {
    if (this.logFunction) {
      this.logFunction(`[权限管理] ${message}`, type);
    } else {
      // 如果没有设置日志函数，则使用console作为备选
      if (type === 'error') {
        console.error(`[权限管理] ${message}`);
      } else {
        console.log(`[权限管理] ${message}`);
      }
    }
  },
  
  // 查询指定用户组下的所有用户
  async queryUsersByGroups(apiPath, groups) {
    if (!apiPath) {
      this.log('请输入API路径', 'error');
      throw new Error('请输入API路径');
    }
    
    if (!groups || groups.length === 0) {
      this.log('请选择至少一个用户组', 'error');
      throw new Error('请选择至少一个用户组');
    }
    
    this.log(`开始查询用户组: ${groups.join(', ')}`);
    
    try {
      // 分别查询每个用户组，然后合并结果
      const allUsersMap = new Map(); // 使用Map避免重复用户
      
      for (const group of groups) {
        this.log(`正在查询用户组: ${group}`);
        
        // 构建API请求URL
        const url = new URL(apiPath);
        url.searchParams.append('action', 'query');
        url.searchParams.append('list', 'allusers');
        url.searchParams.append('format', 'json');
        url.searchParams.append('aulimit', '500'); // 每次请求最多获取500个用户
        url.searchParams.append('augroup', group); // 只查询单个用户组
        url.searchParams.append('auprop', 'groups|rights|editcount|registration');
        
        this.log(`请求URL: ${url.toString().substring(0, 150)}...`);
        
        // 分页获取该用户组的所有用户
        let continueToken = null;
        
        do {
          // 如果有继续标记，添加到URL中
          if (continueToken) {
            url.searchParams.set('aufrom', continueToken);
          }
          
          // 发送请求
          const response = await fetch(url.toString());
          const data = await response.json();
          
          this.log(`响应状态: ${response.status}`);
          
          if (data.error) {
            this.log(`API错误: ${data.error.info}`, 'error');
            throw new Error(data.error.info);
          }
          
          if (data.query && data.query.allusers) {
            const users = data.query.allusers;
            this.log(`用户组 ${group} 本次获取 ${users.length} 个用户`);
            
            // 将用户添加到Map中，避免重复
            users.forEach(user => {
              if (!allUsersMap.has(user.name)) {
                allUsersMap.set(user.name, {
                  name: user.name,
                  groups: user.groups || [],
                  rights: user.rights || [],
                  groupmemberships: []
                });
              }
            });
            
            // 检查是否有继续标记
            if (data.continue && data.continue.aufrom) {
              continueToken = data.continue.aufrom;
              this.log(`获取到继续标记，准备下一页请求`);
              
              // 添加短暂延迟，避免请求过于频繁
              this.log('等待500ms后继续请求...');
              await new Promise(resolve => setTimeout(resolve, 500));
            } else {
              this.log(`用户组 ${group} 查询完成`);
              continueToken = null;
            }
          } else {
            this.log(`用户组 ${group} 未获取到用户信息`, 'warning');
            continueToken = null;
          }
        } while (continueToken);
        
        // 用户组之间添加延迟，避免请求过于频繁
        if (groups.indexOf(group) < groups.length - 1) {
          this.log('等待1秒后查询下一个用户组...');
          await new Promise(resolve => setTimeout(resolve, 1000));
        }
      }
      
      // 将Map转换为数组
      const allUsers = Array.from(allUsersMap.values());
      this.log(`合并后共获取 ${allUsers.length} 个用户`);
      
      // 获取详细权限信息
      if (allUsers.length > 0) {
        const detailedUsers = await this.queryUsersByIds(apiPath, allUsers.map(u => u.name));
        return allUsers.map(user => {
          const detailed = detailedUsers.find(d => d.name === user.name);
          return detailed ? { ...user, ...detailed } : user;
        });
      }
      
      return allUsers;
    } catch (error) {
      this.log(`请求失败: ${error.message}`, 'error');
      throw error;
    }
  },
  
  // 查询指定用户ID的用户信息
  async queryUsersByIds(apiPath, userIds) {
    if (!apiPath) {
      this.log('请输入API路径', 'error');
      throw new Error('请输入API路径');
    }
    
    if (!userIds || userIds.length === 0) {
      this.log('请输入至少一个用户ID', 'error');
      throw new Error('请输入至少一个用户ID');
    }
    
    this.log(`开始查询用户ID: ${userIds.join(', ')}`);
    
    try {
      // 构建API请求URL
      const url = new URL(apiPath);
      url.searchParams.append('action', 'query');
      url.searchParams.append('list', 'users');
      url.searchParams.append('format', 'json');
      
      // 添加用户ID，直接使用bilibiliId
      const usersParam = userIds.join('|');
      url.searchParams.append('ususers', usersParam);
      
      // 添加更多用户信息，包括权限过期时间
      url.searchParams.append('usprop', 'groups|groupmemberships|rights|editcount|registration');
      
      this.log(`请求URL: ${url.toString().substring(0, 150)}...`);
      
      // 发送请求
      const response = await fetch(url.toString());
      const data = await response.json();
      
      this.log(`响应状态: ${response.status}`);
      
      if (data.error) {
        this.log(`API错误: ${data.error.info}`, 'error');
        throw new Error(data.error.info);
      }
      
      if (data.query && data.query.users) {
        const users = data.query.users;
        this.log(`获取到 ${users.length} 个用户信息`);
        
        // 处理用户数据
        const processedUsers = users.map(user => ({
          name: user.name,
          groups: user.groups || [],
          rights: user.rights || [],
          groupmemberships: user.groupmemberships || [],
          missing: user.missing || false
        })).filter(user => !user.missing);
        
        this.log(`有效用户数量: ${processedUsers.length}`);
        return processedUsers;
      } else {
        this.log('未获取到用户信息', 'warning');
        return [];
      }
    } catch (error) {
      this.log(`请求失败: ${error.message}`, 'error');
      throw error;
    }
  },
  
  // 获取用户权限令牌
  async getRightsToken(apiPath) {
    if (!apiPath) {
      this.log('请输入API路径', 'error');
      throw new Error('请输入API路径');
    }
    
    this.log('获取用户权限令牌');
    
    try {
      // 构建API请求URL
      const url = new URL(apiPath);
      url.searchParams.append('action', 'query');
      url.searchParams.append('meta', 'tokens');
      url.searchParams.append('type', 'userrights');
      url.searchParams.append('format', 'json');
      
      this.log(`请求URL: ${url.toString().substring(0, 150)}...`);
      
      // 发送请求
      const response = await fetch(url.toString());
      const data = await response.json();
      
      this.log(`响应状态: ${response.status}`);
      
      if (data.error) {
        this.log(`API错误: ${data.error.info}`, 'error');
        throw new Error(data.error.info);
      }
      
      if (data.query && data.query.tokens && data.query.tokens.userrightstoken) {
        const token = data.query.tokens.userrightstoken;
        this.log('成功获取用户权限令牌');
        return token;
      } else {
        this.log('未获取到用户权限令牌', 'warning');
        throw new Error('未获取到用户权限令牌');
      }
    } catch (error) {
      this.log(`获取用户权限令牌失败: ${error.message}`, 'error');
      throw error;
    }
  },
  
  // 为用户添加权限
  async addPermissions(apiPath, userIds, groups, expiry = null, reason = '批量权限管理') {
    if (!apiPath) {
      this.log('请输入API路径', 'error');
      throw new Error('请输入API路径');
    }
    
    if (!userIds || userIds.length === 0) {
      this.log('请选择至少一个用户', 'error');
      throw new Error('请选择至少一个用户');
    }
    
    if (!groups || groups.length === 0) {
      this.log('请选择至少一个用户组', 'error');
      throw new Error('请选择至少一个用户组');
    }
    
    this.log(`开始为用户添加权限: 用户ID [${userIds.join(', ')}], 用户组 [${groups.join(', ')}]`);
    
    try {
      // 获取权限令牌
      const token = await this.getRightsToken(apiPath);
      
      // 为每个用户添加权限
      const results = [];
      let successCount = 0;
      let failCount = 0;
      
      for (const userId of userIds) {
        try {
          // 构建API请求URL
          const url = new URL(apiPath);
          url.searchParams.append('action', 'userrights');
          url.searchParams.append('user', userId); // 直接使用bilibiliId，不再需要#前缀
          url.searchParams.append('add', groups.join('|'));
          url.searchParams.append('format', 'json');
          
          // 添加过期时间和原因
          if (expiry) {
            url.searchParams.append('expiry', expiry);
          }
          url.searchParams.append('reason', reason);
          
          // 构建POST请求体
          const formData = new FormData();
          formData.append('token', token);
          
          this.log(`为用户 ${userId} 添加权限...`);
          
          // 发送请求
          const response = await fetch(url.toString(), {
            method: 'POST',
            body: formData
          });
          const data = await response.json();
          
          this.log(`响应状态: ${response.status}`);
          
          if (data.error) {
            this.log(`为用户 ${userId} 添加权限失败: ${data.error.info}`, 'error');
            results.push({ userId, success: false, error: data.error.info });
            failCount++;
          } else {
            this.log(`成功为用户 ${userId} 添加权限`);
            results.push({ userId, success: true });
            successCount++;
            
            // 如果启用了自动缓存，更新本地缓存
            if (window.autoCache) {
              await this.updateUserGroupCache(userId, groups, 'add');
            }
          }
          
          // 添加短暂延迟，避免请求过于频繁
          await new Promise(resolve => setTimeout(resolve, 500));
        } catch (error) {
          this.log(`为用户 ${userId} 添加权限失败: ${error.message}`, 'error');
          results.push({ userId, success: false, error: error.message });
          failCount++;
        }
      }
      
      this.log(`权限添加完成，成功 ${successCount} 个，失败 ${failCount} 个`);
      return results;
    } catch (error) {
      this.log(`权限添加失败: ${error.message}`, 'error');
      throw error;
    }
  },
  
  // 移除用户权限
  async removePermissions(apiPath, userIds, groups, reason = '批量权限管理') {
    if (!apiPath) {
      this.log('请输入API路径', 'error');
      throw new Error('请输入API路径');
    }
    
    if (!userIds || userIds.length === 0) {
      this.log('请选择至少一个用户', 'error');
      throw new Error('请选择至少一个用户');
    }
    
    if (!groups || groups.length === 0) {
      this.log('请选择至少一个用户组', 'error');
      throw new Error('请选择至少一个用户组');
    }
    
    this.log(`开始移除用户权限: 用户ID [${userIds.join(', ')}], 用户组 [${groups.join(', ')}]`);
    
    try {
      // 获取权限令牌
      const token = await this.getRightsToken(apiPath);
      
      // 为每个用户移除权限
      const results = [];
      let successCount = 0;
      let failCount = 0;
      
      for (const userId of userIds) {
        try {
          // 构建API请求URL
          const url = new URL(apiPath);
          url.searchParams.append('action', 'userrights');
          url.searchParams.append('user', userId); // 直接使用bilibiliId，不再需要#前缀
          url.searchParams.append('remove', groups.join('|'));
          url.searchParams.append('format', 'json');
          
          // 添加原因
          url.searchParams.append('reason', reason);
          
          // 构建POST请求体
          const formData = new FormData();
          formData.append('token', token);
          
          this.log(`为用户 ${userId} 移除权限...`);
          
          // 发送请求
          const response = await fetch(url.toString(), {
            method: 'POST',
            body: formData
          });
          const data = await response.json();
          
          this.log(`响应状态: ${response.status}`);
          
          if (data.error) {
            this.log(`为用户 ${userId} 移除权限失败: ${data.error.info}`, 'error');
            results.push({ userId, success: false, error: data.error.info });
            failCount++;
          } else {
            this.log(`成功为用户 ${userId} 移除权限`);
            results.push({ userId, success: true });
            successCount++;
            
            // 如果启用了自动缓存，更新本地缓存
            if (window.autoCache) {
              await this.updateUserGroupCache(userId, groups, 'remove');
            }
          }
          
          // 添加短暂延迟，避免请求过于频繁
          await new Promise(resolve => setTimeout(resolve, 500));
        } catch (error) {
          this.log(`为用户 ${userId} 移除权限失败: ${error.message}`, 'error');
          results.push({ userId, success: false, error: error.message });
          failCount++;
        }
      }
      
      this.log(`权限移除完成，成功 ${successCount} 个，失败 ${failCount} 个`);
      return results;
    } catch (error) {
      this.log(`权限移除失败: ${error.message}`, 'error');
      throw error;
    }
  },
  
  // 更新用户组缓存
  async updateUserGroupCache(userId, groups, action) {
    try {
      for (const group of groups) {
        // 获取当前用户组缓存
        let cachedUserIds = await LocalCacheManager.getGroupCache(group) || [];
        
        if (action === 'add') {
          // 添加用户到用户组缓存
          if (!cachedUserIds.includes(userId)) {
            cachedUserIds.push(userId);
            await LocalCacheManager.setGroupCache(group, cachedUserIds);
            this.log(`用户 ${userId} 已添加到用户组 ${group} 的缓存中`);
          }
        } else if (action === 'remove') {
          // 从用户组缓存中移除用户
          const index = cachedUserIds.indexOf(userId);
          if (index !== -1) {
            cachedUserIds.splice(index, 1);
            await LocalCacheManager.setGroupCache(group, cachedUserIds);
            this.log(`用户 ${userId} 已从用户组 ${group} 的缓存中移除`);
          }
        }
      }
    } catch (error) {
      this.log(`更新用户组缓存失败: ${error.message}`, 'error');
    }
  }
};

// 初始化Vue应用的函数
function initVueApp() {
  console.log('initVueApp');
  // Vue3应用
  const { createApp, ref, computed, onMounted, watch, nextTick } = Vue;

  createApp({
    setup() {
      // 响应式数据
      const siteName = ref('');
      const apiPath = computed(() => {
        return siteName.value ? `https://wiki.biligame.com/${siteName.value}/api.php` : '';
      });
      const activeInputTab = ref('query');
      const activeContentTab = ref('users');
      const selectedQueryGroups = ref([]);
      const excludedQueryGroups = ref([]);
      const selectedCacheGroups = ref([]);
      const selectedManageGroups = ref([]);
      const detectedUserGroups = ref([]);
      const inputUserIds = ref('');
      const users = ref([]);
      const selectedUsers = ref([]);
      const selectAllUsers = ref(false);
      const logs = ref([]);
      const isFetching = ref(false);
      const isManaging = ref(false);
      const isAppInitializing = ref(true);
      const autoCache = ref(false);
      const permissionExpiry = ref('');
      const logContainer = ref(null);
      
      // 进度条相关状态
      const showProgress = ref(false);
      const progressPercentage = ref(0);
      const progressText = ref('');
      const progressDetails = ref('');
      
      // 计算属性
      const mainUserGroups = computed(() => {
        return PermissionManager.mainUserGroups;
      });
      
      const hasSelectedUsers = computed(() => {
        return selectedUsers.value.length > 0;
      });
      
      // 方法
      const addLog = (message, type = 'info') => {
        const timestamp = new Date().toLocaleTimeString();
        logs.value.push(`[${timestamp}] ${type.toUpperCase()}: ${message}`);
        
        // 自动滚动到底部
        nextTick(() => {
          if (logContainer.value) {
            logContainer.value.scrollTop = logContainer.value.scrollHeight;
          }
        });
      };
      
      // 进度条管理方法
      const showProgressBar = (text, details = '') => {
        showProgress.value = true;
        progressText.value = text;
        progressDetails.value = details;
        progressPercentage.value = 0;
      };
      
      const updateProgress = (percentage, text = '', details = '') => {
        progressPercentage.value = Math.min(100, Math.max(0, percentage));
        if (text) progressText.value = text;
        if (details) progressDetails.value = details;
      };
      
      const hideProgressBar = () => {
        showProgress.value = false;
        progressPercentage.value = 0;
        progressText.value = '';
        progressDetails.value = '';
      };
      
      // 格式化过期时间
      const formatExpiryTime = (dateString) => {
        if (!dateString) {
          return null;
        }
        
        // 验证日期格式
        const date = new Date(dateString);
        if (isNaN(date.getTime())) {
          addLog('无效的日期格式', 'error');
          throw new Error('无效的日期格式');
        }
        
        // 检查日期不能是过去的日期
        const today = new Date();
        today.setHours(0, 0, 0, 0); // 设置为今天的开始
        if (date < today) {
          addLog('过期日期不能是过去的日期', 'error');
          throw new Error('过期日期不能是过去的日期');
        }
        
        // 将日期字符串转换为该日 23:59:59 的时间戳
        date.setHours(23, 59, 59, 999);
        
        addLog(`权限过期时间设置为: ${date.toLocaleString()}`);
        
        // 返回 ISO 格式的字符串
        return date.toISOString();
      };
      
      // 计算用户组权限剩余天数
      const calculateGroupExpiry = (user, groupValue) => {
        if (!user.groups?.includes(groupValue)) return null;
        
        // 优先使用 groupmemberships 信息
        const membership = user.groupmemberships?.find(m => m.group === groupValue);
        if (membership) {
          if (!membership.expiry || membership.expiry === 'infinity') return 'permanent';
          
          try {
            const expiryDate = new Date(membership.expiry);
            if (isNaN(expiryDate.getTime())) return 'permanent';
            
            const diffDays = Math.ceil((expiryDate - new Date()) / (1000 * 60 * 60 * 24));
            return diffDays <= 0 ? 'expired' : diffDays;
          } catch {
            return 'permanent';
          }
        }
        
        // 回退到使用 rights 信息
        const groupRight = user.rights?.find(right => right.startsWith(groupValue) && right.includes('@'));
        if (groupRight) {
          const expiryString = groupRight.split('@')[1];
          if (expiryString && expiryString !== 'infinity') {
            try {
              const expiryDate = new Date(expiryString);
              if (!isNaN(expiryDate.getTime())) {
                const diffDays = Math.ceil((expiryDate - new Date()) / (1000 * 60 * 60 * 24));
                return diffDays <= 0 ? 'expired' : diffDays;
              }
            } catch {}
          }
        }
        
        return 'permanent';
      };
      
      // 设置各种管理器的日志函数
      LocalCacheManager.setLogFunction(addLog);
      BilibiliUserManager.setLogFunction(addLog);
      PermissionManager.setLogFunction(addLog);
      
      // 设置自动缓存状态
      watch(autoCache, (newValue) => {
        window.autoCache = newValue;
        addLog(`自动缓存已${newValue ? '开启' : '关闭'}`);
      });
      
      // 切换输入标签页
      const switchInputTab = (tab) => {
        activeInputTab.value = tab;
      };
      
      // 切换内容标签页
      const switchContentTab = (tab) => {
        activeContentTab.value = tab;
      };
      
      // 三态复选框相关方法
      const getQueryGroupState = (groupValue) => {
        if (selectedQueryGroups.value.includes(groupValue)) {
          return 'include';
        } else if (excludedQueryGroups.value.includes(groupValue)) {
          return 'exclude';
        } else {
          return 'none';
        }
      };
      
      const getQueryGroupStateIcon = (groupValue) => {
        const state = getQueryGroupState(groupValue);
        switch (state) {
          case 'include': return '✓';
          case 'exclude': return '✗';
          default: return '○';
        }
      };
      
      const getQueryGroupStateTitle = (groupValue) => {
        const state = getQueryGroupState(groupValue);
        switch (state) {
          case 'include': return '参与查询（OR）';
          case 'exclude': return '排除查询';
          default: return '不参与查询';
        }
      };
      
      const toggleQueryGroupState = (groupValue) => {
        const currentState = getQueryGroupState(groupValue);
        
        // 移除所有状态
        const includeIndex = selectedQueryGroups.value.indexOf(groupValue);
        const excludeIndex = excludedQueryGroups.value.indexOf(groupValue);
        
        if (includeIndex !== -1) selectedQueryGroups.value.splice(includeIndex, 1);
        if (excludeIndex !== -1) excludedQueryGroups.value.splice(excludeIndex, 1);
        
        // 切换到下一个状态
        switch (currentState) {
          case 'none':
            selectedQueryGroups.value.push(groupValue);
            break;
          case 'include':
            excludedQueryGroups.value.push(groupValue);
            break;
          case 'exclude':
            // 回到none状态，什么都不做
            break;
        }
      };
      
      // 根据用户组查询用户
      const queryUsersByGroups = async () => {
        if (!apiPath.value || (selectedQueryGroups.value.length === 0 && excludedQueryGroups.value.length === 0)) {
          addLog(!apiPath.value ? '请输入站点名称' : '请选择至少一个用户组进行查询或排除', 'error');
          return;
        }
        
        isFetching.value = true;
        users.value = [];
        selectedUsers.value = [];
        selectAllUsers.value = false;
        
        const includeGroups = selectedQueryGroups.value;
        const excludeGroups = excludedQueryGroups.value;
        
        showProgressBar('正在查询用户组...', `包含用户组: ${includeGroups.join(', ') || '无'}, 排除用户组: ${excludeGroups.join(', ') || '无'}`);
        
        try {
          let resultUsers = [];
          
          if (includeGroups.length > 0) {
            updateProgress(10, '正在分别查询各用户组...', `共需查询 ${includeGroups.length} 个用户组`);
            resultUsers = await PermissionManager.queryUsersByGroups(apiPath.value, includeGroups);
            addLog(`从包含的用户组查询到 ${resultUsers.length} 个用户`);
          } else {
            // 如果没有包含的用户组，需要查询所有用户然后排除
            updateProgress(10, '正在查询所有用户...', '将查询所有用户组然后进行排除');
            const allGroups = PermissionManager.mainUserGroups.map(g => g.value);
            resultUsers = await PermissionManager.queryUsersByGroups(apiPath.value, allGroups);
            addLog(`查询所有用户组得到 ${resultUsers.length} 个用户`);
          }
          
          // 如果有排除的用户组，过滤掉包含这些用户组的用户
          if (excludeGroups.length > 0) {
            updateProgress(60, '正在排除用户组...', `排除包含以下用户组的用户: ${excludeGroups.join(', ')}`);
            const originalCount = resultUsers.length;
            resultUsers = resultUsers.filter(user => {
              return !excludeGroups.some(excludeGroup => user.groups?.includes(excludeGroup));
            });
            addLog(`排除后剩余 ${resultUsers.length} 个用户（排除了 ${originalCount - resultUsers.length} 个用户）`);
          }
          
          updateProgress(80, '正在获取B站用户信息...', `已获取 ${resultUsers.length} 个用户`);
          await fetchBilibiliUserInfo(resultUsers);
          
          updateProgress(100, '查询完成');
          users.value = resultUsers;
          addLog(`最终查询到 ${resultUsers.length} 个用户`);
          
          // 延迟隐藏进度条
          setTimeout(() => {
            hideProgressBar();
          }, 1000);
        } catch (error) {
          addLog(`查询失败: ${error.message}`, 'error');
          hideProgressBar();
        } finally {
          isFetching.value = false;
        }
      };
      
      // 根据用户ID查询用户
      const queryUsersByIds = async () => {
        if (!apiPath.value || !inputUserIds.value.trim()) {
          addLog(!apiPath.value ? '请输入站点名称' : '请输入B站ID', 'error');
          return;
        }
        
        const userIds = inputUserIds.value.split(',').map(id => id.trim()).filter(id => id);
        if (userIds.length === 0) {
          addLog('请输入有效的B站ID', 'error');
          return;
        }
        
        isFetching.value = true;
        users.value = [];
        selectedUsers.value = [];
        selectAllUsers.value = false;
        
        showProgressBar('正在查询用户...', `查询用户ID: ${userIds.join(', ')}`);
        
        try {
          updateProgress(30, '正在获取用户信息...');
          const resultUsers = await PermissionManager.queryUsersByIds(apiPath.value, userIds);
          
          updateProgress(70, '正在获取B站用户信息...', `已获取 ${resultUsers.length} 个用户`);
          await fetchBilibiliUserInfo(resultUsers);
          
          updateProgress(100, '查询完成');
          users.value = resultUsers;
          detectUserGroups(); // 自动检测用户组
          addLog(`查询到 ${resultUsers.length} 个用户`);
          
          // 延迟隐藏进度条
          setTimeout(() => {
            hideProgressBar();
          }, 1000);
        } catch (error) {
          addLog(`查询失败: ${error.message}`, 'error');
          hideProgressBar();
        } finally {
          isFetching.value = false;
        }
      };
      
      // 从缓存查询用户
      const queryUsersFromCache = async () => {
        if (selectedCacheGroups.value.length === 0) {
          addLog('请选择至少一个用户组', 'error');
          return;
        }
        
        isFetching.value = true;
        users.value = [];
        selectedUsers.value = [];
        selectAllUsers.value = false;
        
        showProgressBar('正在从缓存查询用户...', `查询用户组: ${selectedCacheGroups.value.join(', ')}`);
        
        try {
          updateProgress(20, '正在读取缓存数据...');
          const allUserIds = new Set();
          for (const group of selectedCacheGroups.value) {
            const cachedUserIds = await LocalCacheManager.getGroupCache(group) || [];
            cachedUserIds.forEach(userId => allUserIds.add(userId));
          }
          
          if (allUserIds.size === 0) {
            addLog('缓存中没有找到用户');
            hideProgressBar();
            return;
          }
          
          updateProgress(40, '正在获取用户信息...', `从缓存找到 ${allUserIds.size} 个用户`);
          const resultUsers = await PermissionManager.queryUsersByIds(apiPath.value, Array.from(allUserIds));
          
          updateProgress(80, '正在获取B站用户信息...', `已获取 ${resultUsers.length} 个用户`);
          await fetchBilibiliUserInfo(resultUsers);
          
          updateProgress(100, '查询完成');
          users.value = resultUsers;
          detectUserGroups(); // 自动检测用户组
          addLog(`从缓存查询到 ${resultUsers.length} 个用户`);
          
          // 延迟隐藏进度条
          setTimeout(() => {
            hideProgressBar();
          }, 1000);
        } catch (error) {
          addLog(`查询失败: ${error.message}`, 'error');
          hideProgressBar();
        } finally {
          isFetching.value = false;
        }
      };
      
      // 检测当前用户列表中的用户组
      const detectUserGroups = () => {
        if (users.value.length === 0) {
          detectedUserGroups.value = [];
          return;
        }
        
        const groupCounts = {};
        
        // 统计每个用户组中的用户数量
        users.value.forEach(user => {
          if (user.groups && Array.isArray(user.groups)) {
            user.groups.forEach(group => {
              if (groupCounts[group]) {
                groupCounts[group]++;
              } else {
                groupCounts[group] = 1;
              }
            });
          }
        });
        
        // 转换为数组并排序
        detectedUserGroups.value = Object.entries(groupCounts)
          .map(([groupValue, count]) => {
            const groupInfo = PermissionManager.mainUserGroups.find(g => g.value === groupValue);
            return {
              value: groupValue,
              label: groupInfo ? groupInfo.label : groupValue,
              count: count
            };
          })
          .sort((a, b) => b.count - a.count); // 按用户数量降序排列
      };
      
      // 将当前用户列表添加到缓存
      const addUsersToCache = async () => {
        if (users.value.length === 0) {
          addLog('当前没有用户数据，请先查询用户', 'error');
          return;
        }
        
        // 检测用户组
        detectUserGroups();
        
        if (detectedUserGroups.value.length === 0) {
          addLog('当前用户列表中没有检测到用户组，无法添加缓存', 'error');
          return;
        }
        
        isFetching.value = true;
        
        const groupLabels = detectedUserGroups.value.map(g => `${g.label}(${g.count}人)`).join(', ');
        showProgressBar('正在添加用户到缓存...', `检测到用户组: ${groupLabels}, 总用户数: ${users.value.length}`);
        
        try {
          const userIds = users.value.map(user => user.name);
          let totalAdded = 0;
          let processedGroups = 0;
          
          for (let i = 0; i < detectedUserGroups.value.length; i++) {
            const group = detectedUserGroups.value[i];
            updateProgress(
              Math.floor((i / detectedUserGroups.value.length) * 80) + 10,
              `正在添加到用户组: ${group.label}`,
              `进度: ${i + 1}/${detectedUserGroups.value.length}`
            );
            
            // 获取当前用户组缓存
            let cachedUserIds = await LocalCacheManager.getGroupCache(group.value) || [];
            
            // 只添加属于该用户组的用户
            const groupUserIds = users.value
              .filter(user => user.groups && user.groups.includes(group.value))
              .map(user => user.name);
            
            // 添加新用户ID（去重）
            let addedCount = 0;
            groupUserIds.forEach(userId => {
              if (!cachedUserIds.includes(userId)) {
                cachedUserIds.push(userId);
                addedCount++;
              }
            });
            
            // 保存更新后的缓存
            await LocalCacheManager.setGroupCache(group.value, cachedUserIds);
            totalAdded += addedCount;
            processedGroups++;
            
            addLog(`用户组 ${group.label} 添加了 ${addedCount} 个新用户，总计 ${cachedUserIds.length} 个用户`);
          }
          
          updateProgress(100, '缓存添加完成');
          addLog(`缓存添加完成，共为 ${processedGroups} 个用户组添加了 ${totalAdded} 个用户`);
          
          // 延迟隐藏进度条
          setTimeout(() => {
            hideProgressBar();
          }, 1000);
        } catch (error) {
          addLog(`添加缓存失败: ${error.message}`, 'error');
          hideProgressBar();
        } finally {
          isFetching.value = false;
        }
      };
      
      // 获取B站用户信息
      const fetchBilibiliUserInfo = async (userList) => {
        // 提取所有B站用户ID（注意：user.name实际上是B站的ID）
        const biliUserIds = userList.map(user => user.name).filter(id => id);
        
        if (biliUserIds.length === 0) {
          addLog('未检测到B站用户ID');
          return;
        }
        
        addLog(`检测到 ${biliUserIds.length} 个B站用户ID，开始获取用户信息`);
        
        // 使用B站用户管理器获取用户信息
        const results = await BilibiliUserManager.getUsersInfo(biliUserIds);
        
        // 更新用户列表中的用户信息
        userList.forEach(user => {
          if (user.name && results[user.name]) {
            user.biliInfo = results[user.name];
          }
        });
        
        addLog(`B站用户信息获取完成，成功获取 ${Object.values(results).filter(info => info !== null).length} 个用户信息`);
      };
      
      // 添加权限
      const addPermissions = async () => {
        if (!apiPath.value || selectedUsers.value.length === 0 || selectedManageGroups.value.length === 0) {
          addLog(!apiPath.value ? '请输入站点名称' : 
                 selectedUsers.value.length === 0 ? '请选择至少一个用户' : '请选择至少一个用户组', 'error');
          return;
        }
        
        isManaging.value = true;
        
        showProgressBar('正在添加权限...', `用户: ${selectedUsers.value.length} 个，用户组: ${selectedManageGroups.value.join(', ')}`);
        
        try {
          let expiryTime = null;
          if (permissionExpiry.value) {
            try {
              expiryTime = formatExpiryTime(permissionExpiry.value);
            } catch (error) {
              addLog(`日期验证失败: ${error.message}`, 'error');
              hideProgressBar();
              return;
            }
          }
          
          updateProgress(20, '正在获取权限令牌...');
          const results = await PermissionManager.addPermissions(apiPath.value, selectedUsers.value, selectedManageGroups.value, expiryTime);
          
          updateProgress(90, '正在处理结果...');
          const successCount = results.filter(r => r.success).length;
          const failCount = results.filter(r => !r.success).length;
          
          updateProgress(100, '权限添加完成');
          addLog(`权限添加完成，成功 ${successCount} 个，失败 ${failCount} 个`);
          
          if (successCount > 0) {
            updateProgress(100, '正在刷新用户列表...');
            await refreshCurrentUsers();
          }
          
          // 延迟隐藏进度条
          setTimeout(() => {
            hideProgressBar();
          }, 1500);
        } catch (error) {
          addLog(`权限添加失败: ${error.message}`, 'error');
          hideProgressBar();
        } finally {
          isManaging.value = false;
        }
      };
      
      // 移除权限
      const removePermissions = async () => {
        if (!apiPath.value || selectedUsers.value.length === 0 || selectedManageGroups.value.length === 0) {
          addLog(!apiPath.value ? '请输入站点名称' : 
                 selectedUsers.value.length === 0 ? '请选择至少一个用户' : '请选择至少一个用户组', 'error');
          return;
        }
        
        isManaging.value = true;
        
        showProgressBar('正在移除权限...', `用户: ${selectedUsers.value.length} 个，用户组: ${selectedManageGroups.value.join(', ')}`);
        
        try {
          updateProgress(20, '正在获取权限令牌...');
          const results = await PermissionManager.removePermissions(apiPath.value, selectedUsers.value, selectedManageGroups.value);
          
          updateProgress(90, '正在处理结果...');
          const successCount = results.filter(r => r.success).length;
          const failCount = results.filter(r => !r.success).length;
          
          updateProgress(100, '权限移除完成');
          addLog(`权限移除完成，成功 ${successCount} 个，失败 ${failCount} 个`);
          
          if (successCount > 0) {
            updateProgress(100, '正在刷新用户列表...');
            await refreshCurrentUsers();
          }
          
          // 延迟隐藏进度条
          setTimeout(() => {
            hideProgressBar();
          }, 1500);
        } catch (error) {
          addLog(`权限移除失败: ${error.message}`, 'error');
          hideProgressBar();
        } finally {
          isManaging.value = false;
        }
      };
      
      // 刷新当前用户列表
      const refreshCurrentUsers = async () => {
        if (users.value.length === 0) return;
        
        try {
          const userNames = users.value.map(user => user.name);
          const refreshedUsers = await PermissionManager.queryUsersByIds(apiPath.value, userNames);
          await fetchBilibiliUserInfo(refreshedUsers);
          
          users.value = refreshedUsers;
          selectedUsers.value = selectedUsers.value.filter(name => refreshedUsers.some(user => user.name === name));
          
          addLog('用户列表已刷新');
        } catch (error) {
          addLog(`刷新用户列表失败: ${error.message}`, 'error');
        }
      };
      
      // 全选/取消全选用户
      const toggleSelectAllUsers = () => {
        selectedUsers.value = selectAllUsers.value ? users.value.map(user => user.name) : [];
      };
      
      // 监听用户选择变化，更新全选状态
      watch(selectedUsers, (newSelectedUsers) => {
        selectAllUsers.value = users.value.length > 0 && newSelectedUsers.length === users.value.length;
      });
      
      // 生命周期钩子
      onMounted(() => {
        const urlMatch = window.location.href.match(/https:\/\/wiki\.biligame\.com\/([^\/]+)\//);
        if (urlMatch?.[1]) {
          siteName.value = urlMatch[1];
          addLog(`已从当前URL提取站点名称: ${siteName.value}`);
        }
        
        window.autoCache = autoCache.value;
        addLog('应用已初始化');
        
        setTimeout(() => {
          isAppInitializing.value = false;
          addLog('应用加载完成，可以开始使用');
        }, 500);
      });
      
      // 返回响应式数据和方法
      return {
        siteName,
        apiPath,
        activeInputTab,
        activeContentTab,
        selectedQueryGroups,
        excludedQueryGroups,
        selectedCacheGroups,
        selectedManageGroups,
        detectedUserGroups,
        inputUserIds,
        users,
        selectedUsers,
        selectAllUsers,
        logs,
        isFetching,
        isManaging,
        isAppInitializing,
        autoCache,
        permissionExpiry,
        logContainer,
        mainUserGroups,
        hasSelectedUsers,
        // 进度条相关状态
        showProgress,
        progressPercentage,
        progressText,
        progressDetails,
        switchInputTab,
        switchContentTab,
        queryUsersByGroups,
        queryUsersByIds,
        queryUsersFromCache,
        addUsersToCache,
        addPermissions,
        removePermissions,
        toggleSelectAllUsers,
        formatExpiryTime,
        calculateGroupExpiry,
        // 三态复选框相关方法
        getQueryGroupState,
        getQueryGroupStateIcon,
        getQueryGroupStateTitle,
        toggleQueryGroupState
      };
    }
  }).mount('.mp-container');
}

// 立即执行函数，包含页面加载检查逻辑
(function() {
  let timer;
  
  // 定义检查函数
  function checkPageLoad() {
    if (document.readyState === 'complete') {
      // 页面加载完成，清除定时器并初始化Vue应用
      clearTimeout(timer);
      initVueApp();
    } else {
      // 页面未加载完成，设置定时器继续检查
      timer = setTimeout(checkPageLoad, 100);
    }
  }
  
  // 开始检查页面加载状态
  checkPageLoad();
})();
</script>
<style>
/* 容器样式 */
.mp-container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 站点信息样式 */
.site-info {
  margin-bottom: 20px;
  padding: 10px 15px;
  background-color: #f8f9fa;
  border-left: 4px solid #4CAF50;
  border-radius: 4px;
}

.site-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* Loading指示器样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  text-align: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 输入区域样式 */
.input-area {
  margin-bottom: 24px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

/* 进度条区域样式 */
.progress-area {
  margin-bottom: 24px;
  padding: 15px;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

.progress-container {
  max-width: 100%;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #45a049);
  border-radius: 10px;
  transition: width 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}

.progress-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 5px;
}

.progress-details {
  font-size: 12px;
  color: #666;
  text-align: center;
  font-style: italic;
}

/* Tab样式 */
.tab-headers {
  display: flex;
  background-color: #f1f1f1;
  border-bottom: 1px solid #e0e0e0;
}

.tab-header {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab-header:hover {
  background-color: #e9e9e9;
}

.tab-header.active {
  border-bottom: 2px solid #4CAF50;
  font-weight: bold;
  background-color: #fff;
}

.tab-content {
  padding: 15px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* 表单样式 */
.form-row {
  margin-bottom: 15px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.form-group input[type="date"] {
  width: 200px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-help {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

/* 用户组复选框样式 */
.user-group-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.checkbox-item {
  display: flex;
  align-items: center;
}

.checkbox-item input[type="checkbox"] {
  margin-right: 5px;
}

/* 三态复选框样式 */
.tri-state-checkbox {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  min-width: 120px;
  justify-content: center;
}

.tri-state-checkbox:hover {
  border-color: #4CAF50;
  background-color: #f8f9fa;
}

.tri-state-checkbox.none {
  background-color: #f5f5f5;
  border-color: #ddd;
  color: #666;
}

.tri-state-checkbox.include {
  background-color: #e8f5e8;
  border-color: #4CAF50;
  color: #2e7d32;
}

.tri-state-checkbox.exclude {
  background-color: #ffebee;
  border-color: #f44336;
  color: #c62828;
}

.state-icon {
  font-size: 16px;
  font-weight: bold;
  margin-right: 6px;
  min-width: 16px;
  text-align: center;
}

.state-label {
  font-size: 14px;
  font-weight: 500;
}

/* 按钮样式 */
.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.button-group button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button-group button:hover {
  background-color: #45a049;
}

.button-group button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.cache-button {
  background-color: #2196F3 !important;
}

.cache-button:hover:not(:disabled) {
  background-color: #1976D2 !important;
}

/* 缓存信息样式 */
.cache-info {
  margin-top: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

.cache-info h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.detected-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.group-tag {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.no-groups {
  color: #666;
  font-style: italic;
  font-size: 12px;
}

.cache-help {
  margin: 0;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

/* 内容区域样式 */
.content-area {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

/* 无数据消息样式 */
.no-data-message {
  text-align: center;
  padding: 20px;
  color: #666;
  font-style: italic;
}

/* 用户表格样式 */
.users-table-container {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th, .users-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.users-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.users-table tr:hover {
  background-color: #f9f9f9;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #666;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: bold;
}

.user-id {
  font-size: 12px;
  color: #666;
}

/* 用户组单元格样式 */
.group-cell {
  text-align: center;
}

.group-indicator {
  font-size: 14px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
}

.group-indicator.permanent {
  color: #4CAF50;
  background-color: #e8f5e8;
}

.group-indicator.days {
  color: #ff9800;
  background-color: #fff3e0;
}

.group-indicator.expired {
  color: #f44336;
  background-color: #ffebee;
}

/* 日志容器样式 */
.log-container {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

/* 手机端响应式布局 */
@media (max-width: 768px) {
  .mp-container {
    padding: 10px;
  }
  
  .user-group-checkboxes {
    flex-direction: column;
    gap: 10px;
  }
  
  .button-group {
    flex-direction: column;
  }
  
  .button-group button {
    width: 100%;
  }
  
  .users-table {
    font-size: 14px;
  }
  
  .user-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .form-group input[type="date"] {
    width: 100%;
  }
}
</style>
</includeonly>