个人空间页模板

Author: manerfan

src/pages/Modu/Workspace/components/TabHeader.tsx renamed to src/components/common/TabHeader.tsx

@@ -26,12 +26,13 @@ const TabHeader: React.FC<{
   centered?: boolean,
   size?: SizeType;
   sticky?: boolean,
+  className?: string,
   contentNoPpadding?: boolean;
   locationUpdate?: boolean,
   tabBarRender?: boolean,
   defaultActiveKey?: string;
   tabBarExtraContent?: Partial<Record<'left' | 'right', React.ReactNode>>
-}> = ({ items, centered, size, sticky, contentNoPpadding, locationUpdate, tabBarRender, defaultActiveKey, tabBarExtraContent }) => {
+}> = ({ items, centered, size, sticky, className, contentNoPpadding, locationUpdate, tabBarRender, defaultActiveKey, tabBarExtraContent }) => {
   const location = useLocation();
 
   // 选择的菜单KEY
@@ -75,7 +76,7 @@ const TabHeader: React.FC<{
       renderTabBar={!!tabBarRender ? renderTabBar : undefined}
       tabBarExtraContent={tabBarExtraContent}
       items={items}
-      className={ contentNoPpadding ? 'ant-tabs-content-no-padding' : ''}
+      className={`${className} ${contentNoPpadding ? 'ant-tabs-content-no-padding' : ''}`}
     />
   );
 };

src/pages/Modu/Workspace/Setting/index.tsx

@@ -36,7 +36,7 @@ import {
 } from 'antd';
 import { BrainCircuit, Contact } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import TabHeader from '../components/TabHeader';
+import TabHeader from '@/components/common/TabHeader';
 import Providers from './Providers';
 
 const isPublicSpace = (space?: WORKSPACE.WorkspaceEntity) => {

src/pages/Modu/Workspace/Studio/BotEdit/index.tsx

@@ -16,7 +16,7 @@
  */
 
 import { eventBus } from '@/services';
-import TabHeader from '@/pages/Modu/Workspace/components/TabHeader';
+import TabHeader from '@/components/common/TabHeader';
 import { Avatar, Button, Dropdown, Flex, message, Space, TabsProps, Tag, Tooltip, Typography } from 'antd';
 import { BOT } from '@/services/bot/typings';
 import { useEffect, useRef, useState } from 'react';

src/pages/Modu/Workspace/index.tsx

@@ -28,7 +28,7 @@ import { useIntl, useParams } from '@umijs/max';
 import { Avatar, Result, Space, TabsProps, Typography } from 'antd';
 import { BookCopy, Bot, BrainCircuit, } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import TabHeader from './components/TabHeader';
+import TabHeader from '@/components/common/TabHeader';
 import Providers from './Setting/Providers';
 import Studio from './Studio';
 

src/pages/User/index.tsx

@@ -14,8 +14,98 @@
  * limitations under the License.
  */
 
+import TabHeader from "@/components/common/TabHeader";
+import { EditOutlined } from "@ant-design/icons";
+import { FluentEmoji, FluentEmojiProps, Hero, useControls, useCreateStore } from "@lobehub/ui";
+import { Link, useModel, useParams } from "@umijs/max";
+import { Avatar, Button, Flex, Result, Space, TabsProps, Typography } from "antd";
+
 const User: React.FC = () => {
-    return <>User</>;
+    const { initialState } = useModel('@@initialState');
+    const param = useParams();
+
+    const store = useCreateStore();
+    const control: FluentEmojiProps = useControls(
+        {
+            emoji: '😃',
+            size: {
+                max: 128,
+                min: 16,
+                step: 1,
+                value: 64,
+            },
+        },
+        { store },
+    );
+
+    // tab内容
+    const items: TabsProps['items'] = [
+        {
+            key: 'creations',
+            label: <Typography.Text>作品</Typography.Text>,
+            children: <Flex vertical justify="center" align="center" className="h-96"><Hero
+                description="敬请期待，马上到来！"
+                actions={[
+                    {
+                        link: '/modu/chat',
+                        text: '先和我聊聊',
+                        type: 'primary',
+                    },
+                ]}
+                title="<b>. MODU</b> CHAT"
+            /></Flex>,
+        },
+        {
+            key: 'favorites',
+            label: <Typography.Text>收藏</Typography.Text>,
+            children: <Flex vertical justify="center" align="center" className="h-96"><Hero
+                description="敬请期待，马上到来！"
+                actions={[
+                    {
+                        link: '/modu/chat',
+                        text: '先和我聊聊',
+                        type: 'primary',
+                    },
+                ]}
+                title="<b>. MODU</b> CHAT"
+            /></Flex>,
+        },
+    ]
+
+    return (param.userUid !== initialState?.userMe?.uid
+        ? (<Flex vertical justify="center" align="center" className="h-full w-full">
+            <Result
+                status="403"
+                title="403"
+                subTitle="暂未开放对其他用户的空间访问"
+                extra={<Button type="primary"><Link to="/modu/chat">先和我聊聊</Link></Button>}
+            />
+        </Flex>)
+        : (<>
+            <Flex className="px-20 py-10" gap={20}>
+                <Avatar size={64} icon={<FluentEmoji type={'anim'} {...control} />} />
+                <Flex vertical justify="center" align="flex-start" className="h-16 flex-auto">
+                    <Space align="center" className="h-8">
+                        <Typography.Title level={3} className="!m-0">{initialState?.userMe?.name}</Typography.Title>
+                        <Typography.Text type="secondary">{initialState?.userMe?.email}</Typography.Text>
+                    </Space>
+                    <Flex justify="flex-start" align="center" className="h-8" gap={10}>
+                        <Typography.Text type="secondary">这个用户很懒，什么都没有留下</Typography.Text>
+                        <Button type="text" size="small" icon={<Typography.Text type="secondary"><EditOutlined /></Typography.Text>} />
+                    </Flex>
+                </Flex>
+
+            </Flex>
+            <Flex className="px-20 py-5">
+                <TabHeader
+                    className="w-full"
+                    contentNoPpadding
+                    items={items}
+                    defaultActiveKey='creations'
+                />
+            </Flex>
+        </>
+        ));
 };
 
 export default User;

src/wrappers/modu/ModuWrapper.tsx

@@ -46,7 +46,6 @@ import {
   Flex,
   Layout,
   Menu,
-  Popover,
   Space,
   Tooltip,
   Typography,
@@ -74,7 +73,7 @@ const ModuWrapper: React.FC = () => {
   const store = useCreateStore();
   const control: FluentEmojiProps = useControls(
     {
-      emoji: '👤',
+      emoji: '😃',
       size: {
         max: 128,
         min: 16,