# 动态路由示例

**Repository Path**: persimmonya/dynamic

## Basic Information

- **Project Name**: 动态路由示例
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-03
- **Last Updated**: 2026-02-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## LEATC-IDE-USER

### 初始化项目

```bash
pnpm install
```
### 运行项目

```bash
pnpm start
```

### 打包项目

```bash
pnpm run build
```

# 开发规范

## 目录结构规范

### 基础目录结构

```javascript
|-- config          	// 配置文件、路由、代理等
	|-- config.ts		//配置文件
	|-- routes.ts		//路由文件
	|-- proxy.ts		//代理文件
|-- public          	//静态资源存放目录
	|-- images			//图片资源存放目录
|-- src					//主开发目录
	|-- assets			//静态资源
	|-- components		//公共组件
	|-- core			//工具包文件
		|-- utils			//工具函数
		|-- constants	//项目级常数
	|-- hooks			//公共hooks
	|-- layouts			//布局组件
	|-- models			//仓库文件
	|-- pages			//页面组件
	|-- app.tsx			//入口文件
	|-- global.less		//全局样式文件
	|-- global.tsx		//全局文件
	|-- initialize.tsx 	//初始化器
	|-- README.md		//自述文件
|-- package.json		//公共依赖文件
	
```

## 命名规范

### JavaScript命名

#### 变量

```javascript

// 布尔值使用 is/has/can 前缀
const isVisible = false
const hasPermission = true
```

#### 函数与方法

```javascript
// 常规函数
function formatDate() {}
const getUserInfo = () => {}

// 事件处理 - handle前缀
function handleClickSubmit() {}
function handleChange() {}
```

## 代码质量规范

### 代码复杂度控制

- 函数长度不超过 50 行
- 单个文件代码不超过 500 行
- 嵌套层级尽量不超过 4 层：

```javascript
// 不良示例 - 嵌套过深
function processData(data) {
  if (data) {
    data.items.forEach(item => {
      if (item.valid) {
        item.values.forEach(value => {
          // ...更多嵌套
        })
      }
    })
  }
}

// 优化示例 - 减少嵌套
function processData(data) {
  if (!data) return
  
  data.items
    .filter(item => item.valid)
    .flatMap(item => item.values)
    .forEach(processValue)
}
```

### 类型安全

- 必须使用 TypeScript
- 重要接口必须定义类型
- 公共 API 需要类型声明

```javascript
interface User {
  id: number
  name: string
  email?: string
}

function getUser(id: number): Promise<User> {
  // ...
}
```

## 注释规范

### 文件头部注释

```javascript
/**
 * @file 文件功能描述
 * @author 作者姓名
 * @createDate 2023-11-20
 * @lastEditDate 2023-11-25
 */
```

### 函数/方法注释

```javascript
/**
 * 格式化日期时间
 * @param {Date|string} date - 需要格式化的日期对象或字符串
 * @param {string} [format='YYYY-MM-DD'] - 格式字符串(可选)
 * formatDate(new Date()) // "2023-11-20"
 * formatDate('2023/11/20', 'YYYY年MM月DD日') // "2023年11月20日"
 */
function formatDate(date, format = 'YYYY-MM-DD') {
  // 实现代码
}
```

### 代码块注释

```javascript
// ========== 用户认证校验 ==========
// 1. 检查token有效性
const isValid = verifyToken(token)

// 2. 如果无效则跳转登录
if (!isValid) {
  // 注意：此处需要清理用户会话数据
  clearSession()
  redirectToLogin()
}
```

### CSS/LESS注释

```less
/* ===== 主按钮样式 ===== */
.btn-primary {
  // 基础样式
  padding: 8px 16px;
  
  // 悬浮状态
  &:hover {
    opacity: 0.9;
  }
}
```

### JSX注释

```tsx
{/* 条件渲染用户信息 */}
{hasUser ? (
  <div className="user-panel">
    {/* 注意：此处需要key属性 */}
    {userList.map(user => (
      <UserItem key={user.id} data={user} />
    ))}
  </div>
) : (
  <LoginButton />
)}
```

## css规范

- **前缀要求**：统一使用 ide-user前缀
- **命名格式**：ide-user-×××
- 项目已设置css变量，请勿直接书写ide-user前缀，请使用@ide-user-prefix变量
- **示例**：

```less
.@{ide-user-prefix}-modules {
  // ...
}
```

## hooks规范

### 基本原则

