ess-main-template 1.0.0

package/src/styles/variables.less

@@ -0,0 +1,50 @@
+// 品牌色（储能行业 - 绿色系）
+@color-primary: #00b96b;
+@color-info: #1890ff;
+@color-error: #ff4d4f;
+@color-warning: #faad14;
+@color-success: #52c41a;
+
+// 文字色
+@text-color: rgba(0, 0, 0, 0.88);
+@text-color-secondary: rgba(0, 0, 0, 0.65);
+@text-color-disabled: rgba(0, 0, 0, 0.25);
+
+// 背景色
+@bg-layout: #f0f2f5;
+@bg-container: #ffffff;
+
+// 间距
+@spacing-xs: 4px;
+@spacing-sm: 8px;
+@spacing-md: 16px;
+@spacing-lg: 24px;
+@spacing-xl: 32px;
+
+// 圆角
+@border-radius-sm: 4px;
+@border-radius-base: 6px;
+@border-radius-lg: 8px;
+
+// 字体
+@font-family:
+  'CustomFont',
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  sans-serif;
+@font-size-sm: 12px;
+@font-size-base: 14px;
+@font-size-lg: 16px;
+@font-size-xl: 20px;
+
+// 阴影
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
+@box-shadow-card:
+  0 1px 2px rgba(0, 0, 0, 0.03),
+  0 1px 6px -1px rgba(0, 0, 0, 0.02),
+  0 2px 4px rgba(0, 0, 0, 0.02);
+
+// 过渡
+@transition-duration: 0.3s;

package/src/types/i18next.d.ts

@@ -0,0 +1,16 @@
+import 'i18next'
+
+import type zhCommon from '../i18n/locales/zh/common.json'
+import type zhMenu from '../i18n/locales/zh/menu.json'
+import type zhAuth from '../i18n/locales/zh/auth.json'
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: 'common'
+    resources: {
+      common: typeof zhCommon
+      menu: typeof zhMenu
+      auth: typeof zhAuth
+    }
+  }
+}

package/src/types/less.d.ts

@@ -0,0 +1,6 @@
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.less'

package/src/types/wujie-react.d.ts

@@ -0,0 +1,37 @@
+declare module 'wujie-react' {
+  import type { Component } from 'react'
+
+  interface WujieReactProps {
+    name: string
+    url: string
+    alive?: boolean
+    exec?: boolean
+    replace?: (code: string) => string
+    fetch?: typeof window.fetch
+    props?: Record<string, unknown>
+    attrs?: Record<string, unknown>
+    beforeLoad?: () => void
+    beforeMount?: () => void
+    afterMount?: () => void
+    beforeUnmount?: () => void
+    afterUnmount?: () => void
+    loadError?: (url: string, e: Error) => void
+    width?: string
+    height?: string
+  }
+
+  interface EventBus {
+    $on: (event: string, callback: (...args: unknown[]) => void) => EventBus
+    $off: (event: string, callback: (...args: unknown[]) => void) => EventBus
+    $emit: (event: string, ...args: unknown[]) => EventBus
+  }
+
+  class WujieReact extends Component<WujieReactProps> {
+    static bus: EventBus
+    static setupApp: (options: Record<string, unknown>) => void
+    static preloadApp: (options: Record<string, unknown>) => void
+    static destroyApp: (name: string) => void
+  }
+
+  export default WujieReact
+}

package/src/utils/auth.ts

@@ -0,0 +1,28 @@
+import { STORAGE_KEYS } from '@/constants'
+
+export function getAccessToken(): string | null {
+  return localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN)
+}
+
+export function setAccessToken(token: string): void {
+  localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, token)
+}
+
+export function getRefreshToken(): string | null {
+  return localStorage.getItem(STORAGE_KEYS.REFRESH_TOKEN)
+}
+
+export function setRefreshToken(token: string): void {
+  localStorage.setItem(STORAGE_KEYS.REFRESH_TOKEN, token)
+}
+
+export function setTokens(accessToken: string, refreshToken: string): void {
+  setAccessToken(accessToken)
+  setRefreshToken(refreshToken)
+}
+
+export function clearTokens(): void {
+  localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN)
+  localStorage.removeItem(STORAGE_KEYS.REFRESH_TOKEN)
+  localStorage.removeItem(STORAGE_KEYS.USER_INFO)
+}

