eiacloud-mcp-ui/src/pages/mcp/serve.vue

<template>
  <div class="serve-page">
    <section class="registry-head">
      <div class="wrap">
        <div class="registry-inner">
          <div class="registry-text">
            <div class="hero-badge">
              <span class="hero-badge-dot"></span>
              企业级 MCP 智能服务中枢
            </div>
            <h1>MCP<span class="brand-blue">服务中心</span></h1>
            <div class="sub-title">一个页面汇总环评云助手全部 MCP 智能服务</div>
            <p class="lead">
              以矩阵形式呈现每项服务的能力、端点与调用指标，统一 Token 即可接入主流大模型。参考标准 MCP 服务目录规范整理，随平台服务更新维护。
            </p>
            <div class="cta-row">
              <button type="button" class="btn-cta" @click="claimGift">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>
                领取MCP体验礼包
              </button>
              <button type="button" class="btn-ghost" @click="scrollToMatrix">
                浏览全部服务
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg>
              </button>
            </div>
            <div class="hero-meta">
              <span class="hm-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="#EAF2FF"></circle><path d="m8.5 12.2 2.4 2.4 4.8-5" stroke="#1678FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                官方端点 <b>mcp.eiacloud.com</b>
              </span>
              <span class="hm-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="#EAF2FF"></circle><path d="m8.5 12.2 2.4 2.4 4.8-5" stroke="#1678FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                标准 MCP 协议接入
              </span>
              <span class="hm-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="#EAF2FF"></circle><path d="m8.5 12.2 2.4 2.4 4.8-5" stroke="#1678FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                统一 Token 计费
              </span>
            </div>
          </div>

          <div class="hero-visual" aria-hidden="true">
            <div class="hv-card">
              <div class="hv-head">
                <div class="hv-title">
                  <span class="hv-sm">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="6" r="3"></circle><circle cx="18" cy="18" r="3"></circle><path d="M8.7 10.7 15.3 7.3"></path><path d="m8.7 13.3 6.6 3.4"></path></svg>
                  </span>
                  MCP 服务中枢
                </div>
                <span class="hv-live"><span class="hv-ping"></span>实时连接</span>
              </div>
              <div class="hv-flow">
                <div class="hv-node">
                  <span class="hv-ico app">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="2.5"></rect><rect x="10" y="10" width="4" height="4" rx="1"></rect><path d="M9 2.5v3M15 2.5v3M9 18.5v3M15 18.5v3M2.5 9h3M2.5 15h3M18.5 9h3M18.5 15h3"></path></svg>
                  </span>
                  <span class="hv-nt"><span class="hv-n1">AI 应用 / Agent</span><span class="hv-n2">智能体即插即用</span></span>
                </div>
                <div class="hv-line"></div>
                <div class="hv-node">
                  <span class="hv-ico hub">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 10 5.5L12 13 2 7.5z"></path><path d="m2 12.5 10 5.5 10-5.5"></path><path d="m2 17.5 10 5.5 10-5.5"></path></svg>
                  </span>
                  <span class="hv-nt"><span class="hv-n1">环评云助手 MCP</span><span class="hv-n2">统一接入服务目录</span></span>
                </div>
              </div>
              <div class="hv-grid">
                <div class="hv-tile" style="color:#059669;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
                  <span class="tx">法规检索</span>
                </div>
                <div class="hv-tile" style="color:#3B82F6;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path><path d="M11 8v6"></path><path d="M8 11h6"></path></svg>
                  <span class="tx">语义检索</span>
                </div>
                <div class="hv-tile" style="color:#7C3AED;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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 8z"></path></svg>
                  <span class="tx">政策问答</span>
                </div>
                <div class="hv-tile" style="color:#E8890C;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg>
                  <span class="tx">排放限值</span>
                </div>
                <div class="hv-tile" style="color:#EF4444;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><path d="M14 2v6h6"></path><path d="M16 13H8"></path><path d="M16 17H8"></path><path d="M10 9H8"></path></svg>
                  <span class="tx">报告检索</span>
                </div>
                <div class="hv-tile" style="color:#6366F1;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 10 5.5L12 13 2 7.5z"></path><path d="m2 12.5 10 5.5 10-5.5"></path><path d="m2 17.5 10 5.5 10-5.5"></path></svg>
                  <span class="tx">标准汇编</span>
                </div>
              </div>
            </div>
            <div class="hv-chip">https://mcp.eiacloud.com</div>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="matrix">
      <div class="wrap">
        <div class="service-grid">
          <article v-for="item in serviceList" :key="item.id" class="svc-card">
            <div class="svc-top">
              <div class="svc-icon" :style="{ background: item.iconBg, boxShadow: item.iconShadow }">
                <svg v-if="item.icon === 'book'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
                <svg v-else-if="item.icon === 'file'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" 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><path d="M14 2v6h6"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>
                <svg v-else-if="item.icon === 'chat'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" 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 8z"></path></svg>
                <svg v-else-if="item.icon === 'chart'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"></path><path d="M7 14v4"></path><path d="M12 9v9"></path><path d="M17 5v13"></path></svg>
                <svg v-else-if="item.icon === 'report'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" 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><path d="M14 2v6h6"></path></svg>
                <svg v-else viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 10 5.5L12 13 2 7.5z"></path><path d="m2 12.5 10 5.5 10-5.5"></path><path d="m2 17.5 10 5.5 10-5.5"></path></svg>
              </div>
              <div class="svc-badges">
                <span v-if="item.free" class="price-tag free">免费</span>
                <span v-else class="price-tag token">{{ item.rate }}x token</span>
                <span v-if="item.limitFree" class="limit-free-tag">限免</span>
              </div>
            </div>
            <h3>{{ item.name }}</h3>
            <div class="svc-url-row">
              <input :value="item.endpoint" type="text" class="svc-url-input" readonly />
              <button
                type="button"
                class="btn-copy"
                :class="{ copied: copiedId === item.id }"
                @click="copyUrl(item)"
              >
                {{ copiedId === item.id ? "已复制" : "复制" }}
              </button>
            </div>
            <div class="svc-tools">
              <b>包含工具</b>
              <span
                v-for="(tool, index) in item.tools"
                :key="tool.code"
                class="tool-tag"
                :class="{ active: selectedTool[item.id] === index }"
                @click="selectedTool[item.id] = index"
              >{{ tool.label }}</span>
            </div>
            <span class="tool-name-box">{{ currentToolCode(item) }}</span>
            <div class="svc-tags">
              <span v-for="param in item.params" :key="param" class="tag mono">{{ param }}</span>
            </div>
            <p class="svc-desc">{{ item.desc }}</p>
            <div class="svc-actions">
              <button type="button" class="btn-sm primary">模拟调用</button>
              <button type="button" class="btn-sm ghost">查看详情</button>
            </div>
          </article>
        </div>
      </div>
    </section>

    <footer class="site-footer">
      <div class="wrap">
        <div class="footer-main">
          <div class="footer-brand">
            <div class="fb-title">
              <span class="fb-logo">云</span>
              环评云助手 · MCP服务中心
            </div>
            <p class="fb-desc">一个页面汇总环评云助手全部 MCP 智能服务，以矩阵形式呈现每项服务的能力、端点与调用指标，统一 Token 即可接入主流大模型。面向环评领域 AI 应用与智能体，即插即用、随平台服务更新维护。</p>
            <span class="fb-endpoint">官方端点 mcp.eiacloud.com</span>
          </div>
          <div class="footer-col">
            <h4>本页快捷跳转</h4>
            <ul>
              <li><button type="button" @click="scrollToMatrix"><span class="footer-link-ico">▦</span>浏览全部服务</button></li>
              <li><button type="button" @click="claimGift"><span class="footer-link-ico">◆</span>领取MCP体验礼包</button></li>
              <li><button type="button" @click="scrollToTop"><span class="footer-link-ico">↑</span>回到顶部</button></li>
            </ul>
          </div>
          <div class="footer-col">
            <h4>快捷产品入口</h4>
            <ul>
              <li><a href="https://mcp.eiacloud.com" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">➤</span>MCP服务中心</a></li>
              <li><a href="https://www.eiacloud.com" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">➤</span>环评云助手官网</a></li>
              <li><a href="https://www.eiacloud.com/bbs" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">➤</span>环评论坛</a></li>
              <li><a href="https://www.eiacloud.com/bbs/download" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">➤</span>手机/电脑端下载</a></li>
            </ul>
          </div>
          <div class="footer-col">
            <h4>服务信息</h4>
            <ul>
              <li><button type="button" @click="scrollToMatrix"><span class="footer-link-ico">◎</span>标准 MCP 协议接入</button></li>
              <li><a href="https://org.eiacloud.com/#/home/control?openVip=1" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">◎</span>会员开通与云点</a></li>
              <li><span class="footer-link-ico">✉</span>联系客服获取接入支持</li>
            </ul>
          </div>
        </div>
        <div class="footer-bottom">
          <span>环评云助手 MCP服务中心</span>
          <div class="fb-right">
            <button type="button" @click="scrollToTop">回到顶部</button>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

