Skip to content

phsl / new-api

Go to a project
Commit 00603520 by キュビビイ
Options

feat(web): add settings & pages of privacy policy & user agreement

parent f005d2dc
Showing with 789 additions and 3 deletions
controller/misc.go
...@@ -151,6 +151,28 @@ func GetAbout(c *gin.Context) { ...@@ -151,6 +151,28 @@ func GetAbout(c *gin.Context) {
return return
} }
func GetUserAgreement(c *gin.Context) {
common.OptionMapRWMutex.RLock()
defer common.OptionMapRWMutex.RUnlock()
c.JSON(http.StatusOK, gin.H{
"success": true,
"message": "",
"data": common.OptionMap["UserAgreement"],
})
return
}
func GetPrivacyPolicy(c *gin.Context) {
common.OptionMapRWMutex.RLock()
defer common.OptionMapRWMutex.RUnlock()
c.JSON(http.StatusOK, gin.H{
"success": true,
"message": "",
"data": common.OptionMap["PrivacyPolicy"],
})
return
}
func GetMidjourney(c *gin.Context) { func GetMidjourney(c *gin.Context) {
common.OptionMapRWMutex.RLock() common.OptionMapRWMutex.RLock()
defer common.OptionMapRWMutex.RUnlock() defer common.OptionMapRWMutex.RUnlock()
......
model/option.go
...@@ -61,6 +61,8 @@ func InitOptionMap() { ...@@ -61,6 +61,8 @@ func InitOptionMap() {
common.OptionMap["SMTPToken"] = "" common.OptionMap["SMTPToken"] = ""
common.OptionMap["SMTPSSLEnabled"] = strconv.FormatBool(common.SMTPSSLEnabled) common.OptionMap["SMTPSSLEnabled"] = strconv.FormatBool(common.SMTPSSLEnabled)
common.OptionMap["Notice"] = "" common.OptionMap["Notice"] = ""
common.OptionMap["UserAgreement"] = ""
common.OptionMap["PrivacyPolicy"] = ""
common.OptionMap["About"] = "" common.OptionMap["About"] = ""
common.OptionMap["HomePageContent"] = "" common.OptionMap["HomePageContent"] = ""
common.OptionMap["Footer"] = common.Footer common.OptionMap["Footer"] = common.Footer
......
router/api-router.go
...@@ -20,6 +20,8 @@ func SetApiRouter(router *gin.Engine) { ...@@ -20,6 +20,8 @@ func SetApiRouter(router *gin.Engine) {
apiRouter.GET("/models", middleware.UserAuth(), controller.DashboardListModels) apiRouter.GET("/models", middleware.UserAuth(), controller.DashboardListModels)
apiRouter.GET("/status/test", middleware.AdminAuth(), controller.TestStatus) apiRouter.GET("/status/test", middleware.AdminAuth(), controller.TestStatus)
apiRouter.GET("/notice", controller.GetNotice) apiRouter.GET("/notice", controller.GetNotice)
apiRouter.GET("/user-agreement", controller.GetUserAgreement)
apiRouter.GET("/privacy-policy", controller.GetPrivacyPolicy)
apiRouter.GET("/about", controller.GetAbout) apiRouter.GET("/about", controller.GetAbout)
//apiRouter.GET("/midjourney", controller.GetMidjourney) //apiRouter.GET("/midjourney", controller.GetMidjourney)
apiRouter.GET("/home_page_content", controller.GetHomePageContent) apiRouter.GET("/home_page_content", controller.GetHomePageContent)
......
web/src/App.jsx
...@@ -51,6 +51,8 @@ import SetupCheck from './components/layout/SetupCheck'; ...@@ -51,6 +51,8 @@ import SetupCheck from './components/layout/SetupCheck';
const Home = lazy(() => import('./pages/Home')); const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard')); const Dashboard = lazy(() => import('./pages/Dashboard'));
const About = lazy(() => import('./pages/About')); const About = lazy(() => import('./pages/About'));
const UserAgreement = lazy(() => import('./pages/UserAgreement'));
const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'));
function App() { function App() {
const location = useLocation(); const location = useLocation();
...@@ -302,6 +304,22 @@ function App() { ...@@ -302,6 +304,22 @@ function App() {
} }
/> />
<Route <Route
path='/user-agreement'
element={
<Suspense fallback={<Loading></Loading>} key={location.pathname}>
<UserAgreement />
</Suspense>
}
/>
<Route
path='/privacy-policy'
element={
<Suspense fallback={<Loading></Loading>} key={location.pathname}>
<PrivacyPolicy />
</Suspense>
}
/>
<Route
path='/console/chat/:id?' path='/console/chat/:id?'
element={ element={
<Suspense fallback={<Loading></Loading>} key={location.pathname}> <Suspense fallback={<Loading></Loading>} key={location.pathname}>
......
web/src/components/auth/RegisterForm.jsx
...@@ -82,6 +82,9 @@ const RegisterForm = () => { ...@@ -82,6 +82,9 @@ const RegisterForm = () => {
const [wechatCodeSubmitLoading, setWechatCodeSubmitLoading] = useState(false); const [wechatCodeSubmitLoading, setWechatCodeSubmitLoading] = useState(false);
const [disableButton, setDisableButton] = useState(false); const [disableButton, setDisableButton] = useState(false);
const [countdown, setCountdown] = useState(30); const [countdown, setCountdown] = useState(30);
const [agreedToTerms, setAgreedToTerms] = useState(false);
const [hasUserAgreement, setHasUserAgreement] = useState(false);
const [hasPrivacyPolicy, setHasPrivacyPolicy] = useState(false);
const logo = getLogo(); const logo = getLogo();
const systemName = getSystemName(); const systemName = getSystemName();
...@@ -106,6 +109,28 @@ const RegisterForm = () => { ...@@ -106,6 +109,28 @@ const RegisterForm = () => {
setTurnstileEnabled(true); setTurnstileEnabled(true);
setTurnstileSiteKey(status.turnstile_site_key); setTurnstileSiteKey(status.turnstile_site_key);
} }
// 检查用户协议和隐私政策是否已设置
const checkTermsAvailability = async () => {
try {
const [userAgreementRes, privacyPolicyRes] = await Promise.all([
API.get('/api/user-agreement'),
API.get('/api/privacy-policy')
]);
if (userAgreementRes.data.success && userAgreementRes.data.data) {
setHasUserAgreement(true);
}
if (privacyPolicyRes.data.success && privacyPolicyRes.data.data) {
setHasPrivacyPolicy(true);
}
} catch (error) {
console.error('检查用户协议和隐私政策失败:', error);
}
};
checkTermsAvailability();
}, [status]); }, [status]);
useEffect(() => { useEffect(() => {
...@@ -505,6 +530,44 @@ const RegisterForm = () => { ...@@ -505,6 +530,44 @@ const RegisterForm = () => {
</> </>
)} )}
{(hasUserAgreement || hasPrivacyPolicy) && (
<div className='pt-4'>
<Form.Checkbox
checked={agreedToTerms}
onChange={(checked) => setAgreedToTerms(checked)}
>
<Text size='small' className='text-gray-600'>
{t('我已阅读并同意')}
{hasUserAgreement && (
<>
<a
href='/user-agreement'
target='_blank'
rel='noopener noreferrer'
className='text-blue-600 hover:text-blue-800 mx-1'
>
{t('用户协议')}
</a>
</>
)}
{hasUserAgreement && hasPrivacyPolicy && t('和')}
{hasPrivacyPolicy && (
<>
<a
href='/privacy-policy'
target='_blank'
rel='noopener noreferrer'
className='text-blue-600 hover:text-blue-800 mx-1'
>
{t('隐私政策')}
</a>
</>
)}
</Text>
</Form.Checkbox>
</div>
)}
<div className='space-y-2 pt-2'> <div className='space-y-2 pt-2'>
<Button <Button
theme='solid' theme='solid'
...@@ -513,6 +576,7 @@ const RegisterForm = () => { ...@@ -513,6 +576,7 @@ const RegisterForm = () => {
htmlType='submit' htmlType='submit'
onClick={handleSubmit} onClick={handleSubmit}
loading={registerLoading} loading={registerLoading}
disabled={(hasUserAgreement || hasPrivacyPolicy) && !agreedToTerms}
> >
{t('注册')} {t('注册')}
</Button> </Button>
......
web/src/components/settings/OtherSetting.jsx
...@@ -38,6 +38,8 @@ const OtherSetting = () => { ...@@ -38,6 +38,8 @@ const OtherSetting = () => {
const { t } = useTranslation(); const { t } = useTranslation();
let [inputs, setInputs] = useState({ let [inputs, setInputs] = useState({
Notice: '', Notice: '',
UserAgreement: '',
PrivacyPolicy: '',
SystemName: '', SystemName: '',
Logo: '', Logo: '',
Footer: '', Footer: '',
...@@ -69,6 +71,8 @@ const OtherSetting = () => { ...@@ -69,6 +71,8 @@ const OtherSetting = () => {
const [loadingInput, setLoadingInput] = useState({ const [loadingInput, setLoadingInput] = useState({
Notice: false, Notice: false,
UserAgreement: false,
PrivacyPolicy: false,
SystemName: false, SystemName: false,
Logo: false, Logo: false,
HomePageContent: false, HomePageContent: false,
...@@ -96,6 +100,32 @@ const OtherSetting = () => { ...@@ -96,6 +100,32 @@ const OtherSetting = () => {
setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false })); setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false }));
} }
}; };
// 通用设置 - UserAgreement
const submitUserAgreement = async () => {
try {
setLoadingInput((loadingInput) => ({ ...loadingInput, UserAgreement: true }));
await updateOption('UserAgreement', inputs.UserAgreement);
showSuccess(t('用户协议已更新'));
} catch (error) {
console.error(t('用户协议更新失败'), error);
showError(t('用户协议更新失败'));
} finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, UserAgreement: false }));
}
};
// 通用设置 - PrivacyPolicy
const submitPrivacyPolicy = async () => {
try {
setLoadingInput((loadingInput) => ({ ...loadingInput, PrivacyPolicy: true }));
await updateOption('PrivacyPolicy', inputs.PrivacyPolicy);
showSuccess(t('隐私政策已更新'));
} catch (error) {
console.error(t('隐私政策更新失败'), error);
showError(t('隐私政策更新失败'));
} finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, PrivacyPolicy: false }));
}
};
// 个性化设置 // 个性化设置
const formAPIPersonalization = useRef(); const formAPIPersonalization = useRef();
// 个性化设置 - SystemName // 个性化设置 - SystemName
...@@ -324,6 +354,34 @@ const OtherSetting = () => { ...@@ -324,6 +354,34 @@ const OtherSetting = () => {
<Button onClick={submitNotice} loading={loadingInput['Notice']}> <Button onClick={submitNotice} loading={loadingInput['Notice']}>
{t('设置公告')} {t('设置公告')}
</Button> </Button>
<Form.TextArea
label={t('用户协议')}
placeholder={t(
'在此输入用户协议内容，支持 Markdown & HTML 代码',
)}
field={'UserAgreement'}
onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
helpText={t('填写用户协议内容后，用户注册时将被要求勾选已阅读用户协议')}
/>
<Button onClick={submitUserAgreement} loading={loadingInput['UserAgreement']}>
{t('设置用户协议')}
</Button>
<Form.TextArea
label={t('隐私政策')}
placeholder={t(
'在此输入隐私政策内容，支持 Markdown & HTML 代码',
)}
field={'PrivacyPolicy'}
onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
helpText={t('填写隐私政策内容后，用户注册时将被要求勾选已阅读隐私政策')}
/>
<Button onClick={submitPrivacyPolicy} loading={loadingInput['PrivacyPolicy']}>
{t('设置隐私政策')}
</Button>
</Form.Section> </Form.Section>
</Card> </Card>
</Form> </Form>
......
web/src/i18n/locales/en.json
...@@ -244,6 +244,8 @@ ...@@ -244,6 +244,8 @@
"检查更新": "Check for updates", "检查更新": "Check for updates",
"公告": "Announcement", "公告": "Announcement",
"在此输入新的公告内容，支持 Markdown & HTML 代码": "Enter the new announcement content here, supports Markdown & HTML code", "在此输入新的公告内容，支持 Markdown & HTML 代码": "Enter the new announcement content here, supports Markdown & HTML code",
"在此输入用户协议内容，支持 Markdown & HTML 代码": "Enter user agreement content here, supports Markdown & HTML code",
"在此输入隐私政策内容，支持 Markdown & HTML 代码": "Enter privacy policy content here, supports Markdown & HTML code",
"保存公告": "Save Announcement", "保存公告": "Save Announcement",
"个性化设置": "Personalization Settings", "个性化设置": "Personalization Settings",
"系统名称": "System Name", "系统名称": "System Name",
...@@ -1260,6 +1262,8 @@ ...@@ -1260,6 +1262,8 @@
"仅修改展示粒度，统计精确到小时": "Only modify display granularity, statistics accurate to the hour", "仅修改展示粒度，统计精确到小时": "Only modify display granularity, statistics accurate to the hour",
"当运行通道全部测试时，超过此时间将自动禁用通道": "When running all channel tests, the channel will be automatically disabled when this time is exceeded", "当运行通道全部测试时，超过此时间将自动禁用通道": "When running all channel tests, the channel will be automatically disabled when this time is exceeded",
"设置公告": "Set notice", "设置公告": "Set notice",
"设置用户协议": "Set user agreement",
"设置隐私政策": "Set privacy policy",
"设置 Logo": "Set Logo", "设置 Logo": "Set Logo",
"设置首页内容": "Set home page content", "设置首页内容": "Set home page content",
"设置关于": "Set about", "设置关于": "Set about",
...@@ -2259,5 +2263,18 @@ ...@@ -2259,5 +2263,18 @@
"补单成功": "Order completed successfully", "补单成功": "Order completed successfully",
"补单失败": "Failed to complete order", "补单失败": "Failed to complete order",
"确认补单": "Confirm Order Completion", "确认补单": "Confirm Order Completion",
"是否将该订单标记为成功并为用户入账？": "Mark this order as successful and credit the user?" "是否将该订单标记为成功并为用户入账？": "Mark this order as successful and credit the user?",
"用户协议": "User Agreement",
"隐私政策": "Privacy Policy",
"用户协议更新失败": "Failed to update user agreement",
"隐私政策更新失败": "Failed to update privacy policy",
"管理员未设置用户协议内容": "Administrator has not set user agreement content",
"管理员未设置隐私政策内容": "Administrator has not set privacy policy content",
"加载用户协议内容失败...": "Failed to load user agreement content...",
"加载隐私政策内容失败...": "Failed to load privacy policy content...",
"我已阅读并同意": "I have read and agree to",
"和": " and ",
"请先阅读并同意用户协议和隐私政策": "Please read and agree to the user agreement and privacy policy first",
"填写用户协议内容后，用户注册时将被要求勾选已阅读用户协议": "After filling in the user agreement content, users will be required to check that they have read the user agreement when registering",
"填写隐私政策内容后，用户注册时将被要求勾选已阅读隐私政策": "After filling in the privacy policy content, users will be required to check that they have read the privacy policy when registering"
} }
web/src/i18n/locales/fr.json
...@@ -2251,5 +2251,24 @@ ...@@ -2251,5 +2251,24 @@
"补单成功": "Commande complétée avec succès", "补单成功": "Commande complétée avec succès",
"补单失败": "Échec de la complétion de la commande", "补单失败": "Échec de la complétion de la commande",
"确认补单": "Confirmer la complétion", "确认补单": "Confirmer la complétion",
"是否将该订单标记为成功并为用户入账？": "Marquer cette commande comme réussie et créditer l'utilisateur ?" "是否将该订单标记为成功并为用户入账？": "Marquer cette commande comme réussie et créditer l'utilisateur ?",
"用户协议": "Accord utilisateur",
"隐私政策": "Politique de confidentialité",
"在此输入用户协议内容，支持 Markdown & HTML 代码": "Saisissez ici le contenu de l'accord utilisateur, prend en charge le code Markdown et HTML",
"在此输入隐私政策内容，支持 Markdown & HTML 代码": "Saisissez ici le contenu de la politique de confidentialité, prend en charge le code Markdown et HTML",
"设置用户协议": "Définir l'accord utilisateur",
"设置隐私政策": "Définir la politique de confidentialité",
"用户协议已更新": "L'accord utilisateur a été mis à jour",
"隐私政策已更新": "La politique de confidentialité a été mise à jour",
"用户协议更新失败": "Échec de la mise à jour de l'accord utilisateur",
"隐私政策更新失败": "Échec de la mise à jour de la politique de confidentialité",
"管理员未设置用户协议内容": "L'administrateur n'a pas défini le contenu de l'accord utilisateur",
"管理员未设置隐私政策内容": "L'administrateur n'a pas défini le contenu de la politique de confidentialité",
"加载用户协议内容失败...": "Échec du chargement du contenu de l'accord utilisateur...",
"加载隐私政策内容失败...": "Échec du chargement du contenu de la politique de confidentialité...",
"我已阅读并同意": "J'ai lu et j'accepte",
"和": " et ",
"请先阅读并同意用户协议和隐私政策": "Veuillez d'abord lire et accepter l'accord utilisateur et la politique de confidentialité",
"填写用户协议内容后，用户注册时将被要求勾选已阅读用户协议": "Après avoir rempli le contenu de l'accord utilisateur, les utilisateurs devront cocher qu'ils ont lu l'accord utilisateur lors de l'inscription",
"填写隐私政策内容后，用户注册时将被要求勾选已阅读隐私政策": "Après avoir rempli le contenu de la politique de confidentialité, les utilisateurs devront cocher qu'ils ont lu la politique de confidentialité lors de l'inscription"
} }
web/src/i18n/locales/zh.json
...@@ -111,5 +111,24 @@ ...@@ -111,5 +111,24 @@
"补单失败": "补单失败", "补单失败": "补单失败",
"确认补单": "确认补单", "确认补单": "确认补单",
"是否将该订单标记为成功并为用户入账？": "是否将该订单标记为成功并为用户入账？", "是否将该订单标记为成功并为用户入账？": "是否将该订单标记为成功并为用户入账？",
"操作": "操作" "操作": "操作",
"用户协议": "用户协议",
"隐私政策": "隐私政策",
"在此输入用户协议内容，支持 Markdown & HTML 代码": "在此输入用户协议内容，支持 Markdown & HTML 代码",
"在此输入隐私政策内容，支持 Markdown & HTML 代码": "在此输入隐私政策内容，支持 Markdown & HTML 代码",
"设置用户协议": "设置用户协议",
"设置隐私政策": "设置隐私政策",
"用户协议已更新": "用户协议已更新",
"隐私政策已更新": "隐私政策已更新",
"用户协议更新失败": "用户协议更新失败",
"隐私政策更新失败": "隐私政策更新失败",
"管理员未设置用户协议内容": "管理员未设置用户协议内容",
"管理员未设置隐私政策内容": "管理员未设置隐私政策内容",
"加载用户协议内容失败...": "加载用户协议内容失败...",
"加载隐私政策内容失败...": "加载隐私政策内容失败...",
"我已阅读并同意": "我已阅读并同意",
"和": "和",
"请先阅读并同意用户协议和隐私政策": "请先阅读并同意用户协议和隐私政策",
"填写用户协议内容后，用户注册时将被要求勾选已阅读用户协议": "填写用户协议内容后，用户注册时将被要求勾选已阅读用户协议",
"填写隐私政策内容后，用户注册时将被要求勾选已阅读隐私政策": "填写隐私政策内容后，用户注册时将被要求勾选已阅读隐私政策"
} }
web/src/pages/PrivacyPolicy/index.jsx 0 → 100644
/*
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 React, { useEffect, useState } from 'react';
import { API, showError } from '../../helpers';
import { Empty } from '@douyinfe/semi-ui';
import {
IllustrationConstruction,
IllustrationConstructionDark,
} from '@douyinfe/semi-illustrations';
import { useTranslation } from 'react-i18next';
import MarkdownRenderer from '../../components/common/markdown/MarkdownRenderer';
import { getContentType } from '../../utils/contentDetector';
const PrivacyPolicy = () => {
const { t } = useTranslation();
const [privacyPolicy, setPrivacyPolicy] = useState('');
const [privacyPolicyLoaded, setPrivacyPolicyLoaded] = useState(false);
const [contentType, setContentType] = useState('empty');
const [htmlBody, setHtmlBody] = useState('');
const [htmlStyles, setHtmlStyles] = useState('');
const [htmlLinks, setHtmlLinks] = useState([]);
// Height of the top navigation/header in pixels. Adjust if your header is a different height.
const HEADER_HEIGHT = 64;
const displayPrivacyPolicy = async () => {
// 先从缓存中获取
const cachedContent = localStorage.getItem('privacy_policy') || '';
if (cachedContent) {
setPrivacyPolicy(cachedContent);
const ct = getContentType(cachedContent);
setContentType(ct);
if (ct === 'html') {
// parse cached HTML to extract body and inline styles
try {
const parser = new DOMParser();
const doc = parser.parseFromString(cachedContent, 'text/html');
setHtmlBody(doc.body ? doc.body.innerHTML : cachedContent);
const styles = Array.from(doc.querySelectorAll('style'))
.map((s) => s.innerHTML)
.join('\n');
setHtmlStyles(styles);
const links = Array.from(doc.querySelectorAll('link[rel="stylesheet"]'))
.map((l) => l.getAttribute('href') || l.href)
.filter(Boolean);
setHtmlLinks(links);
} catch (e) {
setHtmlBody(cachedContent);
setHtmlStyles('');
setHtmlLinks([]);
}
}
}
try {
const res = await API.get('/api/privacy-policy');
const { success, message, data } = res.data;
if (success && data) {
// 直接使用原始数据，不进行任何预处理
setPrivacyPolicy(data);
const ct = getContentType(data);
setContentType(ct);
// 如果是完整 HTML 文档，解析 body 内容并提取内联样式放到 head
if (ct === 'html') {
try {
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
setHtmlBody(doc.body ? doc.body.innerHTML : data);
const styles = Array.from(doc.querySelectorAll('style'))
.map((s) => s.innerHTML)
.join('\n');
setHtmlStyles(styles);
const links = Array.from(doc.querySelectorAll('link[rel="stylesheet"]'))
.map((l) => l.getAttribute('href') || l.href)
.filter(Boolean);
setHtmlLinks(links);
} catch (e) {
setHtmlBody(data);
setHtmlStyles('');
setHtmlLinks([]);
}
} else {
setHtmlBody('');
setHtmlStyles('');
setHtmlLinks([]);
}
localStorage.setItem('privacy_policy', data);
} else {
if (!cachedContent) {
showError(message || t('加载隐私政策内容失败...'));
setPrivacyPolicy('');
setContentType('empty');
}
}
} catch (error) {
if (!cachedContent) {
showError(t('加载隐私政策内容失败...'));
setPrivacyPolicy('');
setContentType('empty');
}
}
setPrivacyPolicyLoaded(true);
};
useEffect(() => {
displayPrivacyPolicy();
}, []);
// inject inline styles for parsed HTML content and cleanup on unmount or styles change
useEffect(() => {
const styleId = 'privacy-policy-inline-styles';
const createdLinkIds = [];
if (htmlStyles) {
let styleEl = document.getElementById(styleId);
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = styleId;
styleEl.type = 'text/css';
document.head.appendChild(styleEl);
}
styleEl.innerHTML = htmlStyles;
} else {
const el = document.getElementById(styleId);
if (el) el.remove();
}
if (htmlLinks && htmlLinks.length) {
htmlLinks.forEach((href, idx) => {
try {
const existing = document.querySelector(`link[rel="stylesheet"][href="${href}"]`);
if (existing) return;
const linkId = `${styleId}-link-${idx}`;
const linkEl = document.createElement('link');
linkEl.id = linkId;
linkEl.rel = 'stylesheet';
linkEl.href = href;
document.head.appendChild(linkEl);
createdLinkIds.push(linkId);
} catch (e) {
// ignore
}
});
}
return () => {
const el = document.getElementById(styleId);
if (el) el.remove();
createdLinkIds.forEach((id) => {
const l = document.getElementById(id);
if (l) l.remove();
});
};
}, [htmlStyles]);
const renderContent = () => {
if (!privacyPolicyLoaded) {
return (
<div style={{ padding: '16px', paddingTop: `${HEADER_HEIGHT + 16}px` }}>
<MarkdownRenderer content="" loading={true} />
</div>
);
}
if (contentType === 'empty' || !privacyPolicy) {
return (
<div style={{ marginTop: HEADER_HEIGHT + 20 }}>
<Empty
image={
<IllustrationConstruction style={{ width: 150, height: 150 }} />
}
darkModeImage={
<IllustrationConstructionDark style={{ width: 150, height: 150 }} />
}
description={t('管理员未设置隐私政策内容')}
/>
</div>
);
}
if (contentType === 'url') {
return (
<iframe
src={privacyPolicy}
style={{
width: '100%',
height: `calc(100vh - ${HEADER_HEIGHT}px)`,
border: 'none',
marginTop: `${HEADER_HEIGHT}px`,
}}
title={t('隐私政策')}
/>
);
}
if (contentType === 'html') {
return (
<div
style={{
padding: '24px',
paddingTop: `${HEADER_HEIGHT + 24}px`,
maxWidth: '1000px',
margin: '0 auto',
lineHeight: '1.6',
}}
dangerouslySetInnerHTML={{ __html: htmlBody || privacyPolicy }}
/>
);
}
// markdown 或 text 内容
return (
<div
style={{
padding: '24px',
paddingTop: `${HEADER_HEIGHT + 24}px`,
maxWidth: '1000px',
margin: '0 auto',
}}
>
<MarkdownRenderer
content={privacyPolicy}
fontSize={16}
style={{ lineHeight: '1.8' }}
/>
</div>
);
};
return <>{renderContent()}</>;
};
export default PrivacyPolicy;
\ No newline at end of file
web/src/pages/UserAgreement/index.jsx 0 → 100644
/*
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 React, { useEffect, useState } from 'react';
import { API, showError } from '../../helpers';
import { Empty } from '@douyinfe/semi-ui';
import {
IllustrationConstruction,
IllustrationConstructionDark,
} from '@douyinfe/semi-illustrations';
import { useTranslation } from 'react-i18next';
import MarkdownRenderer from '../../components/common/markdown/MarkdownRenderer';
import { getContentType } from '../../utils/contentDetector';
const UserAgreement = () => {
const { t } = useTranslation();
const [userAgreement, setUserAgreement] = useState('');
const [userAgreementLoaded, setUserAgreementLoaded] = useState(false);
const [contentType, setContentType] = useState('empty');
const [htmlBody, setHtmlBody] = useState('');
const [htmlStyles, setHtmlStyles] = useState('');
const [htmlLinks, setHtmlLinks] = useState([]);
// Height of the top navigation/header in pixels. Adjust if your header is a different height.
const HEADER_HEIGHT = 64;
const displayUserAgreement = async () => {
// 先从缓存中获取
const cachedContent = localStorage.getItem('user_agreement') || '';
if (cachedContent) {
setUserAgreement(cachedContent);
const ct = getContentType(cachedContent);
setContentType(ct);
if (ct === 'html') {
try {
const parser = new DOMParser();
const doc = parser.parseFromString(cachedContent, 'text/html');
setHtmlBody(doc.body ? doc.body.innerHTML : cachedContent);
const styles = Array.from(doc.querySelectorAll('style'))
.map((s) => s.innerHTML)
.join('\n');
setHtmlStyles(styles);
const links = Array.from(doc.querySelectorAll('link[rel="stylesheet"]'))
.map((l) => l.getAttribute('href') || l.href)
.filter(Boolean);
setHtmlLinks(links);
} catch (e) {
setHtmlBody(cachedContent);
setHtmlStyles('');
setHtmlLinks([]);
}
}
}
try {
const res = await API.get('/api/user-agreement');
const { success, message, data } = res.data;
if (success && data) {
// 直接使用原始数据，不进行任何预处理
setUserAgreement(data);
const ct = getContentType(data);
setContentType(ct);
if (ct === 'html') {
try {
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
setHtmlBody(doc.body ? doc.body.innerHTML : data);
const styles = Array.from(doc.querySelectorAll('style'))
.map((s) => s.innerHTML)
.join('\n');
setHtmlStyles(styles);
const links = Array.from(doc.querySelectorAll('link[rel="stylesheet"]'))
.map((l) => l.getAttribute('href') || l.href)
.filter(Boolean);
setHtmlLinks(links);
} catch (e) {
setHtmlBody(data);
setHtmlStyles('');
setHtmlLinks([]);
}
} else {
setHtmlBody('');
setHtmlStyles('');
setHtmlLinks([]);
}
localStorage.setItem('user_agreement', data);
} else {
if (!cachedContent) {
showError(message || t('加载用户协议内容失败...'));
setUserAgreement('');
setContentType('empty');
}
}
} catch (error) {
if (!cachedContent) {
showError(t('加载用户协议内容失败...'));
setUserAgreement('');
setContentType('empty');
}
}
setUserAgreementLoaded(true);
};
useEffect(() => {
displayUserAgreement();
}, []);
// inject inline styles for parsed HTML content and cleanup on unmount or styles change
useEffect(() => {
// if there's nothing to inject, remove any existing injected elements
const styleId = 'user-agreement-inline-styles';
const createdLinkIds = [];
// handle style tags
if (htmlStyles) {
let styleEl = document.getElementById(styleId);
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = styleId;
styleEl.type = 'text/css';
document.head.appendChild(styleEl);
}
styleEl.innerHTML = htmlStyles;
} else {
const el = document.getElementById(styleId);
if (el) el.remove();
}
// handle external stylesheet links
if (htmlLinks && htmlLinks.length) {
htmlLinks.forEach((href, idx) => {
try {
// avoid duplicate injection if a link with same href already exists
const existing = document.querySelector(`link[rel="stylesheet"][href="${href}"]`);
if (existing) return;
const linkId = `${styleId}-link-${idx}`;
const linkEl = document.createElement('link');
linkEl.id = linkId;
linkEl.rel = 'stylesheet';
linkEl.href = href;
document.head.appendChild(linkEl);
createdLinkIds.push(linkId);
} catch (e) {
// ignore malformed hrefs
}
});
}
return () => {
const el = document.getElementById(styleId);
if (el) el.remove();
// remove only the links we created
createdLinkIds.forEach((id) => {
const l = document.getElementById(id);
if (l) l.remove();
});
};
}, [htmlStyles]);
const renderContent = () => {
if (!userAgreementLoaded) {
return (
<div style={{ padding: '16px', paddingTop: `${HEADER_HEIGHT + 16}px` }}>
<MarkdownRenderer content="" loading={true} />
</div>
);
}
if (contentType === 'empty' || !userAgreement) {
return (
<div style={{ marginTop: HEADER_HEIGHT + 20 }}>
<Empty
image={
<IllustrationConstruction style={{ width: 150, height: 150 }} />
}
darkModeImage={
<IllustrationConstructionDark style={{ width: 150, height: 150 }} />
}
description={t('管理员未设置用户协议内容')}
/>
</div>
);
}
if (contentType === 'url') {
return (
<iframe
src={userAgreement}
style={{
width: '100%',
height: `calc(100vh - ${HEADER_HEIGHT}px)`,
border: 'none',
marginTop: `${HEADER_HEIGHT}px`,
}}
title={t('用户协议')}
/>
);
}
if (contentType === 'html') {
return (
<div
style={{
padding: '24px',
paddingTop: `${HEADER_HEIGHT + 24}px`,
maxWidth: '1000px',
margin: '0 auto',
lineHeight: '1.6',
}}
dangerouslySetInnerHTML={{ __html: htmlBody || userAgreement }}
/>
);
}
// markdown 或 text 内容
return (
<div
style={{
padding: '24px',
paddingTop: `${HEADER_HEIGHT + 24}px`,
maxWidth: '1000px',
margin: '0 auto',
}}
>
<MarkdownRenderer
content={userAgreement}
fontSize={16}
style={{ lineHeight: '1.8' }}
/>
</div>
);
};
return <>{renderContent()}</>;
};
export default UserAgreement;
\ No newline at end of file
web/src/utils/contentDetector.js 0 → 100644
/**
* 检测内容类型并返回相应的渲染信息
*/
// 检查是否为 URL
export const isUrl = (content) => {
try {
new URL(content);
return true;
} catch {
return false;
}
};
// 检查是否为 HTML 内容
export const isHtmlContent = (content) => {
if (!content || typeof content !== 'string') return false;
// 检查是否包含HTML标签
const htmlTagRegex = /<\/?[a-z][\s\S]*>/i;
return htmlTagRegex.test(content);
};
// 检查是否为 Markdown 内容
export const isMarkdownContent = (content) => {
if (!content || typeof content !== 'string') return false;
// 如果已经是HTML，则不是原始Markdown
if (isHtmlContent(content)) return false;
// 检查Markdown特征
const markdownFeatures = [
/^#{1,6}\s+.+$/m, // 标题
/^\*\s+.+$/m, // 无序列表
/^\d+\.\s+.+$/m, // 有序列表
/\*\*.+\*\*/, // 粗体
/\*.+\*/, // 斜体
/\[.+\]\(.+\)/, // 链接
/^>.+$/m, // 引用
/^```[\s\S]*?```$/m, // 代码块
/`[^`]+`/, // 行内代码
/^\|.+\|$/m, // 表格
/^---+$/m, // 分割线
];
return markdownFeatures.some(regex => regex.test(content));
};
// 获取内容类型
export const getContentType = (content) => {
if (!content) return 'empty';
const trimmedContent = content.trim();
if (isUrl(trimmedContent)) return 'url';
if (isHtmlContent(trimmedContent)) return 'html';
if (isMarkdownContent(trimmedContent)) return 'markdown';
// 默认当作纯文本处理
return 'text';
};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment