From 3b476a29d427152aa17ade2661cc3550ccc78bc3 Mon Sep 17 00:00:00 2001 From: zjb <2152698745@qq.com> Date: Thu, 29 May 2025 15:56:24 +0800 Subject: [PATCH] feedback --- docusaurus.config.js | 12 +++ src/css/custom.css | 64 ++++++++++++ src/pages/feedback.js | 182 ++++++++++++++++++++++++++++++++++ src/pages/feedback.module.css | 160 ++++++++++++++++++++++++++++++ 4 files changed, 418 insertions(+) create mode 100644 src/pages/feedback.js create mode 100644 src/pages/feedback.module.css diff --git a/docusaurus.config.js b/docusaurus.config.js index a809001..811bc7b 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -70,6 +70,11 @@ module.exports = { position: 'left', dropdownActiveClassDisabled: true }, + { + to: '/feedback', + position: 'right', + label: '问题反馈' + }, // { // href: 'https://github.com/boxyhq', // position: 'right', @@ -173,6 +178,13 @@ module.exports = { highlightSearchTermsOnTargetPage: true, blogRouteBasePath: "/", explicitSearchResultPath: true, + indexDocs: true, + indexBlog: false, + indexPages: true, + docsRouteBasePath: "/", + searchResultLimits: 8, + searchBarPosition: "right", + searchBarShortcutHint: true, // For Docs using Chinese, The `language` is recommended to set to: // ``` // language: ["en", "zh"], diff --git a/src/css/custom.css b/src/css/custom.css index f0b0f1a..c651310 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -16,6 +16,10 @@ --ifm-color-primary-lightest: rgb(146, 224, 208); --ifm-code-font-size: 95%; --search-local-modal-background:#1b2440; + --search-local-highlight-color: #466aff; + --search-local-hit-background: #f0f4ff; + --search-local-hit-shadow: 0 1px 3px 0 #d4e0ee; + --search-local-hit-active-color: #fff; } .navbar{ background-color: rgba(27, 36, 64, 1); @@ -149,4 +153,64 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { .widget{ display: none!important; opacity: 0; +} + +/* 优化搜索框样式 */ +.navbar__search-input { + border-radius: 4px; + transition: width 0.2s ease-in-out; + border: 1px solid transparent; +} + +.navbar__search-input:focus { + width: 260px; + border-color: var(--ifm-color-primary); +} + +/* 搜索结果样式 */ +.search-result-match { + color: var(--search-local-highlight-color); + font-weight: bold; +} + +.search-result-item { + padding: 1rem; + margin-bottom: 0.5rem; + border-radius: 8px; + background-color: var(--search-local-hit-background); + box-shadow: var(--search-local-hit-shadow); + transition: all 0.2s ease; +} + +.search-result-item:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +/* 问题反馈导航按钮样式 */ +.navbar__items a[href="/feedback"] { + background-color: rgba(70, 106, 255, 0.1); + color: var(--ifm-color-primary) !important; + padding: 0.5rem 1rem; + border-radius: 4px; + font-weight: 500; + transition: all 0.2s ease; +} + +.navbar__items a[href="/feedback"]:hover { + background-color: rgba(70, 106, 255, 0.2); +} + +/* 暗黑模式适配 */ +html[data-theme='dark'] { + --search-local-hit-background: #2a2a3c; + --search-local-hit-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); +} + +html[data-theme='dark'] .navbar__items a[href="/feedback"] { + background-color: rgba(70, 106, 255, 0.2); +} + +html[data-theme='dark'] .navbar__items a[href="/feedback"]:hover { + background-color: rgba(70, 106, 255, 0.3); } \ No newline at end of file diff --git a/src/pages/feedback.js b/src/pages/feedback.js new file mode 100644 index 0000000..9fd0e20 --- /dev/null +++ b/src/pages/feedback.js @@ -0,0 +1,182 @@ +const React = require('react'); +const { useState } = React; +const Layout = require('@theme/Layout').default; +const styles = require('./feedback.module.css'); + +function Feedback() { + const [formData, setFormData] = useState({ + name: '', + email: '', + type: '功能建议', + content: '', + }); + + const [submitted, setSubmitted] = useState(false); + const [error, setError] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + + const validateEmail = (email) => { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(email); + }; + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData(prevData => ({ + ...prevData, + [name]: value + })); + setError(''); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + if (!formData.name.trim()) { + setError('请输入您的姓名'); + return; + } + + if (!formData.email.trim()) { + setError('请输入您的邮箱地址'); + return; + } + + if (!validateEmail(formData.email)) { + setError('请输入有效的邮箱地址'); + return; + } + + if (!formData.content.trim()) { + setError('请输入反馈内容'); + return; + } + + setIsSubmitting(true); + + try { + // 模拟API调用 + await new Promise(resolve => setTimeout(resolve, 1000)); + console.log('表单提交:', formData); + setSubmitted(true); + setError(''); + } catch (err) { + setError('提交失败，请稍后重试'); + } finally { + setIsSubmitting(false); + } + }; + + if (submitted) { + return ( + +
+
+

感谢您的反馈！

+

我们已收到您的反馈意见，将认真处理每一条建议。
您的支持是我们不断进步的动力。

+
+ + 返回首页 +
+
+
+ + ); + } + + return ( + +
+

问题反馈

+

+ 欢迎提供您的宝贵意见，帮助我们做得更好 +

+ + {error &&
{error}
} + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +