// 使用 const 和箭头函数定义所有本地函数
const fetchUserData = async (userId) => {
  // ...
};

// 风格不统一，降低可读性
function fetchUserData() { /* ... */ }
const updateUser = () => { /* ... */ };

const MAX_RETRIES = 3;
let currentUser = await fetchUser();
currentUser = 'guest';

var MAX_RETRIES = 3; // 禁止使用 var

const getTableData = async () => {
  isLoading.value = true;
  try {
    const response = await getTableDataApi({ /* params */ });
    tableData.value = response.data;
  } catch (error) {
    console.error("Failed to fetch table data:", error);
    // 向用户显示错误提示
    showErrorToast('数据加载失败');
  } finally {
    isLoading.value = false;
  }
};

// 1. 回调地狱，难以阅读和维护
getTableDataApi().then(res1 => {
  getMoreDataApi(res1.id).then(res2 => {
    // ...
  });
});

// 2. 缺少错误处理
const fetchData = async () => {
  const response = await someApi(); // 如果 someApi() reject，整个函数会崩溃
  data.value = response;
}

// 场景：页面需要同时加载用户信息和配置信息
const loadPageData = async () => {
  try {
    const [userData, configData] = await Promise.all([
      fetchUserApi(),
      fetchConfigApi(),
    ]);
    user.value = userData;
    config.value = configData;
  } catch (error) {
    // ...
  }
};

// 卫语句（提前返回）
function processPayment(user, order) {
  if (!user) {
    console.error("User not logged in.");
    return;
  }
  if (!order || order.status !== 'pending') {
    showErrorToast("Invalid order.");
    return;
  }
  // ...核心逻辑...
}

// 映射表处理多状态
const statusActions = {
  pending: () => handlePending(),
  shipped: () => handleShipped(),
  delivered: () => handleDelivered(),
  default: () => handleDefault(),
};
const action = statusActions[order.status] || statusActions.default;
action();

// 深度嵌套，难以阅读
if (user) {
  if (order) {
    if (order.status === 'pending') {
      // ...核心逻辑...
    } else {
      showErrorToast("Invalid order status.");
    }
  } else {
    showErrorToast("No order found.");
  }
} else {
  console.error("User not logged in.");
}

// 在 UserProfile.vue 中
export default defineComponent({
  name: 'UserProfile',
  // ...
});

// composables/useModal.ts
import { ref } from 'vue';

export function useModal() {
  const isVisible = ref(false);
  const openModal = () => isVisible.value = true;
  const closeModal = () => isVisible.value = false;

  return { isVisible, openModal, closeModal };
}

// 在组件中使用
// const { isVisible, openModal, closeModal } = useModal();

// 这种写法将 UI 状态、表单数据和控制方法耦合在一起，难以复用和测试
const editModel = reactive({
  isShow: false,
  form: { name: '...' },
  showFunc: () => { /* ... */ },
  cancelFunc: () => { /* ... */ },
});

# 良好示例
feat(user): add user login and registration functionality
fix(form): correct validation logic for email field
refactor(api): abstract api calls into a dedicated service module

/src
├── api/                # API 请求模块 (按业务划分)
│   ├── auth.ts
│   └── user.ts
├── assets/             # 静态资源 (图片, 字体等)
├── components/         # 全局组件
│   ├── base/           # 基础 UI 组件 (BaseButton.vue)
│   └── business/       # 全局业务组件 (UserSelector.vue)
├── composables/        # Vue Composition API 函数 (Hooks)
│   └── usePagination.ts
├── config/             # 全局配置
│   └── index.ts
├── layouts/            # 布局组件
│   └── DefaultLayout.vue
├── router/             # 路由配置
│   └── index.ts
├── stores/             # Pinia 状态管理
│   ├── user.ts
│   └── index.ts
├── styles/             # 全局样式
│   ├── main.scss
│   └── _variables.scss
├── types/              # TypeScript 类型定义
│   └── api.d.ts
├── utils/              # 工具函数
│   └── format.ts
├── views/              # 页面级组件 (路由入口)
│   ├── user/
│   │   ├── UserProfile.vue
│   │   └── UserList.vue
│   └── Home.vue
├── App.vue             # 根组件
└── main.ts             # 应用入口

<script setup lang="ts">
// 1. imports
import { ref, computed } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 2. 类型定义 (Props, Emits, etc.)
interface Props {
  title: string;
  items: string[];
}

// 3. defineProps, defineEmits, defineExpose
const props = withDefaults(defineProps<Props>(), {
  title: 'Default Title',
});
const emit = defineEmits<{
  (e: 'select', item: string): void;
}>();
defineExpose({ reset });

// 4. 响应式状态 (State)
const internalState = ref(0);

// 5. 计算属性 (Computed Properties)
const formattedTitle = computed(() => `--- ${props.title} ---`);

// 6. 侦听器 (Watchers)
watch(() => props.items, (newVal) => {
  // ...
});

// 7. 生命周期钩子 (Lifecycle Hooks)
onMounted(() => {
  // ...
});

// 8. 方法 (Methods)
function handleClick() {
  emit('select', 'some-item');
}

function reset() {
  internalState.value = 0;
}
</script>

// 【推荐】清晰、类型安全
interface Props {
  user: User;
  isVisible?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  isVisible: false,
});

const emit = defineEmits<{
  (e: 'update:isVisible', value: boolean): void;
  (e: 'submit', data: User): void;
}>();

// 【反例】类型不明确，难以维护
defineProps(['user', 'isVisible']);
defineEmits(['update:isVisible', 'submit']);

// 【正例】
import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import BaseButton from '../BaseButton.vue';

describe('BaseButton.vue', () => {
  // 测试点1：渲染
  it('should render the slot content', () => {
    // Arrange
    const wrapper = mount(BaseButton, {
      slots: {
        default: 'Click Me',
      },
    });
    // Assert
    expect(wrapper.text()).toBe('Click Me');
  });

  // 测试点2：交互 (emit)
  it('should emit a click event when clicked', async () => {
    // Arrange
    const wrapper = mount(BaseButton);
    // Act
    await wrapper.trigger('click');
    // Assert
    expect(wrapper.emitted()).toHaveProperty('click');
    expect(wrapper.emitted('click')).toHaveLength(1);
  });

  // 测试点3：属性 (props)
  it('should be disabled when the disabled prop is true', async () => {
    // Arrange
    const wrapper = mount(BaseButton, {
      props: {
        disabled: true,
      },
    });
    // Assert
    expect(wrapper.attributes('disabled')).toBeDefined();
    // Act
    await wrapper.trigger('click');
    // Assert
    expect(wrapper.emitted('click')).toBeUndefined();
  });
});

// 【反例】测试内部实现
it('should have a specific internal class when hovered', () => {
  // 这是一个糟糕的测试，因为它依赖于组件的内部样式实现，
  // 一旦样式类名改变，测试就会失败，即使组件功能完好。
});

{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"],
    "*.{scss,css}": ["stylelint --fix"]
  }
}

name: Frontend CI

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Lint and Format Check
        run: pnpm lint

      - name: Run Unit Tests
        run: pnpm test:run --coverage # 运行测试并生成覆盖率报告

      - name: Build Project
        run: pnpm build

      # 可选：上传覆盖率报告到 Codecov 等服务
      # - name: Upload coverage reports to Codecov
      #   uses: codecov/codecov-action@v3