ess-main-template 1.0.0

package/src/components/AuthButton.tsx

@@ -0,0 +1,23 @@
+import { useAuth } from '@/hooks/useAuth'
+
+interface AuthButtonProps {
+  /** 所需权限码，拥有任一即可显示 */
+  code: string | string[]
+  /** 无权限时的替代渲染（默认不渲染） */
+  fallback?: React.ReactNode
+  children: React.ReactNode
+}
+
+/** 权限按钮包裹组件：根据权限码决定子元素是否可见 */
+const AuthButton: React.FC<AuthButtonProps> = ({ code, fallback = null, children }) => {
+  const { hasPermission, hasAnyPermission } = useAuth()
+
+  const codes = Array.isArray(code) ? code : [code]
+  const authorized = codes.length === 1 ? hasPermission(codes[0]) : hasAnyPermission(codes)
+
+  if (!authorized) return <>{fallback}</>
+
+  return <>{children}</>
+}
+
+export default AuthButton

package/src/components/LangSwitch.tsx

@@ -0,0 +1,31 @@
+import { Select } from 'antd'
+import { GlobalOutlined } from '@ant-design/icons'
+import { useTranslation } from 'react-i18next'
+import { useAppStore } from '@/store/appStore'
+import type { Locale } from '@/store/appStore'
+
+const LangSwitch: React.FC = () => {
+  const { i18n } = useTranslation()
+  const { locale, setLocale } = useAppStore()
+
+  const handleChange = (value: Locale) => {
+    setLocale(value)
+    i18n.changeLanguage(value)
+  }
+
+  return (
+    <Select
+      value={locale}
+      onChange={handleChange}
+      variant="borderless"
+      suffixIcon={<GlobalOutlined />}
+      options={[
+        { value: 'zh', label: '中文' },
+        { value: 'en', label: 'English' },
+      ]}
+      style={{ width: 100 }}
+    />
+  )
+}
+
+export default LangSwitch

package/src/components/RouteProgress.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({ showSpinner: false, speed: 300 })
+
+/** 路由切换时显示顶部进度条 */
+const RouteProgress: React.FC = () => {
+  const location = useLocation()
+
+  useEffect(() => {
+    NProgress.start()
+    // Suspense 懒加载完成后，组件已渲染，此时 done
+    const timer = setTimeout(() => NProgress.done(), 100)
+    return () => {
+      clearTimeout(timer)
+      NProgress.done()
+    }
+  }, [location.pathname])
+
+  return null
+}
+
+export default RouteProgress

package/src/components/StationPicker.tsx

@@ -0,0 +1,24 @@
+import { Select } from 'antd'
+import { EnvironmentOutlined } from '@ant-design/icons'
+import { useAppStore } from '@/store/appStore'
+import { useUserStore } from '@/store/userStore'
+
+const StationPicker: React.FC = () => {
+  const { currentStation, setCurrentStation } = useAppStore()
+  const authorizedStations = useUserStore((s) => s.authorizedStations)
+
+  if (!authorizedStations.length) return null
+
+  return (
+    <Select
+      value={currentStation || authorizedStations[0]?.id}
+      onChange={setCurrentStation}
+      variant="borderless"
+      suffixIcon={<EnvironmentOutlined />}
+      options={authorizedStations.map((s) => ({ value: s.id, label: s.name }))}
+      style={{ width: 140 }}
+    />
+  )
+}
+
+export default StationPicker

package/src/components/ThemeSwitch.tsx

@@ -0,0 +1,18 @@
+import { Switch } from 'antd'
+import { BulbOutlined } from '@ant-design/icons'
+import { useAppStore } from '@/store/appStore'
+
+const ThemeSwitch: React.FC = () => {
+  const { theme, toggleTheme } = useAppStore()
+
+  return (
+    <Switch
+      checkedChildren={<BulbOutlined />}
+      unCheckedChildren={<BulbOutlined />}
+      checked={theme === 'dark'}
+      onChange={toggleTheme}
+    />
+  )
+}
+
+export default ThemeSwitch

package/src/constants/bus-events.ts

@@ -0,0 +1,15 @@
+/** wujie bus 事件名常量 */
+export const BUS_EVENTS = {
+  /** 语言切换 */
+  LOCALE_CHANGE: 'locale-change',
+  /** 主题切换 */
+  THEME_CHANGE: 'theme-change',
+  /** 站点切换 */
+  STATION_CHANGE: 'station-change',
+  /** Token 已刷新 */
+  TOKEN_REFRESH: 'token-refresh',
+  /** Token 过期（子应用通知主应用） */
+  TOKEN_EXPIRED: 'token-expired',
+  /** 路由跳转（子应用通知主应用） */
+  NAVIGATE: 'navigate',
+} as const

