ess-main-template 1.0.0

package/src/pages/404.tsx

@@ -0,0 +1,23 @@
+import { Button, Result } from 'antd'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+
+const NotFound: React.FC = () => {
+  const navigate = useNavigate()
+  const { t } = useTranslation('common')
+
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle={t('noData')}
+      extra={
+        <Button type="primary" onClick={() => navigate('/')}>
+          {t('backHome')}
+        </Button>
+      }
+    />
+  )
+}
+
+export default NotFound

package/src/pages/Dashboard/index.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from 'react-i18next'
+
+const Dashboard: React.FC = () => {
+  const { t } = useTranslation('menu')
+
+  return (
+    <div>
+      <h2>{t('dashboard')}</h2>
+      <p>Dashboard placeholder</p>
+    </div>
+  )
+}
+
+export default Dashboard
+export const Component = Dashboard

package/src/pages/Login/index.module.less

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.card {
+  width: 400px;
+  padding: 40px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.title {
+  margin-bottom: 32px;
+  font-size: 24px;
+  font-weight: 600;
+  text-align: center;
+  color: #333;
+}

package/src/pages/Login/index.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { Button, Form, Input, message } from 'antd'
+import { LockOutlined, UserOutlined } from '@ant-design/icons'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useUserStore } from '@/store/userStore'
+import { login } from '@/services/auth'
+import type { LoginParams } from '@/services/auth'
+import styles from './index.module.less'
+
+const LoginPage: React.FC = () => {
+  const navigate = useNavigate()
+  const { t } = useTranslation('auth')
+  const setAuth = useUserStore((s) => s.setAuth)
+  const [form] = Form.useForm<LoginParams>()
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (values: LoginParams) => {
+    setLoading(true)
+    try {
+      const { data: res } = await login(values)
+      if (res.code === 0) {
+        setAuth(res.data.accessToken, res.data.refreshToken)
+        message.success(t('loginSuccess'))
+        navigate('/', { replace: true })
+      } else {
+        message.error(res.message || t('loginFailed'))
+      }
+    } catch {
+      message.error(t('loginFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1 className={styles.title}>{t('loginTitle')}</h1>
+        <Form form={form} onFinish={handleSubmit} size="large" autoComplete="off">
+          <Form.Item name="username" rules={[{ required: true, message: t('usernameRequired') }]}>
+            <Input prefix={<UserOutlined />} placeholder={t('usernamePlaceholder')} />
+          </Form.Item>
+          <Form.Item name="password" rules={[{ required: true, message: t('passwordRequired') }]}>
+            <Input.Password prefix={<LockOutlined />} placeholder={t('passwordPlaceholder')} />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit" loading={loading} block>
+              {t('loginButton')}
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  )
+}
+
+export default LoginPage

package/src/router/AppEntry.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState, useMemo } from 'react'
+import { Navigate, useRoutes } from 'react-router-dom'
+import { Spin } from 'antd'
+import { useUserStore } from '@/store/userStore'
+import { getUserInfo, getUserRoutes, getUserStations } from '@/services/auth'
+import BasicLayout from '@/layouts/BasicLayout'
+import { generateRoutes } from './generateRoutes'
+
+const AppEntry: React.FC = () => {
+  const token = useUserStore((s) => s.token)
+  const dynamicRoutes = useUserStore((s) => s.dynamicRoutes)
+  const setUserInfo = useUserStore((s) => s.setUserInfo)
+  const setPermissions = useUserStore((s) => s.setPermissions)
+  const setDynamicRoutes = useUserStore((s) => s.setDynamicRoutes)
+  const setAuthorizedStations = useUserStore((s) => s.setAuthorizedStations)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!token) {
+      setLoading(false)
+      return
+    }
+
+    let cancelled = false
+
+    async function fetchUserData() {
+      try {
+        const [infoRes, routesRes, stationsRes] = await Promise.all([
+          getUserInfo(),
+          getUserRoutes(),
+          getUserStations(),
+        ])
+        if (cancelled) return
+
+        if (infoRes.data.code === 0) {
+          setUserInfo(infoRes.data.data)
+          setPermissions(infoRes.data.data.roles)
+        }
+        if (routesRes.data.code === 0) {
+          setDynamicRoutes(routesRes.data.data)
+        }
+        if (stationsRes.data.code === 0) {
+          setAuthorizedStations(stationsRes.data.data)
+        }
+      } catch {
+        // token 无效等异常由 axios 拦截器处理
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+
+    fetchUserData()
+    return () => {
+      cancelled = true
+    }
+  }, [token, setUserInfo, setPermissions, setDynamicRoutes, setAuthorizedStations])
+
+  const childRoutes = useMemo(() => {
+    if (!dynamicRoutes.length) return []
+    const routes = generateRoutes(dynamicRoutes)
+    // 默认重定向到第一条路由
+    const firstPath = dynamicRoutes[0]?.path || '/dashboard'
+    routes.unshift({ index: true, element: <Navigate to={firstPath} replace /> })
+    routes.push({ path: '*', element: <Navigate to={firstPath} replace /> })
+    return routes
+  }, [dynamicRoutes])
+
+  const element = useRoutes([
+    {
+      path: '/',
+      element: <BasicLayout />,
+      children: childRoutes,
+    },
+  ])
+
+  if (!token) {
+    return <Navigate to="/login" replace />
+  }
+
+  if (loading) {
+    return (
+      <div
+        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
+      >
+        <Spin size="large" />
+      </div>
+    )
+  }
+
+  return element
+}
+
+export default AppEntry

package/src/router/AuthGuard.tsx

@@ -0,0 +1,19 @@
+import { Navigate, useLocation } from 'react-router-dom'
+import { useUserStore } from '@/store/userStore'
+
+interface AuthGuardProps {
+  children: React.ReactNode
+}
+
+const AuthGuard: React.FC<AuthGuardProps> = ({ children }) => {
+  const token = useUserStore((s) => s.token)
+  const location = useLocation()
+
+  if (!token) {
+    return <Navigate to="/login" state={{ from: location }} replace />
+  }
+
+  return <>{children}</>
+}
+
+export default AuthGuard

package/src/router/componentMap.ts

@@ -0,0 +1,14 @@
+import { lazy } from 'react'
+import type { ComponentType } from 'react'
+
+type LazyComponent = React.LazyExoticComponent<ComponentType>
+
+/** 页面组件映射：后端返回的 component 字段 → React.lazy 组件 */
+const componentMap: Record<string, LazyComponent> = {
+  'pages/Dashboard': lazy(() => import('@/pages/Dashboard')),
+  // 子应用占位：后续步骤中添加 SubApp 容器组件
+  // 'sub-operation': lazy(() => import('@/pages/SubApp/Operation')),
+  // 'sub-analysis': lazy(() => import('@/pages/SubApp/Analysis')),
+}
+
+export default componentMap

package/src/router/generateRoutes.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable react-refresh/only-export-components */
+import { Suspense } from 'react'
+import { Navigate } from 'react-router-dom'
+import type { RouteObject } from 'react-router-dom'
+import type { RouteItem } from '@/store/userStore'
+import componentMap from './componentMap'
+
+/** 403 占位（后续步骤替换为真实 403 页面） */
+const Forbidden = () => <div style={{ padding: 48, textAlign: 'center' }}>403 - 无权访问</div>
+
+/** 将后端路由数据转换为 react-router RouteObject */
+export function generateRoutes(routes: RouteItem[]): RouteObject[] {
+  return routes.map((route) => {
+    // 取路径最后一段作为相对路径，确保嵌套路由正确匹配
+    // /dashboard → dashboard, /operation/devices → devices
+    const segments = route.path.split('/').filter(Boolean)
+    const relativePath = segments[segments.length - 1] || route.path
+
+    const routeObj: RouteObject = {
+      path: relativePath,
+    }
+
+    // 叶子节点：匹配组件
+    if (route.component) {
+      const LazyComp = componentMap[route.component]
+      if (LazyComp) {
+        routeObj.element = (
+          <Suspense fallback={<div>Loading...</div>}>
+            <LazyComp />
+          </Suspense>
+        )
+      } else {
+        // 组件未注册，显示 403
+        routeObj.element = <Forbidden />
+      }
+    }
+
+    // 有子路由
+    if (route.children?.length) {
+      routeObj.children = generateRoutes(route.children)
+      // 父级路由默认重定向到第一个子路由（使用相对路径）
+      if (!route.component && route.children[0]) {
+        const firstChildSegments = route.children[0].path.split('/').filter(Boolean)
+        const firstChildRelative =
+          firstChildSegments[firstChildSegments.length - 1] || route.children[0].path
+        routeObj.children.unshift({
+          index: true,
+          element: <Navigate to={firstChildRelative} replace />,
+        })
+      }
+    }
+
+    return routeObj
+  })
+}

package/src/router/index.tsx

@@ -0,0 +1,18 @@
+import { createBrowserRouter } from 'react-router-dom'
+import BlankLayout from '@/layouts/BlankLayout'
+import LoginPage from '@/pages/Login'
+import AppEntry from './AppEntry'
+
+const router = createBrowserRouter([
+  {
+    path: '/login',
+    element: <BlankLayout />,
+    children: [{ index: true, element: <LoginPage /> }],
+  },
+  {
+    path: '/*',
+    element: <AppEntry />,
+  },
+])
+
+export default router

package/src/services/auth.ts

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export interface LoginParams {
+  username: string
+  password: string
+}
+
+export interface LoginResult {
+  accessToken: string
+  refreshToken: string
+}
+
+export interface ApiResponse<T = unknown> {
+  code: number
+  message: string
+  data: T
+}
+
+/** 登录 */
+export function login(data: LoginParams) {
+  return request.post<ApiResponse<LoginResult>>('/auth/login', data)
+}
+
+/** 获取用户信息 */
+export function getUserInfo() {
+  return request.get<ApiResponse<import('@/store/userStore').UserInfo>>('/user/info')
+}
+
+/** 获取权限路由 */
+export function getUserRoutes() {
+  return request.get<ApiResponse<import('@/store/userStore').RouteItem[]>>('/user/routes')
+}
+
+/** 获取授权站点 */
+export function getUserStations() {
+  return request.get<ApiResponse<import('@/store/userStore').Station[]>>('/user/stations')
+}
+
+/** 刷新 Token */
+export function refreshToken() {
+  return request.post<ApiResponse<LoginResult>>('/auth/refresh')
+}

package/src/store/appStore.ts

@@ -0,0 +1,51 @@
+import { create } from 'zustand'
+import { STORAGE_KEYS } from '@/constants'
+
+export type Theme = 'light' | 'dark'
+export type Locale = 'zh' | 'en'
+
+interface AppState {
+  theme: Theme
+  locale: Locale
+  sidebarCollapsed: boolean
+  currentStation: string | null
+}
+
+interface AppActions {
+  setTheme: (theme: Theme) => void
+  toggleTheme: () => void
+  setLocale: (locale: Locale) => void
+  setSidebarCollapsed: (collapsed: boolean) => void
+  toggleSidebar: () => void
+  setCurrentStation: (stationId: string | null) => void
+}
+
+export const useAppStore = create<AppState & AppActions>()((set) => ({
+  theme: (localStorage.getItem(STORAGE_KEYS.THEME) as Theme) || 'light',
+  locale: (localStorage.getItem(STORAGE_KEYS.LOCALE) as Locale) || 'zh',
+  sidebarCollapsed: false,
+  currentStation: null,
+
+  setTheme: (theme) => {
+    localStorage.setItem(STORAGE_KEYS.THEME, theme)
+    set({ theme })
+  },
+
+  toggleTheme: () =>
+    set((state) => {
+      const next = state.theme === 'light' ? 'dark' : 'light'
+      localStorage.setItem(STORAGE_KEYS.THEME, next)
+      return { theme: next }
+    }),
+
+  setLocale: (locale) => {
+    localStorage.setItem(STORAGE_KEYS.LOCALE, locale)
+    set({ locale })
+  },
+
+  setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+
+  toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
+
+  setCurrentStation: (stationId) => set({ currentStation: stationId }),
+}))

package/src/store/userStore.ts

@@ -0,0 +1,81 @@
+import { create } from 'zustand'
+import { STORAGE_KEYS } from '@/constants'
+import { setTokens, clearTokens } from '@/utils/auth'
+
+export interface Station {
+  id: string
+  name: string
+}
+
+export interface UserInfo {
+  id: string
+  username: string
+  realName: string
+  avatar?: string
+  roles: string[]
+}
+
+export interface RouteItem {
+  path: string
+  name: string
+  icon?: string
+  component?: string
+  children?: RouteItem[]
+  meta?: {
+    title: string
+    hideInMenu?: boolean
+    permissions?: string[]
+  }
+}
+
+interface UserState {
+  token: string | null
+  refreshToken: string | null
+  userInfo: UserInfo | null
+  permissions: string[]
+  dynamicRoutes: RouteItem[]
+  authorizedStations: Station[]
+}
+
+interface UserActions {
+  setAuth: (token: string, refreshToken: string) => void
+  setUserInfo: (info: UserInfo) => void
+  setPermissions: (permissions: string[]) => void
+  setDynamicRoutes: (routes: RouteItem[]) => void
+  setAuthorizedStations: (stations: Station[]) => void
+  logout: () => void
+}
+
+const initialState: UserState = {
+  token: localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN),
+  refreshToken: localStorage.getItem(STORAGE_KEYS.REFRESH_TOKEN),
+  userInfo: null,
+  permissions: [],
+  dynamicRoutes: [],
+  authorizedStations: [],
+}
+
+export const useUserStore = create<UserState & UserActions>()((set) => ({
+  ...initialState,
+
+  setAuth: (token, refreshToken) => {
+    setTokens(token, refreshToken)
+    set({ token, refreshToken })
+  },
+
+  setUserInfo: (info) => {
+    localStorage.setItem(STORAGE_KEYS.USER_INFO, JSON.stringify(info))
+    set({ userInfo: info })
+  },
+
+  setPermissions: (permissions) => set({ permissions }),
+
+  setDynamicRoutes: (routes) => set({ dynamicRoutes: routes }),
+
+  setAuthorizedStations: (stations) => set({ authorizedStations: stations }),
+
+  logout: () => {
+    clearTokens()
+    set({ ...initialState, token: null, refreshToken: null })
+  },
+}))

