feat: 换肤功能

dataelement · Jul 11, 2024 · 1194f2f · 1194f2f
1 parent 4bdab35
commit 1194f2f
Show file tree

Hide file tree

Showing 28 changed files with 470 additions and 85 deletions.
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -8,6 +8,22 @@
     <link rel="icon" href="/favicon.ico" />
     <%- aceScriptSrc %>
     <title>BISHENG</title>
+    <!-- style -->
+    <script>
+        fetch('/api/v1/web/config').then(function (res) {
+            return res.json()
+        }).then(function (res) {
+            console.log('res :>> ', res.data);
+            var styleStr = res.data ? res.data.value : ''
+            var style = styleStr ? JSON.parse(styleStr) : {comp: {}}
+            window.ThemeStyle = style
+            Object.keys(style.comp).forEach(key => {
+                var hsl = style.comp[key]
+                var hslStr = `${hsl.h} ${hsl.s * 100}% ${hsl.l * 100}%`
+                document.documentElement.style.setProperty(key, hslStr);
+            });
+        })
+    </script>
 </head>
 
 <body id='body' style="width: 100%; height:100%">

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -56,6 +56,7 @@
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
@@ -189,33 +189,23 @@
 .build-tab {}
 
 .build-tab a.active {
-	color: #024FE5;
 	background: #fff;
 	box-shadow: 1px 1px 2px 0 #e9e9e9
 		/* background: #F4F5F8;
 	padding: 10px 40px; */
 }
 
 .build-tab a.active>svg {
-	color: #024FE5 !important;
+	color: hsl(var(--primary)) !important;
 }
