测试流水线

2024-05-30 17:05:37 +08:00 · 2024-05-30 17:05:37 +08:00 · 5e53adf9a6
parent b2b27fe0fe 634b4fd256
commit 5e53adf9a6
2 changed files with 100 additions and 0 deletions
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@ -58,6 +58,13 @@ module.exports = {
          position: 'left',
          label: '帮助中心'
        },
+        {
+          type: 'doc',
+          docId: 'intro',
+          position: 'right',
+          label: '意见反馈',
+          href:"/ratingpage"
+        },
        // {
        //   href: 'https://github.com/boxyhq',
        //   position: 'right',
--- a/src/pages/ratingpage.js
+++ b/src/pages/ratingpage.js
@ -0,0 +1,93 @@
+    import React, { useState } from 'react';
+
+
+    const SatisfactionRating = () => {
+        const [selectedUsabilityRating, setSelectedUsabilityRating] = useState(-1);
+        const [selectedHelpRating, setSelectedHelpRating] = useState(-1);
+        const [comment, setComment] = useState('');
+
+        const usabilityRatings = ['非常满意', '比较满意', '一般', '不太满意', '非常不满意'];
+        const helpRatings = ['很有帮助', '比较有帮助', '帮助不大', '毫无帮助'];
+
+        const handleUsabilityRatingClick = (index) => {
+            setSelectedUsabilityRating(index);
+        };
+
+        const handleHelpRatingClick = (index) => {
+            setSelectedHelpRating(index);
+        };
+
+        const handleSubmit = () => {
+            if (selectedUsabilityRating === -1 || selectedHelpRating === -1) {
+                alert('请对两个选项都进行选择！');
+            } else {
+                const usabilityRating = usabilityRatings[selectedUsabilityRating];
+                const helpRating = helpRatings[selectedHelpRating];
+                alert(`感谢您的反馈`);
+            }
+        };
+
+        return (
+            <div style={{ maxWidth: '600px', margin: 'auto', textAlign: 'center' }}>
+                <h2 style={{ marginBottom: '20px' }}>请留下您的意见</h2>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '20px' }}>
+                    <h3>满意度:</h3>
+                    <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '10px' }}>
+                        {usabilityRatings.map((rating, index) => (
+                            <button key={index} onClick={() => handleUsabilityRatingClick(index)} style={{ margin: '5px', padding: '10px 20px', backgroundColor: selectedUsabilityRating === index ? '#337ab7' : '#f0f0f0', color: selectedUsabilityRating === index ? '#ffffff' : '#333', border: 'none', borderRadius: '5px', cursor: 'pointer', boxShadow: '0px 3px 5px rgba(0,0,0,0.1)', transition: 'background-color 0.3s ease' }}>
+                                {rating}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '20px' }}>
+                    <h3>该文档对您是否有帮助？:</h3>
+                    <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '10px' }}>
+                        {helpRatings.map((rating, index) => (
+                            <button key={index} onClick={() => handleHelpRatingClick(index)} style={{ margin: '5px', padding: '10px 20px', backgroundColor: selectedHelpRating === index ? '#337ab7' : '#f0f0f0', color: selectedHelpRating === index ? '#ffffff' : '#333', border: 'none', borderRadius: '5px', cursor: 'pointer', boxShadow: '0px 3px 5px rgba(0,0,0,0.1)', transition: 'background-color 0.3s ease' }}>
+                                {rating}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <div style={{marginBottom: '20px'}}>
+                    <h3>意见和建议:</h3>
+                    <textarea
+                        value={comment}
+                        onChange={(e) => setComment(e.target.value)}
+                        placeholder="写下想说的话"
+                        style={{
+                            width: '100%',
+                            height: '100px',
+                            padding: '10px',
+                            borderRadius: '5px',
+                            border: '1px solid #ccc',
+                            transition: 'box-shadow 0.3s, border-color 0.3s', // 添加过渡效果
+                            boxShadow: comment ? '0 0 5px rgba(81, 203, 238, 1)' : 'none', // 根据内容是否为空添加幽影效果
+                            borderColor: comment ? '#51cbee' : '#ccc', // 根据内容是否为空修改边框颜色
+                        }}
+                    />
+                </div>
+                <button onClick={handleSubmit} style={{
+                    backgroundColor: '#337ab7',
+                    color: '#ffffff',
+                    padding: '10px 20px',
+                    border: 'none',
+                    borderRadius: '5px',
+                    cursor: 'pointer',
+                    boxShadow: '0px 3px 5px rgba(0,0,0,0.1)',
+                    transition: 'background-color 0.3s ease',
+                    ':hover': {backgroundColor: '#286090'}
+                }}>提交
+                </button>
+            </div>
+        );
+    };
+
+    export default function HelloReactPage() {
+        return (
+            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#f9f9f9' }}>
+                <SatisfactionRating />
+            </div>
+        );
+    }