perf: 优化ErrorBoundary样式、useDesign更名为createDesign

src/components/loading/index.tsx

@@ -2,6 +2,7 @@ import { memo } from 'react';
 
 import './index.scss';
 
+/** Loading组件示例，可替换为ui库的loading组件作二次封装 */
 function Loading() {
   return (
     <div className="pub-loading">

src/error-boundary.tsx

@@ -17,19 +17,18 @@ const ErrorBoundary: FC = () => {
       }}
     >
       <h1 style={{ color: '#ff6347', borderBottom: '1px solid #eee', paddingBottom: '10px' }}>
-        {routeError?.name}：渲染失败
+        {routeError?.name || 'Error'}:
       </h1>
-      <p style={{ fontSize: '16px', color: '#333' }}>发送生了错误：</p>
+      <p style={{ fontWeight: 'bold' }}>{routeError?.message || routeError?.error?.message}</p>
       <div
         style={{
-          margin: '20px 0',
+          margin: '10px 0',
           padding: '10px',
           backgroundColor: '#f7f7f7',
           borderRadius: '5px'
         }}
       >
-        <p style={{ fontWeight: 'bold' }}>routeError：</p>
-        <p style={{ color: 'red' }}>{routeError?.message || routeError?.error?.message}</p>
+        <p style={{ fontWeight: 'bold', marginBottom: '10px', color: '#ff6347' }}>Render Fail:</p>
         <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
           {routeError?.stack || routeError?.error?.stack}
         </pre>

src/hooks/create-design/index.ts

@@ -0,0 +1,5 @@
+export function createDesign(scope: string) {
+  return {
+    prefixCls: scope // 前缀示例：'pg'页面、'cmp'组件、'pub'公共组件
+  };
+}

src/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './use-design';
+export * from './create-design';
 export * from './use-router';
 export * from './use-namespace';
 export * from './use-ref-state';

src/views/test/count/index.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useState } from 'react';
 
-import { useDesign, useRouter } from '@/hooks';
+import { createDesign, useRouter } from '@/hooks';
 import { useLoadingStore } from '@/store';
 
 import './index.scss';
 
-function Count() {
-  const { prefixCls } = useDesign('pg-guild-count');
+const { prefixCls } = createDesign('pg-guild-count');
 
+function Count() {
   const [count, setCount] = useState(0);
 
   const router = useRouter();

src/views/test/create/index.tsx

@@ -33,7 +33,7 @@ import React, { useState } from 'react';
 import { useLocation } from 'react-router';
 import Cmp1 from '@/components/auto-scroll-to-top';
 import Cmp2 from '@/components/not-fount';
-import { useDesign } from '@/hooks';
+import { useRouter } from '@/hooks';
 import { useUserStore } from '@/store';
 import { uuid } from '@/utils';
 import { initializeApp } from '@core/app';