package/src/constants/index.ts

@@ -0,0 +1,25 @@
+/** localStorage 存储键 */
+export const STORAGE_KEYS = {
+  ACCESS_TOKEN: 'ess_access_token',
+  REFRESH_TOKEN: 'ess_refresh_token',
+  USER_INFO: 'ess_user_info',
+  LOCALE: 'ess_locale',
+  THEME: 'ess_theme',
+} as const
+
+/** API 基础地址 */
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL as string
+
+/** 子应用地址 */
+export const SUB_APP_URLS = {
+  OPERATION: import.meta.env.VITE_SUB_OPERATION_URL as string,
+  ANALYSIS: import.meta.env.VITE_SUB_ANALYSIS_URL as string,
+} as const
+
+/** Token 刷新相关 */
+export const TOKEN_CONFIG = {
+  /** 最大重试次数 */
+  MAX_RETRY: 2,
+  /** 重试间隔基数（ms） */
+  RETRY_DELAY: 1000,
+} as const

package/src/hooks/useAuth.ts

@@ -0,0 +1,17 @@
+import { useUserStore } from '@/store/userStore'
+
+/** 检查当前用户是否拥有指定权限 */
+export function useAuth() {
+  const permissions = useUserStore((s) => s.permissions)
+
+  /** 是否拥有某个权限 */
+  const hasPermission = (code: string) => permissions.includes(code)
+
+  /** 是否拥有所有指定权限 */
+  const hasAllPermissions = (codes: string[]) => codes.every((c) => permissions.includes(c))
+
+  /** 是否拥有任一指定权限 */
+  const hasAnyPermission = (codes: string[]) => codes.some((c) => permissions.includes(c))
+
+  return { permissions, hasPermission, hasAllPermissions, hasAnyPermission }
+}

package/src/i18n/index.ts

@@ -0,0 +1,32 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import HttpBackend from 'i18next-http-backend'
+import { STORAGE_KEYS } from '@/constants'
+
+// 获取保存的语言偏好，默认中文
+const savedLocale = localStorage.getItem(STORAGE_KEYS.LOCALE) || 'zh'
+
+i18n
+  .use(HttpBackend)
+  .use(initReactI18next)
+  .init({
+    lng: savedLocale,
+    fallbackLng: 'zh',
+    ns: ['common', 'menu', 'auth'],
+    defaultNS: 'common',
+
+    backend: {
+      // 按语言和命名空间加载 JSON 文件
+      loadPath: '/src/i18n/locales/{{lng}}/{{ns}}.json',
+    },
+
+    interpolation: {
+      escapeValue: false, // React 已默认转义
+    },
+
+    react: {
+      useSuspense: true,
+    },
+  })
+
+export default i18n

package/src/i18n/locales/en/auth.json

@@ -0,0 +1,15 @@
+{
+  "login": "Login",
+  "logout": "Logout",
+  "loginTitle": "Energy Storage O&M Platform",
+  "username": "Username",
+  "password": "Password",
+  "usernamePlaceholder": "Enter username",
+  "passwordPlaceholder": "Enter password",
+  "loginButton": "Sign In",
+  "loginSuccess": "Login successful",
+  "loginFailed": "Login failed",
+  "usernameRequired": "Please enter username",
+  "passwordRequired": "Please enter password",
+  "tokenExpired": "Session expired, please login again"
+}

package/src/i18n/locales/en/common.json

@@ -0,0 +1,33 @@
+{
+  "appName": "ESS Operation & Maintenance Platform",
+  "loading": "Loading...",
+  "confirm": "Confirm",
+  "cancel": "Cancel",
+  "save": "Save",
+  "delete": "Delete",
+  "edit": "Edit",
+  "add": "Add",
+  "search": "Search",
+  "reset": "Reset",
+  "export": "Export",
+  "import": "Import",
+  "operation": "Operation",
+  "status": "Status",
+  "enable": "Enable",
+  "disable": "Disable",
+  "success": "Operation successful",
+  "failed": "Operation failed",
+  "noData": "No data",
+  "networkError": "Network disconnected, please check your connection",
+  "serverError": "Server error, please try again later",
+  "noPermission": "You do not have permission to perform this action",
+  "systemName": "Energy Storage O&M Platform",
+  "logout": "Logout",
+  "backHome": "Back to Home",
+  "retry": "Retry",
+  "subAppLoading": "Loading sub-app...",
+  "subAppTimeout": "Sub-app {{name}} load timeout",
+  "subAppLoadError": "Sub-app {{name}} load failed",
+  "subAppNotFound": "Sub-app not found",
+  "subAppError": "Sub-app load error"
+}

