From bd20546b6df91e0591d9c27f3cffd96fb4df2889 Mon Sep 17 00:00:00 2001
From: chenkailing <632104866@qq.com>
Date: Sat, 11 Apr 2026 00:29:49 +0800
Subject: [PATCH 1/2] feat: redesign demo pages v1

---
 server/pom.xml                                |    8 +-
 server/src/main/bin/dev.sh                    |   16 +
 .../main/resources/static/css/main-pages.css  | 1110 +++++++++++++++++
 server/src/main/resources/web/main/index.ftl  |  664 ++++------
 .../main/resources/web/main/integrated.ftl    |  312 +++--
 server/src/main/resources/web/main/record.ftl |  757 ++++-------
 .../src/main/resources/web/main/sponsor.ftl   |  142 ++-
 7 files changed, 1976 insertions(+), 1033 deletions(-)
 create mode 100755 server/src/main/bin/dev.sh
 create mode 100644 server/src/main/resources/static/css/main-pages.css

diff --git a/server/pom.xml b/server/pom.xml
index 6331fefb..b815f309 100644
--- a/server/pom.xml
+++ b/server/pom.xml
@@ -52,6 +52,12 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-actuator</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-devtools</artifactId>
+            <scope>runtime</scope>
+            <optional>true</optional>
+        </dependency>
 
         <!-- ========== 文档格式转换 ========== -->
         <dependency>
@@ -366,4 +372,4 @@
             </plugin>
         </plugins>
     </build>
-</project>
\ No newline at end of file
+</project>
diff --git a/server/src/main/bin/dev.sh b/server/src/main/bin/dev.sh
new file mode 100755
index 00000000..c1ede02e
--- /dev/null
+++ b/server/src/main/bin/dev.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+set -e
+
+ROOT_DIR=$(cd "$(dirname "$0")/../../../.." || exit 1; pwd)
+SERVER_DIR="$ROOT_DIR/server"
+
+if [ -n "$JAVA_HOME" ]; then
+  export PATH="$JAVA_HOME/bin:$PATH"
+fi
+
+cd "$SERVER_DIR" || exit 1
+
+mvn spring-boot:run \
+  -Dspring-boot.run.addResources=true \
+  -Dspring-boot.run.jvmArguments="-Dfile.encoding=UTF-8 -Dspring.config.location=$SERVER_DIR/src/main/config/application.properties"
diff --git a/server/src/main/resources/static/css/main-pages.css b/server/src/main/resources/static/css/main-pages.css
new file mode 100644
index 00000000..2fdfbdb2
--- /dev/null
+++ b/server/src/main/resources/static/css/main-pages.css
@@ -0,0 +1,1110 @@
+:root {
+    --bg: #f3efe6;
+    --surface: rgba(255, 250, 242, 0.9);
+    --surface-strong: #fffdfa;
+    --surface-dark: #111315;
+    --surface-muted: #e6dfd4;
+    --line: rgba(17, 19, 21, 0.12);
+    --text: #12161b;
+    --text-muted: #5e656d;
+    --brand: #1e63e9;
+    --brand-soft: rgba(30, 99, 233, 0.1);
+    --accent: #c2f062;
+    --accent-soft: rgba(194, 240, 98, 0.18);
+    --warn: #c96b3b;
+    --shadow: 0 18px 48px rgba(17, 19, 21, 0.08);
+    --radius-xl: 30px;
+    --radius-lg: 22px;
+    --radius-md: 16px;
+    --content-width: min(1180px, calc(100% - 48px));
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body.app-shell {
+    padding-top: 0;
+    padding-bottom: 0;
+    color: var(--text);
+    background:
+        radial-gradient(circle at top left, rgba(194, 240, 98, 0.22), transparent 28%),
+        radial-gradient(circle at top right, rgba(30, 99, 233, 0.16), transparent 24%),
+        linear-gradient(180deg, #fbf8f3 0%, #f0ebe2 100%);
+    font-family: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
+
+body.app-shell::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-image:
+        linear-gradient(rgba(17, 19, 21, 0.025) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(17, 19, 21, 0.025) 1px, transparent 1px);
+    background-size: 32px 32px;
+    pointer-events: none;
+    opacity: 0.45;
+    z-index: -1;
+}
+
+h1,
+h2,
+h3,
+h4,
+.navbar-brand,
+.hero-title,
+.feature-card h3,
+.section-heading h2,
+.doc-card h3,
+.release-card h3,
+.archive-item h3 {
+    font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
+}
+
+a {
+    color: var(--brand);
+}
+
+a:hover,
+a:focus {
+    color: #144ab0;
+    text-decoration: none;
+}
+
+.site-nav {
+    background: rgba(17, 19, 21, 0.84) !important;
+    border: 0 !important;
+    backdrop-filter: blur(18px);
+    box-shadow: 0 8px 24px rgba(17, 19, 21, 0.12);
+}
+
+.site-nav .container,
+.page-shell > .container {
+    width: var(--content-width);
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.site-nav .navbar-brand {
+    color: #f7f4ef !important;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+}
+
+.site-nav .navbar-nav > li > a {
+    color: rgba(247, 244, 239, 0.72) !important;
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.site-nav .navbar-nav > li > a:hover,
+.site-nav .navbar-nav > .active > a,
+.site-nav .navbar-nav > .active > a:hover,
+.site-nav .navbar-nav > .active > a:focus {
+    color: #f7f4ef !important;
+    background: transparent !important;
+}
+
+.site-nav .navbar-nav > .active > a {
+    position: relative;
+}
+
+.site-nav .navbar-nav > .active > a::after {
+    content: "";
+    position: absolute;
+    left: 15px;
+    right: 15px;
+    bottom: 9px;
+    height: 3px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, var(--accent), #d6ffa9);
+}
+
+.page-shell {
+    padding: 118px 0 64px;
+}
+
+.section-heading {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 18px;
+    margin-bottom: 24px;
+}
+
+.section-heading h2 {
+    margin: 0;
+    font-size: 34px;
+    line-height: 1.05;
+}
+
+.section-heading p {
+    margin: 0;
+    max-width: 640px;
+    color: var(--text-muted);
+    font-size: 16px;
+    line-height: 1.7;
+}
+
+.eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 14px;
+    border-radius: 999px;
+    background: rgba(17, 19, 21, 0.06);
+    color: var(--text);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+.eyebrow::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent), #8cb43f);
+    box-shadow: 0 0 0 6px rgba(194, 240, 98, 0.18);
+}
+
+.hero-section {
+    margin-bottom: 34px;
+}
+
+.hero-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
+    gap: 24px;
+    align-items: stretch;
+}
+
+.hero-grid.single {
+    grid-template-columns: 1fr;
+}
+
+.hero-copy,
+.hero-card,
+.workspace-card,
+.doc-card,
+.release-card,
+.archive-item,
+.summary-panel {
+    position: relative;
+    overflow: hidden;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-xl);
+    background: linear-gradient(180deg, rgba(255, 253, 250, 0.96), rgba(248, 243, 236, 0.92));
+    box-shadow: var(--shadow);
+}
+
+.hero-copy {
+    padding: 42px;
+}
+
+.hero-copy::after,
+.hero-card::after,
+.workspace-card::after,
+.doc-card::after,
+.release-card::after,
+.archive-item::after,
+.summary-panel::after {
+    content: "";
+    position: absolute;
+    inset: auto -15% -55% auto;
+    width: 240px;
+    height: 240px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(194, 240, 98, 0.18), transparent 68%);
+    pointer-events: none;
+}
+
+.hero-title {
+    margin: 20px 0 16px;
+    font-size: clamp(26px, 2.8vw, 40px);
+    line-height: 1.08;
+    letter-spacing: -0.045em;
+}
+
+.hero-subtitle {
+    margin: 0 0 22px;
+    max-width: 620px;
+    color: var(--text-muted);
+    font-size: 18px;
+    line-height: 1.8;
+}
+
+.hero-stats,
+.hero-actions,
+.feature-grid,
+.summary-grid,
+.archive-grid {
+    display: grid;
+    gap: 14px;
+}
+
+.hero-stats {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    margin: 28px 0;
+}
+
+.stat-chip {
+    padding: 18px 18px 16px;
+    border: 1px solid rgba(17, 19, 21, 0.08);
+    border-radius: var(--radius-md);
+    background: rgba(255, 255, 255, 0.72);
+}
+
+.stat-chip strong {
+    display: block;
+    font-size: 28px;
+    line-height: 1;
+}
+
+.stat-chip span {
+    display: block;
+    margin-top: 6px;
+    color: var(--text-muted);
+    font-size: 13px;
+}
+
+.hero-actions {
+    grid-template-columns: repeat(2, minmax(0, max-content));
+}
+
+.hero-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 46px;
+    padding: 0 18px;
+    border-radius: 999px;
+    font-weight: 700;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.hero-link:hover {
+    transform: translateY(-1px);
+}
+
+.hero-link.primary {
+    background: var(--surface-dark);
+    color: #f9f5ef;
+    box-shadow: 0 12px 24px rgba(17, 19, 21, 0.18);
+}
+
+.hero-link.secondary {
+    border: 1px solid rgba(17, 19, 21, 0.16);
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.65);
+}
+
+.hero-card {
+    padding: 28px;
+}
+
+.hero-card h3,
+.workspace-card h3,
+.doc-card h3,
+.release-card h3,
+.archive-item h3 {
+    margin: 0;
+    font-size: 24px;
+}
+
+.card-intro {
+    margin: 10px 0 0;
+    color: var(--text-muted);
+    line-height: 1.7;
+}
+
+.note-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 18px;
+}
+
+.note-pill,
+.tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(17, 19, 21, 0.08);
+    color: var(--text-muted);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.tag.highlight {
+    background: var(--accent-soft);
+    color: #4e6115;
+}
+
+.tag.brand {
+    background: var(--brand-soft);
+    color: var(--brand);
+}
+
+.tag.warn {
+    background: rgba(201, 107, 59, 0.12);
+    color: #a4552e;
+}
+
+.preview-panel {
+    margin-top: 22px;
+}
+
+.preview-panel .form-control,
+.workspace-card .form-control,
+.doc-card .copy-btn,
+.preview-submit,
+.toolbar-btn {
+    border-radius: 16px;
+}
+
+.preview-panel .form-control,
+.workspace-card .form-control {
+    height: 48px;
+    border: 1px solid rgba(17, 19, 21, 0.12);
+    box-shadow: none;
+    background: rgba(255, 255, 255, 0.88);
+}
+
+.preview-panel .form-control:focus,
+.workspace-card .form-control:focus {
+    border-color: rgba(30, 99, 233, 0.45);
+    box-shadow: 0 0 0 4px rgba(30, 99, 233, 0.12);
+}
+
+.preview-url {
+    margin-bottom: 14px;
+}
+
+.preview-grid {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 12px;
+    margin-bottom: 14px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+}
+
+.preview-grid .form-control {
+    flex: 1 1 0;
+    min-width: 150px;
+}
+
+.preview-switches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 14px;
+}
+
+.preview-switches label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    padding: 10px 14px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.76);
+    border: 1px solid rgba(17, 19, 21, 0.08);
+    font-weight: 600;
+}
+
+.preview-switches input {
+    margin: 0;
+}
+
+.preview-submit,
+.toolbar-btn,
+.workspace-card .btn,
+.doc-card .copy-btn {
+    border: 0;
+    background: var(--surface-dark);
+    color: #f7f4ef;
+    font-weight: 700;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.preview-submit:hover,
+.toolbar-btn:hover,
+.workspace-card .btn:hover,
+.doc-card .copy-btn:hover {
+    color: #f7f4ef;
+    opacity: 0.94;
+    transform: translateY(-1px);
+}
+
+.preview-submit {
+    width: 100%;
+    min-height: 52px;
+}
+
+.feature-section,
+.workspace-section,
+.docs-layout,
+.release-section {
+    margin-top: 34px;
+}
+
+.feature-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.feature-card {
+    padding: 24px;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--line);
+    background: rgba(255, 255, 255, 0.68);
+    min-height: 100%;
+}
+
+.feature-card h3 {
+    margin: 14px 0 10px;
+    font-size: 22px;
+}
+
+.feature-card p {
+    margin: 0 0 14px;
+    color: var(--text-muted);
+    line-height: 1.7;
+}
+
+.feature-card ul,
+.doc-card ul,
+.release-list,
+.archive-item ul {
+    margin: 0;
+    padding-left: 18px;
+}
+
+.feature-card li,
+.doc-card li,
+.release-list li,
+.archive-item li {
+    margin-bottom: 8px;
+    line-height: 1.6;
+}
+
+.workspace-card {
+    padding: 30px;
+}
+
+.workspace-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 18px;
+    align-items: flex-end;
+    margin-bottom: 22px;
+}
+
+.source-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 18px;
+    margin-bottom: 18px;
+}
+
+.source-card {
+    padding: 22px;
+    border-radius: var(--radius-lg);
+    background: rgba(255, 255, 255, 0.75);
+    border: 1px solid rgba(17, 19, 21, 0.08);
+}
+
+.source-card h4 {
+    margin: 0 0 10px;
+    font-size: 20px;
+}
+
+.source-card p {
+    margin: 0 0 14px;
+    color: var(--text-muted);
+    line-height: 1.7;
+}
+
+.source-card .preview-panel {
+    margin-top: 0;
+}
+
+.source-card .alert {
+    width: auto;
+    margin-top: 12px;
+}
+
+.workspace-header p {
+    margin: 10px 0 0;
+    max-width: 720px;
+    color: var(--text-muted);
+}
+
+.toolbar-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
+    gap: 18px;
+    margin-bottom: 18px;
+}
+
+.toolbar-card {
+    padding: 20px;
+    border-radius: var(--radius-lg);
+    background: rgba(255, 255, 255, 0.75);
+    border: 1px solid rgba(17, 19, 21, 0.08);
+}
+
+.toolbar-card h4 {
+    margin: 0 0 14px;
+    font-size: 15px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.toolbar-inline {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.toolbar-inline .form-control {
+    flex: 1;
+    min-width: 180px;
+}
+
+.workspace-card .alert {
+    width: auto;
+    margin-top: 12px;
+    border-radius: 16px;
+    border: 0;
+}
+
+.workspace-card .alert-warning {
+    background: rgba(201, 107, 59, 0.12);
+    color: #8c4b2a;
+}
+
+.workspace-card .alert-danger {
+    background: rgba(217, 83, 79, 0.12);
+    color: #9e2f2c;
+}
+
+.modern-breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 18px;
+    padding: 0;
+    list-style: none;
+}
+
+.modern-breadcrumb li {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    border-radius: 999px;
+    border: 1px solid rgba(17, 19, 21, 0.08);
+    background: rgba(255, 255, 255, 0.72);
+}
+
+.modern-breadcrumb a {
+    color: var(--text);
+}
+
+.modern-breadcrumb .active {
+    background: rgba(30, 99, 233, 0.08);
+    color: var(--brand);
+}
+
+.modern-breadcrumb li + li::before {
+    content: "/";
+    color: rgba(17, 19, 21, 0.28);
+}
+
+.workspace-card #table {
+    margin-top: 0;
+    border: 0;
+    border-radius: 22px;
+    overflow: hidden;
+}
+
+.workspace-card .table > thead > tr > th,
+.workspace-card .fixed-table-header thead th {
+    background: #14181d;
+    color: #f7f4ef;
+    border-bottom: 0;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+}
+
+.workspace-card .table > tbody > tr > td {
+    padding: 16px 12px;
+    border-top: 1px solid rgba(17, 19, 21, 0.06);
+    background: rgba(255, 255, 255, 0.82);
+}
+
+.workspace-card .folder-row td {
+    background: rgba(194, 240, 98, 0.14) !important;
+}
+
+.workspace-card .file-row:hover td,
+.workspace-card .folder-row:hover td {
+    background: rgba(30, 99, 233, 0.08) !important;
+}
+
+.workspace-card .label-warning,
+.workspace-card .label-primary {
+    padding: 6px 10px;
+    border-radius: 999px;
+    font-size: 11px;
+}
+
+.workspace-card .label-warning {
+    background: rgba(201, 107, 59, 0.12);
+    color: #a4552e;
+}
+
+.workspace-card .label-primary {
+    background: rgba(30, 99, 233, 0.12);
+    color: var(--brand);
+}
+
+.workspace-card .btn-info,
+.workspace-card .btn-success {
+    background: var(--brand);
+}
+
+.workspace-card .btn-danger {
+    background: #b64e38;
+}
+
+.workspace-card .btn-default {
+    background: rgba(17, 19, 21, 0.08);
+    color: var(--text);
+}
+
+.workspace-card .btn-default:hover {
+    color: var(--text);
+}
+
+.summary-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-top: 24px;
+}
+
+.summary-panel {
+    padding: 22px;
+}
+
+.summary-panel strong {
+    display: block;
+    font-size: 28px;
+}
+
+.summary-panel span {
+    display: block;
+    margin-top: 8px;
+    color: var(--text-muted);
+}
+
+.docs-layout {
+    display: grid;
+    grid-template-columns: 260px minmax(0, 1fr);
+    gap: 24px;
+}
+
+.page-toc {
+    position: sticky;
+    top: 102px;
+    align-self: start;
+    padding: 24px;
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--line);
+    background: rgba(255, 255, 255, 0.72);
+    box-shadow: var(--shadow);
+}
+
+.page-toc h3 {
+    margin: 0 0 14px;
+    font-size: 18px;
+}
+
+.page-toc ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.page-toc li + li {
+    margin-top: 8px;
+}
+
+.page-toc a {
+    display: block;
+    padding: 9px 12px;
+    border-radius: 12px;
+    color: var(--text-muted);
+}
+
+.page-toc a:hover {
+    background: rgba(30, 99, 233, 0.08);
+    color: var(--brand);
+}
+
+.docs-content {
+    display: grid;
+    gap: 18px;
+}
+
+.doc-card {
+    padding: 28px;
+}
+
+.doc-card p {
+    color: var(--text-muted);
+    line-height: 1.8;
+}
+
+.doc-card-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: center;
+    margin-bottom: 14px;
+}
+
+.doc-card-header .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.code-block {
+    position: relative;
+    margin-top: 16px;
+    border-radius: 18px;
+    border: 1px solid #d8dee6;
+    background: #f6f8fa;
+    overflow: auto;
+}
+
+.code-block code {
+    display: block;
+    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+    font-size: 14px;
+    line-height: 1.7;
+    white-space: pre;
+    color: #24292f;
+    background: transparent;
+    padding: 16px 18px;
+}
+
+.code-block .hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 16px 18px;
+    background: transparent;
+    color: #24292f;
+}
+
+.code-block .hljs-comment,
+.code-block .hljs-quote {
+    color: #6e7781;
+    font-style: italic;
+}
+
+.code-block .hljs-keyword,
+.code-block .hljs-selector-tag,
+.code-block .hljs-title.function_,
+.code-block .hljs-built_in,
+.code-block .hljs-literal {
+    color: #cf222e;
+    font-weight: 600;
+}
+
+.code-block .hljs-string,
+.code-block .hljs-regexp,
+.code-block .hljs-template-tag,
+.code-block .hljs-template-variable {
+    color: #0a3069;
+}
+
+.code-block .hljs-number,
+.code-block .hljs-symbol,
+.code-block .hljs-bullet {
+    color: #0550ae;
+}
+
+.code-block .hljs-attr,
+.code-block .hljs-attribute,
+.code-block .hljs-property,
+.code-block .hljs-variable,
+.code-block .hljs-params {
+    color: #24292f;
+}
+
+.code-block .hljs-title,
+.code-block .hljs-function {
+    color: #8250df;
+}
+
+.code-block .hljs-subst,
+.code-block .hljs-operator,
+.code-block .hljs-punctuation {
+    color: #57606a;
+}
+
+.copy-btn {
+    padding: 10px 14px;
+    min-width: 88px;
+}
+
+.release-hero {
+    margin-bottom: 26px;
+}
+
+.release-badge-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.timeline-year {
+    margin: 34px 0 14px;
+    font-size: 13px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.timeline-list {
+    display: grid;
+    gap: 18px;
+}
+
+.release-card {
+    padding: 26px;
+}
+
+.release-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin: 14px 0 18px;
+}
+
+.release-columns {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+}
+
+.release-group {
+    padding: 18px;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.72);
+    border: 1px solid rgba(17, 19, 21, 0.08);
+}
+
+.release-group h4 {
+    margin: 0 0 12px;
+    font-size: 14px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.archive-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin-top: 20px;
+}
+
+.archive-item {
+    padding: 22px;
+}
+
+.archive-item p {
+    margin: 12px 0 0;
+    color: var(--text-muted);
+    line-height: 1.7;
+}
+
+.sponsor-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
+    gap: 24px;
+}
+
+.donation-wall {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    margin-top: 20px;
+}
+
+.qr-card {
+    padding: 22px;
+    border-radius: var(--radius-lg);
+    border: 1px solid rgba(17, 19, 21, 0.08);
+    background: rgba(255, 255, 255, 0.76);
+    text-align: center;
+}
+
+.qr-card img {
+    width: 100%;
+    max-width: 280px;
+    aspect-ratio: 4 / 5.5;
+    object-fit: cover;
+    border-radius: 20px;
+    border: 1px solid rgba(17, 19, 21, 0.08);
+    box-shadow: 0 18px 34px rgba(17, 19, 21, 0.12);
+}
+
+.qr-card h4 {
+    margin: 0 0 16px;
+    font-size: 18px;
+}
+
+.sponsor-table {
+    width: 100%;
+    margin-top: 18px;
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: hidden;
+    border-radius: 18px;
+}
+
+.sponsor-table thead th {
+    background: #14181d;
+    color: #f7f4ef;
+    border: 0 !important;
+    padding: 14px 16px !important;
+}
+
+.sponsor-table tbody td {
+    padding: 14px 16px !important;
+    border-top: 1px solid rgba(17, 19, 21, 0.06) !important;
+    background: rgba(255, 255, 255, 0.82);
+}
+
+.sponsor-table tbody tr:nth-child(2n) td {
+    background: rgba(246, 241, 233, 0.92);
+}
+
+.sponsor-amount {
+    font-weight: 700;
+    color: var(--brand);
+}
+
+.site-footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 28px;
+    color: var(--text-muted);
+}
+
+.site-footer a {
+    padding: 10px 14px;
+    border-radius: 999px;
+    border: 1px solid rgba(17, 19, 21, 0.08);
+    background: rgba(255, 255, 255, 0.58);
+}
+
+.text-highlight {
+    padding: 2px 6px;
+    border-radius: 8px;
+    background: rgba(194, 240, 98, 0.4);
+    color: var(--text);
+    font-weight: 700;
+}
+
+.modal-dialog {
+    margin-top: 12vh;
+}
+
+@media (max-width: 1080px) {
+    .hero-grid,
+    .docs-layout,
+    .toolbar-grid,
+    .release-columns,
+    .source-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .page-toc {
+        position: static;
+    }
+
+    .hero-stats,
+    .feature-grid,
+    .summary-grid,
+    .archive-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 768px) {
+    .page-shell {
+        padding-top: 96px;
+    }
+
+    .site-nav .container,
+    .page-shell > .container {
+        width: min(100% - 28px, 1180px);
+    }
+
+    .hero-copy,
+    .hero-card,
+    .workspace-card,
+    .doc-card,
+    .release-card,
+    .archive-item,
+    .summary-panel,
+    .page-toc {
+        padding: 22px;
+        border-radius: 22px;
+    }
+
+    .hero-title {
+        font-size: 24px;
+    }
+
+    .hero-stats,
+    .feature-grid,
+    .summary-grid,
+    .archive-grid,
+    .donation-wall {
+        grid-template-columns: 1fr;
+    }
+
+    .preview-grid {
+        flex-wrap: wrap;
+    }
+
+    .hero-actions {
+        grid-template-columns: 1fr;
+    }
+
+    .workspace-header,
+    .section-heading,
+    .doc-card-header {
+        display: block;
+    }
+
+    .toolbar-inline {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .toolbar-inline .form-control,
+    .toolbar-inline .btn {
+        width: 100%;
+    }
+}
diff --git a/server/src/main/resources/web/main/index.ftl b/server/src/main/resources/web/main/index.ftl
index 40e26075..fc9ecedf 100644
--- a/server/src/main/resources/web/main/index.ftl
+++ b/server/src/main/resources/web/main/index.ftl
@@ -3,12 +3,16 @@
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>kkFileView演示首页</title>
+    <title>kkFileView 演示页</title>
     <link rel="icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/loading.css"/>
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
     <link rel="stylesheet" href="css/theme.css"/>
+    <link rel="stylesheet" href="css/main-pages.css"/>
     <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
     <script type="text/javascript" src="js/jquery.form.min.js"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
@@ -17,268 +21,22 @@
     <script type="text/javascript" src="js/crypto-js.js"></script>
     <script type="text/javascript" src="js/aes.js"></script>
     <style>
-        <#-- 删除文件密码弹窗居中 -->
-        .alert {
-            width: 50%;
-        }
-        <#-- 删除文件验证码弹窗居中 -->
-        .modal {
-            width:100%;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            -ms-transform: translate(-50%, -50%);
-        }
-        
-        /* 分页样式调整 */
-        .fixed-table-pagination {
-            padding: 15px 0;
-            border-top: 1px solid #e7eaec;
-            margin-top: 15px;
-        }
-        .pagination > li > a,
-        .pagination > li > span {
-            margin: 0 3px;
-            border-radius: 3px;
-            color: #337ab7;
-        }
-        .pagination > .active > a,
-        .pagination > .active > a:hover,
-        .pagination > .active > span,
-        .pagination > .active > span:hover {
-            background-color: #337ab7;
-            border-color: #337ab7;
-        }
-        
-        /* 目录导航样式 */
-        .breadcrumb {
-            background-color: #f8f9fa;
-            padding: 10px 20px;
-            margin-bottom: 15px;
-            border-radius: 4px;
-            border: 1px solid #e7eaec;
-        }
-        .breadcrumb > li + li:before {
-            content: ">";
-            padding: 0 8px;
-            color: #6c757d;
-        }
         .file-icon {
             margin-right: 8px;
             font-size: 14px;
         }
-        
-        /* 表格行样式 */
-        .folder-row {
-            background-color: #f8f9fa;
-            font-weight: 500;
-        }
-        .folder-row:hover {
-            background-color: #e9ecef;
-        }
-        .file-row:hover {
-            background-color: #f5f5f5;
-        }
-        
-        /* 修正URL链接颜色 */
-        .breadcrumb a, 
-        .breadcrumb a:hover {
-            color: #333 !important;
-            text-decoration: none;
-        }
+
         #table a:not(.btn) {
-            color: #333 !important;
-            text-decoration: none;
+            color: var(--text) !important;
         }
+
         #table a:not(.btn):hover {
-            color: #0275d8 !important;
-            text-decoration: underline;
-        }
-        
-        /* 按钮样式优化 */
-        .btn {
-            border-radius: 3px;
-            padding: 5px 12px;
-        }
-        .btn-sm {
-            padding: 3px 8px;
-            font-size: 12px;
-        }
-        .btn-success {
-            background-color: #5cb85c;
-            border-color: #4cae4c;
-        }
-        .btn-success:hover {
-            background-color: #449d44;
-            border-color: #398439;
-        }
-        .btn-primary {
-            background-color: #337ab7;
-            border-color: #2e6da4;
-        }
-        .btn-primary:hover {
-            background-color: #286090;
-            border-color: #204d74;
-        }
-        .btn-danger {
-            background-color: #d9534f;
-            border-color: #d43f3a;
-        }
-        .btn-danger:hover {
-            background-color: #c9302c;
-            border-color: #ac2925;
-        }
-        .btn-info {
-            background-color: #5bc0de;
-            border-color: #46b8da;
-        }
-        .btn-info:hover {
-            background-color: #31b0d5;
-            border-color: #269abc;
-        }
-        
-        /* 输入框和表单样式 */
-        .form-control {
-            border-radius: 3px;
-            border: 1px solid #ccc;
-            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-        }
-        .form-control:focus {
-            border-color: #66afe9;
-            outline: 0;
-            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-        }
-        
-        /* 地址预览区域优化 - 保持一行 */
-        .preview-form-row {
-            display: flex;
-            flex-wrap: nowrap;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 10px;
-        }
-        .preview-form-row .form-group {
-            margin-bottom: 0;
-            flex-shrink: 0;
-        }
-        .preview-form-row #_url {
-            flex-grow: 1;
-            min-width: 300px;
-        }
-        .preview-form-row .checkbox-inline {
-            margin-right: 10px;
-            white-space: nowrap;
-        }
-        .preview-form-row .form-control {
-            display: inline-block;
-            width: auto;
-            min-width: 70px;
-        }
-        .preview-form-row .form-control#filePassword {
-            min-width: 80px;
-        }
-        .preview-form-row .form-control#watermarkTxt {
-            min-width: 100px;
-        }
-        .preview-form-row .form-control#kkkey {
-            min-width: 100px;
-        }
-        .preview-form-row .btn-success {
-            white-space: nowrap;
-        }
-        
-        /* 搜索框优化 */
-        .input-group {
-            width: 100%;
-        }
-        .input-group-btn .btn {
-            border-radius: 0 3px 3px 0;
-        }
-        #searchInput {
-            border-radius: 3px 0 0 3px;
-        }
-        
-        /* 上传区域优化 */
-        #file {
-            padding: 6px;
-        }
-        .input-group-btn .btn {
-            margin-left: 5px;
-        }
-        
-        /* 表格样式优化 */
-        #table {
-            border: 1px solid #e7eaec;
-            border-radius: 4px;
-            margin-top: 15px;
-        }
-        .fixed-table-container {
-            border: none;
-        }
-        .table > thead > tr > th {
-            border-bottom: 2px solid #e7eaec;
-            background-color: #f8f9fa;
-            font-weight: 600;
-        }
-        .table > tbody > tr > td {
-            border-top: 1px solid #e7eaec;
-            padding: 12px 8px;
-            vertical-align: middle;
-        }
-        
-        /* 模态框优化 */
-        .modal-content {
-            border-radius: 5px;
-            box-shadow: 0 5px 15px rgba(0,0,0,.5);
-        }
-        .modal-header {
-            background-color: #f8f9fa;
-            border-bottom: 1px solid #e7eaec;
-            border-radius: 5px 5px 0 0;
-        }
-        .modal-footer {
-            background-color: #f8f9fa;
-            border-top: 1px solid #e7eaec;
-            border-radius: 0 0 5px 5px;
-        }
-        
-        /* 操作按钮间距 */
-        .btn + .btn {
-            margin-left: 5px;
-        }
-        
-        /* 高亮搜索结果 */
-        .text-danger[style*="background-color: yellow"] {
-            padding: 0 2px;
-            font-weight: bold;
-        }
-        
-        /* 禁用状态样式 */
-        .disabled-upload {
-            opacity: 0.6;
-            pointer-events: none;
-        }
-        .disabled-upload .btn {
-            cursor: not-allowed;
-        }
-        .disabled-upload .alert {
-            margin-bottom: 0;
-        }
-        
-        /* 响应式调整 */
-        @media (max-width: 1200px) {
-            .preview-form-row {
-                flex-wrap: wrap;
-            }
-            .preview-form-row #_url {
-                min-width: 200px;
-            }
+            color: var(--brand) !important;
         }
     </style>
 </head>
 
-<body>
+<body class="app-shell app-home">
 
 <#-- 删除文件验证码弹窗  -->
 <#if deleteCaptcha >
@@ -307,8 +65,7 @@
 </div>
 </#if>
 
-<!-- Fixed navbar -->
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <div class="navbar-header">
             <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
@@ -322,157 +79,253 @@
     </div>
 </nav>
 
-<div class="container theme-showcase" role="main">
-    <#--  接入说明  -->
-    <div class="page-header">
-        <h1>支持的文件类型</h1>
-        我们一直在扩展支持的文件类型，不断优化预览的效果，如果您有什么建议，欢迎在kk开源社区留言反馈：<a target='_blank' href="https://t.zsxq.com/09ZHSXbsQ">https://t.zsxq.com/09ZHSXbsQ</a>。
-    </div>
-    <div>
-        <ol>
-            <li>支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx, xlam, xla, pages 等 Office 办公文档</li>
-            <li>支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档</li>
-            <li>支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档</li>
-            <li>支持 vsd, vsdx 等 Visio 流程图文件</li>
-            <li>支持 wmf, emf 等 Windows 系统图像文件</li>
-            <li>支持 psd, eps 等 Photoshop 软件模型文件</li>
-            <li>支持 pdf, ofd, rtf 等文档</li>
-            <li>支持 xmind 软件模型文件</li>
-            <li>支持 bpmn 工作流文件</li>
-            <li>支持 eml, msg邮件文件</li>
-            <li>支持 epub 图书文档</li>
-            <li>支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件</li>
-            <li>支持 dwg, dxf, dwf, iges , igs, dwt, dng, ifc, dwfx, stl, cf2, plt  等 CAD 模型文件</li>
-            <li>支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本</li>
-            <li>支持 zip, rar, jar, tar, gzip, 7z 等压缩包</li>
-            <li>支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp, heic 等图片预览（翻转，缩放，镜像）</li>
-            <li>支持 tif, tiff 图信息模型文件（翻转，缩放）</li>
-            <li>支持 tga 图像格式文件</li>
-            <li>支持 svg 矢量图像格式文件 （翻转，缩放）</li>
-            <li>支持 mp3,wav,mp4,flv 等音视频格式文件</li>
-            <li>支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览</li>
-            <li>支持 dcm 等医疗数位影像预览</li>
-            <li>支持 drawio 绘图预览</li>
-        </ol>
-    </div>
-     <#--  输入下载地址预览文件  -->
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">输入下载地址预览</h3>
-            跨域说明: 跨域是指你接入的URL默认支持跨域 不需要KK在进行反代了 <br>
-            <#if "${kkkey}" != "false" >
-                程序已经启用秘钥功能接入访问需要输入秘钥,获取秘钥请联系管理员！ <br>
-            </#if>
-            <#if isshowkey>
-                <#if "${kkkey}" != "false" >
-                    接入秘钥是：${kkkey}
-                </#if>
-            </#if>
-        </div>
-        <div class="panel-body">
-            <div class="row">
-                <label>&nbsp; &nbsp; <input type="text" id="_url" placeholder="请输入预览文件 url" style="min-width:35em"/></label>
-                <form action="${baseUrl}onlinePreview" target="_blank" id="previewByUrl" style="display: inline-block">
-                    <input type="hidden" name="url"/>
-                    <label><input type="checkbox" name="forceUpdatedCache" value="true"/>更新</label>
-                    <label><input type="checkbox" name="kkagent" value="true"/>跨域</label>
-                    <label><input type="checkbox" id="encryption" name="encryption" value="aes"/>AES</label>
-                    <input type="text" id="filePassword" name="filePassword" placeholder="密码" style="width:50px;">
-                    <input type="text" id="page" name="page" placeholder="页码" style="width:50px;">
-                    <input type="text" id="highlightall" name="highlightall" placeholder="高亮显示" style="width:60px;">
-                    <input type="text" id="watermarkTxt" name="watermarkTxt" placeholder="插入水印" style="width:60px;">
-                    <#if isshowkey>
-                        <input type="text" id="kkkey" name="key" placeholder="KK秘钥" style="width:60px;">
-                    </#if>
-
-                    <input type="submit" value="预览" class="btn btn-success">
-                </form>
+<div class="page-shell">
+    <div class="container" role="main">
+        <section class="hero-section">
+            <div class="hero-grid single">
+                <div class="hero-copy">
+                    <span class="eyebrow">Preview Engine / Demo Portal</span>
+                    <h1 class="hero-title">把文件预览接进业务系统，像接一个 URL 一样直接。</h1>
+                    <p class="hero-subtitle">
+                        kkFileView 把文档、图片、CAD、3D、压缩包和音视频预览收敛成一套统一入口。
+                        这版演示页把“URL 预览”和“本地文件预览”并入同一个工作台，避免同类操作被拆成两段。
+                    </p>
+                    <div class="hero-stats">
+                        <div class="stat-chip">
+                            <strong>20+</strong>
+                            <span>文件族群覆盖</span>
+                        </div>
+                        <div class="stat-chip">
+                            <strong>JDK 21+</strong>
+                            <span>当前推荐运行环境</span>
+                        </div>
+                        <div class="stat-chip">
+                            <strong>API</strong>
+                            <span>URL 直连式接入</span>
+                        </div>
+                        <div class="stat-chip">
+                            <strong>Demo Lab</strong>
+                            <span>本地上传与目录试跑</span>
+                        </div>
+                    </div>
+                    <div class="hero-actions">
+                        <a class="hero-link primary" href="#demo-lab">开始体验</a>
+                        <a class="hero-link secondary" href="./integrated">查看接入说明</a>
+                    </div>
+                </div>
             </div>
