Merge branch 'feature/multi-user-ranking' into master for v1.1.0 release

Author: TARS

CHANGELOG.md

@@ -11,15 +11,36 @@
 
 ### 计划功能
 
-- **多人 PK 模式**：并排对比多个用户的数据
-- **排行榜视图**：用户排名系统
 - **活跃热力图**：可视化展示提交频率时间线
 - **题目标签分析**：按分类/标签统计解题情况
 - **连续打卡追踪**：记录连续刷题天数
 - **数据导出功能**：支持 CSV/JSON 格式导出统计
 
 ---
 
+## [1.1.0] - 2026-02-06
+
+### 新增
+
+- **多人竞技场**：查询 2 人及以上时自动显示排名面板
+  - 7 维度排名：刷题数、积分、效率、难度、活跃度、夜猫子、速度
+  - 趣味头衔系统：根据排名百分比动态分配头衔（题海战术家、一次过、深夜战神等）
+  - PK 模式：任选两人 1v1 全维度对比，自动统计获胜局数
+  - 排行榜：实时差距计算，显示与前一名的具体差距
+- **排名面板可折叠**：默认折叠显示榜首信息，点击展开查看完整功能
+- **紧凑排行榜**：行式布局替代卡片式，提高信息密度，减少篇幅占用
+
+### 变更
+
+- **国际化完善**：新增排名相关翻译（中英文）
+- **移动端适配优化**：排名 Tab 支持横向滚动，小屏幕友好
+
+---
+
+## [1.0.4] - 2026-02-06
+
+---
+
 ## [1.0.4] - 2026-02-06
 
 ### 变更

app-en-mobile.png

@@ -0,0 +1,87 @@
+const puppeteer = require('puppeteer-core');
+
+const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+
+async function capture() {
+  const browser = await puppeteer.launch({
+    headless: 'new',
+    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 2500 });
+  
+  // 访问应用
+  await page.goto('http://localhost:5174/', { waitUntil: 'networkidle0' });
+  await sleep(3000);
+  
+  // 点击"最近30天"按钮
+  const buttons = await page.$$('button');
+  for (const btn of buttons) {
+    const text = await btn.evaluate(el => el.textContent);
+    if (text?.includes('最近30天') || text?.includes('Last 30 Days')) {
+      await btn.click();
+      console.log('Clicked 最近30天');
+      break;
+    }
+  }
+  await sleep(1000);
+  
+  // 输入三个用户
+  const input = await page.$('input');
+  if (input) {
+    await input.click();
+    await input.type('yume7,jiangly,tourist');
+    await sleep(1000);
+    
+    // 点击查询按钮
+    const searchButtons = await page.$$('button');
+    for (const btn of searchButtons) {
+      const text = await btn.evaluate(el => el.textContent);
+      if (text?.includes('查询') || text?.includes('Search')) {
+        await btn.click();
+        console.log('Clicked search');
+        break;
+      }
+    }
+    
+    // 等待加载完成
+    await sleep(12000);
+    
+    // 截图 - 中文 PC 完整页面
+    await page.screenshot({ path: 'final-zh-3users.png', fullPage: true });
+    console.log('3 users screenshot saved');
+    
+    // 滚动到 PK 区域
+    await page.evaluate(() => {
+      const pkTitle = Array.from(document.querySelectorAll('h3')).find(el => el.textContent.includes('PK') || el.textContent.includes('对比'));
+      if (pkTitle) pkTitle.scrollIntoView({ behavior: 'instant', block: 'start' });
+    });
+    await sleep(1000);
+    
+    // 确保 PK 区域是 yume7 vs jiangly（可能需要选择）
+    // 先截图当前状态
+    await page.screenshot({ path: 'final-pk-yume7-jiangly.png', fullPage: false });
+    console.log('PK screenshot saved');
+    
+    // 尝试设置挑战者为 yume7，对手为 jiangly
+    const selects = await page.$$('select');
+    if (selects.length >= 2) {
+      // 第一个 select 是挑战者
+      await selects[0].select('yume7');
+      await sleep(500);
+      // 第二个 select 是对手
+      await selects[1].select('jiangly');
+      await sleep(1000);
+      
+      await page.screenshot({ path: 'final-pk-result.png', fullPage: false });
+      console.log('PK result screenshot saved');
+    }
+  }
+
+  await browser.close();
+  console.log('All done');
+}
+
+capture().catch(console.error);

app-en-ranking.png

