From ceddadbd08f1fae9d89efbab0898380f5fdb3260 Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Wed, 17 Apr 2024 22:14:23 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=88=91=E7=9A=84=20Tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/market/SideBar/MarketList/index.tsx |  4 +-
 src/app/my/Redirect.tsx                     | 21 +++++++++
 src/app/my/SideBar/MyList/Item.tsx          | 50 +++++++++++++++++++++
 src/app/my/SideBar/MyList/index.tsx         | 31 +++++++++++++
 src/app/my/SideBar/index.tsx                | 37 +++++++++++++++
 src/app/my/SideBar/type.ts                  |  4 ++
 src/app/my/agent/layout.tsx                 |  9 ++++
 src/app/my/agent/page.tsx                   | 11 +++++
 src/app/my/dance/layout.tsx                 |  9 ++++
 src/app/my/dance/page.tsx                   | 11 +++++
 src/app/my/layout.desktop.tsx               | 26 +++++++++++
 src/app/my/page.tsx                         |  5 +++
 src/app/my/style.ts                         | 12 +++++
 src/layout/Header/index.tsx                 |  6 ++-
 src/panels/DancePanel/Dance/index.tsx       |  2 +-
 15 files changed, 234 insertions(+), 4 deletions(-)
 create mode 100644 src/app/my/Redirect.tsx
 create mode 100644 src/app/my/SideBar/MyList/Item.tsx
 create mode 100644 src/app/my/SideBar/MyList/index.tsx
 create mode 100644 src/app/my/SideBar/index.tsx
 create mode 100644 src/app/my/SideBar/type.ts
 create mode 100644 src/app/my/agent/layout.tsx
 create mode 100644 src/app/my/agent/page.tsx
 create mode 100644 src/app/my/dance/layout.tsx
 create mode 100644 src/app/my/dance/page.tsx
 create mode 100644 src/app/my/layout.desktop.tsx
 create mode 100644 src/app/my/page.tsx
 create mode 100644 src/app/my/style.ts

diff --git a/src/app/market/SideBar/MarketList/index.tsx b/src/app/market/SideBar/MarketList/index.tsx
index 42e59569..27a37f21 100644
--- a/src/app/market/SideBar/MarketList/index.tsx
+++ b/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 }) => (
diff --git a/src/app/my/Redirect.tsx b/src/app/my/Redirect.tsx
new file mode 100644
index 00000000..4e094162
--- /dev/null
+++ b/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;
diff --git a/src/app/my/SideBar/MyList/Item.tsx b/src/app/my/SideBar/MyList/Item.tsx
new file mode 100644
index 00000000..d9fa7a12
--- /dev/null
+++ b/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;
diff --git a/src/app/my/SideBar/MyList/index.tsx b/src/app/my/SideBar/MyList/index.tsx
new file mode 100644
index 00000000..a2ba36d1
--- /dev/null
+++ b/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;
diff --git a/src/app/my/SideBar/index.tsx b/src/app/my/SideBar/index.tsx
new file mode 100644
index 00000000..505d2c32
--- /dev/null
+++ b/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;
diff --git a/src/app/my/SideBar/type.ts b/src/app/my/SideBar/type.ts
new file mode 100644
index 00000000..23b232c9
--- /dev/null
+++ b/src/app/my/SideBar/type.ts
@@ -0,0 +1,4 @@
+export enum MyTabs {
+  Agent = 'agent',
+  Dance = 'dance',
+}
diff --git a/src/app/my/agent/layout.tsx b/src/app/my/agent/layout.tsx
new file mode 100644
index 00000000..eb28549c
--- /dev/null
+++ b/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>;
+};
diff --git a/src/app/my/agent/page.tsx b/src/app/my/agent/page.tsx
new file mode 100644
index 00000000..25945229
--- /dev/null
+++ b/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;
diff --git a/src/app/my/dance/layout.tsx b/src/app/my/dance/layout.tsx
new file mode 100644
index 00000000..6573ed66
--- /dev/null
+++ b/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>;
+};
diff --git a/src/app/my/dance/page.tsx b/src/app/my/dance/page.tsx
new file mode 100644
index 00000000..f69e0f46
--- /dev/null
+++ b/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;
diff --git a/src/app/my/layout.desktop.tsx b/src/app/my/layout.desktop.tsx
new file mode 100644
index 00000000..3337845a
--- /dev/null
+++ b/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;
diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx
new file mode 100644
index 00000000..46fd2895
--- /dev/null
+++ b/src/app/my/page.tsx
@@ -0,0 +1,5 @@
+import Redirect from '@/app/my/Redirect';
+
+const Index = () => <Redirect />;
+
+export default Index;
diff --git a/src/app/my/style.ts b/src/app/my/style.ts
new file mode 100644
index 00000000..3a1ed92b
--- /dev/null
+++ b/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%;
+  `,
+}));
diff --git a/src/layout/Header/index.tsx b/src/layout/Header/index.tsx
index 1a97d1d7..2aeaefa2 100644
--- a/src/layout/Header/index.tsx
+++ b/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);
diff --git a/src/panels/DancePanel/Dance/index.tsx b/src/panels/DancePanel/Dance/index.tsx
index 04e1b116..50f37e5e 100644
--- a/src/panels/DancePanel/Dance/index.tsx
+++ b/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 />