feat(web): 🎨 Unified color theme, AntV light/dark theme switching, Antd first-screen style loading. (#1020)

Co-authored-by: 黄振洪 <hzh01509324@alibaba-inc.com>
Co-authored-by: Aralhi <xiaoping0501@gmail.com>

web/pages/_app.tsx

@@ -11,27 +11,26 @@ import '../styles/globals.css';
 import '../nprogress.css';
 import '../app/i18n';
 import { STORAGE_LANG_KEY, STORAGE_THEME_KEY } from '@/utils';
-import { ConfigProvider, theme } from 'antd';
+import { ConfigProvider, MappingAlgorithm, theme } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
 import enUS from 'antd/locale/en_US';
 
 type ThemeMode = ReturnType<typeof useColorScheme>['mode'];
 
-function getDefaultTheme(): ThemeMode {
-  const theme = localStorage.getItem(STORAGE_THEME_KEY) as ThemeMode;
-  if (theme) return theme;
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
+const antdDarkTheme: MappingAlgorithm = (seedToken, mapToken) => {
+  return {
+    ...theme.darkAlgorithm(seedToken, mapToken),
+    colorBgBase: '#232734',
+    colorBorder: '#828282',
+    colorBgContainer: '#232734',
+  };
+};
 
 function CssWrapper({ children }: { children: React.ReactElement }) {
+  const { mode } = useContext(ChatContext);
   const { i18n } = useTranslation();
-  const { mode, setMode } = useColorScheme();
-  const ref = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const themeMode = getDefaultTheme();
-    setMode(themeMode!);
-  }, []);
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (ref?.current && mode) {
@@ -51,14 +50,13 @@ function CssWrapper({ children }: { children: React.ReactElement }) {
   return (
     <div ref={ref}>
       <TopProgressBar />
-      <ChatContextProvider>{children}</ChatContextProvider>
+      {children}
     </div>
   );
 }
 
 function LayoutWrapper({ children }: { children: React.ReactNode }) {
-  const { isMenuExpand } = useContext(ChatContext);
-  const { mode } = useColorScheme();
+  const { isMenuExpand, mode } = useContext(ChatContext);
   const { i18n } = useTranslation();
 
   return (
@@ -66,13 +64,14 @@ function LayoutWrapper({ children }: { children: React.ReactNode }) {
       locale={i18n.language === 'en' ? enUS : zhCN}
       theme={{
         token: {
+          colorPrimary: '#0069FE',
           borderRadius: 4,
         },
-        algorithm: mode === 'dark' ? theme.darkAlgorithm : undefined,
+        algorithm: mode === 'dark' ? antdDarkTheme : undefined,
       }}
     >
       <div className="flex w-screen h-screen overflow-hidden">
-        <div className={classNames('transition-[width]', isMenuExpand ? 'w-64' : 'w-20', 'hidden', 'md:block')}>
+        <div className={classNames('transition-[width]', isMenuExpand ? 'w-60' : 'w-20', 'hidden', 'md:block')}>
           <SideBar />
         </div>
         <div className="flex flex-col flex-1 relative overflow-hidden">{children}</div>
@@ -83,15 +82,13 @@ function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <ThemeProvider theme={joyTheme}>
-      <CssVarsProvider theme={joyTheme} defaultMode="light">
-        <CssWrapper>
-          <LayoutWrapper>
-            <Component {...pageProps} />
-          </LayoutWrapper>
-        </CssWrapper>
-      </CssVarsProvider>
-    </ThemeProvider>
+    <ChatContextProvider>
+      <CssWrapper>
+        <LayoutWrapper>
+          <Component {...pageProps} />
+        </LayoutWrapper>
+      </CssWrapper>
+    </ChatContextProvider>
   );
 }
 

web/pages/_document.tsx

@@ -1,6 +1,39 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
+import { doExtraStyle } from '../genAntdCss';
 
 class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const cache = createCache();
+    let fileName = '';
+    const originalRenderPage = ctx.renderPage;
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => (props) =>
+          (
+            <StyleProvider cache={cache} hashPriority="high">
+              <App {...props} />
+            </StyleProvider>
+          ),
+      });
+    const initialProps = await Document.getInitialProps(ctx);
+
+    fileName = doExtraStyle({
+      cache,
+    });
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {/* 1.2 inject css */}
+          {fileName && <link rel="stylesheet" href={`/${fileName}`} />}
+        </>
+      ),
+    };
+  }
+
   render() {
     return (
       <Html lang="en">

web/pages/chat/[scene]/[id].tsx

@@ -1,27 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { useRouter } from 'next/router';
-import { ChatContext } from '@/app/chat-context';
-import dynamic from 'next/dynamic';
-
-const DbEditor = dynamic(() => import('@/components/chat/db-editor'), { ssr: false });
-const ChatContainer = dynamic(() => import('@/components/chat/chat-container'), { ssr: false });
-
-function Chat() {
-  const {
-    query: { id, scene },
-  } = useRouter();
-  const { isContract, setIsContract, setIsMenuExpand } = useContext(ChatContext);
-
-  useEffect(() => {
-    // 仅初始化执行，防止dashboard页面无法切换状态
-    setIsMenuExpand(scene !== 'chat_dashboard');
-    // 路由变了要取消Editor模式，再进来是默认的Preview模式
-    if (id && scene) {
-      setIsContract(false);
-    }
-  }, [id, scene]);
-
-  return <>{isContract ? <DbEditor /> : <ChatContainer />}</>;
-}
-
-export default Chat;

web/pages/index.tsx

@@ -12,7 +12,7 @@ import CompletionInput from '@/components/common/completion-input';
 import { useTranslation } from 'react-i18next';
 import { STORAGE_INIT_MESSAGE_KET } from '@/utils';
 import Icon from '@ant-design/icons/lib/components/Icon';
-import { ColorfulDB, ColorfulPlugin, ColorfulDashboard, ColorfulData, ColorfulExcel, ColorfulDoc } from '@/components/icons';
+import { ColorfulDB, ColorfulPlugin, ColorfulDashboard, ColorfulData, ColorfulExcel, ColorfulDoc, ColorfulChat } from '@/components/icons';
 import classNames from 'classnames';
 
 const Home: NextPage = () => {
@@ -51,17 +51,19 @@ const Home: NextPage = () => {
   function renderSceneIcon(scene: string) {
     switch (scene) {
       case 'chat_knowledge':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulDoc} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulDoc} />;
       case 'chat_with_db_execute':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulData} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulData} />;
       case 'chat_excel':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulExcel} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulExcel} />;
       case 'chat_with_db_qa':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulDB} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulDB} />;
       case 'chat_dashboard':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulDashboard} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulDashboard} />;
       case 'chat_agent':
