oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: Add console announcements and FAQ management system

Browse Source 
- Add SettingsAnnouncements component with full CRUD operations for system announcements
  * Support multiple announcement types (default, ongoing, success, warning, error)
  * Include publish date, content, type classification and additional notes
  * Implement batch operations and pagination for better data management
  * Add real-time preview with relative time display and date formatting

- Add SettingsFAQ component for comprehensive FAQ management
  * Support question-answer pairs with rich text content
  * Include full editing, deletion and creation capabilities
  * Implement batch delete operations and paginated display
  * Add validation for complete Q&A information

- Integrate announcement and FAQ modules into DashboardSetting
  * Add unified configuration interface in admin console
  * Implement auto-refresh functionality for real-time updates
  * Add loading states and error handling for better UX

- Enhance backend API support in controller and setting modules
  * Add validation functions for console settings
  * Include time and sorting utilities for announcement management
  * Extend API endpoints for announcement and FAQ data persistence

- Improve frontend infrastructure
  * Add new translation keys for internationalization support
  * Update utility functions for date/time formatting
  * Enhance CSS styles for better component presentation
  * Add icons and visual improvements for announcements and FAQ sections

This implementation provides administrators with comprehensive tools to manage
system-wide announcements and user FAQ content through an intuitive console interface.
This commit is contained in:
Apple\Apple
2025-06-10 20:10:07 +08:00
parent 56188c33b5
commit 26b70d6a25
11 changed files with 1487 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
controller/misc.go
View File

@@ -75,6 +75,8 @@ func GetStatus(c *gin.Context) {
"oidc_authorization_endpoint": system_setting.GetOIDCSettings().AuthorizationEndpoint,
"setup": constant.Setup,
"api_info": setting.GetApiInfo(),
"announcements": setting.GetAnnouncements(),
"faq": setting.GetFAQ(),
},
})
return

18
controller/option.go
View File

