merge

components/layout/side-bar.tsx

@@ -69,13 +69,15 @@ function SideBar() {
         flex flex-col 
         justify-between
         h-screen px-4
-        pt-4 bg-bar
-        dark:bg-[#232734]
+        pt-4 
+        bg-[#fff]
+        
         animate-fade
-        animate-duration-300`}
+        animate-duration-300`
+      }
     >
       <div>
-        <Link href='/' className='flex items-center justify-center p-2 pb-4'>
+        <Link href='/' className=' flex items-center justify-center p-2 pb-4'>
           <Image src={'/LOGO_PVC-removebg-preview.png'} alt='PVC-CHAT' width={40} height={40} />
           <span className={'ml-2 text-lg font-bold'}>PVC-GPT</span>
         </Link>
@@ -89,17 +91,19 @@ function SideBar() {
                 color: item.isActive ? '#fff' : '',
               }}
               className={cls(
-                'flex items-center w-full h-12 px-4 cursor-pointer hover:bg-[#fff] dark:hover:bg-theme-dark hover:rounded-xl',
+                'flex items-center w-full h-12 px-4 cursor-pointer  dark:hover:bg-theme-dark hover:rounded-xl',
                 {
                   'rounded-xl': item.isActive,
-                },
-                'hover:text-[#3d8dfc]',
+                  'hover:bg-[#d8d8d8]': !item.isActive,
+                  'hover:text-[#3d8dfc]': !item.isActive,
+                }
               )}
-            >
-              <div className='mr-3'>{item.icon}</div>
-              <span className='text-sm'>{item.name as any}</span>
-            </Link>
-          ))}
+              >
+                <div className='mr-3'>{item.icon}</div>
+                <span className='text-sm'>{(item.name as any)}</span>
+              </Link>
+            )
+          )}
         </div>
       </div>
       <div className='mb-4'>

new-components/chat/content/ChatContent.tsx

