723 lines
48 KiB
HTML
723 lines
48 KiB
HTML
<style>
|
||
:root {
|
||
--color-primary: #0891b2;
|
||
--color-secondary: #64748b;
|
||
--color-dark: #0f172a;
|
||
--color-light: #f8fafc;
|
||
--color-surface: #ffffff;
|
||
--border-light: #e2e8f0;
|
||
--bg-glass: rgba(255, 255, 255, 0.7)
|
||
}
|
||
|
||
body {
|
||
background-color: var(--color-light);
|
||
color: var(--color-dark);
|
||
background-image: radial-gradient(circle at 10% 20%,rgba(8,145,178,.05) 0,transparent 20%),radial-gradient(circle at 90% 80%,rgba(99,102,241,.05) 0,transparent 20%);
|
||
background-attachment: fixed;
|
||
font-feature-settings: "cv11","ss01"
|
||
}
|
||
|
||
.code-block {
|
||
background-color: #1e293b;
|
||
color: #e2e8f0;
|
||
border-radius: .5rem;
|
||
padding: 1rem;
|
||
font-family: Consolas,Monaco,monospace;
|
||
font-size: .85rem;
|
||
overflow-x: auto;
|
||
position: relative;
|
||
border: 1px solid #334155
|
||
}
|
||
|
||
.code-block::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4px;
|
||
background: linear-gradient(90deg,var(--color-primary),#6366f1)
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: 0 0
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 4px
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8
|
||
}
|
||
|
||
.fade-in-up {
|
||
animation: fadeInUp .8s cubic-bezier(.16,1,.3,1) forwards;
|
||
opacity: 0;
|
||
transform: translateY(20px)
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0)
|
||
}
|
||
}
|
||
|
||
.delay-100 {
|
||
animation-delay: .1s
|
||
}
|
||
|
||
.delay-200 {
|
||
animation-delay: .2s
|
||
}
|
||
|
||
.delay-300 {
|
||
animation-delay: .3s
|
||
}
|
||
|
||
.tech-grid {
|
||
background-size: 40px 40px;
|
||
background-image: linear-gradient(to right,rgba(148,163,184,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,163,184,.1) 1px,transparent 1px);
|
||
mask-image: linear-gradient(to bottom,black 40%,transparent 100%);
|
||
-webkit-mask-image: linear-gradient(to bottom,black 40%,transparent 100%)
|
||
}
|
||
</style>
|
||
<div class="antialiased selection:bg-cyan-200 selection:text-cyan-900">
|
||
<section class="relative pt-16 pb-20 lg:pt-24 lg:pb-32 overflow-hidden">
|
||
<div class="absolute inset-0 tech-grid -z-10"></div>
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-50 border border-cyan-100 text-cyan-700 text-xs font-semibold mb-8 fade-in-up"> <span class="w-2 h-2 rounded-full bg-cyan-500 animate-pulse"></span> 架构重构 V1.3.7.2 发布 </div>
|
||
<h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 tracking-tight mb-8 fade-in-up delay-100">ResourceShare 企业级跨域<br> <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600">资源共享解决方案</span> </h1>
|
||
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-600 fade-in-up delay-200"> 如同瑞士军刀一般，解决 iframe 资源加载瓶颈。支持 VM 虚拟路径映射、Blob 传输优化、可视化 UI 监控以及智能错误诊断。 <br class="hidden sm:block"> 为大规模复杂 Web 应用打造的高性能底层引擎。 </p>
|
||
<div class="mt-10 flex justify-center gap-4 fade-in-up delay-300">
|
||
<a href="#features" class="px-8 py-3.5 rounded-lg bg-cyan-600 text-white font-semibold shadow-lg shadow-cyan-200 hover:bg-cyan-700 transition-all hover:-translate-y-1"> 探索功能 </a>
|
||
<a href="https://github.com/GVSADS/ResourceShare/" target="_blank" class="px-8 py-3.5 rounded-lg bg-white text-slate-700 border border-slate-200 font-semibold shadow-tech hover:bg-slate-50 transition-all"> 查看 Github 项目 </a>
|
||
</div>
|
||
<div class="mt-20 relative rounded-2xl bg-slate-900 border border-slate-200 shadow-2xl overflow-hidden fade-in-up delay-300 mx-auto max-w-5xl">
|
||
<div class="flex items-center gap-2 px-4 py-3 bg-white border-b border-slate-100 h-10">
|
||
<div class="flex gap-1.5">
|
||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||
</div>
|
||
<div class="flex-1 flex items-center justify-center text-center text-xs font-mono text-slate-400">
|
||
ResourceShare Monitor Panel
|
||
</div>
|
||
</div>
|
||
<div class="aspect-[16/9] bg-slate-50 relative flex items-center justify-center p-8 overflow-hidden">
|
||
<iframe
|
||
src="./example.html"
|
||
class="absolute inset-0 w-full h-full border-0 rounded-md"
|
||
title="RS Demo"
|
||
frameborder="0"
|
||
loading="lazy"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="features" class="py-24 bg-white relative">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl font-bold text-slate-900 sm:text-4xl">全链路性能与体验优化</h2>
|
||
<p class="mt-4 text-lg text-slate-600">不仅仅是加载脚本，而是提供一套完整的资源治理方案。</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div class="p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:border-cyan-200 hover:shadow-lg transition-all group">
|
||
<div class="w-12 h-12 rounded-lg bg-cyan-100 flex items-center justify-center text-cyan-600 mb-6 group-hover:scale-110 transition-transform"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||
</svg> </div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-3">高性能传输</h3>
|
||
<p class="text-slate-600 leading-relaxed"> 智能判断资源体积。小于 1MB 使用 PostMessage 直接传输，超大文件自动切换为 Blob URL 方式，突破浏览器消息传递限制。 </p>
|
||
</div>
|
||
<div class="p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:border-cyan-200 hover:shadow-lg transition-all group">
|
||
<div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600 mb-6 group-hover:scale-110 transition-transform"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||
</svg> </div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-3">虚拟路径映射 (V1.3.7.2)</h3>
|
||
<p class="text-slate-600 leading-relaxed"> 自动为远程资源生成 <code>VM_</code> 前缀的虚拟文件名（如 <code>VM_jquery.min.js</code>），保留完整的 SourceURL 路径层级，极大提升开发者调试体验。 </p>
|
||
</div>
|
||
<div class="p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:border-cyan-200 hover:shadow-lg transition-all group">
|
||
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600 mb-6 group-hover:scale-110 transition-transform"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||
</svg> </div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-3">智能错误诊断</h3>
|
||
<p class="text-slate-600 leading-relaxed"> 内置规则引擎，自动识别常见的加载错误（如 jQuery 缺失、CORS 限制），并提供具体的解决方案建议，告别无头苍蝇式排查。 </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="architecture" class="py-24 bg-slate-50 overflow-hidden">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||
<div>
|
||
<div class="inline-block px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-xs font-bold tracking-wider mb-4">ARCHITECTURE</div>
|
||
<h2 class="text-3xl font-bold text-slate-900 mb-6">可视化 UI 管理系统</h2>
|
||
<p class="text-slate-600 mb-6 leading-relaxed"> 系统内置了一套基于 Web Components 的轻量级 UI 管理器。通过毛玻璃风格的悬浮面板，您可以实时监控资源加载进度、查看分类日志，甚至在发生严重错误时通过遮罩层获取诊断信息。 </p>
|
||
<ul class="space-y-4">
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5"> <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg> </div>
|
||
<div class="ml-3">
|
||
<h4 class="text-base font-semibold text-slate-900">启动页与进度条</h4>
|
||
<p class="text-sm text-slate-500 mt-1">优雅的加载动画，缓解用户等待焦虑。</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5"> <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg> </div>
|
||
<div class="ml-3">
|
||
<h4 class="text-base font-semibold text-slate-900">分级日志控制</h4>
|
||
<p class="text-sm text-slate-500 mt-1">UI 日志与 DevTools 日志独立控制，生产环境可完全关闭 UI 日志以节省性能。</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="absolute -inset-4 bg-gradient-to-r from-cyan-100 to-blue-100 rounded-2xl -z-10 transform rotate-1"></div>
|
||
<div class="bg-white rounded-xl shadow-xl overflow-hidden border border-slate-200">
|
||
<div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center"> <span class="text-sm font-bold text-slate-700">RS_CONFIG.js</span> <span class="text-xs text-slate-400 font-mono">V1.3.7.2</span> </div>
|
||
<div class="p-0">
|
||
<pre class="code-block !rounded-t-none !border-t-0" style="
|
||
overflow-y: scroll;
|
||
height: 300px;
|
||
"><span class="text-purple-400">window</span>.RS_CONFIG = {
|
||
<span class="text-blue-400">VERSION</span>: <span class="text-green-400">'1.3.7.2'</span>, <span class="text-slate-500">// 当前系统版本号</span>
|
||
<span class="text-blue-400">COPYRIGHT</span>: <span class="text-green-400">'© 2026 GVSDS Team'</span>, <span class="text-slate-500">// 版权声明</span>
|
||
<span class="text-blue-400">SOURCE_FILE</span>: <span class="text-green-400">'ResourceShare.js'</span>, <span class="text-slate-500">// 源文件标识名称</span>
|
||
|
||
<span class="text-blue-400">ENABLE_UI</span>: <span class="text-orange-400">true</span>, <span class="text-slate-500">// 是否启用可视化界面 (启动页/日志/弹窗)</span>
|
||
|
||
<span class="text-blue-400">POST_MESSAGE_LIMIT</span>: <span class="text-purple-400">1</span> * <span class="text-purple-400">1024</span> * <span class="text-purple-400">1024</span>, <span class="text-slate-500">// 消息传输大小阈值 (1MB)，超过转Blob</span>
|
||
<span class="text-blue-400">BLOB_LIMIT</span>: <span class="text-purple-400">1024</span> * <span class="text-purple-400">1024</span> * <span class="text-purple-400">1024</span>, <span class="text-slate-500">// Blob数据处理限制 (1GB)，防内存溢出</span>
|
||
<span class="text-blue-400">SCRIPT_TIMEOUT</span>: <span class="text-purple-400">5</span> * <span class="text-purple-400">60</span> * <span class="text-purple-400">1000</span>, <span class="text-slate-500">// 脚本加载超时时间 (5分钟)，超时强制释放</span>
|
||
<span class="text-blue-400">PING_INTERVAL</span>: <span class="text-purple-400">100</span>, <span class="text-slate-500">// 子页向父页握手间隔</span>
|
||
<span class="text-blue-400">PING_TIMEOUT</span>: <span class="text-purple-400">5000</span>, <span class="text-slate-500">// 父页握手响应超时 (5秒)</span>
|
||
<span class="text-blue-400">REQUEST_TIMEOUT</span>: <span class="text-purple-400">10000</span>, <span class="text-slate-500">// 资源请求超时 (10秒)</span>
|
||
|
||
<span class="text-blue-400">RETRY</span>: {
|
||
<span class="text-blue-400">COUNT</span>: <span class="text-purple-400">3</span>, <span class="text-slate-500">// 失败重试次数</span>
|
||
<span class="text-blue-400">DELAY</span>: <span class="text-purple-400">1500</span> <span class="text-slate-500">// 重试间隔</span>
|
||
},
|
||
|
||
<span class="text-blue-400">Z_INDEX</span>: {
|
||
<span class="text-blue-400">SPLASH</span>: <span class="text-purple-400">2147483647</span>, <span class="text-slate-500">// 启动页层级 (最高)</span>
|
||
<span class="text-blue-400">PROGRESS</span>: <span class="text-purple-400">2147483646</span>, <span class="text-slate-500">// 进度条层级</span>
|
||
<span class="text-blue-400">PANEL</span>: <span class="text-purple-400">2147483645</span>, <span class="text-slate-500">// 日志面板层级</span>
|
||
<span class="text-blue-400">ERROR</span>: <span class="text-purple-400">2147483648</span> <span class="text-slate-500">// 错误弹窗层级</span>
|
||
},
|
||
|
||
<span class="text-blue-400">LOG_LEVEL_UI</span>: <span class="text-green-400">'debug'</span>, <span class="text-slate-500">// UI面板日志级别 ('debug'/'info'/'error'/'none')</span>
|
||
<span class="text-blue-400">LOG_LEVEL_DEVTOOLS</span>: <span class="text-green-400">'error'</span>, <span class="text-slate-500">// 浏览器控制台日志级别 ('debug'/'info'/'error'/'none')</span>
|
||
|
||
<span class="text-blue-400">LOG_LEVEL_MAP</span>: {
|
||
debug: [<span class="text-green-400">'info'</span>, <span class="text-green-400">'success'</span>, <span class="text-green-400">'warning'</span>, <span class="text-green-400">'danger'</span>, <span class="text-green-400">'cache'</span>, <span class="text-green-400">'request'</span>], <span class="text-slate-500">// 调试模式允许所有类型</span>
|
||
info: [<span class="text-green-400">'info'</span>, <span class="text-green-400">'success'</span>, <span class="text-green-400">'warning'</span>, <span class="text-green-400">'danger'</span>], <span class="text-slate-500">// 信息模式排除缓存/请求</span>
|
||
error: [<span class="text-green-400">'danger'</span>], <span class="text-slate-500">// 错误模式仅显示危险</span>
|
||
none: [] <span class="text-slate-500">// 关闭日志</span>
|
||
},
|
||
|
||
<span class="text-blue-400">ANIMATION</span>: {
|
||
<span class="text-blue-400">SPLASH_HIDE</span>: <span class="text-purple-400">800</span>, <span class="text-slate-500">// 启动页隐藏动画时长</span>
|
||
<span class="text-blue-400">PROGRESS_COMPLETE</span>: <span class="text-purple-400">800</span>,<span class="text-slate-500">// 进度条完成动画时长</span>
|
||
<span class="text-blue-400">PANEL_HIDE</span>: <span class="text-purple-400">500</span>, <span class="text-slate-500">// 面板隐藏动画时长</span>
|
||
<span class="text-blue-400">ERROR_SLIDE_UP</span>: <span class="text-purple-400">400</span>, <span class="text-slate-500">// 错误弹窗滑入动画时长</span>
|
||
<span class="text-blue-400">LOG_FADE_IN</span>: <span class="text-purple-400">200</span> <span class="text-slate-500">// 日志条目淡入动画时长</span>
|
||
},
|
||
|
||
<span class="text-blue-400">UI_STYLE</span>: {
|
||
<span class="text-blue-400">FONT_FAMILY</span>: <span class="text-green-400">"'Segoe UI Variable', 'Segoe UI', sans-serif"</span>, <span class="text-slate-500">// 系统字体</span>
|
||
<span class="text-blue-400">MONO_FONT</span>: <span class="text-green-400">"'Consolas', 'Monaco', monospace"</span>, <span class="text-slate-500">// 代码字体</span>
|
||
<span class="text-blue-400">BLUR_VALUE</span>: <span class="text-green-400">'20px'</span>, <span class="text-slate-500">// 背景模糊度</span>
|
||
<span class="text-blue-400">SHADOW_OPACITY</span>: <span class="text-purple-400">0.12</span> <span class="text-slate-500">// 阴影透明度</span>
|
||
}
|
||
};</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<style>
|
||
/* 架构动画 */
|
||
@keyframes pulse-ring {
|
||
0% { transform: scale(0.8); opacity: 0.5; }
|
||
100% { transform: scale(1.3); opacity: 0; }
|
||
}
|
||
.animate-pulse-ring::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--color-brand-500);
|
||
animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
||
}
|
||
|
||
.code-block {
|
||
background: #1e293b;
|
||
color: #e2e8f0;
|
||
}
|
||
.code-comment { color: #64748b; font-style: italic; }
|
||
.code-tag { color: #569cd6; }
|
||
.code-attr { color: #9cdcfe; }
|
||
.code-string { color: #ce9178; }
|
||
</style>
|
||
<section id="architecture" class="py-20 bg-white border-y border-slate-100">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-base text-brand-600 font-semibold tracking-wide uppercase">Architecture</h2>
|
||
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-slate-900 sm:text-4xl">
|
||
父级分发，多子级复用
|
||
</p>
|
||
<p class="mt-4 max-w-2xl text-xl text-slate-500 mx-auto">
|
||
告别每个 iframe 都重新下载 jQuery 或 Vue 的低效时代。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 左侧：架构图示 -->
|
||
<div class="relative bg-slate-50 rounded-2xl border border-slate-200 p-8 shadow-inner overflow-hidden h-[400px] flex items-center justify-center">
|
||
<!-- 连接线 SVG -->
|
||
<svg class="absolute inset-0 w-full h-full pointer-events-none" style="z-index: 1;">
|
||
<line x1="50%" y1="50%" x2="20%" y2="30%" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 4"></line>
|
||
<line x1="50%" y1="50%" x2="80%" y2="30%" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 4"></line>
|
||
<line x1="50%" y1="50%" x2="20%" y2="70%" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 4"></line>
|
||
<line x1="50%" y1="50%" x2="80%" y2="70%" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 4"></line>
|
||
</svg>
|
||
|
||
<!-- 父级窗口 -->
|
||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-white border-2 border-brand-500 rounded-xl shadow-glow z-10 flex flex-col items-center justify-center text-center p-2">
|
||
<div class="w-10 h-10 bg-brand-100 rounded-lg flex items-center justify-center text-brand-600 mb-2">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
|
||
</div>
|
||
<span class="font-bold text-slate-800">Top Window</span>
|
||
<span class="text-xs text-brand-600 font-medium">资源持有者 / 缓存中心</span>
|
||
</div>
|
||
|
||
<!-- 子级窗口 A -->
|
||
<div class="absolute top-[20%] left-[15%] w-24 h-20 bg-white border border-slate-300 rounded-lg shadow-sm z-0 flex flex-col items-center justify-center">
|
||
<span class="text-xs font-semibold text-slate-600">Iframe A</span>
|
||
<div class="mt-1 px-1.5 py-0.5 bg-green-100 text-green-700 text-[10px] rounded">Cached</div>
|
||
</div>
|
||
|
||
<!-- 子级窗口 B -->
|
||
<div class="absolute top-[20%] right-[15%] w-24 h-20 bg-white border border-slate-300 rounded-lg shadow-sm z-0 flex flex-col items-center justify-center">
|
||
<span class="text-xs font-semibold text-slate-600">Iframe B</span>
|
||
<div class="mt-1 px-1.5 py-0.5 bg-green-100 text-green-700 text-[10px] rounded">Cached</div>
|
||
</div>
|
||
|
||
<!-- 子级窗口 C -->
|
||
<div class="absolute bottom-[20%] left-[15%] w-24 h-20 bg-white border border-slate-300 rounded-lg shadow-sm z-0 flex flex-col items-center justify-center">
|
||
<span class="text-xs font-semibold text-slate-600">Iframe C</span>
|
||
<div class="mt-1 px-1.5 py-0.5 bg-green-100 text-green-700 text-[10px] rounded">Cached</div>
|
||
</div>
|
||
|
||
<!-- 子级窗口 D -->
|
||
<div class="absolute bottom-[20%] right-[15%] w-24 h-20 bg-white border border-slate-300 rounded-lg shadow-sm z-0 flex flex-col items-center justify-center">
|
||
<span class="text-xs font-semibold text-slate-600">Iframe D</span>
|
||
<div class="mt-1 px-1.5 py-0.5 bg-green-100 text-green-700 text-[10px] rounded">Cached</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：优势列表 -->
|
||
<div class="space-y-8">
|
||
<div class="flex gap-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-bold text-slate-900">极速加载 (0ms Latency)</h3>
|
||
<p class="mt-2 text-slate-600">首个 iframe 请求资源后，后续所有同源 iframe 均直接从父级内存读取 Blob URL 或 PostMessage 消息，网络延迟为零。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-bold text-slate-900">流量节省</h3>
|
||
<p class="mt-2 text-slate-600">对于 100 个 iframe 加载同一套 2MB 的 UI 库，系统仅消耗 2MB 流量，而非 200MB，显著降低服务器带宽成本。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-600">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-bold text-slate-900">同源安全握手</h3>
|
||
<p class="mt-2 text-slate-600">内置 Ping/Pong 握手机制，严格校验 Origin，确保资源只在授权的同源 iframe 间流转，防止数据泄露。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="architecture" class="py-20 bg-[var(--primary-light)] border-y border-blue-100">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex flex-col lg:flex-row items-center gap-12">
|
||
<div class="lg:w-1/2">
|
||
<h2 class="text-3xl font-bold text-gray-900 mb-6">父对子 (P2C) 共享逻辑</h2>
|
||
<p class="text-[var(--text-muted)] mb-6">
|
||
在传统的 iframe 架构中，每个 iframe 都是一个独立的浏览器上下文，拥有独立的网络栈和缓存。
|
||
如果你的页面有 5 个子窗格，每个都需要加载 jQuery (85KB)，那么你浪费了 400KB 的带宽和 5 次 DNS 查询时间。
|
||
</p>
|
||
<ul class="space-y-4">
|
||
<li class="flex items-start gap-3">
|
||
<span class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold">1</span>
|
||
<div>
|
||
<strong class="block text-gray-900">父页面优先获取</strong>
|
||
<span class="text-sm text-[var(--text-muted)]">Parent Window 发起 HTTP 请求，将资源存储在内存 Map 中。</span>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<span class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold">2</span>
|
||
<div>
|
||
<strong class="block text-gray-900">建立握手通道</strong>
|
||
<span class="text-sm text-[var(--text-muted)]">Child Window 启动时自动 PostMessage Ping 父页面，验证同源。</span>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<span class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold">3</span>
|
||
<div>
|
||
<strong class="block text-gray-900">Blob 传输与执行</strong>
|
||
<span class="text-sm text-[var(--text-muted)]">父页面将缓存转化为 Blob URL 或 直接传输数据，子页面通过 URL.createObjectURL 即时执行脚本。</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="lg:w-1/2 w-full">
|
||
<!-- Architecture Diagram -->
|
||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-8 relative">
|
||
<!-- Parent Box -->
|
||
<div class="bg-gray-900 text-white rounded-lg p-6 mb-8 relative z-10 border-l-4 border-[var(--primary)]">
|
||
<div class="text-xs uppercase text-gray-400 mb-1">Parent Window (Top Level)</div>
|
||
<div class="font-bold text-lg">ResourceShare Manager</div>
|
||
<div class="mt-4 flex gap-2">
|
||
<span class="bg-gray-800 px-2 py-1 rounded text-xs border border-gray-700">Cache: Map</span>
|
||
<span class="bg-gray-800 px-2 py-1 rounded text-xs border border-gray-700 text-green-400">✓ jQuery Loaded</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Connectors -->
|
||
<div class="h-12 flex justify-center relative mb-8">
|
||
<!-- Left Arrow -->
|
||
<div class="absolute left-10 top-1/2 -translate-y-1/2 flex flex-col items-center">
|
||
<div class="h-8 w-[1px] bg-gray-300 mb-1"></div>
|
||
<div class="text-xs text-[var(--primary)] bg-white px-1">Ping/Pong</div>
|
||
</div>
|
||
<!-- Right Arrows -->
|
||
<div class="absolute right-10 top-1/2 -translate-y-1/2 flex flex-col items-center">
|
||
<div class="text-xs text-[var(--success)] bg-white px-1 mb-1">PostMessage (Blob)</div>
|
||
<div class="h-8 w-[1px] bg-gray-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Children Container -->
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<!-- Child 1 -->
|
||
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
||
<div class="text-xs text-gray-400 mb-1">Child Iframe 1</div>
|
||
<div class="text-sm font-semibold text-gray-700">Dashboard Pane</div>
|
||
<div class="mt-2 text-xs text-green-600 flex items-center gap-1">
|
||
<span class="w-2 h-2 rounded-full bg-green-500"></span> Ready (Cached)
|
||
</div>
|
||
</div>
|
||
<!-- Child 2 -->
|
||
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
||
<div class="text-xs text-gray-400 mb-1">Child Iframe 2</div>
|
||
<div class="text-sm font-semibold text-gray-700">Settings Pane</div>
|
||
<div class="mt-2 text-xs text-green-600 flex items-center gap-1">
|
||
<span class="w-2 h-2 rounded-full bg-green-500"></span> Ready (Cached)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="logic" class="py-24 bg-slate-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid lg:grid-cols-2 gap-16">
|
||
|
||
<!-- 父页面职责 -->
|
||
<div>
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="p-2 rounded-lg bg-cyan-100 text-cyan-600">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-slate-900">父页面：资源中枢</h3>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<div class="flex gap-4">
|
||
<div class="flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-cyan-600 text-white flex items-center justify-center text-xs font-bold">1</div>
|
||
<div class="w-0.5 flex-1 bg-cyan-200 my-1"></div>
|
||
</div>
|
||
<div class="pb-6">
|
||
<h4 class="font-bold text-slate-800">发起网络请求</h4>
|
||
<p class="text-sm text-slate-600 mt-1">
|
||
父页面负责所有的跨域资源下载。系统自动拦截 <code><resource-share></code> 标签声明的资源，并发起 <code>fetch</code> 请求。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4">
|
||
<div class="flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-cyan-600 text-white flex items-center justify-center text-xs font-bold">2</div>
|
||
<div class="w-0.5 flex-1 bg-cyan-200 my-1"></div>
|
||
</div>
|
||
<div class="pb-6">
|
||
<h4 class="font-bold text-slate-800">缓存与预处理</h4>
|
||
<p class="text-sm text-slate-600 mt-1">
|
||
下载的内容被存储在父页面的 <code>Map</code> 缓存中。对于大文件，自动转换为 Blob URL；对于小文件，直接文本存储。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4">
|
||
<div class="flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-cyan-600 text-white flex items-center justify-center text-xs font-bold">3</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-slate-800">监听子请求 & 分发</h4>
|
||
<p class="text-sm text-slate-600 mt-1">
|
||
父页面开启 <code>message</code> 监听器。一旦收到子页面的 <code>resource-request</code> 信号，立即从缓存提取数据并通过 <code>postMessage</code> 推回。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 子页面职责 -->
|
||
<div>
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="p-2 rounded-lg bg-indigo-100 text-indigo-600">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-slate-900">子页面：轻量接入</h3>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<div class="flex gap-4">
|
||
<div class="flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold">1</div>
|
||
<div class="w-0.5 flex-1 bg-indigo-200 my-1"></div>
|
||
</div>
|
||
<div class="pb-6">
|
||
<h4 class="font-bold text-slate-800">握手与请求</h4>
|
||
<p class="text-sm text-slate-600 mt-1">
|
||
子页面初始化时，向父页面发送 <code>resource-share-ping</code> 确认连接。随后解析自身的 <code><resource-share></code> 标签，生成请求列表。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4">
|
||
<div class="flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold">2</div>
|
||
<div class="w-0.5 flex-1 bg-indigo-200 my-1"></div>
|
||
</div>
|
||
<div class="pb-6">
|
||
<h4 class="font-bold text-slate-800">接收资源并执行</h4>
|
||
<p class="text-sm text-slate-600 mt-1">
|
||
收到父页面 <code>postMessage</code> 传来的 Blob URL 或字符串内容后，立即创建 <code><script></code> 或 <code><style></code> 标签并注入 DOM。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4">
|
||
<div class="flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold">3</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-slate-800">降级机制 (Fallback)</h4>
|
||
<p class="text-sm text-slate-600 mt-1">
|
||
如果无法连接到父页面（例如跨域限制），子页面会自动降级，直接向 CDN 发起请求，确保业务不受影响。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="advantage" class="py-24 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl font-bold text-slate-900">多子场景下的性能碾压</h2>
|
||
<p class="mt-4 text-slate-600">假设系统有 1 个父页面和 5 个子 iframe，共同加载 3 个公共库（jQuery, Vue, ElementUI）</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<!-- 传统模式 -->
|
||
<div class="bg-red-50 rounded-xl p-8 border border-red-100 relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||
<svg class="w-32 h-32" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-red-800 mb-4">传统加载模式</h3>
|
||
<ul class="space-y-3 text-red-900/80">
|
||
<li class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-red-400"></span>
|
||
每个页面独立向 CDN 发起请求
|
||
</li>
|
||
<li class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-red-400"></span>
|
||
重复下载相同资源 6 次 (1父+5子)
|
||
</li>
|
||
<li class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-red-400"></span>
|
||
浪费带宽，加载时间长
|
||
</li>
|
||
</ul>
|
||
<div class="mt-6 bg-white/60 rounded p-4 text-center">
|
||
<div class="text-sm text-red-500 mb-1">总网络请求</div>
|
||
<div class="text-3xl font-bold text-red-600">18 次</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ResourceShare 模式 -->
|
||
<div class="bg-green-50 rounded-xl p-8 border border-green-100 relative overflow-hidden shadow-lg">
|
||
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||
<svg class="w-32 h-32" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-green-800 mb-4">ResourceShare 模式</h3>
|
||
<ul class="space-y-3 text-green-900/80">
|
||
<li class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||
仅父页面发起 3 次网络请求
|
||
</li>
|
||
<li class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||
5 个子页面瞬间并发获取 (PostMessage)
|
||
</li>
|
||
<li class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||
节省 83% 的外部请求
|
||
</li>
|
||
</ul>
|
||
<div class="mt-6 bg-white/60 rounded p-4 text-center">
|
||
<div class="text-sm text-green-600 mb-1">总网络请求</div>
|
||
<div class="text-3xl font-bold text-green-600">3 次</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="diagnostics" class="py-24 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl font-bold text-slate-900">智能错误诊断系统</h2>
|
||
<p class="mt-4 text-slate-600">当脚本执行失败时，系统不仅显示错误，更会提供修复建议。</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 gap-8 items-center">
|
||
<div class="bg-white rounded-xl shadow-lg border border-slate-200 p-0 overflow-hidden flex flex-col h-80">
|
||
<div class="bg-red-50 px-4 py-3 border-b border-red-100 flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-full bg-red-500 text-white flex items-center justify-center font-bold">!</div>
|
||
<div>
|
||
<div class="text-sm font-bold text-red-700">系统严重错误</div>
|
||
<div class="text-xs text-red-600">ResourceShare 遇到不可恢复的错误</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 bg-slate-50 flex-1 overflow-y-auto">
|
||
<div class="mb-4">
|
||
<h5 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">智能诊断与建议</h5>
|
||
<div class="bg-red-50 border-l-4 border-red-500 p-3 text-sm text-red-800"> <strong>jQuery 依赖错误:</strong><br /> 脚本依赖 jQuery，但似乎未加载或加载顺序错误。<br /> <em>解决方案: 请检查 resource-share 中 jQuery 是否在其他依赖库之前声明。</em> </div>
|
||
</div>
|
||
<div>
|
||
<h5 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">错误堆栈跟踪</h5>
|
||
<div class="bg-slate-800 text-slate-300 p-3 rounded text-xs font-mono"> TypeError: $ is not defined<br> at VM_app_main.js:12:5<br> at executeScript (ResourceShare.js:420) </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-8">
|
||
<div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-2">实时规则匹配</h3>
|
||
<p class="text-slate-600"> 内置的 <code>DIAGNOSTIC_RULES</code> 包含多种常见错误的特征检测。一旦捕获异常，系统会遍历规则库，匹配错误特征并生成 HTML 诊断报告。 </p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-2">网络层异常捕捉</h3>
|
||
<p class="text-slate-600"> 不仅限于 JavaScript 语法错误。对于网络请求超时、4xx/5xx 状态码、CORS 跨域拦截等底层网络问题，同样提供明确的指引。 </p>
|
||
</div>
|
||
<div class="flex gap-4"> <span class="px-3 py-1 bg-slate-100 rounded text-xs font-mono text-slate-600">TypeError</span> <span class="px-3 py-1 bg-slate-100 rounded text-xs font-mono text-slate-600">ReferenceError</span> <span
|
||
class="px-3 py-1 bg-slate-100 rounded text-xs font-mono text-slate-600">NetworkError</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="config" class="py-24 bg-slate-900 text-white">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-3xl font-bold mb-8">开箱即用，零配置启动</h2>
|
||
<p class="text-slate-400 mb-10"> 只需引入一个 JS 文件，并使用自定义标签声明资源，系统将自动完成脚本拦截、加载、映射和执行的整个生命周期。 </p>
|
||
<div class="bg-black/50 rounded-xl border border-slate-700 p-1 inline-block w-full text-left shadow-2xl">
|
||
<div class="flex items-center gap-2 px-4 py-3 border-b border-slate-800 bg-slate-800/50 rounded-t-lg">
|
||
<div class="w-3 h-3 rounded-full bg-slate-600"></div> <span class="text-xs text-slate-400">index.html</span>
|
||
</div>
|
||
<pre class="!rounded-t-none !bg-slate-900 !border-none p-6 leading-6"><span class="text-slate-500">
|
||
<pre class="!rounded-t-none !bg-slate-900 !border-none p-6 leading-6">
|
||
<span class="text-slate-500"><!-- 1. 引入系统 --></span>
|
||
<span class="text-blue-400"><script</span> <span class="text-cyan-400">src</span>=<span class="text-green-400">"https://cdn.gvsds.com/ResourceShare/ResourceShare-1.3.7.2.js"</span><span class="text-blue-400">></script></span>
|
||
|
||
<span class="text-slate-500"><!-- 2. 声明需要管理的资源 --></span>
|
||
<span class="text-blue-400"><resource-share</span>
|
||
<span class="text-cyan-400">type</span>=<span class="text-green-400">"script"</span>
|
||
<span class="text-cyan-400">src</span>=<span class="text-green-400">"https://cdn.../jquery.min.js"</span><span class="text-blue-400">></span>
|
||
<span class="text-blue-400"></resource-share></span>
|
||
|
||
<span class="text-blue-400"><resource-share</span>
|
||
<span class="text-cyan-400">type</span>=<span class="text-green-400">"style"</span>
|
||
<span class="text-cyan-400">href</span>=<span class="text-green-400">"https://cdn.../app.css"</span><span class="text-blue-400">></span>
|
||
<span class="text-blue-400"></resource-share></span>
|
||
|
||
<span class="text-slate-500"><!-- 3. 正常书写业务代码，无需额外等待逻辑 --></span>
|
||
<span class="text-blue-400"><script></span>
|
||
<span class="text-purple-400">window</span>.resourceShareManager.on(<span class="text-green-400">'ready'</span>, () => {
|
||
$(<span class="text-green-400">'#app'</span>).show(); <span class="text-slate-500">// jQuery 确保已加载</span>
|
||
});
|
||
<span class="text-blue-400"></script></span></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--footer id="install" class="bg-slate-50 border-t border-slate-200 pt-16 pb-8">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||
<div class="col-span-1 md:col-span-2">
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<div class="w-6 h-6 rounded bg-slate-800 flex items-center justify-center text-white font-bold text-xs">RS</div> <span class="font-bold text-slate-900">ResourceShare</span>
|
||
</div>
|
||
<p class="text-slate-500 text-sm max-w-xs"> 致力于解决复杂微前端架构下的资源治理问题。由 GVSDS Team 维护，基于 MIT 协议开源。 </p>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-slate-900 mb-4">资源</h4>
|
||
<ul class="space-y-2 text-sm text-slate-600">
|
||
<li><a href="#" class="hover:text-cyan-600">API 文档</a></li>
|
||
<li><a href="#" class="hover:text-cyan-600">更新日志 (V1.3.7.2)</a></li>
|
||
<li><a href="#" class="hover:text-cyan-600">常见问题</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-slate-900 mb-4">社区</h4>
|
||
<ul class="space-y-2 text-sm text-slate-600">
|
||
<li><a href="#" class="hover:text-cyan-600">GitHub</a></li>
|
||
<li><a href="#" class="hover:text-cyan-600">NPM 包</a></li>
|
||
<li><a href="#" class="hover:text-cyan-600">联系我们</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-slate-200 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||
<p class="text-sm text-slate-400">© 2026 GVSDS Team. All rights reserved.</p>
|
||
<div class="flex gap-6 text-sm text-slate-400"> <span>MIT License</span> </div>
|
||
</div>
|
||
</div>
|
||
</footer-->
|
||
</div> |