feat: setting data-control

src/app/setting/SettingClient/BtnList/index.tsx

@@ -29,7 +29,7 @@ const SettingBtnList = React.memo<any>(() => {
       {
         icon: Cog,
         title: '数据控制',
-        href: '/setting/user-info',
+        href: '/setting/data-control',
       },
       {
         icon: Settings,

src/app/setting/SettingClient/styles.ts

@@ -2,9 +2,12 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ token }) => ({
   setting: {
-    width: '100%',
-    background: token.colorBgLayout,
-    position: 'relative',
+    'width': '100%',
+    'background': token.colorBgLayout,
+    'position': 'relative',
+    '& > div': {
+      height: '100%',
+    },
   },
   content: {
     maxWidth: '600px',

src/app/setting/data-control/DataControlClient/index.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { Button, Card, Flex, Switch, Table } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+
+import BtnsBlock, { Btn } from '@/components/BtnsBlock';
+import ReturnBtn from '@/components/ReturnBtn';
+
+import { useStyles } from './styles';
+
+interface Props {
+  user: {
+    name: string;
+  };
+}
+
+const DataControlClient: React.FC<Props> = () => {
+  const { styles } = useStyles();
+  const [checked, setChecked] = React.useState(false);
+
+  const btns1: Btn[] = React.useMemo(
+    () => [
+      {
+        title: '聊天记录应用',
+        action: (
+          <Switch
+            checked={checked}
+            onChange={_checked => {
+              setChecked(_checked);
+            }}
+          />
+        ),
+      },
+    ],
+    [checked]
+  );
+  const btns_del_all: Btn[] = React.useMemo(
+    () => [
+      {
+        title: '删除所有聊天记录',
+        danger: true,
+        onClick: () => {
+          console.warn('handel del all');
+        },
+      },
+    ],
+    [checked]
+  );
+  return (
+    <div className={classNames(styles.dataControl)}>
+      <div>
+        <ReturnBtn title="数据控制" to="/setting" />
+        <Flex className={'scrollBar'} justify={'center'}>
+          <div className={classNames(styles.content)}>
+            <BtnsBlock
+              btns={btns1}
+              extra="将此浏览器上的新聊天记录保存到您的历史记录中，并允许我们应用您的聊天记录，改进我们的模型。关闭开关，将不会保留您的聊天记录。此设置不在浏览器或设备之间同步。"
+            />
+            <BtnsBlock btns={btns_del_all} />
+            <Card bordered={false} title="分享链接">
+              <Table
+                className={styles.table}
+                columns={[
+                  {
+                    dataIndex: 'name',
+                    title: '对话名称',
+                    width: '50%',
+                  },
+                  {
+                    dataIndex: 'time',
+                    title: '分享时间',
+                    width: '50%',
+                  },
+                  {
+                    dataIndex: 'opera',
+                    title: '操作',
+                    width: 120,
+                    render: () => {
+                      return (
+                        <Button danger type="primary">
+                          删除
+                        </Button>
+                      );
+                    },
+                  },
+                ]}
+                dataSource={[
+                  {
+                    name: '对话1',
+                    time: '2024-01-01 08:08:08',
+                  },
+                ]}
+                pagination={false}
+              />
+            </Card>
+          </div>
+        </Flex>
+      </div>
+    </div>
+  );
+};
+
+export default DataControlClient;

src/app/setting/data-control/DataControlClient/styles.ts

@@ -0,0 +1,30 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ token }) => ({
+  dataControl: {
+    '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,
+    width: 600,
+  },
+  table: {
+    '.ant-table-tbody > tr:last-child > td': {
+      borderBottom: 'unset',
+    },
+  },
+}));

src/app/setting/data-control/layout.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren, memo } from 'react';
+
+const Layout = memo<PropsWithChildren>(({ children }) => {
+  return <>{children}</>;
+});
+
+export default Layout;

src/app/setting/data-control/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { getUserData } from '../../actions/user';
+import DataControlClient from './DataControlClient';
+
+export default async function DesktopPage() {
+  const user = await getUserData();
+  const props = {
+    user,
+  };
+  // todo fetch server data
+  return (
+    <>
+      <DataControlClient {...props} />
+    </>
+  );
+}

src/components/BtnsBlock/index.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { ActionIcon } from '@lobehub/ui';
-import { Flex } from 'antd';
+import { Button, Flex } from 'antd';
 import { createStyles } from 'antd-style';