@@ -19,7 +19,7 @@ const UserIcon: React.FC = () => {
   if (!user.avatar_url) {
     return (
       <div className='flex items-center justify-center w-8 h-8 rounded-full bg-gradient-to-tr from-[#31afff] to-[#1677ff] text-xs text-white'>
-        {user?.nick_name}
+        PSV 
       </div>
     );
   }
@@ -137,7 +137,7 @@ const ChatContent: React.FC<{
 
   const extraMarkdownComponents = useMemo<MarkdownComponent>(
     () => ({
-      'custom-view'({ children }) {
+                              'custom-view'({ children }) {
         const index = +children.toString();
         if (!cachePluginContext[index]) {
           return children;

new-components/chat/sider/ChatSider.tsx

@@ -75,9 +75,9 @@ const MenuItem: React.FC<{
   return (
     <Flex
       align='center'
-      className={`group/item w-full h-12 p-3 rounded-lg  hover:bg-white dark:hover:bg-theme-dark cursor-pointer mb-2 relative ${
-        active ? 'bg-white dark:bg-theme-dark bg-opacity-100' : ''
-      }`}
+      className={`group/item w-full h-12 p-3 rounded-lg   dark:hover:bg-theme-dark cursor-pointer mb-2 relative ${
+        active ? 'bg-[#7288FA] dark:bg-theme-dark bg-opacity-100' : ''
+        } ${ active ?'': 'hover:text-[#3d8dfc]'} ${ active ?'': 'hover:bg-[#d8d8d8]'}`}
       onClick={() => {
         if (historyLoading) {
           return;

new-components/common/blurredCard/index.tsx

@@ -21,6 +21,7 @@ const BlurredCard: React.FC<{
   className?: string;
   scene?: string;
   code?: string;
+  style:any
 }> = ({
   RightTop,
   Tags,
@@ -34,6 +35,7 @@ const BlurredCard: React.FC<{
   className,
   scene,
   code,
+  style = {}
 }) => {
   if (typeof description === 'string') {
     description = (
@@ -44,18 +46,18 @@ const BlurredCard: React.FC<{
   }
 
   return (
-    <div className={cls('flex justify-center mt-6 relative group w-1/3 px-2 mb-6', className)}
-      style={{ backgroundColor: '#f0f!important' }}
+    <div className={cls('flex justify-center mt-6 relative group w-1/4 px-2 mb-6', className)}
+      style={{backgroundColor: '#f0f!important' }}
     >
       <div
         onClick={onClick}
-        className='backdrop-filter backdrop-blur-lg cursor-pointer hover:bg-slate-200 bg-white bg-opacity-70 border-2 border-white rounded-lg shadow p-4 relative w-full h-full dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
+        className='backdrop-filter backdrop-blur-lg cursor-pointer  hover:bg-slate-200 bg-white bg-opacity-70 border-2 border-white rounded-[20px] shadow p-4 relative w-full h-full dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
       >
-        <div className='flex items-end relative bottom-8 justify-between w-full'
-        style={{ backgroundColor: '#f0f!important' }}
+        <div className='flex items-start relative  justify-between w-full mb-6'
+          style={{ ...style, backgroundColor: '#f0f!important' }}
         >
-          <div className='flex items-end gap-4 w-11/12  flex-1'>
-            <div className='bg-white rounded-lg shadow-sm w-14 h-14 flex items-center p-3'>
+          <div className='flex items-start gap-4 w-11/12  flex-1'>
+            <div className='rounded-lg shadow-sm w-20 h-20 flex items-center p-3'>
               {scene ? (
                 <AppDefaultIcon scene={scene} width={14} height={14} />
               ) : (
@@ -87,6 +89,7 @@ const BlurredCard: React.FC<{
                   {name}
                 </span>
               )}
+              <div className='mt-4'>{description}</div>
             </div>
           </div>
           <span
@@ -101,9 +104,10 @@ const BlurredCard: React.FC<{
             {RightTop}
           </span>
         </div>
-        {description}
+       
         <div className='relative bottom-2'>{Tags}</div>
-        <div className='flex justify-between items-center'>
+
+        <div className='flex justify-between items-end'>
           <div>{LeftBottom}</div>
           <div>{RightBottom}</div>
         </div>

new-components/layout/UserBar.tsx

@@ -24,9 +24,11 @@ function UserBar({ onlyAvatar = false }) {
       <Link
         href='/chat'
         className={cls(
-          'flex items-center w-full h-12 px-4 cursor-pointer hover:bg-[#F1F5F9] dark:hover:bg-theme-dark hover:rounded-xl',
+          'flex items-center w-full h-12 px-4 cursor-pointer  dark:hover:bg-theme-dark hover:rounded-xl',
           {
-            'bg-white rounded-xl dark:bg-black': pathname.startsWith('/chat'),
+            'bg-[#7288FA] rounded-xl dark:bg-black text-[#fff]': pathname.startsWith('/chat'),
+            'hover:bg-[#d8d8d8]': !pathname.startsWith('/chat'),
+            'hover:text-[#3d8dfc]': !pathname.startsWith('/chat'),
           },
         )}
         key='/chat'

package.json

@@ -11,23 +11,23 @@
   "license": "ISC",
   "repository": "https://github.com/eosphoros-ai/DB-GPT-Web.git",
   "scripts": {
-    "start": "NODE_OPTIONS=--max_old_space_size=8192 next start",
-    "dev": "set NODE_OPTIONS=--max_old_space_size=8192 && next dev",
+    "start": "set NODE_OPTIONS=--max_old_space_size=4096 && next start",
+    "dev": "set NODE_OPTIONS=--max_old_space_size=4096 && next dev",
     "build": "NODE_OPTIONS=--max_old_space_size=8192 next build",
     "build:prod": "APP_ENV=prod  NODE_OPTIONS=--max_old_space_size=8192 next build",
     "lint": "eslint '**/*.{ts,tsx}' --fix",
     "format": "prettier --write '**/*.{ts,tsx}'",
     "export": "next export",
     "compile": " NODE_OPTIONS=--max_old_space_size=8192 next build && next export"
-  }, 
+  },
   "dependencies": {
     "@ant-design/cssinjs": "^1.18.4",
     "@ant-design/icons": "^5.2.5",
     "@antv/algorithm": "^0.1.26",
-    "@antv/ava": "3.5.0-alpha.4", 
+    "@antv/ava": "3.5.0-alpha.4",
     "@antv/g2": "^5.1.8",
-    "@antv/g6": "^5.0.17",
     "@antv/gpt-vis": "^0.0.5",
+    "@antv/g6": "^5.0.17",
     "@antv/graphin": "^3.0.2",
     "@antv/s2": "^1.51.2",
     "@berryv/g2-react": "^0.1.0",
@@ -47,13 +47,13 @@
     "classnames": "^2.3.2",
     "cookies-next": "^4.0.0",
     "copy-to-clipboard": "^3.3.3",
-    "cytoscape": "^3.29.2",
-    "cytoscape-euler": "^1.2.2",
-    "dayjs": "^1.11.12",
-    "eslint-plugin-prettier": "^5.2.1",
     "framer-motion": "^10.16.4",
     "google-auth-library": "^9.2.0",
     "google-one-tap": "^1.0.6",
+    "cytoscape": "^3.29.2",
+    "cytoscape-euler": "^1.2.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "dayjs": "^1.11.12",
     "i18next": "^23.4.5",
     "iron-session": "^6.3.1",
     "lodash": "^4.17.21",
@@ -62,7 +62,7 @@
     "monaco-editor": ">=0.31.0",
     "multer": "^1.4.5-lts.1",
     "mysql2": "^3.6.2",
-    "next": "^13.4.7",
+    "next": "13.4.7",
     "next-auth": "^4.20.1",
     "next-connect": "^1.0.0-next.4",
     "next-transpile-modules": "^10.0.1",
@@ -133,4 +133,4 @@
     "d3-force": "2",
     "d3-geo": "2"
   }
-}
+}

pages/construct/app/index.tsx

@@ -14,7 +14,7 @@ import ConstructLayout from '@/new-components/layout/Construct';
 import { IApp } from '@/types/app';
 import { BulbOutlined, DingdingOutlined, PlusOutlined, SearchOutlined, WarningOutlined } from '@ant-design/icons';
 import { useDebounceFn, useRequest } from 'ahooks';
-import { App, Button, Input, Modal, Pagination, Popover, Segmented, SegmentedProps, Select, Spin, Tag } from 'antd';
+import { App, Avatar, Button, Input, Modal, Pagination, Popover, Segmented, SegmentedProps, Select, Spin, Tag } from 'antd';
 import copy from 'copy-to-clipboard';
 import moment from 'moment';
 import { useRouter } from 'next/router';
@@ -290,148 +290,162 @@ export default function AppContent() {
   return (
     <ConstructLayout>
       <Spin spinning={spinning}>
-        <div className='h-screen w-full p-4 md:p-6 overflow-y-auto'>
-          <div className='flex justify-between items-center mb-6'>
-            <div className='flex items-center gap-4'>
+        <div className='h-screen w-full px-4 bg-[#fff] overflow-y-auto mt-0'>
+          <div className='mt-2 rounded-[10px] flex h-16 justify-between  items-center px-2'>
+            <Input
+              variant='filled'
+              prefix={<SearchOutlined />}
+              placeholder={t('please_enter_the_keywords')}
+              onChange={onSearch}
+              onPressEnter={onSearch}
+              allowClear
+              className='w-[400px] h-[40px] 
+              border-1 border-[#d1d1d1] 
+              backdrop-filter 
+              backdrop-blur-lg 
+              dark:border-[#6f7f95] 
+              dark:bg-[#6f7f95] 
+              dark:bg-opacity-60'
+            />
+            <span className='flex gap-2 items-center'>
+              <Avatar className='bg-gradient-to-tr from-[#31afff] to-[#1677ff] cursor-pointer'>
+
+              </Avatar>
+              <span
+              >
+                admin
+              </span>
+            </span>
+          </div>
+          <div className='rounded-[10px]  h-full mt-4  relative bg-slate-200 p-4 border-1 mb-2'>
+            <div className='flex justify-between items-center'>
               <Segmented
                 className='backdrop-filter h-10 backdrop-blur-lg bg-white bg-opacity-30 border border-white rounded-lg shadow p-1 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
                 options={items as any}
                 onChange={handleTabChange}
                 value={activeKey}
               />
-              <Input
-                variant='filled'
-                value={filterValue}
-                prefix={<SearchOutlined />}
-                placeholder={t('please_enter_the_keywords')}
-                onChange={onSearch}
-                onPressEnter={onSearch}
-                allowClear
-                className='w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
-              />
+              <Button
+                className='border-none text-white bg-button-gradient flex items-center'
+                onClick={handleCreate}
+              >
+                {'创建应用'}
+              </Button>
             </div>
-
-            <Button
-              className='border-none text-white bg-button-gradient flex items-center'
-              icon={<PlusOutlined className='text-base' />}
-              onClick={handleCreate}
-            >
-              {t('create_app')}
-            </Button>
-          </div>
-          <div className=' w-full flex flex-wrap pb-12 mx-[-8px]'>
-            {apps.map(item => {
-              return (
-                <BlurredCard
-                  key={item.app_code}
-                  code={item.app_code}
-                  name={item.app_name}
-                  description={item.app_describe}
-                  RightTop={
-                    <div className='flex items-center gap-2'>
-                      <Popover
-                        content={
-                          <div className='flex flex-col gap-2'>
-                            <div className='flex items-center gap-2'>
-                              <BulbOutlined
-                                style={{
-                                  color: 'rgb(252,204,96)',
-                                  fontSize: 12,
-                                }}
-                              />
-                              <span className='text-sm text-gray-500'>{t('copy_url')}</span>
-                            </div>
-                            <div className='flex items-center gap-2'>
-                              <BulbOutlined
-                                style={{
-                                  color: 'rgb(252,204,96)',
-                                  fontSize: 12,
-                                }}
-                              />
-                              <span className='text-sm text-gray-500'>{t('double_click_open')}</span>
-                            </div>
-                          </div>
-                        }
-                      >
-                        <DingdingOutlined
-                          className='cursor-pointer text-[#0069fe] hover:bg-white hover:dark:bg-black p-2 rounded-md'
-                          onClick={() => shareDingding(item)}
-                          onDoubleClick={() => openDingding(item)}
-                        />
-                      </Popover>
-                      <InnerDropdown
-                        menu={{
-                          items: [
-                            {
-                              key: 'publish',
-                              label: (
-                                <span
-                                  onClick={e => {
-                                    e.stopPropagation();
-                                    operate(item);
+            <div className='w-full flex flex-wrap pb-12 mx-[-8px]'>
+              {apps.map(item => {
+                return (
+                  <BlurredCard
+                    key={item.app_code}
+                    code={item.app_code}
+                    name={item.app_name}
+                    description={item.app_describe}
+                    RightTop={
+                      <div className='flex items-center gap-2'>
+                        <Popover
+                          content={
+                            <div className='flex flex-col gap-2'>
+                              <div className='flex items-center gap-2'>
+                                <BulbOutlined
+                                  style={{
+                                    color: 'rgb(252,204,96)',
+                                    fontSize: 12,
                                   }}
-                                >
-                                  {item.published === 'true' ? t('unpublish') : t('publish')}
-                                </span>
-                              ),
-                            },
-                            {
-                              key: 'del',
-                              label: (
-                                <span
-                                  className='text-red-400'
-                                  onClick={e => {
-                                    e.stopPropagation();
-                                    showDeleteConfirm(item);
+                                />
+                                <span className='text-sm text-gray-500'>{t('copy_url')}</span>
+                              </div>
+                              <div className='flex items-center gap-2'>
+                                <BulbOutlined
+                                  style={{
+                                    color: 'rgb(252,204,96)',
+                                    fontSize: 12,
                                   }}
-                                >
-                                  {t('Delete')}
-                                </span>
-                              ),
-                            },
-                          ],
+                                />
+                                <span className='text-sm text-gray-500'>{t('double_click_open')}</span>
+                              </div>
+                            </div>
+                          }
+                        >
+                          <DingdingOutlined
+                            className='cursor-pointer text-[#0069fe] hover:bg-white hover:dark:bg-black p-2 rounded-md'
+                            onClick={() => shareDingding(item)}
+                            onDoubleClick={() => openDingding(item)}
+                          />
+                        </Popover>
+                        <InnerDropdown
+                          menu={{
+                            items: [
+                              {
+                                key: 'publish',
+                                label: (
+                                  <span
+                                    onClick={e => {
+                                      e.stopPropagation();
+                                      operate(item);
+                                    }}
+                                  >
+                                    {item.published === 'true' ? t('unpublish') : t('publish')}
+                                  </span>
+                                ),
+                              },
+                              {
+                                key: 'del',
+                                label: (
+                                  <span
+                                    className='text-red-400'
+                                    onClick={e => {
+                                      e.stopPropagation();
+                                      showDeleteConfirm(item);
+                                    }}
+                                  >
+                                    {t('Delete')}
+                                  </span>
+                                ),
+                              },
+                            ],
+                          }}
+                        />
+                      </div>
+                    }
+                    Tags={
+                      <div>
+                        <Tag>{languageMap[item.language]}</Tag>
+                        <Tag>{item.team_mode}</Tag>
+                        <Tag>{item.published === 'true' ? t('published') : t('unpublished')}</Tag>
+                      </div>
+                    }
+                    rightTopHover={false}
+                    LeftBottom={
+                      <div className='flex gap-2'>
+                        <span>{item.owner_name}</span>
+                        <span>•</span>
+                        {item?.updated_at && <span>{moment(item?.updated_at).fromNow() + ' ' + t('update')}</span>}
+                      </div>
+                    }
+                    RightBottom={
+                      <ChatButton
+                        onClick={() => {
+                          handleChat(item);
                         }}
                       />
-                    </div>
-                  }
-                  Tags={
-                    <div>
-                      <Tag>{languageMap[item.language]}</Tag>
-                      <Tag>{item.team_mode}</Tag>
-                      <Tag>{item.published === 'true' ? t('published') : t('unpublished')}</Tag>
-                    </div>
-                  }
-                  rightTopHover={false}
-                  LeftBottom={
-                    <div className='flex gap-2'>
-                      <span>{item.owner_name}</span>
-                      <span>•</span>
-                      {item?.updated_at && <span>{moment(item?.updated_at).fromNow() + ' ' + t('update')}</span>}
-                    </div>
-                  }
-                  RightBottom={
-                    <ChatButton
-                      onClick={() => {
-                        handleChat(item);
-                      }}
-                    />
-                  }
-                  onClick={() => {
-                    handleEdit(item);
+                    }
+                    onClick={() => {
+                      handleEdit(item);
+                    }}
+                    scene={item?.team_context?.chat_scene || 'chat_agent'}
+                  />
+                );
+              })}
+              <div className='w-full flex justify-end shrink-0 pb-12'>
+                <Pagination
+                  total={totalRef.current?.total_count || 0}
+                  pageSize={12}
+                  current={totalRef.current?.current_page}
+                  onChange={async (page, _page_size) => {
+                    await initData({ page });
                   }}
-                  scene={item?.team_context?.chat_scene || 'chat_agent'}
                 />
-              );
-            })}
-            <div className='w-full flex justify-end shrink-0 pb-12'>
-              <Pagination
-                total={totalRef.current?.total_count || 0}
-                pageSize={12}
-                current={totalRef.current?.current_page}
-                onChange={async (page, _page_size) => {
-                  await initData({ page });
-                }}
-              />
+              </div>
             </div>
           </div>
           {open && (

pages/construct/database.tsx

@@ -5,9 +5,9 @@ import FormDialog from '@/components/database/form-dialog';
 import ConstructLayout from '@/new-components/layout/Construct';
 import { DBOption, DBType, DbListResponse, DbSupportTypeResponse } from '@/types/db';
 import { dbMapper } from '@/utils';
-import { DeleteFilled, EditFilled, PlusOutlined } from '@ant-design/icons';
+import { DeleteFilled, EditFilled, PlusOutlined, SearchOutlined } from '@ant-design/icons';
 import { useAsyncEffect } from 'ahooks';
-import { Badge, Button, Card, Drawer, Empty, Modal, message } from 'antd';
+import { Avatar, Badge, Button, Card, Drawer, Empty, Input, Modal, message } from 'antd';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -149,8 +149,32 @@ function Database() {
 
   return (
     <ConstructLayout>
-      <div className='relative min-h-full overflow-y-auto px-6 max-h-[90vh]'>
+      <div className='relative min-h-full overflow-y-auto px-6 max-h-[90vh] bg-[#fff]'>
         <MuiLoading visible={loading} />
+        <div className='mt-2 rounded-[10px] flex h-16 justify-between  items-center'>
+          <Input
+            variant='filled'
+            prefix={<SearchOutlined />}
+            placeholder={t('please_enter_the_keywords')}
+            allowClear
+            className='w-[400px] h-[40px] 
+              border-1 border-[#d1d1d1]
+              backdrop-filter 
+              backdrop-blur-lg 
+              dark:border-[#6f7f95] 
+              dark:bg-[#6f7f95] 
+              dark:bg-opacity-60'
+          />
+          <span className='flex gap-2 items-center'>
+            <Avatar className='bg-gradient-to-tr from-[#31afff] to-[#1677ff] cursor-pointer'>
+
+            </Avatar>
+            <span
+            >
+              admin
+            </span>
+          </span>
+        </div>
         <div className='flex justify-between items-center mb-6'>
           <div className='flex items-center gap-4'>
             {/* <Input 
@@ -167,17 +191,16 @@ function Database() {
           <div className='flex items-center gap-4'>
             <Button
               className='border-none text-white bg-button-gradient'
-              icon={<PlusOutlined />}
               onClick={() => {
                 setModal({ open: true });
               }}
             >
-              {t('Add_Datasource')}
+              添加数据源
             </Button>
           </div>
         </div>
 
-        <div className='flex flex-wrap mx-[-8px] gap-2 md:gap-4'>
+        <div className='flex flex-wrap mx-[-8px] gap-2 md:gap-4 rounded-[10px] w-full h-full  pb-12  bg-slate-200 p-4 border-1 mb-2 '>
           {dbTypeList.map(item => {
             return (
               <Badge key={item.value} count={dbListByType[item.value]?.length} className='min-h-fit'>

pages/construct/flow/index.tsx

@@ -4,9 +4,9 @@ import MyEmpty from '@/components/common/MyEmpty';
 import BlurredCard, { ChatButton, InnerDropdown } from '@/new-components/common/blurredCard';
 import ConstructLayout from '@/new-components/layout/Construct';
 import { IFlow, IFlowUpdateParam } from '@/types/flow';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
-import { Button, Checkbox, Form, Input, Modal, Pagination, Popconfirm, Spin, Tag, message } from 'antd';
+import { Avatar, Button, Checkbox, Form, Input, Modal, Pagination, Popconfirm, Spin, Tag, message } from 'antd';
 import { t } from 'i18next';
 import moment from 'moment';
 import { useRouter } from 'next/router';
@@ -150,33 +150,43 @@ function Flow() {
   return (
     <ConstructLayout>
       <Spin spinning={loading}>
-        <div className='relative h-screen w-full p-4 md:p-6 overflow-y-auto' ref={scrollRef}>
-          <div className='flex justify-between items-center mb-6'>
-            <div className='flex items-center gap-4'>
-              {/* <Input
-              variant="filled"
+        <div className='relative h-screen bg-[#fff] pt-0 w-full p-4 overflow-y-auto' ref={scrollRef} >
+          <div className='mt-2 rounded-[10px] flex h-16 justify-between  items-center '>
+            <Input
+              variant='filled'
               prefix={<SearchOutlined />}
               placeholder={t('please_enter_the_keywords')}
-              // onChange={onSearch}
-              // onPressEnter={onSearch}
               allowClear
-              className="w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
-            /> */}
-            </div>
+              className='w-[400px] h-[40px] 
+              border-1 border-[#f1f1f1]
+              backdrop-filter 
+              backdrop-blur-lg 
+              dark:border-[#6f7f95] 
+              dark:bg-[#6f7f95] 
+              dark:bg-opacity-60'
+            />
+            <span className='flex gap-2 items-center'>
+              <Avatar className='bg-gradient-to-tr from-[#31afff] to-[#1677ff] cursor-pointer'>
 
-            <div className='flex items-center gap-4'>
-              <Button
-                className='border-none text-white bg-button-gradient'
-                icon={<PlusOutlined />}
-                onClick={() => {
-                  router.push('/construct/flow/canvas');
-                }}
+              </Avatar>
+              <span
               >
-                {t('create_flow')}
-              </Button>
-            </div>
+                admin
+              </span>
+            </span>
+          </div>
+          <div className='flex items-center gap-4 justify-between'>
+            <span></span>
+            <Button
+              className='border-none text-white bg-button-gradient'
+              onClick={() => {
+                router.push('/construct/flow/canvas');
+              }}
+            >
+              创建工作流
+            </Button>
           </div>
-          <div className='flex flex-wrap mx-[-8px] pb-12 justify-start items-stretch'>
+          <div className='rounded-[10px] flex flex-col h-full mt-4  relative bg-slate-200 p-4 border-1 mb-2'>
             {flowList.map(flow => (
               <BlurredCard
                 description={flow.description}

pages/construct/knowledge/index.tsx

@@ -9,7 +9,7 @@ import BlurredCard, { ChatButton, InnerDropdown } from '@/new-components/common/
 import ConstructLayout from '@/new-components/layout/Construct';
 import { File, ISpace, IStorage, StepChangeParams } from '@/types/knowledge';
 import { PlusOutlined, ReadOutlined, SearchOutlined, WarningOutlined } from '@ant-design/icons';
-import { Button, Input, Modal, Spin, Steps, Tag } from 'antd';
+import { Avatar, Button, Input, Modal, Spin, Steps, Tag } from 'antd';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
 import moment from 'moment';
@@ -45,7 +45,7 @@ const Knowledge = () => {
     setLoading(true);
     const [_, data] = await apiInterceptors(getSpaceList({ ...params }));
     setLoading(false);
-    setSpaceList(data);
+    setSpaceList([...data, ...data, ...data, ...data, ...data, ...data, ...data,]);
   }
 
   async function getSpaceConfigs() {
@@ -127,45 +127,51 @@ const Knowledge = () => {
 
   return (
     <ConstructLayout>
-      <Spin spinning={loading}>
-        <div className='page-body p-4 md:p-6 h-[90vh] overflow-auto'>
-          {/* <Button
-            type="primary"
-            className="flex items-center"
-            icon={<PlusOutlined />}
-            onClick={() => {
-              setIsAddShow(true);
-            }}
-          >
-            Create
-          </Button> */}
+        <div className='page-body h-[90vh] overflow-aut mr-8 bg-[#fff]'>
+          <div className='mt-2 rounded-[10px] flex h-16 justify-between  items-center px-4'>
+            <Input
+              variant='filled'
+              prefix={<SearchOutlined />}
+              placeholder={t('please_enter_the_keywords')}
+              allowClear
+              className='w-[400px] h-[40px] 
+              border-1 border-[#d1d1d1] 
+              backdrop-filter 
+              backdrop-blur-lg 
+              dark:border-[#6f7f95] 
+              dark:bg-[#6f7f95] 
+              dark:bg-opacity-60'
+            />
+            <span className='flex gap-2 items-center'>
+              <Avatar className='bg-gradient-to-tr from-[#31afff] to-[#1677ff] cursor-pointer'>
+
+              </Avatar>
+              <span
+              >
+                admin
+              </span>
+            </span>
+          </div>
           <div className='flex justify-between items-center mb-6'>
             <div className='flex items-center gap-4'>
-              <Input
-                variant='filled'
-                prefix={<SearchOutlined />}
-                placeholder={t('please_enter_the_keywords')}
-                onChange={debounce(onSearch, 300)}
-                allowClear
-                className='w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
-              />
+             
             </div>
 
             <div className='flex items-center gap-4'>
               <Button
                 className='border-none text-white bg-button-gradient'
-                icon={<PlusOutlined />}
                 onClick={() => {
                   setIsAddShow(true);
                 }}
               >
-                {t('create_knowledge')}
+                创建知识库
               </Button>
             </div>
           </div>
-          <div className='flex flex-wrap mt-4 mx-[-8px]'>
+        <div className='rounded-[10px]  mx-4 w-full mr-14 flex flex-wrap pb-12  bg-slate-200 p-4 border-1 mb-2'>
             {spaceList?.map((space: ISpace) => (
               <BlurredCard
+                style={{ height: '200px!important'}}
                 onClick={() => {
                   setCurrentSpace(space);
                   setIsPanelShow(true);
@@ -280,7 +286,6 @@ const Knowledge = () => {
             />
           )}
         </Modal>
-      </Spin>
     </ConstructLayout>
   );
 };

pages/construct/models/index.tsx

@@ -4,8 +4,8 @@ import BlurredCard from '@/new-components/common/blurredCard';
 import ConstructLayout from '@/new-components/layout/Construct';
 import { IModelData } from '@/types/model';
 import { MODEL_ICON_DICT } from '@/utils/constants';
-import { PlusOutlined } from '@ant-design/icons';
-import { Button, Modal, Tag } from 'antd';
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import { Avatar, Button, Input, Modal, Tag } from 'antd';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +18,9 @@ function Models() {
 
   async function getModels() {
     const [, res] = await apiInterceptors(getModelList());
-    setModels(res ?? []);
+    if (res) {
+      setModels([...res, ...res, ...res, ...res, ...res]);
+    }
   }
 
   // TODO: delete unuesed function
@@ -69,34 +71,46 @@ function Models() {
 
   return (
     <ConstructLayout>
-      <div className='px-6 overflow-y-auto'>
-        <div className='flex justify-between items-center mb-6'>
-          <div className='flex items-center gap-4'>
-            {/* <Input
-              variant="filled"
-              prefix={<SearchOutlined />}
-              placeholder={t('please_enter_the_keywords')}
-              onChange={onSearch}
-              onPressEnter={onSearch}
-              allowClear
-              className="w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
-            /> */}
-          </div>
+      <div className='px-6 bg-[#fff]'>
+        <div className='mt-2 rounded-[10px] flex h-16 justify-between  items-center'>
+          <Input
+            variant='filled'
+            prefix={<SearchOutlined />}
+            placeholder={t('please_enter_the_keywords')}
+            allowClear
+            className='w-[400px] h-[40px] 
+              border-1 border-[#f1f1f1]
+              backdrop-filter 
+              backdrop-blur-lg 
+              dark:border-[#6f7f95] 
+              dark:bg-[#6f7f95] 
+              dark:bg-opacity-60'
+          />
+          <span className='flex gap-2 items-center'>
+            <Avatar className='bg-gradient-to-tr from-[#31afff] to-[#1677ff] cursor-pointer'>
 
-          <div className='flex items-center gap-4'>
+            </Avatar>
+            <span
+            >
+              admin
+            </span>
+          </span>
+        </div>
+        <div className='flex justify-between items-center mb-6'>
+          <span></span>
+          <div className='flex items-center gap-4 mt-4'>
             <Button
               className='border-none text-white bg-button-gradient'
-              icon={<PlusOutlined />}
               onClick={() => {
                 setIsModalOpen(true);
               }}
             >
-              {t('create_model')}
+              创建模型
             </Button>
           </div>
         </div>
 
-        <div className='flex flex-wrap mx-[-8px] '>
+        <div className='rounded-[10px] w-full h-full flex flex-wrap pb-12 mx-[-8px] bg-slate-200 p-4 border-1 mb-2 '>
           {models.map(item => (
             <BlurredCard
               logo={returnLogo(item.model_name)}

pages/construct/prompt/index.tsx

@@ -153,7 +153,7 @@ const Prompt = () => {
         <div className='flex justify-between items-center mb-6'>
           <div className='flex items-center gap-4'>
             <Segmented
-              className='backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 border-2 border-white rounded-lg shadow p-1 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
+              className='backdrop-filter backdrop-blur-lg bg-opacity-30  dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
               options={items}
               onChange={type => {
                 setPromptType(type as string);
@@ -176,10 +176,8 @@ const Prompt = () => {
             )} */}
             <Button
               className='border-none text-white bg-button-gradient h-full'
-              onClick={handleAddBtn}
-              icon={<PlusOutlined />}
             >
-              {t('Add')} Prompts
+              新增 Prompts
             </Button>
           </div>
         </div>

pages/index.tsx

@@ -1,5 +1,5 @@
 import { apiInterceptors, collectApp, getAppList, newDialogue, recommendApps, unCollectApp } from '@/client/api';
-import { PlusOutlined, SearchOutlined, StarFilled, StarOutlined } from '@ant-design/icons';
+import { SearchOutlined, StarFilled, StarOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 import type { SegmentedProps } from 'antd';
 import { Avatar, Button, ConfigProvider, Input, Segmented, Spin, message } from 'antd';
@@ -290,10 +290,10 @@ const Playground: NextPage = () => {
   }, []);
   return (
     <div
-      className='flex flex-col h-full w-full backdrop-filter backdrop-blur dark:bg-gradient-dark bg-gradient-light  px-2 '
+      className='flex flex-col h-full w-full backdrop-filter backdrop-blur bg-[#fff] bg-gradient-light  px-2 '
       id='home-container'
     >
-      <div className='flex h-16 justify-between'>
+      <div className='mt-2 rounded-[10px] flex h-16 justify-between  items-center px-2'>
         <Input
           variant='filled'
           prefix={<SearchOutlined />}
@@ -302,17 +302,16 @@ const Playground: NextPage = () => {
           onPressEnter={onSearch}
           allowClear
           className={cls(
-            'w-[400px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60',
-            'mt-4'
+            'w-[400px] h-[40px] border-1 border-[#d1d1d1] backdrop-filter backdrop-blur-lg   dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60',
           )}
         />
         <span className='flex gap-2 items-center'>
-          <Avatar src={userInfo?.avatar_url} className='bg-gradient-to-tr from-[#31afff] to-[#1677ff] cursor-pointer'>
-            {userInfo?.nick_name}
+          <Avatar  className='bg-gradient-to-tr from-[#31afff] to-[#1677ff] cursor-pointer'>
+            
           </Avatar>
           <span
           >
-            {userInfo?.nick_name}admin
+            admin
           </span>
         </span>
       </div>
@@ -386,10 +385,10 @@ const Playground: NextPage = () => {
                           });
                         }}
                         cellRenderer={cellRenderer}
-                        columnWidth={width / columnCount}
-                        columnCount={columnCount}
+                        columnWidth={width / 4}
+                        columnCount={4}
                         height={height}
-                        rowHeight={200 /* 你的行高 */}
+                        rowHeight={200}
                         rowCount={apps.total_count}
                         width={width}
                       />

styles/globals.css

@@ -56,6 +56,9 @@ body {
 .bg-button-gradient {
   background-image: linear-gradient(to right,rgb(114, 136, 250),rgb(114, 136, 250)) !important;
 }
+.ant-btn-primary {
+    background-image: linear-gradient(to right, rgb(114, 136, 250), rgb(114, 136, 250)) !important;
+}
 .ant-segmented-item-selected {
   background-color: rgb(114, 136, 250)!important;
 }