✨ feat: 添加我的 Tab

src/app/market/SideBar/MarketList/index.tsx

@@ -12,8 +12,8 @@ export interface MarketListProps {
 
 const MarketList = memo<MarketListProps>(({ activeTab, mobile }) => {
   const items = [
-    { icon: Bot, label: '角色', value: MarketTabs.Agent },
-    { icon: Mic2, label: '跳舞', value: MarketTabs.Dance },
+    { icon: Bot, label: '角色订阅', value: MarketTabs.Agent },
+    { icon: Mic2, label: '舞蹈订阅', value: MarketTabs.Dance },
   ];
 
   return items.map(({ value, icon, label }) => (

src/app/my/Redirect.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+const Redirect = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    // const hasData = localStorage.getItem('V_IDOL_WELCOME');
+    // if (hasData) {
+    router.push('/my/agent');
+    // } else {
+    //   router.push('/welcome');
+    // }
+  }, []);
+
+  return null;
+};
+
+export default Redirect;

src/app/my/SideBar/MyList/Item.tsx

@@ -0,0 +1,50 @@
+import { Icon, List } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { ChevronRight, type LucideIcon } from 'lucide-react';
+import { CSSProperties, ReactNode, memo } from 'react';
+
+const { Item } = List;
+
+const useStyles = createStyles(({ css, token, responsive }) => ({
+  container: css`
+    position: relative;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    border-radius: ${token.borderRadius}px;
+    ${responsive.mobile} {
+      border-radius: 0;
+    }
+  `,
+  noHover: css`
+    pointer-events: none;
+  `,
+}));
+
+export interface ItemProps {
+  active?: boolean;
+  className?: string;
+  hoverable?: boolean;
+  icon: LucideIcon;
+  label: ReactNode;
+  style?: CSSProperties;
+}
+
+const SettingItem = memo<ItemProps>(
+  ({ label, icon, hoverable = true, active = false, style, className }) => {
+    const { cx, styles } = useStyles();
+    const { mobile } = useResponsive();
+    return (
+      <Item
+        active={active}
+        avatar={<Icon icon={icon} size={{ fontSize: 20 }} />}
+        className={cx(styles.container, !hoverable && styles.noHover, className)}
+        style={style}
+        title={label as string}
+      >
+        {mobile && <Icon icon={ChevronRight} size={{ fontSize: 16 }} />}
+      </Item>
+    );
+  },
+);
+
+export default SettingItem;

src/app/my/SideBar/MyList/index.tsx

@@ -0,0 +1,31 @@
+import { Bot, Mic2 } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+
+import { MyTabs } from '../type';
+import Item from './Item';
+
+export interface MyListProps {
+  activeTab?: MyTabs;
+  mobile?: boolean;
+}
+
+const MyList = memo<MyListProps>(({ activeTab, mobile }) => {
+  const items = [
+    { icon: Bot, label: '我的角色', value: MyTabs.Agent },
+    { icon: Mic2, label: '我的舞蹈', value: MyTabs.Dance },
+  ];
+
+  return items.map(({ value, icon, label }) => (
+    <Link aria-label={label} href={`/my/${value}`} key={value}>
+      <Item
+        active={mobile ? false : activeTab === value}
+        hoverable={!mobile}
+        icon={icon}
+        label={label}
+      />
+    </Link>
+  ));
+});
+
+export default MyList;

src/app/my/SideBar/index.tsx

@@ -0,0 +1,37 @@
+import { createStyles, useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import MyList, { MyListProps } from './MyList';
+
+const useStyles = createStyles(({ token, css }) => ({
+  container: css`
+    border-inline-end: 1px solid ${token.colorBorder};
+  `,
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    font-size: 20px;
+    font-weight: bold;
+  `,
+}));
+
+const SideBar = memo<MyListProps>(({ activeTab }) => {
+  const { styles } = useStyles();
+
+  const { mobile } = useResponsive();
+
+  return (
+    <Flexbox className={styles.container} width={280}>
+      <Flexbox className={styles.top} padding={16}>
+        我的
+      </Flexbox>
+      <Flexbox gap={8} style={{ paddingInline: 8 }}>
+        <MyList activeTab={activeTab} mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default SideBar;

src/app/my/SideBar/type.ts

@@ -0,0 +1,4 @@
+export enum MyTabs {
+  Agent = 'agent',
+  Dance = 'dance',
+}

src/app/my/agent/layout.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+import { MyTabs } from '@/app/my/SideBar/type';
+
+import MyLayout from '../layout.desktop';
+
+export default ({ children }: PropsWithChildren) => {
+  return <MyLayout activeTab={MyTabs.Agent}>{children}</MyLayout>;
+};

src/app/my/agent/page.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import React from 'react';
+
+import MyAgent from '@/panels/AgentPanel/Agent';
+
+const Market = () => {
+  return <MyAgent />;
+};
+
+export default Market;

src/app/my/dance/layout.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+import { MyTabs } from '@/app/my/SideBar/type';
+
+import MyLayout from '../layout.desktop';
+
+export default ({ children }: PropsWithChildren) => {
+  return <MyLayout activeTab={MyTabs.Dance}>{children}</MyLayout>;
+};

src/app/my/dance/page.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import React from 'react';
+
+import MyDance from '@/panels/DancePanel/Dance';
+
+const Market = () => {
+  return <MyDance />;
+};
+
+export default Market;

src/app/my/layout.desktop.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SideBar from '@/app/my/SideBar';
+import { MyTabs } from '@/app/my/SideBar/type';
+
+export interface LayoutProps {
+  activeTab: MyTabs;
+  children?: ReactNode;
+}
+
+const LayoutDesktop = (props: LayoutProps) => {
+  const { children, activeTab } = props;
+  return (
+    <Flexbox flex={1} height={'100%'} width={'100%'} style={{ position: 'relative' }} horizontal>
+      <SideBar activeTab={activeTab} />
+      <Flexbox align={'center'} flex={1} style={{ overflow: 'scroll' }}>
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default LayoutDesktop;

src/app/my/page.tsx

@@ -0,0 +1,5 @@
+import Redirect from '@/app/my/Redirect';
+
+const Index = () => <Redirect />;
+
+export default Index;

src/app/my/style.ts

@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => ({
+  content: css`
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+
+    width: 100%;
+    height: 100%;
+  `,
+}));

src/layout/Header/index.tsx

@@ -26,7 +26,7 @@ const Header = () => {
           items={[
             {
               key: 'home',
-              label: '首页',
+              label: '互动',
             },
             {
               key: 'chat',
@@ -36,6 +36,10 @@ const Header = () => {
               key: 'market',
               label: '发现',
             },
+            {
+              key: 'my',
+              label: '我的',
+            },
           ]}
           onChange={(key) => {
             setActiveKey(key);

src/panels/DancePanel/Dance/index.tsx

@@ -19,7 +19,7 @@ const Dance = (props: DanceProps) => {
   return (
     <div className={classNames(className, styles.container)} style={style}>
       <div className={styles.content}>
-        <TopBanner title={"Let's Dance"} />
+        <TopBanner title={"Hi, Let's Dance!"} />
         <DanceList setTab={setTab} />
       </div>
       <DanceCard />