kubeagi · Carrotzpc · Jan 16, 2024 · Jan 16, 2024
diff --git a/src/app/setting/SettingClient/BtnList/index.tsx b/src/app/setting/SettingClient/BtnList/index.tsx
@@ -1,5 +1,6 @@
 import {
   Bot,
+  Cog,
   Info,
   LogOut,
   MessageCircleMore,
@@ -22,8 +23,17 @@ const SettingBtnList = React.memo<any>(() => {
     () => [
       {
         icon: User2Icon,
-        title: '编辑个人资料',
-        href: '/setting/profile',
+        title: '个人资料',
+        href: '/setting/user-info',
+      },
+      {
+        icon: Cog,
+        title: '数据控制',
+        href: '/setting/user-info',
+      },
+      {
+        icon: Settings,
+        title: '账号设置',
       },
     ],
     []
@@ -65,10 +75,6 @@ const SettingBtnList = React.memo<any>(() => {
 
   const btnsSetting: Btn[] = React.useMemo(
     () => [
-      {
-        icon: Settings,
-        title: '账号设置',
-      },
       {
         icon: LogOut,
         title: '退出登录',
@@ -78,8 +84,8 @@ const SettingBtnList = React.memo<any>(() => {
   );
   return (
     <div className={styles.btnlist}>
-      <BtnsBlock btns={btnsUser} />
       <BtnsBlock btns={btnsMy} />
+      <BtnsBlock btns={btnsUser} />
       <BtnsBlock btns={btnsActions} />
       <BtnsBlock btns={btnsSetting} />
     </div>

diff --git a/src/app/setting/SettingClient/Index.tsx b/src/app/setting/SettingClient/Index.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import classNames from 'classnames';
 import React from 'react';
 
 import ReturnBtn from '@/components/ReturnBtn';
@@ -18,11 +17,15 @@ interface SettingProps {
 const Setting = React.memo<SettingProps>(({ user }: SettingProps) => {
   const { styles } = useStyles();
   return (
-    <div className={classNames(styles.setting, 'showScrollBar')}>
-      <ReturnBtn />
-      <div className={styles.content}>
-        <UserInfo user={user} />
-        <BtnList />
+    <div className={styles.setting}>
+      <div>
+        <ReturnBtn />
+        <div className={'scrollBar'}>
+          <div className={styles.content}>
+            <UserInfo user={user} />
+            <BtnList />
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/app/setting/SettingClient/styles.ts b/src/app/setting/SettingClient/styles.ts
@@ -2,15 +2,14 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ token }) => ({
   setting: {
-    height: '100%',
     width: '100%',
     background: token.colorBgLayout,
-    overflowY: 'auto',
     position: 'relative',
   },
   content: {
     maxWidth: '600px',
     margin: '0 auto',
     paddingTop: '64px',
+    paddingBottom: '24px',
   },
 }));
diff --git a/src/app/setting/user-info/UserInfoClient/index.tsx b/src/app/setting/user-info/UserInfoClient/index.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Flex, Form, Input, Upload } from 'antd';
+import type { UploadFile } from 'antd';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+
+import ReturnBtn from '@/components/ReturnBtn';
+
+import { useStyles } from './styles';
+
+const getBase64 = (img: any, callback: (url: string) => void) => {
+  const reader = new FileReader();
+  reader.addEventListener('load', () => callback(reader.result as string));
+  reader.readAsDataURL(img);
+};
+
+interface Props {
+  user: {
+    name: string;
+  };
+}
+
+const normFile = (e: any) => {
+  if (Array.isArray(e)) {
+    return e;
+  }
+  if (!e?.fileList?.length) {
+    return [];
+  }
+  return [e?.fileList[e?.fileList?.length - 1]];
+};
+
+const onFinish = () => {
+  // console.log('values', values)
+};
+const UserInfoClient: React.FC<Props> = () => {
+  const { styles } = useStyles();
+  const [loading, setLoading] = useState(false);
+  const [imageUrl, setImageUrl] = useState<string>();
+  const [form] = Form.useForm();
+
+  const uploadButton = (
+    <div className={styles.uploadText}>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div>上传头像</div>
+    </div>
+  );
+
+  return (
+    <div className={classNames(styles.userInfo)}>
+      <div>
+        <ReturnBtn title="个人资料" to="/setting" />
+        <Flex className={classNames(styles.content, 'scrollBar')} justify={'center'}>
+          <Form form={form} layout="vertical" onFinish={onFinish}>
+            <Form.Item getValueFromEvent={normFile} name="avatar" valuePropName="fileList">
+              <Upload
+                accept={'image/png, image/jpeg, image/jpg'}
+                beforeUpload={(file: any) => {
+                  // const isLt10M = file.size / 1024 / 1024 <= 5;
+                  // if (!isLt10M) {
+                  //   notification.warn({
+                  //     message: '不能大于 5MB!',
+                  //   });
+                  //   return Promise.reject();
+                  // }
+                  return Promise.resolve(file);
+                }}
+                customRequest={(options: any) => {
+                  const { onSuccess, file } = options;
+                  file.status = 'done';
+                  onSuccess(file.uid);
+                  getBase64(file as UploadFile, url => {
+                    setLoading(false);
+                    setImageUrl(url);
+                  });
+                }}
+                listType="picture-circle"
+                onChange={({ file }) => {
+                  file.status = 'done';
+                }}
+                showUploadList={false}
+              >
+                {imageUrl ? (
+                  <img alt="avatar" src={imageUrl} style={{ width: '100%' }} />
+                ) : (
+                  uploadButton
+                )}
+              </Upload>
+            </Form.Item>
+            <Form.Item
+              label="昵称"
+              name="nickname"
+              rules={[{ required: true, message: '请输入昵称' }]}
+            >
+              <Input placeholder="请输入昵称" size="large" />
+            </Form.Item>
+            <Form.Item
+              extra={'只能使用字母、数字以及下划线，长度为 4-16 个字符'}
+              label="账号"
+              name="id"
+              rules={[{ required: true, message: '请输入账号' }]}
+            >
+              <Input placeholder="请输入账号" size="large" />
+            </Form.Item>
+            {/* <Form.Item name="pwd" initialValue={'******'} label="登录密码">
+              <Input.Password size="large" disabled />
+            </Form.Item> */}
+            <Form.Item>
+              <Button className={styles.sub} htmlType={'submit'} size="large" type="primary">
+                完成
+              </Button>
+            </Form.Item>
+          </Form>
+        </Flex>
+      </div>
+    </div>
+  );
+};
+
+export default UserInfoClient;
diff --git a/src/app/setting/user-info/UserInfoClient/styles.ts b/src/app/setting/user-info/UserInfoClient/styles.ts
@@ -0,0 +1,46 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ token }) => ({
+  userInfo: {
+    'height': '100%',
+    'width': '100%',
+    'background': token.colorBgLayout,
+    'position': 'relative',
+    '& > div': {
+      position: 'relative',
+      overflow: 'hidden',
+      height: '100%',
+      paddingBottom: '40px',
+      paddingTop: '64px',
+    },
+  },
+  sub: {
+    width: '100%',
+  },
+  content: {
+    'paddingTop': 16,
+    'paddingBottom': 42,
+    '.ant-form': {
+      width: 600,
+    },
+    '.ant-upload-wrapper': {
+      textAlign: 'center',
+      position: 'relative',
+    },
+    '.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload.ant-upload-select': {
+      overflow: 'hidden',
+      border: 'unset',
+    },
+    '.ant-input-lg': {
+      borderRadius: token.borderRadius,
+      padding: '8px 11px',
+    },
+  },
+  uploadText: {
+    'border': 0,
+    'background': 'none',
+    '& > div': {
+      marginTop: 4,
+    },
+  },
+}));
diff --git a/src/app/setting/user-info/layout.tsx b/src/app/setting/user-info/layout.tsx
@@ -0,0 +1,7 @@
+import { PropsWithChildren, memo } from 'react';
+
+const Layout = memo<PropsWithChildren>(({ children }) => {
+  return <>{children}</>;
+});
+
+export default Layout;
diff --git a/src/app/setting/user-info/page.tsx b/src/app/setting/user-info/page.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { getUserData } from '../../actions/user';
+import UserInfoClient from './UserInfoClient';
+
+export default async function DesktopPage() {
+  const user = await getUserData();
+  const props = {
+    user,
+  };
+  // todo fetch server data
+  return (
+    <>
+      <UserInfoClient {...props} />
+    </>
+  );
+}
diff --git a/src/components/BtnsBlock/index.tsx b/src/components/BtnsBlock/index.tsx
@@ -4,6 +4,7 @@ import { ActionIcon } from '@lobehub/ui';
 import { Flex } from 'antd';
 import { createStyles } from 'antd-style';
 import { ChevronRight, User } from 'lucide-react';
+import Link from 'next/link';
 import React from 'react';
 
 export const useStyles = createStyles(() => ({
@@ -14,6 +15,12 @@ export const useStyles = createStyles(() => ({
     overflowY: 'auto',
     width: '100%',
   },
+  linkWrapper: {
+    'color': 'inherit',
+    '&:hover': {
+      color: 'inherit',
+    },
+  },
   btn: {
     'width': '100%',
     'background': 'white',
@@ -68,8 +75,9 @@ const BtnsBlock = React.memo<BtnsBlockProps>(props => {
       {btns.map((item, idx) => {
         const icon = item.icon || User;
         const icon_bg = item.icon_bg || theme.colorPrimary;
-        return (
-          <Flex align={'center'} className={styles.btn} key={item.title + idx}>
+        const key = item.title + idx;
+        const children = (
+          <Flex align={'center'} className={styles.btn} key={key}>
             <div className={styles.icon} style={{ backgroundColor: icon_bg }}>
               <ActionIcon color={'white'} icon={icon} />
             </div>
@@ -83,6 +91,14 @@ const BtnsBlock = React.memo<BtnsBlockProps>(props => {
             </Flex>
           </Flex>
         );
+        if (item.href) {
+          return (
+            <Link className={styles.linkWrapper} href={item.href} key={'link-wrapper-' + key}>
+              {children}
+            </Link>
+          );
+        }
+        return children;
       })}
     </div>
   );

diff --git a/src/components/ReturnBtn/index.tsx b/src/components/ReturnBtn/index.tsx
@@ -11,9 +11,11 @@ export const useStyles = createStyles(() => ({
   returnBtn: {
     padding: '0 16px',
     height: '64px',
-    position: 'fixed',
+    position: 'absolute',
     top: 0,
     width: '100%',
+    zIndex: 9,
+    overflowY: 'auto',
   },
   btn: {
     borderRadius: '12px !important',
@@ -22,10 +24,20 @@ export const useStyles = createStyles(() => ({
       height: 25,
     },
   },
+  title: {
+    flex: '1 1',
+    alignItems: 'center',
+    display: 'flex',
+    fontWeight: 590,
+    fontSize: 16,
+    flexDirection: 'column',
+    marginLeft: '-40px',
+  },
 }));
 
 interface ReturnBtnProps {
   to?: string;
+  title?: string;
 }
 
 const ReturnBtn = React.memo<ReturnBtnProps>(props => {
@@ -36,6 +48,7 @@ const ReturnBtn = React.memo<ReturnBtnProps>(props => {
       <Link href={to || '/chat'}>
         <ActionIcon className={styles.btn} icon={ChevronLeft} />
       </Link>
+      <div className={styles.title}>{props.title}</div>
     </Flex>
   );
 });

diff --git a/src/layout/AppLayout/SideBar/Chats/index.module.css b/src/layout/AppLayout/SideBar/Chats/index.module.css
@@ -2,7 +2,6 @@
   position: relative;
   overflow-y: auto;
   flex: 1 1 0%;
-  padding-right: 8px;
 }
 
 .content {

diff --git a/src/layout/AppLayout/SideBar/Chats/index.tsx b/src/layout/AppLayout/SideBar/Chats/index.tsx
@@ -9,7 +9,7 @@ import styles from './index.module.css';
 const Chats: any = async () => {
   const list = await getChatList();
   return (
-    <div className={classnames(styles.chats, 'showScrollBar')}>
+    <div className={classnames(styles.chats, 'scrollBar')}>
       <div className={styles.content}>
         {list.map((item: any, idx: number) => (
           <ChatItem data={item} key={item.name + idx} />