opt code

Author: vyckey

src/components/tools/PasswordGenerator.tsx

@@ -56,6 +56,7 @@ export default function PasswordGenerator() {
           punctuation: true,
           capital: true,
         }}
+        style={{ marginLeft: 10, marginRight: 10, marginTop: 40 }}
         onFinish={onGeneratePassword}>
         <Form.Item
           name="password"
@@ -72,7 +73,10 @@ export default function PasswordGenerator() {
             { required: true, message: '请输入区分代码' },
             { min: 3, message: '区分代码过短!' },
           ]}>
-          <Input allowClear placeholder="建议使用网站名，比如weixin,taobao,zhihu" />
+          <Input
+            allowClear
+            placeholder="建议使用网站名，比如weixin,taobao,zhihu"
+          />
         </Form.Item>
         <Flex gap="large">
           <Form.Item name="length" label="密码长度">
@@ -107,7 +111,7 @@ export default function PasswordGenerator() {
           <Input value={password} placeholder="请点击生成密码按钮" />
           <Button
             type="primary"
-            style={{ backgroundColor: '#00b4f4' }}
+            style={{ backgroundColor: '#3498db' }}
             onClick={copyPassword}>
             复制密码
           </Button>

src/index.css

@@ -14,12 +14,12 @@ code {
 
 .form-container {
   width: 100%;
-  max-width: 500px;
+  max-width: 600px;
   margin: 0 auto;
 }
 
 @media (min-width: 768px) {
   .form-container {
-    width: 500px;
+    width: 600px;
   }
 }

src/pages/ToolsLayout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   ClockCircleOutlined,
   DiffOutlined,
@@ -35,11 +35,6 @@ const topItems: MenuItem[] = [
     label: '加密/解密',
     icon: <LockOutlined />,
   },
-  {
-    key: 'password',
-    label: '密码生成器',
-    icon: <LockOutlined />,
-  },
   {
     key: 'json',
     label: 'JSON',
@@ -59,6 +54,10 @@ const ToolsLayout: React.FC = () => {
 
   const navigate = useNavigate();
 
+  useEffect(() => {
+    navigate('timestamp');
+  }, []);
+
   const onClickMenu: MenuProps['onClick'] = e => {
     console.log('click ', e);
     // const path = e.keyPath.reverse().join('/')
@@ -71,7 +70,7 @@ const ToolsLayout: React.FC = () => {
         <Menu
           theme="light"
           mode="horizontal"
-          defaultSelectedKeys={['2']}
+          defaultSelectedKeys={['timestamp']}
           style={{ flex: 1, minWidth: 0 }}
           items={topItems}
           onClick={onClickMenu}

src/router/Router.tsx

@@ -19,6 +19,10 @@ const router = createBrowserRouter([
     path: 'home',
     element: <Homepage />,
   },
+  {
+    path: 'tools/password',
+    element: <PasswordGenerator />,
+  },
   {
     path: 'tools',
     element: <ToolsLayout />,
@@ -43,10 +47,6 @@ const router = createBrowserRouter([
         path: 'encryption',
         element: <EncryptionTabs />,
       },
-      {
-        path: 'password',
-        element: <PasswordGenerator />,
-      },
       {
         path: 'qrcode',
         element: <QRCodeGenerator />,