feat(portal): 首页补齐产品功能、核心能力、界面预览、官方文档四个区块

用户反馈首页缺产品功能、核心能力与界面预览，且没有官方文档入口。新增区块 - 产品功能：三条产品线（iotLCM / 秀杰 DTU / XiuAdmin），每条列 6 项能力，卡片底部直达详情页 - 核心能力：8 张带标签的卡片，讲工程层面的硬指标（部署、接入、开放、治理、韧性、交付、数据、维护），与"产品功能"区分开：前者是做什么，后者是凭什么能用住 - 界面预览：ScreenshotPreview 组件，Web 管理端 / 小程序端两组标签切换，首屏大图 + 缩略图条，带浏览器窗口装饰 - 官方文档：6 个入口卡片（文档中心、Web 手册、小程序手册、部署手册、 OpenAPI 合同、门户部署说明），外链自动加 target=_blank 界面预览的占位机制 - previewShots 里 file 留空时渲染带图注的占位框，不报错、不影响构建 - 补图只改 file 字段，组件无需改动 - 新增 pages/public/screenshots/README.md 写清命名、尺寸、脱敏要求导航 - 增加产品功能、核心能力、界面预览、官方文档四个锚点项 - 窄屏（≤860px）隐藏中间三个锚点项，避免挤压验证 - 构建 13 页，208 条引用 0 失效 - 浏览器实测：7 个导航项、5 个 section 锚点齐全 - 移动端 390px 无横向溢出 - 文档站 5 个外链地址均实测 200 可达
2026-11-04 14:27:48 +08:00
parent ac1354da9e
commit ccb3f5e39a
8 changed files with 766 additions and 6 deletions
@@ -741,3 +741,181 @@ html.dark .p-tab.is-active {
 .vp-doc a:hover {
  text-decoration-color: var(--p-accent);
 }
+
+/* ============================================================
+   产品功能卡片
+   ============================================================ */
+.pf-card {
+  position: relative;
+}
+
+.pf-name {
+  font-size: 17px;
+}
+
+.pf-tagline {
+  margin: 8px 0 0;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--p-accent);
+}
+
+.pf-list {
+  margin: 20px 0 0;
+  padding: 0;
+  list-style: none;
+  flex: 1;
+}
+
+.pf-list li {
+  position: relative;
+  padding: 9px 0 9px 22px;
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--p-ink-2);
+  border-top: 1px solid var(--p-line);
+}
+
+.pf-list li:first-child {
+  border-top: none;
+}
+
+.pf-list li::before {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 17px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--p-accent);
+  opacity: 0.55;
+}
+
+.pf-more {
+  display: inline-block;
+  margin-top: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--p-accent);
+  text-decoration: none !important;
+}
+
+.pf-more:hover {
+  text-decoration: underline !important;
+  text-underline-offset: 3px;
+}
+
+/* ============================================================
+   核心能力卡片
+   ============================================================ */
+.ca-card {
+  position: relative;
+  padding: 26px 24px;
+}
+
+.ca-tag {
+  display: inline-block;
+  align-self: flex-start;
+  width: auto;
+  margin-bottom: 14px;
+  padding: 2px 9px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--p-accent);
+  background: var(--p-accent-soft);
+  border-radius: 5px;
+}
+
+.ca-card .p-card-title {
+  font-size: 15.5px;
+}
+
+.ca-card .p-card-text {
+  font-size: 13.5px;
+  line-height: 1.7;
+}
+
+/* ============================================================
+   官方文档
+   ============================================================ */
+.doc-grid {
+  margin-bottom: 8px;
+}
+
+.doc-card {
+  text-decoration: none !important;
+  color: var(--p-ink) !important;
+}
+
+.doc-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.doc-top .p-card-title {
+  font-size: 15.5px;
+}
+
+.doc-arrow {
+  flex: none;
+  margin-top: 3px;
+  color: var(--p-ink-3);
+  transition: color 0.18s, transform 0.18s;
+}
+
+.doc-card:hover .doc-arrow {
+  color: var(--p-accent);
+  transform: translate(1px, -1px);
+}
+
+.doc-card .p-card-text {
+  flex: 1;
+  font-size: 13.5px;
+  line-height: 1.7;
+}
+
+.doc-project {
+  display: inline-block;
+  align-self: flex-start;
+  margin-top: 18px;
+  padding: 2px 9px;
+  font-size: 11.5px;
+  color: var(--p-ink-3);
+  background: var(--p-surface-alt);
+  border: 1px solid var(--p-line);
+  border-radius: 5px;
+}
+
+html.dark .doc-project {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.doc-note {
+  margin: 28px 0 0;
+  text-align: center;
+  font-size: 13px;
+  color: var(--p-ink-3);
+}
+
+.doc-note a {
+  color: var(--p-accent);
+  text-decoration: none;
+}
+
+.doc-note a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* ============================================================
+   导航：锚点项在窄屏隐藏，避免挤压
+   ============================================================ */
+@media (max-width: 860px) {
+  .VPNavBarMenuGroup:nth-child(n + 5):nth-child(-n + 7) {
+    display: none;
+  }
+}