chore: custom brand color

2025-04-28 10:05:06 +08:00
parent 3fb3381a19
commit fb90d79eb3
12 changed files with 398 additions and 139 deletions
@@ -0,0 +1,135 @@
+import FormButtons from '@/components/form-buttons';
+import SealInput from '@/components/seal-form/seal-input';
+import { PasswordReg } from '@/config';
+import { INPUT_WIDTH } from '@/constants';
+import { updatePassword } from '@/pages/login/apis';
+import { PageContainer } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
+import React from 'react';
+
+interface ProfileProps {
+  username?: string;
+  new_password: string;
+  current_password: string;
+}
+const Profile: React.FC = () => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+
+  const handleOnFinish = async (values: any) => {
+    try {
+      await updatePassword({
+        new_password: values.new_password,
+        current_password: values.current_password
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {}
+  };
+
+  const handleOnFinishFailed = (errorInfo: any) => {
+    console.log('handleOnFinishFailed', errorInfo);
+  };
+  const handleCancel = () => {
+    form.resetFields();
+  };
+
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: intl.formatMessage({ id: 'users.form.updatepassword' }),
+        style: {
+          paddingInline: 'var(--layout-content-header-inlinepadding)'
+        }
+      }}
+      extra={[]}
+    >
+      <Form
+        style={{ width: '524px' }}
+        name="profileForm"
+        form={form}
+        onFinish={handleOnFinish}
+        onFinishFailed={handleOnFinishFailed}
+      >
+        <Form.Item<ProfileProps>
+          name="current_password"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: intl.formatMessage({
+                    id: 'users.form.currentpassword'
+                  })
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Password
+            label={intl.formatMessage({ id: 'users.form.currentpassword' })}
+            required
+            style={{ width: INPUT_WIDTH.default }}
+          ></SealInput.Password>
+        </Form.Item>
+        <Form.Item<ProfileProps>
+          name="new_password"
+          rules={[
+            {
+              required: true,
+              pattern: PasswordReg,
+              message: intl.formatMessage({
+                id: 'users.form.rule.password'
+              })
+            }
+          ]}
+        >
+          <SealInput.Password
+            label={intl.formatMessage({ id: 'users.form.newpassword' })}
+            required
+            style={{ width: INPUT_WIDTH.default }}
+          ></SealInput.Password>
+        </Form.Item>
+        <Form.Item
+          name="confirm_password"
+          dependencies={['new_password']}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'users.password.confirm.empty'
+              })
+            },
+            ({ getFieldValue }) => ({
+              validator(_, value) {
+                if (!value || getFieldValue('new_password') === value) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(
+                  new Error(
+                    intl.formatMessage({ id: 'users.password.confirm.error' })
+                  )
+                );
+              }
+            })
+          ]}
+        >
+          <SealInput.Password
+            required={true}
+            style={{ width: INPUT_WIDTH.default }}
+            label={intl.formatMessage({ id: 'users.password.confirm' })}
+          />
+        </Form.Item>
+        <FormButtons
+          htmlType="submit"
+          onCancel={handleCancel}
+          showCancel={false}
+        ></FormButtons>
+      </Form>
+    </PageContainer>
+  );
+};
+
+export default Profile;
@@ -0,0 +1,30 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import { Button, ColorPicker } from 'antd';
+import React from 'react';
+
+const CustomUI: React.FC = () => {
+  const { setUserSettings, userSettings } = useUserSettings();
+
+  const handleOnChange = (color: any, css: string) => {
+    const colorPrimary = color.toHexString();
+    if (!colorPrimary) return;
+    setUserSettings({
+      ...userSettings,
+      colorPrimary: color.toHexString()
+    });
+  };
+
+  return (
+    <div>
+      <h1>Custom UI Component</h1>
+      <Button type="primary">主题色</Button>
+      <div>
+        <ColorPicker onChange={handleOnChange} format="hex"></ColorPicker>
+      </div>
+    </div>
+  );
+};
+
+CustomUI.displayName = 'CustomUI';
+
+export default CustomUI;
@@ -0,0 +1,125 @@
+import FormButtons from '@/components/form-buttons';
+import SealInput from '@/components/seal-form/seal-input';
+import { PasswordReg } from '@/config';
+import { INPUT_WIDTH } from '@/constants';
+import { updatePassword } from '@/pages/login/apis';
+import { useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
+import React from 'react';
+
+interface ProfileProps {
+  username?: string;
+  new_password: string;
+  current_password: string;
+}
+const Profile: React.FC = () => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+
+  const handleOnFinish = async (values: any) => {
+    try {
+      await updatePassword({
+        new_password: values.new_password,
+        current_password: values.current_password
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {}
+  };
+
+  const handleOnFinishFailed = (errorInfo: any) => {
+    console.log('handleOnFinishFailed', errorInfo);
+  };
+  const handleCancel = () => {
+    form.resetFields();
+  };
+
+  return (
+    <Form
+      style={{ width: '524px' }}
+      name="profileForm"
+      form={form}
+      onFinish={handleOnFinish}
+      onFinishFailed={handleOnFinishFailed}
+    >
+      <Form.Item<ProfileProps>
+        name="current_password"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: intl.formatMessage({
+                  id: 'users.form.currentpassword'
+                })
+              }
+            )
+          }
+        ]}
+      >
+        <SealInput.Password
+          label={intl.formatMessage({ id: 'users.form.currentpassword' })}
+          required
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Password>
+      </Form.Item>
+      <Form.Item<ProfileProps>
+        name="new_password"
+        rules={[
+          {
+            required: true,
+            pattern: PasswordReg,
+            message: intl.formatMessage({
+              id: 'users.form.rule.password'
+            })
+          }
+        ]}
+      >
+        <SealInput.Password
+          label={intl.formatMessage({ id: 'users.form.newpassword' })}
+          required
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Password>
+      </Form.Item>
+      <Form.Item
+        name="confirm_password"
+        dependencies={['new_password']}
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage({
+              id: 'users.password.confirm.empty'
+            })
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue('new_password') === value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(
+                new Error(
+                  intl.formatMessage({ id: 'users.password.confirm.error' })
+                )
+              );
+            }
+          })
+        ]}
+      >
+        <SealInput.Password
+          required={true}
+          style={{ width: INPUT_WIDTH.default }}
+          label={intl.formatMessage({ id: 'users.password.confirm' })}
+        />
+      </Form.Item>
+      <FormButtons
+        htmlType="submit"
+        onCancel={handleCancel}
+        showCancel={false}
+      ></FormButtons>
+    </Form>
+  );
+};
+
+Profile.displayName = 'ModifyPassword';
+
+export default Profile;
@@ -1,134 +1,68 @@
-import FormButtons from '@/components/form-buttons';
-import SealInput from '@/components/seal-form/seal-input';
-import { PasswordReg } from '@/config';
-import { INPUT_WIDTH } from '@/constants';
-import { updatePassword } from '@/pages/login/apis';
+import useTabActive from '@/hooks/use-tab-active';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Form, message } from 'antd';
+import { TabsProps } from 'antd';
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import CustomUI from './components/custom-ui';
+import ModifyPasswordn from './components/modify-password';
+
+const Wrapper = styled.div`
+  .ant-page-header-heading {
+    padding-inline: 8px;
+  }
+`;

