new-api/web/src/pages/Setting/Personal/SettingsSidebarModulesUser.jsx

/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import { useState, useEffect, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, Button, Switch, Typography, Row, Col, Avatar } from '@douyinfe/semi-ui';
import { API, showSuccess, showError } from '../../../helpers';
import { StatusContext } from '../../../context/Status';
import { UserContext } from '../../../context/User';
import { useUserPermissions } from '../../../hooks/common/useUserPermissions';
import { useSidebar } from '../../../hooks/common/useSidebar';
import { Settings } from 'lucide-react';

const { Text } = Typography;

export default function SettingsSidebarModulesUser() {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [statusState] = useContext(StatusContext);

  // 使用后端权限验证替代前端角色判断
  const {
    permissions,
    loading: permissionsLoading,
    hasSidebarSettingsPermission,
    isSidebarSectionAllowed,
    isSidebarModuleAllowed,
  } = useUserPermissions();

  // 使用useSidebar钩子获取刷新方法
  const { refreshUserConfig } = useSidebar();

  // 如果没有边栏设置权限，不显示此组件
  if (!permissionsLoading && !hasSidebarSettingsPermission()) {
    return null;
  }

  // 权限加载中，显示加载状态
  if (permissionsLoading) {
    return null;
  }
  
  // 根据用户权限生成默认配置
  const generateDefaultConfig = () => {
    const defaultConfig = {};

    // 聊天区域 - 所有用户都可以访问
    if (isSidebarSectionAllowed('chat')) {
      defaultConfig.chat = {
        enabled: true,
        playground: isSidebarModuleAllowed('chat', 'playground'),
        chat: isSidebarModuleAllowed('chat', 'chat')
      };
    }

    // 控制台区域 - 所有用户都可以访问
    if (isSidebarSectionAllowed('console')) {
      defaultConfig.console = {
        enabled: true,
        detail: isSidebarModuleAllowed('console', 'detail'),
        token: isSidebarModuleAllowed('console', 'token'),
        log: isSidebarModuleAllowed('console', 'log'),
        midjourney: isSidebarModuleAllowed('console', 'midjourney'),
        task: isSidebarModuleAllowed('console', 'task')
      };
    }

    // 个人中心区域 - 所有用户都可以访问
    if (isSidebarSectionAllowed('personal')) {
      defaultConfig.personal = {
        enabled: true,
        topup: isSidebarModuleAllowed('personal', 'topup'),
        personal: isSidebarModuleAllowed('personal', 'personal')
      };
    }

    // 管理员区域 - 只有管理员可以访问
    if (isSidebarSectionAllowed('admin')) {
      defaultConfig.admin = {
        enabled: true,
        channel: isSidebarModuleAllowed('admin', 'channel'),
        models: isSidebarModuleAllowed('admin', 'models'),
        redemption: isSidebarModuleAllowed('admin', 'redemption'),
        user: isSidebarModuleAllowed('admin', 'user'),
        setting: isSidebarModuleAllowed('admin', 'setting')
      };
    }

    return defaultConfig;
  };

  // 用户个人左侧边栏模块设置
  const [sidebarModulesUser, setSidebarModulesUser] = useState({});

  // 管理员全局配置
  const [adminConfig, setAdminConfig] = useState(null);

  // 处理区域级别开关变更
  function handleSectionChange(sectionKey) {
    return (checked) => {
      const newModules = { 
        ...sidebarModulesUser, 
        [sectionKey]: { 
          ...sidebarModulesUser[sectionKey], 
          enabled: checked 
        } 
      };
      setSidebarModulesUser(newModules);
      console.log('用户边栏区域配置变更:', sectionKey, checked, newModules);
    };
  }

  // 处理功能级别开关变更
  function handleModuleChange(sectionKey, moduleKey) {
    return (checked) => {
      const newModules = { 
        ...sidebarModulesUser, 
        [sectionKey]: { 
          ...sidebarModulesUser[sectionKey], 
          [moduleKey]: checked 
        } 
      };
      setSidebarModulesUser(newModules);
      console.log('用户边栏功能配置变更:', sectionKey, moduleKey, checked, newModules);
    };
  }

  // 重置为默认配置（基于权限过滤）
  function resetSidebarModules() {
    const defaultConfig = generateDefaultConfig();
    setSidebarModulesUser(defaultConfig);
    showSuccess(t('已重置为默认配置'));
    console.log('用户边栏配置重置为默认:', defaultConfig);
  }

  // 保存配置
  async function onSubmit() {
    setLoading(true);
    try {
      console.log('保存用户边栏配置:', sidebarModulesUser);
      const res = await API.put('/api/user/self', {
        sidebar_modules: JSON.stringify(sidebarModulesUser),
      });
      const { success, message } = res.data;
      if (success) {
        showSuccess(t('保存成功'));
        console.log('用户边栏配置保存成功');

        // 刷新useSidebar钩子中的用户配置，实现实时更新
        await refreshUserConfig();
        console.log('用户边栏配置已刷新，边栏将立即更新');
      } else {
        showError(message);
        console.error('用户边栏配置保存失败:', message);
      }
    } catch (error) {
      showError(t('保存失败，请重试'));
      console.error('用户边栏配置保存异常:', error);
    } finally {
      setLoading(false);
    }
  }

  // 统一的配置加载逻辑
  useEffect(() => {
    const loadConfigs = async () => {
      try {
        // 获取管理员全局配置
        if (statusState?.status?.SidebarModulesAdmin) {
          const adminConf = JSON.parse(statusState.status.SidebarModulesAdmin);
          setAdminConfig(adminConf);
          console.log('加载管理员边栏配置:', adminConf);
        }

        // 获取用户个人配置
        const userRes = await API.get('/api/user/self');
        if (userRes.data.success && userRes.data.data.sidebar_modules) {
          let userConf;
          // 检查sidebar_modules是字符串还是对象
          if (typeof userRes.data.data.sidebar_modules === 'string') {
            userConf = JSON.parse(userRes.data.data.sidebar_modules);
          } else {
            userConf = userRes.data.data.sidebar_modules;
          }
          console.log('从API加载的用户配置:', userConf);

          // 确保用户配置也经过权限过滤
          const filteredUserConf = {};
          Object.keys(userConf).forEach(sectionKey => {
            if (isSidebarSectionAllowed(sectionKey)) {
              filteredUserConf[sectionKey] = { ...userConf[sectionKey] };
              // 过滤不允许的模块
              Object.keys(userConf[sectionKey]).forEach(moduleKey => {
                if (moduleKey !== 'enabled' && !isSidebarModuleAllowed(sectionKey, moduleKey)) {
                  delete filteredUserConf[sectionKey][moduleKey];
                }
              });
            }
          });
          setSidebarModulesUser(filteredUserConf);
          console.log('权限过滤后的用户配置:', filteredUserConf);
        } else {
          // 如果用户没有配置，使用权限过滤后的默认配置
          const defaultConfig = generateDefaultConfig();
          setSidebarModulesUser(defaultConfig);
          console.log('用户无配置，使用默认配置:', defaultConfig);
        }
      } catch (error) {
        console.error('加载边栏配置失败:', error);
        // 出错时也使用默认配置
        const defaultConfig = generateDefaultConfig();
        setSidebarModulesUser(defaultConfig);
      }
    };

    // 只有权限加载完成且有边栏设置权限时才加载配置
    if (!permissionsLoading && hasSidebarSettingsPermission()) {
      loadConfigs();
    }
  }, [statusState, permissionsLoading, hasSidebarSettingsPermission, isSidebarSectionAllowed, isSidebarModuleAllowed]);

  // 检查功能是否被管理员允许
  const isAllowedByAdmin = (sectionKey, moduleKey = null) => {
    if (!adminConfig) return true;
    
    if (moduleKey) {
      return adminConfig[sectionKey]?.enabled && adminConfig[sectionKey]?.[moduleKey];
    } else {
      return adminConfig[sectionKey]?.enabled;
    }
  };

  // 区域配置数据（根据后端权限过滤）
  const sectionConfigs = [
    {
      key: 'chat',
      title: t('聊天区域'),
      description: t('操练场和聊天功能'),
      modules: [
        { key: 'playground', title: t('操练场'), description: t('AI模型测试环境') },
        { key: 'chat', title: t('聊天'), description: t('聊天会话管理') }
      ]
    },
    {
      key: 'console',
      title: t('控制台区域'),
      description: t('数据管理和日志查看'),
      modules: [
        { key: 'detail', title: t('数据看板'), description: t('系统数据统计') },
        { key: 'token', title: t('令牌管理'), description: t('API令牌管理') },
        { key: 'log', title: t('使用日志'), description: t('API使用记录') },
        { key: 'midjourney', title: t('绘图日志'), description: t('绘图任务记录') },
        { key: 'task', title: t('任务日志'), description: t('系统任务记录') }
      ]
    },
    {
      key: 'personal',
      title: t('个人中心区域'),
      description: t('用户个人功能'),
      modules: [
        { key: 'topup', title: t('钱包管理'), description: t('余额充值管理') },
        { key: 'personal', title: t('个人设置'), description: t('个人信息设置') }
      ]
    },
    {
      key: 'admin',
      title: t('管理员区域'),
      description: t('系统管理功能'),
      modules: [
        { key: 'channel', title: t('渠道管理'), description: t('API渠道配置') },
        { key: 'models', title: t('模型管理'), description: t('AI模型配置') },
        { key: 'redemption', title: t('兑换码管理'), description: t('兑换码生成管理') },
        { key: 'user', title: t('用户管理'), description: t('用户账户管理') },
        { key: 'setting', title: t('系统设置'), description: t('系统参数配置') }
      ]
    }
  ].filter(section => {
    // 使用后端权限验证替代前端角色判断
    return isSidebarSectionAllowed(section.key);
  }).map(section => ({
    ...section,
    modules: section.modules.filter(module =>
      isSidebarModuleAllowed(section.key, module.key)
    )
  })).filter(section =>
    // 过滤掉没有可用模块的区域
    section.modules.length > 0 && isAllowedByAdmin(section.key)
  );

  return (
    <Card className='!rounded-2xl shadow-sm border-0'>
      {/* 卡片头部 */}
      <div className='flex items-center mb-4'>
        <Avatar size='small' color='purple' className='mr-3 shadow-md'>
          <Settings size={16} />
        </Avatar>
        <div>
          <Typography.Text className='text-lg font-medium'>
            {t('左侧边栏个人设置')}
          </Typography.Text>
          <div className='text-xs text-gray-600'>
            {t('个性化设置左侧边栏的显示内容')}
          </div>
        </div>
      </div>

      <div className='mb-4'>
        <Text type="secondary" className='text-sm text-gray-600'>
          {t('您可以个性化设置侧边栏的要显示功能')}
        </Text>
      </div>

        {sectionConfigs.map((section) => (
          <div key={section.key} className='mb-6'>
            {/* 区域标题和总开关 */}
            <div className='flex justify-between items-center mb-4 p-4 bg-gray-50 rounded-xl border border-gray-200'>
              <div>
                <div className='font-semibold text-base text-gray-900 mb-1'>
                  {section.title}
                </div>
                <Text className='text-xs text-gray-600'>
                  {section.description}
                </Text>
              </div>
              <Switch
                checked={sidebarModulesUser[section.key]?.enabled}
                onChange={handleSectionChange(section.key)}
                size="default"
              />
            </div>

            {/* 功能模块网格 */}
            <Row gutter={[12, 12]}>
              {section.modules.map((module) => (
                <Col key={module.key} xs={24} sm={12} md={8} lg={6} xl={6}>
                  <Card
                    className={`!rounded-xl border border-gray-200 hover:border-blue-300 transition-all duration-200 ${
                      sidebarModulesUser[section.key]?.enabled ? '' : 'opacity-50'
                    }`}
                    bodyStyle={{ padding: '16px' }}
                    hoverable
                  >
                    <div className='flex justify-between items-center h-full'>
                      <div className='flex-1 text-left'>
                        <div className='font-semibold text-sm text-gray-900 mb-1'>
                          {module.title}
                        </div>
                        <Text className='text-xs text-gray-600 leading-relaxed block'>
                          {module.description}
                        </Text>
                      </div>
                      <div className='ml-4'>
                        <Switch
                          checked={sidebarModulesUser[section.key]?.[module.key]}
                          onChange={handleModuleChange(section.key, module.key)}
                          size="default"
                          disabled={!sidebarModulesUser[section.key]?.enabled}
                        />
                      </div>
                    </div>
                  </Card>
                </Col>
              ))}
            </Row>
          </div>
        ))}

      {/* 底部按钮 */}
      <div className='flex justify-end gap-3 mt-6 pt-4 border-t border-gray-200'>
        <Button
          type='tertiary'
          onClick={resetSidebarModules}
          className='!rounded-lg'
        >
          {t('重置为默认')}
        </Button>
        <Button
          type='primary'
          onClick={onSubmit}
          loading={loading}
          className='!rounded-lg'
        >
          {t('保存设置')}
        </Button>
      </div>
    </Card>
  );
}