核心主题

核心主题1

本地设置和提交检查

克隆repo后，运行：

npm run setup

这将安装依赖项 npm ci 并配置Git使用共享的 .githooks/pre-commit 钩。钩子在每个组件测试之前运行受影响的组件测试 提交。

如果已经安装了依赖项，运行：

npm run install:hooks

npm run dev， npm test, npm run build 同时刷新钩子设置 自动。Git钩子是本地机器设置，所以是CI和分支保护 保留最终执行权。

页面的验证处理（内置）

当这个库中的页面(例如： AdminPage， JobsListPage)被打开 没有登录会话，数据api拒绝使用401和页面 否则将呈现空（"no module"）而不作任何解释。

这个问题已经解决了 在包装内 -每个导出的页面都已经包装好了 带着一个真正的守卫。主机应用会 没有什么：只是路由到页面，如果 它是在没有会话的情况下打开的，用户看到的是清晰的 “你还没有登录 这个会话。请登录以访问数据。” 屏幕上有 登录 按钮。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AdminPage } from '@realtek/core-theme';
import '@realtek/core-theme/style.css';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* opened without login → shows the "not logged in" screen automatically */}
        <Route path="/admin" element={<AdminPage />} />
      </Routes>
    </BrowserRouter>
  );
}

保护您自己的页面（可选）

对于宿主应用构建的任何自定义页面，都会导出相同的保护：

import { AuthGuard, withAuthGuard } from '@realtek/core-theme';

// wrap inline…
<AuthGuard><MyPage /></AuthGuard>

// …or bake it into your own component, like the library does:
const MyGuardedPage = withAuthGuard(MyPage);

自定义屏幕(AuthGuard / withAuthGuard 道具（所有可选）

守卫重新检查会话的登录、注销、选项卡焦点和 交叉表 storage 更改，因此它显示/隐藏内容而无需重新加载。

谢谢