package/src/utils/request.ts

@@ -0,0 +1,118 @@
+import axios, { type AxiosError, type AxiosResponse, type InternalAxiosRequestConfig } from 'axios'
+import { message } from 'antd'
+import { API_BASE_URL, TOKEN_CONFIG } from '@/constants'
+import { getAccessToken, getRefreshToken, setTokens, clearTokens } from '@/utils/auth'
+
+const request = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 15000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// ---------- 请求拦截器 ----------
+request.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const token = getAccessToken()
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error: AxiosError) => Promise.reject(error),
+)
+
+// ---------- Token 刷新锁 ----------
+let isRefreshing = false
+let pendingRequests: Array<(token: string) => void> = []
+
+function onTokenRefreshed(newToken: string) {
+  pendingRequests.forEach((cb) => cb(newToken))
+  pendingRequests = []
+}
+
+async function refreshToken(): Promise<string> {
+  const refresh = getRefreshToken()
+  const res = await axios.post<{ data: { token: string; refreshToken: string } }>(
+    `${API_BASE_URL}/auth/refresh`,
+    { refreshToken: refresh },
+  )
+  const { token, refreshToken: newRefresh } = res.data.data
+  setTokens(token, newRefresh)
+  return token
+}
+
+// ---------- 响应拦截器 ----------
+request.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: AxiosError<{ message?: string }>) => {
+    // 网络断开检测
+    if (!navigator.onLine) {
+      message.error('网络已断开，请检查网络连接')
+      return Promise.reject(error)
+    }
+
+    const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean }
+    const status = error.response?.status
+
+    // 401: 自动刷新 token + 重放
+    if (status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise((resolve) => {
+          pendingRequests.push((newToken: string) => {
+            originalRequest.headers.Authorization = `Bearer ${newToken}`
+            resolve(request(originalRequest))
+          })
+        })
+      }
+
+      originalRequest._retry = true
+      isRefreshing = true
+
+      try {
+        const newToken = await refreshToken()
+        isRefreshing = false
+        onTokenRefreshed(newToken)
+        originalRequest.headers.Authorization = `Bearer ${newToken}`
+        return request(originalRequest)
+      } catch {
+        isRefreshing = false
+        pendingRequests = []
+        clearTokens()
+        window.location.href = '/login'
+        return Promise.reject(error)
+      }
+    }
+
+    // 403: 无权限
+    if (status === 403) {
+      message.error('没有权限执行此操作')
+    }
+
+    // 500/502/503: 服务异常
+    if (status && status >= 500) {
+      message.error('服务异常，请稍后重试')
+    }
+
+    return Promise.reject(error)
+  },
+)
+
+// ---------- 带重试的请求方法（用于关键接口） ----------
+export async function requestWithRetry<T>(
+  config: Parameters<typeof request>[0],
+  retries = TOKEN_CONFIG.MAX_RETRY,
+): Promise<T> {
+  for (let i = 0; i <= retries; i++) {
+    try {
+      return await request(config)
+    } catch (err) {
+      if (i === retries) throw err
+      await new Promise((r) => setTimeout(r, TOKEN_CONFIG.RETRY_DELAY * 2 ** i))
+    }
+  }
+  throw new Error('Max retries exceeded')
+}
+
+export default request

