DIY装机

DIY 学习

预算计算器

实时编辑器

function BudgetCalculator() {
  const [type, setType] = React.useState('gaming'); // gaming 或 office
  const [prices, setPrices] = React.useState({
    cpu: 1500,
    gpu: 3000,
    mobo: 1000,
    ramSsd: 800,
    psuCaseCooler: 700
  });

  // 理想占比模型 (2026 硬件环境)
  const models = {
    gaming: { cpu: 0.20, gpu: 0.45, mobo: 0.12, ramSsd: 0.13, psuCaseCooler: 0.10 },
    office: { cpu: 0.35, gpu: 0.10, mobo: 0.15, ramSsd: 0.25, psuCaseCooler: 0.15 }
  };

  const total = Object.values(prices).reduce((a, b) => a + Number(b), 0);

  const handleInput = (key, val) => {
    setPrices({ ...prices, [key]: val });
  };

  const getStatus = (key) => {
    if (total === 0) return { text: '-', color: '#666' };
    const actualRef = prices[key] / total;
    const idealRef = models[type][key];
    const diff = actualRef - idealRef;

    if (Math.abs(diff) < 0.05) return { text: '合理', color: '#4caf50' };
    return diff > 0 ? { text: '偏高', color: '#ff9800' } : { text: '偏低', color: '#2196f3' };
  };

  const labelMap = {
    cpu: '处理器 (CPU)',
    gpu: '显卡 (GPU)',
    mobo: '主板 (Mobo)',
    ramSsd: '内存/硬盘',
    psuCaseCooler: '机电散热'
  };

  return (
    <div style={{ padding: '20px', background: '#f5f5f5', borderRadius: '12px', color: '#333' }}>
      <h3 style={{ marginTop: 0 }}>DIY 装机预算评估器</h3>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={() => setType('gaming')}
          style={{ marginRight: '10px', padding: '8px 16px', background: type === 'gaming' ? '#007bff' : '#ddd', color: type === 'gaming' ? '#fff' : '#000', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
        >游戏型</button>
        <button 
          onClick={() => setType('office')}
          style={{ padding: '8px 16px', background: type === 'office' ? '#007bff' : '#ddd', color: type === 'office' ? '#fff' : '#000', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
        >办公型</button>
      </div>

      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ borderBottom: '2px solid #ddd' }}>
            <th align="left" style={{ padding: '8px' }}>硬件</th>
            <th align="left" style={{ padding: '8px' }}>价格 (¥)</th>
            <th align="left" style={{ padding: '8px' }}>实际占比</th>
            <th align="left" style={{ padding: '8px' }}>状态</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(prices).map(key => (
            <tr key={key} style={{ borderBottom: '1px solid #eee' }}>
              <td style={{ padding: '8px' }}>{labelMap[key]}</td>
              <td style={{ padding: '8px' }}>
                <input 
                  type="number" 
                  value={prices[key]} 
                  onChange={(e) => handleInput(key, e.target.value)}
                  style={{ width: '80px', padding: '4px' }}
                />
              </td>
              <td style={{ padding: '8px' }}>{total > 0 ? ((prices[key]/total)*100).toFixed(1) : 0}%</td>
              <td style={{ padding: '8px', color: getStatus(key).color, fontWeight: 'bold' }}>
                {getStatus(key).text}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <div style={{ marginTop: '20px', padding: '15px', background: '#fff', borderRadius: '8px', borderLeft: '5px solid #007bff' }}>
        <strong>总计预算：¥{total}</strong>
        <p style={{ fontSize: '12px', color: '#666', margin: '10px 0 0 0' }}>
          * 提示：游戏型配置建议显卡占比控制在 40%-50% 之间；办公型则应优先保障 CPU 和存储空间。
        </p>
      </div>
    </div>
  );
}

结果

DIY 装机避坑建议

电源绝不缩水：不要为了省两百块钱买劣质电源。买常见品牌且瓦数留足余量。劣质电源一旦“炸机”，可能带走整台主机的所有配件。
兼容性先核对：下单前务必检查 机箱限高（散热器）、机箱限长（显卡） 以及 内存是否挡住散热器。如果不确定，直接咨询店铺客服，避免货到手装不进去。
以及：在确认电脑能稳定运行一周前，保留所有包装盒。绝大多数厂商的个人送保（RMA）都要求包装完整，且退换货必须有原包装保护。

DIY 学习​

预算计算器​

DIY 装机避坑建议​

DIY 学习

预算计算器

DIY 装机避坑建议