feat: perf sonarqube

Author: wkylin

.scannerwork/report-task.txt

@@ -2,5 +2,5 @@ projectKey=pro-react-admin
 serverUrl=http://localhost:9000
 serverVersion=25.2.0.102705
 dashboardUrl=http://localhost:9000/dashboard?id=pro-react-admin
-ceTaskId=8c530982-2933-4350-80bf-097fa898a0a1
-ceTaskUrl=http://localhost:9000/api/ce/task?id=8c530982-2933-4350-80bf-097fa898a0a1
+ceTaskId=4907c80c-0a94-4652-948b-7cc4af87fae9
+ceTaskUrl=http://localhost:9000/api/ce/task?id=4907c80c-0a94-4652-948b-7cc4af87fae9

sonar-project.properties

@@ -22,18 +22,35 @@ sonar.javascript.lcov.reportPaths=coverage/lcov.info
 # 覆盖率排除（不想算覆盖率的文件）
 sonar.coverage.exclusions=src/index.tsx,src/reportWebVitals.ts,src/setupTests.ts,src/react-app-env.d.ts,**/*.config.js,**/*.config.ts
 
+# ==================== 规则配置 ====================
+# 禁用成本过高或不适用的规则
+# javascript:S4822 - 不强制要求在try中使用await（UI组件中同步message常见）
+# javascript:S134 - 不限制嵌套深度（菜单递归等场景需要深度嵌套）
+# jsx-a11y/no-static-element-interactions - 允许非原生元素交互（预加载等场景）
+# typescript:S3800 - 允许函数返回不同类型（路由查找等场景需要）
+sonar.issue.ignore.multicriteria=e1,e2,e3,e4,propTypesRule
+sonar.issue.ignore.multicriteria.e1.ruleKey=javascript:S4822
+sonar.issue.ignore.multicriteria.e1.resourceKey=**/*.jsx
+sonar.issue.ignore.multicriteria.e2.ruleKey=javascript:S134
+sonar.issue.ignore.multicriteria.e2.resourceKey=**/*.jsx
+sonar.issue.ignore.multicriteria.e3.ruleKey=jsx-a11y/no-static-element-interactions
+sonar.issue.ignore.multicriteria.e3.resourceKey=**/*.jsx
+sonar.issue.ignore.multicriteria.e4.ruleKey=typescript:S3800
+sonar.issue.ignore.multicriteria.e4.resourceKey=**/*.jsx
+
 # ==================== SonarQube 服务地址 ====================
 sonar.host.url=http://localhost:9000
 
-# Token（安全起见，建议不写死在这里，命令行用 -Dsonar.token=xxx 覆盖）
-sonar.token=sqa_200141afde0b4a7d4d81b8b6387b980a2f4a3a50
+# Token（安全起见：不要写死在仓库里）
+# 建议通过命令行或环境变量注入，例如：
+# Windows PowerShell: $env:SONAR_TOKEN='xxx'; sonar-scanner.bat -Dsonar.token=$env:SONAR_TOKEN
+# Bash: SONAR_TOKEN=xxx sonar-scanner -Dsonar.token=$SONAR_TOKEN
 
 # ==================== 其他推荐配置 ====================
 sonar.sourceEncoding=UTF-8
 sonar.qualitygate.wait=true          # 扫描完后卡住等质量门结果（CI 里很有用）
 
 # ==================== 规则配置 ====================
 # 禁用 React components should validate prop types 规则
-sonar.issue.ignore.multicriteria=propTypesRule
 sonar.issue.ignore.multicriteria.propTypesRule.ruleKey=javascript:S4327
-sonar.issue.ignore.multicriteria.propTypesRule.resourceKey=**/*.jsx,**/*.js
+sonar.issue.ignore.multicriteria.propTypesRule.resourceKey=**/*.js,**/*.jsx,**/*.ts,**/*.tsx

src/app-hooks/usePermission.ts

