> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trae.cn/llms.txt
> Use this file to discover all available pages before exploring further.

<style>div[data-topic-anchor],div[data-topic-doc-header],div[data-topic-doc-footer]{display:none}</style>
````isolate-html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRAE · The Real AI Enabler</title>
<style>

:root{
  --green:#11C566;
  --green-dim:#0e9e52;
  --ink:#ffffff;
  --ink-2:#f4f5f6;
  --card:#ffffff00;
  --line:rgba(0,0,0,.18);
  --line-strong:rgba(0,0,0,.30);
  --white:#0d0f0e;
  --grey:#3a403c;
  --grey-2:#5e655f;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Outfit','Instrument Sans',-apple-system,"Microsoft YaHei",sans-serif;
  --body:'Inter',-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
::selection{background:var(--green);color:#ffffff}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:1180px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.14em;display:flex;align-items:center;gap:10px}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.nav-links{display:flex;gap:30px;font-size:13.5px;color:var(--grey)}
.nav-links a{color:inherit;text-decoration:none;transition:color .25s;letter-spacing:.02em}
.nav-links a:hover{color:var(--green)}
@media(max-width:760px){.nav-links{display:none}}

/* ---------- HERO ---------- */
header{padding:36px 0 45px;position:relative}
.eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--green);display:inline-flex;align-items:center;gap:12px;margin-bottom:34px
}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--green)}
h1.hero{
  font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(54px,9vw,118px);
}
h1.hero .g{color:var(--green)}
.hero-sub{
  font-family:var(--mono);font-size:14px;color:var(--grey);letter-spacing:.04em;
  margin-top:18px
}
.hero-lead{
  max-width:none;margin-top:0;font-size:15px;line-height:1.85;color:var(--grey);
}
.hero-lead b{color:var(--white);font-weight:700}
.hero-meta{
  margin-top:52px;display:flex;flex-wrap:nowrap;gap:12px
}
.chip{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--white);
  border:1px solid var(--line-strong);border-radius:999px;padding:9px 18px;
  display:inline-flex;align-items:center;gap:9px;transition:.25s;white-space:nowrap;flex-shrink:0;
  text-decoration:none;cursor:pointer
}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
.chip:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}

/* ---------- SECTION ---------- */
section{padding:80px 0;position:relative}
#matrix{padding-top:45px;padding-bottom:28px}
#scenarios{padding-top:28px}
.sec-head{margin-bottom:56px;max-width:760px}
.sec-num{font-family:var(--mono);font-size:13px;color:var(--green-dim);letter-spacing:.2em}
.sec-rule{width:64px;height:3px;border-radius:3px;background:var(--green);box-shadow:0 0 16px rgba(17,197,102,.5);margin-bottom:26px}
.sec-title{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.4vw,46px);letter-spacing:-.02em;margin:14px 0 20px;line-height:1.1}
.sec-desc{font-size:16px;color:var(--grey);line-height:1.85}
.matrix-desc{font-size:14.5px}
.scenarios-desc{font-size:14.5px}
.sec-desc b{color:var(--white);font-weight:400;border-bottom:1px solid var(--green-dim);padding-bottom:1px}
.sec-meta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- COMPARE ---------- */
.cmp-wrap{margin-top:40px;margin-bottom:40px}
#matrix .sec-head{margin-bottom:40px}
.cmp-rule{width:64px;height:3px;border-radius:3px;background:var(--green);box-shadow:0 0 16px rgba(17,197,102,.5);margin-bottom:22px}
.cmp-h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em;margin-bottom:28px}
.cmp-sub{font-family:var(--mono);font-size:12.5px;color:var(--green);letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}
.cmp-table{width:100%;border-collapse:collapse}
.cmp-table col.c-prod{width:11%}
.cmp-table col.c-intro{width:29%}
.cmp-table col.c-feat{width:38%}
.cmp-table col.c-user{width:22%}
.cmp-table th,.cmp-table td{text-align:left;padding:18px 20px;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line);word-break:break-word}
.cmp-table th:last-child,.cmp-table td:last-child{border-right:none}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table thead th{
  font-family:var(--disp);font-weight:700;font-size:14px;color:var(--white);
  background:rgba(17,197,102,.06);letter-spacing:.02em;white-space:nowrap;
  position:sticky;top:0
}
.cmp-table tbody tr{transition:background .2s}
.cmp-table tbody tr:hover{background:transparent}
.cmp-table td{font-size:14px;color:var(--grey);line-height:1.7}
.cmp-list{margin:0;padding-left:17px;list-style:disc}
.cmp-list li{margin-bottom:6px}
.cmp-list li:last-child{margin-bottom:0}
.cmp-list li::marker{color:var(--grey);font-size:.8em}
.cmp-feat{margin:0;padding-left:18px;list-style:none}
.cmp-feat li{position:relative;margin-bottom:9px;line-height:1.6}
.cmp-feat li:last-child{margin-bottom:0}
.cmp-feat li::before{content:"";position:absolute;left:-14px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--grey)}
.cmp-prod{
  font-family:var(--disp);font-weight:700;font-size:14px;color:var(--white) !important;
  white-space:nowrap
}
.cmp-table tbody td:first-child{border-left:2px solid transparent}
.cmp-table tbody tr:hover td:first-child{border-left-color:var(--green)}
.pick-grid{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pick{
  display:flex;align-items:center;gap:18px;
  border:1px solid var(--line);border-radius:12px;padding:18px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);transition:.25s
}
.pick:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.pick-if{flex:1;font-size:13.5px;color:var(--grey);line-height:1.6}
.pick-arrow{color:var(--grey-2);flex-shrink:0}
.pick-arrow svg{width:18px;height:18px;display:block}
.pick-prod{
  font-family:var(--disp);font-weight:700;font-size:14px;color:var(--green);
  white-space:nowrap;flex-shrink:0
}
@media(max-width:760px){.pick-grid{grid-template-columns:1fr}}