-            <div class="alert alert-danger alert-dismissable hide" role="alert" id="previewCheckAlert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-                <strong>请输入正确的url</strong>
-            </div>
-        </div>
-    </div>
+        </section>
 
-    <#--  预览测试  -->
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">上传本地文件预览</h3>
-        </div>
-        <div class="panel-body">
-            <#-- 目录导航 -->
-            <nav aria-label="文件路径">
-                <ol class="breadcrumb" id="pathBreadcrumb">
+        <section class="feature-section">
+            <div class="section-heading">
+                <div>
+                    <span class="eyebrow">Capability Map</span>
+                    <h2>能力不止是“能打开”，而是覆盖业务里真正常见的文件流。</h2>
+                </div>
+                <p>
+                    我们把原来首页的长列表改成分类卡片，方便先扫边界，再判断适不适合接入你的系统。
+                    如果你有新增格式建议，欢迎到开源社区继续补充。
+                </p>
+            </div>
+            <div class="feature-grid">
+                <article class="feature-card">
+                    <span class="tag brand">Office</span>
+                    <h3>办公文档</h3>
+                    <p>面向日常业务流里最常见的 Office、WPS 与 LibreOffice 文档。</p>
+                    <ul>
+                        <li>doc / docx / xls / xlsx / ppt / pptx / csv / tsv</li>
+                        <li>wps / dps / et / ett / wpt</li>
+                        <li>odt / ods / odp / ott / fodt / fods</li>
+                    </ul>
+                </article>
+                <article class="feature-card">
+                    <span class="tag highlight">Engineering</span>
+                    <h3>CAD 与 3D</h3>
+                    <p>覆盖设计、制造和工程协同链路里经常出现的模型与图纸格式。</p>
+                    <ul>
+                        <li>dwg / dxf / dwf / dwt / plt / cf2</li>
+                        <li>obj / 3ds / stl / gltf / glb / fbx / dae</li>
+                        <li>ifc / step / iges / fcstd / bim / brep</li>
+                    </ul>
+                </article>
+                <article class="feature-card">
+                    <span class="tag">Image</span>
+                    <h3>图片与图像</h3>
+                    <p>支持常规位图、多页图像、矢量图，以及较新的移动端图片格式。</p>
+                    <ul>
+                        <li>jpg / png / gif / bmp / webp / heic</li>
+                        <li>tif / tiff / tga / svg / wmf / emf</li>
+                        <li>翻转、缩放、镜像等交互能力</li>
+                    </ul>
+                </article>
+                <article class="feature-card">
+                    <span class="tag brand">Archive</span>
+                    <h3>压缩与文本</h3>
+                    <p>压缩包目录浏览、纯文本渲染、源码文件高亮都属于默认能力范围。</p>
+                    <ul>
+                        <li>zip / rar / jar / tar / gzip / 7z</li>
+                        <li>txt / md / xml / java / js / css / py / php</li>
+                        <li>支持目录访问、搜索和服务端分页</li>
+                    </ul>
+                </article>
+                <article class="feature-card">
+                    <span class="tag warn">Media</span>
+                    <h3>音视频与邮件</h3>
+                    <p>覆盖业务里常见的媒体文件与邮件归档场景，兼顾转码和直接预览。</p>
+                    <ul>
+                        <li>mp3 / wav / mp4 / flv / avi / mov / mkv</li>
+                        <li>eml / msg 邮件文件</li>
+                        <li>epub / ofd / xmind / bpmn / drawio / dcm</li>
+                    </ul>
+                </article>
+                <article class="feature-card">
+                    <span class="tag">Security</span>
+                    <h3>接入能力</h3>
+                    <p>除了预览类型本身，首页也需要把接入时常用的控制项直接暴露出来。</p>
+                    <ul>
+                        <li>支持 AES、Basic Auth、FTP 参数扩展</li>
+                        <li>支持页码、高亮、水印、密码与缓存刷新</li>
+                        <li>支持本地上传、目录浏览、文件删除</li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+
+        <section class="workspace-section" id="demo-lab">
+            <div class="workspace-card">
+                <div class="workspace-header">
+                    <div>
+                        <span class="eyebrow">Demo Lab</span>
+                        <h3>本地文件工作台</h3>
+                        <p>这里统一承接两种预览来源：直接输入 URL，或者从本地文件目录里选择文件。参数和操作入口都尽量收在一起。</p>
+                    </div>
+                    <div class="note-row">
+                        <span class="note-pill">URL 预览</span>
+                        <span class="note-pill">支持目录级访问</span>
+                        <span class="note-pill">服务端分页</span>
+                        <span class="note-pill">搜索与删除</span>
+                    </div>
+                </div>
+
+                <div class="source-grid">
+                    <div class="source-card">
+                        <h4>输入 URL 直接试跑</h4>
+                        <p>贴入文件地址，按需叠加页码、高亮、水印、AES 和跨域参数，直接在新窗口验证最终预览行为。</p>
+                        <div class="note-row">
+                            <span class="tag brand">URL 即入口</span>
+                            <span class="tag highlight">AES 可选</span>
+                            <span class="tag">页码 / 水印 / 高亮</span>
+                            <#if "${kkkey}" != "false" >
+                                <span class="tag warn">当前实例启用了访问秘钥</span>
+                            </#if>
+                        </div>
+                        <#if "${kkkey}" != "false" >
+                            <p>
+                                程序已启用秘钥访问。
+                                <#if isshowkey>
+                                    当前接入秘钥为 <span class="text-highlight">${kkkey}</span>。
+                                <#else>
+                                    如需秘钥，请联系管理员。
+                                </#if>
+                            </p>
+                        </#if>
+                        <div class="preview-panel">
+                            <form action="${baseUrl}onlinePreview" target="_blank" id="previewByUrl">
+                                <input type="hidden" name="url"/>
+                                <div class="preview-url">
+                                    <input type="text" id="_url" class="form-control" placeholder="请输入预览文件 URL，例如 https://example.com/demo.pdf"/>
+                                </div>
+                                <div class="preview-switches">
+                                    <label><input type="checkbox" name="forceUpdatedCache" value="true"/> 更新缓存</label>
+                                    <label><input type="checkbox" name="kkagent" value="true"/> 跨域代理</label>
+                                    <label><input type="checkbox" id="encryption" name="encryption" value="aes"/> AES 加密</label>
+                                </div>
+                                <div class="preview-grid">
+                                    <input type="text" id="filePassword" name="filePassword" class="form-control" placeholder="文件密码"/>
+                                    <input type="text" id="page" name="page" class="form-control" placeholder="页码"/>
+                                    <input type="text" id="highlightall" name="highlightall" class="form-control" placeholder="高亮关键字"/>
+                                    <input type="text" id="watermarkTxt" name="watermarkTxt" class="form-control" placeholder="水印文本"/>
+                                    <#if isshowkey>
+                                        <input type="text" id="kkkey" name="key" class="form-control" placeholder="KK 秘钥"/>
+                                    </#if>
+                                </div>
+                                <input type="submit" value="立即预览" class="preview-submit">
+                            </form>
+                            <div class="alert alert-danger alert-dismissable hide" role="alert" id="previewCheckAlert">
+                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                                <strong>请输入正确的 URL</strong>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="section-heading">
+                    <div>
+                        <span class="eyebrow">Local Source</span>
+                        <h2>本地文件与目录预览</h2>
+                    </div>
+                    <p>上传文件、创建目录、按文件名搜索，然后直接从下面的文件表格里发起预览。这样本地入口和结果列表会贴在一起。</p>
+                </div>
+
+                <div class="toolbar-grid">
+                    <div class="toolbar-card">
+                        <h4>文件操作</h4>
+                        <#if fileUploadDisable == false>
+                            <form enctype="multipart/form-data" id="fileUpload">
+                                <div class="toolbar-inline">
+                                    <input type="file" id="file" name="file" class="form-control"/>
+                                    <input type="button" id="fileUploadBtn" class="btn toolbar-btn" value="上传文件"/>
+                                    <input type="button" id="newFolderBtn" class="btn toolbar-btn" value="新建文件夹"/>
+                                </div>
+                            </form>
+                        <#else>
+                            <div class="disabled-upload">
+                                <div class="alert alert-warning">
+                                    <span class="glyphicon glyphicon-info-sign"></span>
+                                    文件上传功能已禁用。如需开启，请修改配置文件或联系管理员。
+                                </div>
+                            </div>
+                        </#if>
+                    </div>
+                    <div class="toolbar-card">
+                        <h4>快速搜索</h4>
+                        <div class="toolbar-inline">
+                            <input type="text" id="searchInput" class="form-control" placeholder="搜索文件名..." value="${searchText!''}">
+                            <button class="btn toolbar-btn" type="button" onclick="performSearch()">搜索</button>
+                            <button class="btn toolbar-btn" type="button" onclick="clearSearch()">清除</button>
+                        </div>
+                    </div>
+                </div>
+
+                <ol class="modern-breadcrumb" id="pathBreadcrumb" style="display: none;">
                     <li><a href="javascript:void(0);" onclick="changeDirectory('')">根目录</a></li>
                 </ol>
-            </nav>
-            
-            <#-- 操作区域 -->
-            <div class="row" style="margin-bottom: 15px;">
-                <div class="col-md-6">
-                    <#-- 上传区域 -->
-                    <#if fileUploadDisable == false>
-                        <form enctype="multipart/form-data" id="fileUpload" class="form-inline">
-                            <div class="input-group" style="width: 100%;">
-                                <input type="file" id="file" name="file" class="form-control" style="flex: 1;"/>
-                                <span class="input-group-btn">
-                                    <input type="button" id="fileUploadBtn" class="btn btn-success" value="上传文件"/>
-                                    <input type="button" id="newFolderBtn" class="btn btn-primary" style="margin-left:5px;" value="新建文件夹"/>
-                                </span>
+
+                <div class="modal fade" id="newFolderModal" tabindex="-1" role="dialog">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                                <h4 class="modal-title">新建文件夹</h4>
                             </div>
-                        </form>
-                    <#else>
-                        <div class="disabled-upload">
-                            <div class="alert alert-warning" style="margin-top: 10px; padding: 8px; font-size: 13px;">
-                                <span class="glyphicon glyphicon-info-sign"></span>
-                                文件上传功能已禁用。如需开启，请修改配置文件或联系管理员。
+                            <div class="modal-body">
+                                <input type="text" id="newFolderName" class="form-control" placeholder="请输入文件夹名称"/>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn toolbar-btn" onclick="createNewFolder()">创建</button>
+                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                             </div>
-                        </div>
-                    </#if>
-                </div>
-                <div class="col-md-6">
-                    <#-- 搜索框 -->
-                    <div class="input-group">
-                        <input type="text" id="searchInput" class="form-control" placeholder="搜索文件名..." value="${searchText!''}">
-                        <span class="input-group-btn">
-                            <button class="btn btn-primary" type="button" onclick="performSearch()">
-                                <span class="glyphicon glyphicon-search"></span> 搜索
-                            </button>
-                            <button class="btn btn-default" type="button" onclick="clearSearch()">
-                                <span class="glyphicon glyphicon-remove"></span> 清除
-                            </button>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            
-            <#-- 新建文件夹对话框 -->
-            <div class="modal fade" id="newFolderModal" tabindex="-1" role="dialog">
-                <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                <span aria-hidden="true">&times;</span>
-                            </button>
-                            <h4 class="modal-title">新建文件夹</h4>
-                        </div>
-                        <div class="modal-body">
-                            <input type="text" id="newFolderName" class="form-control" placeholder="请输入文件夹名称"/>
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-primary" onclick="createNewFolder()">创建</button>
-                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                         </div>
                     </div>
                 </div>
+
+                <table id="table" data-pagination="true"></table>
             </div>
-            
-            <#-- 文件列表表格 -->
-            <table id="table" data-pagination="true"></table>
-        </div>
+        </section>
     </div>
 </div>
 
@@ -499,10 +352,8 @@
     </div>
 </div>
 <#if beian?? && beian != "default">
-    <div style="display: grid; place-items: center;">
-        <div>
-            <a target="_blank" href="https://beian.miit.gov.cn/">${beian}</a>
-        </div>
+    <div class="site-footer">
+        <a target="_blank" href="https://beian.miit.gov.cn/">${beian}</a>
     </div>
 </#if>
 <script>
@@ -659,7 +510,7 @@
                     if (currentSearchText && currentSearchText.trim() !== '') {
                         var regex = new RegExp(currentSearchText, 'gi');
                         displayName = value.replace(regex, function(match) {
-                            return '<span class="text-danger" style="background-color: yellow;">' + match + '</span>';
+                            return '<span class="text-highlight">' + match + '</span>';
                         });
                     }
                     
@@ -791,23 +642,22 @@
         var breadcrumb = $('#pathBreadcrumb');
         breadcrumb.empty();
         
-        // 添加根目录
-        breadcrumb.append('<li><a href="javascript:void(0);" onclick="changeDirectory(\'\')" style="color: #333;">根目录</a></li>');
-        
         if (path) {
+            breadcrumb.show();
+            breadcrumb.append('<li><a href="javascript:void(0);" onclick="changeDirectory(\'\')">根目录</a></li>');
             var parts = path.split('/').filter(Boolean);
             var currentPath = '';
             
             parts.forEach(function(part, index) {
                 currentPath += (currentPath ? '/' : '') + part;
                 if (index < parts.length - 1) {
-                    breadcrumb.append('<li><a href="javascript:void(0);" onclick="changeDirectory(\'' + currentPath + '\')" style="color: #333;">' + part + '</a></li>');
+                    breadcrumb.append('<li><a href="javascript:void(0);" onclick="changeDirectory(\'' + currentPath + '\')">' + part + '</a></li>');
                 } else {
-                    breadcrumb.append('<li class="active" style="color: #333;">' + part + '</li>');
+                    breadcrumb.append('<li class="active">' + part + '</li>');
                 }
             });
         } else {
-            breadcrumb.append('<li class="active" style="color: #333;">根目录</li>');
+            breadcrumb.hide();
         }
     }
     
@@ -1039,4 +889,4 @@
     }
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/server/src/main/resources/web/main/integrated.ftl b/server/src/main/resources/web/main/integrated.ftl
index 17df42f6..f32e9573 100644
--- a/server/src/main/resources/web/main/integrated.ftl
+++ b/server/src/main/resources/web/main/integrated.ftl
@@ -1,23 +1,26 @@
 <!DOCTYPE html>
-
-<html lang="en" xmlns="http://www.w3.org/1999/html">
+<html lang="en">
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>接入说明</title>
+    <title>kkFileView 接入说明</title>
     <link rel="icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="css/theme.css"/>
+    <link rel="stylesheet" href="css/main-pages.css"/>
     <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="highlight/highlight.min.js"></script>
 </head>
 
-<body>
-
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<body class="app-shell">
+<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <div class="navbar-header">
-            <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
+            <a class="navbar-brand" href="https://kkview.cn" target="_blank">kkFileView</a>
         </div>
         <ul class="nav navbar-nav">
             <li><a href="./index">首页</a></li>
@@ -28,91 +31,224 @@
     </div>
 </nav>
 