@@ -23,9 +23,9 @@ export const usePermission = () => {
     try {
       setLoading(true)
       const userPermissions = await permissionService.getPermissions()
-      setPermissions(userPermissions.permissions)
-      setRoles(userPermissions.roles.map((role) => role.code))
-      setRoutes(userPermissions.routes)
+      setPermissions(Array.isArray(userPermissions.permissions) ? userPermissions.permissions : [])
+      setRoles(Array.isArray(userPermissions.roles) ? userPermissions.roles.map((role) => role.code) : [])
+      setRoutes(Array.isArray(userPermissions.routes) ? userPermissions.routes : [])
     } catch (error) {
       console.error('加载权限失败:', error)
     } finally {

src/app-hooks/useSafeNavigate/index.js

@@ -3,43 +3,56 @@ import { useNavigate } from 'react-router-dom'
 import { message } from 'antd'
 import { permissionService } from '@src/service/permissionService'
 
+const PUBLIC_PATHS = new Set(['/', '/signin', '/signup'])
+
+const isPublicPath = (path) => PUBLIC_PATHS.has(path)
+
+const safeShowDenied = () => {
+  Promise.resolve()
+    .then(() => message.error('您没有权限访问该页面'))
+    .catch((e) => {
+      console.warn('显示权限提示失败:', e)
+    })
+}
+
 export default function useSafeNavigate() {
   const navigate = useNavigate()
   const lastDeniedRef = useRef(null)
 
+  const navigateTo = (path, replace) => {
+    if (replace) navigate(path, { replace: true })
+    else navigate(path)
+  }
+
+  const denyOnce = (path) => {
+    if (lastDeniedRef.current === path) return
+    lastDeniedRef.current = path
+    safeShowDenied()
+  }
+
   const redirectTo = async (path, options = {}) => {
     if (!path) return
+
     // allow common public pages
-    if (path === '/' || path === '/signin' || path === '/signup') {
-      if (options.replace) navigate(path, { replace: true })
-      else navigate(path)
+    if (isPublicPath(path)) {
+      navigateTo(path, !!options.replace)
       return
     }
 
+    let ok = false
     try {
-      const ok = await permissionService.canAccessRoute(path, false)
-      if (!ok) {
-        if (lastDeniedRef.current !== path) {
-          lastDeniedRef.current = path
-          try {
-            message.error('您没有权限访问该页面')
-          } catch (e) {
-            // ignore
-          }
-        }
-        return
-      }
-      if (options.replace) navigate(path, { replace: true })
-      else navigate(path)
+      ok = await permissionService.canAccessRoute(path, false)
     } catch (err) {
       console.error('safe navigate error', err)
-      if (lastDeniedRef.current !== path) {
-        lastDeniedRef.current = path
-        try {
-          message.error('您没有权限访问该页面')
-        } catch (e) {}
-      }
+      ok = false
+    }
+
+    if (!ok) {
+      denyOnce(path)
+      return
     }
+
+    navigateTo(path, !!options.replace)
   }
 
   const goBack = () => {

src/components/ErrorBoundary.tsx

@@ -18,7 +18,7 @@ type State = {
 }
 
 export default class ErrorBoundary extends React.Component<Props, State> {
-  static defaultProps = {
+  static readonly defaultProps = {
     showDetails: true,
   }
   state: State = { hasError: false }

src/components/auth/AuthCallback.tsx

@@ -40,9 +40,10 @@ export const AuthCallback: React.FC = () => {
         // 获取用户可访问的第一个路由
         try {
           const routes = await permissionService.getAccessibleRoutes(true)
-          if (routes && routes.length > 0) {
+          const safeRoutes = Array.isArray(routes) ? routes : []
+          if (safeRoutes.length > 0) {
             // 跳转到第一个有权限的路由（优先首页）
-            const targetRoute = routes.includes('/') ? '/' : routes[0]
+            const targetRoute = safeRoutes.includes('/') ? '/' : safeRoutes[0]
             redirectTo(targetRoute)
           } else {
             // 如果没有权限，跳转到403

src/components/stateless/OneTimePasscode/index.module.less

@@ -17,20 +17,19 @@
   width: 3.25rem; /* base size */
   height: 3.25rem;
   border-radius: 0.75rem;
-  border: 1px solid rgba(15, 23, 32, 0.06);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(250, 250, 252, 0.85));
+  border: 1px solid rgb(15 23 32 / 6%);
+  background: linear-gradient(180deg, rgb(255 255 255 / 85%), rgb(250 250 252 / 85%));
   color: var(--otp-fg);
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
   font-size: 1.125rem;
   font-weight: 600;
   text-align: center;
-  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.06);
+  box-shadow: 0 8px 20px rgb(2 6 23 / 6%);
   transition:
     box-shadow 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
     transform 160ms ease,
     border-color 120ms ease;
   appearance: none;
-  -webkit-appearance: none;
   outline: none;
   caret-color: var(--otp-primary);
 }
@@ -42,8 +41,8 @@
   height: 3.5rem;
   border-radius: 0.9rem;
   font-size: 1.125rem;
-  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 247, 250, 0.92));
+  box-shadow: 0 10px 28px rgb(2 6 23 / 8%);
+  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(245 247 250 / 92%));
 }
 
 /* explicit variant classes to ensure CSS module exports these keys */
@@ -56,7 +55,7 @@
   height: 2.25rem;
   border-radius: 0.5rem;
   font-size: 0.95rem;
-  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.04);
+  box-shadow: 0 4px 12px rgb(2 6 23 / 4%);
 }
 
 .compact {
@@ -67,9 +66,9 @@
   width: 3rem;
   height: 3rem;
   border-radius: 0.35rem;
-  border: 1px solid rgba(15, 23, 32, 0.12);
+  border: 1px solid rgb(15 23 32 / 12%);
   background: linear-gradient(180deg, #fff, #f7fafc);
-  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.02);
+  box-shadow: inset 0 -2px 6px rgb(0 0 0 / 2%);
 }
 
 .classic {
@@ -80,8 +79,8 @@
   transform: translateY(-2px) scale(1.02);
   border-color: var(--otp-primary);
   box-shadow:
-    0 10px 30px rgba(2, 6, 23, 0.08),
-    0 0 0 8px rgba(var(--otp-primary-rgb), 0.12);
+    0 10px 30px rgb(2 6 23 / 8%),
+    0 0 0 8px rgb(var(--otp-primary-rgb), 0.12);
 }
 
 .input[disabled] {
@@ -90,7 +89,7 @@
 }
 
 /* smaller on mobile */
-@media (max-width: 480px) {
+@media (width <= 480px) {
   .input {
     width: 2.1rem;
     height: 2.1rem;

src/components/stateless/PointerMove/index.jsx

@@ -6,29 +6,45 @@ const PointerMove = () => {
   const ref = useRef(null)
   const [coordinates, setCoordinates] = useState({ x: 158, y: 18 })
 
+  const rafIdRef = useRef(0)
+  const latestPointerRef = useRef({ x: 0, y: 0 })
+
   useEffect(() => {
     //  check if DOM element referenced by ref has been mounted
     if (ref.current) {
-      const handlePointerMove = ({ clientX, clientY }) => {
+      const flush = () => {
+        rafIdRef.current = 0
         const element = ref.current
         if (!element) return
-        // calculate x and y coordinates
+        const { x: clientX, y: clientY } = latestPointerRef.current
+        // calculate x and y coordinates (keep original semantics)
         const x = clientX + (element.offsetLeft + element.offsetWidth)
         const y = clientY + (element.offsetTop + element.offsetHeight)
-        // update state
         setCoordinates({ x, y })
       }
 
+      const handlePointerMove = ({ clientX, clientY }) => {
+        latestPointerRef.current = { x: clientX, y: clientY }
+        if (rafIdRef.current) return
+        rafIdRef.current = requestAnimationFrame(flush)
+      }
+
       window.addEventListener('pointermove', handlePointerMove)
-      return () => window.removeEventListener('pointermove', handlePointerMove)
+      return () => {
+        window.removeEventListener('pointermove', handlePointerMove)
+        if (rafIdRef.current) {
+          cancelAnimationFrame(rafIdRef.current)
+          rafIdRef.current = 0
+        }
+      }
     }
   }, [])
 
   return (
     <motion.div
       ref={ref}
       className={styles.star}
-      animate={{ x: coordinates.x, y: coordinates.y, opacity: 1 }}
+      animate={{ x: coordinates?.x ?? 0, y: coordinates?.y ?? 0, opacity: 1 }}
       transition={{
         type: 'spring',
       }}