// ❌ 修复前 — 直接对接口数据调用 .map()
// Vue 3 Composition API
const data = ref(null)
onMounted(() => {
  fetch('/api/recommended')
    .then(res => res.json())
    .then(res => { data.value = res.data })
    // 后端改了返回结构：{ data: null } 而不是 { data: { list: [] } }
})

// template 中：
// <TeaCard v-for="item in data.list" :key="item.id" />
// 💥 TypeError! data 是 null，无法读取 .list

// ✅ 修复后 — 三层防御：可选链 + 默认值 + onErrorCaptured
// Vue 3 Composition API
const data = ref({ list: [] }) // 默认值
onMounted(() => {
  fetch('/api/recommended')
    .then(res => res.json())
    .then(res => { data.value = res?.data ?? { list: [] } }) // 可选链兜底
    .catch(() => {}) // 网络错误不打挂页面
})

// template 中：
// <TeaCard v-for="item in (data?.list ?? [])" :key="item.id" />

// 全局错误边界 — 防止组件级报错导致白屏
// ErrorBoundary.vue
<template>
  <slot v-if="!error" />
  <div v-else class="error-fallback">
    <p>页面出了点问题</p>
    <button @click="retry">重试</button>
  </div>
</template>
<script setup>
import { ref, onErrorCaptured } from 'vue'
const error = ref(null)
onErrorCaptured((err) => {
  error.value = err
  return false // 阻止错误继续向上传播
})
const retry = () => { error.value = null }
</script>

// ❌ 修复前 — 前端直接跨域请求，后端没配CORS
// 前端代码
fetch('https://payment-api.com/pay', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Token': getToken()  // 自定义Header → 触发预检请求
  },
  body: JSON.stringify({ orderId: 123, amount: 25 })
});
// 浏览器：发 OPTIONS 预检 → 后端没配 → 拦截！
// Console: CORS policy: No 'Access-Control-Allow-Origin' header

// ✅ 修复方案一：后端添加CORS响应头（推荐）
// Nginx 配置
server {
    location /api/ {
        add_header Access-Control-Allow-Origin "https://milktea.com";
        add_header Access-Control-Allow-Methods "GET,POST,PUT,DELETE,OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type,X-Token";
        add_header Access-Control-Max-Age 86400;  // 预检缓存24h

        if ($request_method = 'OPTIONS') {
            return 204;  // 预检请求直接返回
        }
        proxy_pass http://payment-backend/;
    }
}

// ✅ 修复方案二：前端走同域代理（开发环境）
// vite.config.js / webpack devServer
export default {
  server: {
    proxy: {
      '/payment-api': {
        target: 'https://payment-api.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/payment-api/, '')
      }
    }
  }
}
// 前端改为调同域: fetch('/payment-api/pay', ...)

// ❌ 修复前 — 定时器和事件监听都没有清理
function FlashSale() {
  const [countdown, setCountdown] = useState(3600);

  useEffect(() => {
    // 每次进入都创建新的定时器，离开页面不会自动销毁！
    setInterval(() => {
      setCountdown(prev => prev - 1);
    }, 1000);
    // 页面离开后这个定时器还在跑！

    // 全局事件监听也没清理
    window.addEventListener('resize', handleResize);
  }, []);

  // ❌ 没有 return 清理函数
  return 
倒计时：{countdown}
;
}
// 用户进出10次 = 10个定时器同时跑 = 倒计时每秒减10

// ✅ 修复后 — useEffect 返回清理函数
function FlashSale() {
  const [countdown, setCountdown] = useState(3600);

  useEffect(() => {
    const timer = setInterval(() => {
      setCountdown(prev => prev - 1);
    }, 1000);

    const handleResize = () => { /* ... */ };
    window.addEventListener('resize', handleResize);

    // ✅ 组件卸载时清理定时器和事件
    return () => {
      clearInterval(timer);
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return 
倒计时：{formatTime(countdown)}
;
}

// Vue 版本
// setup() {
//   let timer = null;
//   onMounted(() => {
//     timer = setInterval(() => { ... }, 1000);
//   });
//   onUnmounted(() => {
//     clearInterval(timer);  // ✅ 清理！
//   });
// }

/* ❌ 修复前 — 没有任何处理 */
/* HTML */


/* CSS */
.buy-btn {
  /* 没有设置 touch-action，浏览器会等300ms */
  padding: 12px 32px;
  background: #FFA657;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}

/* JS */
document.querySelector('.buy-btn').addEventListener('click', () => {
  // 300ms后才触发！用户觉得卡
  submitOrder();
});

/* ✅ 修复方案一：CSS touch-action（最简单） */
.buy-btn {
  touch-action: manipulation; /* 禁用双击缩放，消除300ms */
  padding: 12px 32px;
  background: #FFA657;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}

/* ✅ 修复方案二：使用 pointer events */
.buy-btn {
  touch-action: manipulation;
}
document.querySelector('.buy-btn').addEventListener('pointerup', (e) => {
  e.preventDefault();
  submitOrder(); // 立即触发，无延迟
});

/* ✅ 全局方案：所有可交互元素加 touch-action */
a, button, input, textarea, select, [role="button"] {
  touch-action: manipulation;
}

/* ❌ 修复前 — 类名太通用，和第三方冲突 */
/* 自定义样式 */
.btn {
  background: #FFA657;
  border-radius: 8px;
  padding: 12px 24px;
  color: white;
}

/* Element Plus 也定义了 .el-button--primary */
/* 权重 0,2,0 > 0,1,0 → 第三方覆盖了你的样式！*/

/* ✅ 修复方案一：使用 CSS Modules（推荐） */
/* Button.module.css — 构建工具会自动加hash */
.primary {
  background: #FFA657;
  border-radius: 8px;
}
/* 编译后：.primary_a3x7b → 不会和任何第三方冲突 */

// JSX
import styles from './Button.module.css';
提交订单

/* ✅ 修复方案二：BEM命名规范 */
.milktea-btn {}
.milktea-btn--primary {}
.milktea-btn--primary--large {}

/* ✅ 修复方案三：CSS Layers（现代浏览器） */
@layer vendor, app;
@import url('element-plus.css') layer(vendor);

@layer app {
  .btn { background: #FFA657; } /* app层优先级高于vendor层 */
}

  {products.map(item => (
    

      
        
      {item.name}
      ¥{item.price}
    
  ))}

  {products.map(item => (
    

       {
          e.target.src = '/static/tea-placeholder.svg'; {/* 加载失败兜底 */}
        }}
        style={{
          backgroundColor: '#f0f0f0',  {/* 加载中占位色 */}
          minHeight: '120px'           {/* 防止布局抖动 */}
        }}
      />
      {item.name}
      ¥{item.price}
    
  ))}



const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;  // data-src → src
      observer.unobserve(img);     // 加载后不再观察
    }
  });
}, { rootMargin: '200px' });  {/* 提前200px开始加载 */}

// ❌ 修复前 — 切换Tab时没有取消上一个请求
function MenuList() {
  const [list, setList] = useState([]);
  const [category, setCategory] = useState('hot');

  useEffect(() => {
    // 每次切换 category 都发新请求，但不取消上一次
    fetch('/api/tea?cat=' + category)
      .then(res => res.json())
      .then(data => setList(data.list));
      // 如果上一个请求后回来，会覆盖当前Tab数据！
  }, [category]);
}

// ✅ 修复方案一：AbortController 取消上一个请求
function MenuList() {
  const [list, setList] = useState([]);

  useEffect(() => {
    const controller = new AbortController();

    fetch('/api/tea?cat=' + category, {
      signal: controller.signal   // 绑定信号
    })
      .then(res => res.json())
      .then(data => setList(data.list))
      .catch(err => {
        if (err.name === 'AbortError') return; // 取消的请求忽略
        throw err;
      });

    return () => controller.abort(); // 组件更新/卸载时取消
  }, [category]);
}

// ✅ 修复方案二：请求标记（适合无法Abort的场景）
const latestReqId = useRef(0);
useEffect(() => {
  const reqId = ++latestReqId.current;
  fetch('/api/tea?cat=' + category)
    .then(res => res.json())
    .then(data => {
      if (reqId === latestReqId.current) { // 只处理最新请求
        setList(data.list);
      }
    });
}, [category]);

// ❌ 修复前 — 没有任何防重复措施
function OrderPage() {
  const handleSubmit = () => {
    // 用户点几次就发几个请求！
    fetch('/api/order', {
      method: 'POST',
      body: JSON.stringify({ items: cartItems })
    }).then(res => res.json())
      .then(data => navigate('/success'));
  };

  return (
    
      提交订单  {/* 可以无限点击！ */}
    
  );
}

// ✅ 修复方案一：loading状态 + 禁用按钮（最直接）
function OrderPage() {
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (submitting) return;         // 二次保险
    setSubmitting(true);            // 立刻禁用

    try {
      const res = await fetch('/api/order', {
        method: 'POST',
        headers: { 'X-Idempotent-Key': crypto.randomUUID() }, // 幂等Key
        body: JSON.stringify({ items: cartItems })
      });
      const data = await res.json();
      navigate('/success');
    } catch (err) {
      showToast('下单失败，请重试');
    } finally {
      setSubmitting(false);         // 无论成败都恢复
    }
  };

  return (
    
      {submitting ? '提交中...' : '提交订单'}
    
  );
}

// ✅ 修复方案二：通用防抖Hook
function useDebounce(fn, delay = 500) {
  const timer = useRef(null);
  return (...args) => {
    clearTimeout(timer.current);
    timer.current = setTimeout(() => fn(...args), delay);
  };
}
// ✅ 后端也要做幂等：同一 X-Idempotent-Key 的请求只处理一次

// ❌ 修复前 — 购物车数据只存在组件本地 state
// React
function MenuPage() {
  const [cart, setCart] = useState([]); // 路由切换后丢失！
  return 
{cart.map(item => ...)}
;
}

// Vue
export default {
  data() {
    return { cart: [] };  // 路由切换后丢失！
  }
}

// ✅ 修复方案一：React — 全局状态(Zustand)
// store/cartStore.js
import { create } from 'zustand';
export const useCartStore = create((set) => ({
  cart: [],
  addItem: (item) => set((s) => ({ cart: [...s.cart, item] })),
  removeItem: (id) => set((s) => ({ cart: s.cart.filter(i => i.id !== id) })),
}));

// 任何页面都能访问购物车，路由切换不丢失
function MenuPage() {
  const { cart, addItem } = useCartStore();
  // cart 数据存储在全局 store，组件卸载不影响
}

// ✅ 修复方案二：Vue — Pinia + KeepAlive
// stores/cart.js (Pinia)
export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    addItem(item) { this.items.push(item); }
  }
});

// 缓存组件，不销毁

  
    
  


// ✅ 修复方案三：localStorage 持久化
const [cart, setCart] = useState(() => {
  return JSON.parse(localStorage.getItem('cart') || '[]');
});
useEffect(() => {
  localStorage.setItem('cart', JSON.stringify(cart));
}, [cart]);

// ❌ 修复前 — 全量引入所有库
import * as _ from 'lodash';           // 500KB 全量引入
import moment from 'moment';           // 600KB 含所有语言包
import * as echarts from 'echarts';    // 1.8MB 全量引入
import { Button, Table, Modal, Form, Input,
  Select, DatePicker, Upload, message } from 'antd'; // 800KB+

// 所有代码打包成一个文件
// webpack output: main.[hash].js → 4.7MB！

// ✅ 修复方案一：按需引入（Tree Shaking）
import debounce from 'lodash/debounce';    // 只引入用到的函数 ~2KB
import { debounce } from 'lodash-es';      // 或用 lodash-es 更利于 tree shaking
import dayjs from 'dayjs';                 // dayjs 2KB 替代 moment 600KB
import * as echarts from 'echarts/core';   // 按需引入ECharts模块
import { BarChart } from 'echarts/charts';
echarts.use([BarChart]);                   // 只注册用到的图表

// ✅ 修复方案二：路由级代码分割（Code Splitting）
// React
const AdminPage = React.lazy(() => import('./pages/Admin'));
const OrderPage = React.lazy(() => import('./pages/Order'));

// Vue
const routes = [
  { path: '/admin', component: () => import('./pages/Admin.vue') },
  { path: '/order', component: () => import('./pages/Order.vue') },
];

// ✅ 修复方案三：Vite/Webpack 配置优化
// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor-react': ['react', 'react-dom'],
          'vendor-echarts': ['echarts'],
          'vendor-antd': ['antd'],
        }
      }
    }
  }
}

// 结果：main.js 4.7MB → 首屏 180KB + 按需加载 chunks

// ❌ 修复前 — 敏感信息直接console.log
function login(username, password) {
  const res = await api.login(username, password);
  console.log('[Login] user login success:', res.data);
  // → 打印了 {username: "admin", token: "eyJhbGc..."}
  console.log('[Debug] token:', res.data.token);
  // → 直接暴露了JWT token
}

function payment(orderId, amount) {
  const sign = generateSign(orderId, amount);
  console.log('[Pay] params:', { orderId, sign, amount });
  // → 支付签名泄露！
}

// ✅ 修复方案一：构建时自动移除（推荐）
// vite.config.js
export default defineConfig({
  esbuild: {
    drop: ['console', 'debugger'],  // 生产环境移除所有console
  },
});

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new TerserPlugin({
      terserOptions: { compress: { drop_console: true } }
    })]
  }
};