-<div class="container theme-showcase" role="main">
-    <#--  接入说明  -->
-    <div class="page-header">
-        <h1>接入说明</h1>
-        本文档针对前端项目接入 kkFileView 的说明，并假设 kkFileView 的服务地址为：http://127.0.0.1:8012。
-    </div>
-    <div class="well">
+<div class="page-shell">
+    <div class="container" role="main">
+        <section class="hero-section release-hero">
+            <div class="hero-copy">
+                <span class="eyebrow">Integration Guide</span>
+                <h1 class="hero-title">5 分钟把 kkFileView 接进你的前端项目。</h1>
+                <p class="hero-subtitle">
+                    这页不再把所有方案平铺成一长段，而是按场景拆成独立卡片。
+                    默认假设服务地址为 <span class="text-highlight">${baseUrl}</span>。
+                </p>
+                <div class="note-row">
+                    <span class="tag brand">HTTP / HTTPS</span>
+                    <span class="tag">FTP</span>
+                    <span class="tag highlight">AES</span>
+                    <span class="tag warn">附加参数</span>
+                </div>
+                <div class="summary-grid">
+                    <div class="summary-panel">
+                        <strong>URL</strong>
+                        <span>所有预览能力统一汇总到 `onlinePreview` 入口。</span>
+                    </div>
+                    <div class="summary-panel">
+                        <strong>Base64</strong>
+                        <span>普通接入默认对原始文件地址做 Base64 编码后再传入。</span>
+                    </div>
+                    <div class="summary-panel">
+                        <strong>参数扩展</strong>
+                        <span>支持页码、高亮、水印、密码、跨域、AES 和秘钥等控制项。</span>
+                    </div>
+                </div>
+            </div>
+        </section>
 
-        <div style="font-size: 16px;">
-            【http/https 资源文件预览】如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以成功实现：
-            <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
-                var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址 <br>
-                window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(base64Encode(url)));
-            </p>
-        </div>
-        <br>
-        <div style="font-size: 16px;">
-            【http/https 流资源文件预览】很多系统内不是直接暴露文件下载地址，而是请求通过id、code等参数到通过统一的接口，后端通过id或code等参数定位文件，再通过OutputStream输出下载，此时下载url是不带文件后缀名的，预览时需要拿到文件名，传一个参数fullfilename=xxx.xxx来指定文件名，示例如下
-            <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
-                var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址<br>
-                var previewUrl = originUrl + '&fullfilename=test.txt'<br>
-                window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
-            </p>
-        </div>
-        <br>
-         <div style="font-size: 16px;">
-            【ftp 资源文件预览】如果要预览的FTP url是可以匿名访问的（不需要用户名密码），则可以直接通过下载url预览，示例如下
-            <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
-                var url = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址<br>
-                window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
-            </p>
-        </div>
-        <br>
-        <div style="font-size: 16px;">
-            【ftp 加密资源文件预览】如果 FTP 需要认证访问服，可以通过在 url 中加入用户名密码等参数预览，示例如下
-            <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
-                var originUrl = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址<br>
-                var previewUrl = originUrl + '?ftp.control.port=xx&ftp.username=xx&ftp.password=xx&ftp.control.encoding=(gbk,utf8等)'; //(为了安全强烈建议在配置中设置相关信息)<br>
-                window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
-            </p>
-        </div>
-            <div style="font-size: 16px;">
-            【Basic 鉴权资源文件预览】如果需要认证访问服，可以通过在url中加入用户名密码等参数预览，示例如下
-            <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
-                var originUrl = 'http://127.0.0.1/file/test.txt'; //要预览文件的访问地址<br>
-                var previewUrl = originUrl + '?basic.name=admin&basic.pass=123456'; //(为了安全强烈建议在配置中设置相关信息)<br>
-                window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
-            </p>
-        </div>
-               <div style="font-size: 16px;">
-            AES加密接入方法，示例如下
-            <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
-              主要事项：首先引入下面js  在把url转换成AES,注意前后端key必须相同（注意：JS下载到你接入服务器的网址）<br>
-            &lt;script src="${baseUrl}js/crypto-js.js"></script><br>
-            &lt;script src="${baseUrl}js/aes.js"></script><br>
-             function aesEncrypt(encryptString, key) { <br>
-             var key = CryptoJS.enc.Utf8.parse(key); <br>
-             var srcs = CryptoJS.enc.Utf8.parse(encryptString); <br>
-             var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); <br>
-             return encrypted.toString(); <br>
-        }<br>
-            var key = "1234567890123456"; // AES秘钥16位数字<br>
-            var url = "http://127.0.0.1/file/test.txt";<br>
-           window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(aesEncrypt(url, key))+'&encryption=aes');
-            </p>
-        </div>
-        
-             <div style="font-size: 16px;">
-            其他参数，示例如下 
-            <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
-            密码参数：&filePassword=加密文件的密码<br>
-            页码参数：&page=选择第几页预览<br>
-            高亮参数：&highlightall=关键字 突出显示 <br>
-            水印参数：&watermarkTxt=你的水印<br>
-            重生参数：&forceUpdatedCache=true <br>
-            跨域参数：&kkagent=true <br>
-            加密缓存：&usePasswordCache=true <br>
-            秘钥参数：&key= 访问秘钥 <br>
-            主要事项：以上参数是把url转换成base64后面在添加<br>
-            var url = 'http://127.0.0.1:8080/file/test.txt'<br>
-           window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(base64Encode(url))+'&filePassword=123&page=1&highlightall=kkfileview&watermarkTxt=kkfileview&kkagent=false&key=123');
-            </p>
+        <div class="docs-layout">
+            <aside class="page-toc">
+                <h3>快速导航</h3>
+                <ul>
+                    <li><a href="#quick-start">快速开始</a></li>
+                    <li><a href="#http-preview">HTTP 文件预览</a></li>
+                    <li><a href="#stream-preview">流式接口预览</a></li>
+                    <li><a href="#ftp-preview">FTP 预览</a></li>
+                    <li><a href="#basic-auth">Basic 鉴权</a></li>
+                    <li><a href="#aes-preview">AES 加密</a></li>
+                    <li><a href="#extra-params">附加参数</a></li>
+                </ul>
+            </aside>
+
+            <div class="docs-content">
+                <section class="doc-card" id="quick-start">
+                    <div class="doc-card-header">
+                        <div>
+                            <span class="eyebrow">Quick Start</span>
+                            <h3>接入思路</h3>
+                        </div>
+                        <div class="tags">
+                            <span class="tag brand">推荐入口</span>
+                        </div>
+                    </div>
+                    <p>前端只需要拿到可访问的文件 URL，然后把它编码后拼到 `${baseUrl}onlinePreview` 上即可。对于大多数业务系统，这是最快的落地路径。</p>
+                    <ul>
+                        <li>普通 HTTP/HTTPS 文件地址：直接 Base64 编码后传入。</li>
+                        <li>下载流接口没有后缀名：补充 `fullfilename=xxx.xxx`。</li>
+                        <li>鉴权或加密场景：附加 Basic、FTP、AES 等参数。</li>
+                    </ul>
+                </section>
+
+                <section class="doc-card" id="http-preview">
+                    <div class="doc-card-header">
+                        <div>
+                            <span class="eyebrow">HTTP / HTTPS</span>
+                            <h3>普通文件地址预览</h3>
+                        </div>
+                        <button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
+                    </div>
+                    <p>适用于系统已经直接暴露出可下载文件地址的情况。前端只需要编码后打开新窗口。</p>
+                    <div class="code-block">
+                        <code class="language-javascript">var url = 'http://127.0.0.1:8080/file/test.txt';
+window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(base64Encode(url)));</code>
+                    </div>
+                </section>
+
+                <section class="doc-card" id="stream-preview">
+                    <div class="doc-card-header">
+                        <div>
+                            <span class="eyebrow">Streaming</span>
+                            <h3>流式接口预览</h3>
+                        </div>
+                        <button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
+                    </div>
+                    <p>很多业务系统通过 `fileId`、`code` 等参数走统一下载接口，此时原始 URL 没有后缀名，需要额外指定完整文件名。</p>
+                    <div class="code-block">
+                        <code class="language-javascript">var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1';
+var previewUrl = originUrl + '&amp;fullfilename=test.txt';
+window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));</code>
+                    </div>
+                </section>
+
+                <section class="doc-card" id="ftp-preview">
+                    <div class="doc-card-header">
+                        <div>
+                            <span class="eyebrow">FTP</span>
+                            <h3>FTP 资源预览</h3>
+                        </div>
+                        <button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
+                    </div>
+                    <p>FTP 如果允许匿名访问，可以直接预览；如果需要认证，则把连接参数拼到 URL 后面传入。</p>
+                    <div class="code-block">
+                        <code class="language-javascript">// 匿名 FTP
+var url = 'ftp://127.0.0.1/file/test.txt';
+window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(Base64.encode(url)));
+
+// 认证 FTP
+var originUrl = 'ftp://127.0.0.1/file/test.txt';
+var previewUrl = originUrl + '?ftp.control.port=21&amp;ftp.username=admin&amp;ftp.password=123456&amp;ftp.control.encoding=utf8';
+window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));</code>
+                    </div>
+                </section>
+
+                <section class="doc-card" id="basic-auth">
+                    <div class="doc-card-header">
+                        <div>
+                            <span class="eyebrow">Basic Auth</span>
+                            <h3>带 Basic 鉴权的 HTTP 资源</h3>
+                        </div>
+                        <button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
+                    </div>
+                    <p>如果文件源本身需要用户名和密码，可以直接把 Basic 鉴权参数拼到地址中，再交给 kkFileView。</p>
+                    <div class="code-block">
+                        <code class="language-javascript">var originUrl = 'http://127.0.0.1/file/test.txt';
+var previewUrl = originUrl + '?basic.name=admin&amp;basic.pass=123456';
+window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));</code>
+                    </div>
+                </section>
+
+                <section class="doc-card" id="aes-preview">
+                    <div class="doc-card-header">
+                        <div>
+                            <span class="eyebrow">AES</span>
+                            <h3>前后端同秘钥加密接入</h3>
+                        </div>
+                        <button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
+                    </div>
+                    <p>如果不希望明文传递原始文件地址，可以在前端先做 AES 加密，再通过 `encryption=aes` 告知服务端按 AES 方式解密。</p>
+                    <div class="code-block">
+                        <code class="language-javascript">&lt;script src="${baseUrl}js/crypto-js.js"&gt;&lt;/script&gt;
+&lt;script src="${baseUrl}js/aes.js"&gt;&lt;/script&gt;
+
+function aesEncrypt(encryptString, key) {
+  var keyBytes = CryptoJS.enc.Utf8.parse(key);
+  var srcs = CryptoJS.enc.Utf8.parse(encryptString);
+  var encrypted = CryptoJS.AES.encrypt(srcs, keyBytes, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return encrypted.toString();
+}
+
+var key = '1234567890123456';
+var url = 'http://127.0.0.1/file/test.txt';
+window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(aesEncrypt(url, key)) + '&amp;encryption=aes');</code>
+                    </div>
+                </section>
+
+                <section class="doc-card" id="extra-params">
+                    <div class="doc-card-header">
+                        <div>
+                            <span class="eyebrow">Parameters</span>
+                            <h3>常用附加参数</h3>
+                        </div>
+                        <button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
+                    </div>
+                    <p>这些参数都应该在原始 URL 编码完成之后，再附加到预览地址后面。</p>
+                    <ul>
+                        <li>`filePassword`：加密文件的密码。</li>
+                        <li>`page`：指定预览页码。</li>
+                        <li>`highlightall`：关键字高亮。</li>
+                        <li>`watermarkTxt`：动态水印文本。</li>
+                        <li>`forceUpdatedCache=true`：强制刷新缓存。</li>
+                        <li>`kkagent=true`：需要 kkFileView 代理跨域时启用。</li>
+                        <li>`usePasswordCache=true`：开启密码缓存。</li>
+                        <li>`key`：实例启用秘钥后传入访问秘钥。</li>
+                    </ul>
+                    <div class="code-block">
+                        <code class="language-javascript">var url = 'http://127.0.0.1:8080/file/test.txt';
+window.open(
+  '${baseUrl}onlinePreview?url=' +
+  encodeURIComponent(base64Encode(url)) +
+  '&amp;filePassword=123' +
+  '&amp;page=1' +
+  '&amp;highlightall=kkfileview' +
+  '&amp;watermarkTxt=kkfileview' +
+  '&amp;kkagent=false' +
+  '&amp;key=123'
+);</code>
+                    </div>
+                </section>
+            </div>
         </div>
     </div>
 </div>
 
+<script>
+    if (window.hljs) {
+        document.querySelectorAll('.code-block code').forEach(function (block) {
+            hljs.highlightBlock(block);
+        });
+    }
+
+    function copyCode(button) {
+        var code = button.parentNode.parentNode.querySelector('code').innerText;
+        var originalText = button.textContent;
+        navigator.clipboard.writeText(code).then(function () {
+            button.textContent = '已复制';
+            setTimeout(function () {
+                button.textContent = originalText;
+            }, 1500);
+        });
+    }
+</script>
 </body>
 </html>
diff --git a/server/src/main/resources/web/main/record.ftl b/server/src/main/resources/web/main/record.ftl
index dea02c84..d228fa2c 100644
--- a/server/src/main/resources/web/main/record.ftl
+++ b/server/src/main/resources/web/main/record.ftl
@@ -1,23 +1,25 @@
 <!DOCTYPE html>
-
 <html lang="en">
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>kkFileView版本记录</title>
+    <title>kkFileView 版本记录</title>
     <link rel="icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="css/theme.css"/>
+    <link rel="stylesheet" href="css/main-pages.css"/>
     <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
 </head>
 
-<body>
-
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<body class="app-shell">
+<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <div class="navbar-header">
-            <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
+            <a class="navbar-brand" href="https://kkview.cn" target="_blank">kkFileView</a>
         </div>
         <ul class="nav navbar-nav">
             <li><a href="./index">首页</a></li>
@@ -28,498 +30,267 @@
     </div>
 </nav>
 
