feat: apply UI/storage/share optimizations and quota improvements

feat(frontend): unify landing style and add product/scenes/start pages
2026-02-12 18:02:57 +08:00 · 2026-02-12 18:02:28 +08:00
18 changed files with 5907 additions and 1454 deletions
--- a/backend/auth.js
+++ b/backend/auth.js
@@ -2,6 +2,8 @@ const jwt = require('jsonwebtoken');
 const crypto = require('crypto');
 const { UserDB } = require('./database');
 const { decryptSecret } = require('./utils/encryption');
+const DEFAULT_LOCAL_STORAGE_QUOTA_BYTES = 1024 * 1024 * 1024; // 1GB
+const DEFAULT_OSS_STORAGE_QUOTA_BYTES = 1024 * 1024 * 1024; // 1GB

 // JWT密钥（必须在环境变量中设置）
 const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key-change-in-production';
@@ -169,6 +171,11 @@ function authMiddleware(req, res, next) {
      });
    }

+    const rawOssQuota = Number(user.oss_storage_quota);
+    const effectiveOssQuota = Number.isFinite(rawOssQuota) && rawOssQuota > 0
+      ? rawOssQuota
+      : DEFAULT_OSS_STORAGE_QUOTA_BYTES;
+
    // 将用户信息附加到请求对象（包含所有存储相关字段）
    req.user = {
      id: user.id,
@@ -187,8 +194,10 @@ function authMiddleware(req, res, next) {
      // 存储相关字段
      storage_permission: user.storage_permission || 'oss_only',
      current_storage_type: user.current_storage_type || 'oss',
-      local_storage_quota: user.local_storage_quota || 1073741824,
+      local_storage_quota: user.local_storage_quota || DEFAULT_LOCAL_STORAGE_QUOTA_BYTES,
      local_storage_used: user.local_storage_used || 0,
+      oss_storage_quota: effectiveOssQuota,
+      storage_used: user.storage_used || 0,
      // 主题偏好
      theme_preference: user.theme_preference || null
    };
--- a/backend/database.js
+++ b/backend/database.js
@@ -37,6 +37,8 @@ console.log(`[数据库] 路径: ${dbPath}`);

 // 创建或连接数据库
 const db = new Database(dbPath);
+const DEFAULT_LOCAL_STORAGE_QUOTA_BYTES = 1024 * 1024 * 1024; // 1GB
+const DEFAULT_OSS_STORAGE_QUOTA_BYTES = 1024 * 1024 * 1024;   // 1GB

 // ===== 性能优化配置（P0 优先级修复） =====

@@ -525,7 +527,8 @@ const UserDB = {
      'has_oss_config': 'number',
      'is_verified': 'number',
      'local_storage_quota': 'number',
-      'local_storage_used': 'number'
+      'local_storage_used': 'number',
+      'oss_storage_quota': 'number'
    };

    const expectedType = FIELD_TYPES[fieldName];
@@ -585,6 +588,7 @@ const UserDB = {
      'current_storage_type': 'current_storage_type',
      'local_storage_quota': 'local_storage_quota',
      'local_storage_used': 'local_storage_used',
+      'oss_storage_quota': 'oss_storage_quota',

      // 偏好设置
      'theme_preference': 'theme_preference'
@@ -665,6 +669,7 @@ const UserDB = {
      'current_storage_type': 'current_storage_type',
      'local_storage_quota': 'local_storage_quota',
      'local_storage_used': 'local_storage_used',
+      'oss_storage_quota': 'oss_storage_quota',

      // 偏好设置
      'theme_preference': 'theme_preference'
@@ -717,7 +722,8 @@ const UserDB = {
          'current_storage_type': 'string', 'theme_preference': 'string',
          'is_admin': 'number', 'is_active': 'number', 'is_banned': 'number',
          'has_oss_config': 'number', 'is_verified': 'number',
-          'local_storage_quota': 'number', 'local_storage_used': 'number'
+          'local_storage_quota': 'number', 'local_storage_used': 'number',
+          'oss_storage_quota': 'number'
        }[key];

        console.warn(`[类型检查] 字段 ${key} 值类型不符: 期望 ${expectedType}, 实际 ${typeof value}, 值: ${JSON.stringify(value)}`);
@@ -883,11 +889,14 @@ const ShareDB = {
  // 根据分享码查找
  // 增强: 检查分享者是否被封禁（被封禁用户的分享不可访问）
  // ===== 性能优化（P0 优先级修复）：只查询必要字段，避免 N+1 查询 =====
-  // 移除了敏感字段：oss_access_key_id, oss_access_key_secret（不需要传递给分享访问者）
+  // 不返回 oss_access_key_id / oss_access_key_secret；
+  // share_password 仅用于服务端验证，不会透传给前端。
  findByCode(shareCode) {
    const result = db.prepare(`
      SELECT
        s.id, s.user_id, s.share_code, s.share_path, s.share_type,
+        s.storage_type,
+        s.share_password,
        s.view_count, s.download_count, s.created_at, s.expires_at,
        u.username,
        -- OSS 配置（访问分享文件所需）
@@ -1172,8 +1181,9 @@ function migrateToV2() {
      db.exec(`
        ALTER TABLE users ADD COLUMN storage_permission TEXT DEFAULT 'sftp_only';
        ALTER TABLE users ADD COLUMN current_storage_type TEXT DEFAULT 'sftp';
-        ALTER TABLE users ADD COLUMN local_storage_quota INTEGER DEFAULT 1073741824;
+        ALTER TABLE users ADD COLUMN local_storage_quota INTEGER DEFAULT ${DEFAULT_LOCAL_STORAGE_QUOTA_BYTES};
        ALTER TABLE users ADD COLUMN local_storage_used INTEGER DEFAULT 0;
+        ALTER TABLE users ADD COLUMN oss_storage_quota INTEGER DEFAULT ${DEFAULT_OSS_STORAGE_QUOTA_BYTES};
      `);

      console.log('[数据库迁移] ✓ 用户表已升级');
@@ -1247,6 +1257,34 @@ function migrateToOss() {
  }
 }

+
+// 数据库迁移 - OSS 存储配额字段
+function migrateOssQuotaField() {
+  try {
+    const columns = db.prepare("PRAGMA table_info(users)").all();
+    const hasOssStorageQuota = columns.some(col => col.name === 'oss_storage_quota');
+
+    if (!hasOssStorageQuota) {
+      console.log('[数据库迁移] 添加 oss_storage_quota 字段...');
+      db.exec(`ALTER TABLE users ADD COLUMN oss_storage_quota INTEGER DEFAULT ${DEFAULT_OSS_STORAGE_QUOTA_BYTES}`);
+      console.log('[数据库迁移] ✓ oss_storage_quota 字段已添加');
+    }
+
+    // 统一策略：未配置或无效值默认 1GB
+    const backfillResult = db.prepare(`
+      UPDATE users
+      SET oss_storage_quota = ?
+      WHERE oss_storage_quota IS NULL OR oss_storage_quota <= 0
+    `).run(DEFAULT_OSS_STORAGE_QUOTA_BYTES);
+
+    if (backfillResult.changes > 0) {
+      console.log(`[数据库迁移] ✓ OSS 配额默认值已回填: ${backfillResult.changes} 条记录`);
+    }
+  } catch (error) {
+    console.error('[数据库迁移] oss_storage_quota 迁移失败:', error);
+  }
+}
+
 // 系统日志操作
 const SystemLogDB = {
  // 日志级别常量
@@ -1432,6 +1470,7 @@ initDefaultSettings();
 migrateToV2(); // 执行数据库迁移
 migrateThemePreference(); // 主题偏好迁移
 migrateToOss(); // SFTP → OSS 迁移
+migrateOssQuotaField(); // OSS 配额字段迁移

 module.exports = {
  db,
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@@ -18,6 +18,8 @@
  "author": "玩玩云团队",
  "license": "MIT",
  "dependencies": {
+    "@aws-sdk/client-s3": "^3.985.0",
+    "@aws-sdk/s3-request-presigner": "^3.985.0",
    "archiver": "^7.0.1",
    "bcryptjs": "^3.0.3",
    "better-sqlite3": "^11.8.1",
@@ -28,10 +30,9 @@
    "express-session": "^1.18.2",
    "express-validator": "^7.3.0",
    "jsonwebtoken": "^9.0.2",
+    "lodash": "^4.17.23",
    "multer": "^2.0.2",
-    "nodemailer": "^6.9.14",
-    "@aws-sdk/client-s3": "^3.600.0",
-    "@aws-sdk/s3-request-presigner": "^3.600.0",
+    "nodemailer": "^8.0.1",
    "svg-captcha": "^1.4.0"
  },
  "devDependencies": {
--- a/backend/routes/index.js
+++ b/backend/routes/index.js
@@ -54,7 +54,7 @@
 *    - POST /api/share/:code/verify
 *    - POST /api/share/:code/list
 *    - POST /api/share/:code/download
- *    - GET /api/share/:code/download-url
+ *    - POST /api/share/:code/download-url
 *    - GET /api/share/:code/download-file
 *
 * 6. routes/admin.js - 管理员功能
--- a/backend/server.js
+++ b/backend/server.js
--- a/backend/storage.js
+++ b/backend/storage.js
@@ -1534,7 +1534,7 @@ class OssStorageClient {
   */
  async createReadStream(filePath) {
    const key = this.getObjectKey(filePath);
-    const bucket = this.user.oss_bucket;
+    const bucket = this.getBucket();

    const command = new GetObjectCommand({
      Bucket: bucket,
@@ -1589,7 +1589,7 @@ class OssStorageClient {
   */
  async getPresignedUrl(filePath, expiresIn = 3600) {
    const key = this.getObjectKey(filePath);
-    const bucket = this.user.oss_bucket;
+    const bucket = this.getBucket();

    try {
      const command = new GetObjectCommand({
@@ -1646,7 +1646,7 @@ class OssStorageClient {
   */
  async getUploadPresignedUrl(filePath, expiresIn = 900, contentType = 'application/octet-stream') {
    const key = this.getObjectKey(filePath);
-    const bucket = this.user.oss_bucket;
+    const bucket = this.getBucket();

    try {
      const command = new PutObjectCommand({
--- a/backend/test_share.js
+++ b/backend/test_share.js
@@ -448,7 +448,7 @@ async function testGetDownloadUrl() {
  }

  try {
-    const res = await request('GET', `/api/share/${testShareCode}/download-url?path=/test-file.txt`);
+    const res = await request('POST', `/api/share/${testShareCode}/download-url`, { path: '/test-file.txt' });

    // 如果文件存在
    if (res.status === 200) {
@@ -481,7 +481,7 @@ async function testDownloadWithPassword() {

  // 测试无密码
  try {
-    const res1 = await request('GET', `/api/share/${passwordShareCode}/download-url?path=/test-file-password.txt`);
+    const res1 = await request('POST', `/api/share/${passwordShareCode}/download-url`, { path: '/test-file-password.txt' });
    assert(res1.status === 401, '无密码应返回 401');
  } catch (error) {
    console.log(`  [ERROR] 测试无密码下载: ${error.message}`);
@@ -489,7 +489,7 @@ async function testDownloadWithPassword() {

  // 测试带密码
  try {
-    const res2 = await request('GET', `/api/share/${passwordShareCode}/download-url?path=/test-file-password.txt&password=test123`);
+    const res2 = await request('POST', `/api/share/${passwordShareCode}/download-url`, { path: '/test-file-password.txt', password: 'test123' });
    // 密码正确，根据文件是否存在返回不同结果
    if (res2.status === 200) {
      assert(res2.data.downloadUrl, '应返回下载链接');
@@ -535,7 +535,7 @@ async function testDownloadPathValidation() {

  // 测试越权访问
  try {
-    const res = await request('GET', `/api/share/${testShareCode}/download-url?path=/other-file.txt`);
+    const res = await request('POST', `/api/share/${testShareCode}/download-url`, { path: '/other-file.txt' });

    // 单文件分享应该禁止访问其他文件
    assert(res.status === 403 || res.status === 404, '越权访问应被拒绝');
@@ -546,7 +546,7 @@ async function testDownloadPathValidation() {

  // 测试路径遍历
  try {
-    const res2 = await request('GET', `/api/share/${testShareCode}/download-url?path=/../../../etc/passwd`);
+    const res2 = await request('POST', `/api/share/${testShareCode}/download-url`, { path: '/../../../etc/passwd' });
    assert(res2.status === 403 || res2.status === 400, '路径遍历应被拒绝');
  } catch (error) {
    console.log(`  [ERROR] 路径遍历测试: ${error.message}`);
@@ -682,7 +682,7 @@ async function testShareNotExists() {

  // 下载
  try {
-    const res3 = await request('GET', `/api/share/${nonExistentCode}/download-url?path=/test.txt`);
+    const res3 = await request('POST', `/api/share/${nonExistentCode}/download-url`, { path: '/test.txt' });
    assert(res3.status === 404, '下载不存在分享应返回 404');
  } catch (error) {
    console.log(`  [ERROR] ${error.message}`);
--- a/backend/test_share_edge_cases.js
+++ b/backend/test_share_edge_cases.js
@@ -225,7 +225,7 @@ async function testPathTraversalAttacks() {

    let blocked = 0;
    for (const attackPath of attackPaths) {
-      const res = await request('GET', `/api/share/${shareCode}/download-url?path=${encodeURIComponent(attackPath)}`);
+      const res = await request('POST', `/api/share/${shareCode}/download-url`, { path: attackPath });

      if (res.status === 403 || res.status === 400) {
        blocked++;
--- a/backend/utils/storage-cache.js
+++ b/backend/utils/storage-cache.js
@@ -53,21 +53,20 @@ class StorageUsageCache {
   */
  static async updateUsage(userId, deltaSize) {
    try {
-      // 使用 SQL 原子操作，避免并发问题
-      const result = UserDB.update(userId, {
-        // 使用原始 SQL，因为 update 方法不支持表达式
-        // 注意：这里需要在数据库层执行 UPDATE ... SET storage_used = storage_used + ?
-      });
+      const numericDelta = Number(deltaSize);
+      if (!Number.isFinite(numericDelta)) {
+        throw new Error('deltaSize 必须是有效数字');
+      }

-      // 直接执行 SQL 更新
+      // 直接执行 SQL 原子更新，并保证不小于 0
      const { db } = require('../database');
      db.prepare(`
        UPDATE users
-        SET storage_used = storage_used + ?
+        SET storage_used = MAX(COALESCE(storage_used, 0) + ?, 0)
        WHERE id = ?
-      `).run(deltaSize, userId);
+      `).run(numericDelta, userId);

-      console.log(`[存储缓存] 用户 ${userId} 存储变化: ${deltaSize > 0 ? '+' : ''}${deltaSize} 字节`);
+      console.log(`[存储缓存] 用户 ${userId} 存储变化: ${numericDelta > 0 ? '+' : ''}${numericDelta} 字节`);
      return true;
    } catch (error) {
      console.error('[存储缓存] 更新失败:', error);
--- a/frontend/app.html
+++ b/frontend/app.html
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1,4 +1,6 @@
 const { createApp } = Vue;
+const DEFAULT_LOCAL_STORAGE_QUOTA_BYTES = 1024 * 1024 * 1024; // 1GB
+const DEFAULT_OSS_STORAGE_QUOTA_BYTES = 1024 * 1024 * 1024; // 1GB

 createApp({
  data() {
@@ -90,18 +92,13 @@ createApp({

      // 分享管理
      shares: [],
-      showShareAllModal: false,
      showShareFileModal: false,
      creatingShare: false, // 创建分享中状态
-      shareAllForm: {
-        password: "",
-        expiryType: "never",
-        customDays: 7
-      },
      shareFileForm: {
        fileName: "",
        filePath: "",
        isDirectory: false,  // 新增：标记是否为文件夹
+        enablePassword: false,
        password: "",
        expiryType: "never",
        customDays: 7
@@ -246,12 +243,15 @@ createApp({
      contextMenuX: 0,
      contextMenuY: 0,
      contextMenuFile: null,
+      showMobileFileActionSheet: false,
+      mobileActionFile: null,

      // 长按检测
      longPressTimer: null,
      longPressStartX: 0,
      longPressStartY: 0,
      longPressFile: null,
+      longPressTriggered: false,

      // 媒体预览
      showImageViewer: false,
@@ -260,15 +260,18 @@ createApp({
      currentMediaUrl: '',
      currentMediaName: '',
      currentMediaType: '', // 'image', 'video', 'audio'
-      longPressDuration: 500, // 长按时间（毫秒）
+      longPressDuration: 420, // 长按时间（毫秒）
      // 管理员编辑用户存储权限
      showEditStorageModal: false,
      editStorageForm: {
        userId: null,
        username: '',
        storage_permission: 'oss_only',
-        local_storage_quota_value: 1, // 配额数值
-        quota_unit: 'GB' // 配额单位：MB 或 GB
+        local_storage_quota_value: 1, // 本地配额数值
+        quota_unit: 'GB', // 本地配额单位：MB 或 GB
+        oss_storage_quota_value: 1, // OSS配额数值（默认1GB）
+        oss_quota_unit: 'GB', // OSS配额单位：MB / GB / TB
+        oss_quota_unlimited: false // 兼容旧数据字段（当前固定为有限配额）
      },

      // 服务器存储统计
@@ -325,11 +328,82 @@ createApp({
      return Math.round((this.localUsed / this.localQuota) * 100);
    },

+    // OSS 配额相关（文件页展示）
+    ossQuotaBytes() {
+      const quota = Number(this.user?.oss_storage_quota || DEFAULT_OSS_STORAGE_QUOTA_BYTES);
+      if (!Number.isFinite(quota) || quota <= 0) {
+        return DEFAULT_OSS_STORAGE_QUOTA_BYTES;
+      }
+      return quota;
+    },
+
+    ossUsedBytes() {
+      const usageFromStats = Number(this.ossUsage?.totalSize);
+      if (Number.isFinite(usageFromStats) && usageFromStats >= 0) {
+        return usageFromStats;
+      }
+
+      const usageFromUser = Number(this.user?.storage_used || 0);
+      if (Number.isFinite(usageFromUser) && usageFromUser >= 0) {
+        return usageFromUser;
+      }
+
+      return 0;
+    },
+
+    ossQuotaFormatted() {
+      return this.formatBytes(this.ossQuotaBytes);
+    },
+
+    ossUsedFormatted() {
+      return this.formatBytes(this.ossUsedBytes);
+    },
+
+    ossQuotaPercentage() {
+      if (this.ossQuotaBytes <= 0) return 0;
+      return Math.min(100, Math.round((this.ossUsedBytes / this.ossQuotaBytes) * 100));
+    },
+
    // 存储类型显示文本
    storageTypeText() {
      return this.storageType === 'local' ? '本地存储' : 'OSS存储';
    },

+    // 文件统计信息（用于文件页工具栏）
+    fileStats() {
+      const list = Array.isArray(this.files) ? this.files : [];
+      let directoryCount = 0;
+      let fileCount = 0;
+      let totalFileBytes = 0;
+
+      for (const item of list) {
+        if (item?.isDirectory) {
+          directoryCount += 1;
+          continue;
+        }
+
+        fileCount += 1;
+        const currentSize = Number(item?.size || 0);
+        if (Number.isFinite(currentSize) && currentSize > 0) {
+          totalFileBytes += currentSize;
+        }
+      }
+
+      return {
+        totalCount: list.length,
+        directoryCount,
+        fileCount,
+        totalFileBytes
+      };
+    },
+
+    currentPathLabel() {
+      if (!this.currentPath || this.currentPath === '/') {
+        return '根目录';
+      }
+      return this.currentPath;
+    },
+
    // 分享筛选+排序后的列表
    filteredShares() {
      let list = [...this.shares];
@@ -344,8 +418,16 @@ createApp({
      }

      if (this.shareFilters.type !== 'all') {
-        const targetType = this.shareFilters.type === 'all_files' ? 'all' : this.shareFilters.type;
-        list = list.filter(s => (s.share_type || 'file') === targetType);
+        const selectedType = this.shareFilters.type;
+        list = list.filter(s => {
+          if (selectedType === 'all_files') {
+            return this.isShareAllFiles(s);
+          }
+          if (selectedType === 'directory') {
+            return (s.share_type || 'file') === 'directory' && !this.isShareAllFiles(s);
+          }
+          return (s.share_type || 'file') === selectedType;
+        });
      }

      if (this.shareFilters.status !== 'all') {
@@ -353,8 +435,8 @@ createApp({
          if (this.shareFilters.status === 'expired') return this.isExpired(s.expires_at);
          if (this.shareFilters.status === 'expiring') return this.isExpiringSoon(s.expires_at) && !this.isExpired(s.expires_at);
          if (this.shareFilters.status === 'active') return !this.isExpired(s.expires_at);
-          if (this.shareFilters.status === 'protected') return !!s.share_password;
-          if (this.shareFilters.status === 'public') return !s.share_password;
+          if (this.shareFilters.status === 'protected') return this.hasSharePassword(s);
+          if (this.shareFilters.status === 'public') return !this.hasSharePassword(s);
          return true;
        });
      }
@@ -1125,6 +1207,7 @@ handleDragLeave(e) {

      // 停止定期检查
      this.stopProfileSync();
+      this.closeMobileFileActionSheet();
    },

    // 获取公开的系统配置（上传限制等）
@@ -1306,6 +1389,11 @@ handleDragLeave(e) {

          // 更新用户本地存储信息（使用防抖避免频繁请求）
          this.debouncedLoadUserProfile();
+
+          // OSS 模式下刷新一次空间统计，保证文件页配额显示实时
+          if (this.storageType === 'oss' && this.user?.oss_config_source !== 'none') {
+            this.loadOssUsage();
+          }
        }
      } catch (error) {
        console.error('加载文件失败:', error);
@@ -1320,6 +1408,12 @@ handleDragLeave(e) {
    },

    async handleFileClick(file) {
+      // 修复：长按后会触发一次 click，需要忽略避免误打开文件/目录
+      if (this.longPressTriggered) {
+        this.longPressTriggered = false;
+        return;
+      }
+
      if (file.isDirectory) {
        const newPath = this.currentPath === '/'
          ? `/${file.name}`
@@ -1510,13 +1604,23 @@ handleDragLeave(e) {

    // ===== 右键菜单和长按功能 =====

-    // 显示右键菜单（PC端）
+    // 显示右键菜单（PC端）/ 长按菜单（移动端）
    showFileContextMenu(file, event) {
-      // 文件和文件夹都可以显示右键菜单
-      event.preventDefault();
+      event?.preventDefault?.();
+      event?.stopPropagation?.();
+
+      const isTouchContextMenu = this.isMobileViewport()
+        || event?.pointerType === 'touch'
+        || Boolean(event?.sourceCapabilities?.firesTouchEvents);
+
+      if (isTouchContextMenu) {
+        this.openMobileFileActionSheet(file, event);
+        return;
+      }
+
      this.contextMenuFile = file;
-      this.contextMenuX = event.clientX;
-      this.contextMenuY = event.clientY;
+      this.contextMenuX = event?.clientX || 0;
+      this.contextMenuY = event?.clientY || 0;
      this.showContextMenu = true;

      // 点击其他地方关闭菜单
@@ -1531,9 +1635,51 @@ handleDragLeave(e) {
      this.contextMenuFile = null;
    },

+    isMobileViewport() {
+      return window.matchMedia('(max-width: 768px)').matches;
+    },
+
+    setMobileSheetScrollLock(locked) {
+      if (!document.body) return;
+      document.body.style.overflow = locked ? 'hidden' : '';
+    },
+
+    openMobileFileActionSheet(file, event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      this.hideContextMenu();
+      this.mobileActionFile = file;
+      this.showMobileFileActionSheet = true;
+      this.setMobileSheetScrollLock(true);
+    },
+
+    closeMobileFileActionSheet() {
+      this.showMobileFileActionSheet = false;
+      this.mobileActionFile = null;
+      this.setMobileSheetScrollLock(false);
+    },
+
+    async mobileFileAction(action) {
+      const targetFile = this.mobileActionFile;
+      this.closeMobileFileActionSheet();
+
+      if (!targetFile) {
+        return;
+      }
+
+      this.contextMenuFile = targetFile;
+      await this.contextMenuAction(action);
+    },
+    
    // 长按开始（移动端）
    handleLongPressStart(file, event) {
-      if (file.isDirectory) return; // 文件夹不响应长按
+      if (!event?.touches?.length) return;
+      if (this.showMobileFileActionSheet) return;
+
+      this.longPressTriggered = false;

      // 记录初始触摸位置，用于检测是否在滑动
      const touch = event.touches[0];
@@ -1542,29 +1688,39 @@ handleDragLeave(e) {
      this.longPressFile = file;

      this.longPressTimer = setTimeout(() => {
-        // 触发长按菜单
-        this.contextMenuFile = file;
+        this.longPressTriggered = true;

-        // 使用记录的触摸位置
-        this.contextMenuX = this.longPressStartX;
-        this.contextMenuY = this.longPressStartY;
-        this.showContextMenu = true;
+        if (event?.cancelable) {
+          event.preventDefault();
+        }
+
+        if (this.isMobileViewport()) {
+          this.openMobileFileActionSheet(file, event);
+        } else {
+          // 触发长按菜单
+          this.contextMenuFile = file;
+
+          // 使用记录的触摸位置
+          this.contextMenuX = this.longPressStartX;
+          this.contextMenuY = this.longPressStartY;
+          this.showContextMenu = true;
+
+          // 点击其他地方关闭菜单
+          this.$nextTick(() => {
+            document.addEventListener('click', this.hideContextMenu, { once: true });
+          });
+        }

        // 触摸震动反馈（如果支持）
        if (navigator.vibrate) {
          navigator.vibrate(50);
        }
-
-        // 点击其他地方关闭菜单
-        this.$nextTick(() => {
-          document.addEventListener('click', this.hideContextMenu, { once: true });
-        });
      }, this.longPressDuration);
    },

    // 长按移动检测（移动端）- 滑动时取消长按
    handleLongPressMove(event) {
-      if (!this.longPressTimer) return;
+      if (!this.longPressTimer || !event?.touches?.length) return;

      const touch = event.touches[0];
      const moveX = Math.abs(touch.clientX - this.longPressStartX);
@@ -1583,6 +1739,7 @@ handleDragLeave(e) {
        clearTimeout(this.longPressTimer);
        this.longPressTimer = null;
      }
+      this.longPressFile = null;
    },
    
    // 从菜单执行操作
@@ -1768,6 +1925,7 @@ handleDragLeave(e) {
        ? file.name
        : `${this.currentPath}/${file.name}`;
      this.shareFileForm.isDirectory = file.isDirectory;  // 设置是否为文件夹
+      this.shareFileForm.enablePassword = false;
      this.shareFileForm.password = '';
      this.shareFileForm.expiryType = 'never';
      this.shareFileForm.customDays = 7;
@@ -1775,45 +1933,76 @@ handleDragLeave(e) {
      this.showShareFileModal = true;
    },

-    async createShareAll() {
-      if (this.creatingShare) return; // 防止重复提交
-      this.creatingShare = true;
-
-      try {
-        const expiryDays = this.shareAllForm.expiryType === 'never' ? null :
-                          this.shareAllForm.expiryType === 'custom' ? this.shareAllForm.customDays :
-                          parseInt(this.shareAllForm.expiryType);
-
-        const response = await axios.post(
-          `${this.apiBase}/api/share/create`,
-          {
-            share_type: 'all',
-            password: this.shareAllForm.password || null,
-            expiry_days: expiryDays
-          },
-        );
-
-        if (response.data.success) {
-          this.shareResult = response.data;
-          this.showToast('success', '成功', '分享链接已创建');
-          this.loadShares();
-        }
-      } catch (error) {
-        console.error('创建分享失败:', error);
-        this.showToast('error', '错误', error.response?.data?.message || '创建分享失败');
-      } finally {
-        this.creatingShare = false;
+    toggleSharePassword(formType) {
+      if (formType === 'file' && !this.shareFileForm.enablePassword) {
+        this.shareFileForm.password = '';
      }
    },

+    resolveShareExpiry(expiryType, customDays) {
+      if (expiryType === 'never') {
+        return { valid: true, value: null };
+      }
+
+      const days = expiryType === 'custom'
+        ? Number(customDays)
+        : Number(expiryType);
+
+      if (!Number.isInteger(days) || days < 1 || days > 365) {
+        return {
+          valid: false,
+          message: '有效期必须是 1-365 天的整数'
+        };
+      }
+
+      return { valid: true, value: days };
+    },
+
+    normalizeSharePassword(enablePassword, rawPassword) {
+      if (!enablePassword) {
+        return { valid: true, value: null };
+      }
+
+      const password = (rawPassword || '').trim();
+      if (!password) {
+        return { valid: false, message: '已启用密码保护，请输入访问密码' };
+      }
+
+      if (password.length > 32) {
+        return { valid: false, message: '访问密码不能超过32个字符' };
+      }
+
+      return { valid: true, value: password };
+    },
+
+    buildShareResult(data, options = {}) {
+      return {
+        ...data,
+        has_password: typeof options.hasPassword === 'boolean' ? options.hasPassword : !!data.has_password,
+        target_name: options.targetName || '文件',
+        target_type: options.targetType || 'file',
+        share_password_plain: options.password || ''
+      };
+    },
    async createShareFile() {
      if (this.creatingShare) return; // 防止重复提交
      this.creatingShare = true;

      try {
-        const expiryDays = this.shareFileForm.expiryType === 'never' ? null :
-                          this.shareFileForm.expiryType === 'custom' ? this.shareFileForm.customDays :
-                          parseInt(this.shareFileForm.expiryType);
+        const expiryCheck = this.resolveShareExpiry(this.shareFileForm.expiryType, this.shareFileForm.customDays);
+        if (!expiryCheck.valid) {
+          this.showToast('warning', '提示', expiryCheck.message);
+          return;
+        }
+
+        const passwordCheck = this.normalizeSharePassword(this.shareFileForm.enablePassword, this.shareFileForm.password);
+        if (!passwordCheck.valid) {
+          this.showToast('warning', '提示', passwordCheck.message);
+          return;
+        }
+
+        const expiryDays = expiryCheck.value;
+        const password = passwordCheck.value;

        // 根据是否为文件夹决定share_type
        const shareType = this.shareFileForm.isDirectory ? 'directory' : 'file';
@@ -1824,15 +2013,20 @@ handleDragLeave(e) {
            share_type: shareType,  // 修复：文件夹使用directory类型
            file_path: this.shareFileForm.filePath,
            file_name: this.shareFileForm.fileName,
-            password: this.shareFileForm.password || null,
+            password,
            expiry_days: expiryDays
          },
        );

        if (response.data.success) {
-          this.shareResult = response.data;
          const itemType = this.shareFileForm.isDirectory ? '文件夹' : '文件';
-          this.showToast('success', '成功', `${itemType}分享链接已创建`);
+          this.shareResult = this.buildShareResult(response.data, {
+            hasPassword: this.shareFileForm.enablePassword,
+            targetName: this.shareFileForm.fileName,
+            targetType: shareType,
+            password
+          });
+          this.showToast('success', '成功', this.shareFileForm.enablePassword ? `${itemType}加密分享已创建` : `${itemType}分享链接已创建`);
          this.loadShares();
        }
      } catch (error) {
@@ -1909,12 +2103,21 @@ handleDragLeave(e) {
    // OSS 直连上传
    async uploadToOSSDirect(file) {
      try {
+        // 预检查 OSS 配额（后端也会做强校验，未配置默认 1GB）
+        const ossQuota = Number(this.user?.oss_storage_quota || DEFAULT_OSS_STORAGE_QUOTA_BYTES);
+        const currentUsage = Number(this.user?.storage_used || this.ossUsage?.totalSize || 0);
+        if (currentUsage + file.size > ossQuota) {
+          const remaining = Math.max(ossQuota - currentUsage, 0);
+          throw new Error(`OSS 配额不足：文件 ${this.formatBytes(file.size)}，剩余 ${this.formatBytes(remaining)}（总配额 ${this.formatBytes(ossQuota)}）`);
+        }
+
        // 1. 获取签名 URL（传递当前路径）
        const { data: signData } = await axios.get(`${this.apiBase}/api/files/upload-signature`, {
          params: {
            filename: file.name,
            path: this.currentPath,
-            contentType: file.type || 'application/octet-stream'
+            contentType: file.type || 'application/octet-stream',
+            size: file.size
          }
        });

@@ -1922,6 +2125,10 @@ handleDragLeave(e) {
          throw new Error(signData.message || '获取上传签名失败');
        }

+        if (!signData.completionToken) {
+          throw new Error('上传签名缺少完成凭证，请刷新页面后重试');
+        }
+
        // 2. 直连 OSS 上传（不经过后端！）
        await axios.put(signData.uploadUrl, file, {
          headers: {
@@ -1939,6 +2146,7 @@ handleDragLeave(e) {
        await axios.post(`${this.apiBase}/api/files/upload-complete`, {
          objectKey: signData.objectKey,
          size: file.size,
+          completionToken: signData.completionToken,
          path: this.currentPath
        });

@@ -2106,11 +2314,52 @@ handleDragLeave(e) {
      return expireDate <= now;
    },

+    normalizeSharePath(sharePath) {
+      if (!sharePath) return '/';
+      const normalized = String(sharePath)
+        .replace(/\\/g, '/')
+        .replace(/\/+/g, '/');
+
+      if (!normalized || normalized === '.') {
+        return '/';
+      }
+
+      return normalized.startsWith('/') ? normalized : `/${normalized}`;
+    },
+
+    isShareAllFiles(share) {
+      if (!share) return false;
+      const shareType = share.share_type || 'file';
+      const sharePath = this.normalizeSharePath(share.share_path || '/');
+      return shareType === 'all' || (shareType === 'directory' && sharePath === '/');
+    },
+
+    hasSharePassword(share) {
+      if (!share) return false;
+      if (typeof share.has_password === 'boolean') {
+        return share.has_password;
+      }
+      return !!share.share_password;
+    },
+
+    getShareTypeIcon(share) {
+      if (this.isShareAllFiles(share)) return 'fa-layer-group';
+      if ((share?.share_type || 'file') === 'directory') return 'fa-folder';
+      return 'fa-file-alt';
+    },
+
    // 分享类型标签
-    getShareTypeLabel(type) {
-      switch (type) {
+    getShareTypeLabel(shareOrType, sharePath) {
+      const share = typeof shareOrType === 'object' && shareOrType !== null
+        ? shareOrType
+        : { share_type: shareOrType, share_path: sharePath };
+
+      if (this.isShareAllFiles(share)) {
+        return '全部文件';
+      }
+
+      switch (share.share_type) {
        case 'directory': return '文件夹';
-        case 'all': return '全部文件';
        case 'file':
        default: return '文件';
      }
@@ -2129,7 +2378,7 @@ handleDragLeave(e) {

    // 分享保护标签
    getShareProtection(share) {
-      if (share.share_password) {
+      if (this.hasSharePassword(share)) {
        return { text: '已加密', class: 'info', icon: 'fa-lock' };
      }
      return { text: '公开', class: 'info', icon: 'fa-unlock' };
@@ -2202,20 +2451,32 @@ handleDragLeave(e) {
      }
    },

-    copyShareLink(url) {
-      // 复制分享链接到剪贴板
+    copyTextToClipboard(text, successMessage = '已复制到剪贴板') {
+      if (!text) {
+        this.showToast('warning', '提示', '没有可复制的内容');
+        return;
+      }
+
      if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(url).then(() => {
-          this.showToast('success', '成功', '分享链接已复制到剪贴板');
+        navigator.clipboard.writeText(text).then(() => {
+          this.showToast('success', '成功', successMessage);
        }).catch(() => {
-          this.fallbackCopyToClipboard(url);
+          this.fallbackCopyToClipboard(text, successMessage);
        });
      } else {
-        this.fallbackCopyToClipboard(url);
+        this.fallbackCopyToClipboard(text, successMessage);
      }
    },

-    fallbackCopyToClipboard(text) {
+    copyShareLink(url) {
+      this.copyTextToClipboard(url, '分享链接已复制到剪贴板');
+    },
+
+    copySharePassword(password) {
+      this.copyTextToClipboard(password, '访问密码已复制到剪贴板');
+    },
+
+    fallbackCopyToClipboard(text, successMessage = '已复制到剪贴板') {
      // 备用复制方法
      const textArea = document.createElement('textarea');
      textArea.value = text;
@@ -2225,7 +2486,7 @@ handleDragLeave(e) {
      textArea.select();
      try {
        document.execCommand('copy');
-        this.showToast('success', '成功', '分享链接已复制到剪贴板');
+        this.showToast('success', '成功', successMessage);
      } catch (err) {
        this.showToast('error', '错误', '复制失败，请手动复制');
      }
@@ -2247,6 +2508,7 @@ handleDragLeave(e) {
      }
    },

+
    async banUser(userId, banned) {
      const action = banned ? '封禁' : '解封';
      if (!confirm(`确定要${action}这个用户吗？`)) return;
@@ -2467,6 +2729,9 @@ handleDragLeave(e) {

        if (response.data.success) {
          this.ossUsage = response.data.usage;
+          if (this.user && this.ossUsage && Number.isFinite(Number(this.ossUsage.totalSize))) {
+            this.user.storage_used = Number(this.ossUsage.totalSize);
+          }
        }
      } catch (error) {
        console.error('获取OSS空间使用情况失败:', error);
@@ -2643,39 +2908,80 @@ handleDragLeave(e) {
      this.editStorageForm.username = user.username;
      this.editStorageForm.storage_permission = user.storage_permission || 'oss_only';
      
-      // 智能识别配额单位
-      const quotaBytes = user.local_storage_quota || 1073741824;
-      const quotaMB = quotaBytes / 1024 / 1024;
-      const quotaGB = quotaMB / 1024;
+      // 智能识别本地配额单位
+      const localQuotaBytes = Number(user.local_storage_quota || DEFAULT_LOCAL_STORAGE_QUOTA_BYTES);
+      const localQuotaMB = localQuotaBytes / 1024 / 1024;
+      const localQuotaGB = localQuotaMB / 1024;

-      // 如果配额能被1024整除且大于等于1GB，使用GB单位，否则使用MB
-      if (quotaMB >= 1024 && quotaMB % 1024 === 0) {
-        this.editStorageForm.local_storage_quota_value = quotaGB;
+      if (localQuotaMB >= 1024 && localQuotaMB % 1024 === 0) {
+        this.editStorageForm.local_storage_quota_value = localQuotaGB;
        this.editStorageForm.quota_unit = 'GB';
      } else {
-        this.editStorageForm.local_storage_quota_value = Math.round(quotaMB);
+        this.editStorageForm.local_storage_quota_value = Math.max(1, Math.round(localQuotaMB));
        this.editStorageForm.quota_unit = 'MB';
      }

+      // 智能识别 OSS 配额单位（未配置时默认 1GB）
+      const ossQuotaBytes = Number(user.oss_storage_quota || DEFAULT_OSS_STORAGE_QUOTA_BYTES);
+      const effectiveOssQuotaBytes = Number.isFinite(ossQuotaBytes) && ossQuotaBytes > 0
+        ? ossQuotaBytes
+        : DEFAULT_OSS_STORAGE_QUOTA_BYTES;
+      const mb = 1024 * 1024;
+      const gb = 1024 * 1024 * 1024;
+      const tb = 1024 * 1024 * 1024 * 1024;
+
+      this.editStorageForm.oss_quota_unlimited = false;
+      if (effectiveOssQuotaBytes >= tb && effectiveOssQuotaBytes % tb === 0) {
+        this.editStorageForm.oss_storage_quota_value = effectiveOssQuotaBytes / tb;
+        this.editStorageForm.oss_quota_unit = 'TB';
+      } else if (effectiveOssQuotaBytes >= gb && effectiveOssQuotaBytes % gb === 0) {
+        this.editStorageForm.oss_storage_quota_value = effectiveOssQuotaBytes / gb;
+        this.editStorageForm.oss_quota_unit = 'GB';
+      } else {
+        this.editStorageForm.oss_storage_quota_value = Math.max(1, Math.round(effectiveOssQuotaBytes / mb));
+        this.editStorageForm.oss_quota_unit = 'MB';
+      }
+
      this.showEditStorageModal = true;
    },

    // 管理员：更新用户存储权限
    async updateUserStorage() {
      try {
-        // 根据单位计算字节数
-        let quotaBytes;
+        // 计算本地配额（字节）
+        if (!this.editStorageForm.local_storage_quota_value || this.editStorageForm.local_storage_quota_value < 1) {
+          this.showToast('error', '参数错误', '本地配额必须大于 0');
+          return;
+        }
+
+        let localQuotaBytes;
        if (this.editStorageForm.quota_unit === 'GB') {
-          quotaBytes = this.editStorageForm.local_storage_quota_value * 1024 * 1024 * 1024;
+          localQuotaBytes = this.editStorageForm.local_storage_quota_value * 1024 * 1024 * 1024;
        } else {
-          quotaBytes = this.editStorageForm.local_storage_quota_value * 1024 * 1024;
+          localQuotaBytes = this.editStorageForm.local_storage_quota_value * 1024 * 1024;
+        }
+
+        // 计算 OSS 配额（字节）
+        if (!this.editStorageForm.oss_storage_quota_value || this.editStorageForm.oss_storage_quota_value < 1) {
+          this.showToast('error', '参数错误', 'OSS 配额必须大于 0');
+          return;
+        }
+
+        let ossQuotaBytes;
+        if (this.editStorageForm.oss_quota_unit === 'TB') {
+          ossQuotaBytes = this.editStorageForm.oss_storage_quota_value * 1024 * 1024 * 1024 * 1024;
+        } else if (this.editStorageForm.oss_quota_unit === 'GB') {
+          ossQuotaBytes = this.editStorageForm.oss_storage_quota_value * 1024 * 1024 * 1024;
+        } else {
+          ossQuotaBytes = this.editStorageForm.oss_storage_quota_value * 1024 * 1024;
        }

        const response = await axios.post(
          `${this.apiBase}/api/admin/users/${this.editStorageForm.userId}/storage-permission`,
          {
            storage_permission: this.editStorageForm.storage_permission,
-            local_storage_quota: quotaBytes
+            local_storage_quota: localQuotaBytes,
+            oss_storage_quota: ossQuotaBytes
          },
        );

@@ -2700,6 +3006,22 @@ handleDragLeave(e) {
      return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    },

+    getAdminUserQuotaPercentage(user) {
+      const quota = Number(user?.local_storage_quota || 0);
+      const used = Number(user?.local_storage_used || 0);
+      if (!Number.isFinite(quota) || quota <= 0) return 0;
+      if (!Number.isFinite(used) || used <= 0) return 0;
+      return Math.round((used / quota) * 100);
+    },
+
+    getAdminUserOssQuotaPercentage(user) {
+      const quota = Number(user?.oss_storage_quota || DEFAULT_OSS_STORAGE_QUOTA_BYTES);
+      const used = Number(user?.storage_used || 0);
+      if (!Number.isFinite(quota) || quota <= 0) return 0;
+      if (!Number.isFinite(used) || used <= 0) return 0;
+      return Math.min(100, Math.round((used / quota) * 100));
+    },
+
    formatDate(dateString) {
      if (!dateString) return '-';
      
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,9 +3,8 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>玩玩云 - 现代化云存储平台</title>
+  <title>玩玩云 - 企业网盘</title>
  <script>
-    // 邮件激活/重置链接重定向
    (function() {
      const search = window.location.search;
      if (!search) return;
@@ -17,651 +16,243 @@
    })();
  </script>
  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    /* 暗色主题（默认） */
-    :root {
-      --bg-primary: #0a0a0f;
-      --bg-secondary: #12121a;
-      --glass: rgba(255, 255, 255, 0.03);
-      --glass-border: rgba(255, 255, 255, 0.08);
-      --text-primary: #ffffff;
-      --text-secondary: rgba(255, 255, 255, 0.6);
-      --accent-1: #667eea;
-      --accent-2: #764ba2;
-      --accent-3: #f093fb;
-      --glow: rgba(102, 126, 234, 0.4);
-    }
-
-    /* 亮色主题 */
-    .light-theme {
-      --bg-primary: #f0f4f8;
-      --bg-secondary: #ffffff;
-      --glass: rgba(102, 126, 234, 0.05);
-      --glass-border: rgba(102, 126, 234, 0.15);
-      --text-primary: #1a1a2e;
-      --text-secondary: rgba(26, 26, 46, 0.7);
-      --accent-1: #5a67d8;
-      --accent-2: #6b46c1;
-      --accent-3: #d53f8c;
-      --glow: rgba(90, 103, 216, 0.3);
-    }
-
-    /* 亮色主题特定样式 */
-    body.light-theme .navbar {
-      background: rgba(255, 255, 255, 0.85);
-    }
-
-    body.light-theme .grid-bg {
-      background-image:
-        linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px);
-    }
-
-    body.light-theme .gradient-orb {
-      opacity: 0.3;
-    }
-
-    body.light-theme .feature-card {
-      background: rgba(255, 255, 255, 0.7);
-    }
-
-    body.light-theme .tech-bar {
-      background: rgba(255, 255, 255, 0.8);
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      min-height: 100vh;
-      overflow-x: hidden;
-    }
-
-    /* 动态背景 */
-    .bg-gradient {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: -1;
-      overflow: hidden;
-    }
-
-    .gradient-orb {
-      position: absolute;
-      border-radius: 50%;
-      filter: blur(80px);
-      opacity: 0.5;
-      animation: float 20s ease-in-out infinite;
-    }
-
-    .orb-1 {
-      width: 600px;
-      height: 600px;
-      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
-      top: -200px;
-      right: -200px;
-      animation-delay: 0s;
-    }
-
-    .orb-2 {
-      width: 500px;
-      height: 500px;
-      background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
-      bottom: -150px;
-      left: -150px;
-      animation-delay: -7s;
-    }
-
-    .orb-3 {
-      width: 300px;
-      height: 300px;
-      background: linear-gradient(135deg, var(--accent-3), var(--accent-1));
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      animation-delay: -14s;
-      opacity: 0.3;
-    }
-
-    @keyframes float {
-      0%, 100% { transform: translate(0, 0) scale(1); }
-      25% { transform: translate(50px, -50px) scale(1.1); }
-      50% { transform: translate(-30px, 30px) scale(0.95); }
-      75% { transform: translate(-50px, -30px) scale(1.05); }
-    }
-
-    /* 网格背景 */
-    .grid-bg {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image:
-        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-      background-size: 60px 60px;
-      z-index: -1;
-    }
-
-    /* 导航栏 */
-    .navbar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      padding: 20px 50px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      z-index: 100;
-      background: rgba(10, 10, 15, 0.8);
-      backdrop-filter: blur(20px);
-      border-bottom: 1px solid var(--glass-border);
-    }
-
-    .logo {
-      font-size: 28px;
-      font-weight: 700;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      color: var(--text-primary);
-    }
-
-    .logo i {
-      font-size: 32px;
-      background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .nav-links {
-      display: flex;
-      gap: 12px;
-    }
-
-    .btn {
-      padding: 12px 28px;
-      border-radius: 12px;
-      font-size: 15px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      text-decoration: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      border: none;
-    }
-
-    .btn-ghost {
-      background: transparent;
-      color: var(--text-secondary);
-      border: 1px solid transparent;
-    }
-
-    .btn-ghost:hover {
-      color: var(--text-primary);
-      background: var(--glass);
-      border-color: var(--glass-border);
-    }
-
-    .btn-primary {
-      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
-      color: white;
-      box-shadow: 0 4px 20px var(--glow);
-    }
-
-    .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 30px var(--glow);
-    }
-
-    /* 主内容区 */
-    .main {
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 120px 50px 80px;
-    }
-
-    .container {
-      max-width: 1200px;
-      width: 100%;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 80px;
-      align-items: center;
-    }
-
-    /* 左侧内容 */
-    .hero-content {
-      animation: fadeIn 1s ease-out;
-    }
-
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(30px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 16px;
-      background: var(--glass);
-      border: 1px solid var(--glass-border);
-      border-radius: 50px;
-      font-size: 13px;
-      color: var(--accent-3);
-      margin-bottom: 30px;
-      backdrop-filter: blur(10px);
-    }
-
-    .badge i {
-      font-size: 10px;
-    }
-
-    .hero-title {
-      font-size: 64px;
-      font-weight: 800;
-      line-height: 1.1;
-      margin-bottom: 24px;
-      letter-spacing: -2px;
-    }
-
-    .hero-title .gradient-text {
-      background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .hero-desc {
-      font-size: 18px;
-      color: var(--text-secondary);
-      line-height: 1.7;
-      margin-bottom: 40px;
-      max-width: 500px;
-    }
-
-    .hero-buttons {
-      display: flex;
-      gap: 16px;
-      margin-bottom: 60px;
-    }
-
-    .btn-large {
-      padding: 16px 36px;
-      font-size: 16px;
-      border-radius: 14px;
-    }
-
-    /* 统计数据 */
-    .stats {
-      display: flex;
-      gap: 50px;
-    }
-
-    .stat-item {
-      text-align: left;
-    }
-
-    .stat-value {
-      font-size: 32px;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .stat-label {
-      font-size: 14px;
-      color: var(--text-secondary);
-      margin-top: 4px;
-    }
-
-    /* 右侧功能卡片 */
-    .features-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 20px;
-      animation: fadeIn 1s ease-out 0.3s both;
-    }
-
-    .feature-card {
-      background: var(--glass);
-      border: 1px solid var(--glass-border);
-      border-radius: 20px;
-      padding: 28px;
-      backdrop-filter: blur(20px);
-      transition: all 0.4s ease;
-      cursor: default;
-    }
-
-    .feature-card:hover {
-      transform: translateY(-8px);
-      border-color: rgba(102, 126, 234, 0.3);
-      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-    }
-
-    .feature-card:nth-child(2) { animation-delay: 0.1s; }
-    .feature-card:nth-child(3) { animation-delay: 0.2s; }
-    .feature-card:nth-child(4) { animation-delay: 0.3s; }
-
-    .feature-icon {
-      width: 48px;
-      height: 48px;
-      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
-      border-radius: 14px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 18px;
-      font-size: 22px;
-      color: white;
-    }
-
-    .feature-title {
-      font-size: 18px;
-      font-weight: 600;
-      margin-bottom: 8px;
-    }
-
-    .feature-desc {
-      font-size: 14px;
-      color: var(--text-secondary);
-      line-height: 1.6;
-    }
-
-    /* 底部技术栈 */
-    .tech-bar {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 20px 50px;
-      background: rgba(10, 10, 15, 0.9);
-      backdrop-filter: blur(20px);
-      border-top: 1px solid var(--glass-border);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .tech-list {
-      display: flex;
-      gap: 30px;
-      align-items: center;
-    }
-
-    .tech-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
-      color: var(--text-secondary);
-      transition: color 0.3s;
-    }
-
-    .tech-item:hover {
-      color: var(--text-primary);
-    }
-
-    .tech-item i {
-      font-size: 18px;
-    }
-
-    .copyright {
-      font-size: 13px;
-      color: var(--text-secondary);
-    }
-
-    /* 响应式 */
-    @media (max-width: 1024px) {
-      .container {
-        grid-template-columns: 1fr;
-        gap: 60px;
-        text-align: center;
-      }
-
-      .hero-content {
-        order: 1;
-      }
-
-      .features-grid {
-        order: 2;
-      }
-
-      .hero-desc {
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .hero-buttons {
-        justify-content: center;
-      }
-
-      .stats {
-        justify-content: center;
-      }
-    }
-
-    @media (max-width: 768px) {
-      .navbar {
-        padding: 15px 20px;
-      }
-
-      .logo {
-        font-size: 22px;
-      }
-
-      .logo i {
-        font-size: 26px;
-      }
-
-      .main {
-        padding: 100px 20px 120px;
-      }
-
-      .hero-title {
-        font-size: 40px;
-        letter-spacing: -1px;
-      }
-
-      .hero-desc {
-        font-size: 16px;
-      }
-
-      .hero-buttons {
-        flex-direction: column;
-      }
-
-      .btn-large {
-        width: 100%;
-        justify-content: center;
-      }
-
-      .stats {
-        flex-wrap: wrap;
-        gap: 30px;
-      }
-
-      .features-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .tech-bar {
-        flex-direction: column;
-        gap: 15px;
-        padding: 15px 20px;
-      }
-
-      .tech-list {
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 20px;
-      }
-    }
-
-    @media (max-width: 480px) {
-      .nav-links .btn span {
-        display: none;
-      }
-
-      .nav-links .btn {
-        padding: 10px 14px;
-      }
-    }
-  </style>
+  <link rel="stylesheet" href="landing.css?v=20260212006">
 </head>
 <body>
-  <!-- 背景效果 -->
-  <div class="bg-gradient">
-    <div class="gradient-orb orb-1"></div>
-    <div class="gradient-orb orb-2"></div>
-    <div class="gradient-orb orb-3"></div>
-  </div>
-  <div class="grid-bg"></div>
+  <div class="page">
+    <header class="site-header">
+      <div class="container site-header-inner">
+        <a class="brand" href="index.html">
+          <i class="fas fa-cloud"></i>
+          <span>玩玩云</span>
+        </a>

-  <!-- 导航栏 -->
-  <nav class="navbar">
-    <div class="logo">
-      <i class="fas fa-cloud"></i>
-      <span>玩玩云</span>
-    </div>
-    <div class="nav-links">
-      <a href="app.html?action=login" class="btn btn-ghost">
-        <i class="fas fa-arrow-right-to-bracket"></i>
-        <span>登录</span>
-      </a>
-      <a href="app.html?action=register" class="btn btn-primary">
-        <i class="fas fa-rocket"></i>
-        <span>开始使用</span>
-      </a>
-    </div>
-  </nav>
+        <nav class="top-nav">
+          <a href="product.html">产品能力</a>
+          <a href="scenes.html">应用场景</a>
+          <a href="start.html">快速开始</a>
+        </nav>

-  <!-- 主内容 -->
-  <main class="main">
-    <div class="container">
-      <!-- 左侧文案 -->
-      <div class="hero-content">
-        <div class="badge">
-          <i class="fas fa-circle"></i>
-          <span>安全 · 高效 · 简洁</span>
-        </div>
-        <h1 class="hero-title">
-          现代化<br><span class="gradient-text">云存储平台</span>
-        </h1>
-        <p class="hero-desc">
-          简单、安全、高效的文件管理解决方案。支持 OSS 云存储和服务器本地存储双模式，随时随地管理和分享你的文件。
-        </p>
-        <div class="hero-buttons">
-          <a href="app.html?action=register" class="btn btn-primary btn-large">
-            <i class="fas fa-rocket"></i>
-            <span>免费注册</span>
+        <div class="header-actions">
+          <a href="app.html?action=login" class="btn btn-secondary">
+            <i class="fas fa-circle-user"></i>
+            登录
          </a>
-          <a href="app.html?action=login" class="btn btn-ghost btn-large">
-            <i class="fas fa-play"></i>
-            <span>已有账号</span>
+          <a href="app.html?action=register" class="btn btn-primary">
+            <i class="fas fa-user-plus"></i>
+            免费注册
          </a>
        </div>
-        <div class="stats">
-          <div class="stat-item">
-            <div class="stat-value">5GB</div>
-            <div class="stat-label">单文件上限</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-value">双模式</div>
-            <div class="stat-label">存储方案</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-value">24/7</div>
-            <div class="stat-label">全天候服务</div>
-          </div>
-        </div>
      </div>
+    </header>

-      <!-- 右侧功能卡片 -->
-      <div class="features-grid">
-        <div class="feature-card">
-          <div class="feature-icon">
-            <i class="fas fa-cloud"></i>
+    <main class="main">
+      <div class="container">
+        <section class="hero">
+          <div>
+            <div class="hero-tag">
+              <i class="fas fa-shield-halved"></i>
+              企业网盘 · 稳定可控
+            </div>
+            <h1 class="hero-title">像主流网盘一样好用，
+              <br>更适合你的私有部署场景</h1>
+            <p class="hero-desc">
+              玩玩云提供文件上传、在线预览、分享权限、存储配额与后台管理能力，支持本地与 OSS 双模式，满足团队长期文件管理与协作需求。
+            </p>
+            <div class="hero-actions">
+              <a href="app.html?action=register" class="btn btn-primary">
+                <i class="fas fa-rocket"></i>
+                立即开始
+              </a>
+              <a href="app.html?action=login" class="btn btn-secondary">
+                <i class="fas fa-circle-user"></i>
+                已有账号，去登录
+              </a>
+            </div>
+            <div class="hero-points">
+              <span><i class="fas fa-check-circle"></i> 单文件分享 / 密码访问 / 时效控制</span>
+              <span><i class="fas fa-check-circle"></i> 用户存储策略与配额可按人精细化配置</span>
+              <span><i class="fas fa-check-circle"></i> 网页端与移动端统一体验，开箱即用</span>
+            </div>
          </div>
-          <h3 class="feature-title">OSS 云存储</h3>
-          <p class="feature-desc">支持阿里云、腾讯云、AWS S3，数据完全自主掌控</p>
-        </div>
-        <div class="feature-card">
-          <div class="feature-icon">
-            <i class="fas fa-cloud-arrow-up"></i>
-          </div>
-          <h3 class="feature-title">极速上传</h3>
-          <p class="feature-desc">拖拽上传，实时进度，支持大文件直连上传</p>
-        </div>
-        <div class="feature-card">
-          <div class="feature-icon">
-            <i class="fas fa-share-nodes"></i>
-          </div>
-          <h3 class="feature-title">安全分享</h3>
-          <p class="feature-desc">一键生成链接，支持密码保护和有效期</p>
-        </div>
-        <div class="feature-card">
-          <div class="feature-icon">
-            <i class="fas fa-shield-halved"></i>
-          </div>
-          <h3 class="feature-title">企业安全</h3>
-          <p class="feature-desc">JWT 认证，bcrypt 加密，全链路安全</p>
-        </div>
-      </div>
-    </div>
-  </main>

-  <!-- 底部技术栈 -->
-  <div class="tech-bar">
-    <div class="tech-list">
-      <div class="tech-item">
-        <i class="fab fa-node-js"></i>
-        <span>Node.js</span>
+          <div class="carousel" id="netdiskCarousel">
+            <div class="carousel-viewport">
+              <article class="carousel-slide is-active" data-title="文件管理">
+                <div class="slide-head">
+                  <div class="slide-title">文件管理界面</div>
+                  <span class="slide-tag">目录组织</span>
+                </div>
+                <div class="slide-body">
+                  <div class="slide-row"><span>当前目录</span><strong>/项目文档/交付包</strong></div>
+                  <div class="slide-row"><span>文件数量</span><strong>128 项</strong></div>
+                  <div class="slide-row"><span>总容量</span><strong>7.6 GB</strong></div>
+                  <div class="slide-progress"><span style="width: 62%;"></span></div>
+                  <div class="slide-row"><span>最近上传</span><strong>需求说明-v3.pdf</strong></div>
+                </div>
+              </article>
+
+              <article class="carousel-slide" data-title="分享控制">
+                <div class="slide-head">
+                  <div class="slide-title">分享权限控制</div>
+                  <span class="slide-tag">安全分享</span>
+                </div>
+                <div class="slide-body">
+                  <div class="slide-row"><span>分享链接</span><strong>/s/Ab8K9Q</strong></div>
+                  <div class="slide-row"><span>访问方式</span><strong>密码 + 有效期</strong></div>
+                  <div class="slide-row"><span>访问次数</span><strong>剩余 9 / 10</strong></div>
+                  <div class="slide-progress"><span style="width: 90%; background: linear-gradient(90deg,#f59e0b,#ef4444);"></span></div>
+                  <div class="slide-row"><span>过期时间</span><strong>2026-02-20 23:59</strong></div>
+                </div>
+              </article>
+
+              <article class="carousel-slide" data-title="存储策略">
+                <div class="slide-head">
+                  <div class="slide-title">双存储模式</div>
+                  <span class="slide-tag">本地 + OSS</span>
+                </div>
+                <div class="slide-body">
+                  <div class="slide-row"><span>当前存储</span><strong>OSS 存储</strong></div>
+                  <div class="slide-row"><span>已使用</span><strong>408.99 MB / 1 GB</strong></div>
+                  <div class="slide-row"><span>用户配额</span><strong>默认 1 GB（可调整）</strong></div>
+                  <div class="slide-progress"><span style="width: 41%; background: linear-gradient(90deg,#22c55e,#2468f2);"></span></div>
+                  <div class="slide-row"><span>策略状态</span><strong>管理员可统一下发</strong></div>
+                </div>
+              </article>
+            </div>
+
+            <div class="carousel-footer">
+              <div class="carousel-dots" id="carouselDots">
+                <button class="carousel-dot active" data-index="0" aria-label="切换到第1张"></button>
+                <button class="carousel-dot" data-index="1" aria-label="切换到第2张"></button>
+                <button class="carousel-dot" data-index="2" aria-label="切换到第3张"></button>
+              </div>
+              <div class="carousel-nav">
+                <button class="carousel-btn" id="carouselPrev" aria-label="上一张"><i class="fas fa-angle-left"></i></button>
+                <button class="carousel-btn" id="carouselNext" aria-label="下一张"><i class="fas fa-angle-right"></i></button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title"><i class="fas fa-layer-group"></i>核心能力</h2>
+          <div class="feature-grid">
+            <article class="feature-card">
+              <div class="feature-icon"><i class="fas fa-cloud-arrow-up"></i></div>
+              <div class="feature-name">高效上传</div>
+              <p class="feature-desc">支持多文件上传、拖拽上传与进度反馈，日常资料归档更高效。</p>
+            </article>
+            <article class="feature-card">
+              <div class="feature-icon"><i class="fas fa-folder-tree"></i></div>
+              <div class="feature-name">目录管理</div>
+              <p class="feature-desc">支持目录层级导航、重命名、删除等管理操作，结构清晰。</p>
+            </article>
+            <article class="feature-card">
+              <div class="feature-icon"><i class="fas fa-share-nodes"></i></div>
+              <div class="feature-name">可控分享</div>
+              <p class="feature-desc">可设置密码、有效期、访问次数，外发资料更安全。</p>
+            </article>
+            <article class="feature-card">
+              <div class="feature-icon"><i class="fas fa-user-shield"></i></div>
+              <div class="feature-name">后台管控</div>
+              <p class="feature-desc">支持用户权限、配额策略、存储类型管理，维护成本低。</p>
+            </article>
+          </div>
+        </section>
      </div>
-      <div class="tech-item">
-        <i class="fab fa-vuejs"></i>
-        <span>Vue.js</span>
+    </main>
+
+    <footer class="footer">
+      <div class="container footer-inner">
+        <div>玩玩云 © 2026</div>
+        <div class="footer-tech">
+          <span><i class="fab fa-node-js"></i> Node.js</span>
+          <span><i class="fab fa-vuejs"></i> Vue.js</span>
+          <span><i class="fas fa-database"></i> SQLite</span>
+          <span><i class="fab fa-docker"></i> Docker</span>
+        </div>
      </div>
-      <div class="tech-item">
-        <i class="fas fa-database"></i>
-        <span>SQLite</span>
-      </div>
-      <div class="tech-item">
-        <i class="fab fa-docker"></i>
-        <span>Docker</span>
-      </div>
-    </div>
-    <div class="copyright">
-      玩玩云 © 2025
-    </div>
+    </footer>
  </div>

  <script>
-    // 加载全局主题
+    (function() {
+      const carousel = document.getElementById('netdiskCarousel');
+      if (!carousel) return;
+
+      const slides = Array.from(carousel.querySelectorAll('.carousel-slide'));
+      const dots = Array.from(document.querySelectorAll('#carouselDots .carousel-dot'));
+      const prevBtn = document.getElementById('carouselPrev');
+      const nextBtn = document.getElementById('carouselNext');
+      let currentIndex = 0;
+      let timer = null;
+
+      function render(index) {
+        currentIndex = (index + slides.length) % slides.length;
+        slides.forEach((slide, idx) => {
+          slide.classList.toggle('is-active', idx === currentIndex);
+        });
+        dots.forEach((dot, idx) => {
+          dot.classList.toggle('active', idx === currentIndex);
+        });
+      }
+
+      function next() {
+        render(currentIndex + 1);
+      }
+
+      function startAuto() {
+        stopAuto();
+        timer = setInterval(next, 4500);
+      }
+
+      function stopAuto() {
+        if (timer) {
+          clearInterval(timer);
+          timer = null;
+        }
+      }
+
+      dots.forEach((dot, idx) => {
+        dot.addEventListener('click', () => {
+          render(idx);
+          startAuto();
+        });
+      });
+
+      if (prevBtn) {
+        prevBtn.addEventListener('click', () => {
+          render(currentIndex - 1);
+          startAuto();
+        });
+      }
+
+      if (nextBtn) {
+        nextBtn.addEventListener('click', () => {
+          render(currentIndex + 1);
+          startAuto();
+        });
+      }
+
+      carousel.addEventListener('mouseenter', stopAuto);
+      carousel.addEventListener('mouseleave', startAuto);
+      carousel.addEventListener('touchstart', stopAuto, { passive: true });
+      carousel.addEventListener('touchend', startAuto, { passive: true });
+
+      render(0);
+      startAuto();
+    })();
+
    (async function() {
      try {
        const response = await fetch('/api/public/theme');
        const data = await response.json();
-        if (data.success && data.theme === 'light') {
-          document.body.classList.add('light-theme');
+        if (data.success && data.theme === 'dark') {
+          document.body.classList.add('theme-dark');
        }
-      } catch (e) {
-        console.log('无法加载主题设置');
+      } catch (error) {
+        console.log('主题加载失败，使用默认主题');
      }
    })();
  </script>
--- a/frontend/landing.css
+++ b/frontend/landing.css
@@ -0,0 +1,754 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --bg-page: #f4f7fb;
+  --bg-card: #ffffff;
+  --bg-subtle: #f8fbff;
+  --line: #dbe5f2;
+  --line-soft: #e9eff8;
+  --text-main: #1f2a37;
+  --text-sub: #5b6b7f;
+  --text-muted: #8a96a6;
+  --primary: #2468f2;
+  --primary-dark: #1e57ca;
+  --success: #16a34a;
+  --warning: #d97706;
+  --danger: #dc2626;
+  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --radius: 12px;
+  --max-width: 1200px;
+}
+
+body.theme-dark {
+  --bg-page: #0f172a;
+  --bg-card: #111b2d;
+  --bg-subtle: #152238;
+  --line: #26364f;
+  --line-soft: #1f3047;
+  --text-main: #e5edf7;
+  --text-sub: #b7c5d8;
+  --text-muted: #8ea0b9;
+  --primary: #3a86ff;
+  --primary-dark: #2d6dd1;
+  --success: #22c55e;
+  --shadow: none;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', Roboto, sans-serif;
+  color: var(--text-main);
+  background: linear-gradient(180deg, #f6f9ff 0%, #f3f6fb 55%, #eef3fb 100%);
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  width: min(var(--max-width), calc(100% - 32px));
+  margin: 0 auto;
+}
+
+.site-header {
+  border-bottom: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(8px);
+  position: sticky;
+  top: 0;
+  z-index: 30;
+}
+
+body.theme-dark .site-header {
+  background: rgba(17, 27, 45, 0.92);
+}
+
+.site-header-inner {
+  min-height: 66px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-main);
+  letter-spacing: 0.2px;
+  text-decoration: none;
+}
+
+.brand i {
+  color: var(--primary);
+  font-size: 20px;
+}
+
+.top-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+  color: var(--text-sub);
+  font-size: 14px;
+}
+
+.top-nav a {
+  color: inherit;
+  text-decoration: none;
+  padding: 6px 2px;
+  border-bottom: 2px solid transparent;
+}
+
+.top-nav a:hover {
+  color: var(--primary);
+}
+
+.top-nav a.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+  font-weight: 700;
+}
+
+.header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.btn {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 9px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  cursor: pointer;
+  transition: .2s ease;
+  white-space: nowrap;
+}
+
+.btn-primary {
+  color: #fff;
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.btn-primary:hover {
+  background: var(--primary-dark);
+  border-color: var(--primary-dark);
+}
+
+.btn-secondary {
+  color: var(--text-main);
+  background: var(--bg-card);
+  border-color: var(--line);
+}
+
+.btn-secondary:hover {
+  border-color: #c2d3ea;
+  background: #f7faff;
+}
+
+.main {
+  flex: 1;
+  padding: 24px 0 34px;
+}
+
+.hero {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  box-shadow: var(--shadow);
+  padding: 26px;
+  display: grid;
+  grid-template-columns: 1fr 1.05fr;
+  gap: 22px;
+  margin-bottom: 16px;
+}
+
+.hero-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #cfe0ff;
+  border-radius: 999px;
+  background: #ecf4ff;
+  color: #1f5dd2;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 14px;
+}
+
+body.theme-dark .hero-tag {
+  border-color: #31548a;
+  background: #1e2f4e;
+  color: #b9d6ff;
+}
+
+.hero-title {
+  font-size: clamp(30px, 4vw, 42px);
+  line-height: 1.18;
+  margin-bottom: 14px;
+  letter-spacing: 0.1px;
+}
+
+.hero-desc {
+  color: var(--text-sub);
+  font-size: 15px;
+  max-width: 560px;
+  margin-bottom: 18px;
+}
+
+.hero-actions {
+  display: inline-flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.hero-points {
+  display: grid;
+  gap: 8px;
+  color: var(--text-sub);
+  font-size: 13px;
+}
+
+.hero-points span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.hero-points i {
+  color: var(--success);
+}
+
+.carousel {
+  border: 1px solid var(--line-soft);
+  border-radius: 12px;
+  background: var(--bg-subtle);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 340px;
+}
+
+.carousel-viewport {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.carousel-slide {
+  position: absolute;
+  inset: 0;
+  padding: 18px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(16px);
+  transition: opacity .32s ease, transform .32s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.carousel-slide.is-active {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+.slide-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.slide-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-main);
+}
+
+.slide-tag {
+  font-size: 12px;
+  color: var(--text-muted);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 2px 8px;
+  background: var(--bg-card);
+}
+
+.slide-body {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--bg-card);
+  padding: 14px;
+  display: grid;
+  gap: 10px;
+  flex: 1;
+}
+
+.slide-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-sub);
+}
+
+.slide-row strong {
+  color: var(--text-main);
+  font-weight: 700;
+}
+
+.slide-progress {
+  height: 10px;
+  border-radius: 999px;
+  background: #e4ebf7;
+  overflow: hidden;
+}
+
+.slide-progress span {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #33c1ff, var(--primary));
+}
+
+.carousel-footer {
+  border-top: 1px solid var(--line-soft);
+  background: var(--bg-card);
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.carousel-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.carousel-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  border: 1px solid #c8d6ea;
+  background: #dbe5f3;
+  cursor: pointer;
+  transition: .2s ease;
+}
+
+.carousel-dot.active {
+  width: 20px;
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.carousel-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.carousel-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: var(--bg-card);
+  color: var(--text-sub);
+  cursor: pointer;
+}
+
+.carousel-btn:hover {
+  color: var(--primary);
+  border-color: #bfd0e8;
+}
+
+.page-banner {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  box-shadow: var(--shadow);
+  padding: 22px;
+  margin-bottom: 14px;
+}
+
+.page-banner h1 {
+  font-size: clamp(28px, 4vw, 36px);
+  margin-bottom: 10px;
+  line-height: 1.2;
+}
+
+.page-banner p {
+  color: var(--text-sub);
+  font-size: 15px;
+  max-width: 860px;
+}
+
+.kpi-row {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.kpi-card {
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  padding: 12px;
+}
+
+.kpi-label {
+  color: var(--text-muted);
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.kpi-value {
+  color: var(--text-main);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.section {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  box-shadow: var(--shadow);
+  padding: 18px;
+  margin-bottom: 14px;
+}
+
+.section-title {
+  font-size: 18px;
+  margin-bottom: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-title i {
+  color: var(--primary);
+  font-size: 15px;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.feature-card {
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  padding: 14px;
+}
+
+.feature-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: #e9f2ff;
+  color: var(--primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.feature-name {
+  font-size: 15px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+
+.feature-desc {
+  font-size: 13px;
+  color: var(--text-sub);
+}
+
+.scene-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.scene {
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  padding: 14px;
+  display: grid;
+  gap: 8px;
+}
+
+.scene h3 {
+  font-size: 15px;
+}
+
+.scene p {
+  font-size: 13px;
+  color: var(--text-sub);
+}
+
+.list-check {
+  list-style: none;
+  display: grid;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.list-check li {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.list-check li i {
+  color: var(--success);
+  font-size: 10px;
+}
+
+.matrix {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.matrix-card {
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  padding: 14px;
+}
+
+.matrix-card h3 {
+  font-size: 15px;
+  margin-bottom: 6px;
+}
+
+.matrix-card p {
+  color: var(--text-sub);
+  font-size: 13px;
+}
+
+.step-line {
+  display: grid;
+  gap: 10px;
+}
+
+.step-item {
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  padding: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.step-num {
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  background: var(--primary);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.step-content h3 {
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+
+.step-content p {
+  color: var(--text-sub);
+  font-size: 13px;
+}
+
+.cta-panel {
+  border: 1px solid #cfe0ff;
+  border-radius: 12px;
+  background: #edf4ff;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+body.theme-dark .cta-panel {
+  border-color: #31548a;
+  background: #1e2f4e;
+}
+
+.cta-panel p {
+  font-size: 14px;
+  color: var(--text-sub);
+}
+
+.footer {
+  border-top: 1px solid var(--line);
+  background: var(--bg-card);
+  padding: 14px 0;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.footer-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.footer-tech {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 1060px) {
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .feature-grid,
+  .scene-grid,
+  .kpi-row,
+  .matrix {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    width: calc(100% - 20px);
+  }
+
+  .site-header-inner {
+    min-height: unset;
+    padding: 8px 0;
+    flex-wrap: wrap;
+  }
+
+  .top-nav {
+    order: 3;
+    width: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .header-actions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .header-actions .btn {
+    width: 100%;
+  }
+
+  .main {
+    padding-top: 16px;
+  }
+
+  .hero,
+  .section,
+  .page-banner {
+    padding: 14px;
+  }
+
+  .carousel {
+    min-height: 320px;
+  }
+
+  .feature-grid,
+  .scene-grid,
+  .kpi-row,
+  .matrix {
+    grid-template-columns: 1fr;
+  }
+
+  .cta-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .cta-panel .btn {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .brand {
+    font-size: 19px;
+  }
+
+  .hero-title,
+  .page-banner h1 {
+    font-size: 28px;
+  }
+
+  .hero-actions {
+    width: 100%;
+  }
+
+  .hero-actions .btn {
+    width: 100%;
+  }
+
+  .carousel-slide {
+    padding: 12px;
+  }
+
+  .slide-title {
+    font-size: 16px;
+  }
+
+  .slide-row {
+    font-size: 12px;
+  }
+
+  .footer-inner,
+  .footer-tech {
+    justify-content: center;
+  }
+
+  .footer {
+    text-align: center;
+  }
+}
--- a/frontend/product.html
+++ b/frontend/product.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>产品能力 - 玩玩云</title>
+  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="landing.css?v=20260212006">
+</head>
+<body>
+  <div class="page">
+    <header class="site-header">
+      <div class="container site-header-inner">
+        <a class="brand" href="index.html">
+          <i class="fas fa-cloud"></i>
+          <span>玩玩云</span>
+        </a>
+
+        <nav class="top-nav">
+          <a href="product.html" class="active">产品能力</a>
+          <a href="scenes.html">应用场景</a>
+          <a href="start.html">快速开始</a>
+        </nav>
+
+        <div class="header-actions">
+          <a href="app.html?action=login" class="btn btn-secondary">
+            <i class="fas fa-circle-user"></i>
+            登录
+          </a>
+          <a href="app.html?action=register" class="btn btn-primary">
+            <i class="fas fa-user-plus"></i>
+            免费注册
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <main class="main">
+      <div class="container">
+        <section class="page-banner">
+          <h1>产品能力</h1>
+          <p>围绕“上传、管理、分享、权限”构建企业网盘核心能力，保持简单操作路径与稳定使用体验。</p>
+          <div class="kpi-row">
+            <div class="kpi-card">
+              <div class="kpi-label">存储模式</div>
+              <div class="kpi-value">本地 + OSS</div>
+            </div>
+            <div class="kpi-card">
+              <div class="kpi-label">分享策略</div>
+              <div class="kpi-value">密码/时效/次数</div>
+            </div>
+            <div class="kpi-card">
+              <div class="kpi-label">管理能力</div>
+              <div class="kpi-value">用户/配额/权限</div>
+            </div>
+          </div>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title"><i class="fas fa-layer-group"></i>核心功能矩阵</h2>
+          <div class="feature-grid">
+            <article class="feature-card">
+              <div class="feature-icon"><i class="fas fa-cloud-arrow-up"></i></div>
+              <div class="feature-name">上传与同步</div>
+              <p class="feature-desc">支持多文件上传、拖拽上传与进度反馈，上传结果即时可见。</p>
+            </article>
+            <article class="feature-card">
+              <div class="feature-icon"><i class="fas fa-folder-tree"></i></div>
+              <div class="feature-name">目录管理</div>
+              <p class="feature-desc">支持文件夹层级管理、重命名、删除与路径导航。</p>
+            </article>
+            <article class="feature-card">
+              <div class="feature-icon"><i class="fas fa-image"></i></div>
+              <div class="feature-name">在线预览</div>
+              <p class="feature-desc">图片、视频、音频等常见格式可在线打开预览。</p>
+            </article>
+            <article class="feature-card">
+              <div class="feature-icon"><i class="fas fa-share-nodes"></i></div>
+              <div class="feature-name">安全分享</div>
+              <p class="feature-desc">支持访问密码、有效期、访问次数，外发更可控。</p>
+            </article>
+          </div>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title"><i class="fas fa-sliders"></i>管理能力</h2>
+          <div class="matrix">
+            <article class="matrix-card">
+              <h3>用户与权限管理</h3>
+              <p>管理员可分配用户权限、管理账号状态，支持业务隔离需求。</p>
+              <ul class="list-check" style="margin-top:8px;">
+                <li><i class="fas fa-check"></i>管理员/用户角色分离</li>
+                <li><i class="fas fa-check"></i>权限策略可调整</li>
+                <li><i class="fas fa-check"></i>支持后续策略扩展</li>
+              </ul>
+            </article>
+            <article class="matrix-card">
+              <h3>存储策略与配额</h3>
+              <p>支持按用户设置存储类型、默认配额、容量上限，避免资源失控。</p>
+              <ul class="list-check" style="margin-top:8px;">
+                <li><i class="fas fa-check"></i>默认配额可配置</li>
+                <li><i class="fas fa-check"></i>OSS 与本地并行管理</li>
+                <li><i class="fas fa-check"></i>容量使用实时可见</li>
+              </ul>
+            </article>
+          </div>
+        </section>
+
+        <section class="section">
+          <div class="cta-panel">
+            <div>
+              <h3 style="font-size:16px;margin-bottom:4px;">开始体验完整产品能力</h3>
+              <p>注册账号后即可进入文件管理后台，按你的业务流程配置网盘策略。</p>
+            </div>
+            <a href="app.html?action=register" class="btn btn-primary"><i class="fas fa-rocket"></i>立即开始</a>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="container footer-inner">
+        <div>玩玩云 © 2026</div>
+        <div class="footer-tech">
+          <span><i class="fab fa-node-js"></i> Node.js</span>
+          <span><i class="fab fa-vuejs"></i> Vue.js</span>
+          <span><i class="fas fa-database"></i> SQLite</span>
+          <span><i class="fab fa-docker"></i> Docker</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+
+  <script>
+    (async function() {
+      try {
+        const response = await fetch('/api/public/theme');
+        const data = await response.json();
+        if (data.success && data.theme === 'dark') {
+          document.body.classList.add('theme-dark');
+        }
+      } catch (error) {
+        console.log('主题加载失败，使用默认主题');
+      }
+    })();
+  </script>
+</body>
+</html>
--- a/frontend/scenes.html
+++ b/frontend/scenes.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>应用场景 - 玩玩云</title>
+  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="landing.css?v=20260212006">
+</head>
+<body>
+  <div class="page">
+    <header class="site-header">
+      <div class="container site-header-inner">
+        <a class="brand" href="index.html">
+          <i class="fas fa-cloud"></i>
+          <span>玩玩云</span>
+        </a>
+
+        <nav class="top-nav">
+          <a href="product.html">产品能力</a>
+          <a href="scenes.html" class="active">应用场景</a>
+          <a href="start.html">快速开始</a>
+        </nav>
+
+        <div class="header-actions">
+          <a href="app.html?action=login" class="btn btn-secondary">
+            <i class="fas fa-circle-user"></i>
+            登录
+          </a>
+          <a href="app.html?action=register" class="btn btn-primary">
+            <i class="fas fa-user-plus"></i>
+            免费注册
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <main class="main">
+      <div class="container">
+        <section class="page-banner">
+          <h1>应用场景</h1>
+          <p>无论是团队协作、客户交付还是私有部署文档管理，玩玩云都能提供稳定可控的文件平台能力。</p>
+          <div class="kpi-row">
+            <div class="kpi-card">
+              <div class="kpi-label">文档集中管理</div>
+              <div class="kpi-value">统一入口</div>
+            </div>
+            <div class="kpi-card">
+              <div class="kpi-label">外部交付</div>
+              <div class="kpi-value">安全分享</div>
+            </div>
+            <div class="kpi-card">
+              <div class="kpi-label">数据控制</div>
+              <div class="kpi-value">私有部署</div>
+            </div>
+          </div>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title"><i class="fas fa-briefcase"></i>典型业务场景</h2>
+          <div class="scene-grid">
+            <article class="scene">
+              <h3>团队协作文件库</h3>
+              <p>集中存放项目资料、合同、设计稿，统一访问入口，减少文件分散。</p>
+              <ul class="list-check">
+                <li><i class="fas fa-check"></i>项目文档统一归档</li>
+                <li><i class="fas fa-check"></i>分享权限可追踪</li>
+                <li><i class="fas fa-check"></i>支持移动端快速查看</li>
+              </ul>
+            </article>
+            <article class="scene">
+              <h3>客户交付中心</h3>
+              <p>交付包通过链接安全下发，支持密码与时效，降低误扩散风险。</p>
+              <ul class="list-check">
+                <li><i class="fas fa-check"></i>分享自动失效</li>
+                <li><i class="fas fa-check"></i>下载行为可控</li>
+                <li><i class="fas fa-check"></i>可按客户分目录管理</li>
+              </ul>
+            </article>
+            <article class="scene">
+              <h3>私有化文档平台</h3>
+              <p>适合内网或私有云部署，数据可控，满足合规与长期沉淀需求。</p>
+              <ul class="list-check">
+                <li><i class="fas fa-check"></i>本地与 OSS 灵活组合</li>
+                <li><i class="fas fa-check"></i>用户配额精细化</li>
+                <li><i class="fas fa-check"></i>部署维护成本可控</li>
+              </ul>
+            </article>
+          </div>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title"><i class="fas fa-building"></i>按团队角色使用</h2>
+          <div class="matrix">
+            <article class="matrix-card">
+              <h3>产品/运营团队</h3>
+              <p>用于版本资料、活动素材、协作文档统一管理，避免版本混乱。</p>
+              <ul class="list-check" style="margin-top:8px;">
+                <li><i class="fas fa-check"></i>按项目分类目录</li>
+                <li><i class="fas fa-check"></i>快速检索与下载</li>
+                <li><i class="fas fa-check"></i>外部共享便捷</li>
+              </ul>
+            </article>
+            <article class="matrix-card">
+              <h3>技术/交付团队</h3>
+              <p>用于交付包、部署文档、测试包归档，实现可追溯的交付链路。</p>
+              <ul class="list-check" style="margin-top:8px;">
+                <li><i class="fas fa-check"></i>版本文件集中留存</li>
+                <li><i class="fas fa-check"></i>访问策略可控制</li>
+                <li><i class="fas fa-check"></i>长期沉淀知识资产</li>
+              </ul>
+            </article>
+          </div>
+        </section>
+
+        <section class="section">
+          <div class="cta-panel">
+            <div>
+              <h3 style="font-size:16px;margin-bottom:4px;">让文件平台贴合你的业务场景</h3>
+              <p>你可以先注册体验，再按团队方式配置存储与分享策略。</p>
+            </div>
+            <a href="app.html?action=register" class="btn btn-primary"><i class="fas fa-rocket"></i>开始试用</a>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="container footer-inner">
+        <div>玩玩云 © 2026</div>
+        <div class="footer-tech">
+          <span><i class="fab fa-node-js"></i> Node.js</span>
+          <span><i class="fab fa-vuejs"></i> Vue.js</span>
+          <span><i class="fas fa-database"></i> SQLite</span>
+          <span><i class="fab fa-docker"></i> Docker</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+
+  <script>
+    (async function() {
+      try {
+        const response = await fetch('/api/public/theme');
+        const data = await response.json();
+        if (data.success && data.theme === 'dark') {
+          document.body.classList.add('theme-dark');
+        }
+      } catch (error) {
+        console.log('主题加载失败，使用默认主题');
+      }
+    })();
+  </script>
+</body>
+</html>
--- a/frontend/share.html
+++ b/frontend/share.html
@@ -4,9 +4,9 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件分享 - 玩玩云</title>
-  <script src="libs/vue.global.prod.js"></script>
-  <script src="libs/axios.min.js"></script>
-  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
+  <script src="/libs/vue.global.prod.js"></script>
+  <script src="/libs/axios.min.js"></script>
+  <link rel="stylesheet" href="/libs/fontawesome/css/all.min.css">
  <style>
    /* 防止 Vue 初始化前显示原始模板 */
    [v-cloak] { display: none !important; }
@@ -626,14 +626,359 @@
      background: rgba(255, 255, 255, 0.15);
    }
  </style>
+
+  <style>
+    /* ===== Enterprise Netdisk Share UI Rebuild (Classic Cloud Disk) ===== */
+    body.enterprise-netdisk-share,
+    body.enterprise-netdisk-share.light-theme,
+    body.enterprise-netdisk-share:not(.light-theme) {
+      --bg-primary: #edf2fb;
+      --bg-secondary: #fbfdff;
+      --bg-card: #f8fbff;
+      --bg-card-hover: #eef3fb;
+      --glass-border: #d2ddec;
+      --glass-border-hover: #bccce2;
+      --text-primary: #1f2937;
+      --text-secondary: #5b6472;
+      --text-muted: #8b95a7;
+      --accent-1: #2563eb;
+      --accent-2: #1d4ed8;
+      --accent-3: #1e40af;
+      --glow: rgba(37, 99, 235, 0.14);
+      --danger: #dc2626;
+      --success: #16a34a;
+      --warning: #d97706;
+      background: linear-gradient(180deg, #eef3fb 0%, #f8fafe 42%, #edf2fb 100%) !important;
+      color: var(--text-primary) !important;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', Roboto, sans-serif;
+      line-height: 1.5;
+      padding: 14px 8px;
+      background-attachment: fixed;
+    }
+
+    body.enterprise-netdisk-share::before {
+      display: none !important;
+    }
+
+    body.enterprise-netdisk-share .container {
+      max-width: 1140px;
+      margin: 0 auto;
+    }
+
+    body.enterprise-netdisk-share .card {
+      border: 1px solid var(--glass-border);
+      border-radius: 10px;
+      background: var(--bg-card);
+      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
+      backdrop-filter: none;
+      padding: 18px;
+      margin-bottom: 0;
+    }
+
+    body.enterprise-netdisk-share .title {
+      margin-bottom: 14px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--glass-border);
+      color: var(--text-primary);
+      font-size: 21px;
+      background: none;
+      -webkit-text-fill-color: currentColor;
+    }
+
+    body.enterprise-netdisk-share .title i {
+      color: var(--accent-1);
+      -webkit-text-fill-color: currentColor;
+    }
+
+    body.enterprise-netdisk-share .share-back-btn {
+      margin-right: 6px;
+    }
+
+    body.enterprise-netdisk-share .share-meta-bar {
+      margin-bottom: 12px;
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      background: var(--bg-card-hover);
+      color: var(--text-secondary);
+      font-size: 13px;
+      line-height: 1.7;
+      padding: 10px 12px;
+    }
+
+    body.enterprise-netdisk-share .share-expire-time {
+      color: var(--success);
+    }
+
+    body.enterprise-netdisk-share .share-expire-time.expiring {
+      color: var(--warning);
+    }
+
+    body.enterprise-netdisk-share .share-expire-time.expired {
+      color: var(--danger);
+    }
+
+    body.enterprise-netdisk-share .share-expire-time.valid {
+      color: var(--success);
+    }
+
+    body.enterprise-netdisk-share .btn {
+      border-radius: 8px;
+      border: 1px solid transparent;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 1.2;
+      padding: 9px 14px;
+      box-shadow: none;
+      transition: all .2s ease;
+    }
+
+    body.enterprise-netdisk-share .btn-primary {
+      background: var(--accent-1);
+      border-color: var(--accent-1);
+      color: #fff;
+    }
+
+    body.enterprise-netdisk-share .btn-primary:hover {
+      background: var(--accent-2);
+      border-color: var(--accent-2);
+      transform: none;
+      box-shadow: none;
+    }
+
+    body.enterprise-netdisk-share .btn-secondary {
+      background: var(--bg-secondary);
+      border-color: var(--glass-border);
+      color: var(--text-primary);
+    }
+
+    body.enterprise-netdisk-share .btn-secondary:hover {
+      background: var(--bg-card-hover);
+      border-color: var(--glass-border-hover);
+    }
+
+    body.enterprise-netdisk-share .form-label {
+      color: var(--text-secondary);
+      font-size: 13px;
+      margin-bottom: 6px;
+      font-weight: 600;
+    }
+
+    body.enterprise-netdisk-share .form-input {
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      background: var(--bg-secondary);
+      color: var(--text-primary);
+      padding: 10px 12px;
+      font-size: 14px;
+    }
+
+    body.enterprise-netdisk-share .form-input:focus {
+      border-color: var(--accent-1);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
+      outline: none;
+      background: var(--bg-secondary);
+    }
+
+    body.enterprise-netdisk-share .alert {
+      border-radius: 8px;
+      font-size: 13px;
+      padding: 10px 12px;
+    }
+
+    body.enterprise-netdisk-share .alert-error {
+      background: #fef2f2;
+      border-color: #fca5a5;
+      color: #991b1b;
+    }
+
+    body.enterprise-netdisk-share .view-controls {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    }
+
+    body.enterprise-netdisk-share .loading {
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      background: var(--bg-card-hover);
+      color: var(--text-secondary);
+      padding: 28px 14px;
+    }
+
+    body.enterprise-netdisk-share .spinner {
+      width: 30px;
+      height: 30px;
+      border: 3px solid rgba(148, 163, 184, 0.25);
+      border-top: 3px solid var(--accent-1);
+      margin-bottom: 10px;
+    }
+
+    body.enterprise-netdisk-share .file-grid {
+      gap: 10px;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    }
+
+    body.enterprise-netdisk-share .file-grid-item {
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      background: var(--bg-secondary);
+      min-height: 170px;
+      padding: 12px;
+      transition: all .2s ease;
+    }
+
+    body.enterprise-netdisk-share .file-grid-item:hover {
+      border-color: #93c5fd;
+      background: #f8fbff;
+      transform: none;
+      box-shadow: none;
+    }
+
+    body.enterprise-netdisk-share .file-grid-icon {
+      margin-bottom: 10px;
+    }
+
+    body.enterprise-netdisk-share .file-grid-name {
+      font-size: 13px;
+      line-height: 1.35;
+      color: var(--text-primary);
+    }
+
+    body.enterprise-netdisk-share .file-grid-size {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin: 6px 0 10px;
+    }
+
+    body.enterprise-netdisk-share .file-list {
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      overflow: hidden;
+      background: var(--bg-secondary);
+    }
+
+    body.enterprise-netdisk-share .file-item {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--glass-border);
+      transition: all .2s ease;
+    }
+
+    body.enterprise-netdisk-share .file-item:hover {
+      background: var(--bg-card-hover);
+    }
+
+    body.enterprise-netdisk-share .file-icon {
+      width: 26px;
+      text-align: center;
+      flex-shrink: 0;
+    }
+
+    body.enterprise-netdisk-share .single-file-container {
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      background: var(--bg-card-hover);
+      padding: 14px;
+      min-height: auto;
+    }
+
+    body.enterprise-netdisk-share .single-file-card {
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      background: var(--bg-secondary);
+      box-shadow: none;
+      padding: 20px;
+      max-width: 460px;
+    }
+
+    body.enterprise-netdisk-share .single-file-name {
+      color: var(--text-primary);
+      font-size: 18px;
+    }
+
+    body.enterprise-netdisk-share .single-file-size {
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
+
+    body.enterprise-netdisk-share .single-file-download {
+      padding: 10px 20px;
+      font-size: 14px;
+    }
+
+    body.enterprise-netdisk-share .share-not-found {
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      background: var(--bg-card-hover);
+      padding: 40px 14px;
+      text-align: center;
+    }
+
+    body.enterprise-netdisk-share .share-not-found-title {
+      margin-bottom: 10px;
+      font-size: 22px;
+      color: var(--text-primary);
+    }
+
+    body.enterprise-netdisk-share .share-not-found-message {
+      color: var(--text-secondary);
+      font-size: 14px;
+      line-height: 1.6;
+    }
+
+    body.enterprise-netdisk-share ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    body.enterprise-netdisk-share ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    body.enterprise-netdisk-share ::-webkit-scrollbar-thumb {
+      background: rgba(148, 163, 184, 0.45);
+      border-radius: 999px;
+    }
+
+    @media (max-width: 900px) {
+      body.enterprise-netdisk-share .card {
+        padding: 14px;
+      }
+
+      body.enterprise-netdisk-share .title {
+        font-size: 20px;
+      }
+
+      body.enterprise-netdisk-share .view-controls {
+        flex-direction: column;
+      }
+
+      body.enterprise-netdisk-share .view-controls .btn {
+        width: 100%;
+      }
+
+      body.enterprise-netdisk-share .file-grid {
+        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
+        gap: 8px;
+      }
+
+      body.enterprise-netdisk-share .file-grid-item {
+        min-height: 152px;
+      }
+
+      body.enterprise-netdisk-share .single-file-card {
+        padding: 16px;
+      }
+    }
+  </style>
 </head>
-<body>
+<body class="enterprise-netdisk-share">
  <div id="app" v-cloak>
    <div class="container">
      <div class="card">
        <div class="title">
          <!-- 返回按钮：仅在查看单个文件详情且不是单文件分享时显示 -->
-          <button v-if="viewingFile && shareInfo.share_type !== 'file'" class="btn btn-secondary" @click="backToList" style="margin-right: 10px;">
+          <button v-if="viewingFile && shareInfo.share_type !== 'file'" class="btn btn-secondary share-back-btn" @click="backToList">
            <i class="fas fa-arrow-left"></i> 返回列表
          </button>
          <i class="fas fa-cloud"></i>
@@ -671,11 +1016,11 @@

        <!-- 文件列表 -->
        <div v-else-if="verified">
-          <p style="color: var(--text-secondary); margin-bottom: 20px;">
+          <p class="share-meta-bar">
            分享者: <strong style="color: var(--text-primary);">{{ shareInfo.username }}</strong> |
            创建时间: {{ formatDate(shareInfo.created_at) }}
-            <span v-if="shareInfo.expires_at"> | 到期时间: <strong :style="{color: isExpiringSoon(shareInfo.expires_at) ? '#f59e0b' : isExpired(shareInfo.expires_at) ? '#ef4444' : '#22c55e'}">{{ formatExpireTime(shareInfo.expires_at) }}</strong></span>
-            <span v-else> | 有效期: <strong style="color: #22c55e;">永久有效</strong></span>
+            <span v-if="shareInfo.expires_at"> | 到期时间: <strong class="share-expire-time" :class="{ expiring: isExpiringSoon(shareInfo.expires_at), expired: isExpired(shareInfo.expires_at) }">{{ formatExpireTime(shareInfo.expires_at) }}</strong></span>
+            <span v-else> | 有效期: <strong class="share-expire-time valid">永久有效</strong></span>
          </p>

          <!-- 视图切换按钮 (多文件时才显示) -->
@@ -777,7 +1122,21 @@
      methods: {
        async init() {
          const urlParams = new URLSearchParams(window.location.search);
-          this.shareCode = urlParams.get('code');
+          let shareCode = (urlParams.get('code') || '').trim();
+
+          // 兼容 /s/{code} 直链（无 query 参数）
+          if (!shareCode) {
+            const match = window.location.pathname.match(/^\/s\/([^/?#]+)/i);
+            if (match && match[1]) {
+              try {
+                shareCode = decodeURIComponent(match[1]).trim();
+              } catch (_) {
+                shareCode = match[1].trim();
+              }
+            }
+          }
+
+          this.shareCode = shareCode;

          if (!this.shareCode) {
            this.errorMessage = '无效的分享链接';
@@ -906,21 +1265,20 @@

          try {
            // 获取下载 URL（OSS 直连或后端代理）
-            const params = { path: filePath };
-            if (this.password) {
-              params.password = this.password;
-            }
-
-            const { data } = await axios.get(`${this.apiBase}/api/share/${this.shareCode}/download-url`, { params });
+            const { data } = await axios.post(`${this.apiBase}/api/share/${this.shareCode}/download-url`, {
+              path: filePath,
+              password: this.password || undefined
+            });

            if (data.success) {
-              // 记录下载次数（异步，不等待）
-              axios.post(`${this.apiBase}/api/share/${this.shareCode}/download`)
-                .catch(err => console.error('记录下载次数失败:', err));
-
              if (data.direct) {
                // OSS 直连下载：新窗口打开
                console.log("[分享下载] OSS 直连下载");
+
+                // 仅直连下载需要单独记录下载次数（本地代理下载在后端接口内已计数）
+                axios.post(`${this.apiBase}/api/share/${this.shareCode}/download`)
+                  .catch(err => console.error('记录下载次数失败:', err));
+
                window.open(data.downloadUrl, '_blank');
              } else {
                // 本地存储：通过后端下载
@@ -930,7 +1288,7 @@
            }
          } catch (error) {
            console.error('[分享下载] 获取下载链接失败:', error);
-            alert('获取下载链接失败: ' + (error.response?.data?.message || error.message));
+            this.errorMessage = '获取下载链接失败: ' + (error.response?.data?.message || error.message);
          }
        },

@@ -1049,7 +1407,28 @@
        }
      },

-      mounted() {
+      async mounted() {
+        axios.defaults.withCredentials = true;
+
+        axios.interceptors.request.use(config => {
+          const csrfToken = document.cookie
+            .split('; ')
+            .find(row => row.startsWith('csrf_token='))
+            ?.split('=')[1];
+
+          if (csrfToken && ['POST', 'PUT', 'DELETE', 'PATCH'].includes(config.method?.toUpperCase())) {
+            config.headers['X-CSRF-Token'] = csrfToken;
+          }
+
+          return config;
+        });
+
+        try {
+          await axios.get(`${this.apiBase}/api/csrf-token`);
+        } catch (error) {
+          console.warn('初始化 CSRF Token 失败:', error?.message || error);
+        }
+
        this.init();
      }
    }).mount('#app');
--- a/frontend/start.html
+++ b/frontend/start.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>快速开始 - 玩玩云</title>
+  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="landing.css?v=20260212006">
+</head>
+<body>
+  <div class="page">
+    <header class="site-header">
+      <div class="container site-header-inner">
+        <a class="brand" href="index.html">
+          <i class="fas fa-cloud"></i>
+          <span>玩玩云</span>
+        </a>
+
+        <nav class="top-nav">
+          <a href="product.html">产品能力</a>
+          <a href="scenes.html">应用场景</a>
+          <a href="start.html" class="active">快速开始</a>
+        </nav>
+
+        <div class="header-actions">
+          <a href="app.html?action=login" class="btn btn-secondary">
+            <i class="fas fa-circle-user"></i>
+            登录
+          </a>
+          <a href="app.html?action=register" class="btn btn-primary">
+            <i class="fas fa-user-plus"></i>
+            免费注册
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <main class="main">
+      <div class="container">
+        <section class="page-banner">
+          <h1>快速开始</h1>
+          <p>3 分钟完成首次体验：注册账号、上传文件、创建安全分享。后续可按业务需要配置存储与权限策略。</p>
+          <div class="kpi-row">
+            <div class="kpi-card">
+              <div class="kpi-label">上手成本</div>
+              <div class="kpi-value">低学习门槛</div>
+            </div>
+            <div class="kpi-card">
+              <div class="kpi-label">部署方式</div>
+              <div class="kpi-value">Docker / Node.js</div>
+            </div>
+            <div class="kpi-card">
+              <div class="kpi-label">推荐起步</div>
+              <div class="kpi-value">默认 1GB 配额</div>
+            </div>
+          </div>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title"><i class="fas fa-list-check"></i>上手流程</h2>
+          <div class="step-line">
+            <article class="step-item">
+              <span class="step-num">1</span>
+              <div class="step-content">
+                <h3>注册并登录</h3>
+                <p>创建用户账号后进入“我的文件”，系统会自动使用默认存储策略与配额。</p>
+              </div>
+            </article>
+            <article class="step-item">
+              <span class="step-num">2</span>
+              <div class="step-content">
+                <h3>上传并整理文件</h3>
+                <p>通过“上传文件”与“新建文件夹”完成基础目录结构，便于后续共享与检索。</p>
+              </div>
+            </article>
+            <article class="step-item">
+              <span class="step-num">3</span>
+              <div class="step-content">
+                <h3>创建分享链接</h3>
+                <p>按需设置密码、有效期和访问次数，将资料安全地发送给目标对象。</p>
+              </div>
+            </article>
+            <article class="step-item">
+              <span class="step-num">4</span>
+              <div class="step-content">
+                <h3>管理员精细配置</h3>
+                <p>在管理员面板配置用户存储类型（本地/OSS）与配额限制，保证资源可控。</p>
+              </div>
+            </article>
+          </div>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title"><i class="fas fa-circle-question"></i>常见问题</h2>
+          <div class="matrix">
+            <article class="matrix-card">
+              <h3>默认配额是多少？</h3>
+              <p>如果管理员未单独设置，系统默认使用 1GB 配额策略，后续可动态调整。</p>
+            </article>
+            <article class="matrix-card">
+              <h3>如何选择存储方式？</h3>
+              <p>支持本地与 OSS 模式。管理员可统一控制，也可在授权下由用户自行切换。</p>
+            </article>
+            <article class="matrix-card">
+              <h3>如何提升分享安全性？</h3>
+              <p>建议启用访问密码、较短有效期和访问次数上限，避免链接扩散风险。</p>
+            </article>
+            <article class="matrix-card">
+              <h3>移动端是否可用？</h3>
+              <p>支持移动端上传、预览、下载与分享操作，常用流程已完成触控优化。</p>
+            </article>
+          </div>
+        </section>
+
+        <section class="section">
+          <div class="cta-panel">
+            <div>
+              <h3 style="font-size:16px;margin-bottom:4px;">准备好了就开始吧</h3>
+              <p>你可以立即注册体验，也可以先登录已有账号继续使用。</p>
+            </div>
+            <div style="display:inline-flex;gap:8px;flex-wrap:wrap;">
+              <a href="app.html?action=register" class="btn btn-primary"><i class="fas fa-rocket"></i>立即注册</a>
+              <a href="app.html?action=login" class="btn btn-secondary"><i class="fas fa-circle-user"></i>去登录</a>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="container footer-inner">
+        <div>玩玩云 © 2026</div>
+        <div class="footer-tech">
+          <span><i class="fab fa-node-js"></i> Node.js</span>
+          <span><i class="fab fa-vuejs"></i> Vue.js</span>
+          <span><i class="fas fa-database"></i> SQLite</span>
+          <span><i class="fab fa-docker"></i> Docker</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+
+  <script>
+    (async function() {
+      try {
+        const response = await fetch('/api/public/theme');
+        const data = await response.json();
+        if (data.success && data.theme === 'dark') {
+          document.body.classList.add('theme-dark');
+        }
+      } catch (error) {
+        console.log('主题加载失败，使用默认主题');
+      }
+    })();
+  </script>
+</body>
+</html>
Author	SHA1	Message	Date
yuyx	12859cbb20	feat: apply UI/storage/share optimizations and quota improvements	2026-02-12 18:02:57 +08:00
yuyx	1fcc60b9aa	feat(frontend): unify landing style and add product/scenes/start pages	2026-02-12 18:02:28 +08:00