💄 style: improve portal style (lobehub#6588)

* improve portal style * update style * improve
bentwnghk · Feb 28, 2025 · 55b5416 · 55b5416
1 parent 302e7d7
commit 55b5416
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 100 deletions.
diff --git a/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx b/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx
@@ -26,6 +26,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   drawer: css`
     z-index: 10;
     background: ${token.colorBgLayout};
+    height: 100%;
   `,
   header: css`
     border-block-end: 1px solid ${token.colorBorder};
@@ -71,38 +72,36 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
   };
 
   return (
-    showInspector && (
-      <DraggablePanel
-        className={styles.drawer}
-        classNames={{
-          content: styles.content,
+    <DraggablePanel
+      className={styles.drawer}
+      classNames={{
+        content: styles.content,
+      }}
+      defaultSize={{ width: tmpWidth }}
+      expand={showInspector}
+      hanlderStyle={{ display: 'none' }}
+      maxWidth={CHAT_PORTAL_MAX_WIDTH}
+      minWidth={
+        showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
+      }
+      mode={md ? 'fixed' : 'float'}
+      onSizeChange={handleSizeChange}
+      placement={'right'}
+      showHandlerWhenUnexpand={false}
+      showHandlerWideArea={false}
+      size={{ height: '100%', width: portalWidth }}
+    >
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100%',
+          maxHeight: '100vh',
+          minWidth: CHAT_PORTAL_WIDTH,
         }}
-        defaultSize={{ width: tmpWidth }}
-        expand
-        hanlderStyle={{ display: 'none' }}
-        maxWidth={CHAT_PORTAL_MAX_WIDTH}
-        minWidth={
-          showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
-        }
-        mode={md ? 'fixed' : 'float'}
-        onSizeChange={handleSizeChange}
-        placement={'right'}
-        showHandlerWhenUnexpand={false}
-        showHandlerWideArea={false}
-        size={{ height: '100%', width: portalWidth }}
       >
-        <DraggablePanelContainer
-          style={{
-            flex: 'none',
-            height: '100%',
-            maxHeight: '100vh',
-            minWidth: CHAT_PORTAL_WIDTH,
-          }}
-        >
-          <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
-        </DraggablePanelContainer>
-      </DraggablePanel>
-    )
+        <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
+      </DraggablePanelContainer>
+    </DraggablePanel>
   );
 });
 

diff --git a/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx b/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx
@@ -49,31 +49,29 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
   }, [lg, cacheExpand]);
 
   return (
-    !showPortal && (
-      <DraggablePanel
-        className={styles.drawer}
-        classNames={{
-          content: styles.content,
+    <DraggablePanel
+      className={styles.drawer}
+      classNames={{
+        content: styles.content,
+      }}
+      expand={showTopic && !showPortal}
+      minWidth={CHAT_SIDEBAR_WIDTH}
+      mode={md ? 'fixed' : 'float'}
+      onExpandChange={handleExpand}
+      placement={'right'}
+      showHandlerWideArea={false}
+    >
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100%',
+          maxHeight: '100vh',
+          minWidth: CHAT_SIDEBAR_WIDTH,
         }}
-        expand={showTopic}
-        minWidth={CHAT_SIDEBAR_WIDTH}
-        mode={md ? 'fixed' : 'float'}
-        onExpandChange={handleExpand}
-        placement={'right'}
-        showHandlerWideArea={false}
       >
-        <DraggablePanelContainer
-          style={{
-            flex: 'none',
-            height: '100%',
-            maxHeight: '100vh',
-            minWidth: CHAT_SIDEBAR_WIDTH,
-          }}
-        >
-          {children}
-        </DraggablePanelContainer>
-      </DraggablePanel>
-    )
+        {children}
+      </DraggablePanelContainer>
+    </DraggablePanel>
   );
 });
 

diff --git a/src/components/AnimatedCollapsed/index.tsx b/src/components/AnimatedCollapsed/index.tsx
@@ -0,0 +1,59 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { CSSProperties, ReactNode, memo } from 'react';
+
+interface AnimatedCollapsedProps {
+  children: ReactNode;
+  height?: {
+    collapsed?: string | number;
+    open?: string | number;
+  };
+  open: boolean;
+  style?: CSSProperties;
+  styles?: {
+    collapsed?: CSSProperties;
+    open?: CSSProperties;
+  };
+  width?: {
+    collapsed?: string | number;
+    open?: string | number;
+  };
+}
+
+const AnimatedCollapsed = memo<AnimatedCollapsedProps>(
+  ({ open, children, styles, style, width, height }) => {
+    return (
+      <AnimatePresence initial={false}>
+        {open && (
+          <motion.div
+            animate="open"
+            exit="collapsed"
+            initial="collapsed"
+            style={style}
+            transition={{
+              duration: 0.2,
+              ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
+            }}
+            variants={{
+              collapsed: {
+                ...(styles?.collapsed as any),
+                height: height?.collapsed ?? 0,
+                opacity: 0,
+                width: width?.collapsed ?? 0,
+              },
+              open: {
+                ...(styles?.open as any),
+                height: height?.open ?? 'auto',
+                opacity: 1,
+                width: width?.open ?? 'auto',
+              },
+            }}
+          >
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    );
+  },
+);
+
+export default AnimatedCollapsed;
diff --git a/src/features/Conversation/Messages/Assistant/Tool/index.tsx b/src/features/Conversation/Messages/Assistant/Tool/index.tsx
@@ -1,7 +1,8 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import { CSSProperties, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import AnimatedCollapsed from '@/components/AnimatedCollapsed';
+
 import Inspectors from './Inspector';
 import Render from './Render';
 
@@ -36,32 +37,16 @@ const Tool = memo<InspectorProps>(
           showPluginRender={showPluginRender}
           showRender={showRender}
         />
-        <AnimatePresence initial={false}>
-          {showRender && (
-            <motion.div
-              animate="open"
-              exit="collapsed"
-              initial="collapsed"
-              transition={{
-                duration: 0.1,
-                ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
-              }}
-              variants={{
-                collapsed: { height: 0, opacity: 0, width: 0 },
-                open: { height: 'auto', opacity: 1, width: 'auto' },
-              }}
-            >
-              <Render
-                messageId={messageId}
-                requestArgs={requestArgs}
-                setShowPluginRender={setShowPluginRender}
-                showPluginRender={showPluginRender}
-                toolCallId={id}
-                toolIndex={index}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
+        <AnimatedCollapsed open={showRender}>
+          <Render
+            messageId={messageId}
+            requestArgs={requestArgs}
+            setShowPluginRender={setShowPluginRender}
+            showPluginRender={showPluginRender}
+            toolCallId={id}
+            toolIndex={index}
+          />
+        </AnimatedCollapsed>
       </Flexbox>
     );
   },

diff --git a/src/tools/web-browsing/Portal/ResultList/index.tsx b/src/tools/web-browsing/Portal/ResultList/index.tsx
@@ -11,7 +11,7 @@ interface ResultListProps {
 
 const ResultList = memo<ResultListProps>(({ dataSources }) => {
   const itemContent = useCallback(
-    (index: number, result: SearchResult) => <Item {...result} highlight={index < 5} />,
+    (index: number, result: SearchResult) => <Item {...result} highlight={index < 15} />,
     [],
   );
 

diff --git a/src/tools/web-browsing/Portal/index.tsx b/src/tools/web-browsing/Portal/index.tsx
@@ -29,16 +29,17 @@ const Inspector = memo<InspectorUIProps<SearchArguments, SearchResponse>>(
     const defaultEngines = engines.length > 0 ? engines : args.searchEngine || [];
     const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
 
-    return (
-      <Flexbox gap={12} height={'100%'}>
-        <SearchBar
-          aiSummary={false}
-          defaultEngines={defaultEngines}
-          defaultQuery={args.query}
-          messageId={messageId}
-          tooltip={false}
-        />
-        {loading ? (
+    if (loading) {
+      return (
+        <Flexbox gap={12} height={'100%'}>
+          <SearchBar
+            aiSummary={false}
+            defaultEngines={defaultEngines}
+            defaultQuery={args.query}
+            messageId={messageId}
+            tooltip={false}
+          />
+
           <Flexbox gap={16} paddingBlock={16} paddingInline={12}>
             {[1, 2, 3, 4, 6].map((id) => (
               <Skeleton
@@ -49,14 +50,25 @@ const Inspector = memo<InspectorUIProps<SearchArguments, SearchResponse>>(
               />
             ))}
           </Flexbox>
-        ) : (
-          <>
-            <Flexbox height={'100%'} width={'100%'}>
-              <ResultList dataSources={state.results} />
-            </Flexbox>
-            <Footer />
-          </>
-        )}
+        </Flexbox>
+      );
+    }
+
+    return (
+      <Flexbox gap={0} height={'100%'}>
+        <Flexbox gap={12} height={'100%'}>
+          <SearchBar
+            aiSummary={false}
+            defaultEngines={defaultEngines}
+            defaultQuery={args.query}
+            messageId={messageId}
+            tooltip={false}
+          />
+          <Flexbox height={'100%'} width={'100%'}>
+            <ResultList dataSources={state.results} />
+          </Flexbox>
+        </Flexbox>
+        <Footer />
       </Flexbox>
     );
   },

diff --git a/src/tools/web-browsing/Render/SearchResult/SearchResultItem.tsx b/src/tools/web-browsing/Render/SearchResult/SearchResultItem.tsx
@@ -30,7 +30,7 @@ const useStyles = createStyles(({ css, token }) => ({
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
 
-    color: ${token.colorTextSecondary};
+    color: ${token.colorText};
     text-overflow: ellipsis;
   `,
   url: css`