-<div class="container theme-showcase" role="main">
-    <#--  版本发布记录  -->
-    <div class="page-header">
-        <h1>版本发布记录</h1>
-    </div>
-	   <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2026年01月20日，v5.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                <h4>优化</h4>
-                1. 优化 xlsx 前端解析  <br>
-                2. 优化 图片 解析 <br>
-				3. 优化 tif 解析 <br>
-				4. 优化 svg 解析 <br>
-				5. 优化 json 解析 <br>
-				6. 优化 ftp多客户端接入 <br>
-				7. 优化 首页支持目录访问 采用post 服务端分页 <br>
-				8. 优化 marked 解析 <br>
-			   <h4>新增</h4>
-			    1. 新增 msg 邮件 解析 <br>
-                2. 新增 heic、 heif 图片 解析 <br>
-				3. 新增 跨域方法 <br>
-				4. 新增 高亮方法 <br>
-				5. 新增 页码方法 <br>
-				6. 新增 AES加密方法 <br>
-				7. 新增 Basic 鉴权方法 <br>
-				8. 新增 秘钥方法 <br>
-				9. 新增 防重复转换 <br>
-				10. 新增 异步等待 <br>
-				11. 新增 上传限制不支持的文件禁止上传 <br>
-				12. 新增 cadviewer转换方法<br>
-				13. 新增 pptm<br>
-             <h4>修复</h4>
-                1. 压缩包路径问题 <br>
-                2. 安全问题 <br>
-				3. 图片水印不全问题 <br>
-				4. 修复SSL自签证书接入问题  <br>
-				<h4>更新</h4>
-				 1. jdk强制现在21版本以上 <br>
-			     2. pdf 前端解析<br>
-				 3. odf 前端解析<br>
-				 4. 3D 模型前端解析<br>
-				 5. pdf后端异步转换 多线程等等<br>
-				 6. tif后端异步转换 多线程等等<br>
-				 7. 视频后端异步转换 多线程等等<br>
-				 8. CAD后端异步转换 多线程等等<br>
-                <br>
+<div class="page-shell">
+    <div class="container" role="main">
+        <section class="hero-section release-hero">
+            <div class="hero-copy">
+                <span class="eyebrow">Release Timeline</span>
+                <h1 class="hero-title">版本记录先看重点，再追历史。</h1>
+                <p class="hero-subtitle">
+                    这一版把发布记录拆成“最新摘要 + 年度时间轴 + 历史归档”。先看升级重点，再决定是否继续深入版本细节。
+                </p>
+                <div class="release-badge-row">
+                    <span class="tag highlight">最新版本 v5.0</span>
+                    <span class="tag brand">发布日期 2026-01-20</span>
+                    <span class="tag warn">JDK 21+ 强制要求</span>
+                    <span class="tag">PDF / TIF / CAD 异步化</span>
+                </div>
+                <div class="summary-grid">
+                    <div class="summary-panel">
+                        <strong>13</strong>
+                        <span>v5.0 新增能力条目</span>
+                    </div>
+                    <div class="summary-panel">
+                        <strong>4</strong>
+                        <span>v5.0 修复项，含 SSL 自签证书接入问题</span>
+                    </div>
+                    <div class="summary-panel">
+                        <strong>8</strong>
+                        <span>v5.0 更新项，核心是解析链路和异步转换升级</span>
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
-	
-     <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2025年01月16日，v4.4.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                <h4>优化</h4>
-                1. 优化 OFD 移动端预览 页面不自适应  <br>
-                2. 更新 xlsx 前端解析组件，加速解析速度  <br>
-                3. 升级 CAD 组件  <br>
-                4. office 功能调整，支持批注、转换页码限制、生成水印等功能  <br>
-                5. 升级 markdown 组件  <br>
-                6. 升级 dcm 解析组件  <br>
-                7. 升级 PDF.JS 解析组件  <br>
-                8. 更换视频播放插件为 ckplayer  <br>
-                9. tif 解析更加智能化，支持被修改的图片格式  <br>
-                10. 针对大小文本文件检测字符编码的正确率，处理并发隐患  <br>
-                11. 重构下载文件的代码，新增通用的文件服务器认证访问的设计  <br>
-                12. 更新 bootstrap 组件，并精简掉不需要的文件  <br>
-                13. 更新 epub 版本，优化 epub 显示效果  <br>
-                14. 解决定时清除缓存时，对于多媒体类型文件，只删除了磁盘缓存文件  <br>
-                15. 自动检测已安装 Office 组件，增加 LibreOffice 7.5 & 7.6 版本默认路径  <br>
-                16. 修改 drawio 默认为预览模式  <br>
-                17. 新增 PDF 线程管理、超时管理、内存缓存管理，更新 PDF 解析组件版本  <br>
-                18. 优化 Dockerfile，支持真正的跨平台构建镜像  <br>
-                <br>
-                <h4>新增</h4>
-                1. xlsx 新增支持打印功能  <br>
-                2. 配置文件新增启用 GZIP 压缩  <br>
-                3. CAD 格式新增支持转换成 SVG 和 TIF 格式，新增超时结束、线程管理  <br>
-                4. 新增删除文件使用验证码校验  <br>
-                5. 新增 xbrl 格式预览支持  <br>
-                6. PDF 预览新增控制签名、绘图、插图控制、搜索定位页码、定义显示内容等功能  <br>
-                7. 新增 CSV 格式前端解析支持  <br>
-                8. 新增 ARM64 下的 Docker 镜像支持  <br>
-                9. 新增 Office 预览支持转换超时属性设置功能  <br>
-                10. 新增预览文件 host 黑名单机制  <br>
-                <br>
-                <h4>修复</h4>
-                1. 修复 forceUpdatedCache 属性设置，但本地缓存文件不更新的问题  <br>
-                2. 修复 PDF 解密加密文件转换成功后后台报错的问题  <br>
-                3. 修复 BPMN 不支持跨域的问题  <br>
-                4. 修复压缩包二级反代特殊符号错误问题  <br>
-                5. 修复视频跨域配置导致视频无法预览的问题  <br>
-                6. 修复 TXT 文本类分页二次加载问题  <br>
-                7. 修复 Drawio 缺少 Base64 组件的问题  <br>
-                8. 修复 Markdown 被转义问题  <br>
-                9. 修复 EPUB 跨域报错问题  <br>
-                10. 修复 URL 特殊符号问题  <br>
-                11. 修复压缩包穿越漏洞  <br>
-                12. 修复压缩获取路径错误、图片合集路径错误、水印问题等 BUG  <br>
-                13. 修复前端解析 XLSX 包含 EMF 格式文件错误问题  <br>
+        </section>
+
+        <section class="release-section">
+            <div class="timeline-year">2026</div>
+            <div class="timeline-list">
+                <article class="release-card">
+                    <h3>v5.0</h3>
+                    <div class="release-meta">
+                        <span class="tag brand">2026-01-20</span>
+                        <span class="tag highlight">最新稳定版本</span>
+                        <span class="tag warn">升级需 JDK 21+</span>
+                    </div>
+                    <div class="release-columns">
+                        <div class="release-group">
+                            <h4>优化</h4>
+                            <ul class="release-list">
+                                <li>优化 xlsx、图片、tif、svg、json 解析效果。</li>
+                                <li>优化 FTP 多客户端接入与 marked 解析。</li>
+                                <li>首页支持目录访问，并切换为 POST 服务端分页。</li>
+                            </ul>
+                        </div>
+                        <div class="release-group">
+                            <h4>新增</h4>
+                            <ul class="release-list">
+                                <li>新增 msg、heic/heif、页码、高亮、AES、Basic Auth、秘钥等能力。</li>
+                                <li>新增防重复转换、异步等待、上传限制与 cadviewer 转换方法。</li>
+                                <li>新增 pptm 支持。</li>
+                            </ul>
+                        </div>
+                        <div class="release-group">
+                            <h4>修复</h4>
+                            <ul class="release-list">
+                                <li>修复压缩包路径问题与安全问题。</li>
+                                <li>修复图片水印不完整。</li>
+                                <li>修复 SSL 自签证书接入问题。</li>
+                            </ul>
+                        </div>
+                        <div class="release-group">
+                            <h4>更新</h4>
+                            <ul class="release-list">
+                                <li>JDK 版本要求升级到 21 及以上。</li>
+                                <li>前端解析链路升级：PDF、ODF、3D 模型。</li>
+                                <li>后端异步转换升级：PDF、TIF、视频、CAD。</li>
+                            </ul>
+                        </div>
+                    </div>
+                </article>
             </div>
-        </div>
-    </div>   
-    
-    
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2024年04月15日，v4.4.0-beta版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. ofd修复部分已知问题.优化OFD 移动端预览 页面不自适应 <br>
-                2. 更新xlsx前端解析组件,新增支持打印功能,加速解析速度 <br>
-                3. 修复 forceUpdatedCache 属性设置，但是本地缓存文件不更新缺陷 <br>
-                4. 配置文件新增启用 GZIP压缩 <br>
-                5. 升级CAD组件,CAD格式新增支持 转换成svg tif 格式 新增 超时结束 新增线程管理 <br>
-                6. 删除功能 新增验证码方法 <br>
-                7. office 功能调整 支持批注 转换页码限制 生成水印等等 <br>
-                8. 新增xbrl格式 <br>
-                9. 修复PDF解密加密文件 转换成功后台报错问题 <br>
-                10. 升级markdown组件 修复markdown被转义问题 <br>
-                11. 升级dcm 解析组件 <br>
-                12. 升级PDF.JS解析组件 新增:控制签名/绘图/插图控制方法 <br>
-                13. 更换视频播放插件为ckplayer <br>
-                14. tif解析更加智能化 支持被修改的图片格式 <br>
-                15. 修复bpmn不支持跨域的问题 <br>
-                16. 修复压缩包二级反代特殊符号错误问题 <br>
-                17. 首页新增 搜索 定位页码 定义显示多少内容 <br>
-                18. 修复video跨域配置导致视频无法预览问题 <br>
-                19. 针对大小文本文件检测字符编码的正确率;处理并发隐患 <br>
-                20. 修复txt文本类 分页二次加载问题 <br>
-                21. 新增csv格式前端解析 <br>
-                22. 重构下载文件的代码，新增通用的文件服务器认证访问的设计 <br>
-                23. 更新bootstrap组件 并精简掉不需要的文件 <br>
-                24. 新增arm64下的dockerfile <br>
-                25. 更新epub版本,优化epub显示效果,修复epub 跨域报错问题 <br>
-                26. 修复drawio缺少base64组件的问题 <br>
-                27. 解决定时清除缓存时，对于多媒体类型文件，只删除了磁盘缓存文件 <br>
-                28. 自动检测已安装Office组件增加LibreOffice7.5 & 7.6 版本默认路径  <br>
-                29. 修改drawio默认为预览模式  <br>
-                30. 新增office转换超时属性功能  <br>
-                31. 新增预览文件 host 黑名单机制  <br>
-                32. 修复 url特殊符号问题  <br>
-                33. 其他功能优化及已知问题修复 <br>
+
+            <div class="timeline-year">2025</div>
+            <div class="timeline-list">
+                <article class="release-card">
+                    <h3>v4.4.0</h3>
+                    <div class="release-meta">
+                        <span class="tag brand">2025-01-16</span>
+                        <span class="tag">PDF 线程 / 超时 / 内存管理</span>
+                        <span class="tag">ARM64 Docker</span>
+                    </div>
+                    <div class="release-columns">
+                        <div class="release-group">
+                            <h4>优化</h4>
+                            <ul class="release-list">
+                                <li>升级 xlsx、markdown、dcm、PDF.JS、epub 等前端解析组件。</li>
+                                <li>Office 功能调整，支持批注、页码限制与水印。</li>
+                                <li>自动检测 Office 安装路径，增强 LibreOffice 7.5 / 7.6 兼容。</li>
+                                <li>优化 Dockerfile，支持真正跨平台构建镜像。</li>
+                            </ul>
+                        </div>
+                        <div class="release-group">
+                            <h4>新增</h4>
+                            <ul class="release-list">
+                                <li>新增 xlsx 打印、GZIP 压缩、CSV 前端解析、xbrl 预览。</li>
+                                <li>CAD 支持转换 SVG/TIF，新增超时结束与线程管理。</li>
+                                <li>增加验证码删除、Host 黑名单、Office 转换超时设置。</li>
+                            </ul>
+                        </div>
+                        <div class="release-group">
+                            <h4>修复</h4>
+                            <ul class="release-list">
+                                <li>修复 forceUpdatedCache、本地缓存、PDF 解密、BPMN 跨域等问题。</li>
+                                <li>修复视频跨域、TXT 二次分页、Markdown 转义、EPUB 跨域。</li>
+                                <li>修复压缩包穿越漏洞和多类路径 / 水印问题。</li>
+                            </ul>
+                        </div>
+                        <div class="release-group">
+                            <h4>升级重点</h4>
+                            <ul class="release-list">
+                                <li>PDF 预览新增签名、绘图、插图控制与搜索定位能力。</li>
+                                <li>Drawio 默认改为预览模式。</li>
+                                <li>ckplayer 替换旧视频播放器。</li>
+                            </ul>
+                        </div>
+                    </div>
+                </article>
             </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2023年07月04日，v4.3.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 新增dcm等医疗数位影像预览<br>
-                2. 新增drawio绘图预览<br>
-                3. 新增开启缓存的情况下重新生成的命令 &forceUpdatedCache=true <br>
-                4. 新增dwg CAD文件预览 <br>
-                5. 新增PDF文件支持密码功能 <br>
-                6. 修复反代情况下压缩包获取路径错误 <br>
-                7. 新增PDF文件生成图片的dpi自定义配置 <br>
-                8. 修复预览图片的url中如果包含&会导致.click报错 <br>
-                9. 新增删除转换后OFFICE、CAD、TIFF、压缩包源文件配置 默认开启 节约磁盘空间 <br>
-                10. 调整生成的PDF文件 文件名称添加文件后缀 防止生成同名文件 <br>
-                11. 新增pages格式支持,调整SQL文件预览方式 <br>
-                12. OFD修复部分已知Bug，提高OFD兼容性处理。 <br>
-                13. 新增前端解析xlsx方法。 <br>
-                14. OFD修复部分文字未显示的问题，完善OFD兼容性处理 <br>
-                15. 美化TXT文本 分页框的显示 <br>
-                16. 修复预览压缩包时，如果点击的是文件目录（树节点），页面会报错 <br>
-                17. 升级Linux、Docker版内置office为LibreOffice-7.5.3版本
-                18. 升级Windows内置office为LibreOffice-7.5.3 Portable版本 <br>
-                19. 新增pages,eps, iges , igs, dwt, dng, ifc, dwfx, stl, cf2, plt等格式支持 <br>
-                20. 其他功能优化及已知问题修复 <br>
+
+            <div class="timeline-year">2024</div>
+            <div class="timeline-list">
+                <article class="release-card">
+                    <h3>v4.4.0-beta</h3>
+                    <div class="release-meta">
+                        <span class="tag brand">2024-04-15</span>
+                        <span class="tag">4.4 方向预演</span>
+                    </div>
+                    <div class="release-columns">
+                        <div class="release-group">
+                            <h4>能力铺垫</h4>
+                            <ul class="release-list">
+                                <li>升级 OFD、xlsx、CAD、markdown、dcm、PDF.JS 与 epub 解析组件。</li>
+                                <li>首页开始引入搜索、页码定位与显示内容定义能力。</li>
+                                <li>加入 CSV 前端解析与 Office 转换超时配置。</li>
+                            </ul>
+                        </div>
+                        <div class="release-group">
+                            <h4>安全与稳定</h4>
+                            <ul class="release-list">
+                                <li>修复 forceUpdatedCache、PDF 解密后台报错与 bpmn 跨域问题。</li>
+                                <li>增强视频跨域、压缩包路径、url 特殊符号与多媒体缓存清理逻辑。</li>
+                                <li>加入 Host 黑名单与验证码删除能力。</li>
+                            </ul>
+                        </div>
+                    </div>
+                </article>
             </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2023年04月18日，v4.2.1版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 修复 dwg 等 CAD 类型文件报空指针的 bug<br>
+
+            <div class="timeline-year">历史归档</div>
+            <div class="archive-grid">
+                <article class="archive-item">
+                    <h3>2023-07-04 · v4.3.0</h3>
+                    <ul>
+                        <li>新增 dcm、drawio、dwg、PDF 密码、PDF DPI 自定义和 front-end xlsx 解析。</li>
+                        <li>加入 pages、eps、iges、igs、dwt、dng、ifc、dwfx、stl、cf2、plt 等格式支持。</li>
+                        <li>优化 OFD 兼容性、美化 TXT 分页框，升级 Linux / Windows 内置 LibreOffice 7.5.3。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2023-04-18 · v4.2.1</h3>
+                    <ul>
+                        <li>修复 dwg 等 CAD 类型文件空指针问题。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2023-04-13 · v4.2.0</h3>
+                    <ul>
+                        <li>新增 SVG、加密 Office / 压缩包、xmind、bpmn、eml、epub、3D 模型等预览支持。</li>
+                        <li>新增高风险文件上传限制、站点备案配置、删除文件密码功能。</li>
+                        <li>优化演示页 UI、压缩包目录浏览，修复 XSS、OFD 跨域、OOM 与乱码等问题。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2022-12-14 · v4.1.0</h3>
+                    <ul>
+                        <li>全新首页视觉改版。</li>
+                        <li>tif 多页兼容、Docker 分层构建、加密文件基于 userToken 缓存、升级 LibreOffice 7.3。</li>
+                        <li>感谢社区贡献者 @yl-yue、@wsd7747、@zhangzhen1979 等。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2021-07-06 · v4.0.0</h3>
+                    <ul>
+                        <li>底层集成从 OpenOffice 切换为 LibreOffice。</li>
+                        <li>修复压缩目录穿越、PPT PDF 模式与图片预览异常。</li>
+                        <li>首页上传能力可通过配置动态启停。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2021-06-17 · v3.6.0</h3>
+                    <ul>
+                        <li>新增 OFD 预览与 ffmpeg 视频转码预览支持。</li>
+                        <li>美化 PPT / PPTX 预览效果并升级多个基础依赖。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2021-04-06 · v3.5.1</h3>
+                    <ul>
+                        <li>修复 tif / tiff 初始内存过小导致预览失败。</li>
+                        <li>修复 PDF 预览模式跨域问题。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2021-03-17 · v3.5.0</h3>
+                    <ul>
+                        <li>新增 office-plugin 超时可配置、tiff/tif 预览、高亮代码文件预览和 wps 支持。</li>
+                        <li>升级 Spring Boot 2.4.2，优化项目结构、脚本与下载 IO。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2021-01-28 · v3.3.1</h3>
+                    <ul>
+                        <li>更新 index、markdown、XML、simTxt 等页面 UI 风格。</li>
+                        <li>修复图片、压缩包、多种编码与危险字符相关问题。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2020-12-27 · v3.3.0</h3>
+                    <ul>
+                        <li>大规模架构重构，增强 XML / Markdown 文本预览架构。</li>
+                        <li>切换底层 web server 为 Jetty，引入 cpdetector，Base64 + urlencode 双编码。</li>
+                        <li>Office 组件加载异步化，明显提速应用启动速度。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2020-08-12 · v2.2.1</h3>
+                    <ul>
+                        <li>支持纯文本预览原样输出，升级 pdf.js，优化 Docker 镜像底层。</li>
+                        <li>预览接口同时支持 GET 和 POST。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2020-05-20 · v2.2.0</h3>
+                    <ul>
+                        <li>新增全局水印、CAD 预览、base.url、环境变量配置与站点信任控制。</li>
+                        <li>支持缓存清理 cron、自定义限制 PDF 下载、官网和 Docker 仓库建设。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2019-06-20 / 2019-04-08</h3>
+                    <ul>
+                        <li>支持自动清理缓存、HTTP/HTTPS 下载流 URL、FTP URL 与 Docker 构建。</li>
+                        <li>缓存及队列实现抽象，提供 JDK 与 Redis 两种实现。</li>
+                    </ul>
+                </article>
+                <article class="archive-item">
+                    <h3>2018-01 到 2017-12</h3>
+                    <ul>
+                        <li>项目初始阶段补齐多图预览、压缩包内图片轮播、文本编码修复与 pdf.js 预览链路。</li>
+                        <li>开放 Gitee / GitHub 仓库，逐步打磨 addTask 入队接口与 Redis 队列能力。</li>
+                    </ul>
+                </article>
             </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2023年04月13日，v4.2.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 新增 SVG 格式文件预览支持<br>
