style: adjust layout

src/app/chat/CameraMode/index.tsx

@@ -6,7 +6,6 @@ import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ChatDialog from '@/app/chat/CameraMode/ChatDialog';
-import { HEADER_HEIGHT } from '@/constants/token';
 import AgentViewer from '@/features/AgentViewer';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
@@ -31,11 +30,7 @@ export default memo(() => {
       <Flexbox flex={1} style={{ position: 'relative' }}>
         {currentAgent ? (
           <div className={styles.viewer}>
-            <AgentViewer
-              height={`calc(100vh - ${HEADER_HEIGHT}px)`}
-              agentId={currentAgent.agentId}
-              interactive={interactive}
-            />
+            <AgentViewer agentId={currentAgent.agentId} interactive={interactive} />
           </div>
         ) : null}
         <ChatDialog className={classNames(styles.dialog, styles.content)} />

src/app/chat/ChatMode/SideBar/ChatHeader/index.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { BRANDING_NAME } from '@/constants/branding';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  logo: css`
+    color: ${token.colorText};
+    fill: ${token.colorText};
+  `,
+  top: css`
+    position: sticky;
+    inset-block-start: 0;
+    height: 64px;
+  `,
+}));
+
+const ChatHeader = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.top} gap={16} padding={12}>
+      <Flexbox distribution={'space-between'} horizontal>
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Typography.Title level={4} style={{ margin: 0, height: 40, lineHeight: '40px' }}>
+            {BRANDING_NAME}
+          </Typography.Title>
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ChatHeader;

src/app/chat/ChatMode/SideBar/SessionList/index.tsx