-interface ProfileProps {
-  username?: string;
-  new_password: string;
-  current_password: string;
-}
 const Profile: React.FC = () => {
-  const [form] = Form.useForm();
  const intl = useIntl();
+  const { setTabActive, getTabActive, tabsMap } = useTabActive();
+  const [activeKey, setActiveKey] = useState(
+    getTabActive(tabsMap.userSettings) || 'modify-password'
+  );

-  const handleOnFinish = async (values: any) => {
-    try {
-      await updatePassword({
-        new_password: values.new_password,
-        current_password: values.current_password
-      });
-      message.success(intl.formatMessage({ id: 'common.message.success' }));
-    } catch (error) {}
-  };
+  const items: TabsProps['items'] = [
+    {
+      key: 'modify-password',
+      label: intl.formatMessage({ id: 'users.form.updatepassword' }),
+      children: <ModifyPasswordn />
+    },
+    {
+      key: 'custom-ui',
+      label: 'Custom UI',
+      children: <CustomUI />
+    }
+  ];

-  const handleOnFinishFailed = (errorInfo: any) => {
-    console.log('handleOnFinishFailed', errorInfo);
-  };
-  const handleCancel = () => {
-    form.resetFields();
-  };
+  const handleChangeTab = useCallback((key: string) => {
+    setActiveKey(key);
+    setTabActive(tabsMap.userSettings, key);
+  }, []);

  return (
-    <PageContainer
-      ghost
-      header={{
-        title: intl.formatMessage({ id: 'users.form.updatepassword' }),
-        style: {
-          paddingInline: 'var(--layout-content-header-inlinepadding)'
-        }
-      }}
-      extra={[]}
-    >
-      <Form
-        style={{ width: '524px' }}
-        name="profileForm"
-        form={form}
-        onFinish={handleOnFinish}
-        onFinishFailed={handleOnFinishFailed}
-      >
-        <Form.Item<ProfileProps>
-          name="current_password"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: intl.formatMessage({
-                    id: 'users.form.currentpassword'
-                  })
-                }
-              )
-            }
-          ]}
-        >
-          <SealInput.Password
-            label={intl.formatMessage({ id: 'users.form.currentpassword' })}
-            required
-            style={{ width: INPUT_WIDTH.default }}
-          ></SealInput.Password>
-        </Form.Item>
-        <Form.Item<ProfileProps>
-          name="new_password"
-          rules={[
-            {
-              required: true,
-              pattern: PasswordReg,
-              message: intl.formatMessage({
-                id: 'users.form.rule.password'
-              })
-            }
-          ]}
-        >
-          <SealInput.Password
-            label={intl.formatMessage({ id: 'users.form.newpassword' })}
-            required
-            style={{ width: INPUT_WIDTH.default }}
-          ></SealInput.Password>
-        </Form.Item>
-        <Form.Item
-          name="confirm_password"
-          dependencies={['new_password']}
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage({
-                id: 'users.password.confirm.empty'
-              })
-            },
-            ({ getFieldValue }) => ({
-              validator(_, value) {
-                if (!value || getFieldValue('new_password') === value) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(
-                  new Error(
-                    intl.formatMessage({ id: 'users.password.confirm.error' })
-                  )
-                );
-              }
-            })
-          ]}
-        >
-          <SealInput.Password
-            required={true}
-            style={{ width: INPUT_WIDTH.default }}
-            label={intl.formatMessage({ id: 'users.password.confirm' })}
-          />
-        </Form.Item>
-        <FormButtons
-          htmlType="submit"
-          onCancel={handleCancel}
-          showCancel={false}
-        ></FormButtons>
-      </Form>
-    </PageContainer>
+    <Wrapper>
+      <PageContainer
+        ghost
+        header={{
+          title: 'User Settings',
+          style: {
+            paddingInline: 'var(--layout-content-inlinepadding)'
+          }
+        }}
+        tabList={items}
+        onTabChange={handleChangeTab}
+        tabActiveKey={activeKey}
+        tabProps={{
+          type: 'card',
+          style: {
+            marginTop: 78
+          }
+        }}
+        extra={[]}
+      ></PageContainer>
+    </Wrapper>
  );
 };

+Profile.displayName = 'Profile';
+
 export default Profile;