-                2. 新增加密的 Office 文件预览支持<br>
-                3. 新增加密的 zip、rar 等压缩包文件预览支持<br>
-                4. 新增 xmind 软件模型文件预览支持<br>
-                5. 新增 bpmn 工作流模型文件预览支持<br>
-                6. 新增 eml 邮件文件预览支持<br>
-                7. 新增 epub 电子书文件预览支持<br>
-                8. 新增 dotm,ett,xlt,xltm,wpt,dot,xlam,xla,dotx 等格式的办公文档预览支持<br>
-                9. 新增 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件预览支持<br>
-                10. 新增可配置限制高风险文件上传的功能，比如 exe 文件<br>
-                11. 新增可配置站点的备案信息<br>
-                12. 新增演示站点删除文件需要密码的功能<br>
-                13. 文本文档预览加入缓存<br>
-                14. 美化 404、500 报错页<br>
-                15. 优化发票等 ofd 文件预览的印证渲染兼容性<br>
-                16. 移除 office-plugin 模块, 使用新版 jodconverter组件<br>
-                17. 优化 Excel 文件的预览效果<br>
-                18. 优化 CAD 文件的预览效果<br>
-                19. 更新 xstream 、junrar、pdfbox 等依赖的版本<br>
-                20. 更新 TIF 文件转换 PDF 的插件，添加转换缓存<br>
-                21. 优化演示页 UI 部署<br>
-                22. 压缩包文件预览支持目录<br>
-                23. 修复部分接口 XSS 问题<br>
-                24. 修复控制台打印的演示地址不跟着 content-path 配置走的问题<br>
-                25. 修复 ofd 文件预览跨域问题<br>
-                26. 修复内部自签证书 https 协议 url 文件无法下载的问题<br>
-                27. 修复特殊符号的文件无法删除的问题<br>
-                28. 修复 PDF 转图片,内存无法回收导致的 OOM<br>
-                29. 修复 xlsx7.4 以上版本文件预览乱码的问题<br>
-                30. 修复 TrustHostFilter 未拦截跨域接口的问题，这是一个安全问题，有使用到 TrustHost 功能的务必升级<br>
-                31. 修复压缩包文件预览在 Linux 系统下文件名乱码的问题<br>
-                32. 修复 ofd 文件预览页码只能显示 10 页的问题<br>
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2022年12月14日，v4.1.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 全新首页视觉 @wsd7747 <br>
-                2. tif图片预览兼容多页tif的pdf转换、jpg转换，以及jpg在线多页预览功能 @zhangzhen1979<br>
-                3. 优化docker构建方案，使用分层构建方式 @yl-yue<br>
-                4. 实现基于userToken缓存加密文件 @yl-yue<br>
-                5. 实现加密word、ppt、excel文件预览 @yl-yue<br>
-                6. Linux & Docker镜像升级LibreOffice 7.3<br>
-                7. 更新OFD预览组件、更新tif预览组件、更新PPT水印支持<br>
-                8. 大量其他升级优化 & 已知问题修复<br>
-                <br>
-                感谢 @yl-yue @wsd7747 @zhangzhen1979 @tomhusky @shenghuadun @kischn.sun 的代码贡献
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2021年7月6日，v4.0.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 底层集成OpenOffice替换为LibreOffice，Office文件兼容性增强，预览效果提升<br>
-                2. 修复压缩文件目录穿越漏洞<br>
-                3. 修复PPT预览使用PDF模式无效<br>
-                4. 修复PPT图片预览模式前端显示异常<br>
-                5. 新增功能：首页文件上传功能可通过配置实时开启或禁用<br>
-                6. 优化增加Office进程关闭日志<br>
-                7. 优化Windows环境下，查找Office组件逻辑(内置的LibreOffice优先)<br>
-                8. 优化启动Office进程改同步执行
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2021年06月17日，v3.6.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                ** ofd 类型文件支持版本，本次版本重要功能均由社区开发贡献，感谢 @gaoxingzaq、@zhangxiaoxiao9527 的代码贡献 ** <br>
-                1. 新增 ofd 类型文件预览支持，ofd 是国产的类似 pdf 格式的文件<br>
-                2. 新增了 ffmpeg 视频文件转码预览支持，打开转码功能后，理论上支持所有主流视频的预览，如 rm、rmvb、flv 等<br>
-                3. 美化了 ppt、pptx 类型文件预览效果，比之前版本好看太多<br>
-                4. 更新了 pdfbox、xstream、common-io 等依赖的版本
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2021年04月06日，v3.5.1版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                3.5.1版本发布，修复已知问题<br>
-                1. 修复 tif、tiff 文件预览初始内存太小预览失败的问题<br>
-                2. 修复PDF预览模式跨域问题<br>
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2021年03月17日，v3.5.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                2021 一季度 v3.5 性能升级版发布<br>
-                1.  新增 office-plugin 转换进程、任务超时可配置<br>
-                2.  更新 spring-boot 到最新的 v2.4.2 版本<br>
-                3.  新增 tiff 、tif 图像文件格式预览支持<br>
-                4.  新增依赖 highlightjs 代码文件预览高亮支持<br>
-                5.  新增 wps 文档预览支持<br>
-                6.  新增 stars 增长趋势图<br>
-                7.  新增启动完成，打印启动耗时、演示页访问地址<br>
-                8.  新增 kkFIleView 的 banner 信息<br>
-                9.  优化启动脚本<br>
-                10. 优化项目结构、优化 maven 结构<br>
-                11. 移除多余的 repositories 配置，移除针对 tomcat 的配置<br>
-                12. 优化下载文件 io 操作<br>
-                13. 修复：优化项目目录结构之后，windows下启动报错“找不到office组件”<br>
-                14. 修复：jodd.io.NetUtil.downloadFile下载大于16M文件报错问题<br>
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2021年1月28日，v3.3.1版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                ** 2020农历年最后一个版本发布，主要包含了部分 UI 改进，和解决了 QQ 群友、 Issue 里反馈的 Bug
-                修复，最最重要的是发个新版，过个好年 **<br>
-                1. 引入galimatias,解决不规范文件名导致文件下载异常<br>
-                2. 更新index接入演示界面UI风格<br>
-                3. 更新markdown文件预览UI风格<br>
-                4. 更新XML文件预览UI风格，调整类文本预览架构，更方便扩展<br>
-                5. 更新simTxT文件预览UI风格<br>
-                6. 调整多图连续预览上下翻图的UI<br>
-                7. 采用apache-common-io包简化所有的文件下载io操作<br>
-                8. XML文件预览支持切换纯文本模式<br>
-                9. 增强url base64解码失败时的提示信息<br>
-                10. 修复导包错误以及图片预览 bug<br>
-                11. 修复发行包运行时找不到日志目录的问题<br>
-                12. 修复压缩包内多图连续预览的bug<br>
-                13. 修复大小写文件类型后缀没通用匹配的问题<br>
-                14. 指定Base64转码采用Apache Commons-code中的实现，修复base64部分jdk版本下出现的异常<br>
-                15. 修复类文本类型HTML文件预览的bug<br>
-                16. 修复：dwg文件预览时无法在jpg和pdf两种类型之间切换<br>
-                17. escaping of dangerous characters to prevent reflected xss<br>
-                18. 修复重复编码导致文档转图片预览失败的问题&编码规范
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2020年12月27日，v3.3.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                ** 2020年年终大版本更新，架构全面设计，代码全面重构，代码质量全面提升，二次开发更便捷，欢迎拉源码品鉴，提issue、pr共同建设
-                **<br>
-                1. 架构模块调整,大量的代码重构，代码质量提升N个等级，欢迎品鉴<br>
-                2. 增强XML文件预览效果，新增XML文档数结构预览<br>
-                3. 新增markdown文件预览支持，预览支持md渲染和源文本切换支持<br>
-                4. 切换底层web server为jetty，解决这个issue：<a href="https://github.com/kekingcn/kkFileView/issues/168">#issues/168</a><br>
-                5. 引入cpdetector，解决文件编码识别问题<br>
-                6. url采用base64+urlencode双编码，彻底解决各种奇葩文件名预览问题<br>
-                7. 新增配置项office.preview.switch.disabled，控制offic文件预览切换开关<br>
-                8. 优化文本类型文件预览逻辑，采用Base64传输内容，避免预览时再次请求文件内容<br>
-                9. office预览图片模式禁用图片放大效果，达到图片和pdf预览效果一致的体验<br>
-                10. 直接代码静态设置pdfbox兼容低版本jdk，在IDEA中运行也不会有警告提示<br>
-                11. 移除guava、hutool等非必须的工具包，减少代码体积<br>
-                12. Office组件加载异步化，提速应用启动速度最快到5秒内<br>
-                13. 合理设置预览消费队列的线程数<br>
-                14. 修复压缩包里文件再次预览失败的bug<br>
-                15. 修复图片预览的bug
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2020年08月12日，v2.2.1版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 支持纯文本预览原样格式输出<br>
-                2. 修复PDF预览出现文字缺失异常，升级pdf.js组件<br>
-                3. docker镜像底层使用ubuntu，镜像体积更小、构建更快<br>
-                4. 预览接口同时支持get和post请求<br>
-                5. 修复上传到demo中的压缩文件预览异常<br>
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2020年05月20日，v2.2.0版本</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 新增支持全局水印，并支持通过参数动态改变水印内容<br>
-                2. 新增支持CAD文件预览<br>
-                3. 新增base.url配置，支持使用nginx反向代理和使用context-path<br>
-                4. 支持所有配置项支持从环境变量里读取，方便Docker镜像部署和集群中大规模使用<br>
-                5. 支持配置限信任站点（只能预览来自信任点的文件源），保护预览服务不被滥用<br>
-                6. 支持配置自定义缓存清理时间（cron表达式）<br>
-                7. 全部能识别的纯文本直接预览，不用再转跳下载，如.md .java .py等<br>
-                8. 支持配置限制转换后的PDF文件下载<br>
-                9. 优化maven打包配置，解决 .sh 脚本可能出现换行符问题<br>
-                10. 将前端所有CDN依赖放到本地，方便没有外网连接的用户使用<br>
-                11. 首页评论服务由搜狐畅言切换到Gitalk<br>
-                12. 修复url中包含特殊字符可能会引起的预览异常<br>
-                13. 修复转换文件队列addTask异常<br>
-                14. 修复其他已经问题<br>
-                15. 官网建设：<a href="https://kkview.cn">https://kkview.cn</a><br>
-                16. 官方Docker镜像仓库建设：<a href="https://hub.docker.com/r/keking/kkfileview">https://hub.docker.com/r/keking/kkfileview</a>
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2019年06月20日</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 支持自动清理缓存及预览文件<br>
-                2. 支持http/https下载流url文件预览<br>
-                3. 支持FTP url文件预览<br>
-                4. 加入Docker构建
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2019年04月08日</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 缓存及队列实现抽象，提供JDK和REDIS两种实现(REDIS成为可选依赖)<br>
-                2. 打包方式提供zip和tar.gz包，并提供一键启动脚本
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2018年01月19日</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 大文件入队提前处理<br>
-                2. 新增addTask文件转换入队接口<br>
-                3. 采用redis队列，支持kkFIleView接口和异构系统入队两种方式
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2018年01月15日</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 首页新增社会化评论框
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2018年01月12日</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 新增多图片同时预览<br>
-                2. 支持压缩包内图片轮番预览
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2018年01月02日</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 修复txt等文本编码问题导致预览乱码<br>
-                2. 修复项目模块依赖引入不到的问题<br>
-                3. 新增spring boot profile，支持多环境配置<br>
-                4. 引入pdf.js预览doc等文件，支持doc标题生成pdf预览菜单，支持手机端预览
-            </div>
-        </div>
-    </div>
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">2017年12月12日</h3>
-        </div>
-        <div class="panel-body">
-            <div>
-                1. 项目gitee开源:<a href="https://gitee.com/kekingcn/file-online-preview" target="_blank">https://gitee.com/kekingcn/file-online-preview</a><br>
-                2. 项目github开源:<a href="https://github.com/kekingcn/kkFileView" target="_blank">https://github.com/kekingcn/kkFileView</a>
-            </div>
-        </div>
+        </section>
     </div>
 </div>
 </body>
diff --git a/server/src/main/resources/web/main/sponsor.ftl b/server/src/main/resources/web/main/sponsor.ftl
index 57e87fe9..8d5570e4 100644
--- a/server/src/main/resources/web/main/sponsor.ftl
+++ b/server/src/main/resources/web/main/sponsor.ftl
@@ -1,24 +1,25 @@
 <!DOCTYPE html>
-
-<html lang="en" xmlns="http://www.w3.org/1999/html">
+<html lang="en">
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>赞助开源</title>
+    <title>kkFileView 赞助开源</title>
     <link rel="icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="css/theme.css"/>
+    <link rel="stylesheet" href="css/main-pages.css"/>
     <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
 </head>
 
-<body>
-
-<!-- Fixed navbar -->
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<body class="app-shell">
+<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <div class="navbar-header">
-            <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
+            <a class="navbar-brand" href="https://kkview.cn" target="_blank">kkFileView</a>
         </div>
         <ul class="nav navbar-nav">
             <li><a href="./index">首页</a></li>
@@ -29,44 +30,97 @@
     </div>
 </nav>
 
-<div class="container theme-showcase" role="main">
-    <#--  接入说明  -->
-    <div class="page-header">
-        <h1>赞助开源</h1>
-        <ul style="font-size: 16px;">
-            <li>kkFileView 开源至今已 6 个年头，积累 <a target="_blank" href="https://gitee.com/kekingcn/file-online-preview">Gitee(16.9K)</a>、<a target="_blank" href="https://github.com/kekingcn/kkFileView">GitHub(8k)</a> 多的 star</li>
-            <li>kkFileView 被广泛应用于金融、教育、银行、政务、计算机等行业, 不完全统计有 200+ 企业在使用</li>
-            <li>kkFileView 每年的文档站点、演示站点的服务器、CDN 资源, 至少在 1000元以上</li>
-            <li>kkFileView 是一款完全开源的在线预览项目，如果你觉得 kkFileView 对你有帮助，可以通过下面的方式来赞助我们，谢谢！</li>
-        </ul>
-    </div>
-    <div>
-        <div style="font-size: 16px; text-align: center;">
-            <img width="400px" height="550px" alt="alipay" src="../images/alipay.jpeg"/> &nbsp;&nbsp;&nbsp;<img width="400px" height="550px" alt="wxpay" src="../images/wxpay.jpeg"/>
+<div class="page-shell">
+    <div class="container" role="main">
+        <section class="hero-section release-hero">
+            <div class="hero-copy">
+                <span class="eyebrow">Sponsor Open Source</span>
+                <h1 class="hero-title">如果这个项目帮你省下了成本，也欢迎反过来帮它继续跑下去。</h1>
+                <p class="hero-subtitle">
+                    kkFileView 已持续维护多年，被广泛用于金融、教育、银行、政务和企业内部系统。
+                    赞助会直接用于文档站、演示站、服务器和 CDN 等基础开销。
+                </p>
+                <div class="summary-grid">
+                    <div class="summary-panel">
+                        <strong>多年维护</strong>
+                        <span>项目长期迭代，持续补格式、补安全、补性能。</span>
+                    </div>
+                    <div class="summary-panel">
+                        <strong>广泛使用</strong>
+                        <span>不完全统计已有 200+ 企业或团队在使用。</span>
+                    </div>
+                    <div class="summary-panel">
+                        <strong>基础成本</strong>
+                        <span>文档站、演示站和 CDN 等年成本至少在千元级。</span>
+                    </div>
+                </div>
+                <div class="note-row">
+                    <span class="tag brand"><a target="_blank" href="https://gitee.com/kekingcn/file-online-preview">Gitee</a></span>
+                    <span class="tag brand"><a target="_blank" href="https://github.com/kekingcn/kkFileView">GitHub</a></span>
+                    <span class="tag highlight">完全开源</span>
+                </div>
+            </div>
+        </section>
+
+        <div class="sponsor-grid">
+            <section class="doc-card">
+                <div class="doc-card-header">
+                    <div>
+                        <span class="eyebrow">Ways To Sponsor</span>
+                        <h3>赞助方式</h3>
+                    </div>
+                </div>
+                <p>如果你觉得 kkFileView 对你有帮助，可以通过下面的方式赞助项目。页面信息会继续保留简洁，但视觉上统一到新的主站风格里。</p>
+                <ul>
+                    <li>kkFileView 开源至今已多年，社区持续反馈并推动演进。</li>
+                    <li>项目 star 与使用规模已经证明它不是“玩具 demo”，而是被真实系统接入的基础能力。</li>
+                    <li>赞助记录为手动录入，存在周级延迟；如有遗漏，可联系作者补录。</li>
+                </ul>
+
+                <div class="donation-wall">
+                    <div class="qr-card">
+                        <h4>支付宝</h4>
+                        <img alt="支付宝赞助码" src="../images/alipay.jpeg"/>
+                    </div>
+                    <div class="qr-card">
+                        <h4>微信支付</h4>
+                        <img alt="微信赞助码" src="../images/wxpay.jpeg"/>
+                    </div>
+                </div>
+            </section>
+
+            <section class="doc-card">
+                <div class="doc-card-header">
+                    <div>
+                        <span class="eyebrow">Sponsor Log</span>
+                        <h3>赞助记录</h3>
+                    </div>
+                    <div class="tags">
+                        <span class="tag">2023-03-14 开启赞助通道</span>
+                    </div>
+                </div>
+                <p>赞助记录为手动维护，如有遗漏，请联系作者补充。</p>
+                <table class="table sponsor-table">
+                    <thead>
+                    <tr>
+                        <th>赞助人</th>
+                        <th>赞助金额</th>
+                        <th>赞助时间</th>
+                        <th>备注</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>陈**</td>
+                        <td class="sponsor-amount">99</td>
+                        <td>2023-03-14</td>
+                        <td>首批赞助记录</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </section>
         </div>
     </div>
