feat: update Sidebar and Login components with icon integration and localization improvements

2026-04-17 16:23:11 +08:00
parent 79bea4f107
commit a2f4eb341e
3 changed files with 52 additions and 35 deletions
--- a/dist/index.html
+++ b/dist/index.html
@@ -8,8 +8,8 @@
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: http://8.138.234.141 https://one-feel-bucket.oss-cn-guangzhou.aliyuncs.com; connect-src 'self' http://8.138.234.141 https://api.iconify.design wss://onefeel.brother7.cn"
    />
-    <script type="module" crossorigin src="./assets/index-XQk97xGQ.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BZXC3Usl.css">
+    <script type="module" crossorigin src="./assets/index-BCaudNKp.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-zlEBzOiw.css">
  </head>
  <body>
    <div id="app"></div>
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,14 +1,15 @@
 import { useLocation, useNavigate } from 'react-router-dom';
+import { Book, Clock, Code, Cpu, House, Puzzle, Settings } from 'lucide-react';
 import { NAV_ITEMS, normalizeWorkspacePath } from '../../router/routes';

-const MENU_MARKS: Record<string, string> = {
-  '/home': '首',
-  '/knowledge': '知',
-  '/agents': '模',
-  '/skills': '技',
-  '/cron': '时',
-  '/scripts': '脚',
-  '/setting': '设',
+const MENU_MARKS: Record<string, typeof House> = {
+  '/home': House,
+  '/knowledge': Book,
+  '/agents': Cpu,
+  '/skills': Puzzle,
+  '/cron': Clock,
+  '/scripts': Code,
+  '/setting': Settings,
 };

 export default function Sidebar() {
@@ -17,11 +18,12 @@ export default function Sidebar() {
  const currentId = normalizeWorkspacePath(location.pathname);

  return (
-    <aside className="w-[80px] h-full box-border flex flex-col items-center pb-[8px]">
-      <div className="flex flex-col gap-[16px] w-full">
+    <aside className="box-border flex h-full w-[80px] flex-col items-center pb-[8px]">
+      <div className="flex w-full flex-col gap-[16px]">
        {NAV_ITEMS.map((item) => {
          const active = currentId === item.path;
          const isSetting = item.path === '/setting';
+          const MenuMark = MENU_MARKS[item.path];

          return (
            <div
@@ -30,25 +32,25 @@ export default function Sidebar() {
            >
              <button
                type="button"
-                className="cursor-pointer flex flex-col items-center justify-center"
+                className="flex cursor-pointer flex-col items-center justify-center"
                onClick={() => navigate(item.path)}
              >
                <div
                  className={[
-                    'box-border rounded-[16px] w-[48px] h-[48px] flex flex-col items-center justify-center hover:bg-white dark:hover:bg-[#222225]',
+                    'box-border flex h-[48px] w-[48px] flex-col items-center justify-center rounded-[16px] hover:bg-white dark:hover:bg-[#222225]',
                    active ? 'bg-white dark:bg-[#222225]' : '',
                  ].join(' ')}
                >
-                  <span
-                    className="text-[18px] font-semibold leading-none"
+                  <MenuMark
+                    aria-hidden="true"
+                    className="h-[18px] w-[18px]"
+                    strokeWidth={2.1}
                    style={{ color: active ? '#2B7FFF' : '#525866' }}
-                  >
-                    {MENU_MARKS[item.path]}
-                  </span>
+                  />
                </div>

                <div
-                  className="text-[14px] mt-[4px] mb-[8px] hover:text-[#2B7FFF]"
+                  className="mt-[4px] mb-[8px] text-[14px] hover:text-[#2B7FFF]"
                  style={{ color: active ? '#2B7FFF' : '#525866' }}
                >
                  {item.label}
@@ -59,7 +61,7 @@ export default function Sidebar() {
        })}
      </div>

-      <div className="w-[48px] h-[48px] rounded-full overflow-hidden mt-auto bg-white dark:bg-[#222225] flex items-center justify-center border border-black/10 dark:border-[#2a2a2d]">
+      <div className="mt-auto flex h-[48px] w-[48px] items-center justify-center overflow-hidden rounded-full border border-black/10 bg-white dark:border-[#2a2a2d] dark:bg-[#222225]">
        <span className="text-[16px] font-bold text-[#2B7FFF]">Z</span>
      </div>
    </aside>
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,5 +1,6 @@
 import { type ChangeEvent, type FormEvent, useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { Lock, User } from 'lucide-react';

 import blueLogo from '../../assets/images/login/blue_logo.png';
 import loginBackground from '../../assets/images/login/login_bg.png';
@@ -25,6 +26,14 @@ const INITIAL_FORM: LoginFormValues = {
  randomStr: '',
 };

+const credentialFieldShellClass =
+  'flex h-11 items-center rounded-[10px] border border-black/10 bg-gray-50 transition focus-within:border-[#2B7FFF] focus-within:ring-2 focus-within:ring-[#2B7FFF]/10 dark:border-[#2a2a2d] dark:bg-[#222225]';
+
+const credentialFieldIconClass = 'ml-4 mr-3 h-4 w-4 shrink-0 text-[#99A0AE] dark:text-gray-500';
+
+const credentialFieldInputClass =
+  'h-full min-w-0 flex-1 border-0 bg-transparent pr-4 text-[14px] text-gray-800 outline-none placeholder:text-[#99A0AE] disabled:cursor-not-allowed dark:text-gray-100 dark:placeholder:text-gray-500';
+
 export default function LoginPage() {
  const navigate = useNavigate();
  const location = useLocation();
@@ -133,37 +142,42 @@ export default function LoginPage() {
          <div className="mb-6 box-border flex flex-col items-center justify-center pt-10">
            <img className="mb-3 h-20 w-20" src={userIcon} alt="" />
            <div className="mb-1 text-[24px] leading-[32px] font-medium text-gray-800 dark:text-gray-100">
-              欢迎回到 zn-ai
+              欢迎回到登录
            </div>
            <div className="text-[16px] leading-[24px] text-gray-500 dark:text-gray-400">
-              请输入账号信息完成登录
+              24小时在岗，从不打烊的数字员工
            </div>
          </div>

          <form className="mx-auto flex w-[392px] flex-col gap-4" onSubmit={handleSubmit}>
            <div>
              <label className="mb-2 block text-[14px] text-gray-600 dark:text-gray-300" htmlFor="login-username">
-                用户名
+                账号
              </label>
-              <input
-                id="login-username"
-                className="h-10 w-full rounded-[10px] border border-black/10 bg-gray-50 px-4 text-[14px] text-gray-800 outline-none transition focus:border-[#2B7FFF] dark:border-[#2a2a2d] dark:bg-[#222225] dark:text-gray-100"
-                autoComplete="username"
-                disabled={submitting}
-                placeholder="请输入用户名"
-                value={form.username}
-                onChange={(event) => handleInputChange('username', event)}
-              />
-              {errors.username ? <div className="pt-2 text-[12px] text-[#dc2626]">{errors.username}</div> : null}
+              <div className={credentialFieldShellClass}>
+                <User aria-hidden="true" className={credentialFieldIconClass} />
+                <input
+                  id="login-username"
+                  className={credentialFieldInputClass}
+                  autoComplete="username"
+                  disabled={submitting}
+                  placeholder="请输入账号"
+                  value={form.username}
+                  onChange={(event) => handleInputChange('username', event)}
+                />
+              </div>
+                {errors.username ? <div className="pt-2 text-[12px] text-[#dc2626]">{errors.username}</div> : null}
            </div>

            <div>
              <label className="mb-2 block text-[14px] text-gray-600 dark:text-gray-300" htmlFor="login-password">
                密码
              </label>
+              <div className={credentialFieldShellClass}>
+                <Lock aria-hidden="true" className={credentialFieldIconClass} />
              <input
                id="login-password"
-                className="h-10 w-full rounded-[10px] border border-black/10 bg-gray-50 px-4 text-[14px] text-gray-800 outline-none transition focus:border-[#2B7FFF] dark:border-[#2a2a2d] dark:bg-[#222225] dark:text-gray-100"
+                className={credentialFieldInputClass}
                autoComplete="current-password"
                disabled={submitting}
                placeholder="请输入密码"
@@ -171,6 +185,7 @@ export default function LoginPage() {
                value={form.password}
                onChange={(event) => handleInputChange('password', event)}
              />
+              </div>
              {errors.password ? <div className="pt-2 text-[12px] text-[#dc2626]">{errors.password}</div> : null}
            </div>