@@ -128,6 +128,24 @@ func UpdateOption(c *gin.Context) {
})
return
}
case "Announcements":
err = setting.ValidateConsoleSettings(option.Value, "Announcements")
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
return
}
case "FAQ":
err = setting.ValidateConsoleSettings(option.Value, "FAQ")
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
return
}
}
err = model.UpdateOption(option.Key, option.Value)
if err != nil {

186
setting/console.go
View File

@@ -6,7 +6,9 @@ import (
"net/url"
"one-api/common"
"regexp"
"sort"
"strings"
"time"
)
// ValidateConsoleSettings 验证控制台设置信息格式
@@ -18,6 +20,10 @@ func ValidateConsoleSettings(settingsStr string, settingType string) error {
switch settingType {
case "ApiInfo":
return validateApiInfo(settingsStr)
case "Announcements":
return validateAnnouncements(settingsStr)
case "FAQ":
return validateFAQ(settingsStr)
default:
return fmt.Errorf("未知的设置类型：%s", settingType)
}
@@ -138,4 +144,184 @@ func GetApiInfo() []map[string]interface{} {
}
return apiInfo
}
// validateAnnouncements 验证系统公告格式
func validateAnnouncements(announcementsStr string) error {
var announcementsList []map[string]interface{}
if err := json.Unmarshal([]byte(announcementsStr), &announcementsList); err != nil {
return fmt.Errorf("系统公告格式错误：%s", err.Error())
}
// 验证数组长度
if len(announcementsList) > 100 {
return fmt.Errorf("系统公告数量不能超过100个")
}
// 允许的类型值
validTypes := map[string]bool{
"default": true, "ongoing": true, "success": true, "warning": true, "error": true,
}
for i, announcement := range announcementsList {
// 检查必填字段
content, ok := announcement["content"].(string)
if !ok || content == "" {
return fmt.Errorf("第%d个公告缺少内容字段", i+1)
}
// 检查发布日期字段
publishDate, exists := announcement["publishDate"]
if !exists {
return fmt.Errorf("第%d个公告缺少发布日期字段", i+1)
}
publishDateStr, ok := publishDate.(string)
if !ok || publishDateStr == "" {
return fmt.Errorf("第%d个公告的发布日期不能为空", i+1)
}
// 验证ISO日期格式
if _, err := time.Parse(time.RFC3339, publishDateStr); err != nil {
return fmt.Errorf("第%d个公告的发布日期格式错误", i+1)
}
// 验证可选字段
if announcementType, exists := announcement["type"]; exists {
if typeStr, ok := announcementType.(string); ok {
if !validTypes[typeStr] {
return fmt.Errorf("第%d个公告的类型值不合法", i+1)
}
}
}
// 验证字段长度
if len(content) > 500 {
return fmt.Errorf("第%d个公告的内容长度不能超过500字符", i+1)
}
if extra, exists := announcement["extra"]; exists {
if extraStr, ok := extra.(string); ok && len(extraStr) > 200 {
return fmt.Errorf("第%d个公告的说明长度不能超过200字符", i+1)
}
}
// 检查并过滤危险字符（防止XSS）
dangerousChars := []string{"<script", "<iframe", "javascript:", "onload=", "onerror=", "onclick="}
for _, dangerous := range dangerousChars {
if strings.Contains(strings.ToLower(content), dangerous) {
return fmt.Errorf("第%d个公告的内容包含不允许的内容", i+1)
}
}
}
return nil
}
// validateFAQ 验证常见问答格式
func validateFAQ(faqStr string) error {
var faqList []map[string]interface{}
if err := json.Unmarshal([]byte(faqStr), &faqList); err != nil {
return fmt.Errorf("常见问答格式错误：%s", err.Error())
}
// 验证数组长度
if len(faqList) > 100 {
return fmt.Errorf("常见问答数量不能超过100个")
}
for i, faq := range faqList {
// 检查必填字段
title, ok := faq["title"].(string)
if !ok || title == "" {
return fmt.Errorf("第%d个问答缺少标题字段", i+1)
}
content, ok := faq["content"].(string)
if !ok || content == "" {
return fmt.Errorf("第%d个问答缺少内容字段", i+1)
}
// 验证字段长度
if len(title) > 200 {
return fmt.Errorf("第%d个问答的标题长度不能超过200字符", i+1)
}
if len(content) > 1000 {
return fmt.Errorf("第%d个问答的内容长度不能超过1000字符", i+1)
}
// 检查并过滤危险字符（防止XSS）
dangerousChars := []string{"<script", "<iframe", "javascript:", "onload=", "onerror=", "onclick="}
for _, dangerous := range dangerousChars {
if strings.Contains(strings.ToLower(title), dangerous) {
return fmt.Errorf("第%d个问答的标题包含不允许的内容", i+1)
}
if strings.Contains(strings.ToLower(content), dangerous) {
return fmt.Errorf("第%d个问答的内容包含不允许的内容", i+1)
}
}
}
return nil
}
// GetAnnouncements 获取系统公告列表（返回最新的前20条）
func GetAnnouncements() []map[string]interface{} {
common.OptionMapRWMutex.RLock()
announcementsStr, exists := common.OptionMap["Announcements"]
common.OptionMapRWMutex.RUnlock()
if !exists || announcementsStr == "" {
return []map[string]interface{}{}
}
var announcements []map[string]interface{}
if err := json.Unmarshal([]byte(announcementsStr), &announcements); err != nil {
return []map[string]interface{}{}
}
// 按发布日期降序排序（最新的在前）
sort.Slice(announcements, func(i, j int) bool {
dateI, okI := announcements[i]["publishDate"].(string)
dateJ, okJ := announcements[j]["publishDate"].(string)
if !okI || !okJ {
return false
}
timeI, errI := time.Parse(time.RFC3339, dateI)
timeJ, errJ := time.Parse(time.RFC3339, dateJ)
if errI != nil || errJ != nil {
return false
}
return timeI.After(timeJ)
})
// 限制返回前20条
if len(announcements) > 20 {
announcements = announcements[:20]
}
return announcements
}
// GetFAQ 获取常见问答列表
func GetFAQ() []map[string]interface{} {
common.OptionMapRWMutex.RLock()
faqStr, exists := common.OptionMap["FAQ"]
common.OptionMapRWMutex.RUnlock()
if !exists || faqStr == "" {
return []map[string]interface{}{}
}
var faq []map[string]interface{}
if err := json.Unmarshal([]byte(faqStr), &faq); err != nil {
return []map[string]interface{}{}
}
return faq
}

14
web/src/components/settings/DashboardSetting.js
View File

@@ -2,10 +2,14 @@ import React, { useEffect, useState } from 'react';
import { Card, Spin } from '@douyinfe/semi-ui';
import { API, showError } from '../../helpers';
import SettingsAPIInfo from '../../pages/Setting/Dashboard/SettingsAPIInfo.js';
import SettingsAnnouncements from '../../pages/Setting/Dashboard/SettingsAnnouncements.js';
import SettingsFAQ from '../../pages/Setting/Dashboard/SettingsFAQ.js';
const DashboardSetting = () => {
let [inputs, setInputs] = useState({
ApiInfo: '',
Announcements: '',
FAQ: '',
});
let [loading, setLoading] = useState(false);
@@ -49,6 +53,16 @@ const DashboardSetting = () => {
<Card style={{ marginTop: '10px' }}>
<SettingsAPIInfo options={inputs} refresh={onRefresh} />
</Card>
{/* 系统公告管理 */}
<Card style={{ marginTop: '10px' }}>
<SettingsAnnouncements options={inputs} refresh={onRefresh} />
</Card>
{/* 常见问答管理 */}
<Card style={{ marginTop: '10px' }}>
<SettingsFAQ options={inputs} refresh={onRefresh} />
</Card>
</Spin>
</>
);

63
web/src/helpers/utils.js
View File

@@ -446,3 +446,66 @@ export const getLastAssistantMessage = (messages) => {
}
return null;
};
// 计算相对时间（几天前、几小时前等）
export const getRelativeTime = (publishDate) => {
if (!publishDate) return '';
const now = new Date();
const pubDate = new Date(publishDate);
// 如果日期无效，返回原始字符串
if (isNaN(pubDate.getTime())) return publishDate;
const diffMs = now.getTime() - pubDate.getTime();
const diffSeconds = Math.floor(diffMs / 1000);
const diffMinutes = Math.floor(diffSeconds / 60);
const diffHours = Math.floor(diffMinutes / 60);
const diffDays = Math.floor(diffHours / 24);
const diffWeeks = Math.floor(diffDays / 7);
const diffMonths = Math.floor(diffDays / 30);
const diffYears = Math.floor(diffDays / 365);
// 如果是未来时间，显示具体日期
if (diffMs < 0) {
return formatDateString(pubDate);
}
// 根据时间差返回相应的描述
if (diffSeconds < 60) {
return '刚刚';
} else if (diffMinutes < 60) {
return `${diffMinutes} 分钟前`;
} else if (diffHours < 24) {
return `${diffHours} 小时前`;
} else if (diffDays < 7) {
return `${diffDays} 天前`;
} else if (diffWeeks < 4) {
return `${diffWeeks} 周前`;
} else if (diffMonths < 12) {
return `${diffMonths} 个月前`;
} else if (diffYears < 2) {
return '1 年前';
} else {
// 超过2年显示具体日期
return formatDateString(pubDate);
}
};
// 格式化日期字符串
export const formatDateString = (date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
// 格式化日期时间字符串（包含时间）
export const formatDateTimeString = (date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}`;
};

39
web/src/i18n/locales/en.json
View File

@@ -510,7 +510,7 @@
"此项可选，输入镜像站地址，格式为：": "This is optional, enter the mirror site address, the format is:",
"模型映射": "Model mapping",
"请输入默认 API 版本，例如：2023-03-15-preview，该配置可以被实际的请求查询参数所覆盖": "Please enter the default API version, for example: 2023-03-15-preview, this configuration can be overridden by the actual request query parameters",
"默认": "default",
"默认": "Default",
"图片演示": "Image demo",
"注意，系统请求的时模型名称中的点会被剔除，例如：gpt-4.1会请求为gpt-41，所以在Azure部署的时候，部署模型名称需要手动改为gpt-41": "Note that the dot in the model name requested by the system will be removed, for example: gpt-4.1 will be requested as gpt-41, so when deploying on Azure, the deployment model name needs to be manually changed to gpt-41",
"2025年5月10日后添加的渠道，不需要再在部署的时候移除模型名称中的\".\"": "After May 10, 2025, channels added do not need to remove the dot in the model name during deployment",
@@ -882,7 +882,7 @@
"线路监控": "line monitoring",
"查看全部": "View all",
"高延迟": "high latency",
"异常": "abnormal",
"异常": "Abnormal",
"的未命名令牌": "unnamed token",
"令牌更新成功！": "Token updated successfully!",
"(origin) Discord原链接": "(origin) Discord original link",
@@ -1584,14 +1584,13 @@
"模型数据分析": "Model Data Analysis",
"搜索无结果": "No results found",
"仪表盘配置": "Dashboard Configuration",
"API信息管理，可以配置多个API地址用于状态展示和负载均衡": "API information management, you can configure multiple API addresses for status display and load balancing",
"API信息管理，可以配置多个API地址用于状态展示和负载均衡（最多50个）": "API information management, you can configure multiple API addresses for status display and load balancing (maximum 50)",
"线路描述": "Route description",
"颜色": "Color",
"标识颜色": "Identifier color",
"添加API": "Add API",
"保存配置": "Save Configuration",
"API信息": "API Information",
"暂无API信息配置": "No API information configured",
"暂无API信息": "No API information",
"请输入API地址": "Please enter the API address",
"请输入线路描述": "Please enter the route description",
@@ -1599,6 +1598,36 @@
"请输入说明": "Please enter the description",
"如：香港线路": "e.g. Hong Kong line",
"请联系管理员在系统设置中配置API信息": "Please contact the administrator to configure API information in the system settings.",
"请联系管理员在系统设置中配置公告信息": "Please contact the administrator to configure notice information in the system settings.",
"请联系管理员在系统设置中配置常见问答": "Please contact the administrator to configure FAQ information in the system settings.",
"确定要删除此API信息吗？": "Are you sure you want to delete this API information?",
"测速": "Speed Test"
"测速": "Speed Test",
"批量删除": "Batch Delete",
"常见问答": "FAQ",
"进行中": "Ongoing",
"警告": "Warning",
"添加公告": "Add Notice",
"编辑公告": "Edit Notice",
"公告内容": "Notice Content",
"请输入公告内容": "Please enter the notice content",
"发布日期": "Publish Date",
"请选择发布日期": "Please select the publish date",
"发布时间": "Publish Time",
"公告类型": "Notice Type",
"说明信息": "Description",
"可选，公告的补充说明": "Optional, additional information for the notice",
"确定要删除此公告吗？": "Are you sure you want to delete this notice?",
"系统公告管理，可以发布系统通知和重要消息": "System notice management, you can publish system notices and important messages",
"暂无系统公告": "No system notice",
"添加问答": "Add FAQ",
"编辑问答": "Edit FAQ",
"问题标题": "Question Title",
"请输入问题标题": "Please enter the question title",
"回答内容": "Answer Content",
"请输入回答内容": "Please enter the answer content",
"确定要删除此问答吗？": "Are you sure you want to delete this FAQ?",
"系统公告管理，可以发布系统通知和重要消息（最多100个，前端显示最新20条）": "System notice management, you can publish system notices and important messages (maximum 100, display latest 20 on the front end)",
"常见问答管理，为用户提供常见问题的答案（最多50个，前端显示最新20条）": "FAQ management, providing answers to common questions for users (maximum 50, display latest 20 on the front end)",
"暂无常见问答": "No FAQ",
"显示最新20条": "Display latest 20"
}

12
web/src/index.css
View File

@@ -301,12 +301,12 @@ code {
font-size: 1.1em;
}
/* API信息卡片样式 */
.api-info-container {
/* 卡片内容容器通用样式 */
.card-content-container {
position: relative;
}
.api-info-fade-indicator {
.card-content-fade-indicator {
position: absolute;
bottom: 0;
left: 0;
@@ -374,8 +374,8 @@ code {
background: transparent;
}
/* 隐藏模型设置区域的滚动条 */
.api-info-scroll::-webkit-scrollbar,
/* 隐藏卡片内容区域的滚动条 */
.card-content-scroll::-webkit-scrollbar,
.model-settings-scroll::-webkit-scrollbar,
.thinking-content-scroll::-webkit-scrollbar,
.custom-request-textarea .semi-input::-webkit-scrollbar,
@@ -383,7 +383,7 @@ code {
display: none;
}
.api-info-scroll,
.card-content-scroll,
.model-settings-scroll,
.thinking-content-scroll,
.custom-request-textarea .semi-input,

216
web/src/pages/Detail/index.js
View File

@@ -1,7 +1,7 @@
import React, { useContext, useEffect, useRef, useState, useMemo, useCallback } from 'react';
import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
import { useNavigate } from 'react-router-dom';
import { Wallet, Activity, Zap, Gauge, PieChart, Server } from 'lucide-react';
import { Wallet, Activity, Zap, Gauge, PieChart, Server, Bell, HelpCircle } from 'lucide-react';
import {
Card,
@@ -13,7 +13,9 @@ import {
Tabs,
TabPane,
Empty,
Tag
Tag,
Timeline,
Collapse
} from '@douyinfe/semi-ui';
import {
IconRefresh,
@@ -26,7 +28,9 @@ import {
IconPulse,
IconStopwatchStroked,
IconTypograph,
IconPieChart2Stroked
IconPieChart2Stroked,
IconPlus,
IconMinus
} from '@douyinfe/semi-icons';
import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';
import { VChart } from '@visactor/react-vchart';
@@ -43,7 +47,8 @@ import {
renderQuota,
modelToColor,
copy,
showSuccess
showSuccess,
getRelativeTime
} from '../../helpers';
import { UserContext } from '../../context/User/index.js';
import { StatusContext } from '../../context/Status/index.js';
@@ -179,7 +184,7 @@ const Detail = (props) => {
const [times, setTimes] = useState(0);
const [pieData, setPieData] = useState([{ type: 'null', value: '0' }]);
const [lineData, setLineData] = useState([]);
const [apiInfoData, setApiInfoData] = useState([]);
const [modelColors, setModelColors] = useState({});
const [activeChartTab, setActiveChartTab] = useState('1');
const [showApiScrollHint, setShowApiScrollHint] = useState(false);
@@ -578,6 +583,37 @@ const Detail = (props) => {
checkApiScrollable();
};
const checkCardScrollable = (ref, setHintFunction) => {
if (ref.current) {
const element = ref.current;
const isScrollable = element.scrollHeight > element.clientHeight;
const isAtBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 5;
setHintFunction(isScrollable && !isAtBottom);
}
};
const handleCardScroll = (ref, setHintFunction) => {
checkCardScrollable(ref, setHintFunction);
};
// ========== Additional Refs for new cards ==========
const announcementScrollRef = useRef(null);
const faqScrollRef = useRef(null);
// ========== Additional State for scroll hints ==========
const [showAnnouncementScrollHint, setShowAnnouncementScrollHint] = useState(false);
const [showFaqScrollHint, setShowFaqScrollHint] = useState(false);
// ========== Effects for scroll detection ==========
useEffect(() => {
const timer = setTimeout(() => {
checkApiScrollable();
checkCardScrollable(announcementScrollRef, setShowAnnouncementScrollHint);
checkCardScrollable(faqScrollRef, setShowFaqScrollHint);
}, 100);
return () => clearTimeout(timer);
}, []);
const getUserData = async () => {
let res = await API.get(`/api/user/self`);
const { success, message, data } = res.data;
@@ -775,6 +811,32 @@ const Detail = (props) => {
generateChartTimePoints, updateChartSpec, updateMapValue, t
]);
// ========== Status Data Management ==========
const announcementLegendData = useMemo(() => [
{ color: 'grey', label: t('默认'), type: 'default' },
{ color: 'blue', label: t('进行中'), type: 'ongoing' },
{ color: 'green', label: t('成功'), type: 'success' },
{ color: 'orange', label: t('警告'), type: 'warning' },
{ color: 'red', label: t('异常'), type: 'error' }
], [t]);
const apiInfoData = useMemo(() => {
return statusState?.status?.api_info || [];
}, [statusState?.status?.api_info]);
const announcementData = useMemo(() => {
const announcements = statusState?.status?.announcements || [];
// 处理后台配置的公告数据，自动生成相对时间
return announcements.map(item => ({
...item,
time: getRelativeTime(item.publishDate)
}));
}, [statusState?.status?.announcements]);
const faqData = useMemo(() => {
return statusState?.status?.faq || [];
}, [statusState?.status?.faq]);
// ========== Hooks - Effects ==========
useEffect(() => {
getUserData();
@@ -787,19 +849,6 @@ const Detail = (props) => {
}
}, []);
useEffect(() => {
if (statusState?.status?.api_info) {
setApiInfoData(statusState.status.api_info);
}
}, [statusState?.status?.api_info]);
useEffect(() => {
const timer = setTimeout(() => {
checkApiScrollable();
}, 100);
return () => clearTimeout(timer);
}, []);
return (
<div className="bg-gray-50 h-full">
<div className="flex items-center justify-between mb-4">
@@ -975,10 +1024,10 @@ const Detail = (props) => {
</div>
}
>
<div className="api-info-container">
<div className="card-content-container">
<div
ref={apiScrollRef}
className="space-y-3 max-h-96 overflow-y-auto api-info-scroll"
className="space-y-3 max-h-96 overflow-y-auto card-content-scroll"
onScroll={handleApiScroll}
>
{apiInfoData.length > 0 ? (
@@ -1023,7 +1072,7 @@ const Detail = (props) => {
<Empty
image={<IllustrationConstruction style={{ width: 80, height: 80 }} />}
darkModeImage={<IllustrationConstructionDark style={{ width: 80, height: 80 }} />}
title={t('暂无API信息配置')}
title={t('暂无API信息')}
description={t('请联系管理员在系统设置中配置API信息')}
style={{ padding: '12px' }}
/>
@@ -1031,7 +1080,7 @@ const Detail = (props) => {
)}
</div>
<div
className="api-info-fade-indicator"
className="card-content-fade-indicator"
style={{ opacity: showApiScrollHint ? 1 : 0 }}
/>
</div>
@@ -1039,6 +1088,129 @@ const Detail = (props) => {
)}
</div>
</div>
{/* 系统公告和常见问答卡片 */}
{!statusState?.status?.self_use_mode_enabled && (
<div className="mb-4">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
{/* 公告卡片 */}
<Card
{...CARD_PROPS}
className="shadow-sm !rounded-2xl lg:col-span-2"
title={
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 w-full">
<div className="flex items-center gap-2">
<Bell size={16} />
{t('系统公告')}
<Tag size="small" color="grey" shape="circle">
{t('显示最新20条')}
</Tag>
</div>
{/* 图例 */}
<div className="flex flex-wrap gap-3 text-xs">
{announcementLegendData.map((legend, index) => (
<div key={index} className="flex items-center gap-1">
<div
className="w-2 h-2 rounded-full"
style={{
backgroundColor: legend.color === 'grey' ? '#8b9aa7' :
legend.color === 'blue' ? '#3b82f6' :
legend.color === 'green' ? '#10b981' :
legend.color === 'orange' ? '#f59e0b' :
legend.color === 'red' ? '#ef4444' : '#8b9aa7'
}}
/>
<span className="text-gray-600">{legend.label}</span>
</div>
))}
</div>
</div>
}
>
<div className="card-content-container">
<div
ref={announcementScrollRef}
className="p-2 max-h-96 overflow-y-auto card-content-scroll"
onScroll={() => handleCardScroll(announcementScrollRef, setShowAnnouncementScrollHint)}
>
{announcementData.length > 0 ? (
<Timeline
mode="alternate"
dataSource={announcementData}
/>
) : (
<div className="flex justify-center items-center py-8">
<Empty
image={<IllustrationConstruction style={{ width: 80, height: 80 }} />}
darkModeImage={<IllustrationConstructionDark style={{ width: 80, height: 80 }} />}
title={t('暂无系统公告')}
description={t('请联系管理员在系统设置中配置公告信息')}
style={{ padding: '12px' }}
/>
</div>
)}
</div>
<div
className="card-content-fade-indicator"
style={{ opacity: showAnnouncementScrollHint ? 1 : 0 }}
/>
</div>
</Card>
{/* 常见问答卡片 */}
<Card
{...CARD_PROPS}
className="shadow-sm !rounded-2xl lg:col-span-2"
title={
<div className={FLEX_CENTER_GAP2}>
<HelpCircle size={16} />
{t('常见问答')}
</div>
}
>
<div className="card-content-container">
<div
ref={faqScrollRef}
className="p-2 max-h-96 overflow-y-auto card-content-scroll"
onScroll={() => handleCardScroll(faqScrollRef, setShowFaqScrollHint)}
>
{faqData.length > 0 ? (
<Collapse
accordion
expandIcon={<IconPlus />}
collapseIcon={<IconMinus />}
>
{faqData.map((item, index) => (
<Collapse.Panel
key={index}
header={item.title}
itemKey={index.toString()}
>
<p>{item.content}</p>
</Collapse.Panel>
))}
</Collapse>
) : (
<div className="flex justify-center items-center py-8">
<Empty
image={<IllustrationConstruction style={{ width: 80, height: 80 }} />}
darkModeImage={<IllustrationConstructionDark style={{ width: 80, height: 80 }} />}
title={t('暂无常见问答')}
description={t('请联系管理员在系统设置中配置常见问答')}
style={{ padding: '12px' }}
/>
</div>
)}
</div>
<div
className="card-content-fade-indicator"
style={{ opacity: showFaqScrollHint ? 1 : 0 }}
/>
</div>
</Card>
</div>
</div>
)}
</Spin>
</div>
);

75
web/src/pages/Setting/Dashboard/SettingsAPIInfo.js
View File

@@ -44,6 +44,9 @@ const SettingsAPIInfo = ({ options, refresh }) => {
route: '',
color: 'blue'
});
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const colorOptions = [
{ value: 'blue', label: 'blue' },
@@ -237,6 +240,7 @@ const SettingsAPIInfo = ({ options, refresh }) => {
{
title: t('操作'),
fixed: 'right',
width: 150,
render: (_, record) => (
<Space>
<Button
@@ -264,12 +268,25 @@ const SettingsAPIInfo = ({ options, refresh }) => {
},
];
const handleBatchDelete = () => {
if (selectedRowKeys.length === 0) {
showError('请先选择要删除的API信息');
return;
}
const newList = apiInfoList.filter(api => !selectedRowKeys.includes(api.id));
setApiInfoList(newList);
setSelectedRowKeys([]);
setHasChanges(true);
showSuccess(`已删除 ${selectedRowKeys.length} 个API信息，请及时点击“保存配置”进行保存`);
};
const renderHeader = () => (
<div className="flex flex-col w-full">
<div className="mb-2">
<div className="flex items-center text-blue-500">
<Settings size={16} className="mr-2" />
<Text>{t('API信息管理，可以配置多个API地址用于状态展示和负载均衡')}</Text>
<Text>{t('API信息管理，可以配置多个API地址用于状态展示和负载均衡（最多50个）')}</Text>
</div>
</div>
@@ -286,6 +303,16 @@ const SettingsAPIInfo = ({ options, refresh }) => {
>
{t('添加API')}
</Button>
<Button
icon={<Trash2 size={14} />}
type='danger'
theme='light'
onClick={handleBatchDelete}
disabled={selectedRowKeys.length === 0}
className="!rounded-full w-full md:w-auto"
>
{t('批量删除')} {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
</Button>
<Button
icon={<Save size={14} />}
onClick={submitApiInfo}
@@ -301,14 +328,56 @@ const SettingsAPIInfo = ({ options, refresh }) => {
</div>
);
// 计算当前页显示的数据
const getCurrentPageData = () => {
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
return apiInfoList.slice(startIndex, endIndex);
};
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
},
onSelect: (record, selected, selectedRows) => {
console.log(`选择行: ${selected}`, record);
},
onSelectAll: (selected, selectedRows) => {
console.log(`全选: ${selected}`, selectedRows);
},
getCheckboxProps: (record) => ({
disabled: false,
name: record.id,
}),
};
return (
<>
<Form.Section text={renderHeader()}>
<Table
columns={columns}
dataSource={apiInfoList}
dataSource={getCurrentPageData()}
rowSelection={rowSelection}
rowKey="id"
scroll={{ x: 'max-content' }}
pagination={false}
pagination={{
currentPage: currentPage,
pageSize: pageSize,
total: apiInfoList.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) => t(`共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`),
pageSizeOptions: ['5', '10', '20', '50'],
onChange: (page, size) => {
setCurrentPage(page);
setPageSize(size);
},
onShowSizeChange: (current, size) => {
setCurrentPage(1);
setPageSize(size);
}
}}
size='middle'
loading={loading}
empty={

485
web/src/pages/Setting/Dashboard/SettingsAnnouncements.js Normal file
View File

@@ -0,0 +1,485 @@
import React, { useEffect, useState } from 'react';
import {
Button,
Space,
Table,
Form,
Typography,
Empty,
Divider,
Modal,
Tag
} from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
Plus,
Edit,
Trash2,
Save,
Bell
} from 'lucide-react';
import { API, showError, showSuccess, getRelativeTime, formatDateTimeString } from '../../../helpers';
import { useTranslation } from 'react-i18next';
const { Text } = Typography;
const SettingsAnnouncements = ({ options, refresh }) => {
const { t } = useTranslation();
const [announcementsList, setAnnouncementsList] = useState([]);
const [showAnnouncementModal, setShowAnnouncementModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deletingAnnouncement, setDeletingAnnouncement] = useState(null);
const [editingAnnouncement, setEditingAnnouncement] = useState(null);
const [modalLoading, setModalLoading] = useState(false);
const [loading, setLoading] = useState(false);
const [hasChanges, setHasChanges] = useState(false);
const [announcementForm, setAnnouncementForm] = useState({
content: '',
publishDate: new Date(),
type: 'default',
extra: ''
});
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const typeOptions = [
{ value: 'default', label: t('默认') },
{ value: 'ongoing', label: t('进行中') },
{ value: 'success', label: t('成功') },
{ value: 'warning', label: t('警告') },
{ value: 'error', label: t('错误') }
];
const getTypeColor = (type) => {
const colorMap = {
default: 'grey',
ongoing: 'blue',
success: 'green',
warning: 'orange',
error: 'red'
};
return colorMap[type] || 'grey';
};
const columns = [
{
title: t('内容'),
dataIndex: 'content',
key: 'content',
render: (text) => (
<div style={{
maxWidth: '300px',
wordBreak: 'break-word',
whiteSpace: 'pre-wrap'
}}>
{text}
</div>
)
},
{
title: t('发布时间'),
dataIndex: 'publishDate',
key: 'publishDate',
width: 180,
render: (publishDate) => (
<div>
<div style={{ fontWeight: 'bold' }}>
{getRelativeTime(publishDate)}
</div>
<div style={{
fontSize: '12px',
color: 'var(--semi-color-text-2)',
marginTop: '2px'
}}>
{publishDate ? formatDateTimeString(new Date(publishDate)) : '-'}
</div>
</div>
)
},
{
title: t('类型'),
dataIndex: 'type',
key: 'type',
width: 100,
render: (type) => (
<Tag color={getTypeColor(type)} shape='circle'>
{typeOptions.find(opt => opt.value === type)?.label || type}
</Tag>
)
},
{
title: t('说明'),
dataIndex: 'extra',
key: 'extra',
render: (text) => (
<div style={{
maxWidth: '200px',
wordBreak: 'break-word',
color: 'var(--semi-color-text-2)'
}}>
{text || '-'}
</div>
)
},
{
title: t('操作'),
key: 'action',
fixed: 'right',
width: 150,
render: (text, record) => (
<Space>
<Button
icon={<Edit size={14} />}
theme='light'
type='tertiary'
size='small'
className="!rounded-full"
onClick={() => handleEditAnnouncement(record)}
>
{t('编辑')}
</Button>
<Button
icon={<Trash2 size={14} />}
type='danger'
theme='light'
size='small'
className="!rounded-full"
onClick={() => handleDeleteAnnouncement(record)}
>
{t('删除')}
</Button>
</Space>
)
}
];
const updateOption = async (key, value) => {
const res = await API.put('/api/option/', {
key,
value,
});
const { success, message } = res.data;
if (success) {
showSuccess('系统公告已更新');
if (refresh) refresh();
} else {
showError(message);
}
};
const submitAnnouncements = async () => {
try {
setLoading(true);
const announcementsJson = JSON.stringify(announcementsList);
await updateOption('Announcements', announcementsJson);
setHasChanges(false);
} catch (error) {
console.error('系统公告更新失败', error);
showError('系统公告更新失败');
} finally {
setLoading(false);
}
};
const handleAddAnnouncement = () => {
setEditingAnnouncement(null);
setAnnouncementForm({
content: '',
publishDate: new Date(),
type: 'default',
extra: ''
});
setShowAnnouncementModal(true);
};
const handleEditAnnouncement = (announcement) => {
setEditingAnnouncement(announcement);
setAnnouncementForm({
content: announcement.content,
publishDate: announcement.publishDate ? new Date(announcement.publishDate) : new Date(),
type: announcement.type || 'default',
extra: announcement.extra || ''
});
setShowAnnouncementModal(true);
};
const handleDeleteAnnouncement = (announcement) => {
setDeletingAnnouncement(announcement);
setShowDeleteModal(true);
};
const confirmDeleteAnnouncement = () => {
if (deletingAnnouncement) {
const newList = announcementsList.filter(item => item.id !== deletingAnnouncement.id);
setAnnouncementsList(newList);
setHasChanges(true);
showSuccess('公告已删除，请及时点击“保存配置”进行保存');
}
setShowDeleteModal(false);
setDeletingAnnouncement(null);
};
const handleSaveAnnouncement = async () => {
if (!announcementForm.content || !announcementForm.publishDate) {
showError('请填写完整的公告信息');
return;
}
try {
setModalLoading(true);
// 将publishDate转换为ISO字符串保存
const formData = {
...announcementForm,
publishDate: announcementForm.publishDate.toISOString()
};
let newList;
if (editingAnnouncement) {
newList = announcementsList.map(item =>
item.id === editingAnnouncement.id
? { ...item, ...formData }
: item
);
} else {
const newId = Math.max(...announcementsList.map(item => item.id), 0) + 1;
const newAnnouncement = {
id: newId,
...formData
};
newList = [...announcementsList, newAnnouncement];
}
setAnnouncementsList(newList);
setHasChanges(true);
setShowAnnouncementModal(false);
showSuccess(editingAnnouncement ? '公告已更新，请及时点击“保存配置”进行保存' : '公告已添加，请及时点击“保存配置”进行保存');
} catch (error) {
showError('操作失败: ' + error.message);
} finally {
setModalLoading(false);
}
};
const parseAnnouncements = (announcementsStr) => {
if (!announcementsStr) {
setAnnouncementsList([]);
return;
}
try {
const parsed = JSON.parse(announcementsStr);
const list = Array.isArray(parsed) ? parsed : [];
// 确保每个项目都有id
const listWithIds = list.map((item, index) => ({
...item,
id: item.id || index + 1
}));
setAnnouncementsList(listWithIds);
} catch (error) {
console.error('解析系统公告失败:', error);
setAnnouncementsList([]);
}
};
useEffect(() => {
if (options.Announcements !== undefined) {
parseAnnouncements(options.Announcements);
}
}, [options.Announcements]);
const handleBatchDelete = () => {
if (selectedRowKeys.length === 0) {
showError('请先选择要删除的系统公告');
return;
}
const newList = announcementsList.filter(item => !selectedRowKeys.includes(item.id));
setAnnouncementsList(newList);
setSelectedRowKeys([]);
setHasChanges(true);
showSuccess(`已删除 ${selectedRowKeys.length} 个系统公告，请及时点击“保存配置”进行保存`);
};
const renderHeader = () => (
<div className="flex flex-col w-full">
<div className="mb-2">
<div className="flex items-center text-blue-500">
<Bell size={16} className="mr-2" />
<Text>{t('系统公告管理，可以发布系统通知和重要消息（最多100个，前端显示最新20条）')}</Text>
</div>
</div>
<Divider margin="12px" />
<div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
<div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
<Button
theme='light'
type='primary'
icon={<Plus size={14} />}
className="!rounded-full w-full md:w-auto"
onClick={handleAddAnnouncement}
>
{t('添加公告')}
</Button>
<Button
icon={<Trash2 size={14} />}
type='danger'
theme='light'
onClick={handleBatchDelete}
disabled={selectedRowKeys.length === 0}
className="!rounded-full w-full md:w-auto"
>
{t('批量删除')} {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
</Button>
<Button
icon={<Save size={14} />}
onClick={submitAnnouncements}
loading={loading}
disabled={!hasChanges}
type='secondary'
className="!rounded-full w-full md:w-auto"
>
{t('保存配置')}
</Button>
</div>
</div>
</div>
);
// 计算当前页显示的数据
const getCurrentPageData = () => {
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
return announcementsList.slice(startIndex, endIndex);
};
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
},
onSelect: (record, selected, selectedRows) => {
console.log(`选择行: ${selected}`, record);
},
onSelectAll: (selected, selectedRows) => {
console.log(`全选: ${selected}`, selectedRows);
},
getCheckboxProps: (record) => ({
disabled: false,
name: record.id,
}),
};
return (
<>
<Form.Section text={renderHeader()}>
<Table
columns={columns}
dataSource={getCurrentPageData()}
rowSelection={rowSelection}
rowKey="id"
scroll={{ x: 'max-content' }}
pagination={{
currentPage: currentPage,
pageSize: pageSize,
total: announcementsList.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) => t(`共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`),
pageSizeOptions: ['5', '10', '20', '50'],
onChange: (page, size) => {
setCurrentPage(page);
setPageSize(size);
},
onShowSizeChange: (current, size) => {
setCurrentPage(1);
setPageSize(size);
}
}}
size='middle'
loading={loading}
empty={
<Empty
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
description={t('暂无系统公告')}
style={{ padding: 30 }}
/>
}
className="rounded-xl overflow-hidden"
/>
</Form.Section>
<Modal
title={editingAnnouncement ? t('编辑公告') : t('添加公告')}
visible={showAnnouncementModal}
onOk={handleSaveAnnouncement}
onCancel={() => setShowAnnouncementModal(false)}
okText={t('保存')}
cancelText={t('取消')}
className="rounded-xl"
confirmLoading={modalLoading}
>
<Form layout='vertical' initValues={announcementForm} key={editingAnnouncement ? editingAnnouncement.id : 'new'}>
<Form.TextArea
field='content'
label={t('公告内容')}
placeholder={t('请输入公告内容')}
maxCount={500}
rows={3}
rules={[{ required: true, message: t('请输入公告内容') }]}
onChange={(value) => setAnnouncementForm({ ...announcementForm, content: value })}
/>
<Form.DatePicker
field='publishDate'
label={t('发布日期')}
type='dateTime'
rules={[{ required: true, message: t('请选择发布日期') }]}
onChange={(value) => setAnnouncementForm({ ...announcementForm, publishDate: value })}
/>
<Form.Select
field='type'
label={t('公告类型')}
optionList={typeOptions}
onChange={(value) => setAnnouncementForm({ ...announcementForm, type: value })}
/>
<Form.Input
field='extra'
label={t('说明信息')}
placeholder={t('可选，公告的补充说明')}
onChange={(value) => setAnnouncementForm({ ...announcementForm, extra: value })}
/>
</Form>
</Modal>
<Modal
title={t('确认删除')}
visible={showDeleteModal}
onOk={confirmDeleteAnnouncement}
onCancel={() => {
setShowDeleteModal(false);
setDeletingAnnouncement(null);
}}
okText={t('确认删除')}
cancelText={t('取消')}
type="warning"
className="rounded-xl"
okButtonProps={{
type: 'danger',
theme: 'solid'
}}
>
<Text>{t('确定要删除此公告吗？')}</Text>
</Modal>
</>
);
};
export default SettingsAnnouncements;

413
web/src/pages/Setting/Dashboard/SettingsFAQ.js Normal file
View File

@@ -0,0 +1,413 @@
import React, { useEffect, useState } from 'react';
import {
Button,
Space,
Table,
Form,
Typography,
Empty,
Divider,
Modal
} from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
Plus,
Edit,
Trash2,
Save,
HelpCircle
} from 'lucide-react';
import { API, showError, showSuccess } from '../../../helpers';
import { useTranslation } from 'react-i18next';
const { Text } = Typography;
const SettingsFAQ = ({ options, refresh }) => {
const { t } = useTranslation();
const [faqList, setFaqList] = useState([]);
const [showFaqModal, setShowFaqModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deletingFaq, setDeletingFaq] = useState(null);
const [editingFaq, setEditingFaq] = useState(null);
const [modalLoading, setModalLoading] = useState(false);
const [loading, setLoading] = useState(false);
const [hasChanges, setHasChanges] = useState(false);
const [faqForm, setFaqForm] = useState({
title: '',
content: ''
});
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const columns = [
{
title: t('问题标题'),
dataIndex: 'title',
key: 'title',
render: (text) => (
<div style={{
maxWidth: '300px',
wordBreak: 'break-word',
fontWeight: 'bold'
}}>
{text}
</div>
)
},
{
title: t('回答内容'),
dataIndex: 'content',
key: 'content',
render: (text) => (
<div style={{
maxWidth: '400px',
wordBreak: 'break-word',
whiteSpace: 'pre-wrap',
color: 'var(--semi-color-text-1)'
}}>
{text}
</div>
)
},
{
title: t('操作'),
key: 'action',
fixed: 'right',
width: 150,
render: (text, record) => (
<Space>
<Button
icon={<Edit size={14} />}
theme='light'
type='tertiary'
size='small'
className="!rounded-full"
onClick={() => handleEditFaq(record)}
>
{t('编辑')}
</Button>
<Button
icon={<Trash2 size={14} />}
type='danger'
theme='light'
size='small'
className="!rounded-full"
onClick={() => handleDeleteFaq(record)}
>
{t('删除')}
</Button>
</Space>
)
}
];
const updateOption = async (key, value) => {
const res = await API.put('/api/option/', {
key,
value,
});
const { success, message } = res.data;
if (success) {
showSuccess('常见问答已更新');
if (refresh) refresh();
} else {
showError(message);
}
};
const submitFAQ = async () => {
try {
setLoading(true);
const faqJson = JSON.stringify(faqList);
await updateOption('FAQ', faqJson);
setHasChanges(false);
} catch (error) {
console.error('常见问答更新失败', error);
showError('常见问答更新失败');
} finally {
setLoading(false);
}
};
const handleAddFaq = () => {
setEditingFaq(null);
setFaqForm({
title: '',
content: ''
});
setShowFaqModal(true);
};
const handleEditFaq = (faq) => {
setEditingFaq(faq);
setFaqForm({
title: faq.title,
content: faq.content
});
setShowFaqModal(true);
};
const handleDeleteFaq = (faq) => {
setDeletingFaq(faq);
setShowDeleteModal(true);
};
const confirmDeleteFaq = () => {
if (deletingFaq) {
const newList = faqList.filter(item => item.id !== deletingFaq.id);
setFaqList(newList);
setHasChanges(true);
showSuccess('问答已删除，请及时点击“保存配置”进行保存');
}
setShowDeleteModal(false);
setDeletingFaq(null);
};
const handleSaveFaq = async () => {
if (!faqForm.title || !faqForm.content) {
showError('请填写完整的问答信息');
return;
}
try {
setModalLoading(true);
let newList;
if (editingFaq) {
newList = faqList.map(item =>
item.id === editingFaq.id
? { ...item, ...faqForm }
: item
);
} else {
const newId = Math.max(...faqList.map(item => item.id), 0) + 1;
const newFaq = {
id: newId,
...faqForm
};
newList = [...faqList, newFaq];
}
setFaqList(newList);
setHasChanges(true);
setShowFaqModal(false);
showSuccess(editingFaq ? '问答已更新，请及时点击“保存配置”进行保存' : '问答已添加，请及时点击“保存配置”进行保存');
} catch (error) {
showError('操作失败: ' + error.message);
} finally {
setModalLoading(false);
}
};
const parseFAQ = (faqStr) => {
if (!faqStr) {
setFaqList([]);
return;
}
try {
const parsed = JSON.parse(faqStr);
const list = Array.isArray(parsed) ? parsed : [];
// 确保每个项目都有id
const listWithIds = list.map((item, index) => ({
...item,
id: item.id || index + 1
}));
setFaqList(listWithIds);
} catch (error) {
console.error('解析常见问答失败:', error);
setFaqList([]);
}
};
useEffect(() => {
if (options.FAQ !== undefined) {
parseFAQ(options.FAQ);
}
}, [options.FAQ]);
const handleBatchDelete = () => {
if (selectedRowKeys.length === 0) {
showError('请先选择要删除的常见问答');
return;
}
const newList = faqList.filter(item => !selectedRowKeys.includes(item.id));
setFaqList(newList);
setSelectedRowKeys([]);
setHasChanges(true);
showSuccess(`已删除 ${selectedRowKeys.length} 个常见问答，请及时点击“保存配置”进行保存`);
};
const renderHeader = () => (
<div className="flex flex-col w-full">
<div className="mb-2">
<div className="flex items-center text-blue-500">
<HelpCircle size={16} className="mr-2" />
<Text>{t('常见问答管理，为用户提供常见问题的答案（最多50个，前端显示最新20条）')}</Text>
</div>
</div>
<Divider margin="12px" />
<div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
<div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
<Button
theme='light'
type='primary'
icon={<Plus size={14} />}
className="!rounded-full w-full md:w-auto"
onClick={handleAddFaq}
>
{t('添加问答')}
</Button>
<Button
icon={<Trash2 size={14} />}
type='danger'
theme='light'
onClick={handleBatchDelete}
disabled={selectedRowKeys.length === 0}
className="!rounded-full w-full md:w-auto"
>
{t('批量删除')} {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
</Button>
<Button
icon={<Save size={14} />}
onClick={submitFAQ}
loading={loading}
disabled={!hasChanges}
type='secondary'
className="!rounded-full w-full md:w-auto"
>
{t('保存配置')}
</Button>
</div>
</div>
</div>
);
// 计算当前页显示的数据
const getCurrentPageData = () => {
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
return faqList.slice(startIndex, endIndex);
};
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
},
onSelect: (record, selected, selectedRows) => {
console.log(`选择行: ${selected}`, record);
},
onSelectAll: (selected, selectedRows) => {
console.log(`全选: ${selected}`, selectedRows);
},
getCheckboxProps: (record) => ({
disabled: false,
name: record.id,
}),
};
return (
<>
<Form.Section text={renderHeader()}>
<Table
columns={columns}
dataSource={getCurrentPageData()}
rowSelection={rowSelection}
rowKey="id"
scroll={{ x: 'max-content' }}
pagination={{
currentPage: currentPage,
pageSize: pageSize,
total: faqList.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) => t(`共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`),
pageSizeOptions: ['5', '10', '20', '50'],
onChange: (page, size) => {
setCurrentPage(page);
setPageSize(size);
},
onShowSizeChange: (current, size) => {
setCurrentPage(1);
setPageSize(size);
}
}}
size='middle'
loading={loading}
empty={
<Empty
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
description={t('暂无常见问答')}
style={{ padding: 30 }}
/>
}
className="rounded-xl overflow-hidden"
/>
</Form.Section>
<Modal
title={editingFaq ? t('编辑问答') : t('添加问答')}
visible={showFaqModal}
onOk={handleSaveFaq}
onCancel={() => setShowFaqModal(false)}
okText={t('保存')}
cancelText={t('取消')}
className="rounded-xl"
confirmLoading={modalLoading}
width={800}
>
<Form layout='vertical' initValues={faqForm} key={editingFaq ? editingFaq.id : 'new'}>
<Form.Input
field='title'
label={t('问题标题')}
placeholder={t('请输入问题标题')}
maxLength={200}
rules={[{ required: true, message: t('请输入问题标题') }]}
onChange={(value) => setFaqForm({ ...faqForm, title: value })}
/>
<Form.TextArea
field='content'
label={t('回答内容')}
placeholder={t('请输入回答内容')}
maxCount={1000}
rows={6}
rules={[{ required: true, message: t('请输入回答内容') }]}
onChange={(value) => setFaqForm({ ...faqForm, content: value })}
/>
</Form>
</Modal>
<Modal
title={t('确认删除')}
visible={showDeleteModal}
onOk={confirmDeleteFaq}
onCancel={() => {
setShowDeleteModal(false);
setDeletingFaq(null);
}}
okText={t('确认删除')}
cancelText={t('取消')}
type="warning"
className="rounded-xl"
okButtonProps={{
type: 'danger',
theme: 'solid'
}}
>
<Text>{t('确定要删除此问答吗？')}</Text>
</Modal>
</>
);
};
export default SettingsFAQ;