/* ---------- PRODUCTS ---------- */
.product{
  border-top:1px solid var(--line);
  padding:52px 0;
  position:relative;
  scroll-margin-top:40px;
}
.product:last-of-type{border-bottom:1px solid var(--line)}
.p-id{position:relative;margin-bottom:32px;max-width:760px}
.p-index{font-family:var(--mono);font-size:13px;color:var(--green);letter-spacing:.15em;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.p-index::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.p-name{font-family:var(--disp);font-weight:700;font-size:32px;letter-spacing:-.01em;line-height:1.1;margin-bottom:14px;display:inline-block;margin-right:14px}
.p-form{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--green-dim);background:rgba(20,178,104,.06);border:1px solid rgba(20,178,104,.28);
  border-radius:6px;padding:5px 11px;vertical-align:middle;margin-bottom:14px
}
.p-desc{font-size:14.5px;color:var(--grey);line-height:1.8}
.p-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}
.dl-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  color:#000000;background:#32F08C;
  border:1px solid #32F08C;border-radius:10px;padding:12px 22px;
  text-decoration:none;cursor:pointer;transition:.25s;
  box-shadow:0 0 0 rgba(50,240,140,0)
}
.dl-btn svg{width:17px;height:17px}
.dl-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(50,240,140,.28)}
.doc-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  color:var(--white);background:transparent;
  border:1px solid var(--line-strong);border-radius:10px;padding:12px 22px;
  text-decoration:none;cursor:pointer;transition:.25s
}
.doc-btn svg{width:17px;height:17px}
.doc-btn:hover{transform:translateY(-2px);border-color:var(--green);color:var(--green)}
.dl-btn .caret{width:15px;height:15px;margin-left:-2px;transition:transform .3s}
.dl-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.cli-install{margin-top:20px;display:flex;flex-direction:column;gap:16px;animation:cliFade .3s ease}
.cli-install[hidden]{display:none}
@keyframes cliFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cmd-os{font-family:var(--mono);font-size:12px;color:var(--white);letter-spacing:.04em;margin-bottom:8px}
.cmd-box{
  display:flex;align-items:center;gap:14px;
  background:#ffffff;border:1px solid var(--line);border-radius:10px;
  padding:14px 16px
}
.cmd-box code{
  flex:1;min-width:0;font-family:var(--mono);font-size:13px;color:var(--white);
  line-height:1.6;white-space:pre-wrap;word-break:break-all
}
.copy-btn{
  flex-shrink:0;width:34px;height:34px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--grey);
  display:flex;align-items:center;justify-content:center;transition:.2s
}
.copy-btn svg{width:16px;height:16px}
.copy-btn:hover{border-color:var(--green);color:var(--green)}
.copy-btn.copied{border-color:var(--green);color:var(--green)}
.p-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.feat{
  position:relative;padding:26px 24px;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.004));
  transition:.3s;overflow:hidden;
}
.feat::before{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(140px 90px at 30px 26px,rgba(17,197,102,.12),transparent 70%);
  opacity:0;transition:opacity .35s
}
.feat:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.feat:hover::before{opacity:1}
.feat .head{display:flex;align-items:center;gap:11px;margin-bottom:14px;position:relative;z-index:1}
.feat .ico{
  width:22px;height:34px;
  display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;
  transition:.3s
}
.feat .ico svg{width:22px;height:22px;color:var(--green)}
.feat h4{font-size:16px;font-weight:700;color:var(--white);letter-spacing:.01em;margin:0}
.feat p{font-size:13.5px;color:var(--grey);line-height:1.74;position:relative;z-index:1;margin:0}
.feat p,.feat h4{font-family:var(--body)}
@media(max-width:520px){
  .p-feats{grid-template-columns:1fr}
}

/* ---------- PRODUCT TABS ---------- */
.tabs{
  display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;
  border-bottom:1px solid var(--line);margin-top:40px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex-shrink:0;font-family:var(--disp);font-weight:700;font-size:15px;
  color:var(--grey);background:transparent;border:none;cursor:pointer;
  padding:15px 22px;position:relative;transition:color .25s;white-space:nowrap;letter-spacing:-.01em
}
.tab:hover{color:var(--white)}
.tab.active{color:var(--white)}
.tab::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;
  background:var(--green);border-radius:2px;box-shadow:0 0 10px rgba(17,197,102,.5);
  transform:scaleX(0);transform-origin:center;transition:transform .3s
}
.tab.active::after{transform:scaleX(1)}
.product.tab-panel{display:none;border-top:none;padding-top:44px}
.product.tab-panel:last-of-type{border-bottom:none}
.product.tab-panel.active{display:block;animation:tabFade .35s ease}
@keyframes tabFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.tab{font-size:14px;padding:14px 16px}}

/* ---------- USE CASES (PATH) ---------- */
.uc-path{position:relative;padding-left:56px}
.uc-path::before{content:"";position:absolute;left:15px;top:12px;bottom:-18px;width:1px;background:linear-gradient(to bottom,var(--line),var(--line) calc(100% - 40px),transparent)}
.uc-step{position:relative;padding-bottom:48px}
.uc-step:last-child{padding-bottom:0}
.uc-num{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:var(--ink);border:2px solid var(--green);color:var(--green);
  display:flex;align-items:center;justify-content:center;z-index:1;
  box-shadow:0 0 0 5px var(--ink)
}
.uc-num svg{width:17px;height:17px}
.uc-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;margin-left:-56px}
.uc-head h3{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.01em;line-height:1.2}
.uc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-left:-8px}
.uc-cards.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.uc-cards.cols-3{grid-template-columns:1fr}}
.uc-item{
  border:1px solid var(--line);border-radius:12px;padding:12px 20px;
  background:linear-gradient(180deg,rgba(0,0,0,.015),transparent);transition:.25s;
  display:flex;flex-direction:column;justify-content:center;
  text-decoration:none;color:inherit;position:relative
}
.uc-item:hover{background:radial-gradient(120% 120% at 50% 0%,rgba(17,197,102,.16),rgba(17,197,102,.02) 70%,transparent)}
.uc-item[href]{padding-right:40px}
.uc-item[href]::after{
  content:"";position:absolute;right:18px;top:50%;width:16px;height:16px;
  transform:translateY(-50%) translateX(-4px);opacity:0;transition:opacity .25s,transform .25s;
  background:currentColor;color:var(--grey-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat
}
.uc-item[href]:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.uc-q{font-size:14px;font-weight:400;color:var(--grey);line-height:1.5;-webkit-text-stroke:.35px currentColor}
.uc-rec{font-family:var(--mono);font-size:12px;color:var(--green);margin-bottom:8px;letter-spacing:.02em;display:flex;gap:8px;flex-wrap:wrap}
.uc-rec span{color:var(--grey)}
.uc-why{font-size:13px;color:var(--grey);line-height:1.7}
@media(max-width:760px){
  .uc-path{padding-left:42px}
  .uc-path::before{left:13px}
  .uc-head{margin-left:-42px;gap:11px}
  .uc-num{width:28px;height:28px}
  .uc-num svg{width:15px;height:15px}
  .uc-cards{margin-left:-3px}
}

/* ---------- FOOTER ---------- */
footer{padding:40px 0 36px;margin-top:16px}
.foot-in{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
.foot-big{font-family:var(--disp);font-weight:700;font-size:clamp(34px,6vw,70px);letter-spacing:-.02em;line-height:1}
.foot-big .g{color:var(--green)}
.foot-tag{font-family:var(--mono);font-size:12.5px;color:var(--grey-2);letter-spacing:.04em;text-align:right;line-height:1.9}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
</style>
</head>
<body>

<header>
  <div class="wrap">
    <p class="hero-lead">
      无论你是第一次尝试 AI 编程的个人用户，还是为团队选择 AI 编程工具的管理者，都能在 TRAE 找到适合自己的产品。
    </p>
  </div>
</header>

<!-- ========== PRODUCT MATRIX ========== -->
<section id="matrix">
  <div class="wrap">
    <div class="sec-head reveal">
      <div class="sec-rule"></div>
      <h2 class="sec-title">TRAE 的产品矩阵</h2>
      <p class="sec-desc matrix-desc">
        覆盖 IDE、编辑器插件、AI 工作台和 CLI 形态；企业版进一步提供团队管理、安全治理等能力。
      </p>
    </div>

    <div class="cmp-wrap reveal" id="compare">
      <div class="cmp-scroll">
        <table class="cmp-table">
          <colgroup>
            <col class="c-prod"><col class="c-intro"><col class="c-feat"><col class="c-user">
          </colgroup>
          <thead>
            <tr><th>产品</th><th>介绍</th><th>主要特点</th><th>适用人群</th></tr>
          </thead>
          <tbody>
            <tr>
              <td class="cmp-prod">TRAE IDE</td>
              <td>面向开发者的 AI 原生集成开发环境，覆盖写、读、调试、审查到变更管理全流程。</td>
              <td><ul class="cmp-feat"><li>保留编辑器、终端、调试、Git 等传统工作流</li><li>内置可规划并执行任务的 AI 智能体</li><li>在本地精细把控开发流程的每一步</li></ul></td>
              <td>开发工程师，及需长期维护代码库的研发团队。</td>
            </tr>
            <tr>
              <td class="cmp-prod">TRAE Work</td>
              <td>面向更广泛人群的 AI 原生工作台，提供网页 / 桌面 / 移动三端，支持 Work、Code、Design 三种模式。</td>
              <td><ul class="cmp-feat"><li>对话式工作台，用自然语言或语音下发任务</li><li>三端实时同步任务进度</li><li>手机可向云端或多台电脑下发任务</li></ul></td>
              <td>产品经理、产品运营、数据分析师、设计人员、开发工程师等希望用 AI 自动完成复杂任务的人。</td>
            </tr>
            <tr>
              <td class="cmp-prod">TRAE 插件</td>
              <td>嵌入 VS Code、JetBrains、Android Studio 这些主流 IDE 的 AI 编程助手。</td>
              <td><ul class="cmp-feat"><li>不另起独立 IDE，将 AI 编程能力接入你熟悉的环境</li><li>零迁移成本，即装即用</li></ul></td>
              <td>已习惯使用某个 IDE、不想切换开发环境的开发者。</td>
            </tr>
            <tr>
              <td class="cmp-prod">TRAE CLI</td>
              <td>运行在终端的 Code Agent，用自然语言完成代码修改、测试、调试和 Git 操作。</td>
              <td><ul class="cmp-feat"><li>天生可脚本化、可编排</li><li>以非交互模式嵌入 CI/CD 流水线</li><li>通过 MCP 集成第三方工具</li></ul></td>
              <td>习惯在终端工作、希望用命令行自动化完成研发任务的开发者。</td>
            </tr>
            <tr>
              <td class="cmp-prod">TRAE 企业版</td>
              <td>面向企业和团队的专属版本，覆盖 TRAE IDE、TRAE Work、TRAE 插件 和 TRAE CLI 四款产品。</td>
              <td><ul class="cmp-feat"><li>为 TRAE 的产品增加企业级安全和统一管理能力</li><li>成员与席位、用量、安全设置、AI 资产管理</li><li>通过 OpenAPI 对接内部系统</li></ul></td>
              <td>需要统一管理 AI Coding 使用的企业或团队。</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- PRODUCT TABS -->
    <div class="tabs" role="tablist">
      <button type="button" class="tab active" data-tab="ide">TRAE IDE</button>
      <button type="button" class="tab" data-tab="work">TRAE Work</button>
      <button type="button" class="tab" data-tab="plugin">TRAE 插件</button>
      <button type="button" class="tab" data-tab="cli">TRAE CLI</button>
      <button type="button" class="tab" data-tab="enterprise">TRAE 企业版</button>
    </div>

    <!-- IDE -->
    <div class="product tab-panel active reveal" id="ide">
      <div class="p-id">
        <div class="p-name">TRAE IDE</div>
        <p class="p-desc">深度融合 AI 能力的集成开发环境，提供从代码编写、项目理解、调试运行到变更管理的完整体验，适合需要完整开发环境的工程师。</p>
      </div>
      <div class="p-feats">
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="6" width="22" height="12" rx="6"/><circle cx="8" cy="12" r="3"/></svg></div><h4>两种模式</h4></div>
          <p>用 IDE 模式精细掌控每一步；用 SOLO 模式让 AI 主导任务的规划与执行。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/><line x1="14" y1="4" x2="10" y2="20"/></svg></div><h4>AI 编程能力</h4></div>
          <p>提供智能体、自定义模型、代码补全，上下文引用等 AI 编程核心能力。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z"/></svg></div><h4>开发工具链</h4></div>
          <p>支持代码编辑、调试运行、Git 管理、智能代码审查、插件扩展等能力。</p>
        </div>
      </div>
      <div class="p-cta">
        <a class="dl-btn" href="https://www.trae.cn/ide/download?utm_source=content&utm_medium=doc_center&utm_campaign=onepage#solo-download" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>下载 TRAE IDE</a>
        <a class="doc-btn" href="https://docs.trae.cn/ide_what-is-trae" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>查看文档</a>
      </div>
    </div>

    <!-- Work -->
    <div class="product tab-panel reveal" id="work">
      <div class="p-id">
        <div class="p-name">TRAE Work</div>
        <p class="p-desc">覆盖办公、开发与设计三大场景，面向广泛的用户群体，无论你是开发者、产品经理、设计师、数据分析师还是市场运营，都能用 TRAE Work 处理需求。</p>
      </div>
      <div class="p-feats">
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="14" height="11" rx="1.5"/><line x1="6" y1="18" x2="12" y2="18"/><line x1="9" y1="14" x2="9" y2="18"/><rect x="17" y="9" width="5" height="12" rx="1.5"/><line x1="19" y1="18.5" x2="20" y2="18.5"/></svg></div><h4>三种形态</h4></div>
          <p>网页版适合快速访问；桌面版适合长期开发与复杂项目；移动版可随时下发任务、查看进度和结果。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="8.5" width="20" height="7" rx="3.5"/><circle cx="7" cy="12" r="2.4" fill="currentColor" stroke="none"/><line x1="12.5" y1="12" x2="12.5" y2="12"/><line x1="17" y1="12" x2="17" y2="12"/></svg></div><h4>三种模式</h4></div>
          <p>Work 模式用于处理文档、数据和演示稿；Code 模式用于编码、调试和 Git 工作流；Design 模式用于生成页面原型与高保真设计。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19a4.5 4.5 0 1 0 0-9 5.5 5.5 0 0 0-10.6-1.5A4 4 0 0 0 6 18.5"/><path d="M12 13v8"/><path d="m8 17 4-4 4 4"/></svg></div><h4>云端智能体</h4></div>
          <p>在隔离的云端环境中运行任务，减少本地环境差异带来的兼容性等问题。</p>
        </div>
      </div>
      <div class="p-cta">
        <a class="dl-btn" href="https://www.trae.cn/ide/download?utm_source=content&utm_medium=doc_center&utm_campaign=onepage#solo-download" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>下载 TRAE Work 桌面版</a>
        <a class="dl-btn" href="https://work.trae.cn/?utm_source=content&utm_medium=doc_center&utm_campaign=onepage" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>体验 TRAE Work 网页版</a>
        <a class="doc-btn" href="https://docs.trae.cn/solo_what-is-trae-solo" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>查看文档</a>
      </div>
    </div>

    <!-- 插件 -->
    <div class="product tab-panel reveal" id="plugin">
      <div class="p-id">
        <div class="p-name">TRAE 插件</div>
        <p class="p-desc">把以智能代码补全为代表的 AI 编程能力，无缝融入你已经熟悉的 IDE。不更换工作环境，也能获得 AI 辅助，适合已习惯使用某个固定 IDE 的开发者。</p>
      </div>
      <div class="p-feats">
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div><h4>广泛 IDE 与语言支持</h4></div>
          <p>覆盖 VS Code、JetBrains 系列、Android Studio，以及前端、后端、移动端等常见语言。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></div><h4>即装即用</h4></div>
          <p>在已使用习惯的 IDE 中，装上 TRAE 插件，就能为你熟悉的开发环境接入 AI 编程能力。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5Z"/></svg></div><h4>可扩展性</h4></div>
          <p>集智能体、代码补全、MCP、自定义规则等能力于一体，让 TRAE 插件灵活适配你的使用场景。</p>
        </div>
      </div>
      <div class="p-cta">
        <a class="dl-btn" href="https://www.trae.cn/plugin" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h3.5a1.5 1.5 0 0 0 1.5-1.5V5a2 2 0 1 1 4 0v.5A1.5 1.5 0 0 0 14.5 7H18a1 1 0 0 1 1 1v3.5a1.5 1.5 0 0 0 1.5 1.5h.5a2 2 0 1 1 0 4h-.5a1.5 1.5 0 0 0-1.5 1.5V20a1 1 0 0 1-1 1h-3.5a1.5 1.5 0 0 1-1.5-1.5V19a2 2 0 1 0-4 0v.5A1.5 1.5 0 0 1 7.5 21H4a1 1 0 0 1-1-1v-3.5A1.5 1.5 0 0 0 1.5 15H1a2 2 0 1 1 0-4h.5A1.5 1.5 0 0 0 3 9.5V8a1 1 0 0 1 1-1z"/></svg>获取 TRAE 插件</a>
        <a class="doc-btn" href="https://docs.trae.cn/plugin_what-is-trae-plugin" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>查看文档</a>
      </div>
    </div>

    <!-- CLI -->
    <div class="product tab-panel reveal" id="cli">
      <div class="p-id">
        <div class="p-name">TRAE CLI</div>
        <p class="p-desc">运行在终端和研发工作流中的 Code Agent。在终端输入自然语言指令，让它完成代码编写、测试调试和 Git 操作等复杂任务，适合偏好在终端工作或希望自动化开发的工程师。</p>
      </div>
      <div class="p-feats">
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/></svg></div><h4>自动化</h4></div>
          <p>编写与修改代码，理解业务逻辑，运行测试并修复失败用例，自动处理 Git 工作流。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M7 6h6a4 4 0 0 1 4 4v0"/><path d="M17 8v-2"/><path d="M12 10v6"/></svg></div><h4>CI/CD 集成</h4></div>
          <p>支持非交互模式，可嵌入自动化脚本或持续集成流水线中。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z"/></svg></div><h4>可拓展性</h4></div>
          <p>通过 MCP 集成第三方工具与服务，也支持配置自定义智能体、命令等。</p>
        </div>
      </div>
      <div class="p-cta">
        <button type="button" class="dl-btn" id="cliInstallBtn" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>安装 TRAE CLI<svg class="caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
        <a class="doc-btn" href="https://docs.trae.cn/cli_what-is-trae-cli" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>查看文档</a>
      </div>
      <div class="cli-install" id="cliInstall" hidden>
        <div class="cmd-row">
          <div class="cmd-os">macOS &amp; Linux</div>
          <div class="cmd-box">
            <code>sh -c "$(curl -L https://trae.cn/trae-cli/install.sh)" &amp;&amp; export PATH=~/.local/bin:$PATH</code>
            <button type="button" class="copy-btn" aria-label="复制命令"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
          </div>
        </div>
        <div class="cmd-row">
          <div class="cmd-os">Windows (PowerShell)</div>
          <div class="cmd-box">
            <code>irm https://trae.cn/trae-cli/install.ps1 | iex</code>
            <button type="button" class="copy-btn" aria-label="复制命令"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
          </div>
        </div>
      </div>
    </div>

    <!-- 企业版 -->
    <div class="product tab-panel reveal" id="enterprise">
      <div class="p-id">
        <div class="p-name">TRAE 企业版</div>
        <p class="p-desc">面向企业和团队的专属版本，既能让成员在各自习惯的 TRAE 客户端中使用 AI 编程能力，也能让管理员统一管理席位、用量、数据与安全策略等。适合需要统一治理 AI Coding 使用的企业和团队。</p>
      </div>
      <div class="p-feats">
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div><h4>企业管理</h4></div>
          <p>管理员可以管理人员与席位，设置用量限额，并通过数据面板洞察团队的 AI 使用情况。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg></div><h4>企业配置</h4></div>
          <p>支持企业知识库、企业智能体、企业内置模型，提供专属域名、网络代理等数十种企业安全能力。</p>
        </div>
        <div class="feat">
          <div class="head"><div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/><line x1="13" y1="4" x2="11" y2="20"/></svg></div><h4>开放平台</h4></div>
          <p>通过 OpenAPI 接入内部系统，用于成员管理、数据同步和审计追踪。</p>
        </div>
      </div>
      <div class="p-cta">
        <a class="dl-btn" href="https://www.volcengine.com/product/trae" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/><line x1="9" y1="9" x2="9" y2="9.01"/><line x1="9" y1="12" x2="9" y2="12.01"/><line x1="9" y1="15" x2="9" y2="15.01"/></svg>获取 TRAE 企业版</a>
        <a class="doc-btn" href="https://docs.trae.cn/enterprise_trae-enterprise-edition-overview" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>查看文档</a>
      </div>
    </div>

  </div>
</section>

<!-- ========== SCENARIOS ========== -->
<section id="scenarios">
  <div class="wrap">
    <div class="sec-head reveal">
      <div class="sec-rule"></div>
      <h2 class="sec-title">TRAE 的典型使用场景</h2>
      <p class="sec-desc scenarios-desc">
        不同的 AI 编程需求，使用最合适的 TRAE 产品或功能来处理。
      </p>
    </div>

    <div class="uc-path">

      <div class="uc-step reveal">
        <div class="uc-head"><div class="uc-num"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg></div><h3>让 AI 深度参与编码</h3></div>
        <div class="uc-cards cols-3">
          <a class="uc-item" href="https://docs.trae.cn/ide_solo-mode" target="_blank" rel="noopener">
            <div class="uc-q">SOLO 模式</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/work_use-the-design-mode" target="_blank" rel="noopener">
            <div class="uc-q">Design 模式</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_built-in-agent" target="_blank" rel="noopener">
            <div class="uc-q">内置智能体：Agent</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_cue" target="_blank" rel="noopener">
            <div class="uc-q">超级代码补全（CUE）</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_agent-powered-code-review" target="_blank" rel="noopener">
            <div class="uc-q">智能代码审查</div>
          </a>
        </div>
      </div>

      <div class="uc-step reveal">
        <div class="uc-head"><div class="uc-num"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/></svg></div><h3>让 AI 读懂你的工程</h3></div>
        <div class="uc-cards cols-3">
          <a class="uc-item" href="https://docs.trae.cn/ide_codebase-indexing" target="_blank" rel="noopener">
            <div class="uc-q">工作区代码索引</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_number-sign" target="_blank" rel="noopener">
            <div class="uc-q"># 引用上下文</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_rules" target="_blank" rel="noopener">
            <div class="uc-q">规则（Rules）</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_memories" target="_blank" rel="noopener">
            <div class="uc-q">记忆（Memories）</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/enterprise_enterprise-doc-set" target="_blank" rel="noopener">
            <div class="uc-q">企业知识库</div>
          </a>
        </div>
      </div>

      <div class="uc-step reveal">
        <div class="uc-head"><div class="uc-num"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="9" cy="6" r="2.4" fill="var(--ink)"/><circle cx="15" cy="12" r="2.4" fill="var(--ink)"/><circle cx="8" cy="18" r="2.4" fill="var(--ink)"/></svg></div><h3>按需扩展 AI 的能力</h3></div>
        <div class="uc-cards cols-3">
          <a class="uc-item" href="https://docs.trae.cn/ide_agent" target="_blank" rel="noopener">
            <div class="uc-q">自定义智能体</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_models" target="_blank" rel="noopener">
            <div class="uc-q">自定义模型</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_skills" target="_blank" rel="noopener">
            <div class="uc-q">技能（Skills）</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_model-context-protocol" target="_blank" rel="noopener">
            <div class="uc-q">模型上下文协议（MCP）</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_automate-actions-with-hooks" target="_blank" rel="noopener">
            <div class="uc-q">钩子（Hook）</div>
          </a>
        </div>
      </div>

      <div class="uc-step reveal">
        <div class="uc-head"><div class="uc-num"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="14" height="10" rx="1.5"/><line x1="6" y1="18" x2="12" y2="18"/><line x1="9" y1="14" x2="9" y2="18"/><rect x="17" y="8" width="5" height="13" rx="1.5"/><line x1="19.5" y1="18" x2="19.5" y2="18"/></svg></div><h3>让任务随处运行</h3></div>
        <div class="uc-cards cols-3">
          <a class="uc-item" href="https://docs.trae.cn/work_get-started-with-trae-solo-mobile" target="_blank" rel="noopener">
            <div class="uc-q">TRAE Work 移动版</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/work_what-is-trae-solo#13203686" target="_blank" rel="noopener">
            <div class="uc-q">云端智能体</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/work_set-up-the-remote-environment" target="_blank" rel="noopener">
            <div class="uc-q">云端运行环境</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/work_automated-tasks" target="_blank" rel="noopener">
            <div class="uc-q">自动化任务</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/cli_what-is-trae-cli" target="_blank" rel="noopener">
            <div class="uc-q">TRAE CLI</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/ide_ssh-remote" target="_blank" rel="noopener">
            <div class="uc-q">SSH / WSL 远程开发</div>
          </a>
        </div>
      </div>

      <div class="uc-step reveal">
        <div class="uc-head"><div class="uc-num"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div><h3>统一治理团队与企业</h3></div>
        <div class="uc-cards cols-3">
          <a class="uc-item" href="https://docs.trae.cn/enterprise_manage-members-for-trae-enterprise" target="_blank" rel="noopener">
            <div class="uc-q">人员与席位管理</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/enterprise_sso-login" target="_blank" rel="noopener">
            <div class="uc-q">单点登录（SSO）</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/enterprise_set-usage-limits" target="_blank" rel="noopener">
            <div class="uc-q">用量管理</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/enterprise_access-control-for-trae-enterprise-exclusive-edition" target="_blank" rel="noopener">
            <div class="uc-q">安全设置</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/enterprise_data-analysis-for-trae-enterprise" target="_blank" rel="noopener">
            <div class="uc-q">数据分析</div>
          </a>
          <a class="uc-item" href="https://docs.trae.cn/enterprise_trae-cn-enterprise-api" target="_blank" rel="noopener">
            <div class="uc-q">OpenAPI</div>
          </a>
        </div>
      </div>

    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="foot-in">
    </div>
  </div>
</footer>

<script>
const io=new IntersectionObserver((es)=>{
  es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})
},{threshold:.12});
document.querySelectorAll('.reveal').forEach((el,i)=>{el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});

const cliBtn=document.getElementById('cliInstallBtn');
const cliPanel=document.getElementById('cliInstall');
if(cliBtn&&cliPanel){
  cliBtn.addEventListener('click',()=>{
    const open=cliPanel.hasAttribute('hidden');
    if(open){cliPanel.removeAttribute('hidden')}else{cliPanel.setAttribute('hidden','')}
    cliBtn.setAttribute('aria-expanded',open?'true':'false');
  });
}
document.querySelectorAll('.copy-btn').forEach(btn=>{
  btn.addEventListener('click',async()=>{
    const code=btn.parentElement.querySelector('code');
    if(!code)return;
    try{await navigator.clipboard.writeText(code.textContent.trim());}
    catch(e){const r=document.createRange();r.selectNode(code);const s=getSelection();s.removeAllRanges();s.addRange(r);try{document.execCommand('copy')}catch(_){}s.removeAllRanges();}
    btn.classList.add('copied');
    setTimeout(()=>btn.classList.remove('copied'),1500);
  });
});

/* ---------- PRODUCT TABS ---------- */
const tabBtns=document.querySelectorAll('.tab');
const tabPanels=document.querySelectorAll('.product.tab-panel');
function activateTab(id){
  tabBtns.forEach(b=>b.classList.toggle('active',b.dataset.tab===id));
  tabPanels.forEach(p=>p.classList.toggle('active',p.id===id));
  const panel=document.getElementById(id);
  if(panel){panel.classList.add('in');panel.querySelectorAll('.reveal').forEach(el=>el.classList.add('in'));}
}
tabBtns.forEach(btn=>{
  btn.addEventListener('click',()=>activateTab(btn.dataset.tab));
});
// 顶部产品矩阵的锚点 chip 点击时，切换到对应 tab
document.querySelectorAll('.sec-meta a.chip').forEach(chip=>{
  chip.addEventListener('click',()=>{
    const id=chip.getAttribute('href').replace('#','');
    if([...tabPanels].some(p=>p.id===id))activateTab(id);
  });
});
// 支持通过 URL hash 直接定位到某个产品 tab
if(location.hash){
  const id=location.hash.replace('#','');
  if([...tabPanels].some(p=>p.id===id))activateTab(id);
}
</script>
</body>
</html>
````