From 7acac5a34b22a42685a04249c64f40fa5d9b050d Mon Sep 17 00:00:00 2001 From: lannyfu Date: Thu, 18 Sep 2025 16:08:36 +0800 Subject: [PATCH] feat: Add features page and change top right video on home page Signed-off-by: lannyfu --- assets/scss/common.scss | 4 + assets/scss/content.scss | 1 + assets/scss/features.scss | 92 +++++++ assets/scss/index.scss | 79 +++++- content/en/_index.md | 4 + content/en/features/_index.md | 77 ++++++ content/zh/_index.md | 6 +- content/zh/features/_index.md | 77 ++++++ i18n/en.yaml | 6 +- i18n/zh.yaml | 6 +- layouts/_default/features.html | 31 +++ layouts/index.html | 103 +++++++- layouts/partials/header.html | 6 +- static/images/features/app-management.svg | 4 + static/images/features/banner.jpg | Bin 0 -> 304826 bytes static/images/features/cluster-management.svg | 4 + static/images/features/deepseek.svg | 3 + static/images/features/devops.svg | 19 ++ .../images/features/extension-management.svg | 4 + static/images/features/gatekeeper.svg | 9 + static/images/features/gateway.svg | 15 ++ static/images/features/grafana.svg | 9 + static/images/features/higress.svg | 9 + .../features/k8s-resource-management.svg | 11 + static/images/features/loki.svg | 9 + static/images/features/metrics-server.svg | 11 + .../features/multi-tenant-anagement.svg | 4 + static/images/features/nvidia.svg | 10 + static/images/features/ob-operator.svg | 9 + static/images/features/wiz-telemetry.svg | 18 ++ static/images/home/arch-cn.svg | 227 ++++++++++++++++++ static/images/home/banner-cn.png | Bin 248565 -> 309667 bytes static/images/home/top-right-1.jpg | Bin 0 -> 327661 bytes static/images/home/top-right-2.jpg | Bin 0 -> 235249 bytes static/images/home/top-right-3.jpg | Bin 0 -> 192978 bytes 35 files changed, 851 insertions(+), 16 deletions(-) create mode 100644 assets/scss/features.scss create mode 100644 content/en/features/_index.md create mode 100644 content/zh/features/_index.md create mode 100644 layouts/_default/features.html create mode 100644 static/images/features/app-management.svg create mode 100644 static/images/features/banner.jpg create mode 100644 static/images/features/cluster-management.svg create mode 100644 static/images/features/deepseek.svg create mode 100644 static/images/features/devops.svg create mode 100644 static/images/features/extension-management.svg create mode 100644 static/images/features/gatekeeper.svg create mode 100644 static/images/features/gateway.svg create mode 100644 static/images/features/grafana.svg create mode 100644 static/images/features/higress.svg create mode 100644 static/images/features/k8s-resource-management.svg create mode 100644 static/images/features/loki.svg create mode 100644 static/images/features/metrics-server.svg create mode 100644 static/images/features/multi-tenant-anagement.svg create mode 100644 static/images/features/nvidia.svg create mode 100644 static/images/features/ob-operator.svg create mode 100644 static/images/features/wiz-telemetry.svg create mode 100644 static/images/home/arch-cn.svg create mode 100644 static/images/home/top-right-1.jpg create mode 100644 static/images/home/top-right-2.jpg create mode 100644 static/images/home/top-right-3.jpg diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 9680c4624..f68748e0a 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -16,6 +16,10 @@ html { background-color: #f5f8f9; } +main{ + margin-top: 60px; +} + section { min-width: 1160px; diff --git a/assets/scss/content.scss b/assets/scss/content.scss index 604318b3a..5ae1709c6 100644 --- a/assets/scss/content.scss +++ b/assets/scss/content.scss @@ -6,6 +6,7 @@ } .main-section { + margin-top: 60px; &>div { position: relative; padding-top: 93px; diff --git a/assets/scss/features.scss b/assets/scss/features.scss new file mode 100644 index 000000000..5e1bb51df --- /dev/null +++ b/assets/scss/features.scss @@ -0,0 +1,92 @@ +@import "variables"; +@import "mixin"; + +html { + background-color: #ffffff; +} + +.section-1 { + position: relative; + padding-top: 166px; + background-image: url("/images/features/banner.jpg"); + + .title-div { + position: relative; + + padding-bottom: 74px; + h1 { + width: 100%; + text-align: center; + } + } +} +.section-2 { + background: #f5f8f9; + padding: 80px 0; + .title-div { + position: relative; + + h1 { + color: #171c34; + text-align: center; + text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1); + font-size: 32px; + font-weight: 520; + line-height: 52px; + } + } + ul { + margin-top: 40px; + display: flex; + flex-wrap: wrap; + gap: 20px; + li { + position: relative; + padding: 24px; + width: calc((100% - 60px) / 4); + background-color: #fff; + border-radius: 10px; + box-sizing: border-box; + min-height: 250px; + img { + display: block; + } + h3 { + margin-top: 16px; + color: #242e42; + font-size: 20px; + font-weight: 520; + line-height: 28px; + } + .conetnt { + margin-top: 8px; + color: #484e58; + font-size: 14px; + line-height: 24px; + } + .label { + position: absolute; + margin-top: 0; + top: 0; + right: 0; + border-radius: 0 8px 0 8px; + padding: 4px 10px; + font-size: 14px; + font-weight: 380; + line-height: 20px; + &.label-gray { + background-color: #e3e9ef; + color: #36435c; + } + &.label-green { + color: #3b747a; + background-color: #c4e6d4; + } + } + } + } +} + +.footer { + padding-top: 60px; +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 1474d1710..f89670cf1 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -176,6 +176,77 @@ } } } + + .custom-vertical-carousel { + position: absolute; + top: 208px; + right: 0; + width: 100%; + max-width: 531px; + height: 350px; + margin: 0 auto; + padding: 20px 0; + } + + .carousel-inner { + position: relative; + height: 100%; + } + + .carousel-slide { + width: 100%; + height: 319px; + background: #fff; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + position: absolute; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); + overflow: hidden; + } + + .carousel-slide .slide-content { + width: 100%; + height: 100%; + padding: 4px; + font-size: 24px; + font-weight: bold; + color: #333; + text-align: center; + img { + display: block; + width: calc(100% - 8px); + height: calc(100% - 8px); + } + } + + .carousel-slide.active { + transform: translateY(0) scale(1); + opacity: 1; + z-index: 10; + } + + .carousel-slide.prev { + transform: translateY(-20px) scale(0.95); + opacity: 0.5; + z-index: 9; + } + + .carousel-slide.next { + transform: translateY(20px) scale(0.95); + opacity: 0.5; + z-index: 8; + } + + .carousel-slide.hidden { + opacity: 0.3; + transform: translateY(50px) scale(0.9); + z-index: 1; + } } .section-2 { @@ -191,7 +262,7 @@ z-index: 2; .title-black-h2 { - margin-top: 80px; + margin-top: 107px; } & > div { @@ -288,10 +359,13 @@ white-space: nowrap; padding: 16px 48px; border-radius: 26px; + font-weight: 520; color: #31383e; &.active { background-color: #55bc8a; color: #fff; + box-shadow: 0 8px 16px 0 rgba(33, 43, 61, 0.2), + 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 4px 8px 0 rgba(36, 46, 66, 0.06); } } } @@ -310,7 +384,7 @@ & > div { position: relative; - margin-top: 76px; + margin-top: 104px; text-align: left; align-items: center; @@ -1016,6 +1090,7 @@ text-align: center; a { color: #31383e; + font-weight: 450; text-decoration: underline; &:hover { color: #55bc8a; diff --git a/content/en/_index.md b/content/en/_index.md index 469e95350..7a4aa73df 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -18,6 +18,10 @@ section1: # TODO: free feature list link: / class: apply-btn + carouselItems: + - image: /images/home/top-right-1.jpg + - image: /images/home/top-right-2.jpg + - image: /images/home/top-right-3.jpg tabs: children: diff --git a/content/en/features/_index.md b/content/en/features/_index.md new file mode 100644 index 000000000..9ad01a050 --- /dev/null +++ b/content/en/features/_index.md @@ -0,0 +1,77 @@ +--- +title: "社区版详细功能清单" + +layout: "features" + +css: "scss/features.scss" + +section1: + title: "社区版详细功能清单" + image: /images/features/banner.jpg + +section2: + title: "功能介绍" + children: + - icon: /images/features/cluster-management.svg + name: 集群管理 + content: 跨云、跨基础设施的多个 Kubernetes 集群的集中式可视化管理与运维 + - icon: /images/features/multi-tenant-anagement.svg + name: 多租户管理 + content: 跨集群、跨项目的资源逻辑隔离、网络隔离和细粒度的访问控制能力 + - icon: /images/features/app-management.svg + name: 应用管理 + content: 统一的应用生命周期管理能力,对 Helm、Oporator 等类型应用提供统一的抽象层 + - icon: /images/features/k8s-resource-management.svg + name: K8S资源管理 + content: 提供 Web 控制台对接 Kubernetes 原生 API 快速创建与管理 Kubernetes 资源 + - icon: /images/features/extension-management.svg + name: 扩展组件管理 + content: 采用微内核+扩展组件的架构,按需定制、扩展平台能力 + - icon: /images/features/wiz-telemetry.svg + name: WizTelemetry 可观测 + content: 对应用与基础设施性能及健康状态的全面洞察 + label: extension + - icon: /images/features/devops.svg + name: DevOps + content: 提供端到端的工作流,集成主流 CI/CD 工具 + label: extension + - icon: /images/features/gateway.svg + name: KubeSphere 网关 + content: 基于流量的统一入口管理、七层负载均衡与多种路由策略 + label: extension + - icon: /images/features/gatekeeper.svg + name: GateKeeper + content: 可灵活配置安全策略的准入控制器 + - icon: /images/features/metrics-server.svg + name: Metrics Server + content: 可扩展、高效的容器资源度量源,为 Kubernetes 内置的自动扩展管道提供服务 + label: opensource + - icon: /images/features/nvidia.svg + name: NVIDIA GPU Operator + content: 在 Kubernetes 上创建、配置和管理 GPU + label: opensource + - icon: /images/features/deepseek.svg + name: Deepseek + content: 基于 ollama 运行 deepseek-r1 模型,对外提供 API 服务 + label: opensource + - icon: /images/features/grafana.svg + name: Grafana + content: 开放且可组合的观测和数据可视化平台 + label: opensource + - icon: /images/features/loki.svg + name: Loki + content: 可扩展、高可用、多租户日志聚合系统 + label: opensource + - icon: /images/features/higress.svg + name: Higress + content: 基于 Istio 和 Envoy 的API 网关 + label: opensource + - icon: /images/features/ob-operator.svg + name: OB-Operator + content: 管理 Kubernetes 集群中的 OceanBase 相关资源 + label: opensource + - icon: /images/features/ob-operator.svg + name: Oceanbas Dashboard + content: OceanBase 交互式管理应用 + label: opensource +--- diff --git a/content/zh/_index.md b/content/zh/_index.md index 04d9db3db..49a8e7274 100644 --- a/content/zh/_index.md +++ b/content/zh/_index.md @@ -17,6 +17,10 @@ section1: # TODO: free feature list link: / class: apply-btn + carouselItems: + - image: /images/home/top-right-1.jpg + - image: /images/home/top-right-2.jpg + - image: /images/home/top-right-3.jpg tabs: children: @@ -188,7 +192,7 @@ section6: section7: title: 产品功能架构 - image: /images/home/arch-cn.png + image: /images/home/arch-cn.svg section8: title: KubeSphere 自诞生以来始终坚持开源初心
在全球云原生社区中持续贡献力量 diff --git a/content/zh/features/_index.md b/content/zh/features/_index.md new file mode 100644 index 000000000..9ad01a050 --- /dev/null +++ b/content/zh/features/_index.md @@ -0,0 +1,77 @@ +--- +title: "社区版详细功能清单" + +layout: "features" + +css: "scss/features.scss" + +section1: + title: "社区版详细功能清单" + image: /images/features/banner.jpg + +section2: + title: "功能介绍" + children: + - icon: /images/features/cluster-management.svg + name: 集群管理 + content: 跨云、跨基础设施的多个 Kubernetes 集群的集中式可视化管理与运维 + - icon: /images/features/multi-tenant-anagement.svg + name: 多租户管理 + content: 跨集群、跨项目的资源逻辑隔离、网络隔离和细粒度的访问控制能力 + - icon: /images/features/app-management.svg + name: 应用管理 + content: 统一的应用生命周期管理能力,对 Helm、Oporator 等类型应用提供统一的抽象层 + - icon: /images/features/k8s-resource-management.svg + name: K8S资源管理 + content: 提供 Web 控制台对接 Kubernetes 原生 API 快速创建与管理 Kubernetes 资源 + - icon: /images/features/extension-management.svg + name: 扩展组件管理 + content: 采用微内核+扩展组件的架构,按需定制、扩展平台能力 + - icon: /images/features/wiz-telemetry.svg + name: WizTelemetry 可观测 + content: 对应用与基础设施性能及健康状态的全面洞察 + label: extension + - icon: /images/features/devops.svg + name: DevOps + content: 提供端到端的工作流,集成主流 CI/CD 工具 + label: extension + - icon: /images/features/gateway.svg + name: KubeSphere 网关 + content: 基于流量的统一入口管理、七层负载均衡与多种路由策略 + label: extension + - icon: /images/features/gatekeeper.svg + name: GateKeeper + content: 可灵活配置安全策略的准入控制器 + - icon: /images/features/metrics-server.svg + name: Metrics Server + content: 可扩展、高效的容器资源度量源,为 Kubernetes 内置的自动扩展管道提供服务 + label: opensource + - icon: /images/features/nvidia.svg + name: NVIDIA GPU Operator + content: 在 Kubernetes 上创建、配置和管理 GPU + label: opensource + - icon: /images/features/deepseek.svg + name: Deepseek + content: 基于 ollama 运行 deepseek-r1 模型,对外提供 API 服务 + label: opensource + - icon: /images/features/grafana.svg + name: Grafana + content: 开放且可组合的观测和数据可视化平台 + label: opensource + - icon: /images/features/loki.svg + name: Loki + content: 可扩展、高可用、多租户日志聚合系统 + label: opensource + - icon: /images/features/higress.svg + name: Higress + content: 基于 Istio 和 Envoy 的API 网关 + label: opensource + - icon: /images/features/ob-operator.svg + name: OB-Operator + content: 管理 Kubernetes 集群中的 OceanBase 相关资源 + label: opensource + - icon: /images/features/ob-operator.svg + name: Oceanbas Dashboard + content: OceanBase 交互式管理应用 + label: opensource +--- diff --git a/i18n/en.yaml b/i18n/en.yaml index a0df1d548..bb2b1eefd 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -139,4 +139,8 @@ - id: Msg-Thank translation: Thanks for the feedback. If you have a specific question about how to use KubeSphere, ask it on Slack. Open an issue in the GitHub repo if you want to report a problem or suggest an improvement. - id: Visitor-count - translation: 'The number of views: ' \ No newline at end of file + translation: 'The number of views: ' +- id: Extension + translation: Extension +- id: Open Source Object + translation: Open Source Object \ No newline at end of file diff --git a/i18n/zh.yaml b/i18n/zh.yaml index 663f6de8d..eb72209d6 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -145,4 +145,8 @@ - id: Msg-Thank translation: 感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题,请在 Slack 上提问。如果您想报告问题或提出改进建议,请在 GitHub 存储库中打开问题。 - id: Visitor-count - translation: 本文总阅读量: \ No newline at end of file + translation: 本文总阅读量: +- id: Extension + translation: 扩展组件 +- id: Open Source Object + translation: 开源项目 diff --git a/layouts/_default/features.html b/layouts/_default/features.html new file mode 100644 index 000000000..ffe169a75 --- /dev/null +++ b/layouts/_default/features.html @@ -0,0 +1,31 @@ +{{ define "main" }} +{{ with .Params.section1}} +
+
+

{{ .title }}

+
+
+{{ end }} +{{ with .Params.section2}} +
+
+

{{ .title }}

+
    + {{range .children}} +
  • + {{ .name }} +

    {{ .name | safeHTML }}

    +

    {{ .content | safeHTML }}

    + {{if eq .label "extension"}} +

    {{ i18n "Extension" }}

    + {{else if eq .label "opensource"}} +

    {{ i18n "Open Source Object" }}

    + {{end}} + +
  • + {{end}} +
+ {{ end }} +
+
+{{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 18bedcad2..a658dca95 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -6,21 +6,33 @@ {{ with .Params.section1 }}
-

{{ .title | safeHTML }}

-

{{ .topic | safeHTML }}

+

{{ .title | safeHTML }}

+

{{ .topic | safeHTML }}

+

{{ .content | safeHTML }}

- {{range .btns}} +
-
- {{ i18n - play + + + {{ i18n {{ i18n
@@ -473,6 +485,83 @@ }); + $(document).ready(function () { + var $carousel = $('.custom-vertical-carousel'); + var $slides = $carousel.find('.carousel-slide'); + var currentIndex = 0; + var totalSlides = $slides.length; + var autoPlayInterval; + + function updateSlides() { + $slides.removeClass('active prev next hidden'); + + $slides.eq(currentIndex).addClass('active'); + + var prevIndex = (currentIndex - 1 + totalSlides) % totalSlides; + $slides.eq(prevIndex).addClass('prev'); + + + var nextIndex = (currentIndex + 1) % totalSlides; + $slides.eq(nextIndex).addClass('next'); + + $slides.not('.active, .prev, .next').addClass('hidden'); + } + + function nextSlide() { + currentIndex = (currentIndex + 1) % totalSlides; + updateSlides(); + } + + function prevSlide() { + currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; + updateSlides(); + } + + // auto play + function startAutoPlay() { + stopAutoPlay(); + autoPlayInterval = setInterval(nextSlide, 3000); + } + + function stopAutoPlay() { + if (autoPlayInterval) { + clearInterval(autoPlayInterval); + autoPlayInterval = null; + } + } + + // go to slide + function goToSlide(index) { + if (index >= 0 && index < totalSlides) { + currentIndex = index; + updateSlides(); + } + } + + // init + updateSlides(); + startAutoPlay(); + + // hover + $carousel.hover( + function () { stopAutoPlay(); }, + function () { startAutoPlay(); } + ); + + // keyboard control + $(document).on('keydown', function (e) { + if (e.key === 'ArrowDown') { + nextSlide(); + stopAutoPlay(); + startAutoPlay(); + } else if (e.key === 'ArrowUp') { + prevSlide(); + stopAutoPlay(); + startAutoPlay(); + } + }); + + }); controlVideo() bindMouseLeftLi() diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 1971689ba..a92c33256 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -2,15 +2,13 @@