|
|
@@ -1,488 +0,0 @@
|
|
|
-/*
|
|
|
-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 [email protected]
|
|
|
-*/
|
|
|
-
|
|
|
-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 { mergeAdminConfig, 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'),
|
|
|
- deployment: isSidebarModuleAllowed('admin', 'deployment'),
|
|
|
- redemption: isSidebarModuleAllowed('admin', 'redemption'),
|
|
|
- user: isSidebarModuleAllowed('admin', 'user'),
|
|
|
- subscription: isSidebarModuleAllowed('admin', 'subscription'),
|
|
|
- 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) {
|
|
|
- try {
|
|
|
- const adminConf = JSON.parse(
|
|
|
- statusState.status.SidebarModulesAdmin,
|
|
|
- );
|
|
|
- const mergedAdminConf = mergeAdminConfig(adminConf);
|
|
|
- setAdminConfig(mergedAdminConf);
|
|
|
- console.log('加载管理员边栏配置:', mergedAdminConf);
|
|
|
- } catch (error) {
|
|
|
- const mergedAdminConf = mergeAdminConfig(null);
|
|
|
- setAdminConfig(mergedAdminConf);
|
|
|
- console.log(
|
|
|
- '加载管理员边栏配置失败，使用默认配置:',
|
|
|
- mergedAdminConf,
|
|
|
- );
|
|
|
- }
|
|
|
- } else {
|
|
|
- const mergedAdminConf = mergeAdminConfig(null);
|
|
|
- setAdminConfig(mergedAdminConf);
|
|
|
- console.log('管理员边栏配置缺失，使用默认配置:', mergedAdminConf);
|
|
|
- }
|
|
|
-
|
|
|
- // 获取用户个人配置
|
|
|
- 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: 'deployment',
|
|
|
- title: t('模型部署'),
|
|
|
- description: t('模型部署管理'),
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'subscription',
|
|
|
- title: t('订阅管理'),
|
|
|
- description: t('订阅套餐管理'),
|
|
|
- },
|
|
|
- {
|
|
|
- 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 !== false}
|
|
|
- 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 !== false
|
|
|
- ? ''
|
|
|
- : '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] !==
|
|
|
- false
|
|
|
- }
|
|
|
- onChange={handleModuleChange(section.key, module.key)}
|
|
|
- size='default'
|
|
|
- disabled={
|
|
|
- sidebarModulesUser[section.key]?.enabled === false
|
|
|
- }
|
|
|
- />
|
|
|
- </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>
|
|
|
- );
|
|
|
-}
|
CaIon