package/src/i18n/locales/en/menu.json

@@ -0,0 +1,33 @@
+{
+  "dashboard": "Dashboard",
+  "home": "Home",
+  "operation": "Operation",
+  "system": "System",
+  "systemUser": "Users",
+  "systemRole": "Roles",
+  "systemPermission": "Permissions",
+  "systemDict": "Dictionary",
+  "systemLog": "Audit Log",
+  "device": "Devices",
+  "deviceList": "Device List",
+  "deviceCategory": "Device Category",
+  "deviceDetail": "Device Detail",
+  "alarm": "Alarms",
+  "alarmRealtime": "Real-time Alarms",
+  "alarmHistory": "Alarm History",
+  "alarmRules": "Alarm Rules",
+  "workOrder": "Work Orders",
+  "workOrderList": "Order List",
+  "workOrderCreate": "Create Order",
+  "workOrderDetail": "Order Detail",
+  "inspection": "Inspection",
+  "analysis": "Analytics",
+  "energyStats": "Energy Statistics",
+  "efficiency": "Efficiency",
+  "revenue": "Revenue",
+  "batteryHealth": "Battery Health",
+  "report": "Reports",
+  "reportDaily": "Daily Report",
+  "reportMonthly": "Monthly Report",
+  "reportCustom": "Custom Report"
+}

package/src/i18n/locales/zh/auth.json

@@ -0,0 +1,15 @@
+{
+  "login": "登录",
+  "logout": "退出登录",
+  "loginTitle": "储能运维管理平台",
+  "username": "用户名",
+  "password": "密码",
+  "usernamePlaceholder": "请输入用户名",
+  "passwordPlaceholder": "请输入密码",
+  "loginButton": "登 录",
+  "loginSuccess": "登录成功",
+  "loginFailed": "登录失败",
+  "usernameRequired": "请输入用户名",
+  "passwordRequired": "请输入密码",
+  "tokenExpired": "登录已过期，请重新登录"
+}

package/src/i18n/locales/zh/common.json

@@ -0,0 +1,33 @@
+{
+  "appName": "储能运维管理平台",
+  "loading": "加载中...",
+  "confirm": "确认",
+  "cancel": "取消",
+  "save": "保存",
+  "delete": "删除",
+  "edit": "编辑",
+  "add": "新增",
+  "search": "搜索",
+  "reset": "重置",
+  "export": "导出",
+  "import": "导入",
+  "operation": "操作",
+  "status": "状态",
+  "enable": "启用",
+  "disable": "禁用",
+  "success": "操作成功",
+  "failed": "操作失败",
+  "noData": "暂无数据",
+  "networkError": "网络已断开，请检查网络连接",
+  "serverError": "服务异常，请稍后重试",
+  "noPermission": "没有权限执行此操作",
+  "systemName": "储能运维管理平台",
+  "logout": "退出登录",
+  "backHome": "返回首页",
+  "retry": "重试",
+  "subAppLoading": "子应用加载中...",
+  "subAppTimeout": "子应用 {{name}} 加载超时",
+  "subAppLoadError": "子应用 {{name}} 加载失败",
+  "subAppNotFound": "子应用未找到",
+  "subAppError": "子应用加载异常"
+}

package/src/i18n/locales/zh/menu.json

@@ -0,0 +1,33 @@
+{
+  "dashboard": "仪表盘",
+  "home": "首页",
+  "operation": "运维管理",
+  "system": "系统管理",
+  "systemUser": "用户管理",
+  "systemRole": "角色管理",
+  "systemPermission": "权限管理",
+  "systemDict": "字典管理",
+  "systemLog": "操作日志",
+  "device": "设备管理",
+  "deviceList": "设备台账",
+  "deviceCategory": "设备分类",
+  "deviceDetail": "设备详情",
+  "alarm": "告警管理",
+  "alarmRealtime": "实时告警",
+  "alarmHistory": "历史告警",
+  "alarmRules": "告警规则",
+  "workOrder": "运维工单",
+  "workOrderList": "工单列表",
+  "workOrderCreate": "创建工单",
+  "workOrderDetail": "工单详情",
+  "inspection": "巡检计划",
+  "analysis": "数据分析",
+  "energyStats": "充放电统计",
+  "efficiency": "能量效率",
+  "revenue": "收益分析",
+  "batteryHealth": "电池健康度",
+  "report": "报表中心",
+  "reportDaily": "日报",
+  "reportMonthly": "月报",
+  "reportCustom": "自定义报表"
+}

