mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-09-16 06:30:02 +00:00
feat(web): Unified frontend code style (#1923)
Co-authored-by: Fangyin Cheng <staneyffer@gmail.com> Co-authored-by: 谨欣 <echo.cmy@antgroup.com> Co-authored-by: 严志勇 <yanzhiyong@tiansuixiansheng.com> Co-authored-by: yanzhiyong <932374019@qq.com>
This commit is contained in:
Dreammy23
GitHub
@@ -1,7 +1,7 @@
|
||||
import { apiInterceptors, collectApp, unCollectApp } from '@/client/api';
|
||||
import { ChatContentContext } from '@/pages/chat';
|
||||
import { ExportOutlined, LoadingOutlined, StarFilled, StarOutlined } from '@ant-design/icons';
|
||||
import { Spin, Typography, message, Tag } from 'antd';
|
||||
import { Spin, Tag, Typography, message } from 'antd';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -12,7 +12,8 @@ import AppDefaultIcon from '../../common/AppDefaultIcon';
|
||||
const tagColors = ['magenta', 'orange', 'geekblue', 'purple', 'cyan', 'green'];
|
||||
|
||||
const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) => {
|
||||
const { appInfo, refreshAppInfo, handleChat, scrollRef, temperatureValue, resourceValue, currentDialogue } = useContext(ChatContentContext);
|
||||
const { appInfo, refreshAppInfo, handleChat, scrollRef, temperatureValue, resourceValue, currentDialogue } =
|
||||
useContext(ChatContentContext);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -27,7 +28,9 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
|
||||
|
||||
const { run: operate, loading } = useRequest(
|
||||
async () => {
|
||||
const [error] = await apiInterceptors(isCollected ? unCollectApp({ app_code: appInfo.app_code }) : collectApp({ app_code: appInfo.app_code }));
|
||||
const [error] = await apiInterceptors(
|
||||
isCollected ? unCollectApp({ app_code: appInfo.app_code }) : collectApp({ app_code: appInfo.app_code }),
|
||||
);
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
@@ -39,7 +42,7 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
|
||||
);
|
||||
|
||||
const paramKey: string[] = useMemo(() => {
|
||||
return appInfo.param_need?.map((i) => i.type) || [];
|
||||
return appInfo.param_need?.map(i => i.type) || [];
|
||||
}, [appInfo.param_need]);
|
||||
|
||||
if (!Object.keys(appInfo).length) {
|
||||
@@ -54,21 +57,21 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
|
||||
// 正常header
|
||||
const headerContent = () => {
|
||||
return (
|
||||
<header className="flex items-center justify-between w-5/6 h-full px-6 bg-[#ffffff99] border dark:bg-[rgba(255,255,255,0.1)] dark:border-[rgba(255,255,255,0.1)] rounded-2xl mx-auto transition-all duration-400 ease-in-out relative">
|
||||
<div className="flex items-center">
|
||||
<div className="flex w-12 h-12 justify-center items-center rounded-xl mr-4 bg-white">
|
||||
<header className='flex items-center justify-between w-5/6 h-full px-6 bg-[#ffffff99] border dark:bg-[rgba(255,255,255,0.1)] dark:border-[rgba(255,255,255,0.1)] rounded-2xl mx-auto transition-all duration-400 ease-in-out relative'>
|
||||
<div className='flex items-center'>
|
||||
<div className='flex w-12 h-12 justify-center items-center rounded-xl mr-4 bg-white'>
|
||||
<AppDefaultIcon scene={appScene} width={16} height={16} />
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="flex items-center text-base text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] font-semibold gap-2">
|
||||
<div className='flex flex-col flex-1'>
|
||||
<div className='flex items-center text-base text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] font-semibold gap-2'>
|
||||
<span>{appInfo?.app_name}</span>
|
||||
<div className="flex gap-1">
|
||||
{appInfo?.team_mode && <Tag color="green">{appInfo?.team_mode}</Tag>}
|
||||
{appInfo?.team_context?.chat_scene && <Tag color="cyan">{appInfo?.team_context?.chat_scene}</Tag>}
|
||||
<div className='flex gap-1'>
|
||||
{appInfo?.team_mode && <Tag color='green'>{appInfo?.team_mode}</Tag>}
|
||||
{appInfo?.team_context?.chat_scene && <Tag color='cyan'>{appInfo?.team_context?.chat_scene}</Tag>}
|
||||
</div>
|
||||
</div>
|
||||
<Typography.Text
|
||||
className="text-sm text-[#525964] dark:text-[rgba(255,255,255,0.65)] leading-6"
|
||||
className='text-sm text-[#525964] dark:text-[rgba(255,255,255,0.65)] leading-6'
|
||||
ellipsis={{
|
||||
tooltip: true,
|
||||
}}
|
||||
@@ -77,19 +80,19 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
|
||||
</Typography.Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className='flex items-center gap-4'>
|
||||
<div
|
||||
onClick={async () => {
|
||||
await operate();
|
||||
}}
|
||||
className="flex items-center justify-center w-10 h-10 bg-[#ffffff99] dark:bg-[rgba(255,255,255,0.2)] border border-white dark:border-[rgba(255,255,255,0.2)] rounded-[50%] cursor-pointer"
|
||||
className='flex items-center justify-center w-10 h-10 bg-[#ffffff99] dark:bg-[rgba(255,255,255,0.2)] border border-white dark:border-[rgba(255,255,255,0.2)] rounded-[50%] cursor-pointer'
|
||||
>
|
||||
{loading ? (
|
||||
<Spin spinning={loading} indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
|
||||
) : (
|
||||
<>
|
||||
{isCollected ? (
|
||||
<StarFilled style={{ fontSize: 18 }} className="text-yellow-400 cursor-pointer" />
|
||||
<StarFilled style={{ fontSize: 18 }} className='text-yellow-400 cursor-pointer' />
|
||||
) : (
|
||||
<StarOutlined style={{ fontSize: 18, cursor: 'pointer' }} />
|
||||
)}
|
||||
@@ -98,25 +101,28 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
|
||||
</div>
|
||||
<div
|
||||
onClick={shareApp}
|
||||
className="flex items-center justify-center w-10 h-10 bg-[#ffffff99] dark:bg-[rgba(255,255,255,0.2)] border border-white dark:border-[rgba(255,255,255,0.2)] rounded-[50%] cursor-pointer"
|
||||
className='flex items-center justify-center w-10 h-10 bg-[#ffffff99] dark:bg-[rgba(255,255,255,0.2)] border border-white dark:border-[rgba(255,255,255,0.2)] rounded-[50%] cursor-pointer'
|
||||
>
|
||||
<ExportOutlined className="text-lg" />
|
||||
<ExportOutlined className='text-lg' />
|
||||
</div>
|
||||
</div>
|
||||
{!!appInfo?.recommend_questions?.length && (
|
||||
<div className="absolute bottom-[-40px] left-0">
|
||||
<span className="text-sm text-[#525964] dark:text-[rgba(255,255,255,0.65)] leading-6">或许你想问：</span>
|
||||
<div className='absolute bottom-[-40px] left-0'>
|
||||
<span className='text-sm text-[#525964] dark:text-[rgba(255,255,255,0.65)] leading-6'>或许你想问：</span>
|
||||
{appInfo.recommend_questions.map((item, index) => (
|
||||
<Tag
|
||||
key={item.id}
|
||||
color={tagColors[index]}
|
||||
className="text-xs p-1 px-2 cursor-pointer"
|
||||
className='text-xs p-1 px-2 cursor-pointer'
|
||||
onClick={async () => {
|
||||
handleChat(item?.question || '', {
|
||||
app_code: appInfo.app_code,
|
||||
...(paramKey.includes('temperature') && { temperature: temperatureValue }),
|
||||
...(paramKey.includes('resource') && {
|
||||
select_param: typeof resourceValue === 'string' ? resourceValue : JSON.stringify(resourceValue) || currentDialogue.select_param,
|
||||
select_param:
|
||||
typeof resourceValue === 'string'
|
||||
? resourceValue
|
||||
: JSON.stringify(resourceValue) || currentDialogue.select_param,
|
||||
}),
|
||||
});
|
||||
setTimeout(() => {
|
||||
@@ -138,21 +144,21 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
|
||||
// 吸顶header
|
||||
const topHeaderContent = () => {
|
||||
return (
|
||||
<header className="flex items-center justify-between w-full h-14 bg-[#ffffffb7] dark:bg-[rgba(41,63,89,0.4)] px-8 transition-all duration-500 ease-in-out">
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg mr-2 bg-white">
|
||||
<header className='flex items-center justify-between w-full h-14 bg-[#ffffffb7] dark:bg-[rgba(41,63,89,0.4)] px-8 transition-all duration-500 ease-in-out'>
|
||||
<div className='flex items-center'>
|
||||
<div className='flex items-center justify-center w-8 h-8 rounded-lg mr-2 bg-white'>
|
||||
<AppDefaultIcon scene={appScene} />
|
||||
</div>
|
||||
<div className="flex items-center text-base text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] font-semibold gap-2">
|
||||
<div className='flex items-center text-base text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] font-semibold gap-2'>
|
||||
<span>{appInfo?.app_name}</span>
|
||||
<div className="flex gap-1">
|
||||
{appInfo?.team_mode && <Tag color="green">{appInfo?.team_mode}</Tag>}
|
||||
{appInfo?.team_context?.chat_scene && <Tag color="cyan">{appInfo?.team_context?.chat_scene}</Tag>}
|
||||
<div className='flex gap-1'>
|
||||
{appInfo?.team_mode && <Tag color='green'>{appInfo?.team_mode}</Tag>}
|
||||
{appInfo?.team_context?.chat_scene && <Tag color='cyan'>{appInfo?.team_context?.chat_scene}</Tag>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="flex gap-8"
|
||||
className='flex gap-8'
|
||||
onClick={async () => {
|
||||
await operate();
|
||||
}}
|
||||
@@ -162,15 +168,15 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
|
||||
) : (
|
||||
<>
|
||||
{isCollected ? (
|
||||
<StarFilled style={{ fontSize: 18 }} className="text-yellow-400 cursor-pointer" />
|
||||
<StarFilled style={{ fontSize: 18 }} className='text-yellow-400 cursor-pointer' />
|
||||
) : (
|
||||
<StarOutlined style={{ fontSize: 18, cursor: 'pointer' }} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<ExportOutlined
|
||||
className="text-lg"
|
||||
onClick={(e) => {
|
||||
className='text-lg'
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
shareApp();
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user