Merge origin/develop_web into feature/20251219_yjp

- Resolved conflict in web/src/components/RbModal/index.tsx
- Combined className and maskClosable properties

web/src/components/ButtonCheckbox/index.tsx

@@ -34,12 +34,12 @@ const ButtonCheckbox: FC<ButtonCheckboxProps> = ({
   }
   
   return (
-    <div className={clsx("rb:flex rb:items-center rb:border rb:rounded-[8px] rb:px-[8px] rb:text-[12px] rb:h-[24px] rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
+    <div className={clsx("rb:flex rb:items-center rb:border rb:rounded-lg rb:px-2 rb:text-[12px] rb:h-6 rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
       "rb:bg-[rgba(21,94,239,0.06)] rb:border-[#155EEF] rb:text-[#155EEF]": checked,
       "rb:border-[#DFE4ED] rb:text-[#212332]": !checked,
     })} onClick={handleChange}>
-      {icon && !checked && <img src={icon} className="rb:w-[16px] rb:h-[16px] rb:mr-[4px]" />}
-      {checkedIcon && checked && <img src={checkedIcon} className="rb:w-[16px] rb:h-[16px] rb:mr-[4px]" />}
+      {icon && !checked && <img src={icon} className="rb:w-4 rb:h-4 rb:mr-1" />}
+      {checkedIcon && checked && <img src={checkedIcon} className="rb:w-4 rb:h-4 rb:mr-1" />}
       {children}
     </div>
   );

web/src/components/Chat/ChatContent.tsx

@@ -0,0 +1,84 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2025-12-10 16:46:17 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2025-12-11 13:40:18
+ */
+import { type FC, useRef, useEffect } from 'react'
+import clsx from 'clsx'
+import Markdown from '@/components/Markdown'
+import type { ChatContentProps } from './types'
+
+/**
+ * 聊天内容显示组件
+ * 负责渲染聊天消息列表，支持不同角色的消息样式和自动滚动
+ */
+const ChatContent: FC<ChatContentProps> = ({
+  classNames,
+  contentClassNames,
+  data = [],
+  streamLoading = false,
+  empty,
+  labelPosition = 'bottom',
+  labelFormat,
+  errorDesc
+}) => {
+  // 滚动容器引用，用于控制自动滚动到底部
+  const scrollContainerRef = useRef<(HTMLDivElement | null)>(null)
+  
+  // 当数据变化时，自动滚动到底部显示最新消息
+  useEffect(() => {
+    setTimeout(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+      }
+    }, 0);
+  }, [data])
+  return (
+    <div ref={scrollContainerRef} className={clsx("rb:relative rb:overflow-y-auto", classNames)}>
+      {data.length === 0 
+        ? empty // 显示空状态
+        : data.map((item, index) => (
+          <div key={index} className={clsx("rb:relative", {
+            'rb:mt-6': index !== 0, // 非第一条消息添加上边距
+            'rb:right-0 rb:text-right': item.role === 'user', // 用户消息右对齐
+            'rb:left-0 rb:text-left': item.role === 'assistant', // 助手消息左对齐
+          })}>
+            {/* 流式加载时且内容为空则不显示 */}
+            {streamLoading && item.content === ''
+              ? null
+              : <>
+                {/* 顶部标签（如时间戳、用户名等） */}
+                {labelPosition === 'top' &&
+                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
+                    {labelFormat(item)}
+                  </div>
+                }
+                {/* 消息气泡框 */}
+                <div className={clsx('rb:border rb:text-left rb:rounded-lg rb:mt-1.5 rb:leading-4.5 rb:p-[10px_12px_2px_12px] rb:inline-block rb:max-w-100', contentClassNames, {
+                  // 错误消息样式（内容为null且非助手消息）
+                  'rb:border-[rgba(255,93,52,0.30)] rb:bg-[rgba(255,93,52,0.08)] rb:text-[#FF5D34]': errorDesc && item.role === 'assistant' && item.content === null,
+                  // 助手消息样式
+                  'rb:bg-[rgba(21,94,239,0.08)] rb:border-[rgba(21,94,239,0.30)]': item.role === 'user',
+                  // 用户消息样式
+                  'rb:bg-[#FFFFFF] rb:border-[#EBEBEB]': item.role === 'assistant' && (item.content || item.content === ''),
+                })}>
+                  {/* 使用Markdown组件渲染消息内容 */}
+                  <Markdown content={item.content ?? errorDesc ?? ''} />
+                </div>
+                {/* 底部标签（如时间戳、用户名等） */}
+                {labelPosition === 'bottom' &&
+                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
+                    {labelFormat(item)}
+                  </div>
+                }
+              </>
+            }
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+export default ChatContent

web/src/components/Chat/ChatInput.tsx

@@ -0,0 +1,80 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2025-12-10 16:46:14 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2025-12-20 15:38:40
+ */
+import { useEffect } from 'react'
+import { Flex, Input, Form } from 'antd'
+import SendIcon from '@/assets/images/conversation/send.svg'
+import SendDisabledIcon from '@/assets/images/conversation/sendDisabled.svg'
+import LoadingIcon from '@/assets/images/conversation/loading.svg'
+import type { ChatInputProps } from './types'
+
+/**
+ * 聊天输入框组件
+ * 提供消息输入、发送功能，支持键盘快捷键和加载状态显示
+ */
+const ChatInput = ({ message, onChange, onSend, loading, children }: ChatInputProps) => {
+  const [form] = Form.useForm()
+  // 监听表单值变化，用于控制发送按钮状态
+  const values = Form.useWatch([], form);
+
+  // 当外部message为空时，清空表单
+  useEffect(() => {
+    if (!message) {
+      form.setFieldsValue({
+        message: undefined,
+      })
+    }
+  }, [form, message])
+  
+  // 当加载状态时，清空输入框
+  useEffect(() => {
+    if (loading) {
+      form.setFieldsValue({
+        message: undefined,
+      })
+    }
+  }, [loading])
+
+  return (
+    <div className="rb:absolute rb:bottom-3 rb:left-0 rb:right-0">
+      <Flex vertical justify="space-between" className="rb:border rb:border-[#DFE4ED] rb:rounded-xl rb:min-h-30">
+        {/* 消息输入表单 */}
+        <Form form={form} layout="vertical">
+            <Form.Item name="message" noStyle>
+              <Input.TextArea
+                className="rb:m-[10px_12px_10px_12px]! rb:p-0! rb:w-[calc(100%-24px)]! rb:flex-[1_1_auto]"
+                variant="borderless"
+                autoSize={{ minRows: 2, maxRows: 2 }}
+                onChange={(e) => onChange(e.target.value)}
+                onKeyDown={(e) => {
+                  // Enter键发送，Shift+Enter换行
+                  if (e.key === 'Enter' && !e.shiftKey && (e.target as HTMLTextAreaElement).value?.trim() !== '' && !loading) {
+                    e.preventDefault();
+                    onSend();
+                  }
+                }}
+              />
+            </Form.Item>
+        </Form>
+
+        {/* 底部操作区域 */}
+        <Flex align="center" justify="space-between" className="rb:m-[0_10px_10px_10px]!">
+          {/* 子组件内容（如按钮等） */}
+          {children}
+          {/* 发送按钮 - 根据状态显示不同图标 */}
+          {loading
+            ? <img src={LoadingIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" />
+            : !values || !values?.message || values?.message?.trim() === ''
+            ? <img src={SendDisabledIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" />
+            : <img src={SendIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" onClick={onSend} />
+          }
+        </Flex>
+      </Flex>
+    </div>
+  )
+}
+
+export default ChatInput

web/src/components/Chat/index.tsx

@@ -0,0 +1,47 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2025-12-10 16:46:09 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2025-12-11 13:43:51
+ */
+import { type FC } from 'react'
+import ChatInput from './ChatInput'
+import type { ChatProps } from './types'
+import ChatContent from './ChatContent'
+
+/**
+ * 聊天组件 - 主要组件，由内容区域和输入框组成
+ * 提供完整的聊天界面功能，包括消息显示和输入交互
+ */
+const Chat: FC<ChatProps> = ({
+  empty,
+  data,
+  onChange, 
+  onSend, 
+  streamLoading = false, 
+  loading, 
+  contentClassName = '',
+  children,
+  labelFormat,
+  errorDesc
+}) => {
+  return (
+    <div className="rb:h-full rb:relative rb:pt-2">
+      {/* 聊天内容显示区域 */}
+      <ChatContent
+        classNames={contentClassName} 
+        data={data} 
+        streamLoading={streamLoading}
+        empty={empty}
+        labelFormat={labelFormat}
+        errorDesc={errorDesc}
+      />
+
+      {/* 聊天输入框区域 */}
+      <ChatInput onChange={onChange} onSend={onSend} loading={loading}>
+        {children}
+      </ChatInput>
+    </div>
+  )
+}
+export default Chat

web/src/components/Chat/types.ts

@@ -0,0 +1,84 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2025-12-10 16:45:54 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2025-12-11 13:43:52
+ */
+import { type ReactNode } from 'react'
+
+/**
+ * 聊天消息项接口
+ */
+export interface ChatItem {
+  /** 消息唯一标识 */
+  id?: string;
+  /** 会话ID */
+  conversation_id?: string | null;
+  /** 消息角色：用户或助手 */
+  role?: 'user' | 'assistant';
+  /** 消息内容 */
+  content?: string | null;
+  /** 创建时间 */
+  created_at?: number | string
+}
+
+/**
+ * 聊天组件主要属性接口
+ */
+export interface ChatProps {
+  /** 空状态显示内容 */
+  empty?: ReactNode;
+  /** 聊天数据列表 */
+  data: ChatItem[];
+  /** 输入内容变化回调 */
+  onChange: (message: string) => void;
+  /** 发送消息回调 */
+  onSend: () => void;
+  /** 流式加载状态 */
+  streamLoading?: boolean;
+  /** 加载状态 */
+  loading: boolean;
+  /** 内容区域自定义样式类名 */
+  contentClassName?: string;
+  /** 子组件内容 */
+  children?: ReactNode;
+  /** 标签格式化函数 */
+  labelFormat: (item: ChatItem) => any;
+  errorDesc?: string;
+}
+
+/**
+ * 聊天输入框组件属性接口
+ */
+export interface ChatInputProps {
+  /** 当前输入消息 */
+  message?: string;
+  /** 输入内容变化回调 */
+  onChange: (message: string) => void;
+  /** 发送消息回调 */
+  onSend: () => void;
+  /** 加载状态 */
+  loading: boolean;
+  /** 子组件内容 */
+  children?: ReactNode;
+}
+
+/**
+ * 聊天内容区域组件属性接口
+ */
+export interface ChatContentProps {
+  /** 自定义样式类名 */
+  classNames?: string | Record<string, boolean>;
+  contentClassNames?: string | Record<string, boolean>;
+  /** 聊天数据列表 */
+  data: ChatItem[];
+  /** 流式加载状态 */
+  streamLoading: boolean;
+  /** 空状态显示内容 */
+  empty?: ReactNode;
+  /** 标签位置：顶部或底部 */
+  labelPosition?: 'top' | 'bottom';
+  /** 标签格式化函数 */
+  labelFormat: (item: ChatItem) => any;
+  errorDesc?: string;
+}

web/src/components/CustomSelect/index.tsx

@@ -9,7 +9,7 @@ interface ApiResponse<T> {
   items?: T[];
 }
 
-interface CustomSelectProps {
+interface CustomSelectProps extends Omit<SelectProps, 'filterOption'> {
   url: string;
   params?: Record<string, unknown>;
   valueKey?: string;

web/src/components/Empty/index.tsx

@@ -6,6 +6,7 @@ interface EmptyProps {
   url?: string;
   size?: number | number[];
   title?: string;
+  isNeedSubTitle?: boolean;
   subTitle?: string;
   className?: string;
 }
@@ -13,6 +14,7 @@ const  Empty: FC<EmptyProps> = ({
   url,
   size = 200,
   title,
+  isNeedSubTitle = true,
   subTitle,
   className = '',
 }) => {
@@ -20,12 +22,12 @@ const  Empty: FC<EmptyProps> = ({
   const width = Array.isArray(size) ? size[0] : size ? size : url ? 200 : 88;
   const height = Array.isArray(size) ? size[1] : size ? size : url ? 200 : 88;
   
-  subTitle = subTitle || t('empty.tableEmpty');
+  const curSubTitle = isNeedSubTitle ? (subTitle || t('empty.tableEmpty')) : null;
   return (
     <div className={`rb:flex rb:items-center rb:justify-center rb:flex-col ${className}`}>
       <img src={url || emptyIcon} alt="404" style={{ width: `${width}px`, height: `${height}px` }} />
-      {title && <div className="rb:mt-[8px] rb:leading-[20px]">{title}</div>}
-      {subTitle && <div className={`rb:mt-[${url ? 8 : 5}px] rb:leading-[16px] rb:text-[#5B6167]`}>{subTitle}</div>}
+      {title && <div className="rb:mt-2 rb:leading-5">{title}</div>}
+      {curSubTitle && <div className={`rb:mt-[${url ? 8 : 5}px] rb:leading-4 rb:text-[12px] rb:text-[#A8A9AA]`}>{subTitle}</div>}
     </div>
   );
 }

web/src/components/Layout/AuthLayout.tsx

@@ -6,6 +6,7 @@ import { useNavigationBreadcrumbs } from '@/hooks/useNavigationBreadcrumbs';
 import AppHeader from '@/components/Header';
 import Sider from '@/components/SiderMenu'
 import { useUser } from '@/store/user';
+import { cookieUtils } from '@/utils/request';
 
 
 const { Content } = Layout;
@@ -18,7 +19,12 @@ const AuthLayout: FC = () => {
   // 自动更新面包屑导航
   useNavigationBreadcrumbs('manage');
   useEffect(() => {
-    getUserInfo()
+    const authToken = cookieUtils.get('authToken')
+    if (!authToken && !window.location.hash.includes('#/login')) {
+      window.location.href = `/#/login`;
+    } else {
+      getUserInfo()
+    }
   }, []);
 
   return (

web/src/components/Layout/AuthSpaceLayout.tsx

@@ -6,6 +6,7 @@ import { useNavigationBreadcrumbs } from '@/hooks/useNavigationBreadcrumbs';
 import AppHeader from '@/components/Header';
 import Sider from '@/components/SiderMenu';
 import { useUser } from '@/store/user';
+import { cookieUtils } from '@/utils/request';
 
 
 const { Content } = Layout;
@@ -18,8 +19,13 @@ const AuthSpaceLayout: FC = () => {
   // 自动更新面包屑导航
   useNavigationBreadcrumbs('space');
   useEffect(() => {
-    getUserInfo()
-    getStorageType()
+    const authToken = cookieUtils.get('authToken')
+    if (!authToken && !window.location.hash.includes('#/login')) {
+      window.location.href = `/#/login`;
+    } else {
+      getUserInfo()
+      getStorageType()
+    }
   }, []);
 
   return (

web/src/components/PageScrollList/index.tsx

@@ -29,7 +29,7 @@ interface PageScrollListProps {
 
 const PageScrollList = forwardRef<PageScrollListRef, PageScrollListProps>(({
   renderItem, 
-  query = {}, 
+  query, 
   url,
   column = 4,
   className = '',
@@ -51,11 +51,11 @@ const PageScrollList = forwardRef<PageScrollListRef, PageScrollListProps>(({
     request.get(url, {
       page: page,
       pagesize: PAGE_SIZE,
-      ...query,
+      ...(query||{}),
     })
       .then((res) => {
         const response = res as ApiResponse;
-        const results = Array.isArray(response.items) ? response.items : Array.isArray(response.hosts) ? response.hosts : Array.isArray(response) ? response : [];
+        const results = Array.isArray(response.items) ? response.items : Array.isArray(response) ? response : [];
         if (flag) {
           setData(results);
         } else {

web/src/components/RbAlert/index.tsx

@@ -3,7 +3,7 @@ import { type FC, type ReactNode } from 'react'
 interface RbAlertProps {
   color?: 'blue' | 'green' | 'orange' | 'purple',
   children: ReactNode | string;
-  icon: ReactNode;
+  icon?: ReactNode;
   className?: string;
 }
 
@@ -16,8 +16,8 @@ const colors = {
 
 const RbAlert: FC<RbAlertProps> = ({ color = 'blue', icon, className, children }) => {
   return (
-    <div className={`${colors[color]} ${className} rb:p-[6px_9px] rb:flex rb:items-center rb:text-[12px] rb:font-regular rb:leading-[16px] rb:border-[1px] rb:rounded-[6px]`}>
-      {icon && <span className="rb:text-[16px] rb:mr-[9px]">{icon}</span>}
+    <div className={`${colors[color]} ${className} rb:p-[6px_9px] rb:flex rb:items-center rb:text-[12px] rb:font-regular rb:leading-4 rb:border rb:rounded-md`}>
+      {icon && <span className="rb:text-[16px] rb:mr-2.25">{icon}</span>}
       {children}
     </div>
   )

web/src/components/RbCard/Card.tsx

@@ -52,7 +52,7 @@ const RbCard: FC<RbCardProps> = ({
       title={typeof title === 'function' ? title() : title ?
         <div className="rb:flex rb:items-center">
           {avatarUrl 
-            ? <img src={avatarUrl} className="rb:mr-[13px] rb:w-[48px] rb:h-[48px] rb:rounded-[8px]" />
+            ? <img src={avatarUrl} className="rb:mr-3.25 rb:w-12 rb:h-12 rb:rounded-lg" />
             : avatar ? avatar : null
           }
           <div className={

web/src/components/RbModal/index.tsx

@@ -25,9 +25,10 @@ const RbModal: FC<ModalProps> = ({
       onOk={onOk}
       destroyOnHidden={true}
       className={`rb-modal ${className || ''}`}
+      maskClosable={false}
       {...props}
     >
-      <div className='rb:max-h-[550px] rb:overflow-y-auto rb:overflow-x-hidden'>
+      <div className='rb:max-h-137.5 rb:overflow-y-auto rb:overflow-x-hidden'>
         {children}
       </div>
     </Modal>

web/src/components/SiderMenu/index.tsx

@@ -21,11 +21,11 @@ import modelActiveIcon from '@/assets/images/menu/model_active.svg';
 import memoryIcon from '@/assets/images/menu/memory.svg';
 import memoryActiveIcon from '@/assets/images/menu/memory_active.svg';
 import spaceIcon from '@/assets/images/menu/space.svg';
-import spaceActiveIcon from '@/assets/images/menu/space_acitve.svg';
+import spaceActiveIcon from '@/assets/images/menu/space_active.svg';
 import userIcon from '@/assets/images/menu/user.svg';
 import userActiveIcon from '@/assets/images/menu/user_active.svg';
 import userMemoryIcon from '@/assets/images/menu/userMemory.svg';
-import userMemoryActiveIcon from '@/assets/images/menu/userMemory_acitve.svg';
+import userMemoryActiveIcon from '@/assets/images/menu/userMemory_active.svg';
 import applicationIcon from '@/assets/images/menu/application.svg';
 import applicationActiveIcon from '@/assets/images/menu/application_active.svg';
 import knowledgeIcon from '@/assets/images/menu/knowledge.svg';
@@ -34,6 +34,10 @@ import memoryConversationIcon from '@/assets/images/menu/memoryConversation.svg'
 import memoryConversationActiveIcon from '@/assets/images/menu/memoryConversation_active.svg';
 import memberIcon from '@/assets/images/menu/member.svg';
 import memberActiveIcon from '@/assets/images/menu/member_active.svg';
+import toolIcon from '@/assets/images/menu/tool.png';
+import toolActiveIcon from '@/assets/images/menu/tool_active.png';
+import apiKeyIcon from '@/assets/images/menu/apiKey.png';
+import apiKeyActiveIcon from '@/assets/images/menu/apiKey_active.png';
 
 // 图标路径映射表
 const iconPathMap: Record<string, string> = {
@@ -57,6 +61,10 @@ const iconPathMap: Record<string, string> = {
   'memoryConversationActive': memoryConversationActiveIcon,
   'member': memberIcon,
   'memberActive': memberActiveIcon,
+  'tool': toolIcon,
+  'toolActive': toolActiveIcon,
+  'apiKey': apiKeyIcon,
+  'apiKeyActive': apiKeyActiveIcon,
 };
 
 const { Sider } = Layout;

web/src/components/Tag/index.tsx

@@ -1,6 +1,6 @@
 import { type FC, type ReactNode } from 'react'
 
-interface TagProps {
+export interface TagProps {
   color?: 'processing' | 'error' | 'success' | 'warning' | 'default',
   children: ReactNode;
   className?: string;
@@ -16,7 +16,7 @@ const colors = {
 
 const Tag: FC<TagProps> = ({ color = 'processing', children, className }) => {
   return (
-    <span className={`rb:inline-block rb:px-[4px] rb:py-[2px] rb:rounded-[4px] rb:text-[12px] rb:font-regular! rb:leading-[16px] rb:border-[1px] ${colors[color]} ${className || ''}`}>
+    <span className={`rb:inline-block rb:px-1 rb:py-0.5 rb:rounded-sm rb:text-[12px] rb:font-regular! rb:leading-4 rb:border ${colors[color]} ${className || ''}`}>
       {children}
     </span>
   )