-        return <Icon className="w-10 h-10 mr-4 p-1 bg-white rounded" component={ColorfulPlugin} />;
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulPlugin} />;
+      case 'dbgpt_chat':
+        return <Icon className="w-10 h-10 mr-4 p-1" component={ColorfulChat} />;
       default:
         return null;
     }
@@ -93,7 +95,7 @@ const Home: NextPage = () => {
               >
                 <div
                   className={classNames(
-                    'flex flex-row justify-center min-h-min border bg-slate-50 border-gray-300 dark:bg-black bg-opacity-50 border-opacity-50 text-gray-950 dark:text-white rounded p-4 cursor-pointer',
+                    'flex flex-row justify-center h-[102px] min-h-min bg-white dark:bg-[#232734] dark:text-white rounded p-4 cursor-pointer hover:-translate-y-1 transition-[transform_shadow] duration-300 hover:shadow-[0_14px_20px_-10px_rgba(100,100,100,.1)]',
                     { 'grayscale !cursor-no-drop': scene.show_disable },
                   )}
                 >

web/pages/knowledge/chunk/index.tsx

@@ -48,7 +48,7 @@ function ChunkList() {
   }, [id, spaceName]);
 
   return (
-    <div className="h-full overflow-y-scroll relative">
+    <div className="h-full overflow-y-scroll relative px-2">
       <Breadcrumb
         className="m-6"
         items={[
@@ -71,6 +71,7 @@ function ChunkList() {
               return (
                 <Card
                   key={chunk.id}
+                  className="mt-2"
                   title={
                     <>
                       <DocIcon type={chunk.doc_type} />

web/pages/knowledge/index.tsx

@@ -59,7 +59,7 @@ const Knowledge = () => {
   }
 
   return (
-    <div className="bg-[#FAFAFA] dark:bg-[#212121] w-full h-full">
+    <div className="bg-[#FAFAFA] dark:bg-transparent w-full h-full">
       <div className="page-body p-4 md:p-6 h-full overflow-auto">
         <Button
           type="primary"
@@ -71,7 +71,7 @@ const Knowledge = () => {
         >
           Create
         </Button>
-        <div className="flex flex-wrap mt-4">
+        <div className="flex flex-wrap mt-4 gap-4">
           {spaceList?.map((space: ISpace) => (
             <SpaceCard key={space.id} space={space} onAddDoc={onAddDoc} getSpaces={getSpaces} />
           ))}