package/src/wujie/SubApp.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react'
+import WujieReact from 'wujie-react'
+import { Spin, Result, Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { getSubAppConfig } from './config'
+import { useSubAppProps } from './props'
+
+interface SubAppProps {
+  /** 子应用名称，必须与 config 中注册的 name 一致 */
+  name: string
+}
+
+/** 子应用加载超时时间 (ms) */
+const LOAD_TIMEOUT = 15000
+
+export default function SubApp({ name }: SubAppProps) {
+  const { t } = useTranslation('common')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const config = getSubAppConfig(name)
+  const subAppProps = useSubAppProps()
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false)
+      setError(t('subAppTimeout', { name }))
+    }, LOAD_TIMEOUT)
+
+    return () => clearTimeout(timer)
+  }, [name, t])
+
+  if (!config) {
+    return <Result status="error" title={t('subAppNotFound')} subTitle={`${name}`} />
+  }
+
+  const handleLoadError = () => {
+    setLoading(false)
+    setError(t('subAppLoadError', { name }))
+  }
+
+  const handleLoading = () => {
+    setLoading(false)
+  }
+
+  if (error) {
+    return (
+      <Result
+        status="error"
+        title={t('subAppError')}
+        subTitle={error}
+        extra={
+          <Button type="primary" onClick={() => window.location.reload()}>
+            {t('retry')}
+          </Button>
+        }
+      />
+    )
+  }
+
+  return (
+    <Spin spinning={loading} tip={t('subAppLoading')} style={{ minHeight: 300 }}>
+      <WujieReact
+        name={config.name}
+        url={config.url}
+        alive={config.alive}
+        props={subAppProps as unknown as Record<string, unknown>}
+        loadError={handleLoadError}
+        beforeLoad={() => handleLoading()}
+      />
+    </Spin>
+  )
+}

package/src/wujie/bus.ts

@@ -0,0 +1,38 @@
+import WujieReact from 'wujie-react'
+import { BUS_EVENTS } from '@/constants/bus-events'
+import type { Theme, Locale } from '@/store/appStore'
+
+const { bus } = WujieReact
+
+/** 向子应用广播语言切换 */
+export function emitLocaleChange(locale: Locale) {
+  bus.$emit(BUS_EVENTS.LOCALE_CHANGE, locale)
+}
+
+/** 向子应用广播主题切换 */
+export function emitThemeChange(theme: Theme) {
+  bus.$emit(BUS_EVENTS.THEME_CHANGE, theme)
+}
+
+/** 向子应用广播站点切换 */
+export function emitStationChange(stationId: string | null) {
+  bus.$emit(BUS_EVENTS.STATION_CHANGE, stationId)
+}
+
+/** 向子应用广播 Token 已刷新 */
+export function emitTokenRefresh(token: string) {
+  bus.$emit(BUS_EVENTS.TOKEN_REFRESH, token)
+}
+
+/** 监听子应用 token-expired 事件 */
+export function onTokenExpired(callback: () => void) {
+  bus.$on(BUS_EVENTS.TOKEN_EXPIRED, callback)
+  return () => bus.$off(BUS_EVENTS.TOKEN_EXPIRED, callback)
+}
+
+/** 监听子应用路由跳转事件 */
+export function onNavigate(callback: (path: string) => void) {
+  const handler = (...args: unknown[]) => callback(args[0] as string)
+  bus.$on(BUS_EVENTS.NAVIGATE, handler)
+  return () => bus.$off(BUS_EVENTS.NAVIGATE, handler)
+}

package/src/wujie/config.ts

@@ -0,0 +1,33 @@
+import { SUB_APP_URLS } from '@/constants'
+
+export interface SubAppConfig {
+  /** 子应用唯一名称 */
+  name: string
+  /** 子应用入口 URL */
+  url: string
+  /** 是否使用 alive 模式（保活） */
+  alive: boolean
+  /** 执行模式 */
+  exec?: boolean
+  /** 自定义 fetch */
+  fetch?: typeof fetch
+}
+
+/** 子应用注册配置 */
+export const subAppConfigs: SubAppConfig[] = [
+  {
+    name: 'sub-operation',
+    url: SUB_APP_URLS.OPERATION,
+    alive: true,
+  },
+  {
+    name: 'sub-analysis',
+    url: SUB_APP_URLS.ANALYSIS,
+    alive: true,
+  },
+]
+
+/** 根据名称获取子应用配置 */
+export function getSubAppConfig(name: string): SubAppConfig | undefined {
+  return subAppConfigs.find((app) => app.name === name)
+}

