smart-fin-chart/js/tools/dcf-calculator.html

<section class="dcf-calculator" aria-label="DCF 估值计算器">
  <header class="df-header">
    <div><div class="df-eyebrow">VALUATION WORKBENCH</div><h2>DCF 估值工作台</h2><p class="df-subtitle">从未来自由现金流，衡量今天的企业价值。</p></div>
    <div class="df-header-actions"><span class="df-header-mark">参数调整 · 即时试算</span><button class="df-help-trigger" type="button" data-help-open aria-label="打开估值概念说明" aria-haspopup="dialog" title="估值概念说明"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M9.5 9a2.5 2.5 0 0 1 5 .3c0 1.7-2.5 2-2.5 3.7"></path><circle cx="12" cy="16.5" r=".8" fill="currentColor" stroke="none"></circle></svg></button></div>
  </header>
  <div class="df-profile-bar">
    <div class="df-company-buttons" data-company-buttons role="group" aria-label="切换估值公司"></div>
    <button type="button" data-new-company>＋ 新增公司</button>
    <span class="df-save-status" data-save-status role="status">每家公司的参数独立保存在本机浏览器</span>
  </div>
  <form class="df-new-company" data-company-form hidden>
    <label>公司名称<input data-company-name maxlength="60" placeholder="输入公司名称" required></label>
    <button type="submit">添加</button><button type="button" data-cancel-company>取消</button>
    <span class="df-company-error" data-company-error role="alert"></span>
  </form>
  <div class="df-company-empty" data-company-empty role="status" hidden>还没有估值公司，添加一家公司开始估值。</div>
  <section class="df-overview" aria-label="DCF 估值总览" aria-live="polite">
    <div class="df-stat df-stat-main"><h3>DCF 每股内在价值</h3><div class="df-stat-value" data-price>—</div><p class="df-muted">元／股 · <span data-basis-caption>FCFF 口径</span></p></div>
    <div class="df-stat"><h3>安全边际参考价</h3><div class="df-stat-value" data-buy>—</div><p class="df-muted" data-discount-note>按设定的安全边际折价</p></div>
    <div class="df-stat"><h3>当前股价</h3><div class="df-stat-value" data-market-current>—</div><p class="df-muted">元／股 · 手动输入</p></div>
    <div class="df-stat df-stat-position"><h3>现价相对内在价值</h3><div class="df-stat-value" data-deviation>—</div><p class="df-muted" data-price-position>填写当前股价后查看所处区间</p></div>
  </section>
  <section class="df-market" aria-label="当前股价与估值区间">
    <div class="df-market-head"><div><h3>现价在估值的什么位置？</h3><p class="df-muted">以当前 DCF 假设为基准的价格区间</p></div><span class="df-zone-badge" data-market-badge hidden></span></div>
    <div class="df-price-controls">
      <div class="df-price-fields"><label>当前股价（人民币）<input data-field="marketPrice" type="number" min="0" step="any" placeholder="手动输入当前股价"></label><label>股价日期（选填）<input data-field="quoteDate" type="date"></label></div>
      <div class="df-fields df-interval-fields" role="group" aria-label="估值区间阈值"><label>低估折价／安全边际（%）<input data-field="margin" type="number" min="0" max="99.99" step="any"></label><label>高估溢价阈值（%）<input data-field="premium" type="number" min="0" max="1000" step="any"></label></div>
    </div>
    <div class="df-price-chart" data-market-chart role="img" aria-label="当前股价与 DCF 估值区间" hidden></div>
    <div class="df-zone-keys" data-zone-keys hidden><div class="df-zone-key"><span><i class="df-zone-dot"></i>低估区间</span><strong data-zone-low>—</strong></div><div class="df-zone-key"><span><i class="df-zone-dot"></i>合理区间</span><strong data-zone-fair>—</strong></div><div class="df-zone-key"><span><i class="df-zone-dot"></i>高估区间</span><strong data-zone-high>—</strong></div></div>
    <p class="df-muted df-market-message" data-market-message>请补全现金流与股本后查看估值区间</p>
    <div class="df-error" data-market-error role="alert" hidden></div>
    <p class="df-muted df-interval-note">区间由当前 DCF 假设与折溢价阈值划分，不自动获取行情。</p>
  </section>
  <div class="df-layout">
    <section class="df-form" aria-label="DCF 参数">
      <div class="df-section-head"><h3>估值假设</h3><span class="df-muted" data-context>教学示例 · 人民币</span></div>
      <section class="df-parameter-group"><h4><span>01</span>基础参数</h4><div class="df-fields">
        <label>现金流口径<select data-field="basis"><option value="fcff">企业自由现金流 FCFF</option><option value="fcfe">股权自由现金流 FCFE</option></select></label>
        <label>基期自由现金流（亿元）<input data-field="fcf" type="number" step="any"></label>
        <label>当前总股本（亿股，必填）<input data-field="shares" type="number" min="0" step="any" required placeholder="填写该公司总股本"></label>
        <label>股本数据日期（选填）<input data-field="shareDate" type="date"></label>
        <label>现金流基期年份<input data-field="year" type="number" min="1900" max="2200" step="1"></label>
        <label><span data-rate-label>折现率 WACC（%）</span><input data-field="rate" type="number" step="any"></label>
      </div><p class="df-muted" data-basis-note>先折现企业现金流，再调整为股权价值。</p></section>
      <section class="df-parameter-group"><div class="df-section-head"><h4><span>02</span>分段增长率</h4><button type="button" class="df-quiet-button" data-add>＋ 添加阶段</button></div><div class="df-stages" data-stages></div><p class="df-total df-muted" data-duration></p></section>
      <section class="df-parameter-group"><h4><span>03</span>永续经营与股权调整</h4><div class="df-fields">
        <label>永续增长率（%）<input data-field="terminal" type="number" step="any"></label>
        <label data-debt-field>净债务（亿元，可为负）<input data-field="debt" type="number" step="any"></label>
        <label data-assets-field>其他非经营资产净额（亿元）<input data-field="assets" type="number" step="any"></label>
        <label data-minority-field>少数股东权益（亿元）<input data-field="minority" type="number" step="any"></label>
      </div><p class="df-muted">所有金额使用人民币，股本在预测期内保持不变。净债务与非经营资产中的超额现金避免重复计入。</p></section>
    </section>
    <section class="df-results" aria-label="DCF 价值拆解">
      <div class="df-section-head"><h3>价值从哪里来？</h3><span class="df-muted">亿元</span></div>
      <div class="df-result-line"><span>预测期现金流现值</span><b data-pv>—</b></div><div class="df-result-line"><span>永续终值现值</span><b data-tv>—</b></div><div class="df-result-line df-sum"><span data-value-label>企业经营价值</span><b data-ev>—</b></div>
      <div data-adjustment><div class="df-result-line"><span>− 净债务</span><b data-debt-value>—</b></div><div class="df-result-line"><span>＋ 非经营资产净额</span><b data-assets-value>—</b></div><div class="df-result-line"><span>− 少数股东权益</span><b data-minority-value>—</b></div></div>
      <div class="df-result-line df-equity"><span>股权价值</span><b data-equity>—</b></div><p class="df-muted df-shares-note" data-shares-note>补全总股本后换算每股价值</p>
      <div class="df-value-per-share"><span>每股内在价值</span><strong><span data-value-per-share>—</span><small> 元／股</small></strong></div>
      <div class="df-composition" aria-hidden="true"><span class="df-segment-a" data-composition-forecast></span><span class="df-segment-b" data-composition-terminal></span></div><div class="df-legend"><span>预测期 <b data-forecast-share>—</b></span><span>永续终值 <b data-terminal-share>—</b></span></div><p class="df-terminal-note" data-terminal-note>补全有效参数后查看价值构成</p>
    </section>
  </div>
  <div class="df-error" role="alert" data-error hidden></div><div class="df-warning" data-warning hidden></div>
  <section class="df-cashflow-section" data-cashflow-section aria-label="逐年现金流与现值图表" hidden>
    <div class="df-section-head"><div><h3>逐年现金流与折现现值</h3><p class="df-muted" data-cashflow-caption></p></div><span class="df-muted">单位：亿元</span></div>
    <div class="df-cashflow-chart" data-cashflow-chart role="img" aria-label="逐年自由现金流与折现现值对比"></div><div class="df-error" data-cashflow-error role="alert" hidden></div>
    <p class="df-muted">浅棕为当年自由现金流，深棕为折算到基期的现值；仅展示显式预测期，不含永续终值。悬停或轻触柱形可查看阶段、增长率及折现因子。</p>
    <details class="df-table-section" data-detail><summary>逐年现金流与折现明细 <span class="df-muted" data-table-summary></span></summary><div class="df-table-wrap"><table aria-label="逐年现金流折现"><thead><tr><th>年份／阶段</th><th>增长率</th><th>自由现金流（亿元）</th><th>折现因子</th><th>现值（亿元）</th></tr></thead><tbody data-rows></tbody></table></div></details>
  </section>
  <footer class="df-foot"><span>人民币口径 · 年末现金流 · 永续增长法</span><span data-model-note></span></footer>
</section>