Merge 83f6853716 into 45238c3dfa

Merge pull request #1476 from guanweiwang/feature/qa_modal
feat: 优化问答弹窗，完善 ts 配置
2025-11-06 11:43:38 +00:00 · 2025-11-06 17:43:33 +08:00 · 2025-11-06 15:37:56 +08:00 · 2025-11-06 11:46:37 +08:00
39 changed files with 690 additions and 938 deletions
--- a/web/admin/src/vite-env.d.ts
+++ b/web/admin/src/vite-env.d.ts
@ -1,4 +1,6 @@
 /// <reference types="vite/client" />
+/// <reference types="@panda-wiki/themes/types" />
+
 declare module 'swiper/css' {
  const content: string;
  export default content;
--- a/web/admin/tsconfig.app.json
+++ b/web/admin/tsconfig.app.json
@ -1,27 +1,20 @@
 {
+  "extends": "../tsconfig.base.json",
  "compilerOptions": {
+    /* Vite + React 特有配置 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
-    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
    "moduleDetection": "force",
-    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
-    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
--- a/web/admin/tsconfig.node.json
+++ b/web/admin/tsconfig.node.json
@ -1,21 +1,14 @@
 {
+  "extends": "../tsconfig.base.json",
  "compilerOptions": {
-    "incremental": true,
+    /* Vite 配置文件特有 */
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
    "moduleDetection": "force",
-    "noEmit": true,

    /* Linting */
-    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
--- a/web/app/new-types.d.ts
+++ b/web/app/new-types.d.ts
@ -1,3 +1,5 @@
+/// <reference types="@panda-wiki/themes/types" />
+
 declare module '@cap.js/widget' {
  interface CapOptions {
    apiEndpoint: string;
--- a/web/app/src/app/layout.tsx
+++ b/web/app/src/app/layout.tsx
@ -70,7 +70,6 @@ const Layout = async ({

  const [kbDetailResolve, authInfoResolve] = await Promise.allSettled([
    getShareV1AppWebInfo(),
-    // @ts-ignore
    getShareProV1AuthInfo({}),
  ]);

--- a/web/app/src/components/QaModal/AiQaContent.tsx
+++ b/web/app/src/components/QaModal/AiQaContent.tsx
@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import dayjs from 'dayjs';
 import { ChunkResultItem } from '@/assets/type';
+import Logo from '@/assets/images/logo.png';
 import aiLoading from '@/assets/images/ai-loading.gif';
 import { getShareV1ConversationDetail } from '@/request/ShareConversation';
 import { message } from '@ctzhian/ui';
@ -25,21 +26,33 @@ import MarkDown2 from '@/components/markdown2';
 import { postShareV1ChatFeedback } from '@/request/ShareChat';
 import { copyText } from '@/utils';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { Box, IconButton, Stack, Typography, Tooltip } from '@mui/material';
+import {
+  Box,
+  Button,
+  IconButton,
+  Stack,
+  Typography,
+  Tooltip,
+  alpha,
+} from '@mui/material';
 import 'dayjs/locale/zh-cn';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import ChatLoading from '../../views/chat/ChatLoading';
-import { IconTupian, IconFasong } from '@panda-wiki/icons';
+import {
+  IconTupian,
+  IconFasong,
+  IconXingxing,
+  IconXinduihua,
+} from '@panda-wiki/icons';
 import CloseIcon from '@mui/icons-material/Close';
 import Image from 'next/image';
 import {
  StyledMainContainer,
  StyledConversationContainer,
  StyledConversationItem,
-  StyledAccordion,
-  StyledAccordionSummary,
-  StyledAccordionDetails,
-  StyledQuestionText,
+  StyledUserBubble,
+  StyledAiBubble,
+  StyledAiBubbleContent,
  StyledChunkAccordion,
  StyledChunkAccordionSummary,
  StyledChunkAccordionDetails,
@ -57,8 +70,9 @@ import {
  StyledActionButtonStack,
  StyledFuzzySuggestionsStack,
  StyledFuzzySuggestionItem,
-  StyledHotSearchStack,
-  StyledHotSearchItem,
+  StyledHotSearchContainer,
+  StyledHotSearchColumn,
+  StyledHotSearchColumnItem,
 } from './StyledComponents';

 export interface ConversationItem {
@ -91,7 +105,13 @@ const LoadingContent = ({
  return (
    <Stack direction='row' alignItems='center' gap={1} sx={{ pb: 1 }}>
      <Image src={aiLoading} alt='ai-loading' width={20} height={20} />
-      <Typography variant='body2' sx={{ fontSize: 12, color: 'text.tertiary' }}>
+      <Typography
+        variant='body2'
+        sx={theme => ({
+          fontSize: 12,
+          color: alpha(theme.palette.text.primary, 0.5),
+        })}
+      >
        {AnswerStatus[thinking]}
      </Typography>
    </Stack>
@ -141,6 +161,10 @@ const AiQaContent: React.FC<{
  });

  const onReset = () => {
+    if (loading) {
+      handleSearchAbort();
+    }
+    handleSearch(true);
    setConversationId('');
    setConversation([]);
    setFullAnswer('');
@ -156,9 +180,9 @@ const AiQaContent: React.FC<{
    setNonce('');
  };

-  const handleSearch = () => {
+  const handleSearch = (reset: boolean = false) => {
    if (input.length > 0) {
-      onSearch(input);
+      onSearch(input, reset);
      setInput('');
      // 清理图片URL
      uploadedImages.forEach(img => {
@ -663,156 +687,295 @@ const AiQaContent: React.FC<{

  return (
    <StyledMainContainer className={palette.mode === 'dark' ? 'md-dark' : ''}>
+      {/* 无对话时显示欢迎界面 */}
+      {conversation.length === 0 && (
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+            pb: 5,
+          }}
+        >
+          {/* Logo区域 */}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, my: 8 }}>
+            <Image
+              src={kbDetail?.settings?.icon || Logo.src}
+              alt='logo'
+              width={46}
+              height={46}
+              style={{
+                objectFit: 'contain',
+              }}
+            />
+            <Typography
+              variant='h6'
+              sx={{ fontSize: 32, color: 'text.primary', fontWeight: 700 }}
+            >
+              {kbDetail?.settings?.title}
+            </Typography>
+          </Box>
+
+          {/* 热门搜索区域 */}
+          {hotSearch.length > 0 && (
+            <Box sx={{ width: '100%' }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  mb: 2,
+                }}
+              >
+                <Typography
+                  sx={{
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: 'primary.main',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                  }}
+                >
+                  <IconXingxing sx={{ fontSize: 14 }} />
+                  大家都在搜什么?
+                </Typography>
+              </Box>
+
+              {/* 热门搜索列表 - 两列布局 */}
+              <StyledHotSearchContainer>
+                {/* 左列 */}
+                <StyledHotSearchColumn>
+                  {hotSearch
+                    .filter((_, index) => index % 2 === 0)
+                    .map((suggestion, index) => (
+                      <StyledHotSearchColumnItem
+                        key={index * 2}
+                        onClick={() => onSuggestionClick(suggestion)}
+                      >
+                        • {suggestion}
+                      </StyledHotSearchColumnItem>
+                    ))}
+                </StyledHotSearchColumn>
+
+                {/* 右列 */}
+                <StyledHotSearchColumn>
+                  {hotSearch
+                    .filter((_, index) => index % 2 === 1)
+                    .map((suggestion, index) => (
+                      <StyledHotSearchColumnItem
+                        key={index * 2 + 1}
+                        onClick={() => onSuggestionClick(suggestion)}
+                      >
+                        • {suggestion}
+                      </StyledHotSearchColumnItem>
+                    ))}
+                </StyledHotSearchColumn>
+              </StyledHotSearchContainer>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      {/* 有对话时显示对话历史 */}
      <StyledConversationContainer
        direction='column'
        gap={2}
        className='conversation-container'
        sx={{
          mb: conversation?.length > 0 ? 2 : 0,
+          display: conversation.length > 0 ? 'flex' : 'none',
        }}
      >
        {conversation.map((item, index) => (
          <StyledConversationItem key={index}>
-            <StyledAccordion key={index} defaultExpanded={true}>
-              <StyledAccordionSummary
-                expandIcon={<ExpandMoreIcon sx={{ fontSize: 18 }} />}
-              >
-                <StyledQuestionText>{item.q}</StyledQuestionText>
-              </StyledAccordionSummary>
-              <StyledAccordionDetails>
-                {item.chunk_result.length > 0 && (
-                  <StyledChunkAccordion defaultExpanded>
-                    <StyledChunkAccordionSummary
-                      expandIcon={<ExpandMoreIcon sx={{ fontSize: 16 }} />}
+            {/* 用户问题气泡 - 右对齐 */}
+            <StyledUserBubble>{item.q}</StyledUserBubble>
+
+            {/* AI回答气泡 - 左对齐 */}
+            <StyledAiBubble>
+              {/* 搜索结果 */}
+              {item.chunk_result.length > 0 && (
+                <StyledChunkAccordion defaultExpanded>
+                  <StyledChunkAccordionSummary
+                    expandIcon={<ExpandMoreIcon sx={{ fontSize: 16 }} />}
+                  >
+                    <Typography
+                      variant='body2'
+                      sx={theme => ({
+                        fontSize: 12,
+                        color: alpha(theme.palette.text.primary, 0.5),
+                      })}
                    >
+                      共找到 {item.chunk_result.length} 个结果
+                    </Typography>
+                  </StyledChunkAccordionSummary>
+
+                  <StyledChunkAccordionDetails>
+                    <Stack gap={1}>
+                      {item.chunk_result.map((chunk, chunkIndex) => (
+                        <StyledChunkItem key={chunkIndex}>
+                          <Typography
+                            variant='body2'
+                            className='hover-primary'
+                            sx={theme => ({
+                              fontSize: 12,
+                              color: alpha(theme.palette.text.primary, 0.5),
+                            })}
+                            onClick={() => {
+                              window.open(`/node/${chunk.node_id}`, '_blank');
+                            }}
+                          >
+                            {chunk.name}
+                          </Typography>
+                        </StyledChunkItem>
+                      ))}
+                    </Stack>
+                  </StyledChunkAccordionDetails>
+                </StyledChunkAccordion>
+              )}
+
+              {/* 加载状态 */}
+              {index === conversation.length - 1 && loading && (
+                <LoadingContent thinking={thinking} />
+              )}
+
+              {/* 思考过程 */}
+              {!!item.thinking_content && (
+                <StyledThinkingAccordion defaultExpanded>
+                  <StyledThinkingAccordionSummary
+                    expandIcon={<ExpandMoreIcon sx={{ fontSize: 16 }} />}
+                  >
+                    <Stack direction='row' alignItems='center' gap={1}>
+                      {thinking === 2 && index === conversation.length - 1 && (
+                        <Image
+                          src={aiLoading}
+                          alt='ai-loading'
+                          width={20}
+                          height={20}
+                        />
+                      )}
+
                      <Typography
                        variant='body2'
-                        sx={{ fontSize: 12, color: 'text.tertiary' }}
+                        sx={theme => ({
+                          fontSize: 12,
+                          color: alpha(theme.palette.text.primary, 0.5),
+                        })}
                      >
-                        共找到 {item.chunk_result.length} 个结果
+                        {thinking === 2 && index === conversation.length - 1
+                          ? '思考中...'
+                          : '已思考'}
                      </Typography>
-                    </StyledChunkAccordionSummary>
+                    </Stack>
+                  </StyledThinkingAccordionSummary>

-                    <StyledChunkAccordionDetails>
-                      <Stack gap={1}>
-                        {item.chunk_result.map((chunk, index) => (
-                          <StyledChunkItem key={index}>
-                            <Typography
-                              variant='body2'
-                              className='hover-primary'
-                              sx={{ fontSize: 12, color: 'text.tertiary' }}
-                              onClick={() => {
-                                window.open(`/node/${chunk.node_id}`, '_blank');
-                              }}
-                            >
-                              {chunk.name}
-                            </Typography>
-                          </StyledChunkItem>
-                        ))}
-                      </Stack>
-                    </StyledChunkAccordionDetails>
-                  </StyledChunkAccordion>
-                )}
-
-                {index === conversation.length - 1 && loading && (
-                  <>
-                    <LoadingContent thinking={thinking} />
-                  </>
-                )}
-
-                {!!item.thinking_content && (
-                  <StyledThinkingAccordion defaultExpanded>
-                    <StyledThinkingAccordionSummary
-                      expandIcon={<ExpandMoreIcon sx={{ fontSize: 16 }} />}
-                    >
-                      <Stack direction='row' alignItems='center' gap={1}>
-                        {thinking === 2 && (
-                          <Image
-                            src={aiLoading}
-                            alt='ai-loading'
-                            width={20}
-                            height={20}
-                          />
-                        )}
-
-                        <Typography
-                          variant='body2'
-                          sx={{ fontSize: 12, color: 'text.tertiary' }}
-                        >
-                          {thinking === 2 ? '思考中...' : '已思考'}
-                        </Typography>
-                      </Stack>
-                    </StyledThinkingAccordionSummary>
-
-                    <StyledThinkingAccordionDetails>
-                      <MarkDown2
-                        content={item.thinking_content || ''}
-                        autoScroll={false}
-                      />
-                    </StyledThinkingAccordionDetails>
-                  </StyledThinkingAccordion>
-                )}
+                  <StyledThinkingAccordionDetails>
+                    <MarkDown2
+                      content={item.thinking_content || ''}
+                      autoScroll={false}
+                    />
+                  </StyledThinkingAccordionDetails>
+                </StyledThinkingAccordion>
+              )}

+              {/* AI回答内容 */}
+              <StyledAiBubbleContent>
                {item.source === 'history' ? (
                  <MarkDown content={item.a} />
                ) : (
                  <MarkDown2 content={item.a} autoScroll={false} />
                )}
-              </StyledAccordionDetails>
-            </StyledAccordion>
-            {(index !== conversation.length - 1 || !loading) && (
-              <StyledActionStack
-                direction={mobile ? 'column' : 'row'}
-                alignItems={mobile ? 'flex-start' : 'center'}
-                justifyContent='space-between'
-                gap={mobile ? 1 : 3}
-              >
-                <Stack direction='row' gap={3} alignItems='center'>
-                  <span>生成于 {dayjs(item.update_time).fromNow()}</span>
+              </StyledAiBubbleContent>

-                  <IconCopy
-                    sx={{ cursor: 'pointer' }}
-                    onClick={() => {
-                      copyText(item.a);
-                    }}
-                  />
+              {/* 操作按钮 */}
+              {(index !== conversation.length - 1 || !loading) && (
+                <StyledActionStack
+                  direction={mobile ? 'column' : 'row'}
+                  alignItems={mobile ? 'flex-start' : 'center'}
+                  justifyContent='space-between'
+                  gap={mobile ? 1 : 3}
+                >
+                  <Stack direction='row' gap={3} alignItems='center'>
+                    <span>生成于 {dayjs(item.update_time).fromNow()}</span>

-                  {isFeedbackEnabled && item.source === 'chat' && (
-                    <>
-                      {item.score === 1 && (
-                        <IconZaned sx={{ cursor: 'pointer' }} />
-                      )}
-                      {item.score !== 1 && (
-                        <IconZan
-                          sx={{ cursor: 'pointer' }}
-                          onClick={() => {
-                            if (item.score === 0)
-                              handleScore(item.message_id, 1);
-                          }}
-                        />
-                      )}
-                      {item.score !== -1 && (
-                        <IconCai
-                          sx={{ cursor: 'pointer' }}
-                          onClick={() => {
-                            if (item.score === 0) {
-                              setConversationItem(item);
-                              setOpen(true);
-                            }
-                          }}
-                        />
-                      )}
-                      {item.score === -1 && (
-                        <IconCaied sx={{ cursor: 'pointer' }} />
-                      )}
-                    </>
-                  )}
-                </Stack>
-              </StyledActionStack>
-            )}
+                    <IconCopy
+                      sx={{ cursor: 'pointer' }}
+                      onClick={() => {
+                        copyText(item.a);
+                      }}
+                    />
+
+                    {isFeedbackEnabled && item.source === 'chat' && (
+                      <>
+                        {item.score === 1 && (
+                          <IconZaned sx={{ cursor: 'pointer' }} />
+                        )}
+                        {item.score !== 1 && (
+                          <IconZan
+                            sx={{ cursor: 'pointer' }}
+                            onClick={() => {
+                              if (item.score === 0)
+                                handleScore(item.message_id, 1);
+                            }}
+                          />
+                        )}
+                        {item.score !== -1 && (
+                          <IconCai
+                            sx={{ cursor: 'pointer' }}
+                            onClick={() => {
+                              if (item.score === 0) {
+                                setConversationItem(item);
+                                setOpen(true);
+                              }
+                            }}
+                          />
+                        )}
+                        {item.score === -1 && (
+                          <IconCaied sx={{ cursor: 'pointer' }} />
+                        )}
+                      </>
+                    )}
+                  </Stack>
+                </StyledActionStack>
+              )}
+            </StyledAiBubble>
          </StyledConversationItem>
        ))}
      </StyledConversationContainer>
+      {conversation.length > 0 && (
+        <Button
+          variant='contained'
+          sx={theme => ({
+            textTransform: 'none',
+            minWidth: 'auto',
+            px: 3.5,
+            py: '2px',
+            gap: 0.5,
+            fontSize: 12,
+            backgroundColor: 'background.default',
+            color: 'text.primary',
+            boxShadow: `0px 1px 2px 0px ${alpha(theme.palette.text.primary, 0.06)}`,
+            border: '1px solid',
+            borderColor: alpha(theme.palette.text.primary, 0.1),
+            cursor: 'pointer',
+            '&:hover': {
+              boxShadow: `0px 1px 2px 0px ${alpha(theme.palette.text.primary, 0.06)}`,
+              borderColor: 'primary.main',
+              color: 'primary.main',
+            },
+            mb: 2,
+          })}
+          onClick={onReset}
+        >
+          <IconXinduihua sx={{ fontSize: 14 }} />
+          新会话
+        </Button>
+      )}
+
      <StyledInputContainer>
        <StyledInputWrapper>
          {/* 多张图片预览 */}
@ -932,12 +1095,6 @@ const AiQaContent: React.FC<{
          </StyledActionButtonStack>
        </StyledInputWrapper>
      </StyledInputContainer>
-      <Feedback
-        open={open}
-        onClose={() => setOpen(false)}
-        onSubmit={handleScore}
-        data={conversationItem}
-      />
      {/* 模糊搜索建议列表 */}
      {showFuzzySuggestions &&
        fuzzySuggestions.length > 0 &&
@ -954,29 +1111,12 @@ const AiQaContent: React.FC<{
          </StyledFuzzySuggestionsStack>
        )}

-      {/* 原始搜索建议列表 - 只在没有模糊搜索建议时显示 */}
-      {!showFuzzySuggestions &&
-        hotSearch.length > 0 &&
-        conversation.length === 0 && (
-          <StyledHotSearchStack gap={1}>
-            {hotSearch.map((suggestion, index) => (
-              <StyledHotSearchItem
-                key={index}
-                onClick={() => onSuggestionClick(suggestion)}
-              >
-                <Typography
-                  variant='body2'
-                  sx={{
-                    fontSize: 14,
-                    flex: 1,
-                  }}
-                >
-                  {suggestion} →
-                </Typography>
-              </StyledHotSearchItem>
-            ))}
-          </StyledHotSearchStack>
-        )}
+      <Feedback
+        open={open}
+        onClose={() => setOpen(false)}
+        onSubmit={handleScore}
+        data={conversationItem}
+      />
    </StyledMainContainer>
  );
 };
--- a/web/app/src/components/QaModal/SearchDocContent.tsx
+++ b/web/app/src/components/QaModal/SearchDocContent.tsx
@ -8,7 +8,11 @@ import {
  Typography,
  Stack,
  CircularProgress,
+  alpha,
+  Skeleton,
+  styled,
 } from '@mui/material';
+import Logo from '@/assets/images/logo.png';
 import noDocImage from '@/assets/images/no-doc.png';
 import Image from 'next/image';
 import { IconJinsousuo, IconFasong, IconMianbaoxie } from '@panda-wiki/icons';
@ -16,7 +20,51 @@ import { postShareV1ChatSearch } from '@/request/ShareChatSearch';
 import { DomainNodeContentChunkSSE } from '@/request/types';
 import { message } from '@ctzhian/ui';
 import { IconWenjian } from '@panda-wiki/icons';
+import { useStore } from '@/provider';

+const StyledSearchResultItem = styled(Stack)(({ theme }) => ({
+  position: 'relative',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    borderBottom: '1px dashed',
+    borderColor: alpha(theme.palette.text.primary, 0.1),
+  },
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    borderBottom: '1px dashed',
+    borderColor: alpha(theme.palette.text.primary, 0.1),
+  },
+  padding: theme.spacing(2),
+  borderRadius: '8px',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease-in-out',
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.text.primary, 0.02),
+    '.hover-primary': {
+      color: 'primary.main',
+    },
+  },
+}));
+
+const SearchDocSkeleton = () => {
+  return (
+    <StyledSearchResultItem>
+      <Stack gap={1}>
+        <Skeleton variant='rounded' height={16} width={200} />
+        <Skeleton variant='rounded' height={22} width={400} />
+        <Skeleton variant='rounded' height={16} width={500} />
+      </Stack>
+    </StyledSearchResultItem>
+  );
+};
 interface SearchDocContentProps {
  inputRef: React.RefObject<HTMLInputElement | null>;
  placeholder: string;
@ -26,6 +74,7 @@ const SearchDocContent: React.FC<SearchDocContentProps> = ({
  inputRef,
  placeholder,
 }) => {
+  const { kbDetail } = useStore();
  // 模糊搜索相关状态
  const [fuzzySuggestions, setFuzzySuggestions] = useState<string[]>([]);
  const [showFuzzySuggestions, setShowFuzzySuggestions] = useState(false);
@ -148,6 +197,29 @@ const SearchDocContent: React.FC<SearchDocContentProps> = ({

  return (
    <Box>
+      <Stack
+        direction='row'
+        alignItems='center'
+        justifyContent='center'
+        gap={2}
+        sx={{ mb: 3, mt: 1 }}
+      >
+        <Image
+          src={kbDetail?.settings?.icon || Logo.src}
+          alt='logo'
+          width={46}
+          height={46}
+          style={{
+            objectFit: 'contain',
+          }}
+        />
+        <Typography
+          variant='h6'
+          sx={{ fontSize: 32, color: 'text.primary', fontWeight: 700 }}
+        >
+          {kbDetail?.settings?.title}
+        </Typography>
+      </Stack>
      {/* 搜索输入框 */}
      <TextField
        ref={inputRef}
@ -157,26 +229,27 @@ const SearchDocContent: React.FC<SearchDocContentProps> = ({
        onKeyDown={handleKeyDown}
        fullWidth
        autoFocus
-        sx={{
+        sx={theme => ({
+          boxShadow: `0px 20px 40px 0px ${alpha(theme.palette.text.primary, 0.06)}`,
          borderRadius: 2,
          '& .MuiInputBase-root': {
            fontSize: 16,
-            bgcolor: 'background.paper3',
+            backgroundColor: theme.palette.background.default,
            '& fieldset': {
-              borderColor: 'background.paper3',
+              borderColor: alpha(theme.palette.text.primary, 0.1),
            },
            '&:hover fieldset': {
              borderColor: 'primary.main',
            },
            '&.Mui-focused fieldset': {
-              borderColor: 'primary.main',
+              borderColor: `${theme.palette.primary.main} !important`,
              borderWidth: 1,
            },
          },
          '& .MuiInputBase-input': {
            py: 1.5,
          },
-        }}
+        })}
        slotProps={{
          input: {
            startAdornment: (
@ -264,31 +337,15 @@ const SearchDocContent: React.FC<SearchDocContentProps> = ({
          </Typography>

          {/* 搜索结果列表 */}
-          <Stack sx={{ overflow: 'auto', maxHeight: 'calc(100vh - 284px)' }}>
+          <Stack sx={{ overflow: 'auto', maxHeight: 'calc(100vh - 334px)' }}>
            {searchResults.map((result, index) => (
-              <Stack
+              <StyledSearchResultItem
                direction='row'
                justifyContent='space-between'
                alignItems='center'
                key={result.node_id}
                gap={2}
                onClick={() => handleSearchResultClick(result)}
-                sx={{
-                  p: 2,
-                  borderRadius: '8px',
-                  borderBottom:
-                    index !== searchResults.length - 1 ? 'none' : '1px dashed',
-                  borderTop: '1px dashed',
-                  borderColor: 'divider',
-                  cursor: 'pointer',
-                  transition: 'all 0.2s ease-in-out',
-                  '&:hover': {
-                    bgcolor: 'background.paper3',
-                    '.hover-primary': {
-                      color: 'primary.main',
-                    },
-                  },
-                }}
              >
                <Stack sx={{ flex: 1, width: 0 }} gap={0.5}>
                  {/* 路径 */}
@ -342,7 +399,7 @@ const SearchDocContent: React.FC<SearchDocContentProps> = ({
                  </Typography>
                </Stack>
                <IconMianbaoxie sx={{ fontSize: 12 }} />
-              </Stack>
+              </StyledSearchResultItem>
            ))}
          </Stack>
        </Box>
@ -359,11 +416,11 @@ const SearchDocContent: React.FC<SearchDocContentProps> = ({

      {/* 搜索中状态 */}
      {isSearching && (
-        <Box sx={{ mt: 2, textAlign: 'center' }}>
-          <Typography variant='body2' sx={{ color: 'text.tertiary' }}>
-            搜索中...
-          </Typography>
-        </Box>
+        <Stack sx={{ mt: 2 }}>
+          {[...Array(3)].map((_, index) => (
+            <SearchDocSkeleton key={index} />
+          ))}
+        </Stack>
      )}
    </Box>
  );
--- a/web/app/src/components/QaModal/StyledComponents.tsx
+++ b/web/app/src/components/QaModal/StyledComponents.tsx
@ -18,7 +18,7 @@ export const StyledMainContainer = styled(Box)(() => ({
 }));

 export const StyledConversationContainer = styled(Stack)(() => ({
-  maxHeight: 'calc(100vh - 334px)',
+  maxHeight: 'calc(100vh - 332px)',
  overflow: 'auto',
  scrollbarWidth: 'none',
  msOverflowStyle: 'none',
@ -27,10 +27,38 @@ export const StyledConversationContainer = styled(Stack)(() => ({
  },
 }));

-export const StyledConversationItem = styled(Box)(() => ({}));
+export const StyledConversationItem = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
+}));
+
+// 聊天气泡相关组件
+export const StyledUserBubble = styled(Box)(({ theme }) => ({
+  alignSelf: 'flex-end',
+  maxWidth: '75%',
+  padding: theme.spacing(1, 2),
+  borderRadius: '10px 10px 0px 10px',
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  fontSize: 14,
+  wordBreak: 'break-word',
+}));
+
+export const StyledAiBubble = styled(Box)(({ theme }) => ({
+  alignSelf: 'flex-start',
+  maxWidth: '85%',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(3),
+}));
+
+export const StyledAiBubbleContent = styled(Box)(() => ({
+  wordBreak: 'break-word',
+}));

 // 对话相关组件
-export const StyledAccordion = styled(Accordion)(({ theme }) => ({
+export const StyledAccordion = styled(Accordion)(() => ({
  padding: 0,
  border: 'none',
  '&:before': {
@ -71,7 +99,6 @@ export const StyledChunkAccordion = styled(Accordion)(({ theme }) => ({
  background: 'transparent',
  border: 'none',
  padding: 0,
-  paddingBottom: theme.spacing(2),
 }));

 export const StyledChunkAccordionSummary = styled(AccordionSummary)(
@ -142,8 +169,7 @@ export const StyledThinkingAccordionDetails = styled(AccordionDetails)(
 // 操作区域组件
 export const StyledActionStack = styled(Stack)(({ theme }) => ({
  fontSize: 12,
-  color: alpha(theme.palette.text.primary, 0.75),
-  marginTop: theme.spacing(2),
+  color: alpha(theme.palette.text.primary, 0.35),
 }));

 // 输入区域组件
@ -165,6 +191,7 @@ export const StyledInputWrapper = styled(Stack)(({ theme }) => ({
  alignItems: 'flex-end',
  gap: theme.spacing(2),
  backgroundColor: theme.palette.background.default,
+  boxShadow: `0px 20px 40px 0px ${alpha(theme.palette.text.primary, 0.06)}`,
  transition: 'border-color 0.2s ease-in-out',
  '&:hover': {
    borderColor: theme.palette.primary.main,
@ -282,3 +309,36 @@ export const StyledHotSearchItem = styled(Box)(({ theme }) => ({
  alignItems: 'center',
  width: 'auto',
 }));
+
+// 热门搜索容器
+export const StyledHotSearchContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(2),
+}));
+
+// 热门搜索列
+export const StyledHotSearchColumn = styled(Box)(({ theme }) => ({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+  paddingLeft: theme.spacing(2),
+  borderLeft: `1px solid ${alpha(theme.palette.text.primary, 0.06)}`,
+}));
+
+// 热门搜索列项目
+export const StyledHotSearchColumnItem = styled(Box)(({ theme }) => ({
+  paddingRight: theme.spacing(2),
+  borderRadius: '10px',
+  cursor: 'pointer',
+  transition: 'all 0.2s',
+  backgroundColor: 'transparent',
+  color: theme.palette.text.secondary,
+  fontSize: 12,
+  fontWeight: 400,
+  display: 'flex',
+  alignItems: 'center',
+  '&:hover': {
+    color: theme.palette.primary.main,
+  },
+}));
--- a/web/app/src/components/QaModal/components/ConversationItem.tsx
+++ b/web/app/src/components/QaModal/components/ConversationItem.tsx
@ -1,286 +0,0 @@
-import React from 'react';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  Stack,
-  Typography,
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Image from 'next/image';
-import dayjs from 'dayjs';
-import { ConversationItem as ConversationItemType } from '../types';
-import { ChunkResultItem } from '@/assets/type';
-import MarkDown from '@/components/markdown';
-import MarkDown2 from '@/components/markdown2';
-import {
-  IconCai,
-  IconCaied,
-  IconCopy,
-  IconZan,
-  IconZaned,
-} from '@/components/icons';
-import { copyText } from '@/utils';
-import aiLoading from '@/assets/images/ai-loading.gif';
-import { LoadingContent } from './LoadingContent';
-import { AnswerStatusType } from '../constants';
-
-interface ConversationItemProps {
-  item: ConversationItemType;
-  index: number;
-  isLast: boolean;
-  loading: boolean;
-  thinking: AnswerStatusType;
-  thinkingContent: string;
-  answer: string;
-  chunkResult: ChunkResultItem[];
-  isChunkResult: boolean;
-  isThinking: boolean;
-  mobile: boolean;
-  themeMode: string;
-  isFeedbackEnabled: boolean;
-  onScoreChange: (message_id: string, score: number) => void;
-  onFeedbackOpen: (item: ConversationItemType) => void;
-}
-
-export const ConversationItemComponent: React.FC<ConversationItemProps> = ({
-  item,
-  index,
-  isLast,
-  loading,
-  thinking,
-  thinkingContent,
-  answer,
-  chunkResult,
-  isChunkResult,
-  isThinking,
-  mobile,
-  themeMode,
-  isFeedbackEnabled,
-  onScoreChange,
-  onFeedbackOpen,
-}) => {
-  const displayChunkResult = isLast ? chunkResult : item.chunk_result;
-  const displayThinkingContent = isLast
-    ? thinkingContent
-    : item.thinking_content;
-  const displayAnswer = isLast ? item.a || answer || '' : item.a;
-
-  return (
-    <Box>
-      <Accordion
-        defaultExpanded={true}
-        sx={{
-          bgcolor:
-            themeMode === 'dark' ? 'background.default' : 'background.paper3',
-        }}
-      >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon sx={{ fontSize: 24 }} />}
-          sx={{ userSelect: 'text' }}
-        >
-          <Box
-            sx={{
-              fontWeight: '700',
-              lineHeight: '24px',
-              wordBreak: 'break-all',
-            }}
-          >
-            {item.q}
-          </Box>
-        </AccordionSummary>
-
-        <AccordionDetails sx={{ pt: 2 }}>
-          {/* Chunk结果展示 */}
-          {displayChunkResult.length > 0 && (
-            <Accordion
-              sx={{
-                bgcolor: 'transparent',
-                border: 'none',
-                p: 0,
-                pb: 2,
-              }}
-              defaultExpanded
-            >
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon sx={{ fontSize: 16 }} />}
-                sx={{
-                  justifyContent: 'flex-start',
-                  gap: 2,
-                  '.MuiAccordionSummary-content': {
-                    flexGrow: 0,
-                  },
-                }}
-              >
-                <Typography
-                  variant='body2'
-                  sx={{ fontSize: 12, color: 'text.tertiary' }}
-                >
-                  共找到 {displayChunkResult.length} 个结果
-                </Typography>
-              </AccordionSummary>
-
-              <AccordionDetails
-                sx={{
-                  pt: 0,
-                  pl: 2,
-                  borderTop: 'none',
-                  borderLeft: '1px solid',
-                  borderColor: 'divider',
-                }}
-              >
-                <Stack gap={1}>
-                  {displayChunkResult.map((chunk, idx) => (
-                    <Box
-                      key={idx}
-                      sx={{
-                        cursor: 'pointer',
-                        '&:hover': {
-                          '.hover-primary': {
-                            color: 'primary.main',
-                          },
-                        },
-                      }}
-                    >
-                      <Typography
-                        variant='body2'
-                        className='hover-primary'
-                        sx={{ fontSize: 12, color: 'text.tertiary' }}
-                        onClick={() => {
-                          window.open(`/node/${chunk.node_id}`, '_blank');
-                        }}
-                      >
-                        {chunk.name}
-                      </Typography>
-                    </Box>
-                  ))}
-                </Stack>
-              </AccordionDetails>
-            </Accordion>
-          )}
-
-          {/* 加载状态 */}
-          {isLast && loading && !isChunkResult && !thinkingContent && (
-            <LoadingContent thinking={thinking} />
-          )}
-
-          {/* 思考内容展示 */}
-          {displayThinkingContent && (
-            <Accordion
-              sx={{
-                bgcolor: 'transparent',
-                border: 'none',
-                p: 0,
-                pb: 2,
-                '&:before': {
-                  content: '""',
-                  height: 0,
-                },
-              }}
-              defaultExpanded
-            >
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon sx={{ fontSize: 16 }} />}
-                sx={{
-                  justifyContent: 'flex-start',
-                  gap: 2,
-                  '.MuiAccordionSummary-content': {
-                    flexGrow: 0,
-                  },
-                }}
-              >
-                <Stack direction='row' alignItems='center' gap={1}>
-                  {isThinking && (
-                    <Image
-                      src={aiLoading}
-                      alt='ai-loading'
-                      width={20}
-                      height={20}
-                    />
-                  )}
-                  <Typography
-                    variant='body2'
-                    sx={{ fontSize: 12, color: 'text.tertiary' }}
-                  >
-                    {isThinking ? '思考中...' : '已思考'}
-                  </Typography>
-                </Stack>
-              </AccordionSummary>
-
-              <AccordionDetails
-                sx={{
-                  pt: 0,
-                  pl: 2,
-                  borderTop: 'none',
-                  borderLeft: '1px solid',
-                  borderColor: 'divider',
-                  '.markdown-body': {
-                    opacity: 0.75,
-                    fontSize: 12,
-                  },
-                }}
-              >
-                <MarkDown2 content={displayThinkingContent} />
-              </AccordionDetails>
-            </Accordion>
-          )}
-
-          {/* 答案展示 */}
-          {item.source === 'history' ? (
-            <MarkDown content={item.a} />
-          ) : (
-            <MarkDown2 content={displayAnswer} />
-          )}
-        </AccordionDetails>
-      </Accordion>
-
-      {/* 反馈区域 */}
-      {(!isLast || !loading) && (
-        <Stack
-          direction={mobile ? 'column' : 'row'}
-          alignItems={mobile ? 'flex-start' : 'center'}
-          justifyContent='space-between'
-          gap={mobile ? 1 : 3}
-          sx={{
-            fontSize: 12,
-            color: 'text.tertiary',
-            mt: 2,
-          }}
-        >
-          <Stack direction='row' gap={3} alignItems='center'>
-            <span>生成于 {dayjs(item.update_time).fromNow()}</span>
-
-            <IconCopy
-              sx={{ cursor: 'pointer' }}
-              onClick={() => copyText(item.a)}
-            />
-
-            {isFeedbackEnabled && item.source === 'chat' && (
-              <>
-                {item.score === 1 && <IconZaned sx={{ cursor: 'pointer' }} />}
-                {item.score !== 1 && (
-                  <IconZan
-                    sx={{ cursor: 'pointer' }}
-                    onClick={() => {
-                      if (item.score === 0) onScoreChange(item.message_id, 1);
-                    }}
-                  />
-                )}
-                {item.score !== -1 && (
-                  <IconCai
-                    sx={{ cursor: 'pointer' }}
-                    onClick={() => {
-                      if (item.score === 0) onFeedbackOpen(item);
-                    }}
-                  />
-                )}
-                {item.score === -1 && <IconCaied sx={{ cursor: 'pointer' }} />}
-              </>
-            )}
-          </Stack>
-        </Stack>
-      )}
-    </Box>
-  );
-};
--- a/web/app/src/components/QaModal/components/InputArea.tsx
+++ b/web/app/src/components/QaModal/components/InputArea.tsx
@ -1,219 +0,0 @@
-import React from 'react';
-import { Box, IconButton, Stack, TextField, Tooltip } from '@mui/material';
-import { IconTupian, IconFasong } from '@panda-wiki/icons';
-import CloseIcon from '@mui/icons-material/Close';
-import Image from 'next/image';
-import ChatLoading from '@/views/chat/ChatLoading';
-import { UploadedImage } from '../types';
-import { AnswerStatusType } from '../constants';
-
-interface InputAreaProps {
-  input: string;
-  loading: boolean;
-  thinking: AnswerStatusType;
-  placeholder: string;
-  uploadedImages: UploadedImage[];
-  fileInputRef: React.RefObject<HTMLInputElement | null>;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onInputFocus: () => void;
-  onInputBlur: () => void;
-  onPaste: (e: React.ClipboardEvent<HTMLDivElement>) => void;
-  onSearch: () => void;
-  onImageUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onRemoveImage: (id: string) => void;
-  onSearchAbort: () => void;
-  setThinking: (value: AnswerStatusType) => void;
-}
-
-export const InputArea: React.FC<InputAreaProps> = ({
-  input,
-  loading,
-  thinking,
-  placeholder,
-  uploadedImages,
-  fileInputRef,
-  inputRef,
-  onInputChange,
-  onInputFocus,
-  onInputBlur,
-  onPaste,
-  onSearch,
-  onImageUpload,
-  onRemoveImage,
-  onSearchAbort,
-  setThinking,
-}) => {
-  return (
-    <Stack
-      sx={{
-        px: 1.5,
-        py: 1,
-        borderRadius: '10px',
-        border: '1px solid',
-        borderColor: 'background.paper3',
-        display: 'flex',
-        alignItems: 'flex-end',
-        gap: 2,
-        bgcolor: 'background.paper3',
-        transition: 'border-color 0.2s ease-in-out',
-        '&:hover': {
-          borderColor: 'primary.main',
-        },
-        '&:focus-within': {
-          borderColor: 'dark.main',
-        },
-      }}
-    >
-      {uploadedImages.length > 0 && (
-        <Stack
-          direction='row'
-          flexWrap='wrap'
-          gap={1}
-          sx={{ width: '100%', zIndex: 1 }}
-        >
-          {uploadedImages.map(image => (
-            <Box
-              key={image.id}
-              sx={{
-                position: 'relative',
-                borderRadius: '8px',
-                overflow: 'hidden',
-                border: '1px solid',
-                borderColor: 'divider',
-              }}
-            >
-              <Image
-                src={image.url}
-                alt='uploaded'
-                width={40}
-                height={40}
-                style={{ objectFit: 'cover' }}
-              />
-              <IconButton
-                size='small'
-                onClick={() => onRemoveImage(image.id)}
-                sx={{
-                  position: 'absolute',
-                  top: 2,
-                  right: 2,
-                  width: 16,
-                  height: 16,
-                  bgcolor: 'background.paper',
-                  border: '1px solid',
-                  borderColor: 'divider',
-                  transition: 'opacity 0.2s',
-                  '&:hover': {
-                    bgcolor: 'background.paper',
-                  },
-                }}
-              >
-                <CloseIcon sx={{ fontSize: 10 }} />
-              </IconButton>
-            </Box>
-          ))}
-        </Stack>
-      )}
-
-      <TextField
-        fullWidth
-        multiline
-        rows={2}
-        disabled={loading}
-        ref={inputRef}
-        sx={{
-          bgcolor: 'background.paper3',
-          '.MuiInputBase-root': {
-            p: 0,
-            overflow: 'hidden',
-            height: '52px !important',
-          },
-          textarea: {
-            borderRadius: 0,
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-            p: '2px',
-          },
-          fieldset: {
-            border: 'none',
-          },
-        }}
-        size='small'
-        value={input}
-        onChange={onInputChange}
-        onFocus={onInputFocus}
-        onBlur={onInputBlur}
-        onPaste={onPaste}
-        onKeyDown={e => {
-          const isComposing =
-            e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
-          if (
-            e.key === 'Enter' &&
-            !e.shiftKey &&
-            input.length > 0 &&
-            !isComposing
-          ) {
-            e.preventDefault();
-            onSearch();
-          }
-        }}
-        placeholder={placeholder}
-        autoComplete='off'
-      />
-
-      <Stack
-        direction='row'
-        alignItems='center'
-        justifyContent='space-between'
-        sx={{ width: '100%' }}
-      >
-        <input
-          ref={fileInputRef}
-          type='file'
-          accept='image/*'
-          multiple
-          style={{ display: 'none' }}
-          onChange={onImageUpload}
-        />
-        <Tooltip title='敬请期待'>
-          <IconButton size='small' disabled={loading} sx={{ flexShrink: 0 }}>
-            <IconTupian sx={{ fontSize: 20, color: 'text.secondary' }} />
-          </IconButton>
-        </Tooltip>
-
-        <Box sx={{ fontSize: 12, flexShrink: 0, cursor: 'pointer' }}>
-          {loading ? (
-            <ChatLoading
-              thinking={thinking}
-              onClick={() => {
-                setThinking(4);
-                onSearchAbort();
-              }}
-            />
-          ) : (
-            <IconButton
-              size='small'
-              onClick={() => {
-                if (input.length > 0) {
-                  onSearchAbort();
-                  setThinking(1);
-                  onSearch();
-                }
-              }}
-            >
-              <IconFasong
-                sx={{
-                  fontSize: 16,
-                  color: input.length > 0 ? 'primary.main' : 'text.disabled',
-                }}
-              />
-            </IconButton>
-          )}
-        </Box>
-      </Stack>
-    </Stack>
-  );
-};
--- a/web/app/src/components/QaModal/components/LoadingContent.tsx
+++ b/web/app/src/components/QaModal/components/LoadingContent.tsx
@ -1,22 +0,0 @@
-import React from 'react';
-import { Stack, Typography } from '@mui/material';
-import Image from 'next/image';
-import aiLoading from '@/assets/images/ai-loading.gif';
-import { AnswerStatus, AnswerStatusType } from '../constants';
-
-interface LoadingContentProps {
-  thinking: AnswerStatusType;
-}
-
-export const LoadingContent: React.FC<LoadingContentProps> = ({ thinking }) => {
-  if (thinking === 4) return null;
-
-  return (
-    <Stack direction='row' alignItems='center' gap={1} sx={{ pb: 1 }}>
-      <Image src={aiLoading} alt='ai-loading' width={20} height={20} />
-      <Typography variant='body2' sx={{ fontSize: 12, color: 'text.tertiary' }}>
-        {AnswerStatus[thinking]}
-      </Typography>
-    </Stack>
-  );
-};
--- a/web/app/src/components/QaModal/components/SuggestionList.tsx
+++ b/web/app/src/components/QaModal/components/SuggestionList.tsx
@ -1,97 +0,0 @@
-import React from 'react';
-import { Box, Stack, Typography } from '@mui/material';
-
-interface SuggestionListProps {
-  hotSearch: string[];
-  fuzzySuggestions: string[];
-  showFuzzySuggestions: boolean;
-  input: string;
-  onSuggestionClick: (text: string) => void;
-  highlightMatch: (text: string, query: string) => React.ReactNode;
-}
-
-export const SuggestionList: React.FC<SuggestionListProps> = ({
-  hotSearch,
-  fuzzySuggestions,
-  showFuzzySuggestions,
-  input,
-  onSuggestionClick,
-  highlightMatch,
-}) => {
-  // 模糊搜索建议
-  if (showFuzzySuggestions && fuzzySuggestions.length > 0) {
-    return (
-      <Stack
-        sx={{
-          mt: 1,
-          position: 'relative',
-          zIndex: 1000,
-        }}
-        gap={0.5}
-      >
-        {fuzzySuggestions.map((suggestion, index) => (
-          <Box
-            key={index}
-            onClick={() => onSuggestionClick(suggestion)}
-            sx={{
-              py: 1,
-              px: 2,
-              borderRadius: '6px',
-              cursor: 'pointer',
-              transition: 'all 0.2s',
-              bgcolor: 'transparent',
-              color: 'text.primary',
-              '&:hover': {
-                bgcolor: 'action.hover',
-              },
-              display: 'flex',
-              alignItems: 'center',
-              width: 'auto',
-              fontSize: 14,
-              fontWeight: 400,
-            }}
-          >
-            {highlightMatch(suggestion, input)}
-          </Box>
-        ))}
-      </Stack>
-    );
-  }
-
-  // 热门搜索建议
-  if (!showFuzzySuggestions && hotSearch.length > 0) {
-    return (
-      <Stack sx={{ mt: 2 }} gap={1}>
-        {hotSearch.map((suggestion, index) => (
-          <Box
-            key={index}
-            onClick={() => onSuggestionClick(suggestion)}
-            sx={{
-              py: '6px',
-              px: 2,
-              mb: 1,
-              borderRadius: '10px',
-              cursor: 'pointer',
-              transition: 'all 0.2s',
-              bgcolor: '#F8F9FA',
-              color: 'text.secondary',
-              '&:hover': {
-                color: 'primary.main',
-              },
-              alignSelf: 'flex-start',
-              display: 'inline-flex',
-              alignItems: 'center',
-              width: 'auto',
-            }}
-          >
-            <Typography variant='body2' sx={{ fontSize: 14, flex: 1 }}>
-              {suggestion} →
-            </Typography>
-          </Box>
-        ))}
-      </Stack>
-    );
-  }
-
-  return null;
-};
--- a/web/app/src/components/QaModal/components/index.ts
+++ b/web/app/src/components/QaModal/components/index.ts
@ -1,4 +0,0 @@
-export { LoadingContent } from './LoadingContent';
-export { InputArea } from './InputArea';
-export { SuggestionList } from './SuggestionList';
-export { ConversationItemComponent } from './ConversationItem';
--- a/web/app/src/components/QaModal/index.tsx
+++ b/web/app/src/components/QaModal/index.tsx
@ -1,6 +1,5 @@
 'use client';
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import Logo from '@/assets/images/logo.png';
 import { IconZhinengwenda, IconJinsousuo } from '@panda-wiki/icons';
 import { useSearchParams } from 'next/navigation';
 import {
@ -11,8 +10,10 @@ import {
  Stack,
  lighten,
  alpha,
+  styled,
+  Tabs,
+  Tab,
 } from '@mui/material';
-import { CusTabs } from '@ctzhian/ui';
 import AiQaContent from './AiQaContent';
 import SearchDocContent from './SearchDocContent';
 import { useStore } from '@/provider';
@ -32,6 +33,48 @@ interface QaModalProps {
  defaultSuggestions?: SearchSuggestion[];
 }

+const StyledTabs = styled(Tabs)(({ theme }) => ({
+  minHeight: 'auto',
+  position: 'relative',
+  borderRadius: '10px',
+  padding: theme.spacing(0.5),
+  border: `1px solid ${alpha(theme.palette.text.primary, 0.1)}`,
+  '& .MuiTabs-indicator': {
+    height: '100%',
+    borderRadius: '8px',
+    backgroundColor: theme.palette.primary.main,
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    zIndex: 0,
+  },
+  '& .MuiTabs-flexContainer': {
+    gap: theme.spacing(0.5),
+    position: 'relative',
+    zIndex: 1,
+  },
+}));
+
+// 样式化的 Tab 组件 - 白色背景，圆角，深灰色文字
+const StyledTab = styled(Tab)(({ theme }) => ({
+  minHeight: 'auto',
+  padding: theme.spacing(0.75, 2),
+  borderRadius: '6px',
+  backgroundColor: 'transparent',
+  fontSize: 12,
+  fontWeight: 400,
+  textTransform: 'none',
+  transition: 'color 0.3s ease-in-out',
+  position: 'relative',
+  zIndex: 1,
+  lineHeight: 1,
+  '&:hover': {
+    color: theme.palette.text.primary,
+  },
+  '&.Mui-selected': {
+    color: theme.palette.primary.contrastText,
+    fontWeight: 500,
+  },
+}));
+
 const QaModal: React.FC<QaModalProps> = () => {
  const { qaModalOpen, setQaModalOpen, kbDetail, mobile } = useStore();
  const [searchMode, setSearchMode] = useState<'chat' | 'search'>('chat');
@ -69,6 +112,14 @@ const QaModal: React.FC<QaModalProps> = () => {
    }
  }, [qaModalOpen, searchMode]);

+  useEffect(() => {
+    if (!qaModalOpen) {
+      setTimeout(() => {
+        setSearchMode('chat');
+      }, 300);
+    }
+  }, [qaModalOpen]);
+
  useEffect(() => {
    const cid = searchParams.get('cid');
    const ask = searchParams.get('ask');
@ -92,7 +143,6 @@ const QaModal: React.FC<QaModalProps> = () => {
        sx={theme => ({
          display: 'flex',
          flexDirection: 'column',
-          gap: 2,
          flex: 1,
          maxWidth: 800,
          maxHeight: '100%',
@ -101,87 +151,81 @@ const QaModal: React.FC<QaModalProps> = () => {
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
          overflow: 'hidden',
          outline: 'none',
-          '& .Mui-selected': {
-            color: `${theme.palette.background.default} !important`,
-          },
+          pb: 2,
        })}
        onClick={e => e.stopPropagation()}
      >
-        {/* 头部区域 */}
+        {/* 顶部标签栏 */}
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
-            mx: 2,
-            py: 1.5,
-            borderBottom: '1px solid',
-            borderColor: 'divider',
+            px: 2,
+            pt: 2,
+            pb: 2.5,
          }}
        >
-          {/* Logo */}
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <img
-              src={kbDetail?.settings?.icon || Logo.src}
-              style={{
-                width: 24,
-                height: 24,
-              }}
-            />
-            <Typography
-              variant='h6'
-              sx={{ fontSize: 16, color: 'text.primary' }}
-            >
-              {kbDetail?.settings?.title}
-            </Typography>
-          </Box>
-
-          <CusTabs
-            size='small'
-            list={[
-              {
-                label: (
-                  <Stack direction='row' gap={1} alignItems='center'>
-                    <IconZhinengwenda sx={{ fontSize: 16 }} />
-                    {!mobile && <span>智能问答</span>}
-                  </Stack>
-                ),
-                value: 'chat',
-              },
-              {
-                label: (
-                  <Stack direction='row' gap={1} alignItems='center'>
-                    <IconJinsousuo sx={{ fontSize: 16 }} />
-                    {!mobile && <span>仅搜索文档</span>}
-                  </Stack>
-                ),
-                value: 'search',
-              },
-            ]}
+          <StyledTabs
            value={searchMode}
-            onChange={value => setSearchMode(value as 'chat' | 'search')}
-          />
+            onChange={(_, value) => {
+              setSearchMode(value as 'chat' | 'search');
+            }}
+            variant='scrollable'
+            scrollButtons={false}
+          >
+            <StyledTab
+              label={
+                <Stack direction='row' gap={0.5} alignItems='center'>
+                  <IconZhinengwenda sx={{ fontSize: 16 }} />
+                  {!mobile && <span>智能问答</span>}
+                </Stack>
+              }
+              value='chat'
+            />
+            <StyledTab
+              label={
+                <Stack direction='row' gap={0.5} alignItems='center'>
+                  <IconJinsousuo sx={{ fontSize: 16 }} />
+                  {!mobile && <span>仅搜索文档</span>}
+                </Stack>
+              }
+              value='search'
+            />
+          </StyledTabs>

          {/* Esc按钮 */}
          {!mobile && (
            <Button
+              variant='outlined'
+              color='primary'
              onClick={onClose}
              size='small'
              sx={theme => ({
                minWidth: 'auto',
-                px: 1.5,
-                py: 0.5,
+                px: 1,
+                py: '1px',
                fontSize: 12,
                fontWeight: 500,
                textTransform: 'none',
+                color: 'text.secondary',
+                borderColor: alpha(theme.palette.text.primary, 0.1),
              })}
            >
              Esc
            </Button>
          )}
        </Box>
+
        {/* 主内容区域 - 根据模式切换 */}
-        <Box sx={{ px: 2, display: searchMode === 'chat' ? 'block' : 'none' }}>
+        <Box
+          sx={{
+            px: 3,
+            flex: 1,
+            display: searchMode === 'chat' ? 'flex' : 'none',
+            flexDirection: 'column',
+          }}
+        >
          <AiQaContent
            hotSearch={hotSearch}
            placeholder={placeholder}
@ -189,15 +233,21 @@ const QaModal: React.FC<QaModalProps> = () => {
          />
        </Box>
        <Box
-          sx={{ px: 2, display: searchMode === 'search' ? 'block' : 'none' }}
+          sx={{
+            px: 3,
+            flex: 1,
+            display: searchMode === 'search' ? 'flex' : 'none',
+            flexDirection: 'column',
+          }}
        >
          <SearchDocContent inputRef={inputRef} placeholder={placeholder} />
        </Box>
+
        {/* 底部AI生成提示 */}
        <Box
          sx={{
            px: 3,
-            py: kbDetail?.settings?.disclaimer_settings?.content ? 2 : 1,
+            pt: kbDetail?.settings?.disclaimer_settings?.content ? 2 : 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
--- a/web/app/src/views/node/DocContent.tsx
+++ b/web/app/src/views/node/DocContent.tsx
@ -125,7 +125,6 @@ const DocContent = ({
  );

  useEffect(() => {
-    // @ts-ignore
    window.CAP_CUSTOM_WASM_URL =
      window.location.origin + '/cap@0.0.6/cap_wasm.min.js';
  }, []);
--- a/web/app/tsconfig.json
+++ b/web/app/tsconfig.json
@ -1,18 +1,13 @@
 {
+  "extends": "../tsconfig.base.json",
  "compilerOptions": {
+    /* Next.js 特有配置 */
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
    "resolveJsonModule": true,
-    "isolatedModules": true,
    "jsx": "preserve",
-    "incremental": true,
    "plugins": [
      {
        "name": "next"
--- a/web/packages/icons/src/IconChuangjian.tsx
+++ b/web/packages/icons/src/IconChuangjian.tsx
@ -0,0 +1,17 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const IconChuangjian = (props: SvgIconProps) => (
+  <SvgIcon
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 1024 1024'
+    {...props}
+  >
+    <path d='M512.36408889 55.18222223C259.83431111 55.18222223 54.38577778 260.59662223 54.38577778 513.12640001S259.83431111 971.09333334 512.36408889 971.09333334s457.96693333-205.44853333 457.96693333-457.96693333S764.88248889 55.18222223 512.36408889 55.18222223z m0 846.81386666c-214.41422222 0-388.84693333-174.43271111-388.84693334-388.84693333s174.43271111-388.86968889 388.84693334-388.86968889S901.19964445 298.66666667 901.19964445 513.12640001 726.76693333 901.96195556 512.36408889 901.96195556z'></path>
+    <path d='M546.92977778 291.25973334h-69.13137778v187.30097778H290.49742222v69.12h187.30097778v187.30097777h69.13137778V547.68071112h187.2896v-69.12H546.92977778V291.25973334z'></path>
+  </SvgIcon>
+);
+
+IconChuangjian.displayName = 'icon-chuangjian';
+
+export default IconChuangjian;
--- a/web/packages/icons/src/IconFabu.tsx
+++ b/web/packages/icons/src/IconFabu.tsx
@ -0,0 +1,16 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const IconFabu = (props: SvgIconProps) => (
+  <SvgIcon
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 1024 1024'
+    {...props}
+  >
+    <path d='M766.1 880.9L539.5 769.8c-16.9-8.3-24-28.7-15.7-45.7 4-8.1 11-14.3 19.5-17.3 8.6-2.9 17.9-2.4 26.1 1.6l185.8 91.2 80.2-549.1-361.2 433.4v201.4c0 18.8-15.3 34.1-34.1 34.1S406 904.1 406 885.3V672.7c0-1.8 0.1-3.5 0.4-5.3 0.8-6.6 3.5-12.9 7.7-18L754.4 241 208.8 524.1l128.6 66.7c16.9 8.9 23.6 29.5 15.3 46.6-3.8 7.9-10.7 13.9-19 16.8-8.3 2.9-17.4 2.3-25.3-1.5l-186-96.8c-7.1-3.7-12.7-9.7-15.9-17-4.2-7.9-5.1-17.2-2.5-25.7 2.6-8.6 8.5-15.8 16.5-20l749.6-388.9c5-2.6 10.6-3.9 16.2-3.9 16.7-0.3 31.1 11.5 34.1 27.9 1.1 5.5 0.9 11.1-0.6 16.5L816.1 854.9c-2.2 15.4-14.3 26.8-28.9 29-7.2 1.3-14.6 0.3-21.1-3z m0 0'></path>
+  </SvgIcon>
+);
+
+IconFabu.displayName = 'icon-fabu';
+
+export default IconFabu;
--- a/web/packages/icons/src/IconXinduihua.tsx
+++ b/web/packages/icons/src/IconXinduihua.tsx
@ -0,0 +1,18 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const IconXinduihua = (props: SvgIconProps) => (
+  <SvgIcon
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 1024 1024'
+    {...props}
+  >
+    <path d='M333.184 987.456a52.928 52.928 0 0 1-18.688-3.712 47.424 47.424 0 0 1-16.064-10.56 44.544 44.544 0 0 1-10.624-15.36 45.76 45.76 0 0 1-4.032-18.304l-1.088-96.896a256.896 256.896 0 0 1-82.304-27.456 239.808 239.808 0 0 1-36.16-24.128 219.008 219.008 0 0 1-31.488-29.632 265.728 265.728 0 0 1-25.6-34.752 240.384 240.384 0 0 1-30.336-79.744 237.44 237.44 0 0 1-3.648-42.368V346.24c0-15.68 1.472-31.04 4.352-46.4 3.328-15.36 8.064-30.4 13.952-44.992a248.32 248.32 0 0 1 52.992-77.184A242.432 242.432 0 0 1 269.504 112.64a230.4 230.4 0 0 1 47.552-4.736H486.4a44.48 44.48 0 0 1 30.72 12.416 42.176 42.176 0 0 1 0 59.584 43.712 43.712 0 0 1-30.72 12.48H317.056c-10.56 0-20.8 0.704-30.72 2.88-10.24 1.856-20.096 4.8-29.632 8.832a139.904 139.904 0 0 0-27.392 14.208 169.344 169.344 0 0 0-23.808 19.072 171.584 171.584 0 0 0-19.712 23.36 171.008 171.008 0 0 0-14.656 26.688 155.264 155.264 0 0 0-11.712 58.88v258.24c0 10.24 0.768 20.096 2.944 30.336 2.176 9.856 5.12 19.776 9.152 29.248a148.48 148.48 0 0 0 34.752 50.816 155.52 155.52 0 0 0 51.904 33.664c9.536 4.032 19.776 6.976 30.016 9.152 10.24 1.856 20.48 2.944 31.104 2.944a48.896 48.896 0 0 1 34.688 13.888 50.88 50.88 0 0 1 11.008 15.744c2.56 5.824 3.648 12.032 4.032 18.24l0.32 59.648 108.992-77.888c27.84-19.776 58.88-29.632 93.248-29.632h134.976c10.624 0 20.864-1.088 30.72-2.944 10.24-1.856 20.096-4.736 29.632-8.768 9.472-4.032 18.624-8.768 27.392-14.272 8.448-5.504 16.512-12.096 23.808-19.008 7.296-7.296 13.888-14.976 19.712-23.424a145.344 145.344 0 0 0 23.424-55.552c2.176-9.92 2.944-19.776 2.944-30.016V473.216a40.896 40.896 0 0 1 12.8-29.632 44.48 44.48 0 0 1 47.168-9.152c5.12 1.92 9.856 5.12 13.888 9.152a40.896 40.896 0 0 1 12.8 29.632V606.72a233.92 233.92 0 0 1-41.344 132.416 221.184 221.184 0 0 1-30.336 36.16 262.208 262.208 0 0 1-36.928 29.632 229.952 229.952 0 0 1-42.048 21.952 251.712 251.712 0 0 1-93.632 18.304H599.744c-33.984 0-65.088 9.856-92.864 29.632L362.432 977.92a49.92 49.92 0 0 1-29.248 9.536z'></path>
+    <path d='M902.592 188.16h-237.44a42.176 42.176 0 0 0 0 84.352h237.44a42.176 42.176 0 1 0 0-84.352z'></path>
+    <path d='M827.008 116.288a43.2 43.2 0 0 0-86.336 0v228.096a43.2 43.2 0 0 0 86.4 0V116.288z'></path>
+  </SvgIcon>
+);
+
+IconXinduihua.displayName = 'icon-xinduihua';
+
+export default IconXinduihua;
--- a/web/packages/icons/src/index.tsx
+++ b/web/packages/icons/src/index.tsx
@ -40,6 +40,7 @@ export { default as IconChakan } from './IconChakan';
 export { default as IconChangjianwenti } from './IconChangjianwenti';
 export { default as IconChatgpt } from './IconChatgpt';
 export { default as IconChilun } from './IconChilun';
+export { default as IconChuangjian } from './IconChuangjian';
 export { default as IconCohere } from './IconCohere';
 export { default as IconCorrection } from './IconCorrection';
 export { default as IconDJzhinengzhaiyao } from './IconDJzhinengzhaiyao';
@ -71,6 +72,7 @@ export { default as IconDuihao } from './IconDuihao';
 export { default as IconDuihao1 } from './IconDuihao1';
 export { default as IconDuihualishi1 } from './IconDuihualishi1';
 export { default as IconExcel1 } from './IconExcel1';
+export { default as IconFabu } from './IconFabu';
 export { default as IconFankui } from './IconFankui';
 export { default as IconFankuiwenti } from './IconFankuiwenti';
 export { default as IconFasong } from './IconFasong';
@ -216,6 +218,7 @@ export { default as IconXiala1 } from './IconXiala1';
 export { default as IconXialaCopy } from './IconXialaCopy';
 export { default as IconXiaohongshu } from './IconXiaohongshu';
 export { default as IconXiaohongshuHui } from './IconXiaohongshuHui';
+export { default as IconXinduihua } from './IconXinduihua';
 export { default as IconXinference } from './IconXinference';
 export { default as IconXingxing } from './IconXingxing';
 export { default as IconYanzhengma } from './IconYanzhengma';
--- a/web/packages/icons/tsconfig.json
+++ b/web/packages/icons/tsconfig.json
@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    /* Icons 图标库特有配置 */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src", "scripts"],
+  "exclude": ["node_modules", "dist"]
+}
--- a/web/packages/themes/package.json
+++ b/web/packages/themes/package.json
@ -7,7 +7,8 @@
  "types": "./theme.d.ts",
  "exports": {
    ".": "./src/index.ts",
-    "./*": "./src/*.ts"
+    "./*": "./src/*.ts",
+    "./types": "./theme.d.ts"
  },
  "keywords": [],
  "author": "",
--- a/web/packages/themes/src/black.ts
+++ b/web/packages/themes/src/black.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const blackPalette: PaletteOptions = {
--- a/web/packages/themes/src/blue.ts
+++ b/web/packages/themes/src/blue.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const bluePalette: PaletteOptions = {
--- a/web/packages/themes/src/dark.ts
+++ b/web/packages/themes/src/dark.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const darkPalette: PaletteOptions = {
--- a/web/packages/themes/src/darkDeepForest.ts
+++ b/web/packages/themes/src/darkDeepForest.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const darkDeepForestPalette: PaletteOptions = {
--- a/web/packages/themes/src/darkGold.ts
+++ b/web/packages/themes/src/darkGold.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const blackPalette: PaletteOptions = {
--- a/web/packages/themes/src/deepTeal.ts
+++ b/web/packages/themes/src/deepTeal.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const deepTealPalette: PaletteOptions = {
--- a/web/packages/themes/src/electricBlue.ts
+++ b/web/packages/themes/src/electricBlue.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const electricBluePalette: PaletteOptions = {
--- a/web/packages/themes/src/green.ts
+++ b/web/packages/themes/src/green.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const greenPalette: PaletteOptions = {
--- a/web/packages/themes/src/light.ts
+++ b/web/packages/themes/src/light.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const lightPalette: PaletteOptions = {
--- a/web/packages/themes/src/orange.ts
+++ b/web/packages/themes/src/orange.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const orangePalette: PaletteOptions = {
--- a/web/packages/themes/src/purple.ts
+++ b/web/packages/themes/src/purple.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const bluePalette: PaletteOptions = {
--- a/web/packages/themes/src/red.ts
+++ b/web/packages/themes/src/red.ts
@ -1,4 +1,3 @@
-/// <reference path="../theme.d.ts" />
 import { PaletteOptions } from '@mui/material';

 const redPalette: PaletteOptions = {
--- a/web/packages/themes/tsconfig.json
+++ b/web/packages/themes/tsconfig.json
@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    /* Themes 主题库特有配置 */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src", "theme.d.ts"],
+  "exclude": ["node_modules", "dist"]
+}
--- a/web/packages/ui/env.d.ts
+++ b/web/packages/ui/env.d.ts
@ -1,3 +1,5 @@
+/// <reference types="@panda-wiki/themes/types" />
+
 declare module '*.png' {
  const value: string;
  export default value;
--- a/web/packages/ui/src/welcomeHeader/index.tsx
+++ b/web/packages/ui/src/welcomeHeader/index.tsx
@ -25,6 +25,7 @@ const StyledButton = styled(Button)(({ theme }) => ({
  borderRadius: '6px',
  boxShadow: '0px 1px 2px 0px rgba(145,158,171,0.16)',
  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));

 // 检测平台类型
@ -246,12 +247,7 @@ const Header = React.memo(
                        >
                          {ctrlKShortcut}
                        </Box>
-                        <StyledButton
-                          variant='contained'
-                          // @ts-ignore
-                          color='light'
-                          sx={{}}
-                        >
+                        <StyledButton variant='contained'>
                          智能问答
                        </StyledButton>
                      </Stack>
--- a/web/packages/ui/tsconfig.json
+++ b/web/packages/ui/tsconfig.json
@ -1,30 +1,23 @@
 {
+  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
+    /* UI 组件库特有配置 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
-    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
    "moduleDetection": "force",
-    "noEmit": true,
    "jsx": "react-jsx",
    "allowJs": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,

    /* Linting */
-    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
--- a/web/tsconfig.base.json
+++ b/web/tsconfig.base.json
@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    /* 所有项目共享的基础选项 */
+    "incremental": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  }
+}
Author	SHA1	Message	Date
xiaomakuaiz	e4da972c68	Merge `83f6853716` into `45238c3dfa`	2025-11-06 11:43:38 +00:00
xiaomakuaiz	45238c3dfa	Merge pull request #1476 from guanweiwang/feature/qa_modal feat: 优化问答弹窗，完善 ts 配置	2025-11-06 17:43:33 +08:00
Gavan	ea87d5ef7e	pref: 优化 ts 配置	2025-11-06 15:37:56 +08:00
Gavan	b1aefd8cfd	feat: ui调整	2025-11-06 11:46:37 +08:00