-    <div>
-        <h3>赞助记录</h3>
-        2023-03-14 开启赞助通道，赞助记录为手动录入的，存在周级别延迟，如有遗漏，请联系作者补充
-        <br/>
-        <table class="table table-striped table-bordered">
-            <tr>
-                <th>赞助人</th>
-                <th>赞助金额</th>
-                <th>赞助时间</th>
-                <th>备注</th>
-            </tr>
-
-            <tr>
-                <td>陈**</td>
-                <td>99</td>
-                <td>2023-03-14</td>
-                <td></td>
-            </tr>
-
-        </table>
-    </div>
 </div>
-
 </body>
 </html>

From dd6e369e6ad255ff27da563988ce6359f5a53215 Mon Sep 17 00:00:00 2001
From: chenkailing <632104866@qq.com>
Date: Sat, 11 Apr 2026 15:19:26 +0800
Subject: [PATCH 2/2] feat: polish demo portal pages

---
 .../web/controller/IndexController.java       |   5 +
 .../main/resources/static/css/main-pages.css  | 272 +++++++++++++++++-
 .../static/images/hero-icons/excel.svg        |   1 +
 .../static/images/hero-icons/pdf.svg          |   1 +
 .../static/images/hero-icons/powerpoint.svg   |   1 +
 .../static/images/hero-icons/word.svg         |   1 +
 .../src/main/resources/web/main/contact.ftl   | 104 +++++++
 server/src/main/resources/web/main/index.ftl  | 103 +++----
 .../main/resources/web/main/integrated.ftl    |   8 +-
 server/src/main/resources/web/main/record.ftl |  19 +-
 .../src/main/resources/web/main/sponsor.ftl   |   5 +-
 11 files changed, 434 insertions(+), 86 deletions(-)
 create mode 100644 server/src/main/resources/static/images/hero-icons/excel.svg
 create mode 100644 server/src/main/resources/static/images/hero-icons/pdf.svg
 create mode 100644 server/src/main/resources/static/images/hero-icons/powerpoint.svg
 create mode 100644 server/src/main/resources/static/images/hero-icons/word.svg
 create mode 100644 server/src/main/resources/web/main/contact.ftl

diff --git a/server/src/main/java/cn/keking/web/controller/IndexController.java b/server/src/main/java/cn/keking/web/controller/IndexController.java
index c33b235a..b7fbbe24 100644
--- a/server/src/main/java/cn/keking/web/controller/IndexController.java
+++ b/server/src/main/java/cn/keking/web/controller/IndexController.java
@@ -31,6 +31,11 @@ public class IndexController {
         return "/main/integrated";
     }
 
