feat: 用户信息页

packages/editor/src/pages/user/index.module.less

@@ -0,0 +1,109 @@
+.layout {
+  height: calc(100vh - 64px);
+  overflow: auto;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* 隐藏滚动条 - Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+
+}
+
+.sider {
+  background: #fff;
+}
+
+.menu {
+  height: 100%;
+  border-right: 0;
+}
+
+.content {
+  padding: 24px;
+  background: #f0f2f5;
+}
+
+.breadcrumb {
+  margin-bottom: 16px;
+}
+
+.card {
+  // max-width: 1024px;
+  min-height: calc(100vh - 108px);
+  background-color: #fff;
+  margin: 0 auto;
+}
+
+.headerBanner {
+  height: 130px;
+  background: linear-gradient(to right, #7d3fff, #3f7dff);
+}
+
+.profileContent {
+  margin-top: -64px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.profileInfo {
+  display: flex;
+
+}
+
+.avatar {
+  border-radius: 8px;
+  border: 4px solid #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.changeAvatarBtn {
+  margin-top: 16px;
+}
+
+.userInfo {
+  margin-top: 60px;
+  margin-left: 30px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+
+  h2 {
+    margin-bottom: 4px;
+  }
+
+  p {
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+
+.emailInput {
+  margin-top: 16px;
+  max-width: 300px;
+}
+
+.aboutSection, .settingsSection {
+  margin-top: 24px;
+  width: 100%;
+  max-width: 500px;
+
+  h3 {
+    margin-bottom: 16px;
+    font-weight: 500;
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
+}
+
+.settingsSection {
+  div {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}

packages/editor/src/pages/user/index.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Layout, Menu, Card, Avatar, Input, Button, Select, Breadcrumb } from 'antd';
+import { UserOutlined, ShoppingOutlined, DollarOutlined, SettingOutlined, DeleteOutlined, HomeOutlined } from '@ant-design/icons';
+import styles from './index.module.less';
+
+const { Header, Sider, Content } = Layout;
+const { Option } = Select;
+
+const ProfilePage: React.FC = () => {
+  const [email, setEmail] = useState('[email protected]');
+  const [avatar, setAvatar] = useState('/placeholder.svg?height=100&width=100');
+  const userId = '673a9d4eb3227142511c7e1a';
+  const createdAt = new Date().toLocaleString();
+
+  const handleAvatarChange = () => {
+    const newAvatar = prompt('Enter new avatar URL');
+    if (newAvatar) setAvatar(newAvatar);
+  };
+
+  return (
+    <Layout className={styles.layout}>
+      <Sider className={styles.sider}>
+        <Menu mode="inline" defaultSelectedKeys={['1']} className={styles.menu}>
+          <Menu.Item key="1" icon={<UserOutlined />}>个人信息</Menu.Item>
+          <Menu.Item key="2" icon={<ShoppingOutlined />}>市场中心</Menu.Item>
+          {/* <Menu.Item key="3" icon={<DollarOutlined />></Menu.Item> */}
+          {/* <Menu.Item key="4" icon={<SettingOutlined />}>Settings</Menu.Item> */}
+          <Menu.Item key="5" icon={<DeleteOutlined />}>注销</Menu.Item>
+        </Menu>
+      </Sider>
+      <Layout>
+        <Content className={styles.content}>
+          <div className={styles.card}>
+            <div className={styles.headerBanner} />
+            <div className={styles.profileContent}>
+                <div className={styles.profileInfo}>
+                  <Avatar src={avatar} size={128} className={styles.avatar} />
+                  {/* <Button onClick={handleAvatarChange} className={styles.changeAvatarBtn}>Change Avatar</Button> */}
+                  <div className={styles.userInfo}>
+                    <h2>{email}</h2>
+                    <p>{email}</p>
+                  </div>
+                </div>
+              {/* <Input
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className={styles.emailInput}
+              /> */}
+              <div className={styles.aboutSection}>
+                <h3>关于</h3>
+                <p>User ID: {userId}</p>
+                <p>Created At: {createdAt}</p>
+                <p>Current Organization: {email}&apos;s workspace</p>
+              </div>
+              <div className={styles.settingsSection}>
+                <h3>Settings</h3>
+                <div>
+                  <span>UI Language: </span>
+                  <Select defaultValue="en" style={{ width: 120 }}>
+                    <Option value="en">🇬🇧 English</Option>
+                    <Option value="zh">🇨🇳 中文</Option>
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default ProfilePage;

packages/editor/src/router/index.tsx

@@ -117,6 +117,10 @@ export const router = [
         path: '/feedback/post',
         element: lazyLoad(React.lazy(() => import('@/pages/feedback/IssuePost'))),
       },
+      {
+        path: '/user/profile',
+        element: lazyLoad(React.lazy(() => import('@/pages/user'))),
+      },
       {
         path: '*',
         element: <Navigate to="/404" />,