签入版本

RXThinkCMF_ThinkPhp6_NaiveVue/zh/standards/frontend-code.md

@@ -0,0 +1,142 @@
+# 12.7 前端编码规范
+
+:::tip 概述
+前端编码规范涵盖 Vue 组件、TypeScript、API 模块、样式和代码风格等方面。
+:::
+
+## Vue 组件规范
+
+```vue
+<!-- 推荐的组件结构 -->
+<template>
+  <!-- 模板内容 -->
+</template>
+
+<script setup lang="ts">
+// 使用 <script setup lang="ts"> 语法
+import { ref, onMounted } from 'vue';
+
+// Props 定义
+interface Props {
+  id: number;
+  name?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  name: '',
+});
+
+// 响应式数据
+const loading = ref(false);
+const tableData = ref<any[]>([]);
+
+// 方法
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const res = await getExamplePage({ pageNo: 1, pageSize: 20 });
+    tableData.value = res.records;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 生命周期
+onMounted(() => fetchData());
+</script>
+
+<style scoped>
+/* 组件样式 */
+</style>
+```
+
+## TypeScript 规范
+
+```typescript
+// 接口定义
+interface User {
+  id: number;
+  username: string;
+  realname: string;
+  status: number;
+}
+
+// 枚举定义
+enum UserStatus {
+  ENABLE = 1,
+  DISABLE = 2,
+}
+
+// API 响应类型
+interface PageResult<T> {
+  records: T[];
+  total: number;
+  size: number;
+  current: number;
+  pages: number;
+}
+
+// Props 类型
+interface TableProps {
+  data: any[];
+  loading?: boolean;
+  columns: Column[];
+}
+```
+
+## API 模块规范
+
+```typescript
+// ui/src/api/system/user.ts
+import { http } from '@/utils/http/axios';
+
+// 查询用 GET + params
+export function getUserPage(params?: Record<string, any>) {
+  return http.request({ url: '/user/page', method: 'GET', params });
+}
+
+// 新增用 POST + data
+export function userAdd(data: any) {
+  return http.request({ url: '/user/add', method: 'POST', data });
+}
+
+// 修改用 PUT + data
+export function userUpdate(data: any) {
+  return http.request({ url: '/user/update', method: 'PUT', data });
+}
+
+// 删除用 DELETE
+export function userDelete(id: number) {
+  return http.request({ url: '/user/delete/' + id, method: 'DELETE' });
+}
+```
+
+## 命名规范
+
+| 类型 | 规范 | 示例 |
+|------|------|------|
+| 组件文件 | PascalCase | `BasicTable.vue` |
+| API 文件 | camelCase | `user.ts` |
+| API 函数 | camelCase | `getUserPage` |
+| Store 文件 | camelCase | `user.ts` |
+| 常量 | UPPER_SNAKE_CASE | `ACCESS_TOKEN` |
+| CSS 类 | kebab-case | `page-container` |
+
+## 代码风格
+
+```bash
+# ESLint 检查
+pnpm lint:eslint
+
+# Prettier 格式化
+pnpm lint:prettier
+
+# Stylelint 检查
+pnpm lint:stylelint
+```
+
+:::warning 禁止事项
+- 不要使用 `any` 类型（除非确实无法确定类型）
+- 不要使用 `console.log`（生产环境）
+- 不要在模板中写复杂逻辑（提取为 computed 或方法）
+- 不要在 `setup` 外使用 Composition API
+:::