-
-.build-tab a {
-	color: #666;
-	/* background: #F4F5F8;
-	padding: 10px 40px; */
-}
-
-.build-tab a>svg {
-	color: #666;
+.build-tab a.active>span {
+	color: hsl(var(--primary)) !important;
 }
-
-.build-tab a:hover {
-	color: #024FE5;
+:is(.dark .build-tab a.active>svg){
+	color: #fff !important;
 }
-
-.build-tab a:hover>svg {
-	color: #024FE5;
+:is(.dark .build-tab a.active>span){
+	color: #fff !important;
 }
 
 .bs-chat-bg {

diff --git a/src/frontend/src/components/bs-comp/cardComponent/index.tsx b/src/frontend/src/components/bs-comp/cardComponent/index.tsx
@@ -148,7 +148,7 @@ export default function CardComponent<T>({
 
 
   // 技能组件
-  return <Card className="group w-[320px] cursor-pointer bg-background-Assistant hover:bg-background-hoverAssistant" onClick={() => edit && onClick()}>
+  return <Card className="group w-[320px] hover:bg-card/80 cursor-pointer" onClick={() => edit && onClick()}>
     <CardHeader>
       <div className="flex justify-between pb-2">
         <TitleIconBg id={id} >

diff --git a/src/frontend/src/components/bs-comp/chatComponent/MessagePanne.tsx b/src/frontend/src/components/bs-comp/chatComponent/MessagePanne.tsx
@@ -71,7 +71,7 @@ export default function MessagePanne({ useName, guideWord, loadMore }) {
                 } else if (msg.files?.length) {
                     type = 'file'
                 } else if (['tool', 'flow', 'knowledge'].includes(msg.category)
-                    || (msg.category === 'processing' && msg.thought.indexOf(`status_code`) === -1)
+                    // || (msg.category === 'processing' && msg.thought.indexOf(`status_code`) === -1)
                 ) { // 项目演示？
                     type = 'runLog'
                 } else if (msg.thought) {

diff --git a/src/frontend/src/components/bs-icons/plusBox/PlusBox.svg b/src/frontend/src/components/bs-icons/plusBox/PlusBox.svg
diff --git a/src/frontend/src/components/bs-ui/alertDialog/useConfirm.tsx b/src/frontend/src/components/bs-ui/alertDialog/useConfirm.tsx
@@ -55,7 +55,7 @@ function ConfirmWrapper() {
                     <div><TipIcon /></div>
                     {showClose && <Cross2Icon onClick={close} className="absolute right-0 top-[-0.5rem] cursor-pointer text-gray-400 hover:text-gray-600"></Cross2Icon>}
                     <AlertDialogTitle>{title}</AlertDialogTitle>
-                    <AlertDialogDescription>
+                    <AlertDialogDescription className="text-popover-foreground">
                         {desc}
                     </AlertDialogDescription>
                 </AlertDialogHeader>

diff --git a/src/frontend/src/components/bs-ui/button/index.tsx b/src/frontend/src/components/bs-ui/button/index.tsx
@@ -12,12 +12,12 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
                 outline:
-                    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                    "border border-input shadow-sm hover:bg-accent hover:text-accent-foreground",
                 secondary:
                     "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
                 link: "text-primary no-underline hover:underline",
-                black: "bg-[#111] text-primary-foreground shadow hover:bg-[#48494d]"
+                black: "bg-black-button text-primary-foreground shadow hover:bg-black-button/85"
             },
             size: {
                 default: "h-9 px-4 py-2",

diff --git a/src/frontend/src/components/bs-ui/select/hover.tsx b/src/frontend/src/components/bs-ui/select/hover.tsx
@@ -3,7 +3,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../too
 
 export function SelectHoverItem({ children, ...props }) {
 
-    return <div {...props} className="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-gray-900 hover:bg-gray-100 dark:text-gray-50 dark:hover:bg-gray-700">
+    return <div {...props} className="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-[#EBF0FF] dark:text-gray-50 dark:hover:bg-gray-700">
         {children}
     </div>
 }
@@ -15,7 +15,7 @@ export function SelectHover({ triagger, children }) {
             <TooltipTrigger asChild>
                 {triagger}
             </TooltipTrigger>
-            <TooltipContent className="bg-[#fff] dark:bg-[#2A2B2E] shadow-md">
+            <TooltipContent className="text-popover-foreground bg-popover dark:bg-[#2A2B2E] shadow-md">
                 {children}
             </TooltipContent>
         </Tooltip>

diff --git a/src/frontend/src/controllers/API/assistant.ts b/src/frontend/src/controllers/API/assistant.ts
@@ -27,8 +27,8 @@ export const createAssistantsApi = async (name, prompt) => {
 };
 
 // 获取助手详情
-export const getAssistantDetailApi = async (id): Promise<AssistantDetail> => {
-    return await axios.get(`/api/v1/assistant/info/${id}`)
+export const getAssistantDetailApi = async (id, version): Promise<AssistantDetail> => {
+    return await axios.get(`/api/${version}/assistant/info/${id}`)
 };
 
 // 获取助手系统模型

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
@@ -62,7 +62,12 @@ export async function delComponentApi(name): Promise<any> {
 export async function getAppConfig(): Promise<AppConfig> {
   return await axios.get(`/api/v1/env`);
 }
-
+/**
+ * 获取平台配置
+ */
+export async function saveThemeApi(data: string): Promise<any> {
+  return await axios.post(`/api/v1/web/config`, { value: data });
+}
 /**
  * Reads all templates from the database.
  *

diff --git a/src/frontend/src/layout/BuildLayout.tsx b/src/frontend/src/layout/BuildLayout.tsx
@@ -9,21 +9,21 @@ export default function BuildLayout(params) {
     return <div className="bg-background-main">
         <div className="build-tab flex justify-center h-[60px] items-center border-b relative top-[-60px]">
             <div className="px-4">
-                <NavLink to={'assist'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink dark:hover:text-[#FFFFFF]">
-                    <TabIcon className="group-hover:text-primary dark:group-hover:text-[#FFFFFF] group-visited:text-[#666666]"></TabIcon>
-                    <span className="text-sm font-bold">{t('build.assistant')}</span>
+                <NavLink to={'assist'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink">
+                    <TabIcon className="text-muted-foreground group-hover:text-primary dark:group-hover:text-[#fff]"></TabIcon>
+                    <span className="text-sm font-bold text-muted-foreground group-hover:text-primary dark:group-hover:text-[#fff]">{t('build.assistant')}</span>
                 </NavLink>
             </div>
             <div className="px-4">
-                <NavLink to={'skills'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink dark:hover:text-[#FFFFFF]">
-                    <TabIcon className="group-hover:text-primary dark:group-hover:text-[#FFFFFF] group-visited:text-[#666666]"></TabIcon>
-                    <span className="text-sm font-bold">{t('build.skill')}</span>
+                <NavLink to={'skills'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink">
+                    <TabIcon className="text-muted-foreground group-hover:text-primary dark:group-hover:text-[#fff]"></TabIcon>
+                    <span className="text-sm font-bold text-muted-foreground group-hover:text-primary dark:group-hover:text-[#fff]">{t('build.skill')}</span>
                 </NavLink>
             </div>
             <div className="px-4">
-                <NavLink to={'tools'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink dark:hover:text-[#FFFFFF]">
-                    <TabIcon className="group-hover:text-primary dark:group-hover:text-[#FFFFFF] group-visited:text-[#666666]"></TabIcon>
-                    <span className="text-sm font-bold">{t('build.tools')}</span>
+                <NavLink to={'tools'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink">
+                    <TabIcon className="text-muted-foreground group-hover:text-primary dark:group-hover:text-[#fff]"></TabIcon>
+                    <span className="text-sm font-bold text-muted-foreground group-hover:text-primary dark:group-hover:text-[#fff]">{t('build.tools')}</span>
                 </NavLink>
             </div>
         </div>

diff --git a/src/frontend/src/pages/ChatAppPage/chatAssitantShare.tsx b/src/frontend/src/pages/ChatAppPage/chatAssitantShare.tsx
@@ -0,0 +1,17 @@
+// 支持嵌iframe、适配移动端
+import { useMemo, useState } from "react";
+import { useLocation, useParams } from "react-router-dom";
+import { generateUUID } from "../../utils";
+import ChatPanne from "./components/ChatPanne";
+
+export default function chatAssitantShare() {
+    const { id: assitId } = useParams()
+
+    const wsUrl = `/api/v2/assistant/chat/${assitId}`
+
+    const [data] = useState<any>({ id: assitId, chatId: generateUUID(32), type: 'assistant' })
+
+    if (!assitId) return <div>请选择会话</div>
+
+    return <ChatPanne customWsHost={wsUrl} version="v2" data={data} />
+};
diff --git a/src/frontend/src/pages/ChatAppPage/chatShare.tsx b/src/frontend/src/pages/ChatAppPage/chatShare.tsx
@@ -24,7 +24,7 @@ export default function chatShare() {
 
     const [data] = useState<any>({ id: flowId, chatId: generateUUID(32), type: 'flow' })
 
-    if (!flowId) return <div>请选择技能</div>
+    if (!flowId) return <div>请选择会话</div>
 
     return <ChatPanne customWsHost={wsUrl} version="v2" data={data} />
 };
diff --git a/src/frontend/src/pages/ChatAppPage/components/ChatPanne.tsx b/src/frontend/src/pages/ChatAppPage/components/ChatPanne.tsx
@@ -47,7 +47,7 @@ export default function ChatPanne({ customWsHost = '', appendHistory = false, da
         } else {
             flowRef.current = null
             setFlow(null)
-            const _assistant = await loadAssistantState(id)
+            const _assistant = await loadAssistantState(id, version)
             loadHistoryMsg(_assistant.id, chatId, {
                 appendHistory,
                 lastMsg: t('historicalMessages')
@@ -159,12 +159,12 @@ export default function ChatPanne({ customWsHost = '', appendHistory = false, da
 
     if (!(flow || assistant)) return <div className="flex-1 chat-box h-full overflow-hidden bs-chat-bg" style={{ backgroundImage: `url(${__APP_ENV__.BASE_URL}/points.png)` }}>
         <img className="w-[200px] h-[182px] mt-[86px] mx-auto" src={__APP_ENV__.BASE_URL + '/application-start-logo.png'} alt="" />
-        <p className="text-center text-3xl w-auto whitespace-normal leading-[64px] text-[#111111] dark:text-[#D4D4D4] mx-auto mt-[20px] font-light">
-            {t('chat.chooseOne')}<b className="text-[#111111] dark:text-[#D4D4D4] font-semibold">{t('chat.dialogue')}</b><br />{t('chat.start')}<b className="text-[#111111] dark:text-[#D4D4D4] font-semibold">{t('chat.wenqingruijian')}</b>
+        <p className="text-center text-3xl w-auto whitespace-normal leading-[64px] dark:text-[#D4D4D4] mx-auto mt-[20px] font-light">
+            {t('chat.chooseOne')}<b className=" dark:text-[#D4D4D4] font-semibold">{t('chat.dialogue')}</b><br />{t('chat.start')}<b className=" dark:text-[#D4D4D4] font-semibold">{t('chat.wenqingruijian')}</b>
         </p>
         {
             !customWsHost && <div
-                className="relative z-50 w-[162px] h-[38px] bg-[#0055e3] rounded-lg text-[white] leading-[38px] flex cursor-pointer hover:bg-[#0165e6] justify-around mx-auto mt-[120px] text-[13px]"
+                className="relative z-50 w-[162px] h-[38px] bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg leading-[38px] flex cursor-pointer  justify-around mx-auto mt-[120px] text-[13px]"
                 onClick={() => {
                     document.getElementById('newchat')?.click()
                 }}>

diff --git a/src/frontend/src/pages/ChatAppPage/index.tsx b/src/frontend/src/pages/ChatAppPage/index.tsx
@@ -102,7 +102,7 @@ export default function SkillChatPage() {
                                 <div className=" inline-block bg-purple-500 rounded-md">
                                     {chat.flow_type === 'assistant' ? <AssistantIcon /> : <SkillIcon />}
                                 </div>
-                                <p className="truncate text-sm font-bold text-gray-950 dark:text-[#F2F2F2] leading-6">{chat.flow_name}</p>
+                                <p className="truncate text-sm font-bold leading-6">{chat.flow_name}</p>
                             </div>
                             <span className="block text-xs text-gray-600 dark:text-[#8D8D8E] mt-3 break-words truncate">{chat.latest_message?.message || ''}</span>
                             <div className="mt-6">

diff --git a/src/frontend/src/pages/FileLibPage/index.tsx b/src/frontend/src/pages/FileLibPage/index.tsx
@@ -203,7 +203,7 @@ export default function FileLibPage() {
                                             // @ts-ignore
                                             window.libname = el.name;
                                         }}>
-                                            <Link to={`/filelib/${el.id}`} className="no-underline hover:underline text-[#0455e1]" onClick={handleCachePage}>{t('lib.details')}</Link>
+                                            <Link to={`/filelib/${el.id}`} className="no-underline hover:underline text-primary" onClick={handleCachePage}>{t('lib.details')}</Link>
                                             {user.role === 'admin' || user.user_id === el.user_id ?
                                                 <Button variant="link" onClick={() => handleDelete(el.id)} className="ml-4 text-red-500 px-0">{t('delete')}</Button> :
                                                 <Button variant="link" className="ml-4 text-gray-400 px-0">{t('delete')}</Button>

diff --git a/src/frontend/src/pages/SkillPage/editAssistant.tsx b/src/frontend/src/pages/SkillPage/editAssistant.tsx
@@ -21,7 +21,7 @@ export default function editAssistant() {
     const { startNewRound, insetSystemMsg, insetBsMsg, setShowGuideQuestion } = useMessageStore()
 
     useEffect(() => {
-        loadAssistantState(assisId).then((res) => {
+        loadAssistantState(assisId, 'v1').then((res) => {
             setShowGuideQuestion(true)
             setGuideQuestion(res.guide_question?.filter((item) => item) || [])
             res.guide_word && insetBsMsg(res.guide_word)