const serviceList = [
  {
    id: 1,
    name: "法规关键词检索",
    icon: "book",
    iconBg: "linear-gradient(135deg,#059669,#10b981)",
    iconShadow: "0 6px 16px rgba(5,150,105,.25)",
    endpoint: "https://mcp.eiacloud.com/law-keyword",
    rate: "0.002",
    tools: [{ label: "关键词检索", code: "law_keyword_search" }],
    params: ["keyword", "law_type", "limit"],
    desc: "基于生态环境政策法规库的关键词精确检索，适合已知法规名称、文号、发布机关的定向查询。",
  },
  {
    id: 2,
    name: "法规导则 · 语义检索",
    icon: "file",
    iconBg: "linear-gradient(135deg,#3b82f6,#60a5fa)",
    iconShadow: "0 6px 16px rgba(59,130,246,.25)",
    endpoint: "https://mcp.eiacloud.com/law-semantic",
    rate: "0.002",
    limitFree: true,
    tools: [{ label: "语义检索", code: "law_semantic_search" }],
    params: ["query", "top_k", "scope"],
    desc: "自然语言智能检索，无需精准关键词；输入业务场景即可跨法规召回条款，适配模糊提问与实务流程查询。",
  },
  {
    id: 3,
    name: "环境问答检索",
    icon: "chat",
    iconBg: "linear-gradient(135deg,#7c3aed,#a78bfa)",
    iconShadow: "0 8px 24px rgba(124,58,237,.25)",
    endpoint: "https://mcp.eiacloud.com/qa",
    rate: "0.001",
    tools: [
      { label: "关键词问答检索", code: "qa_keyword_search" },
      { label: "语义检索", code: "qa_semantic_search" },
    ],
    params: ["question", "limit", "query", "top_k"],
    desc: "全国环保政策问答知识库语义检索，汇聚生态环境官方答复、部长信箱口径，解答判定、流程、时限、豁免类实操疑问。",
  },
  {
    id: 4,
    name: "排放限值查询",
    icon: "chart",
    iconBg: "linear-gradient(135deg,#f59e0b,#fb923c)",
    iconShadow: "0 6px 16px rgba(245,158,11,.25)",
    endpoint: "https://mcp.eiacloud.com/emission",
    rate: "0.004",
    tools: [
      { label: "大气污染物限值查询", code: "air_emission_limit" },
      { label: "水污染物限值查询", code: "water_emission_limit" },
    ],
    params: ["pollutant", "standard_no", "province"],
    desc: "大气、水排放标准结构化数值库，按污染物 / 标准号查询浓度、速率、无组织限值，支撑环评与排污许可达标核算。",
  },
  {
    id: 5,
    name: "公示环评报告检索",
    icon: "report",
    iconBg: "linear-gradient(135deg,#ef4444,#f87171)",
    iconShadow: "0 6px 16px rgba(239,68,68,.25)",
    endpoint: "接入端点待平台公布，以 mcp.eiacloud.com 为准",
    rate: "0.004",
    tools: [
      { label: "关键字搜索", code: "eia_report_keyword" },
      { label: "语义检索", code: "eia_report_semantic" },
    ],
    params: ["keyword", "region", "limit", "query", "top_k"],
    desc: "检索全国建设项目环境信息公示平台上的环评报告（报告书、报告表、登记表等公示文本），支持关键字搜索与语义检索两种方式，快速定位项目环评公示文件。",
  },
  {
    id: 6,
    name: "《排污许可证申请与核发技术规范》汇编检索",
    icon: "stack",
    iconBg: "linear-gradient(135deg,#6366f1,#818cf8)",
    iconShadow: "0 6px 16px rgba(99,102,241,.25)",
    endpoint: "接入端点待平台公布，以 mcp.eiacloud.com 为准",
    free: true,
    tools: [
      { label: "关键字搜索", code: "permit_std_keyword" },
      { label: "语义检索", code: "permit_std_semantic" },
    ],
    params: ["keyword", "industry", "limit", "query", "top_k"],
    desc: "《排污许可证申请与核发技术规范》汇编检索服务，覆盖总则（HJ 942-2018）及分行业技术规范，支持关键字搜索与语义检索，服务免费开放。",
  },
];

const selectedTool = reactive({});
serviceList.forEach((item) => {
  selectedTool[item.id] = 0;
});

const copiedId = ref(null);
let copiedTimer = null;

const currentToolCode = (item) => {
  const index = selectedTool[item.id] || 0;
  return item.tools[index]?.code || "";
};

const copyUrl = async (item) => {
  const text = item.endpoint || "";
  if (!text) {
    ElMessage.warning("暂无内容可复制");
    return;
  }
  try {
    if (navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(text);
    } else {
      const textarea = document.createElement("textarea");
      textarea.value = text;
      textarea.setAttribute("readonly", "");
      textarea.style.position = "fixed";
      textarea.style.left = "-9999px";
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
    }
    copiedId.value = item.id;
    clearTimeout(copiedTimer);
    copiedTimer = setTimeout(() => {
      copiedId.value = null;
    }, 1500);
  } catch (error) {
    console.error(error);
    ElMessage.error("复制失败");
  }
};

const scrollToMatrix = () => {
  document.getElementById("matrix")?.scrollIntoView({ behavior: "smooth", block: "start" });
};

const scrollToTop = () => {
  const shell = document.querySelector(".page-shell");
  if (shell) {
    shell.scrollTo({ top: 0, behavior: "smooth" });
    return;
  }
  window.scrollTo({ top: 0, behavior: "smooth" });
};

const claimGift = () => {
  ElMessage.info("体验礼包功能待接入");
};
</script>

<style scoped lang="less">
.serve-page {
  --bg: #F6F9FD;
  --surface: #FFFFFF;
  --surface-2: #F7FAFE;
  --ink: #1B2533;
  --ink-2: #3E5063;
  --muted: #72859A;
  --line: #E4ECF6;
  --line-strong: #C9D8EA;
  --brand: #1678ff;
  --brand-ink: #0b63e0;
  --brand-deep: #0a4fd0;
  --brand-soft: #EAF2FF;
  --brand-soft-2: #F0F6FF;
  --ok: #17a14b;
  --ok-soft: #E7F6EC;
  --radius: 16px;
  --shadow-card: 0 1px 2px rgba(22, 51, 84, 0.05), 0 10px 28px -18px rgba(22, 51, 84, 0.18);
  --shadow-lift: 0 2px 6px rgba(22, 51, 84, 0.06), 0 20px 44px -22px rgba(22, 51, 84, 0.26);
  --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  box-sizing: border-box;
  min-height: calc(100vh - 64px);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  font-size: 15px;
}

.serve-page *,
.serve-page *::before,
.serve-page *::after {
  box-sizing: border-box;
}

.serve-page button {
  appearance: none;
  font-family: inherit;
  outline: none;
}

.serve-page button:focus,
.serve-page button:focus-visible {
  outline: none;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.registry-head {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 82px 0 90px;
  background:
    radial-gradient(720px 400px at 84% -18%, rgba(22, 120, 255, 0.16), transparent 62%),
    radial-gradient(560px 380px at -6% 116%, rgba(77, 154, 255, 0.13), transparent 60%),
    linear-gradient(118deg, #EDF5FF 0%, #F8FBFF 46%, #E9F2FF 100%);
  border-bottom: 1px solid var(--line);
}

.registry-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(22, 120, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 120, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(900px 480px at 66% 42%, #000 0%, transparent 78%);
  mask-image: radial-gradient(900px 480px at 66% 42%, #000 0%, transparent 78%);
}

.registry-head::after {
  content: "";
  position: absolute;
  right: -200px;
  top: -230px;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px dashed rgba(22, 120, 255, 0.20);
  box-shadow: 0 0 0 44px rgba(22, 120, 255, 0.035), 0 0 0 106px rgba(22, 120, 255, 0.02);
}

.registry-head .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

.registry-inner {
  display: flex;
  align-items: center;
  gap: 56px;
}

.registry-text {
  flex: 1;
  min-width: 0;
  max-width: 656px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(22, 120, 255, 0.25);
  color: #1678FF;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 10px 26px -14px rgba(22, 120, 255, 0.5);
  margin-bottom: 28px;
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5FA8FF, #1678FF);
  box-shadow: 0 0 0 3.5px rgba(22, 120, 255, 0.15);
}

.registry-head h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 5.2vw, 58px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  color: #0B1F3F;
}

.brand-blue {
  background: linear-gradient(100deg, #3B96FF, #1678FF 55%, #0A5FE0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub-title {
  margin-top: 16px;
  font-weight: 600;
  font-size: clamp(16px, 1.9vw, 19px);
  color: #2E4A6B;
}

.lead {
  margin: 22px 0 0;
  max-width: 600px;
  color: #5F7490;
  font-size: 14.5px;
  line-height: 2;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.btn-cta,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.btn-cta {
  padding: 13px 28px;
  font-size: 14.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #2E8CFF, #1678FF 60%, #0B63E0);
  color: #fff;
  border: none;
  box-shadow: 0 12px 26px -10px rgba(22, 120, 255, 0.65);
}

.btn-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  border-color: transparent;
  box-shadow: 0 16px 34px -12px rgba(22, 120, 255, 0.78);
}

.btn-ghost {
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.8);
  color: #33506F;
  border: 1px solid rgba(154, 182, 214, 0.9);
}

.btn-ghost:hover {
  border-color: #1678FF;
  color: #1678FF;
  background: #fff;
  transform: translateY(-1px);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hm-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #57708C;
  font-weight: 500;
}

.hm-item b {
  color: #1678FF;
  font-weight: 700;
}

.hero-visual {
  flex: none;
  width: 420px;
  position: relative;
}

.hv-card {
  position: relative;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(22, 120, 255, 0.16);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 30px 64px -26px rgba(22, 80, 160, 0.38);
  animation: hvFloat 7s ease-in-out infinite;
}

@keyframes hvFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.hv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 13px;
  border-bottom: 1px dashed rgba(22, 120, 255, 0.2);
}

.hv-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #22395C;
}

.hv-sm {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(135deg, #EAF2FF, #DCE9FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1678FF;
}

.hv-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #17a14b;
}

.hv-ping {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #17a14b;
  animation: hvPing 2s ease-out infinite;
}

@keyframes hvPing {
  0% { box-shadow: 0 0 0 0 rgba(23, 161, 75, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(23, 161, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 161, 75, 0); }
}

.hv-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 2px 14px;
}

.hv-node {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #E3ECF7;
}

.hv-ico {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hv-ico.app {
  background: linear-gradient(135deg, #EDF4FF, #DCE9FF);
  color: #1678FF;
}

.hv-ico.hub {
  background: linear-gradient(135deg, #1678FF, #0A5FE0);
  color: #fff;
}

.hv-n1,
.hv-n2 {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv-n1 {
  font-size: 12px;
  font-weight: 700;
  color: #22354F;
}

.hv-n2 {
  font-size: 10.5px;
  color: #8CA0B8;
}

.hv-line {
  flex: none;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(22, 120, 255, 0.8) 0 5px, transparent 5px 10px);
  animation: hvDash 1.1s linear infinite;
}

@keyframes hvDash {
  to { background-position: 10px 0; }
}

.hv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hv-tile {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 11px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #E6EEF8;
}

.hv-tile svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.hv-tile .tx {
  font-size: 11px;
  font-weight: 600;
  color: #3A5575;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv-chip {
  position: absolute;
  right: -10px;
  bottom: -13px;
  padding: 7px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0B63E0, #1678FF);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  box-shadow: 0 12px 24px -10px rgba(22, 120, 255, 0.6);
}

.section {
  padding: 30px 0 72px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand);
}

.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
}

.svc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.svc-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-icon svg {
  width: 24px;
  height: 24px;
}

.svc-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-tag,
.limit-free-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.price-tag.token {
  color: var(--brand-ink);
  background: var(--brand-soft);
}

.price-tag.free {
  color: #A05A00;
  background: #FFF4E3;
}

.limit-free-tag {
  color: #C62828;
  background: #FFEBEC;
}

.svc-card h3 {
  margin: 18px 0 0;
  font-weight: 700;
  font-size: 19px;
}

.svc-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.svc-url-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
  border-radius: 6px;
  outline: none;
}

.btn-copy {
  flex: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.btn-copy:hover {
  border-color: var(--brand);
}

.btn-copy.copied {
  background: var(--ok-soft);
  color: var(--ok);
}

.svc-tools {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.svc-tools b {
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 600;
  padding-top: 2px;
}

.tool-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
}

.tool-tag:hover {
  border-color: var(--brand);
}

.tool-tag.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 12px -6px rgba(22, 120, 255, 0.5);
}

.tool-name-box {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-ink);
  background: var(--brand-soft-2);
  border: 1px dashed var(--line-strong);
  padding: 4px 12px;
  border-radius: 6px;
}