- **前缀要求**：所有自定义 Hook 必须以 `use` 开头
- **命名格式**：`use+功能描述`
- **语义明确**：名称应准确描述 Hook 功能

```javascript
// 正确示例
function useWindowSize() {}
function useAuthCheck() {}

// 错误示例
function getSize() {}       // 缺少use前缀
function usecheckAuth() {}  // 大小写不规范
```

### 开发规范

- 必须使用 TypeScript 定义类型
- 明确输入参数和返回值类型
- 提供完整的类型注释

```javascript
/**
 * 窗口尺寸Hook
 * @returns { width: number; height: number } 当前窗口尺寸
 */
function useWindowSize(): { width: number; height: number } {
  // 实现代码
}
```

### 完整示例

```javascript
import { useState, useEffect, useCallback } from 'react'

/**
 * 防抖Hook
 * @param value 需要防抖的值
 * @param delay 防抖延迟(毫秒)
 * @returns 防抖处理后的值
 */
function useDebounce<T>(value: T, delay = 500): T {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}

// 使用示例
function SearchComponent() {
  const [keyword, setKeyword] = useState('')
  const debouncedKeyword = useDebounce(keyword, 800)
  
  useEffect(() => {
    // 当debouncedKeyword变化时执行搜索
    if (debouncedKeyword) {
      doSearch(debouncedKeyword)
    }
  }, [debouncedKeyword])
  
  return <input onChange={(e) => setKeyword(e.target.value)} />
}
```

## React Hooks 使用规范

### useContext 

- 定义context类型
- 创建context时提供默认值
- 创建Provider组件
- 可使用Memo优化值

开发：

```javascript
// contexts/ThemeContext.tsx
import React, { createContext, useContext, useState } from 'react'

// 1. 定义Context类型
type ThemeContextType = {
  theme: 'light' | 'dark'
  toggleTheme: () => void
}

// 2. 创建Context（建议提供默认值）
const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggleTheme: () => {}
})

// 3. 创建Provider组件
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light')
  }

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

// 4. 封装自定义Hook
export function useTheme() {
  return useContext(ThemeContext)
}
```

使用：

```javascript
// components/ThemeToggle.tsx
function ThemeToggle() {
  // 使用自定义Hook获取Context
  const { theme, toggleTheme } = useTheme()

  return (
    <button onClick={toggleTheme}>
      当前主题：{theme === 'light' ? '🌞' : '🌙'}
    </button>
  )
}
```

### useCallback

- 基础语法

```javascript
const memoizedCallback = useCallback(() => {
    // 执行的操作
}, [/* 依赖项数组 */] )
```

- **使用场景**

  - **作为props传递给子组件**（避免子组件不必要的重新渲染）

  - **作为依赖项传递给其他hooks**（如`useEffect`）

  - **事件处理函数**（特别是频繁触发的事件）

- **简单示例**

```javascript
function SearchForm() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<string[]>([])
  
  // 记忆化搜索函数
  const handleSearch = useCallback(async () => {
    if (!query.trim()) return
    
    const data = await fetchResults(query)
    setResults(data)
  }, [query])

  return (
    <div>
      <input 
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button onClick={handleSearch}>搜索</button>
      
      <ul>
        {results.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  )
}
```

- **注意事项**
  - **应该使用**：
    - 函数作为props传递给优化过的子组件
    - 函数作为其他hooks的依赖项
    - 需要保持函数引用稳定的场景
  - **不需要使用**：
    - 函数只在当前组件内部使用
    - 组件本身没有性能问题

### useMemo 

- **基础语法**

```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b),[a, b])
```

- **使用场景**
  - **计算开销大的操作**（如复杂计算、大数据处理）
  - **避免不必要的重新渲染**（配合React.memo使用）
- **简单示例**

```javascript
function Calculator({ values }: { values: number[] }) {
  // 使用useMemo缓存计算结果
  const sum = useMemo(() => {
    console.log('正在计算总和...')
    return values.reduce((total, num) => total + num, 0)
  }, [values]) // 当values变化时重新计算

  const average = useMemo(() => {
    console.log('正在计算平均值...')
    return sum / values.length
  }, [sum, values.length])

  return (
    <div>
      <p>总和: {sum}</p>
      <p>平均值: {average.toFixed(2)}</p>
    </div>
  )
}
```

- **注意事项**
  - **应该使用**：
    - 计算成本高的操作
    - 需要保持引用稳定的对象/数组
    - 作为优化过的子组件的props
  - **不需要使用**：
    - 简单计算（如基本运算）
    - 不会导致性能问题的场景