🐛 fix: 修复模型展示样式错误

lobehub · Apr 22, 2024 · 894c9de · 894c9de
1 parent 535000c
commit 894c9de
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 54 deletions.
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
@@ -25,7 +25,7 @@ const Chat = () => {
         <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
           {viewerMode === true ? <AgentViewer /> : <ChatList />}
         </Flexbox>
-        <Flexbox align={'center'} width={'100%'} className={styles.docker}>
+        <Flexbox align={'center'} width={'100%'} className={styles.docker} justify={'center'}>
           <MessageInput className={styles.input} />
           <div className={styles.alert}>请谨记：智能体所说的一切都是由 AI 生成的</div>
         </Flexbox>

diff --git a/src/app/chat/style.ts b/src/app/chat/style.ts
@@ -1,8 +1,10 @@
 import { createStyles } from 'antd-style';
 
+import { CHAT_INPUT_HEIGHT } from '@/constants/common';
+
 export const useStyles = createStyles(({ css, token }) => ({
   docker: css`
-    padding: ${token.paddingXS}px;
+    height: ${CHAT_INPUT_HEIGHT}px;
     background-color: rgba(${token.colorBgLayout}, 0.8);
     backdrop-filter: saturate(180%) blur(2px);
   `,

diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -18,6 +18,8 @@ export const INITIAL_Z_INDEX = 10;
 export const CHAT_TEXTAREA_MAX_HEIGHT = 570;
 export const CHAT_TEXTAREA_HEIGHT = 200;
 
+export const CHAT_INPUT_HEIGHT = 90;
+
 export const HEADER_HEIGHT = 64;
 
 export const DEFAULT_USER_AVATAR = '😀';

diff --git a/src/features/Actions/PlayControl.tsx b/src/features/Actions/PlayControl.tsx
@@ -32,27 +32,20 @@ interface Props {
 export default (props: Props) => {
   const { style, className } = props;
   const { styles } = useStyles();
-  const [isPlaying, togglePlayPause] = useDanceStore((s) => [s.isPlaying, s.togglePlayPause]);
+  const [isPlaying, togglePlayPause, playlist] = useDanceStore((s) => [
+    s.isPlaying,
+    s.togglePlayPause,
+    s.playlist,
+  ]);
 
-  // return (
-  //   <GradientButton
-  //     className={classNames(isPlaying ? styles.spin : '', className)}
-  //     glow={isPlaying}
-  //     onClick={togglePlayPause}
-  //     shape="circle"
-  //   >
-  //     <TikTokOutlined style={{ fontSize: 22 }} />
-  //   </GradientButton>
-  // );
-
-  return (
+  return playlist.length ? (
     <ActionIcon
       className={classNames(isPlaying ? styles.spin : '', className)}
       style={style}
       onClick={togglePlayPause}
       icon={Music2}
     />
-  );
+  ) : null;
 
   // return (
   //   <Avatar

diff --git a/src/features/AgentViewer/index.tsx b/src/features/AgentViewer/index.tsx
@@ -37,7 +37,7 @@ function AgentViewer() {
       <ChatDialog className={styles.dialog} />
       <ToolBar className={styles.toolbar} />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} /> : null}
-      <canvas ref={canvasRef}></canvas>
+      <canvas ref={canvasRef} height={'100%'} width={'100%'}></canvas>
     </div>
   );
 }

diff --git a/src/features/AgentViewer/style.ts b/src/features/AgentViewer/style.ts
@@ -1,5 +1,7 @@
 import { createStyles } from 'antd-style';
 
+import { CHAT_INPUT_HEIGHT } from '@/constants/common';
+
 export const useStyles = createStyles(({ css, token }) => ({
   toolbar: css`
     position: absolute;
@@ -17,14 +19,8 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     min-width: 480px;
   `,
-  // controller: css`
-  //   position: absolute;
-  //   right: ${token.paddingMD}px;
-  //   top: ${token.paddingMD}px;
-  // `,
   viewer: css`
-    position: relative;
     width: 100%;
-    height: 100%;
+    height: calc(100vh - 128px - ${CHAT_INPUT_HEIGHT}px);
   `,
 }));
diff --git a/src/features/AudioPlayer/index.tsx b/src/features/AudioPlayer/index.tsx
@@ -69,7 +69,12 @@ function Player(props: PlayerProps) {
         src={currentPlay?.audio}
       />
       <div className={styles.player}>
-        <Avatar shape="circle" size={48} src={currentPlay?.cover} />
+        <Avatar
+          shape="circle"
+          size={48}
+          src={currentPlay?.cover}
+          className={isPlaying ? styles.spin : ''}
+        />
         <div className={styles.content}>
           <Duration currentProgress={currentProgress} duration={duration} />
           <div className={styles.controller}>

diff --git a/src/features/AudioPlayer/style.ts b/src/features/AudioPlayer/style.ts
@@ -32,6 +32,19 @@ const useStyles = createStyles(({ token, css }) => ({
     display: flex;
     align-items: center;
   `,
+  spin: css`
+    @keyframes rotate-animation {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    animation: rotate-animation 20s linear infinite;
+  `,
 }));
 
 export { useStyles };
diff --git a/src/features/ChatHeader/index.tsx b/src/features/ChatHeader/index.tsx
@@ -1,5 +1,6 @@
 import { Space } from 'antd';
 import React from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import AgentMeta from '@/components/agent/AgentMeta';
 import PlayControl from '@/features/Actions/PlayControl';
@@ -14,14 +15,14 @@ const Header = () => {
   const [currentAgent] = useSessionStore((s) => [sessionSelectors.currentAgent(s)]);
 
   return (
-    <div className={styles.header}>
+    <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
       <AgentMeta meta={currentAgent?.meta} />
       <Space>
         <Voice key={'voice'} />
         <Video key={'video'} />
         <PlayControl key="play" />
       </Space>
-    </div>
+    </Flexbox>
   );
 };
 

diff --git a/src/features/ChatHeader/style.ts b/src/features/ChatHeader/style.ts
@@ -2,13 +2,8 @@ import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(({ token, css }) => ({
   header: css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    width: 100%;
-    padding: 16px 8px;
-
+    height: 64px;
+    padding: ${token.paddingSM}px;
     border-bottom: 1px solid ${token.colorBorderSecondary};
   `,
   player: css`

diff --git a/src/features/ChatInput/MessageInput/index.tsx b/src/features/ChatInput/MessageInput/index.tsx
@@ -28,7 +28,7 @@ const InputArea = memo((props: InputAreaProps) => {
   ]);
 
   return (
-    <Flexbox height={'100%'} width={'100%'} horizontal gap={4} className={className} style={style}>
+    <Flexbox width={'100%'} horizontal gap={4} className={className} style={style}>
       <Record />
       <Input
         width={'100%'}

diff --git a/src/features/SessionList/Header.tsx b/src/features/SessionList/Header.tsx
@@ -19,20 +19,24 @@ const Header = memo((props: HeaderProps) => {
   const openPanel = useConfigStore((s) => s.openPanel);
 
   return (
-    <div className={styles.header}>
-      <Flexbox flex={1} style={{ marginRight: 4 }}>
-        <SearchBar
-          enableShortKey
-          onChange={(e) => {
-            if (onChange) onChange(e.target.value);
-          }}
-          placeholder="搜索"
-          shortKey="f"
-          value={value}
-        />
-      </Flexbox>
+    <Flexbox
+      justify={'space-between'}
+      horizontal
+      align={'center'}
+      className={styles.header}
+      gap={4}
+    >
+      <SearchBar
+        enableShortKey
+        onChange={(e) => {
+          if (onChange) onChange(e.target.value);
+        }}
+        placeholder="搜索"
+        shortKey="f"
+        value={value}
+      />
       <ActionIcon icon={Plus} onClick={() => openPanel('agent')} title={'创建对话'} />
-    </div>
+    </Flexbox>
   );
 });
 

diff --git a/src/features/SessionList/style.ts b/src/features/SessionList/style.ts
@@ -10,12 +10,8 @@ export const useStyles = createStyles(({ css, token }) => ({
     text-align: center;
   `,
   header: css`
-    display: flex;
-    justify-content: space-between;
-
-    width: 100%;
-    padding: 16px 8px;
-
+    height: 64px;
+    padding: ${token.paddingSM}px;
     border-bottom: 1px solid ${token.colorBorderSecondary};
   `,