// ✅ 修复方案二：自定义Logger（更灵活）
// utils/logger.js
const isDev = process.env.NODE_ENV === 'development';

const logger = {
  log: (...args) => isDev && console.log(...args),
  warn: (...args) => console.warn(...args),  // warn保留
  error: (...args) => console.error(...args), // error保留
};

// 业务代码使用logger替代console
logger.log('[Login] success');  // 生产环境自动静默

// ✅ 修复方案三：ESLint规则
// .eslintrc.js
module.exports = {
  rules: {
    'no-console': process.env.NODE_ENV === 'production'
      ? 'error' : 'warn'
  }
};

<!DOCTYPE html>
<html>
  <head>
    <title>前端小站</title>  <!-- 标题太笼统 -->
    <!-- 没有meta description, 没有Open Graph -->
  </head>
  <body>
    <div id="app"></div>  <!-- 爬虫：这页面啥也没有 -->
    <script src="/js/main.js"></script>
  </body>
</html>

// Vue Router 用的是 history 模式，但 Nginx 没配 fallback
// 访问 /summer-activity 直接返回 404

// nuxt.config.js
export default {
  head: {
    title: '前端小站 - 夏日特惠 | 无线耳机满减优惠',
    meta: [
      { hid: 'description', name: 'description',
        content: '前端小站夏日特惠，全场满30减10，显示器支架、无线耳机...' },
      { property: 'og:title', content: '前端小站夏日特惠' },
      { property: 'og:image', content: '/summer-banner.jpg' },
    ]
  }
};

// 爬虫现在能看到完整的HTML：
// 

//   
夏日特惠 🍹
//   
无线耳机 ¥12
//   
显示器支架 ¥18
// 


// vite.config.js + vite-plugin-prerender
import prerender from 'vite-plugin-prerender';
export default {
  plugins: [
    prerender({
      routes: ['/summer-activity', '/about'],
      // 构建时用headless浏览器访问这些页面，保存HTML快照
    })
  ]
};

// ✅ Nginx 配置 — SPA history模式 fallback
location / {
  try_files $uri $uri/ /index.html;  // 避免刷新404
}

  
  
...

  
  

    
  

 {
    setTimeout(() => {
      e.target.scrollIntoView({
        behavior: 'smooth',
        block: 'center'  // 滚动到视口中央
      });
    }, 300);  // 延迟等键盘动画完成
  }}
/>


useEffect(() => {
  const viewport = window.visualViewport;
  const handleResize = () => {
    // 键盘弹出时 viewport.height 会变小
    const offsetHeight = window.innerHeight - viewport.height;
    document.body.style.height = viewport.height + 'px';
    // 将底部输入框上移
    document.querySelector('.remark-section').style.transform =
      'translateY(-' + offsetHeight + 'px)';
  };
  viewport.addEventListener('resize', handleResize);
  return () => viewport.removeEventListener('resize', handleResize);
}, []);


.remark-section {
  bottom: env(safe-area-inset-bottom);  /* 适配底部安全区 */
  padding-bottom: env(keyboard-inset-height, 0px); /* iOS键盘高度 */
}

// ✅ 修复后 — 异步加载 + 超时降级 + 重试
function loadWxSDK(timeout = 3000, retries = 2) {
  return new Promise((resolve, reject) => {
    // 检查是否已加载
    if (window.wx) { resolve(window.wx); return; }

    const script = document.createElement('script');
    script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
    script.async = true;  // 异步加载，不阻塞

    const timer = setTimeout(() => {
      script.remove();
      reject(new Error('SDK加载超时'));
    }, timeout);

    script.onload = () => {
      clearTimeout(timer);
      resolve(window.wx);
    };
    script.onerror = () => {
      clearTimeout(timer);
      script.remove();
      reject(new Error('SDK加载失败'));
    };

    document.head.appendChild(script);
  });
}

// 使用：带重试和降级
async function initShare() {
  try {
    const wx = await loadWxSDK(3000, 2);
    wx.config({ /* ... */ });
    wx.updateAppMessageShareData({ /* ... */ });
  } catch (err) {
    // 降级：SDK不可用时，隐藏分享按钮或使用原生分享
    console.warn('微信SDK不可用，分享功能降级');
    document.querySelector('.share-btn').style.display = 'none';
    // 或使用 navigator.share (原生Web Share API)
    if (navigator.share) {
      document.querySelector('.share-btn').onclick = () => {
        navigator.share({ title: '前端小站', url: location.href });
      };
    }
  }
}

// 不阻塞主流程
initShare(); // fire-and-forget