-import { ChevronRight, User } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
 
-export const useStyles = createStyles(() => ({
+export const useStyles = createStyles(({ token }) => ({
   btns: {
     marginBottom: 16,
     borderRadius: 16,
@@ -37,10 +37,18 @@ export const useStyles = createStyles(() => ({
     minHeight: '56px',
   },
   content_left: {
-    flex: '1 1',
-    fontSize: 16,
-    fontWeight: '500',
-    lineHeight: '22px',
+    'flex': '1 1',
+    'fontSize': 16,
+    'fontWeight': '500',
+    'lineHeight': '22px',
+    'textAlign': 'left',
+    'paddingLeft': 'unset',
+    '&:hover': {
+      backgroundColor: 'inherit !important',
+    },
+    '&:hover.ant-btn-dangerous': {
+      color: `${token.colorError} !important`,
+    },
   },
   content_right: {
     marginLeft: '8px',
@@ -53,54 +61,74 @@ export const useStyles = createStyles(() => ({
       height: '20px',
     },
   },
+  extra: {
+    color: token.colorTextTertiary,
+    fontSize: token.fontSize,
+    transform: 'translateY(-16px)',
+  },
 }));
 
 export interface Btn {
-  icon: any;
+  icon?: any;
   title: string;
   onClick?: () => void;
   href?: string;
+  danger?: boolean;
+  action?: React.ReactNode | string; // action 和 href 二选一
   icon_bg?: string;
 }
 
 export interface BtnsBlockProps {
   btns: Btn[];
+  extra?: string;
 }
 
 const BtnsBlock = React.memo<BtnsBlockProps>(props => {
   const { styles, theme } = useStyles();
-  const { btns } = props;
+  const { btns, extra } = props;
   return (
-    <div className={styles.btns}>
-      {btns.map((item, idx) => {
-        const icon = item.icon || User;
-        const icon_bg = item.icon_bg || theme.colorPrimary;
-        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>
-            <Flex align={'center'} className={styles.content}>
-              <div className={styles.content_left}>{item.title || '默认标题'}</div>
-              {item.href ? (
-                <Flex align={'center'} className={styles.content_right}>
-                  <ChevronRight color={'rgb(204, 204, 204)'} />
-                </Flex>
+    <>
+      <div className={styles.btns}>
+        {btns.map((item, idx) => {
+          const icon = item.icon;
+          const icon_bg = item.icon_bg || theme.colorPrimary;
+          const key = item.title + idx;
+          const children = (
+            <Flex align={'center'} className={styles.btn} key={key} onClick={item.onClick}>
+              {icon ? (
+                <div className={styles.icon} style={{ backgroundColor: icon_bg }}>
+                  <ActionIcon color={'white'} icon={icon} />
+                </div>
               ) : null}
+              <Flex align={'center'} className={styles.content}>
+                <Button className={styles.content_left} danger={item.danger} type="text">
+                  {item.title || '默认标题'}
+                </Button>
+                {item.href ? (
+                  <Flex align={'center'} className={styles.content_right}>
+                    <ChevronRight color={'rgb(204, 204, 204)'} />
+                  </Flex>
+                ) : null}
+                {item.action ? (
+                  <Flex align={'center'} className={styles.content_right}>
+                    {item.action}
+                  </Flex>
+                ) : null}
+              </Flex>
             </Flex>
-          </Flex>
-        );
-        if (item.href) {
-          return (
-            <Link className={styles.linkWrapper} href={item.href} key={'link-wrapper-' + key}>
-              {children}
-            </Link>
           );
-        }
-        return children;
-      })}
-    </div>
+          if (item.href) {
+            return (
+              <Link className={styles.linkWrapper} href={item.href} key={'link-wrapper-' + key}>
+                {children}
+              </Link>
+            );
+          }
+          return children;
+        })}
+      </div>
+      {extra ? <div className={styles.extra}>{extra}</div> : null}
+    </>
   );
 });
 

src/store/index.ts

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 let store: any;
 
 const initialState = {
-  theme: localStorage.getItem('theme') || 'light', // todo remove: use server
+  theme: typeof window === 'undefined' ? 'light' : localStorage.getItem('theme') || 'light', // todo remove: use server
   activeChat: 'name',
 };