@@ -0,0 +1,60 @@
+const puppeteer = require('puppeteer-core');
+
+const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+
+async function captureScreenshots() {
+  const browser = await puppeteer.launch({
+    headless: 'new',
+    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+
+  // 设置视口尺寸
+  const viewports = {
+    pc: { width: 1280, height: 900 },
+    mobile: { width: 375, height: 812 }
+  };
+
+  const scenarios = [
+    { name: 'zh-pc', lang: 'zh-CN', viewport: viewports.pc },
+    { name: 'en-pc', lang: 'en', viewport: viewports.pc },
+    { name: 'zh-mobile', lang: 'zh-CN', viewport: viewports.mobile },
+    { name: 'en-mobile', lang: 'en', viewport: viewports.mobile },
+  ];
+
+  for (const scenario of scenarios) {
+    const page = await browser.newPage();
+    await page.setViewport(scenario.viewport);
+    
+    // 设置语言
+    await page.setExtraHTTPHeaders({
+      'Accept-Language': scenario.lang
+    });
+    
+    // 设置 localStorage 语言
+    await page.evaluateOnNewDocument((lang) => {
+      localStorage.setItem('i18nextLng', lang);
+    }, scenario.lang);
+    
+    await page.goto('http://localhost:8080/ranking-preview.html', { waitUntil: 'networkidle0' });
+    await sleep(1000);
+    
+    // 如果是英文模式，点击切换语言按钮（假设有）
+    if (scenario.lang === 'en') {
+      // 在预览页面，我需要模拟语言切换
+      // 由于预览页面是静态HTML，我会直接截图
+    }
+    
+    await page.screenshot({ 
+      path: `screenshot-${scenario.name}.png`, 
+      fullPage: true 
+    });
+    
+    console.log(`Screenshot saved: screenshot-${scenario.name}.png`);
+    await page.close();
+  }
+
+  await browser.close();
+}
+
+captureScreenshots().catch(console.error);

app-zh-home.png

@@ -0,0 +1,58 @@
+const puppeteer = require('puppeteer-core');
+
+const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+
+async function captureRanking() {
+  const browser = await puppeteer.launch({
+    headless: 'new',
+    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 2500 });
+  
+  // 访问应用
+  await page.goto('http://localhost:5174/', { waitUntil: 'networkidle0' });
+  await sleep(3000);
+  
+  // 查找输入框并输入用户
+  const input = await page.$('input');
+  if (input) {
+    await input.type('yume7,jiangly');
+    await sleep(1000);
+    
+    // 查找并点击查询按钮
+    const buttons = await page.$$('button');
+    for (const btn of buttons) {
+      const text = await btn.evaluate(el => el.textContent);
+      if (text?.includes('查询') || text?.includes('Search')) {
+        await btn.click();
+        console.log('Clicked search button');
+        break;
+      }
+    }
+    
+    // 等待加载完成 - 等待更长时间让API返回数据
+    console.log('Waiting for data to load...');
+    await sleep(10000);
+    
+    // 截图中文PC
+    await page.screenshot({ path: 'ranking-zh-pc-full.png', fullPage: true });
+    console.log('Chinese PC ranking screenshot saved');
+    
+    // 滚动页面确保看到排名区域
+    await page.evaluate(() => window.scrollTo(0, 600));
+    await sleep(1000);
+    await page.screenshot({ path: 'ranking-zh-pc-scroll.png', fullPage: false });
+    console.log('Chinese PC scrolled screenshot saved');
+  }
+
+  await browser.close();
+  console.log('All screenshots done');
+}
+
+captureRanking().catch(err => {
+  console.error(err);
+  process.exit(1);
+});

app-zh-mobile.png

@@ -0,0 +1,69 @@
+const puppeteer = require('puppeteer-core');
+
+const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+
+async function capture() {
+  const browser = await puppeteer.launch({
+    headless: 'new',
+    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 1200 });
+  
+  await page.goto('http://localhost:5174/', { waitUntil: 'networkidle0' });
+  await sleep(3000);
+  
+  // 点击最近30天
+  const buttons = await page.$$('button');
+  for (const btn of buttons) {
+    const text = await btn.evaluate(el => el.textContent);
+    if (text?.includes('最近30天')) {
+      await btn.click();
+      break;
+    }
+  }
+  await sleep(500);
+  
+  // 输入3个用户
+  const input = await page.$('input');
+  if (input) {
+    await input.type('yume7,jiangly,tourist');
+    await sleep(500);
+    
+    const searchButtons = await page.$$('button');
+    for (const btn of searchButtons) {
+      const text = await btn.evaluate(el => el.textContent);
+      if (text?.includes('查询')) {
+        await btn.click();
+        break;
+      }
+    }
+    
+    await sleep(12000);
+    
+    // 截图 - 折叠状态
+    await page.screenshot({ path: 'optimized-collapsed.png', fullPage: false });
+    console.log('Collapsed screenshot saved');
+    
+    // 找到并点击展开按钮
+    const expandButtons = await page.$$('button');
+    for (const btn of expandButtons) {
+      const text = await btn.evaluate(el => el.textContent);
+      if (text?.includes('展开') || text?.includes('多人竞技场')) {
+        await btn.click();
+        console.log('Clicked expand');
+        break;
+      }
+    }
+    
+    await sleep(1000);
+    await page.screenshot({ path: 'optimized-expanded.png', fullPage: true });
+    console.log('Expanded screenshot saved');
+  }
+
+  await browser.close();
+}
+
+capture().catch(console.error);