.tool-name-box::before {
  content: "工具名称";
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-right: 8px;
}

.svc-tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  background: var(--surface-2);
}

.svc-desc {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
  flex: 1;
}

.svc-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
}

.btn-sm {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
}

.btn-sm.primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(22, 120, 255, 0.6);
}

.btn-sm.primary:hover {
  filter: brightness(1.06);
  border-color: transparent;
}

.btn-sm.ghost {
  background: var(--surface);
  color: var(--brand-ink);
  border-color: var(--line-strong);
}

.btn-sm.ghost:hover {
  border-color: var(--brand);
}

.site-footer {
  padding: 44px 0 0;
  background: #fff;
  border-top: 1px solid var(--line);
}

.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 0 0 34px;
}

.footer-brand {
  flex: 1.2;
  min-width: 260px;
  max-width: 380px;
}

.fb-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-ink);
}

.fb-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #2E8CFF, #1678FF);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.fb-desc {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
}

.fb-endpoint {
  margin-top: 14px;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--brand-ink);
  background: var(--brand-soft-2);
  border: 1px solid var(--line-strong);
  padding: 5px 11px;
  border-radius: 8px;
}

.footer-col {
  min-width: 150px;
}

.footer-col h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  position: relative;
  padding-left: 11px;
}

.footer-col h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--brand);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a,
.footer-col button,
.footer-bottom button {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: #43556b;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
}

.footer-col a:hover,
.footer-col button:hover,
.footer-bottom button:hover {
  color: var(--brand);
  border-color: transparent;
}

.footer-link-ico {
  margin-right: 6px;
  color: #93A5BB;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #93A5BB;
}

@media (max-width: 1160px) {
  .hero-visual {
    display: none;
  }

  .registry-text {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .footer-main {
    flex-direction: column;
    gap: 26px;
  }
}

@media (max-width: 520px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}
</style>