package/src/wujie/props.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+import { useUserStore } from '@/store/userStore'
+import { useAppStore } from '@/store/appStore'
+
+export interface SubAppPropsData {
+  token: string | null
+  userInfo: ReturnType<typeof useUserStore.getState>['userInfo']
+  permissions: string[]
+  theme: string
+  locale: string
+  currentStation: string | null
+}
+
+/** 获取传递给子应用的 props（非响应式，用于一次性读取） */
+export function getSubAppProps(): SubAppPropsData {
+  const userState = useUserStore.getState()
+  const appState = useAppStore.getState()
+
+  return {
+    token: userState.token,
+    userInfo: userState.userInfo,
+    permissions: userState.permissions,
+    theme: appState.theme,
+    locale: appState.locale,
+    currentStation: appState.currentStation,
+  }
+}
+
+/** 响应式 hook：store 变更时自动返回最新 props，驱动 SubApp 重新传递 props 给子应用 */
+export function useSubAppProps(): SubAppPropsData {
+  const token = useUserStore((s) => s.token)
+  const userInfo = useUserStore((s) => s.userInfo)
+  const permissions = useUserStore((s) => s.permissions)
+  const theme = useAppStore((s) => s.theme)
+  const locale = useAppStore((s) => s.locale)
+  const currentStation = useAppStore((s) => s.currentStation)
+
+  return useMemo(
+    () => ({ token, userInfo, permissions, theme, locale, currentStation }),
+    [token, userInfo, permissions, theme, locale, currentStation],
+  )
+}

package/src/wujie/useBusSync.ts

@@ -0,0 +1,67 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAppStore } from '@/store/appStore'
+import { useUserStore } from '@/store/userStore'
+import {
+  emitLocaleChange,
+  emitThemeChange,
+  emitStationChange,
+  onTokenExpired,
+  onNavigate,
+} from './bus'
+import { refreshToken as refreshTokenApi } from '@/services/auth'
+
+/**
+ * 主应用 bus 同步 hook
+ * - 监听 appStore 变更 → 广播给子应用
+ * - 监听子应用 bus 事件 → 响应处理
+ */
+export function useBusSync() {
+  const navigate = useNavigate()
+  const theme = useAppStore((s) => s.theme)
+  const locale = useAppStore((s) => s.locale)
+  const currentStation = useAppStore((s) => s.currentStation)
+  const setAuth = useUserStore((s) => s.setAuth)
+  const logout = useUserStore((s) => s.logout)
+
+  // 主题变更 → 广播给子应用
+  useEffect(() => {
+    emitThemeChange(theme)
+  }, [theme])
+
+  // 语言变更 → 广播给子应用
+  useEffect(() => {
+    emitLocaleChange(locale)
+  }, [locale])
+
+  // 站点变更 → 广播给子应用
+  useEffect(() => {
+    emitStationChange(currentStation)
+  }, [currentStation])
+
+  // 监听子应用 token-expired → 刷新 token 或登出
+  useEffect(() => {
+    const unsubscribe = onTokenExpired(async () => {
+      try {
+        const res = await refreshTokenApi()
+        setAuth(res.data.data.accessToken, res.data.data.refreshToken)
+      } catch {
+        logout()
+        navigate('/login')
+      }
+    })
+    return () => {
+      unsubscribe()
+    }
+  }, [navigate, setAuth, logout])
+
+  // 监听子应用路由跳转
+  useEffect(() => {
+    const unsubscribe = onNavigate((path: string) => {
+      navigate(path)
+    })
+    return () => {
+      unsubscribe()
+    }
+  }, [navigate])
+}

package/tsconfig.app.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Strict */
+    "strict": true,
+    "noImplicitAny": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path alias */
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts", "plugins"]
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { mockDevServerPlugin } from 'vite-plugin-mock-dev-server'
+import path from 'node:path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), mockDevServerPlugin()], //mockDevServerPlugin({ enabled: false })
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    proxy: {
+      '^/api': { target: 'http://localhost:8080' },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+  },
+})