+    @GetMapping( "/contact")
+    public String go2Contact(){
+        return "/main/contact";
+    }
+
     @GetMapping( "/")
     public String root() {
         return "/main/index";
diff --git a/server/src/main/resources/static/css/main-pages.css b/server/src/main/resources/static/css/main-pages.css
index 2fdfbdb2..f44653b9 100644
--- a/server/src/main/resources/static/css/main-pages.css
+++ b/server/src/main/resources/static/css/main-pages.css
@@ -120,7 +120,7 @@ a:focus {
 }
 
 .page-shell {
-    padding: 118px 0 64px;
+    padding: 72px 0 64px;
 }
 
 .section-heading {
@@ -221,7 +221,7 @@ a:focus {
 
 .hero-title {
     margin: 20px 0 16px;
-    font-size: clamp(26px, 2.8vw, 40px);
+    font-size: clamp(24px, 2.4vw, 36px);
     line-height: 1.08;
     letter-spacing: -0.045em;
 }
@@ -234,6 +234,12 @@ a:focus {
     line-height: 1.8;
 }
 
+.hero-subtitle-inline {
+    max-width: none;
+    white-space: nowrap;
+    display: inline-block;
+}
+
 .hero-stats,
 .hero-actions,
 .feature-grid,
@@ -269,7 +275,11 @@ a:focus {
 }
 
 .hero-actions {
-    grid-template-columns: repeat(2, minmax(0, max-content));
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 12px;
+    overflow-x: auto;
+    padding-bottom: 4px;
 }
 
 .hero-link {
@@ -303,6 +313,147 @@ a:focus {
     padding: 28px;
 }
 
+.home-hero-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
+    gap: 28px;
+    align-items: start;
+}
+
+.home-hero-copy .hero-subtitle {
+    max-width: 700px;
+}
+
+.home-hero-side {
+    display: flex;
+    justify-content: center;
+    transform: translateY(-10px);
+}
+
+.doc-stack {
+    position: relative;
+    height: 246px;
+    width: 100%;
+    max-width: 304px;
+}
+
+.doc-sheet {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 136px;
+    height: 174px;
+    padding: 14px 14px 12px;
+    border-radius: 24px;
+    border: 1px solid rgba(17, 19, 21, 0.1);
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 22px 40px rgba(17, 19, 21, 0.12);
+    overflow: hidden;
+}
+
+.doc-sheet img {
+    width: 38px;
+    height: 38px;
+}
+
+.doc-sheet::after {
+    content: "";
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    top: 64px;
+    bottom: 46px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M2 18 C20 8 40 28 60 18 S100 28 118 18' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 42 C20 32 40 52 60 42 S100 52 118 42' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 66 C20 56 40 76 60 66 S100 76 118 66' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 90 C20 80 40 100 60 90 S100 100 118 90' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 118% 100%;
+    opacity: 0.9;
+    pointer-events: none;
+}
+
+.doc-sheet img,
+.doc-sheet span {
+    position: relative;
+    z-index: 1;
+}
+
+.doc-sheet span {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: rgba(17, 19, 21, 0.06);
+    color: var(--text);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+}
+
+.sheet-word {
+    top: 16px;
+    left: 12px;
+    transform: rotate(-10deg);
+    z-index: 1;
+}
+
+.sheet-excel {
+    top: 68px;
+    left: 88px;
+    transform: rotate(-2deg);
+    z-index: 2;
+}
+
+.sheet-powerpoint {
+    top: 8px;
+    right: 10px;
+    transform: rotate(9deg);
+    z-index: 3;
+}
+
+.sheet-pdf {
+    top: 94px;
+    right: 48px;
+    transform: rotate(4deg);
+    z-index: 4;
+}
+
+.contact-hero-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr);
+    gap: 44px;
+    align-items: start;
+}
+
+.contact-hero-copy .hero-title,
+.contact-hero-copy .hero-subtitle {
+    max-width: none;
+}
+
+.contact-hero-side {
+    justify-self: end;
+    width: 100%;
+    max-width: 360px;
+    padding-top: 26px;
+}
+
+.support-summary {
+    display: grid;
+    gap: 14px;
+    width: 100%;
+}
+
+.support-summary-item {
+    padding: 0;
+}
+
+.support-summary-item p {
+    margin: 12px 0 0;
+    color: var(--text-muted);
+    line-height: 1.7;
+}
+
 .hero-card h3,
 .workspace-card h3,
 .doc-card h3,
@@ -380,16 +531,39 @@ a:focus {
 }
 
 .preview-url {
+    display: flex;
+    align-items: center;
+    gap: 12px;
     margin-bottom: 14px;
 }
 
+.preview-url .form-control {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.preview-url .preview-submit {
+    flex: 0 0 168px;
+}
+
+.preview-options {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 14px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+}
+
 .preview-grid {
     display: flex;
     flex-wrap: nowrap;
     gap: 12px;
-    margin-bottom: 14px;
-    overflow-x: auto;
-    padding-bottom: 4px;
+    margin-bottom: 0;
+    overflow: visible;
+    padding-bottom: 0;
+    flex: 1 1 auto;
+    min-width: 620px;
 }
 
 .preview-grid .form-control {
@@ -399,9 +573,12 @@ a:focus {
 
 .preview-switches {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: 10px;
-    margin-bottom: 14px;
+    margin-bottom: 0;
+    overflow: visible;
+    padding-bottom: 0;
+    flex: 0 0 auto;
 }
 
 .preview-switches label {
@@ -414,6 +591,7 @@ a:focus {
     background: rgba(255, 255, 255, 0.76);
     border: 1px solid rgba(17, 19, 21, 0.08);
     font-weight: 600;
+    white-space: nowrap;
 }
 
 .preview-switches input {
@@ -441,8 +619,8 @@ a:focus {
 }
 
 .preview-submit {
-    width: 100%;
-    min-height: 52px;
+    width: 168px;
+    min-height: 48px;
 }
 
 .feature-section,
@@ -452,6 +630,16 @@ a:focus {
     margin-top: 34px;
 }
 
+.workspace-section .section-heading h2 {
+    font-size: 24px;
+    line-height: 1.15;
+}
+
+.feature-section .section-heading h2 {
+    font-size: 24px;
+    line-height: 1.15;
+}
+
 .feature-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -1031,10 +1219,13 @@ a:focus {
 
 @media (max-width: 1080px) {
     .hero-grid,
+    .home-hero-layout,
+    .contact-hero-layout,
     .docs-layout,
     .toolbar-grid,
     .release-columns,
-    .source-grid {
+    .source-grid,
+    .preview-options {
         grid-template-columns: 1fr;
     }
 
@@ -1042,6 +1233,31 @@ a:focus {
         position: static;
     }
 
+    .contact-hero-side {
+        padding-top: 0;
+    }
+
+    .home-hero-side {
+        justify-content: flex-start;
+    }
+
+    .doc-stack {
+        height: auto;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 14px;
+    }
+
+    .doc-sheet {
+        position: relative;
+        top: auto;
+        right: auto;
+        left: auto;
+        width: 100%;
+        height: 180px;
+        transform: none;
+    }
+
     .hero-stats,
     .feature-grid,
     .summary-grid,
@@ -1073,7 +1289,11 @@ a:focus {
     }
 
     .hero-title {
-        font-size: 24px;
+        font-size: 22px;
+    }
+
+    .hero-subtitle-inline {
+        white-space: normal;
     }
 
     .hero-stats,
@@ -1086,10 +1306,36 @@ a:focus {
 
     .preview-grid {
         flex-wrap: wrap;
+        min-width: 0;
+        overflow-x: visible;
+    }
+
+    .preview-options {
+        display: block;
+        overflow-x: visible;
+        padding-bottom: 0;
+    }
+
+    .preview-url {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .preview-url .preview-submit {
+        flex: 0 0 auto;
+    }
+
+    .preview-switches {
+        flex-wrap: wrap;
+        overflow-x: visible;
+        padding-bottom: 0;
+        margin-bottom: 14px;
     }
 
     .hero-actions {
-        grid-template-columns: 1fr;
+        flex-wrap: wrap;
+        overflow-x: visible;
+        padding-bottom: 0;
     }
 
     .workspace-header,
diff --git a/server/src/main/resources/static/images/hero-icons/excel.svg b/server/src/main/resources/static/images/hero-icons/excel.svg
new file mode 100644
index 00000000..9fc655db
--- /dev/null
+++ b/server/src/main/resources/static/images/hero-icons/excel.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Excel</title><path d="M23 1.5q.41 0 .7.3.3.29.3.7v19q0 .41-.3.7-.29.3-.7.3H7q-.41 0-.7-.3-.3-.29-.3-.7V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h5V2.5q0-.41.3-.7.29-.3.7-.3zM6 13.28l1.42 2.66h2.14l-2.38-3.87 2.34-3.8H7.46l-1.3 2.4-.05.08-.04.09-.64-1.28-.66-1.29H2.59l2.27 3.82-2.48 3.85h2.16zM14.25 21v-3H7.5v3zm0-4.5v-3.75H12v3.75zm0-5.25V7.5H12v3.75zm0-5.25V3H7.5v3zm8.25 15v-3h-6.75v3zm0-4.5v-3.75h-6.75v3.75zm0-5.25V7.5h-6.75v3.75zm0-5.25V3h-6.75v3Z"/></svg>
\ No newline at end of file
diff --git a/server/src/main/resources/static/images/hero-icons/pdf.svg b/server/src/main/resources/static/images/hero-icons/pdf.svg
new file mode 100644
index 00000000..2b0b1138
--- /dev/null
+++ b/server/src/main/resources/static/images/hero-icons/pdf.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Adobe Acrobat Reader</title><path d="M23.63 15.3c-.71-.745-2.166-1.17-4.224-1.17-1.1 0-2.377.106-3.761.354a19.443 19.443 0 0 1-2.307-2.661c-.532-.71-.994-1.49-1.42-2.236.817-2.484 1.207-4.507 1.207-5.962 0-1.632-.603-3.336-2.342-3.336-.532 0-1.065.32-1.349.781-.78 1.384-.425 4.4.923 7.381a60.277 60.277 0 0 1-1.703 4.507c-.568 1.349-1.207 2.733-1.917 4.01C2.834 18.53.314 20.34.03 21.758c-.106.533.071 1.03.462 1.42.142.107.639.533 1.49.533 2.59 0 5.323-4.188 6.707-6.707 1.065-.355 2.13-.71 3.194-.994a34.963 34.963 0 0 1 3.407-.745c2.732 2.448 5.145 2.839 6.352 2.839 1.49 0 2.023-.604 2.2-1.1.32-.64.106-1.349-.213-1.704zm-1.42 1.03c-.107.532-.64.887-1.384.887-.213 0-.39-.036-.604-.071-1.348-.32-2.626-.994-3.903-2.059a17.717 17.717 0 0 1 2.98-.248c.746 0 1.385.035 1.81.142.497.106 1.278.426 1.1 1.348zm-7.524-1.668a38.01 38.01 0 0 0-2.945.674 39.68 39.68 0 0 0-2.52.745 40.05 40.05 0 0 0 1.207-2.555c.426-.994.78-2.023 1.136-2.981.354.603.745 1.207 1.135 1.739a50.127 50.127 0 0 0 1.987 2.378zM10.038 1.46a.768.768 0 0 1 .674-.425c.745 0 .887.851.887 1.526 0 1.135-.355 2.874-.958 4.861-1.03-2.768-1.1-5.074-.603-5.962zM6.134 17.997c-1.81 2.981-3.549 4.826-4.613 4.826a.872.872 0 0 1-.532-.177c-.213-.213-.32-.461-.249-.745.213-1.065 2.271-2.555 5.394-3.904Z"/></svg>
\ No newline at end of file
diff --git a/server/src/main/resources/static/images/hero-icons/powerpoint.svg b/server/src/main/resources/static/images/hero-icons/powerpoint.svg
new file mode 100644
index 00000000..294fbee3
--- /dev/null
+++ b/server/src/main/resources/static/images/hero-icons/powerpoint.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft PowerPoint</title><path d="M13.5 1.5q1.453 0 2.795.375 1.342.375 2.508 1.06 1.166.686 2.12 1.641.956.955 1.641 2.121.686 1.166 1.061 2.508Q24 10.547 24 12q0 1.453-.375 2.795-.375 1.342-1.06 2.508-.686 1.166-1.641 2.12-.955.956-2.121 1.641-1.166.686-2.508 1.061-1.342.375-2.795.375-1.29 0-2.52-.305-1.23-.304-2.337-.884-1.108-.58-2.063-1.418-.955-.838-1.693-1.893H.997q-.411 0-.704-.293T0 17.004V6.996q0-.41.293-.703T.996 6h3.89q.739-1.055 1.694-1.893.955-.837 2.063-1.418 1.107-.58 2.337-.884Q12.21 1.5 13.5 1.5zm.75 1.535v8.215h8.215q-.14-1.64-.826-3.076-.686-1.436-1.782-2.531-1.095-1.096-2.537-1.782-1.441-.685-3.07-.826zm-5.262 7.57q0-.68-.228-1.166-.229-.486-.627-.79-.399-.305-.938-.446-.539-.14-1.172-.14H2.848v7.863h1.84v-2.742H5.93q.574 0 1.119-.17t.978-.493q.434-.322.698-.802.263-.48.263-1.114zM13.5 21q1.172 0 2.262-.287t2.056-.82q.967-.534 1.776-1.278.808-.744 1.418-1.664.61-.92.984-1.986.375-1.067.469-2.227h-9.703V3.035q-1.735.14-3.27.908T6.797 6h4.207q.41 0 .703.293t.293.703v10.008q0 .41-.293.703t-.703.293H6.797q.644.715 1.412 1.271.768.557 1.623.944.855.387 1.781.586Q12.54 21 13.5 21zM5.812 9.598q.575 0 .915.228.34.229.34.838 0 .27-.124.44-.123.17-.31.275-.188.105-.422.146-.234.041-.445.041H4.687V9.598Z"/></svg>
\ No newline at end of file
diff --git a/server/src/main/resources/static/images/hero-icons/word.svg b/server/src/main/resources/static/images/hero-icons/word.svg
new file mode 100644
index 00000000..2838d910
--- /dev/null
+++ b/server/src/main/resources/static/images/hero-icons/word.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Word</title><path d="M23.004 1.5q.41 0 .703.293t.293.703v19.008q0 .41-.293.703t-.703.293H6.996q-.41 0-.703-.293T6 21.504V18H.996q-.41 0-.703-.293T0 17.004V6.996q0-.41.293-.703T.996 6H6V2.496q0-.41.293-.703t.703-.293zM6.035 11.203l1.442 4.735h1.64l1.57-7.876H9.036l-.937 4.653-1.325-4.5H5.38l-1.406 4.523-.938-4.675H1.312l1.57 7.874h1.641zM22.5 21v-3h-15v3zm0-4.5v-3.75H12v3.75zm0-5.25V7.5H12v3.75zm0-5.25V3h-15v3Z"/></svg>
\ No newline at end of file
diff --git a/server/src/main/resources/web/main/contact.ftl b/server/src/main/resources/web/main/contact.ftl
new file mode 100644
index 00000000..4c201c82
--- /dev/null
+++ b/server/src/main/resources/web/main/contact.ftl
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>kkFileView 技术支持</title>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="css/theme.css"/>
+    <link rel="stylesheet" href="css/main-pages.css"/>
+    <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
+    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
+</head>
+
+<body class="app-shell">
+<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
+    <div class="container">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="https://kkview.cn" target="_blank">kkFileView</a>
+        </div>
+        <ul class="nav navbar-nav">
+            <li><a href="./index">首页</a></li>
+            <li><a href="./integrated">接入说明</a></li>
+            <li><a href="./record">版本发布记录</a></li>
+            <li><a href="./sponsor">赞助开源</a></li>
+            <li class="active"><a href="./contact">技术支持</a></li>
+        </ul>
+    </div>
+</nav>
+
+<div class="page-shell">
+    <div class="container" role="main">
+        <section class="hero-section release-hero">
+            <div class="hero-copy">
+                <div class="contact-hero-layout">
+                    <div class="contact-hero-copy">
+                    <span class="eyebrow">Contact Us</span>
+                <h1 class="hero-title">技术支持</h1>
+                    <p class="hero-subtitle">
+                        如果你在部署、安装、接入或日常使用 kkFileView 时需要更直接的支持，
+                        可以加入我们的付费知识星球，获取安装使用技术支持。
+                    </p>
+                    <div class="hero-actions">
+                        <a class="hero-link primary" href="https://wx.zsxq.com/group/48844125114258" target="_blank">加入知识星球</a>
+                        <a class="hero-link secondary" href="./integrated">查看接入说明</a>
+                    </div>
+                    </div>
+                    <div class="contact-hero-side">
+                    <div class="support-summary">
+                        <div class="support-summary-item">
+                            <span class="tag brand">安装支持</span>
+                            <p>提供最新的安装发行包，公示安全补丁等。</p>
+                        </div>
+                        <div class="support-summary-item">
+                            <span class="tag">使用咨询</span>
+                            <p>围绕接入、配置和日常使用问题提供支持。</p>
+                        </div>
+                        <div class="support-summary-item">
+                            <span class="tag highlight">付费知识星球</span>
+                            <p>通过知识星球联系，我们提供更直接的技术支持。</p>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div class="sponsor-grid">
+            <section class="doc-card">
+                <div class="doc-card-header">
+                    <div>
+                        <span class="eyebrow">Support Scope</span>
+                        <h3>支持内容</h3>
+                    </div>
+                </div>
+                <p>如果你希望更快完成部署和落地，可以通过知识星球联系我们，获得更直接的安装使用支持。</p>
+                <ul>
+                    <li>安装部署相关问题。</li>
+                    <li>配置、接入和常见使用问题。</li>
+                    <li>围绕实际使用场景的排查与建议。</li>
+                </ul>
+            </section>
+
+            <section class="doc-card">
+                <div class="doc-card-header">
+                    <div>
+                        <span class="eyebrow">Knowledge Planet</span>
+                        <h3>加入方式</h3>
+                    </div>
+                </div>
+                <p>知识星球地址：</p>
+                <p><a href="https://wx.zsxq.com/group/48844125114258" target="_blank">https://wx.zsxq.com/group/48844125114258</a></p>
+                <div class="note-row">
+                    <span class="tag brand"><a href="https://wx.zsxq.com/group/48844125114258" target="_blank">立即加入</a></span>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/server/src/main/resources/web/main/index.ftl b/server/src/main/resources/web/main/index.ftl
index fc9ecedf..71e3eb49 100644
--- a/server/src/main/resources/web/main/index.ftl
+++ b/server/src/main/resources/web/main/index.ftl
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
     <link rel="stylesheet" href="css/theme.css"/>
-    <link rel="stylesheet" href="css/main-pages.css"/>
+    <link rel="stylesheet" href="css/main-pages.css?v=v1-polish-20260411-3"/>
     <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
     <script type="text/javascript" src="js/jquery.form.min.js"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
@@ -75,6 +75,7 @@
             <li><a href="./integrated">接入说明</a></li>
             <li><a href="./record">版本发布记录</a></li>
             <li><a href="./sponsor">赞助开源</a></li>
+            <li><a href="./contact">技术支持</a></li>
         </ul>
     </div>
 </nav>
@@ -84,33 +85,40 @@
         <section class="hero-section">
             <div class="hero-grid single">
                 <div class="hero-copy">
+                    <div class="home-hero-layout">
+                        <div class="home-hero-copy">
                     <span class="eyebrow">Preview Engine / Demo Portal</span>
-                    <h1 class="hero-title">把文件预览接进业务系统，像接一个 URL 一样直接。</h1>
+                <h1 class="hero-title">开源的万能文件预览系统</h1>
                     <p class="hero-subtitle">
-                        kkFileView 把文档、图片、CAD、3D、压缩包和音视频预览收敛成一套统一入口。
-                        这版演示页把“URL 预览”和“本地文件预览”并入同一个工作台，避免同类操作被拆成两段。
+                        kkFileView 提供统一的文件预览入口，覆盖 5 大文件族群、70+ 常见文件类型，支持文件链接预览、上传文件预览，以及业务系统里的常见接入方式。
                     </p>
-                    <div class="hero-stats">
-                        <div class="stat-chip">
-                            <strong>20+</strong>
-                            <span>文件族群覆盖</span>
-                        </div>
-                        <div class="stat-chip">
-                            <strong>JDK 21+</strong>
-                            <span>当前推荐运行环境</span>
-                        </div>
-                        <div class="stat-chip">
-                            <strong>API</strong>
-                            <span>URL 直连式接入</span>
-                        </div>
-                        <div class="stat-chip">
-                            <strong>Demo Lab</strong>
-                            <span>本地上传与目录试跑</span>
-                        </div>
-                    </div>
                     <div class="hero-actions">
                         <a class="hero-link primary" href="#demo-lab">开始体验</a>
                         <a class="hero-link secondary" href="./integrated">查看接入说明</a>
+                        <a class="hero-link secondary" href="./record">版本发布记录</a>
+                        <a class="hero-link secondary" href="./sponsor">赞助开源</a>
+                    </div>
+                        </div>
+                        <div class="home-hero-side">
+                    <div class="doc-stack" aria-hidden="true">
+                        <div class="doc-sheet sheet-word">
+                            <img src="images/hero-icons/word.svg" alt="Word">
+                            <span>DOCX</span>
+                        </div>
+                        <div class="doc-sheet sheet-excel">
+                            <img src="images/hero-icons/excel.svg" alt="Excel">
+                            <span>XLSX</span>
+                        </div>
+                        <div class="doc-sheet sheet-powerpoint">
+                            <img src="images/hero-icons/powerpoint.svg" alt="PowerPoint">
+                            <span>PPTX</span>
+                        </div>
+                        <div class="doc-sheet sheet-pdf">
+                            <img src="images/hero-icons/pdf.svg" alt="PDF">
+                            <span>PDF</span>
+                        </div>
+                    </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -120,11 +128,11 @@
             <div class="section-heading">
                 <div>
                     <span class="eyebrow">Capability Map</span>
-                    <h2>能力不止是“能打开”，而是覆盖业务里真正常见的文件流。</h2>
+                    <h2>支持丰富的文件类型预览</h2>
                 </div>
                 <p>
-                    我们把原来首页的长列表改成分类卡片，方便先扫边界，再判断适不适合接入你的系统。
-                    如果你有新增格式建议，欢迎到开源社区继续补充。
+                    你可以先快速扫一遍支持范围，再判断它是否适合接入你的业务系统。
+                    如果你有新增格式建议，也欢迎继续到开源社区补充。
                 </p>
             </div>
             <div class="feature-grid">
@@ -196,7 +204,7 @@
                 <div class="workspace-header">
                     <div>
                         <span class="eyebrow">Demo Lab</span>
-                        <h3>本地文件工作台</h3>
+                        <h3>文件链接预览</h3>
                         <p>这里统一承接两种预览来源：直接输入 URL，或者从本地文件目录里选择文件。参数和操作入口都尽量收在一起。</p>
                     </div>
                     <div class="note-row">
@@ -211,14 +219,6 @@
                     <div class="source-card">
                         <h4>输入 URL 直接试跑</h4>
                         <p>贴入文件地址，按需叠加页码、高亮、水印、AES 和跨域参数，直接在新窗口验证最终预览行为。</p>
-                        <div class="note-row">
-                            <span class="tag brand">URL 即入口</span>
-                            <span class="tag highlight">AES 可选</span>
-                            <span class="tag">页码 / 水印 / 高亮</span>
-                            <#if "${kkkey}" != "false" >
-                                <span class="tag warn">当前实例启用了访问秘钥</span>
-                            </#if>
-                        </div>
                         <#if "${kkkey}" != "false" >
                             <p>
                                 程序已启用秘钥访问。
@@ -232,24 +232,26 @@
                         <div class="preview-panel">
                             <form action="${baseUrl}onlinePreview" target="_blank" id="previewByUrl">
                                 <input type="hidden" name="url"/>
+                                <div class="preview-options">
+                                    <div class="preview-switches">
+                                        <label><input type="checkbox" name="forceUpdatedCache" value="true"/> 更新缓存</label>
+                                        <label><input type="checkbox" name="kkagent" value="true"/> 跨域代理</label>
+                                        <label><input type="checkbox" id="encryption" name="encryption" value="aes"/> AES 加密</label>
+                                    </div>
+                                    <div class="preview-grid">
+                                        <input type="text" id="filePassword" name="filePassword" class="form-control" placeholder="文件密码"/>
+                                        <input type="text" id="page" name="page" class="form-control" placeholder="页码"/>
+                                        <input type="text" id="highlightall" name="highlightall" class="form-control" placeholder="高亮关键字"/>
+                                        <input type="text" id="watermarkTxt" name="watermarkTxt" class="form-control" placeholder="水印文本"/>
+                                        <#if isshowkey>
+                                            <input type="text" id="kkkey" name="key" class="form-control" placeholder="KK 秘钥"/>
+                                        </#if>
+                                    </div>
+                                </div>
                                 <div class="preview-url">
                                     <input type="text" id="_url" class="form-control" placeholder="请输入预览文件 URL，例如 https://example.com/demo.pdf"/>
+                                    <input type="submit" value="立即预览" class="preview-submit">
                                 </div>
-                                <div class="preview-switches">
-                                    <label><input type="checkbox" name="forceUpdatedCache" value="true"/> 更新缓存</label>
-                                    <label><input type="checkbox" name="kkagent" value="true"/> 跨域代理</label>
-                                    <label><input type="checkbox" id="encryption" name="encryption" value="aes"/> AES 加密</label>
-                                </div>
-                                <div class="preview-grid">
-                                    <input type="text" id="filePassword" name="filePassword" class="form-control" placeholder="文件密码"/>
-                                    <input type="text" id="page" name="page" class="form-control" placeholder="页码"/>
-                                    <input type="text" id="highlightall" name="highlightall" class="form-control" placeholder="高亮关键字"/>
-                                    <input type="text" id="watermarkTxt" name="watermarkTxt" class="form-control" placeholder="水印文本"/>
-                                    <#if isshowkey>
-                                        <input type="text" id="kkkey" name="key" class="form-control" placeholder="KK 秘钥"/>
-                                    </#if>
-                                </div>
-                                <input type="submit" value="立即预览" class="preview-submit">
                             </form>
                             <div class="alert alert-danger alert-dismissable hide" role="alert" id="previewCheckAlert">
                                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
@@ -264,9 +266,8 @@
                 <div class="section-heading">
                     <div>
                         <span class="eyebrow">Local Source</span>
-                        <h2>本地文件与目录预览</h2>
+                        <h2>上传文件预览</h2>
                     </div>
-                    <p>上传文件、创建目录、按文件名搜索，然后直接从下面的文件表格里发起预览。这样本地入口和结果列表会贴在一起。</p>
                 </div>
 
                 <div class="toolbar-grid">
diff --git a/server/src/main/resources/web/main/integrated.ftl b/server/src/main/resources/web/main/integrated.ftl
index f32e9573..0231bb8e 100644
--- a/server/src/main/resources/web/main/integrated.ftl
+++ b/server/src/main/resources/web/main/integrated.ftl
@@ -27,6 +27,7 @@
             <li class="active"><a href="./integrated">接入说明</a></li>
             <li><a href="./record">版本发布记录</a></li>
             <li><a href="./sponsor">赞助开源</a></li>
+            <li><a href="./contact">技术支持</a></li>
         </ul>
     </div>
 </nav>
@@ -36,10 +37,9 @@
         <section class="hero-section release-hero">
             <div class="hero-copy">
                 <span class="eyebrow">Integration Guide</span>
-                <h1 class="hero-title">5 分钟把 kkFileView 接进你的前端项目。</h1>
-                <p class="hero-subtitle">
-                    这页不再把所有方案平铺成一长段，而是按场景拆成独立卡片。
-                    默认假设服务地址为 <span class="text-highlight">${baseUrl}</span>。
+                <h1 class="hero-title">5 分钟把 kkFileView 接进你的业务项目。</h1>
+                <p class="hero-subtitle hero-subtitle-inline">
+                    这里按常见接入场景提供示例，方便你直接按需选用。默认假设服务地址为 <span class="text-highlight">${baseUrl}</span>。
                 </p>
                 <div class="note-row">
                     <span class="tag brand">HTTP / HTTPS</span>
diff --git a/server/src/main/resources/web/main/record.ftl b/server/src/main/resources/web/main/record.ftl
index d228fa2c..8dc9b2e2 100644
--- a/server/src/main/resources/web/main/record.ftl
+++ b/server/src/main/resources/web/main/record.ftl
@@ -26,6 +26,7 @@
             <li><a href="./integrated">接入说明</a></li>
             <li class="active"><a href="./record">版本发布记录</a></li>
             <li><a href="./sponsor">赞助开源</a></li>
+            <li><a href="./contact">技术支持</a></li>
         </ul>
     </div>
 </nav>
@@ -35,9 +36,9 @@
         <section class="hero-section release-hero">
             <div class="hero-copy">
                 <span class="eyebrow">Release Timeline</span>
-                <h1 class="hero-title">版本记录先看重点，再追历史。</h1>
+                <h1 class="hero-title">版本发布记录</h1>
                 <p class="hero-subtitle">
-                    这一版把发布记录拆成“最新摘要 + 年度时间轴 + 历史归档”。先看升级重点，再决定是否继续深入版本细节。
+                    你可以先看最新版本的升级重点，再顺着时间轴继续了解历史版本细节。
                 </p>
                 <div class="release-badge-row">
                     <span class="tag highlight">最新版本 v5.0</span>
@@ -45,20 +46,6 @@
                     <span class="tag warn">JDK 21+ 强制要求</span>
                     <span class="tag">PDF / TIF / CAD 异步化</span>
                 </div>
-                <div class="summary-grid">
-                    <div class="summary-panel">
-                        <strong>13</strong>
-                        <span>v5.0 新增能力条目</span>
-                    </div>
-                    <div class="summary-panel">
-                        <strong>4</strong>
-                        <span>v5.0 修复项，含 SSL 自签证书接入问题</span>
-                    </div>
-                    <div class="summary-panel">
-                        <strong>8</strong>
-                        <span>v5.0 更新项，核心是解析链路和异步转换升级</span>
-                    </div>
-                </div>
             </div>
         </section>
 
diff --git a/server/src/main/resources/web/main/sponsor.ftl b/server/src/main/resources/web/main/sponsor.ftl
index 8d5570e4..f0d3b029 100644
--- a/server/src/main/resources/web/main/sponsor.ftl
+++ b/server/src/main/resources/web/main/sponsor.ftl
@@ -26,6 +26,7 @@
             <li><a href="./integrated">接入说明</a></li>
             <li><a href="./record">版本发布记录</a></li>
             <li class="active"><a href="./sponsor">赞助开源</a></li>
+            <li><a href="./contact">技术支持</a></li>
         </ul>
     </div>
 </nav>
@@ -35,7 +36,7 @@
         <section class="hero-section release-hero">
             <div class="hero-copy">
                 <span class="eyebrow">Sponsor Open Source</span>
-                <h1 class="hero-title">如果这个项目帮你省下了成本，也欢迎反过来帮它继续跑下去。</h1>
+                <h1 class="hero-title">赞助开源</h1>
                 <p class="hero-subtitle">
                     kkFileView 已持续维护多年，被广泛用于金融、教育、银行、政务和企业内部系统。
                     赞助会直接用于文档站、演示站、服务器和 CDN 等基础开销。
@@ -70,7 +71,7 @@
                         <h3>赞助方式</h3>
                     </div>
                 </div>
-                <p>如果你觉得 kkFileView 对你有帮助，可以通过下面的方式赞助项目。页面信息会继续保留简洁，但视觉上统一到新的主站风格里。</p>
+                <p>如果你觉得 kkFileView 对你有帮助，可以通过下面的方式赞助项目，支持它继续长期维护。</p>
                 <ul>
                     <li>kkFileView 开源至今已多年，社区持续反馈并推动演进。</li>
                     <li>项目 star 与使用规模已经证明它不是“玩具 demo”，而是被真实系统接入的基础能力。</li>