package/src/styles/global.less

@@ -0,0 +1,40 @@
+@import './variables.less';
+@import './mixins.less';
+@import './reset.less';
+
+// 自定义字体声明
+@font-face {
+  font-family: 'CustomFont';
+  src:
+    url('../assets/fonts/CustomFont.woff2') format('woff2'),
+    url('../assets/fonts/CustomFont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+// 全局基础样式
+body {
+  font-family: @font-family;
+  font-size: @font-size-base;
+  color: @text-color;
+  background: @bg-layout;
+}
+
+// 字体加载状态管理
+.fonts-loading {
+  // 字体加载中使用系统字体（保持布局稳定）
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+}
+
+// 全局滚动条美化
+body {
+  .custom-scrollbar();
+}
+
+// 全局选中色
+::selection {
+  background: fade(@color-primary, 20%);
+}

package/src/styles/mixins.less

@@ -0,0 +1,56 @@
+// 文字省略
+.text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 多行省略
+.text-ellipsis-lines(@lines: 2) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: @lines;
+  overflow: hidden;
+}
+
+// Flex 居中
+.flex-center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Flex 两端对齐
+.flex-between() {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+// 滚动条美化
+.custom-scrollbar() {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+// 卡片样式
+.card-base() {
+  background: @bg-container;
+  border-radius: @border-radius-base;
+  box-shadow: @box-shadow-card;
+}

package/src/styles/reset.less

@@ -0,0 +1,49 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  line-height: 1.5;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+#root {
+  height: 100%;
+  isolation: isolate;
+}