前端编码

前端编码

本技能是流程指引，不是逐条打勾清单：按场景判断使用，遇不适用情况保持裁量，不机械执行。

组件规范

组件命名

类型	规范	示例
组件文件	PascalCase	UserProfile.vue, LoginForm.tsx
组件名	PascalCase	UserProfile, OrderList
组件文件夹	kebab-case	user-profile/, order-list/
Props	camelCase	userName, isLoading
事件名	camelCase（以 on 开头）	onClick, onChange
方法名	camelCase	handleSubmit, fetchData

组件设计原则

原则	说明	优先级
受控组件	表单值受 state 控制	高
Props 校验	使用 TypeScript 或 PropTypes	高
组件拆分阈值	>150 行评估拆分；>500 行必须拆分（见禁止行为）	中

React 组件结构

// 1. 类型定义 → 2. 组件定义 → 3. Hooks → 4. 业务逻辑 → 5. 渲染 → 6. 导出
interface UserCardProps {
  userId: number;
  userName: string;
  avatar?: string;
}

function UserCard({ userId, userName, avatar }: UserCardProps) {
  const [isEditing, setIsEditing] = useState(false);
  const handleEdit = () => setIsEditing(true);

  return (
    <div className={styles.card}>
      <img src={avatar} alt={userName} />
      <span>{userName}</span>
      <button onClick={handleEdit}>编辑</button>
    </div>
  );
}

export default UserCard;

Vue 组件结构

<template>
  <div class="user-card">
    <img :src="avatar" :alt="userName" />
    <span>{{ userName }}</span>
    <button @click="handleEdit">编辑</button>
  </div>
</template>

<script setup lang="ts">
interface Props { userId: number; userName: string; avatar?: string; }
const props = defineProps<Props>();
const emit = defineEmits<{ (e: 'edit', userId: number): void; }>();
const handleEdit = () => emit('edit', props.userId);
</script>

<style scoped>
.user-card { display: flex; align-items: center; }
</style>

设计系统一致性（编码前必做）

编写前端代码前必须先执行发现步骤，不能跳过：

1. 识别设计系统来源：查 package.json 的组件库依赖、设计令牌文件（theme.css/tokens.json/tailwind.config）、全局样式文件、已有同类组件实现
2. 提取设计规范：间距梯度、颜色语义变量、字体梯度、可复用组件、布局断点
3. 以此为锚点：所有样式决策必须以提取到的规范为基准

间距

• 先从项目的设计令牌/全局样式找到间距梯度
• 所有间距值必须从项目定义的梯度中选取
• 项目未定义时，使用项目中最常见的间距倍数作为基准

颜色

• 先找到项目的语义色变量（主色、成功色、警告色、错误色）
• 所有颜色通过项目的变量/token 引用
• 需新颜色时在设计令牌中新增变量后引用，禁止硬编码