docs: add comments to the src/components directory

web/src/components/Layout/AuthLayout.tsx

@@ -1,6 +1,25 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:11:02 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:11:02 
+ */
+/**
+ * AuthLayout Component
+ * 
+ * The main authenticated layout wrapper that provides:
+ * - Route authentication and permission checks
+ * - Automatic breadcrumb navigation updates
+ * - Sidebar navigation and header
+ * - Token-based authentication validation
+ * 
+ * @component
+ */
+
 import { Outlet } from 'react-router-dom';
 import { useEffect, type FC } from 'react';
 import { Layout } from 'antd';
+
 import useRouteGuard from '@/hooks/useRouteGuard';
 import { useNavigationBreadcrumbs } from '@/hooks/useNavigationBreadcrumbs';
 import AppHeader from '@/components/Header';
@@ -11,13 +30,20 @@ import { cookieUtils } from '@/utils/request';
 
 const { Content } = Layout;
 
-// 认证布局组件，使用useRouteGuard hook进行路由鉴权
+/**
+ * Authentication layout component that wraps all authenticated pages.
+ * Handles route guards, breadcrumb navigation, and user authentication.
+ */
 const AuthLayout: FC = () => {
   const { getUserInfo } = useUser();
-  // 使用路由守卫hook处理认证和权限检查
+  
+  // Use route guard hook to handle authentication and permission checks
   useRouteGuard('manage');
-  // 自动更新面包屑导航
+  
+  // Automatically update breadcrumb navigation based on current route
   useNavigationBreadcrumbs('manage');
+  
+  // Check authentication token and fetch user info on mount
   useEffect(() => {
     const authToken = cookieUtils.get('authToken')
     if (!authToken && !window.location.hash.includes('#/login')) {
@@ -29,9 +55,12 @@ const AuthLayout: FC = () => {
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
+      {/* Sidebar navigation */}
       <Sider />
       <Layout style={{maxHeight: '100vh', width: '100vh', overflowY: 'auto' }}>
+        {/* Header with breadcrumbs and user menu */}
         <AppHeader />
+        {/* Main content area - renders child routes */}
         <Content style={{ padding: '16px 17px 24px 16px', zIndex: 0 }}>
           <Outlet />
         </Content> 

web/src/components/Layout/AuthSpaceLayout.tsx

@@ -1,6 +1,26 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:11:43 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:11:43 
+ */
+/**
+ * AuthSpaceLayout Component
+ * 
+ * The authenticated layout wrapper for knowledge base (space) pages that provides:
+ * - Route authentication and permission checks for space context
+ * - Automatic breadcrumb navigation updates
+ * - Sidebar navigation and header configured for space mode
+ * - Token-based authentication validation
+ * - Storage type initialization
+ * 
+ * @component
+ */
+
 import { Outlet } from 'react-router-dom';
 import { useEffect, type FC } from 'react';
 import { Layout } from 'antd';
+
 import useRouteGuard from '@/hooks/useRouteGuard';
 import { useNavigationBreadcrumbs } from '@/hooks/useNavigationBreadcrumbs';
 import AppHeader from '@/components/Header';
@@ -11,28 +31,38 @@ import { cookieUtils } from '@/utils/request';
 
 const { Content } = Layout;
 
-// 认证布局组件，使用useRouteGuard hook进行路由鉴权
+/**
+ * Authentication layout component for knowledge base (space) pages.
+ * Similar to AuthLayout but configured for space context with storage type management.
+ */
 const AuthSpaceLayout: FC = () => {
   const { getUserInfo, getStorageType } = useUser();
-  // 使用路由守卫hook处理认证和权限检查
+  
+  // Use route guard hook to handle authentication and permission checks for space context
   useRouteGuard('space');
-  // 自动更新面包屑导航
+  
+  // Automatically update breadcrumb navigation based on current route in space context
   useNavigationBreadcrumbs('space');
+  
+  // Check authentication token, fetch user info and storage type on mount
   useEffect(() => {
     const authToken = cookieUtils.get('authToken')
     if (!authToken && !window.location.hash.includes('#/login')) {
       window.location.href = `/#/login`;
     } else {
       getUserInfo()
-      getStorageType()
+      getStorageType() // Fetch storage type for knowledge base operations
     }
   }, []);
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
+      {/* Sidebar navigation configured for space mode */}
       <Sider source="space" />
       <Layout style={{maxHeight: '100vh', width: '100vh', overflowY: 'auto' }}>
+        {/* Header with breadcrumbs and user menu configured for space mode */}
         <AppHeader source="space" />
+        {/* Main content area for knowledge base pages - renders child routes */}
         <Content style={{ padding: '16px 17px 24px 16px', zIndex: 0, height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
           <Outlet />
         </Content> 

web/src/components/Layout/BasicLayout.tsx

@@ -1,12 +1,35 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:12:42 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:12:42 
+ */
+/**
+ * BasicLayout Component
+ * 
+ * A minimal layout wrapper that provides:
+ * - User information initialization
+ * - Storage type initialization
+ * - Simple container for child routes without navigation UI
+ * 
+ * Used for pages that don't require sidebar/header (e.g., login, public pages).
+ * 
+ * @component
+ */
+
 import { Outlet } from 'react-router-dom';
 import { useEffect, type FC } from 'react';
+
 import { useUser } from '@/store/user';
 
-// 基础布局组件，用于展示内容并保留用户信息获取功能
+/**
+ * Basic layout component for pages without navigation UI.
+ * Fetches user info and storage type on mount, then renders child routes.
+ */
 const BasicLayout: FC = () => {
   const { getUserInfo, getStorageType } = useUser();
   
-  // 获取用户信息
+  // Fetch user information and storage type on component mount
   useEffect(() => {
     getUserInfo();
     getStorageType()
@@ -14,6 +37,7 @@ const BasicLayout: FC = () => {
 
   return (
     <div className="rb:relative rb:h-full rb:w-full">
+      {/* Render child routes without additional UI */}
       <Outlet />
     </div>
   )

web/src/components/Layout/LayoutBg.tsx

@@ -1,13 +1,37 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:13:20 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:13:20 
+ */
+/**
+ * LayoutBg Component
+ * 
+ * A decorative background component that displays styled background elements.
+ * Provides visual aesthetics with positioned decorative shapes.
+ * 
+ * @component
+ */
+
 import { type FC } from 'react';
 import clsx from 'clsx';
+
 import styles from './layout.module.css';
 
+/**
+ * Background layout component with decorative elements.
+ * Renders a fixed full-screen background with styled shapes.
+ */
 const LayoutBg: FC = () => {
   return (
     <div className="rb:fixed rb:top-0 rb:right-0 rb:left-0 rb:bottom-0 rb:bg-[#FBFDFF]">
-      <div className={clsx('rb:h-[240px]', styles.bgTop)}>
+      {/* Top section with decorative background shapes */}
+      <div className={clsx('rb:h-60', styles.bgTop)}>
+        {/* Left decorative element 1 */}
         <div className={clsx(styles.left1)}></div>
+        {/* Left decorative element 2 */}
         <div className={clsx(styles.left2)}></div>
+        {/* Right decorative element */}
         <div className={clsx(styles.right1)}></div>
       </div>
     </div>

web/src/components/Layout/LoginLayout.tsx

@@ -1,11 +1,30 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:13:38 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-02 15:13:38 
+ */
+/**
+ * LoginLayout Component
+ * 
+ * A minimal layout wrapper for authentication pages (login, register, etc.).
+ * Provides a simple container without navigation UI or authentication checks.
+ * 
+ * @component
+ */
+
 import { Outlet } from 'react-router-dom';
 import { type FC } from 'react';
 
-// 基础布局组件，用于展示内容并保留用户信息获取功能
+/**
+ * Login layout component for unauthenticated pages.
+ * Renders child routes in a simple full-size container.
+ */
 const LoginLayout: FC = () => {
 
   return (
     <div className="rb:relative rb:h-full rb:w-full">
+      {/* Render authentication pages (login, register, etc.) */}
       <Outlet />
     </div>
   )

web/src/components/Layout/NoAuthLayout.tsx

@@ -1,11 +1,30 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-02 15:13:55 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-02 15:52:17
+ */
+/**
+ * NoAuthLayout Component
+ * 
+ * A minimal layout wrapper for public pages that don't require authentication.
+ * Provides a simple container without navigation UI or authentication checks.
+ * 
+ * @component
+ */
+
 import { Outlet } from 'react-router-dom';
 import { type FC } from 'react';
 
-// 基础布局组件，用于展示内容并保留用户信息获取功能
+/**
+ * No-authentication layout component for public pages.
+ * Renders child routes in a simple full-size container without any auth requirements.
+ */
 const NoAuthLayout: FC = () => {
 
   return (
     <div className="rb:relative rb:h-full rb:w-full">
+      {/* Render public pages without authentication */}
       <Outlet />
     </div>
   )