🐛 fix: 修复角色预览加载

lobehub · May 15, 2024 · 739931d · 739931d
1 parent ca18074
commit 739931d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/components/PageLoading/index.tsx b/src/components/PageLoading/index.tsx
@@ -1,11 +1,18 @@
 import { Icon, Logo } from '@lobehub/ui';
 import { Loader2 } from 'lucide-react';
-import { memo } from 'react';
+import React, { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-const PageLoading = ({ title }: { title: string }) => {
+interface PageLoadingProps {
+  className?: string;
+  style?: React.CSSProperties;
+  title: string;
+}
+
+const PageLoading = (props: PageLoadingProps) => {
+  const { title, className, style } = props;
   return (
-    <Flexbox height={'100%'} width={'100%'}>
+    <Flexbox height={'100%'} width={'100%'} className={className} style={style}>
       <Center flex={1} gap={12} width={'100%'}>
         <Logo extra={'Vidol'} size={48} type={'combine'} />
         <Center gap={16} horizontal>

diff --git a/src/features/AgentViewer/index.tsx b/src/features/AgentViewer/index.tsx
@@ -95,7 +95,7 @@ function AgentViewer(props: Props) {
   return (
     <div ref={ref} className={classNames(styles.viewer, className)} style={style}>
       <ToolBar className={styles.toolbar} viewerRef={ref} />
-      {loading ? <PageLoading title={'模型加载中，请稍后...'} /> : null}
+      {loading ? <PageLoading title={'模型加载中，请稍后...'} className={styles.loading} /> : null}
       <canvas ref={canvasRef} className={styles.canvas} style={{ height }}></canvas>
     </div>
   );

diff --git a/src/features/AgentViewer/style.ts b/src/features/AgentViewer/style.ts
@@ -1,16 +1,21 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  viewer: css`
+    position: relative;
+    height: 100%;
+    min-height: 0;
+  `,
   toolbar: css`
     position: absolute;
     right: ${token.paddingMD}px;
     bottom: 50%;
     display: flex;
   `,
-  viewer: css`
-    position: relative;
-    height: 100%;
-    min-height: 0;
+  loading: css`
+    position: absolute;
+    top: 0;
+    left: 0;
   `,
   canvas: css`
     display: block;