@@ -58,7 +58,7 @@ const SessionList = () => {
   const { t } = useTranslation('chat');
   return (
     <div className={styles.session}>
-      <Flexbox style={{ padding: '16px 8px 0' }}>
+      <Flexbox style={{ padding: '0 8px 0' }}>
         <SearchBar
           enableShortKey
           onChange={(e) => {

src/app/chat/ChatMode/SideBar/index.tsx

@@ -6,9 +6,10 @@ import isEqual from 'lodash-es/isEqual';
 import { rgba } from 'polished';
 import { memo, useEffect, useState } from 'react';
 
-import { CHAT_HEADER_HEIGHT, SIDEBAR_WIDTH } from '@/constants/token';
+import { SIDEBAR_WIDTH } from '@/constants/token';
 import { useGlobalStore } from '@/store/global';
 
+import ChatHeader from './ChatHeader';
 import SessionList from './SessionList';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -58,9 +59,8 @@ const SideBar = memo(() => {
       onExpandChange={handleExpand}
       expand={showSessionList}
     >
-      <div style={{ height: `calc(100vh - ${CHAT_HEADER_HEIGHT}px)`, overflowY: 'auto' }}>
-        <SessionList />
-      </div>
+      <ChatHeader />
+      <SessionList />
     </DraggablePanel>
   );
 });

src/app/chat/layout.tsx

@@ -3,7 +3,6 @@
 import { ReactNode, memo } from 'react';
 
 import AppLayout from '@/layout/AppLayout';
-import { HeaderNavKey } from '@/layout/type';
 
 import Effect from './Effect';
 
@@ -15,7 +14,7 @@ const LayoutDesktop = (props: LayoutProps) => {
   const { children } = props;
 
   return (
-    <AppLayout headerKey={HeaderNavKey.Chat}>
+    <AppLayout>
       {children}
       <Effect />
     </AppLayout>

src/app/discover/List/index.tsx

@@ -22,6 +22,7 @@ const useStyles = createStyles(({ css, token }) => ({
     padding-inline: ${token.paddingSM}px;
   `,
   tabsNav: css`
+    margin-bottom: ${token.margin}px;
     padding-inline: ${token.paddingSM}px;
   `,
   list: css`

src/app/discover/layout.tsx

@@ -2,7 +2,6 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayout from '@/layout/AppLayout';
-import { HeaderNavKey } from '@/layout/type';
 
 export interface LayoutProps {
   children?: ReactNode;
@@ -11,7 +10,7 @@ export interface LayoutProps {
 const Layout = (props: LayoutProps) => {
   const { children } = props;
   return (
-    <AppLayout headerKey={HeaderNavKey.Discover}>
+    <AppLayout>
       <Flexbox flex={1} height={'100%'} width={'100%'} style={{ position: 'relative' }} horizontal>
         <Flexbox align={'center'} flex={1} style={{ overflow: 'scroll' }}>
           {children}

src/app/discover/page.tsx

@@ -5,7 +5,6 @@ import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useSWR from 'swr';
 
-import { HEADER_HEIGHT } from '@/constants/token';
 import { getAgentIndex } from '@/services/agent';
 import { configSelectors, useSettingStore } from '@/store/setting';
 import { Agent } from '@/types/agent';
@@ -20,7 +19,7 @@ const useStyles = createStyles(({ css, responsive }) => ({
     overflow-y: auto;
 
     width: 100%;
-    height: calc(100% - ${HEADER_HEIGHT}px);
+    height: 100%;
     min-height: 500px;
     padding: 0 32px 16px;
 

src/app/role/RoleEdit/Shell/ViewerWithUpload/index.tsx

@@ -4,7 +4,6 @@ import React, { CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { HEADER_HEIGHT } from '@/constants/token';
 import AgentViewer from '@/features/AgentViewer';
 import { agentSelectors, useAgentStore } from '@/store/agent';
 import { useGlobalStore } from '@/store/global';
@@ -41,12 +40,7 @@ const ViewerWithUpload = memo<ViewerWithUploadProps>(({ style }) => {
   };
 
   return currentAgent3DModel && currentAgentId ? (
-    <AgentViewer
-      height={`calc(100vh - ${HEADER_HEIGHT}px)`}
-      agentId={currentAgentId}
-      interactive={false}
-      toolbar={false}
-    />
+    <AgentViewer agentId={currentAgentId} interactive={false} toolbar={false} />
   ) : (
     <Upload
       beforeUpload={handleUploadAvatar}

src/layout/Header/Actions/CreateRole/index.tsx → src/app/role/SideBar/RoleHeader/CreateRole/index.tsx

@@ -1,7 +1,7 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Modal } from '@lobehub/ui';
+import { ActionIcon, Modal } from '@lobehub/ui';
 import { Avatar, Button, message } from 'antd';
 import { createStyles } from 'antd-style';
+import { MessageSquarePlus } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -82,9 +82,12 @@ export default function CreateRole() {
 
   return (
     <>
-      <Button type={'default'} onClick={() => setIsModalOpen(true)} icon={<PlusOutlined />}>
-        {t('role.create')}
-      </Button>
+      <ActionIcon
+        onClick={() => setIsModalOpen(true)}
+        icon={MessageSquarePlus}
+        size="large"
+        title={t('role.create')}
+      />
 
       <Modal
         allowFullscreen

src/app/role/SideBar/RoleHeader/index.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import CreateRole from './CreateRole';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  logo: css`
+    color: ${token.colorText};
+    fill: ${token.colorText};
+  `,
+  top: css`
+    position: sticky;
+    inset-block-start: 0;
+    height: 64px;
+    line-height: 64px;
+  `,
+}));
+
+const RoleHeader = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('role');
+
+  return (
+    <Flexbox className={styles.top} gap={16} padding={12}>
+      <Flexbox distribution={'space-between'} horizontal>
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Typography.Title level={4} style={{ margin: 0 }}>
+            {t('role.myRole')}
+          </Typography.Title>
+        </Flexbox>
+        <CreateRole />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default RoleHeader;

src/app/role/SideBar/RoleList/index.tsx

@@ -60,7 +60,7 @@ const RoleList = () => {
 
   return (
     <div className={styles.role}>
-      <Flexbox style={{ padding: '16px 8px 0' }}>
+      <Flexbox style={{ padding: '0 8px 0' }} gap={8}>
         <SearchBar
           enableShortKey
           onChange={(e) => {

src/app/role/SideBar/index.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token';
 import { useGlobalStore } from '@/store/global';
 
+import RoleHeader from './RoleHeader';
 import RoleList from './RoleList';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -52,6 +53,7 @@ const SideBar = () => {
       onExpandChange={handleExpand}
       expand={showRoleList}
     >
+      <RoleHeader />
       <RoleList />
     </DraggablePanel>
   );

src/app/role/layout.tsx

@@ -3,7 +3,6 @@
 import { ReactNode, memo } from 'react';
 
 import AppLayout from '@/layout/AppLayout';
-import { HeaderNavKey } from '@/layout/type';
 
 export interface LayoutProps {
   children?: ReactNode;
@@ -12,7 +11,7 @@ export interface LayoutProps {
 const LayoutDesktop = (props: LayoutProps) => {
   const { children } = props;
 
-  return <AppLayout headerKey={HeaderNavKey.Role}>{children}</AppLayout>;
+  return <AppLayout>{children}</AppLayout>;
 };
 
 export default memo(LayoutDesktop);

src/app/settings/@category/default.tsx

@@ -0,0 +1,9 @@
+import CategoryContent from './features/CategoryContent';
+
+const Category = () => {
+  return <CategoryContent />;
+};
+
+Category.displayName = 'SettingCategory';
+
+export default Category;

src/app/settings/@category/features/CategoryContent.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import Menu from '@/components/Menu';
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { SettingsTabs } from '@/store/global/index';
+
+import { useActiveSettingsKey } from '../../hooks/useActiveSettingsKey';
+import { useCategory } from '../../hooks/useCategory';
+
+const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
+  const activeTab = useActiveSettingsKey();
+  const { tab = SettingsTabs.Common } = useQuery();
+  const cateItems = useCategory();
+  const router = useQueryRoute();
+
+  return (
+    <Menu
+      items={cateItems}
+      onClick={({ key }) => {
+        if (modal) {
+          router.replace('/settings/modal', { query: { tab: key } });
+        } else {
+          router.push(urlJoin('/settings', key));
+        }
+      }}
+      selectable
+      selectedKeys={[modal ? tab : (activeTab as any)]}
+      variant={'compact'}
+    />
+  );
+});
+
+export default CategoryContent;