// 开发者输入注释：
// 函数：根据用户年龄和会员等级，计算折扣率。普通会员18岁以下9折，以上无折扣；VIP会员统一8折。

// AI 可能生成的代码：
function calculateDiscount(age, membershipLevel) {
  const baseDiscount = 1.0; // 无折扣

  if (membershipLevel === 'vip') {
    return 0.8;
  } else if (membershipLevel === 'regular') {
    if (age < 18) {
      return 0.9;
    }
  }
  // 其他情况或普通会员18岁及以上
  return baseDiscount;
}

// 开发者开始输入：
const userId = '123';
const userInfo = await userService.fetchUser(userId);
const lastLogin = 

// AI 根据项目上下文，可能自动补全为：
const userId = '123';
const userInfo = await userService.fetchUser(userId);
const lastLogin = formatDate(userInfo.lastLoginTime, 'YYYY-MM-DD HH:mm');
console.log(`用户 ${userInfo.name} 最后登录于 ${lastLogin}`);

// 项目中使用了一个自定义的 `useStore` hook 和 `CustomButton` 组件
// 当开发者输入：
function SubmitButton({ isSubmitting }) {
  const [state, dispatch] = useStore();
  const handleClick = () => {
    // AI 根据项目模式，可能建议补全：
    dispatch({ type: 'SUBMIT_FORM', payload: state.formData });
    // 或者调用一个项目中已知的 action creator:
    // actions.submitForm(state.formData);
  };

  return (
    // 开始输入 <Cu
    // AI 会优先推荐项目中的 <CustomButton> 而非通用的 <button>
    <CustomButton 
      loading={isSubmitting} 
      onClick={handleClick}
      variant="primary" // 根据项目设计系统推荐属性
    >
      提交
    </CustomButton>
  );
}

// 在 Vue 3 的 <script setup> 语法下，开发者输入：
// 需要一个展示用户卡片的组件，包含头像、姓名、简介和一个关注按钮

// AI 可能生成的结构：
<template>
  <div class="user-card">
    <img :src="user.avatar" :alt="user.name" class="avatar" />
    <div class="info">
      <h3 class="name">{{ user.name }}</h3>
      <p class="bio">{{ user.bio || '暂无简介' }}</p>
    </div>
    <button 
      class="follow-btn" 
      :class="{ active: isFollowing }"
      @click="toggleFollow"
    >
      {{ isFollowing ? '已关注' : '关注' }}
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  user: {
    type: Object,
    required: true
  }
});

const isFollowing = ref(false);
const toggleFollow = () => {
  isFollowing.value = !isFollowing.value;
  // 通常这里会有一个 API 调用
  // await userApi.follow(props.user.id, isFollowing.value);
};
</script>

<style scoped>
.user-card {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  gap: 12px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.info {
  flex: 1;
}
.name {
  margin: 0 0 4px 0;
  font-size: 16px;
}
.bio {
  margin: 0;
  color: #666;
  font-size: 14px;
}
.follow-btn {
  padding: 6px 16px;
  border: 1px solid #007bff;
  border-radius: 4px;
  background: white;
  color: #007bff;
  cursor: pointer;
}
.follow-btn.active {
  background: #007bff;
  color: white;
}
</style>

// 开发者创建一个加载更多按钮
// <button @click="loadMore">加载更多</button>

// AI 可能会建议增强为：
<button 
  @click="loadMore"
  :disabled="isLoading"
  :aria-busy="isLoading"
  aria-live="polite"
>
  <span v-if="isLoading">
    <span class="spinner" aria-hidden="true"></span>
    加载中...
  </span>
  <span v-else>加载更多</span>
</button>

// 并生成相应的 CSS
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-right: 0.5em;
  vertical-align: -0.125em;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

// 开发者写了多处类似的格式化日期的代码：
const lastLoginFormatted = `${lastLogin.getFullYear()}-${lastLogin.getMonth()+1}-${lastLogin.getDate()}`;
const createdAtFormatted = `${createdAt.getFullYear()}-${createdAt.getMonth()+1}-${createdAt.getDate()}`;

// AI 可能会在侧边栏或行内提示：
// “检测到重复的日期格式化逻辑。建议抽取为工具函数 `formatDate(date)`。”
// 并提供一个“快速修复”操作，一键生成并替换：
function formatDate(date) {
  return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
}

// 在 Vue 模板中
<div v-for="item in largeList" :key="item.id">
  {{ computeExpensiveValue(item) }}
</div>

// AI 可能提示：
// “警告：`computeExpensiveValue` 在每次渲染时都会对每个 `item` 调用，可能导致性能问题。考虑使用 `computed` 属性或 `method` 配合缓存。”

// 当开发者完成一个工具函数后：
export function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// AI 可能会在相邻文件或弹出建议中生成测试用例：
// 在同级目录下建议创建 `debounce.test.js`
import { debounce } from './debounce';

describe('debounce', () => {
  jest.useFakeTimers();
  
  it('应该在等待时间后执行函数', () => {
    const func = jest.fn();
    const debouncedFunc = debounce(func, 1000);
    
    debouncedFunc();
    expect(func).not.toHaveBeenCalled();
    
    jest.advanceTimersByTime(1000);
    expect(func).toHaveBeenCalledTimes(1);
  });

  it('应该在多次快速调用时只执行一次', () => {
    const func = jest.fn();
    const debouncedFunc = debounce(func, 1000);
    
    debouncedFunc();
    debouncedFunc();
    debouncedFunc();
    
    jest.advanceTimersByTime(1000);
    expect(func).toHaveBeenCalledTimes(1);
  });
});

// 在一个被标记为需要支持 Web 和 Mini-Program 的项目中
// 开发者使用了典型的 Web API：
element.addEventListener('animationend', handler);

// AI 可能会高亮此行并提示：
// “注意：`animationend` 事件在小程序环境中不可用。如需跨端，请考虑使用条件编译或封装统一动画库。”
// 并可能提供一个快速操作，替换为项目中的跨端动画工具函数：
import { onAnimationEnd } from '@common/animation';
onAnimationEnd(element, handler);