Merge pull request #10 from Funkoala14/dev

[dev]ws setting

src/App.jsx

@@ -25,14 +25,14 @@ function App() {
         
         // 如果用户已认证但WebSocket未连接，则初始化连接
         if (user && !isConnected) {
-            // initWebSocket()
+            initWebSocket()
-                // .then(() => {
+                .then(() => {
-                    // dispatch(setWebSocketConnected(true));
+                    dispatch(setWebSocketConnected(true));
-                    // console.log('WebSocket connection initialized');
+                    console.log('WebSocket connection initialized');
-                // })
+                })
-                // .catch((error) => {
+                .catch((error) => {
-                //     console.error('Failed to initialize WebSocket connection:', error);
+                    console.error('Failed to initialize WebSocket connection:', error);
-                // });
+                });
         }
 
         // 组件卸载或用户登出时关闭WebSocket连接

src/components/SearchBar.jsx

@@ -15,6 +15,7 @@ import SvgIcon from './SvgIcon';
  * @param {boolean} props.isSearchLoading - 搜索是否正在加载
  * @param {Function} props.onResultClick - 点击搜索结果的回调
  * @param {Function} props.onRequestAccess - 申请权限的回调
+ * @param {string} props.cornerStyle - 设置圆角风格，可选值: 'rounded'(圆角) 或 'square'(方角)
  */
 const SearchBar = ({
     searchKeyword,
@@ -22,17 +23,23 @@ const SearchBar = ({
     onSearchChange,
     onSearch,
     onClearSearch,
-    placeholder = '搜索...',
+    placeholder = '搜索知识库...',
     className = 'w-50',
     searchResults = [],
     isSearchLoading = false,
     onResultClick,
     onRequestAccess,
+    cornerStyle = 'rounded', // 默认为圆角
 }) => {
     const [showDropdown, setShowDropdown] = useState(false);
     const searchRef = useRef(null);
     const inputRef = useRef(null);
 
+    // 计算边框圆角样式类
+    const getBorderRadiusClass = () => {
+        return cornerStyle === 'rounded' ? 'rounded-pill' : 'rounded-0';
+    };
+
     // 处理点击外部关闭下拉框
     useEffect(() => {
         const handleClickOutside = (event) => {
@@ -69,11 +76,11 @@ const SearchBar = ({
     return (
         <div className={`position-relative ${className}`} ref={searchRef}>
             <form className='d-flex' onSubmit={handleSubmit}>
-                <div className='input-group'>
+                <div className={`input-group search-input-group ${getBorderRadiusClass()}`}>
                     <input
                         ref={inputRef}
                         type='text'
-                        className='form-control'
+                        className={`form-control search-input border-end-0 ${getBorderRadiusClass()}`}
                         placeholder={placeholder}
                         value={searchKeyword}
                         onChange={handleInputChange}
@@ -81,7 +88,9 @@ const SearchBar = ({
                     {searchKeyword.trim() && (
                         <button
                             type='button'
-                            className='btn btn-outline-secondary border-start-0'
+                            className={`btn btn-outline-secondary border-start-0 ${
+                                cornerStyle === 'rounded' ? '' : 'rounded-0'
+                            }`}
                             onClick={() => {
                                 onClearSearch();
                                 setShowDropdown(false);
@@ -91,7 +100,12 @@ const SearchBar = ({
                             <SvgIcon className='close' />
                         </button>
                     )}
-                    <button type='submit' className='btn btn-outline-secondary'>
+                    <button
+                        type='submit'
+                        className={`btn btn-outline-secondary search-button ${
+                            cornerStyle === 'rounded' ? 'rounded-end-pill' : 'rounded-0'
+                        }`}
+                    >
                         <SvgIcon className='search' />
                     </button>
                 </div>
@@ -99,7 +113,11 @@ const SearchBar = ({
 
             {/* 搜索结果下拉框 - 仅在用户搜索且有结果时显示 */}
             {showDropdown && (isSearchLoading || searchResults?.length > 0) && (
-                <div className='position-absolute bg-white shadow-sm rounded-3 mt-1 w-100 search-results-dropdown z-1'>
+                <div
+                    className={`position-absolute bg-white shadow-sm mt-1 w-100 search-results-dropdown z-1 ${
+                        cornerStyle === 'rounded' ? 'rounded-3' : ''
+                    }`}
+                >
                     <div className='p-2 overflow-auto' style={{ maxHeight: '350px', zIndex: '1050' }}>
                         {isSearchLoading ? (
                             <div className='text-center p-3'>
@@ -116,7 +134,9 @@ const SearchBar = ({
                                 {searchResults.map((item) => (
                                     <div
                                         key={item.id}
-                                        className='search-result-item p-2 rounded-2 mb-1 hover-bg-light'
+                                        className={`search-result-item p-2 mb-1 hover-bg-light ${
+                                            cornerStyle === 'rounded' ? 'rounded-2' : ''
+                                        }`}
                                         style={{
                                             cursor: item.permissions?.can_read ? 'pointer' : 'default',
                                         }}
@@ -167,7 +187,9 @@ const SearchBar = ({
                                             </div>
                                             {!item.permissions?.can_read && (
                                                 <button
-                                                    className='btn btn-sm btn-outline-primary ms-2'
+                                                    className={`btn btn-sm btn-outline-primary ms-2 ${
+                                                        cornerStyle === 'rounded' ? '' : 'rounded-0'
+                                                    }`}
                                                     onClick={() => {
                                                         onRequestAccess(item.id, item.name);
                                                         setShowDropdown(false);

src/layouts/HeaderWithNav.jsx

@@ -79,7 +79,7 @@ export default function HeaderWithNav() {
                         </ul>
                         {!!user ? (
                             <div className='d-flex align-items-center gap-3'>
-                                {/* <div className='position-relative'>
+                                <div className='position-relative'>
                                     <button
                                         className='btn btn-link text-dark p-0'
                                         onClick={() => setShowNotifications(!showNotifications)}
@@ -102,7 +102,7 @@ export default function HeaderWithNav() {
                                             </span>
                                         )}
                                     </button>
-                                </div> */}
+                                </div>
                                 <div className='flex-shrink-0 dropdown'>
                                     <a
                                         href='#'

src/services/websocket.js

@@ -9,8 +9,10 @@ const WS_BASE_URL = API_URL.replace(/^http/, 'ws').replace(/\/api\/?$/, '');
 let socket = null;
 let reconnectTimer = null;
 let pingInterval = null;
+let reconnectAttempts = 0; // 添加重连尝试计数器
 const RECONNECT_DELAY = 5000; // 5秒后尝试重连
 const PING_INTERVAL = 30000; // 30秒发送一次ping
+const MAX_RECONNECT_ATTEMPTS = 3; // 最大重连尝试次数
 
 /**
  * 初始化WebSocket连接
@@ -37,11 +39,13 @@ export const initWebSocket = () => {
             }
 
             const wsUrl = `${WS_BASE_URL}/ws/notifications?token=${encryptedToken}`;
+            console.log('WebSocket URL:', wsUrl);
             socket = new WebSocket(wsUrl);
 
             // 连接建立时的处理
             socket.onopen = () => {
                 console.log('WebSocket connection established');
+                reconnectAttempts = 0; // 连接成功后重置重连计数器
 
                 // 订阅通知频道
                 subscribeToNotifications();
@@ -81,12 +85,19 @@ export const initWebSocket = () => {
 
                 // 如果不是正常关闭，尝试重连
                 if (event.code !== 1000) {
+                    if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+                        reconnectAttempts++;
+                        console.log(`WebSocket reconnection attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS}`);
+
                         reconnectTimer = setTimeout(() => {
                             console.log('Attempting to reconnect WebSocket...');
                             initWebSocket().catch((err) => {
                                 console.error('Failed to reconnect WebSocket:', err);
                             });
                         }, RECONNECT_DELAY);
+                    } else {
+                        console.log('Maximum reconnection attempts reached. Giving up.');
+                    }
                 }
             };
         } catch (error) {

src/styles/style.scss

@@ -18,17 +18,33 @@
     color: inherit;
 
     /* Heading styles */
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         margin-top: 1rem;
         margin-bottom: 0.75rem;
         font-weight: 600;
     }
 
-    h1 { font-size: 1.5rem; }
+    h1 {
-    h2 { font-size: 1.35rem; }
+        font-size: 1.5rem;
-    h3 { font-size: 1.2rem; }
+    }
-    h4 { font-size: 1.1rem; }
+    h2 {
-    h5, h6 { font-size: 1rem; }
+        font-size: 1.35rem;
+    }
+    h3 {
+        font-size: 1.2rem;
+    }
+    h4 {
+        font-size: 1.1rem;
+    }
+    h5,
+    h6 {
+        font-size: 1rem;
+    }
 
     /* Paragraph spacing */
     p {
@@ -36,13 +52,15 @@
     }
 
     /* Lists */
-    ul, ol {
+    ul,
+    ol {
         padding-left: 1.5rem;
         margin-bottom: 0.75rem;
     }
 
     /* Code blocks with syntax highlighting */
-    pre, pre.prism-code {
+    pre,
+    pre.prism-code {
         margin: 0.5rem 0 !important;
         padding: 0.75rem !important;
         border-radius: 0.375rem !important;
@@ -92,7 +110,8 @@
         margin-bottom: 0.75rem;
         border-collapse: collapse;
 
-        th, td {
+        th,
+        td {
             padding: 0.5rem;
             border: 1px solid #dee2e6;
         }
@@ -376,7 +395,8 @@
     }
 
     @keyframes pulse {
-    0%, 100% {
+        0%,
+        100% {
             transform: scale(0.8);
             opacity: 0.5;
         }
@@ -386,3 +406,40 @@
         }
     }
 }
+
+// SearchBar component styles
+.search-input-group {
+    border: 1px solid #ced4da;
+    overflow: hidden;
+
+    &.rounded-pill {
+        border-radius: 50rem;
+    }
+
+    .search-input {
+        border: none;
+        box-shadow: none;
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
+
+    .btn {
+        border: none;
+        background-color: transparent;
+        color: #6c757d;
+
+        &:hover,
+        &:active,
+        &:focus {
+            background-color: transparent;
+            color: #495057;
+        }
+    }
+
+    .search-button {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+    }
+}

vite.config.js

@@ -6,18 +6,20 @@ export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd());
 
     return {
+        base: '/',
         plugins: [react()],
         build: {
-            outDir: '../dist',
+            outDir: 'dist',
         },
         server: {
             port: env.VITE_PORT,
             proxy: {
                 '/api': {
-                    target: env.VITE_API_URL || 'http://81.69.223.133:58008',
+                    target: env.VITE_API_URL || 'http://81.69.223.133:8008',
                     changeOrigin: true,
                 },
             },
+            historyApiFallback: true,
         },
     };
 });