Merge pull request #176 from lobehub/platform-optimize

style: 优化移动端使用体验
lobehub · Dec 3, 2024 · 25f1fb9 · 25f1fb9
2 parents a1eb1c2 + 33b6490
commit 25f1fb9
Show file tree

Hide file tree

Showing 116 changed files with 22,075 additions and 335 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -32,3 +32,4 @@ logs
 .next
 
 libs
+src/venders
diff --git a/.prettierignore b/.prettierignore
@@ -60,4 +60,4 @@ Dockerfile*
 
 # misc
 # add other ignore file below
-.next
+.next
diff --git a/...app/chat/CameraMode/Settings/DanceList/DanceMarketModal/Market/CreateDanceModal/index.tsx b/...app/chat/CameraMode/Settings/DanceList/DanceMarketModal/Market/CreateDanceModal/index.tsx
@@ -162,6 +162,7 @@ const CreateDanceModal = () => {
         {t('create.title', { ns: 'dance' })}
       </Button>
       <Modal
+        allowFullscreen
         open={open}
         title={t('create.title', { ns: 'dance' })}
         onCancel={() => setOpen(false)}

diff --git a/src/app/chat/CameraMode/Settings/DanceList/DanceMarketModal/index.tsx b/src/app/chat/CameraMode/Settings/DanceList/DanceMarketModal/index.tsx
@@ -16,6 +16,7 @@ export default (props: Props) => {
 
   return (
     <Modal
+      allowFullscreen
       footer={null}
       width={900}
       bodyProps={{

diff --git a/src/app/chat/CameraMode/Settings/DanceList/index.tsx b/src/app/chat/CameraMode/Settings/DanceList/index.tsx
@@ -31,6 +31,7 @@ const useStyles = createStyles(({ css, token }) => ({
   list: css`
     overflow-y: scroll;
     width: 100%;
+    height: 100%;
     padding: 0 ${token.paddingSM}px;
   `,
   player: css`

diff --git a/src/app/chat/CameraMode/Settings/index.tsx b/src/app/chat/CameraMode/Settings/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { ActionIcon, DraggablePanel, TabsNav } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { ActionIcon, DraggablePanel, DraggablePanelContainer, TabsNav } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
 import { X } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { rgba } from 'polished';
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import SkeletonList from '@/components/SkeletonList';
-import { CHAT_HEADER_HEIGHT, CHAT_INFO_MAX_WIDTH, CHAT_INFO_WIDTH } from '@/constants/token';
+import { CHAT_INFO_MAX_WIDTH, CHAT_INFO_WIDTH } from '@/constants/token';
 import { useGlobalStore } from '@/store/global';
 
 import { Tab } from './type';
@@ -47,16 +47,17 @@ const StageList = dynamic(() => import('./StageList'), {
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
-    position: relative;
-
     display: flex;
     flex-direction: column;
-
-    background-color: ${rgba(token.colorBgLayout, 0.8)};
+    height: 100% !important;
+  `,
+  drawer: css`
+    z-index: 10;
+    background-color: ${rgba(token.colorBgLayout, 0.2)};
     backdrop-filter: saturate(180%) blur(8px);
   `,
   header: css`
-    height: ${CHAT_HEADER_HEIGHT}px;
+    width: 100%;
     border-bottom: 1px solid ${token.colorBorder};
   `,
   player: css`
@@ -79,72 +80,84 @@ export default () => {
     s.setChatSidebar,
   ]);
 
+  const { md = true } = useResponsive();
+
   const [tab, setTab] = useState<Tab>(Tab.DanceList);
   const { t } = useTranslation('chat');
 
   const { styles } = useStyles();
 
   return (
     <DraggablePanel
+      className={styles.drawer}
       classNames={{ content: styles.content }}
       minWidth={CHAT_INFO_WIDTH}
       maxWidth={CHAT_INFO_MAX_WIDTH}
-      mode={'float'}
+      mode={md ? 'fixed' : 'float'}
       onExpandChange={(expand) => {
         setChatSidebar(expand);
       }}
       expand={showChatSidebar}
       placement={'right'}
     >
-      <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
-        <TabsNav
-          variant={'compact'}
-          activeKey={tab}
-          tabBarExtraContent={{
-            left: (
-              <ActionIcon
-                icon={X}
-                onClick={() => {
-                  setChatSidebar(false);
-                }}
-                style={{ marginLeft: 12 }}
-              />
-            ),
-          }}
-          items={[
-            {
-              label: t('info.dance'),
-              key: Tab.DanceList,
-            },
-            {
-              label: t('info.motions'),
-              key: Tab.Motions,
-            },
-            {
-              label: t('info.posture'),
-              key: Tab.Posture,
-            },
-            {
-              label: t('info.background'),
-              key: Tab.Background,
-            },
-            {
-              label: t('info.stage'),
-              key: Tab.Stage,
-            },
-          ]}
-          onChange={(key) => {
-            setTab(key as Tab);
-          }}
-        />
-      </Flexbox>
-      <Flexbox height={`calc(100vh - ${CHAT_HEADER_HEIGHT}px)`}>
-        {tab === Tab.DanceList && <DanceList />}
-        {tab === Tab.Motions && <MotionList />}
-        {tab === Tab.Posture && <PostureList />}
-        {tab === Tab.Background && <BackGround />}
-        {tab === Tab.Stage && <StageList />}
-      </Flexbox>
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100%',
+          maxHeight: '100vh',
+          minWidth: CHAT_INFO_WIDTH,
+        }}
+      >
+        <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
+          <TabsNav
+            variant={'compact'}
+            activeKey={tab}
+            tabBarExtraContent={{
+              left: (
+                <ActionIcon
+                  icon={X}
+                  onClick={() => {
+                    setChatSidebar(false);
+                  }}
+                  style={{ marginLeft: 12 }}
+                />
+              ),
+            }}
+            items={[
+              {
+                label: t('info.dance'),
+                key: Tab.DanceList,
+              },
+              {
+                label: t('info.motions'),
+                key: Tab.Motions,
+              },
+              {
+                label: t('info.posture'),
+                key: Tab.Posture,
+              },
+              {
+                label: t('info.background'),
+                key: Tab.Background,
+              },
+              {
+                label: t('info.stage'),
+                key: Tab.Stage,
+              },
+            ]}
+            onChange={(key) => {
+              setTab(key as Tab);
+            }}
+          />
+        </Flexbox>
+        <Flexbox flex={1}>
+          {tab === Tab.DanceList && <DanceList />}
+          {tab === Tab.Motions && <MotionList />}
+          {tab === Tab.Posture && <PostureList />}
+          {tab === Tab.Background && <BackGround />}
+          {tab === Tab.Stage && <StageList />}
+        </Flexbox>
+      </DraggablePanelContainer>
     </DraggablePanel>
   );
 };
diff --git a/src/app/chat/CameraMode/index.tsx b/src/app/chat/CameraMode/index.tsx
@@ -23,7 +23,11 @@ export default memo(() => {
   );
 
   return (
-    <Flexbox flex={1} horizontal>
+    <Flexbox
+      flex={1}
+      horizontal
+      style={{ height: '100%', position: 'relative', overflow: 'hidden' }}
+    >
       <Flexbox flex={1} style={{ position: 'relative' }}>
         {currentAgent ? (
           <div className={styles.viewer}>

diff --git a/src/app/chat/ChatMode/ChatHeader/AgentMeta/style.ts b/src/app/chat/ChatMode/ChatHeader/AgentMeta/style.ts
@@ -10,7 +10,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     line-height: 1;
   `,
   desc: css`
-    max-width: 320px;
+    width: 280px;
     margin-top: ${token.marginXXS}px;
 
     font-size: ${token.fontSizeSM}px;

diff --git a/src/app/chat/ChatMode/ChatInfo/AgentDetail/index.tsx b/src/app/chat/ChatMode/ChatInfo/AgentDetail/index.tsx
@@ -0,0 +1,37 @@
+import { Space } from 'antd';
+import React, { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AgentCard from '@/components/agent/AgentCard';
+import SystemRole from '@/components/agent/SystemRole';
+import { CHAT_HEADER_HEIGHT } from '@/constants/token';
+import useSessionContext from '@/hooks/useSessionContext';
+
+import EditRole from '../actions/EditRole';
+import History from '../actions/History';
+import TokenMini from '../actions/TokenMini';
+
+const ChatInfo = () => {
+  const { sessionAgent } = useSessionContext();
+
+  return (
+    sessionAgent && (
+      <AgentCard
+        style={{ height: `calc(100vh - ${CHAT_HEADER_HEIGHT}px)` }}
+        agent={sessionAgent}
+        actions={[
+          <Flexbox horizontal justify={'space-between'} align="center" key="token-history">
+            <Space size={4}>
+              <TokenMini />
+              <History />
+            </Space>
+            <EditRole />
+          </Flexbox>,
+        ]}
+        footer={<SystemRole systemRole={sessionAgent.systemRole} style={{ marginTop: 16 }} />}
+      />
+    )
+  );
+};
+
+export default memo(ChatInfo);
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,4 +60,4 @@ Dockerfile* @@
     # misc
     # add other ignore file below
-    .next
+    .next