⚡ 前端代码生成标准模板与代码规范约束规则

Vue Composition API 模板

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import type { Ref } from 'vue';

// ============ Types ============
export interface ComponentNameProps {
  title: string;
  visible?: boolean;
  items?: Array<{ id: number; name: string }>;
}

// ============ Props ============
const props = withDefaults(defineProps<ComponentNameProps>(), {
  visible: true,
  items: () => [],
});

// ============ Emits ============
const emit = defineEmits<{
  click: [event: MouseEvent];
  update: [value: string];
}>();

// ============ Reactive State ============
const internalCount: Ref<number> = ref(0);
const isLoading = ref(false);

// ============ Computed ============
const processedTitle = computed(() => props.title.trim());
const hasItems = computed(() => props.items.length > 0);

// ============ Lifecycle Hooks ============
onMounted(() => {
  console.log('Component mounted');
  initialize();
});

onUnmounted(() => {
  console.log('Component unmounted');
  cleanup();
});

// ============ Functions ============
function handleClick(event: MouseEvent): void {
  internalCount.value++;
  emit('click', event);
}
</script>

<template>
  <div v-if="visible" class="component-container">
    <h2 class="component-title">{{ processedTitle }}</h2>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<style module scoped>
.component-container {
  padding: 1rem;
  border-radius: 8px;
}
</style>

自定义 Hook 模板

import { useState, useEffect, useCallback, useRef } from 'react';

export interface UseFetchOptions<T> {
  url: string;
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
  body?: unknown;
  immediate?: boolean;
  onSuccess?: (data: T) => void;
  onError?: (error: Error) => void;
}

export interface UseFetchReturn<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  execute: (overrideOptions?: Partial<UseFetchOptions<T>>) => Promise<void>;
  reset: () => void;
}

export function useFetch<T>(options: UseFetchOptions<T>): UseFetchReturn<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | null>(null);
  const abortControllerRef = useRef<AbortController | null>(null);
  const mountedRef = useRef<boolean>(false);

  useEffect(() => {
    mountedRef.current = true;
    return () => { mountedRef.current = false; };
  }, []);

  const execute = useCallback(async () => {
    abortControllerRef.current?.abort();
    abortControllerRef.current = new AbortController();
    
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(options.url, {
        method: options.method,
        signal: abortControllerRef.current.signal,
      });
      
      const result: T = await response.json();
      setData(result);
      options.onSuccess?.(result);
    } catch (err) {
      if (err instanceof Error && err.name !== 'AbortError') {
        setError(err);
        options.onError?.(err);
      }
    } finally {
      setLoading(false);
    }
  }, [options]);

  useEffect(() => {
    if (options.immediate) {
      execute();
    }
  }, [options.immediate, execute]);

  return { data, loading, error, execute, reset: () => {
    setData(null);
    setLoading(false);
    setError(null);
  }};
}

API Service 模板

import axios from 'axios';
import type { AxiosInstance, AxiosRequestConfig } from 'axios';

export interface ApiResponse<T = unknown> {
  code: number;
  message: string;
  data: T;
  timestamp: number;
}

const BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
const TIMEOUT = 30000;

const apiClient: AxiosInstance = axios.create({
  baseURL: BASE_URL,
  timeout: TIMEOUT,
  headers: { 'Content-Type': 'application/json' },
});

// Request Interceptor
apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  config.headers['X-Request-ID'] = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
  return config;
});

// Response Interceptor
apiClient.interceptors.response.use(
  (response) => {
    const { data } = response;
    if (data.code !== 200) {
      return Promise.reject(new Error(data.message));
    }
    return data;
  },
  async (error) => {
    const status = error.response?.status;
    if (status === 401) {
      // Handle unauthorized
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export const api = {
  get: <T>(url: string, config?: AxiosRequestConfig) => 
    apiClient.get<ApiResponse<T>>(url, config),
  post: <T>(url: string, data?: unknown, config?: AxiosRequestConfig) => 
    apiClient.post<ApiResponse<T>>(url, data, config),
  put: <T>(url: string, data?: unknown, config?: AxiosRequestConfig) => 
    apiClient.put<ApiResponse<T>>(url, data, config),
  delete: <T>(url: string, config?: AxiosRequestConfig) => 
    apiClient.delete<ApiResponse<T>>(url, config),
};

export default api;

单元测试模板

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import userEvent from '@testing-library/user-event';
import ComponentName from './ComponentName';

describe('ComponentName', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should render correctly with required props', () => {
    render(<ComponentName title="Test Title" />);
    expect(screen.getByText('Test Title')).toBeInTheDocument();
  });

  it('should not render when visible is false', () => {
    render(<ComponentName title="Test" visible={false} />);
    expect(screen.queryByTestId('component-name')).not.toBeInTheDocument();
  });

  it('should call onClick when button is clicked', async () => {
    const handleClick = vi.fn();
    render(<ComponentName title="Test" onClick={handleClick} />);
    
    await userEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('should have proper ARIA attributes', () => {
    render(<ComponentName title="Accessible" />);
    expect(screen.getByRole('button'))
      .toHaveAttribute('aria-label', 'Click Accessible');
  });
});

创建一个用户注册表单组件，包含以下字段：
- 用户名（必填，3-20 个字符，只能包含字母数字下划线）
- 邮箱（必填，需要邮箱格式验证）
- 密码（必填，最少 8 位，包含大小写字母和数字）
- 确认密码（必填，必须与密码一致）
- 同意条款（必填复选框）

技术要求：
- 使用 React Hook Form 进行表单管理
- 使用 Zod 进行 schema 验证
- 实时验证（onBlur）
- 提交时显示加载状态
- 成功后显示 Toast 通知

Step 1: "首先，请定义用户注册表单的数据类型和验证 schema"
Step 2: "基于上面的类型定义，创建表单组件的基础结构"
Step 3: "现在添加表单提交、验证和错误处理逻辑"
Step 4: "最后，为这个组件编写完整的单元测试"