package/src/index.css

@@ -0,0 +1,109 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow: rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

package/src/layouts/BasicLayout.tsx

@@ -0,0 +1,73 @@
+import { useState, useMemo } from 'react'
+import { Outlet, useNavigate, useLocation } from 'react-router-dom'
+import { ProLayout } from '@ant-design/pro-components'
+import { useTranslation } from 'react-i18next'
+import { useAppStore } from '@/store/appStore'
+import { useUserStore } from '@/store/userStore'
+import RouteProgress from '@/components/RouteProgress'
+import { useBusSync } from '@/wujie/useBusSync'
+import type { RouteItem } from '@/store/userStore'
+import RightContent from './components/RightContent'
+
+/** 将后端路由数据转为 ProLayout route 格式，使用 i18n 翻译菜单名 */
+function toProLayoutRoutes(
+  routes: RouteItem[],
+  t: (key: string) => string,
+): { path: string; name: string; children?: ReturnType<typeof toProLayoutRoutes> }[] {
+  return routes.map((r) => ({
+    path: r.path,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    name: (t as any)(r.name),
+    ...(r.children?.length ? { children: toProLayoutRoutes(r.children, t) } : {}),
+  }))
+}
+
+const BasicLayout: React.FC = () => {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { t } = useTranslation('common')
+  const { t: tMenu } = useTranslation('menu')
+  const { sidebarCollapsed, setSidebarCollapsed } = useAppStore()
+  const dynamicRoutes = useUserStore((s) => s.dynamicRoutes)
+  const [pathname, setPathname] = useState(location.pathname)
+
+  // 主应用与子应用的 bus 事件同步
+  useBusSync()
+
+  const menuRoutes = useMemo(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    () => toProLayoutRoutes(dynamicRoutes, tMenu as any),
+    [dynamicRoutes, tMenu],
+  )
+
+  return (
+    <ProLayout
+      title={t('systemName')}
+      logo={null}
+      layout="mix"
+      collapsed={sidebarCollapsed}
+      onCollapse={setSidebarCollapsed}
+      location={{ pathname }}
+      route={{
+        path: '/',
+        children: menuRoutes,
+      }}
+      menuItemRender={(item, dom) => (
+        <a
+          onClick={() => {
+            setPathname(item.path || '/')
+            navigate(item.path || '/')
+          }}
+        >
+          {dom}
+        </a>
+      )}
+      actionsRender={() => [<RightContent key="right" />]}
+    >
+      <RouteProgress />
+      <Outlet />
+    </ProLayout>
+  )
+}
+
+export default BasicLayout

package/src/layouts/BlankLayout.tsx

@@ -0,0 +1,7 @@
+import { Outlet } from 'react-router-dom'
+
+const BlankLayout: React.FC = () => {
+  return <Outlet />
+}
+
+export default BlankLayout

package/src/layouts/components/RightContent.tsx

@@ -0,0 +1,43 @@
+import { Space, Dropdown } from 'antd'
+import { UserOutlined } from '@ant-design/icons'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useUserStore } from '@/store/userStore'
+import ThemeSwitch from '@/components/ThemeSwitch'
+import LangSwitch from '@/components/LangSwitch'
+import StationPicker from '@/components/StationPicker'
+
+const RightContent: React.FC = () => {
+  const { t } = useTranslation('common')
+  const navigate = useNavigate()
+  const { userInfo, logout } = useUserStore()
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login', { replace: true })
+  }
+
+  return (
+    <Space size="middle">
+      <StationPicker />
+      <ThemeSwitch />
+      <LangSwitch />
+
+      <Dropdown
+        menu={{
+          items: [{ key: 'logout', label: t('logout'), danger: true }],
+          onClick: ({ key }) => {
+            if (key === 'logout') handleLogout()
+          },
+        }}
+      >
+        <Space style={{ cursor: 'pointer' }}>
+          <UserOutlined />
+          <span>{userInfo?.realName || userInfo?.username || '-'}</span>
+        </Space>
+      </Dropdown>
+    </Space>
+  )
+}
+
+export default RightContent

package/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode, Suspense } from 'react'
+import { createRoot } from 'react-dom/client'
+import './i18n'
+import './styles/global.less'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Suspense fallback={<div>Loading...</div>}>
+      <App />
+    </Suspense>
+  </StrictMode>,
+)

package/src/pages/403.tsx

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