feat: polish demo portal pages

This commit is contained in:
chenkailing
2026-04-11 15:19:26 +08:00
parent bd20546b6d
commit dd6e369e6a
11 changed files with 434 additions and 86 deletions

View File

@@ -31,6 +31,11 @@ public class IndexController {
return "/main/integrated"; return "/main/integrated";
} }
@GetMapping( "/contact")
public String go2Contact(){
return "/main/contact";
}
@GetMapping( "/") @GetMapping( "/")
public String root() { public String root() {
return "/main/index"; return "/main/index";

View File

@@ -120,7 +120,7 @@ a:focus {
} }
.page-shell { .page-shell {
padding: 118px 0 64px; padding: 72px 0 64px;
} }
.section-heading { .section-heading {
@@ -221,7 +221,7 @@ a:focus {
.hero-title { .hero-title {
margin: 20px 0 16px; margin: 20px 0 16px;
font-size: clamp(26px, 2.8vw, 40px); font-size: clamp(24px, 2.4vw, 36px);
line-height: 1.08; line-height: 1.08;
letter-spacing: -0.045em; letter-spacing: -0.045em;
} }
@@ -234,6 +234,12 @@ a:focus {
line-height: 1.8; line-height: 1.8;
} }
.hero-subtitle-inline {
max-width: none;
white-space: nowrap;
display: inline-block;
}
.hero-stats, .hero-stats,
.hero-actions, .hero-actions,
.feature-grid, .feature-grid,
@@ -269,7 +275,11 @@ a:focus {
} }
.hero-actions { .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 { .hero-link {
@@ -303,6 +313,147 @@ a:focus {
padding: 28px; 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, .hero-card h3,
.workspace-card h3, .workspace-card h3,
.doc-card h3, .doc-card h3,
@@ -380,16 +531,39 @@ a:focus {
} }
.preview-url { .preview-url {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px; 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 { .preview-grid {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 12px; gap: 12px;
margin-bottom: 14px; margin-bottom: 0;
overflow-x: auto; overflow: visible;
padding-bottom: 4px; padding-bottom: 0;
flex: 1 1 auto;
min-width: 620px;
} }
.preview-grid .form-control { .preview-grid .form-control {
@@ -399,9 +573,12 @@ a:focus {
.preview-switches { .preview-switches {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: nowrap;
gap: 10px; gap: 10px;
margin-bottom: 14px; margin-bottom: 0;
overflow: visible;
padding-bottom: 0;
flex: 0 0 auto;
} }
.preview-switches label { .preview-switches label {
@@ -414,6 +591,7 @@ a:focus {
background: rgba(255, 255, 255, 0.76); background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(17, 19, 21, 0.08); border: 1px solid rgba(17, 19, 21, 0.08);
font-weight: 600; font-weight: 600;
white-space: nowrap;
} }
.preview-switches input { .preview-switches input {
@@ -441,8 +619,8 @@ a:focus {
} }
.preview-submit { .preview-submit {
width: 100%; width: 168px;
min-height: 52px; min-height: 48px;
} }
.feature-section, .feature-section,
@@ -452,6 +630,16 @@ a:focus {
margin-top: 34px; 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 { .feature-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
@@ -1031,10 +1219,13 @@ a:focus {
@media (max-width: 1080px) { @media (max-width: 1080px) {
.hero-grid, .hero-grid,
.home-hero-layout,
.contact-hero-layout,
.docs-layout, .docs-layout,
.toolbar-grid, .toolbar-grid,
.release-columns, .release-columns,
.source-grid { .source-grid,
.preview-options {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -1042,6 +1233,31 @@ a:focus {
position: static; 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, .hero-stats,
.feature-grid, .feature-grid,
.summary-grid, .summary-grid,
@@ -1073,7 +1289,11 @@ a:focus {
} }
.hero-title { .hero-title {
font-size: 24px; font-size: 22px;
}
.hero-subtitle-inline {
white-space: normal;
} }
.hero-stats, .hero-stats,
@@ -1086,10 +1306,36 @@ a:focus {
.preview-grid { .preview-grid {
flex-wrap: wrap; 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 { .hero-actions {
grid-template-columns: 1fr; flex-wrap: wrap;
overflow-x: visible;
padding-bottom: 0;
} }
.workspace-header, .workspace-header,

View File

@@ -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>

After

Width:  |  Height:  |  Size: 563 B

View File

@@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -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>

After

Width:  |  Height:  |  Size: 510 B

View File

@@ -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>

View File

@@ -12,7 +12,7 @@
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/> <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
<link rel="stylesheet" href="css/theme.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-3.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.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> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
@@ -75,6 +75,7 @@
<li><a href="./integrated">接入说明</a></li> <li><a href="./integrated">接入说明</a></li>
<li><a href="./record">版本发布记录</a></li> <li><a href="./record">版本发布记录</a></li>
<li><a href="./sponsor">赞助开源</a></li> <li><a href="./sponsor">赞助开源</a></li>
<li><a href="./contact">技术支持</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@@ -84,33 +85,40 @@
<section class="hero-section"> <section class="hero-section">
<div class="hero-grid single"> <div class="hero-grid single">
<div class="hero-copy"> <div class="hero-copy">
<div class="home-hero-layout">
<div class="home-hero-copy">
<span class="eyebrow">Preview Engine / Demo Portal</span> <span class="eyebrow">Preview Engine / Demo Portal</span>
<h1 class="hero-title">把文件预览接进业务系统,像接一个 URL 一样直接。</h1> <h1 class="hero-title">开源的万能文件预览系统</h1>
<p class="hero-subtitle"> <p class="hero-subtitle">
kkFileView 把文档、图片、CAD、3D、压缩包和音视频预览收敛成一套统一入口 kkFileView 提供统一的文件预览入口,覆盖 5 大文件族群、70+ 常见文件类型,支持文件链接预览、上传文件预览,以及业务系统里的常见接入方式
这版演示页把“URL 预览”和“本地文件预览”并入同一个工作台,避免同类操作被拆成两段。
</p> </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"> <div class="hero-actions">
<a class="hero-link primary" href="#demo-lab">开始体验</a> <a class="hero-link primary" href="#demo-lab">开始体验</a>
<a class="hero-link secondary" href="./integrated">查看接入说明</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> </div>
</div> </div>
@@ -120,11 +128,11 @@
<div class="section-heading"> <div class="section-heading">
<div> <div>
<span class="eyebrow">Capability Map</span> <span class="eyebrow">Capability Map</span>
<h2>能力不止是“能打开”,而是覆盖业务里真正常见的文件流。</h2> <h2>支持丰富的文件类型预览</h2>
</div> </div>
<p> <p>
我们把原来首页的长列表改成分类卡片,方便先扫边界,再判断适不适合接入你的系统。 你可以先快速扫一遍支持范围,再判断它是否适合接入你的业务系统。
如果你有新增格式建议,欢迎到开源社区继续补充。 如果你有新增格式建议,欢迎继续到开源社区补充。
</p> </p>
</div> </div>
<div class="feature-grid"> <div class="feature-grid">
@@ -196,7 +204,7 @@
<div class="workspace-header"> <div class="workspace-header">
<div> <div>
<span class="eyebrow">Demo Lab</span> <span class="eyebrow">Demo Lab</span>
<h3>本地文件工作台</h3> <h3>文件链接预览</h3>
<p>这里统一承接两种预览来源:直接输入 URL或者从本地文件目录里选择文件。参数和操作入口都尽量收在一起。</p> <p>这里统一承接两种预览来源:直接输入 URL或者从本地文件目录里选择文件。参数和操作入口都尽量收在一起。</p>
</div> </div>
<div class="note-row"> <div class="note-row">
@@ -211,14 +219,6 @@
<div class="source-card"> <div class="source-card">
<h4>输入 URL 直接试跑</h4> <h4>输入 URL 直接试跑</h4>
<p>贴入文件地址按需叠加页码、高亮、水印、AES 和跨域参数,直接在新窗口验证最终预览行为。</p> <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" > <#if "${kkkey}" != "false" >
<p> <p>
程序已启用秘钥访问。 程序已启用秘钥访问。
@@ -232,24 +232,26 @@
<div class="preview-panel"> <div class="preview-panel">
<form action="${baseUrl}onlinePreview" target="_blank" id="previewByUrl"> <form action="${baseUrl}onlinePreview" target="_blank" id="previewByUrl">
<input type="hidden" name="url"/> <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"> <div class="preview-url">
<input type="text" id="_url" class="form-control" placeholder="请输入预览文件 URL例如 https://example.com/demo.pdf"/> <input type="text" id="_url" class="form-control" placeholder="请输入预览文件 URL例如 https://example.com/demo.pdf"/>
<input type="submit" value="立即预览" class="preview-submit">
</div> </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> </form>
<div class="alert alert-danger alert-dismissable hide" role="alert" id="previewCheckAlert"> <div class="alert alert-danger alert-dismissable hide" role="alert" id="previewCheckAlert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
@@ -264,9 +266,8 @@
<div class="section-heading"> <div class="section-heading">
<div> <div>
<span class="eyebrow">Local Source</span> <span class="eyebrow">Local Source</span>
<h2>本地文件与目录预览</h2> <h2>上传文件预览</h2>
</div> </div>
<p>上传文件、创建目录、按文件名搜索,然后直接从下面的文件表格里发起预览。这样本地入口和结果列表会贴在一起。</p>
</div> </div>
<div class="toolbar-grid"> <div class="toolbar-grid">

View File

@@ -27,6 +27,7 @@
<li class="active"><a href="./integrated">接入说明</a></li> <li class="active"><a href="./integrated">接入说明</a></li>
<li><a href="./record">版本发布记录</a></li> <li><a href="./record">版本发布记录</a></li>
<li><a href="./sponsor">赞助开源</a></li> <li><a href="./sponsor">赞助开源</a></li>
<li><a href="./contact">技术支持</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@@ -36,10 +37,9 @@
<section class="hero-section release-hero"> <section class="hero-section release-hero">
<div class="hero-copy"> <div class="hero-copy">
<span class="eyebrow">Integration Guide</span> <span class="eyebrow">Integration Guide</span>
<h1 class="hero-title">5 分钟把 kkFileView 接进你的前端项目。</h1> <h1 class="hero-title">5 分钟把 kkFileView 接进你的业务项目。</h1>
<p class="hero-subtitle"> <p class="hero-subtitle hero-subtitle-inline">
页不再把所有方案平铺成一长段,而是按场景拆成独立卡片 里按常见接入场景提供示例,方便你直接按需选用。默认假设服务地址为 <span class="text-highlight">${baseUrl}</span>
默认假设服务地址为 <span class="text-highlight">${baseUrl}</span>。
</p> </p>
<div class="note-row"> <div class="note-row">
<span class="tag brand">HTTP / HTTPS</span> <span class="tag brand">HTTP / HTTPS</span>

View File

@@ -26,6 +26,7 @@
<li><a href="./integrated">接入说明</a></li> <li><a href="./integrated">接入说明</a></li>
<li class="active"><a href="./record">版本发布记录</a></li> <li class="active"><a href="./record">版本发布记录</a></li>
<li><a href="./sponsor">赞助开源</a></li> <li><a href="./sponsor">赞助开源</a></li>
<li><a href="./contact">技术支持</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@@ -35,9 +36,9 @@
<section class="hero-section release-hero"> <section class="hero-section release-hero">
<div class="hero-copy"> <div class="hero-copy">
<span class="eyebrow">Release Timeline</span> <span class="eyebrow">Release Timeline</span>
<h1 class="hero-title">版本记录先看重点,再追历史。</h1> <h1 class="hero-title">版本发布记录</h1>
<p class="hero-subtitle"> <p class="hero-subtitle">
这一版把发布记录拆成“最新摘要 + 年度时间轴 + 历史归档”。先看升级重点,再决定是否继续深入版本细节。 你可以先看最新版本的升级重点,再顺着时间轴继续了解历史版本细节。
</p> </p>
<div class="release-badge-row"> <div class="release-badge-row">
<span class="tag highlight">最新版本 v5.0</span> <span class="tag highlight">最新版本 v5.0</span>
@@ -45,20 +46,6 @@
<span class="tag warn">JDK 21+ 强制要求</span> <span class="tag warn">JDK 21+ 强制要求</span>
<span class="tag">PDF / TIF / CAD 异步化</span> <span class="tag">PDF / TIF / CAD 异步化</span>
</div> </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>
</section> </section>

View File

@@ -26,6 +26,7 @@
<li><a href="./integrated">接入说明</a></li> <li><a href="./integrated">接入说明</a></li>
<li><a href="./record">版本发布记录</a></li> <li><a href="./record">版本发布记录</a></li>
<li class="active"><a href="./sponsor">赞助开源</a></li> <li class="active"><a href="./sponsor">赞助开源</a></li>
<li><a href="./contact">技术支持</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@@ -35,7 +36,7 @@
<section class="hero-section release-hero"> <section class="hero-section release-hero">
<div class="hero-copy"> <div class="hero-copy">
<span class="eyebrow">Sponsor Open Source</span> <span class="eyebrow">Sponsor Open Source</span>
<h1 class="hero-title">如果这个项目帮你省下了成本,也欢迎反过来帮它继续跑下去。</h1> <h1 class="hero-title">赞助开源</h1>
<p class="hero-subtitle"> <p class="hero-subtitle">
kkFileView 已持续维护多年,被广泛用于金融、教育、银行、政务和企业内部系统。 kkFileView 已持续维护多年,被广泛用于金融、教育、银行、政务和企业内部系统。
赞助会直接用于文档站、演示站、服务器和 CDN 等基础开销。 赞助会直接用于文档站、演示站、服务器和 CDN 等基础开销。
@@ -70,7 +71,7 @@
<h3>赞助方式</h3> <h3>赞助方式</h3>
</div> </div>
</div> </div>
<p>如果你觉得 kkFileView 对你有帮助,可以通过下面的方式赞助项目。页面信息会继续保留简洁,但视觉上统一到新的主站风格里。</p> <p>如果你觉得 kkFileView 对你有帮助,可以通过下面的方式赞助项目,支持它继续长期维护。</p>
<ul> <ul>
<li>kkFileView 开源至今已多年,社区持续反馈并推动演进。</li> <li>kkFileView 开源至今已多年,社区持续反馈并推动演进。</li>
<li>项目 star 与使用规模已经证明它不是“玩具 demo”而是被真实系统接入的基础能力。</li> <li>项目 star 与使用规模已经证明它不是“玩具 demo”而是被真实系统接入的基础能力。</li>