|
|
@@ -3,10 +3,10 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>FeHelper - 职场人的超级助手</title>
|
|
|
- <meta name="description" content="FeHelper是一个功能强大的浏览器扩展，现已全新升级！集成30+实用工具，支持Chrome/Edge/Firefox，开源免费，前端/数据/办公必备！">
|
|
|
- <meta property="og:title" content="FeHelper - 职场人的超级助手" />
|
|
|
- <meta property="og:description" content="全新升级！30+实用工具，支持Chrome/Edge/Firefox，开源免费，前端/数据/办公必备！" />
|
|
|
+ <title>FeHelper - 前端开发者的超级助手</title>
|
|
|
+ <meta name="description" content="FeHelper是一个专为前端开发者设计的强大浏览器扩展，集成31种实用工具：JSON美化/Mock数据生成/AI助手/接口调试/图像处理等，支持Chrome/Edge/Firefox，开源免费！">
|
|
|
+ <meta property="og:title" content="FeHelper - 前端开发者的超级助手" />
|
|
|
+ <meta property="og:description" content="专为前端开发者设计！31种实用工具，JSON美化/Mock数据/AI助手/接口调试，支持Chrome/Edge/Firefox，开源免费！" />
|
|
|
<meta property="og:image" content="https://fehelper.com/static/img/fe-128.png" />
|
|
|
<meta property="og:url" content="https://fehelper.com/" />
|
|
|
<meta itemprop="name" content="FeHelper - 职场人的超级助手">
|
|
|
@@ -22,6 +22,8 @@
|
|
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
<link rel="stylesheet" href="static/css/style.css">
|
|
|
+
|
|
|
+
|
|
|
|
|
|
<script>
|
|
|
var _hmt = _hmt || [];
|
|
|
@@ -48,7 +50,7 @@
|
|
|
<li><a href="docs.html">文档中心</a></li>
|
|
|
<li><a href="#about">关于我们</a></li>
|
|
|
<li><a href="#download">立即下载</a></li>
|
|
|
- <li><a href="#offline-download" style="color: #10b981;">无梯下载</a></li>
|
|
|
+ <li><a href="#offline-download" class="nav-offline-download">无梯下载</a></li>
|
|
|
<li><a href="https://github.com/zxlie/FeHelper" class="github-link" target="_blank">
|
|
|
<i class="fab fa-github"></i> GitHub
|
|
|
</a></li>
|
|
|
@@ -71,17 +73,18 @@
|
|
|
<div class="container">
|
|
|
<div class="hero-content">
|
|
|
<h1 class="hero-title">
|
|
|
- 职场人的 <span class="gradient-text">超级助手</span>
|
|
|
+ 前端开发者的 <span class="gradient-text">超级助手</span>
|
|
|
</h1>
|
|
|
<p class="hero-subtitle">
|
|
|
<span class="subtitle-main">
|
|
|
- FeHelper是一个功能强大的 <span class="highlight">开源浏览器扩展</span>，集成了30多种实用工具，适合IT、数据、设计、运营、行政、财务等各类职场人，支持Chrome、Edge、Firefox浏览器。
|
|
|
+ FeHelper是一个功能强大的 <span class="highlight">开源浏览器扩展</span>，专为前端开发者和各类职场人设计，集成了30+种实用工具，包括JSON处理、代码美化、接口调试、AI助手、图像处理等核心功能，支持Chrome、Edge、Firefox浏览器。
|
|
|
</span>
|
|
|
</p>
|
|
|
- <div class="badges-row pro-badges" style="margin: 32px 0 24px 0;">
|
|
|
+ <div class="badges-row pro-badges">
|
|
|
<a href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad" target="_blank">
|
|
|
<img src="https://img.shields.io/chrome-web-store/v/pkgccpejnmalmdinmhkkfafefagiiiad?label=chrome%20web%20store&logo=googlechrome&color=3b82f6&style=for-the-badge" alt="Chrome Web Store Version">
|
|
|
</a>
|
|
|
+ <img src="https://img.shields.io/badge/tools-30+-10b981?style=for-the-badge&logo=toolkit&logoColor=white" alt="工具数量">
|
|
|
<img src="https://img.shields.io/chrome-web-store/rating/pkgccpejnmalmdinmhkkfafefagiiiad?label=rating&logo=googlechrome&color=3b82f6&style=for-the-badge" alt="Chrome Web Store Rating">
|
|
|
<img src="https://img.shields.io/chrome-web-store/users/pkgccpejnmalmdinmhkkfafefagiiiad?label=users&logo=googlechrome&color=3b82f6&style=for-the-badge" alt="Chrome Web Store Users">
|
|
|
<a href="https://github.com/zxlie/FeHelper" target="_blank">
|
|
|
@@ -90,13 +93,14 @@
|
|
|
<a href="https://github.com/zxlie/FeHelper" target="_blank">
|
|
|
<img src="https://img.shields.io/github/forks/zxlie/FeHelper?style=for-the-badge&color=8b5cf6&logo=github" alt="GitHub Forks">
|
|
|
</a>
|
|
|
+ <img src="https://img.shields.io/badge/since-2011-f59e0b?style=for-the-badge&logo=calendar&logoColor=white" alt="开发历史">
|
|
|
</div>
|
|
|
<div class="hero-buttons">
|
|
|
<a href="#download" class="btn-primary">
|
|
|
<i class="fas fa-download"></i>
|
|
|
立即安装
|
|
|
</a>
|
|
|
- <a href="#offline-download" class="btn-secondary" style="background: linear-gradient(135deg, #10b981, #059669); border: none; color: white; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); transition: all 0.3s ease;" onmouseover="this.style.background='linear-gradient(135deg, #059669, #047857)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(16, 185, 129, 0.4)'" onmouseout="this.style.background='linear-gradient(135deg, #10b981, #059669)'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(16, 185, 129, 0.3)'">
|
|
|
+ <a href="#offline-download" class="btn-secondary no-ladder-download">
|
|
|
<i class="fas fa-cloud-download-alt"></i>
|
|
|
无梯下载
|
|
|
</a>
|
|
|
@@ -123,94 +127,74 @@
|
|
|
<div class="browser-content">
|
|
|
<div class="tool-grid-demo">
|
|
|
<div class="tool-card-demo json">
|
|
|
- <i class="fas fa-database"></i>
|
|
|
- <span>JSON类工具</span>
|
|
|
+ <i class="fas fa-code"></i>
|
|
|
+ <span>开发工具类</span>
|
|
|
+ <div class="tool-count">9种工具</div>
|
|
|
</div>
|
|
|
<div class="tool-card-demo qr">
|
|
|
<i class="fas fa-image"></i>
|
|
|
- <span>图片类工具</span>
|
|
|
+ <span>图像处理类</span>
|
|
|
+ <div class="tool-count">7种工具</div>
|
|
|
</div>
|
|
|
<div class="tool-card-demo encode">
|
|
|
- <i class="fas fa-code"></i>
|
|
|
- <span>代码类工具</span>
|
|
|
+ <i class="fas fa-exchange-alt"></i>
|
|
|
+ <span>编解码转换类</span>
|
|
|
+ <div class="tool-count">4种工具</div>
|
|
|
</div>
|
|
|
<div class="tool-card-demo postman">
|
|
|
- <i class="fas fa-robot"></i>
|
|
|
- <span>AI类工具</span>
|
|
|
+ <i class="fas fa-rocket"></i>
|
|
|
+ <span>效率工具类</span>
|
|
|
+ <div class="tool-count">4种工具</div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-card-demo calc">
|
|
|
+ <i class="fas fa-calculator"></i>
|
|
|
+ <span>计算工具类</span>
|
|
|
+ <div class="tool-count">3种工具</div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-card-demo other">
|
|
|
+ <i class="fas fa-puzzle-piece"></i>
|
|
|
+ <span>其他工具</span>
|
|
|
+ <div class="tool-count">4种工具</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 微信小程序推广区域 -->
|
|
|
- <div class="wechat-miniprogram-section" style="margin-top: 30px; padding: 24px; background: linear-gradient(135deg, rgba(7, 193, 96, 0.1), rgba(0, 174, 66, 0.05)); border-radius: 16px; border: 2px solid rgba(7, 193, 96, 0.2); position: relative; overflow: hidden;">
|
|
|
- <style>
|
|
|
- .wechat-miniprogram-section::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: linear-gradient(135deg, rgba(7, 193, 96, 0.03), rgba(0, 174, 66, 0.01));
|
|
|
- border-radius: 14px;
|
|
|
- }
|
|
|
- .wechat-miniprogram-section > * {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- @media (max-width: 1024px) {
|
|
|
- .wechat-miniprogram-section {
|
|
|
- margin-top: 20px !important;
|
|
|
- padding: 20px !important;
|
|
|
- }
|
|
|
- .wechat-miniprogram-section .main-flex {
|
|
|
- flex-direction: column !important;
|
|
|
- align-items: center !important;
|
|
|
- gap: 16px !important;
|
|
|
- }
|
|
|
- .wechat-miniprogram-section .qr-section {
|
|
|
- order: -1 !important;
|
|
|
- }
|
|
|
- .wechat-miniprogram-section .qr-section img {
|
|
|
- width: 100px !important;
|
|
|
- height: 100px !important;
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
+ <div class="wechat-miniprogram-section">
|
|
|
|
|
|
- <div class="main-flex" style="display: flex; align-items: flex-start; gap: 20px;">
|
|
|
- <div style="flex: 1; min-width: 0;">
|
|
|
- <div style="display: flex; align-items: center; margin-bottom: 16px;">
|
|
|
- <div style="background: linear-gradient(135deg, #07c160, #00ae42); width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 12px; box-shadow: 0 4px 15px rgba(7, 193, 96, 0.4);">
|
|
|
- <i class="fab fa-weixin" style="color: white; font-size: 18px;"></i>
|
|
|
+ <div class="main-flex">
|
|
|
+ <div class="content-flex">
|
|
|
+ <div class="wechat-header">
|
|
|
+ <div class="wechat-icon">
|
|
|
+ <i class="fab fa-weixin"></i>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <h3 style="color: #1a1a1a; margin: 0; font-size: 17px; font-weight: 600; display: flex; align-items: center;">
|
|
|
+ <h3 class="wechat-title">
|
|
|
🎉 微信小程序版
|
|
|
- <span style="background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; font-size: 10px; padding: 3px 7px; border-radius: 10px; margin-left: 8px; font-weight: 500; box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);">NEW</span>
|
|
|
+ <span class="new-badge">NEW</span>
|
|
|
</h3>
|
|
|
- <p style="color: #666; margin: 4px 0 0 0; font-size: 13px;">扫码即用，无需安装</p>
|
|
|
+ <p class="wechat-subtitle">扫码即用，无需安装</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
|
|
- <span style="background: rgba(7, 193, 96, 0.12); color: #00ae42; padding: 5px 10px; border-radius: 14px; font-size: 11px; display: flex; align-items: center; font-weight: 600; border: 1px solid rgba(7, 193, 96, 0.2);">
|
|
|
- <i class="fas fa-check" style="margin-right: 5px; font-size: 10px;"></i>
|
|
|
+ <div class="wechat-tags">
|
|
|
+ <span class="wechat-tag">
|
|
|
+ <i class="fas fa-check"></i>
|
|
|
无需安装
|
|
|
</span>
|
|
|
- <span style="background: rgba(7, 193, 96, 0.12); color: #00ae42; padding: 5px 10px; border-radius: 14px; font-size: 11px; display: flex; align-items: center; font-weight: 600; border: 1px solid rgba(7, 193, 96, 0.2);">
|
|
|
- <i class="fas fa-mobile-alt" style="margin-right: 5px; font-size: 10px;"></i>
|
|
|
+ <span class="wechat-tag">
|
|
|
+ <i class="fas fa-mobile-alt"></i>
|
|
|
扫码即用
|
|
|
</span>
|
|
|
- <span style="background: rgba(7, 193, 96, 0.12); color: #00ae42; padding: 5px 10px; border-radius: 14px; font-size: 11px; display: flex; align-items: center; font-weight: 600; border: 1px solid rgba(7, 193, 96, 0.2);">
|
|
|
- <i class="fas fa-tools" style="margin-right: 5px; font-size: 10px;"></i>
|
|
|
+ <span class="wechat-tag">
|
|
|
+ <i class="fas fa-tools"></i>
|
|
|
核心功能
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="qr-section" style="text-align: center; flex-shrink: 0;">
|
|
|
- <img src="static/img/fh-wx-xcx.jpg" alt="FeHelper微信小程序码" style="width: 110px; height: 110px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); background: white; padding: 6px; border: 2px solid rgba(7, 193, 96, 0.1);">
|
|
|
- <p style="color: #666; margin: 8px 0 0 0; font-size: 12px; font-weight: 500;">微信扫码使用</p>
|
|
|
+ <div class="qr-section">
|
|
|
+ <img src="static/img/fh-wx-xcx.jpg" alt="FeHelper微信小程序码" class="qr-code-img">
|
|
|
+ <p class="qr-text">微信扫码使用</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -257,42 +241,42 @@
|
|
|
<i class="fas fa-bolt"></i>
|
|
|
</div>
|
|
|
<h3>超高性能 <span class="feature-sub">极速体验，极致流畅</span></h3>
|
|
|
- <p>基于 Manifest V3 构建，启动速度快，内存占用低，毫秒级响应，数十万开发者共同见证，真正不影响浏览器性能。</p>
|
|
|
+ <p>基于 Manifest V3 构建，启动速度快，内存占用低，毫秒级响应，20万+开发者共同见证，真正不影响浏览器性能。</p>
|
|
|
</div>
|
|
|
<div class="feature-card">
|
|
|
<div class="feature-icon">
|
|
|
<i class="fas fa-shield-alt"></i>
|
|
|
</div>
|
|
|
<h3>安全可靠 <span class="feature-sub">数据本地，隐私无忧</span></h3>
|
|
|
- <p>遵循最新安全标准，所有数据本地处理，绝不上传任何敏感信息，企业级安全保障，放心使用。</p>
|
|
|
+ <p>遵循最新安全标准，所有数据本地处理，绝不上传任何敏感信息，企业级安全保障，支持离线使用。</p>
|
|
|
</div>
|
|
|
<div class="feature-card">
|
|
|
<div class="feature-icon">
|
|
|
<i class="fab fa-osi"></i>
|
|
|
</div>
|
|
|
<h3>完全开源 <span class="feature-sub">社区共建，持续进化</span></h3>
|
|
|
- <p>MIT 开源协议，代码透明，全球开发者共同维护，持续更新优化，欢迎每一位开发者参与共建。</p>
|
|
|
+ <p>MIT 开源协议，代码透明，5K+ GitHub Stars，全球开发者共同维护，持续更新优化。</p>
|
|
|
</div>
|
|
|
<div class="feature-card">
|
|
|
<div class="feature-icon">
|
|
|
<i class="fas fa-tools"></i>
|
|
|
</div>
|
|
|
<h3>工具齐全 <span class="feature-sub">30+ 专业工具，一站集成</span></h3>
|
|
|
- <p>涵盖IT开发、数据处理、图片处理、效率办公等多种场景，JSON、二维码、编码转换、接口调试、取色、截图、便签等，满足各类职场人需求。</p>
|
|
|
+ <p>涵盖开发调试、数据处理、图像转换、效率办公等6大类31种工具，JSON美化、Mock数据、接口调试、AI助手等，满足各类开发需求。</p>
|
|
|
</div>
|
|
|
<div class="feature-card">
|
|
|
<div class="feature-icon">
|
|
|
<i class="fas fa-laptop-code"></i>
|
|
|
</div>
|
|
|
<h3>跨平台兼容 <span class="feature-sub">多端支持，随时随地</span></h3>
|
|
|
- <p>完美适配 Chrome、Edge、Firefox 等主流浏览器，支持多操作系统，开发体验无缝切换。</p>
|
|
|
+ <p>完美适配 Chrome、Edge、Firefox 等主流浏览器，支持Windows、macOS、Linux等操作系统，开发体验无缝切换。</p>
|
|
|
</div>
|
|
|
<div class="feature-card">
|
|
|
<div class="feature-icon">
|
|
|
<i class="fas fa-magic"></i>
|
|
|
</div>
|
|
|
- <h3>极致体验 <span class="feature-sub">细节打磨，所见即所得</span></h3>
|
|
|
- <p>现代化UI设计，动画流畅，交互友好，支持暗黑模式，助力高效开发每一天。</p>
|
|
|
+ <h3>智能便捷 <span class="feature-sub">AI驱动，个性定制</span></h3>
|
|
|
+ <p>内置AI智能助手，支持代码优化建议；个性化工具排序、快捷键配置、夜间模式等，助力高效开发每一天。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -307,12 +291,12 @@
|
|
|
</div>
|
|
|
<div class="tools-categories">
|
|
|
<div class="category-tabs">
|
|
|
- <button class="tab-btn active" data-category="dev">开发工具类</button>
|
|
|
- <button class="tab-btn" data-category="encode">编解码转换类</button>
|
|
|
- <button class="tab-btn" data-category="image">图像处理类</button>
|
|
|
- <button class="tab-btn" data-category="productivity">效率工具类</button>
|
|
|
- <button class="tab-btn" data-category="calculator">计算工具类</button>
|
|
|
- <button class="tab-btn" data-category="other">其他工具</button>
|
|
|
+ <button class="tab-btn active" data-category="dev">开发工具类 (9种)</button>
|
|
|
+ <button class="tab-btn" data-category="image">图像处理类 (7种)</button>
|
|
|
+ <button class="tab-btn" data-category="encode">编解码转换类 (4种)</button>
|
|
|
+ <button class="tab-btn" data-category="productivity">效率工具类 (4种)</button>
|
|
|
+ <button class="tab-btn" data-category="calculator">计算工具类 (3种)</button>
|
|
|
+ <button class="tab-btn" data-category="other">其他工具 (4种)</button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 开发工具类 -->
|
|
|
@@ -322,24 +306,29 @@
|
|
|
<p>页面自动检测并格式化、手动格式化、乱码解码、排序、BigInt、编辑、下载、皮肤定制等</p>
|
|
|
<div class="tool-demo"><div class="json-demo"><pre><code>{
|
|
|
"name": "FeHelper",
|
|
|
- "version": "2.0",
|
|
|
- "tools": ["JSON", "QR", "Encode"]
|
|
|
+ "version": "2025.6.2024",
|
|
|
+ "tools": ["JSON", "Mock", "AI", "Debug"]
|
|
|
}</code></pre></div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="dev">
|
|
|
<h3><div class="tool-icon"><span>☷</span></div>JSON比对工具</h3>
|
|
|
<p>支持两个JSON内容的自动键值比较，并高亮显示差异点，同时也能判断JSON是否合法</p>
|
|
|
- <div class="tool-demo"><div class="diff-demo"><div class="diff-left">原始</div><div class="diff-right">修改后</div><div class="diff-line added">+ "new": "value"</div><div class="diff-line removed">- "old": "value"</div></div></div>
|
|
|
+ <div class="tool-demo"><div class="diff-demo"><div class="diff-left">原始</div><div class="diff-right">修改后</div><div class="diff-line added">+ "ai": "智能助手"</div><div class="diff-line removed">- "old": "旧功能"</div></div></div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-card" data-category="dev">
|
|
|
+ <h3><div class="tool-icon"><span>🎲</span></div>Mock数据生成器</h3>
|
|
|
+ <p>快速生成各种测试数据，支持个人信息、商业数据、技术数据等多种类型，提供快速模板一键生成，支持JSON/CSV/SQL/XML格式输出</p>
|
|
|
+ <div class="tool-demo"><div class="mock-demo"><div class="mock-item">{"name": "张三", "age": 28}</div><div class="mock-item">{"email": "[email protected]"}</div></div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="dev">
|
|
|
<h3><div class="tool-icon"><span>✡</span></div>代码美化工具</h3>
|
|
|
<p>支持多语言的代码美化，包括 Javascript、CSS、HTML、XML、SQL，且会陆续支持更多格式</p>
|
|
|
- <div class="tool-demo"><div class="code-demo"><div class="code-before">压缩代码</div><span style="font-size:18px;">→</span><div class="code-after">格式化代码</div></div></div>
|
|
|
+ <div class="tool-demo"><div class="code-demo"><div class="code-before">压缩代码</div><span class="demo-arrow">→</span><div class="code-after">格式化代码</div></div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="dev">
|
|
|
<h3><div class="tool-icon"><span>♯</span></div>代码压缩工具</h3>
|
|
|
<p>Web开发用，提供简单的代码压缩功能，支持HTML、Javascript、CSS代码压缩</p>
|
|
|
- <div class="tool-demo"><div class="compress-demo"><div class="size-before">100KB</div><span style="font-size:18px;">→</span><div class="size-after">65KB</div><div class="compress-ratio">35% 压缩率</div></div></div>
|
|
|
+ <div class="tool-demo"><div class="compress-demo"><div class="size-before">100KB</div><span class="demo-arrow">→</span><div class="size-after">65KB</div><div class="compress-ratio">35% 压缩率</div></div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="dev">
|
|
|
<h3><div class="tool-icon"><span>☯</span></div>简易Postman</h3>
|
|
|
@@ -349,14 +338,14 @@
|
|
|
<div class="tool-card" data-category="dev">
|
|
|
<h3><div class="tool-icon"><span>ⓦ</span></div>Websocket工具</h3>
|
|
|
<p>支持对Websocket接口的抓包测试，包括ws服务的连接测试、消息发送测试、结果分析等</p>
|
|
|
- <div class="tool-demo"><div class="websocket-demo"><div class="ws-status connected"><span style="color:#10b981;font-size:16px;">●</span> 已连接</div></div></div>
|
|
|
+ <div class="tool-demo"><div class="websocket-demo"><div class="ws-status connected"><span class="ws-indicator">●</span> 已连接</div></div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="dev">
|
|
|
<h3><div class="tool-icon"><span>✙</span></div>正则公式速查</h3>
|
|
|
<p>支持 JavaScript / Python / PHP / Java 等语言的正则速查，包含验证类、提取类、替换类、格式化类、特殊字符类、编程相关等常用正则表达式</p>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="dev">
|
|
|
- <h3><div class="tool-icon"><span>Σ</span></div>网站性能优化</h3>
|
|
|
+ <h3><div class="tool-icon"><span>⏱</span></div>网站性能分析</h3>
|
|
|
<p>全面分析网页性能指标，包括核心Web指标(LCP/FID/CLS)、资源加载性能、内存使用、长任务监控等，并提供针对性的优化建议</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -366,7 +355,7 @@
|
|
|
<div class="tool-card" data-category="encode">
|
|
|
<h3><div class="tool-icon"><span>♨</span></div>信息编码转换</h3>
|
|
|
<p>支持多格式的信息编解码，如Unicode、UTF-8、UTF-16、URL、Base64、MD5、Hex、Gzip等</p>
|
|
|
- <div class="tool-demo"><div class="encode-demo"><div class="encode-input">Hello World</div><div class="encode-arrows"><span style="font-size:18px;">⇄</span></div><div class="encode-output">SGVsbG8gV29ybGQ=</div></div></div>
|
|
|
+ <div class="tool-demo"><div class="encode-demo"><div class="encode-input">Hello World</div><div class="encode-arrows"><span class="demo-arrow">⇄</span></div><div class="encode-output">SGVsbG8gV29ybGQ=</div></div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="encode">
|
|
|
<h3><div class="tool-icon"><span>❖</span></div>进制转换工具</h3>
|
|
|
@@ -400,7 +389,7 @@
|
|
|
<div class="tool-card" data-category="image">
|
|
|
<h3><div class="tool-icon"><span>📊</span></div>图表制作工具</h3>
|
|
|
<p>快速制作各类数据可视化图表，支持柱状图、折线图、饼图等多种图表类型，可导出为图片格式</p>
|
|
|
- <div class="tool-demo"><div style="width:100%;height:40px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:6px;"></div></div>
|
|
|
+ <div class="tool-demo"><div class="color-gradient-demo"></div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="image">
|
|
|
<h3><div class="tool-icon"><span>🖼️</span></div>海报快速生成</h3>
|
|
|
@@ -413,27 +402,31 @@
|
|
|
<div class="tool-card" data-category="image">
|
|
|
<h3><div class="tool-icon"><span>✑</span></div>页面取色工具</h3>
|
|
|
<p>可直接在网页上针对任意元素进行色值采集，将光标移动到需要取色的位置，单击确定即可</p>
|
|
|
- <div class="tool-demo"><div style="width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#43ad7f,#f59e0b,#3b82f6);"></div></div>
|
|
|
+ <div class="tool-demo"><div class="color-picker-demo"></div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 效率工具类 -->
|
|
|
<div class="tools-grid" data-category="productivity">
|
|
|
<div class="tool-card" data-category="productivity">
|
|
|
- <h3><div class="tool-icon"><span>֍</span></div>AI(智能助手)</h3>
|
|
|
+ <h3><div class="tool-icon"><span>🤖</span></div>AI智能助手</h3>
|
|
|
<p>由AI强力支撑的超智能对话工具，可以让它帮你写代码、改代码、做方案设计、查资料、做分析等</p>
|
|
|
+ <div class="tool-demo"><div class="ai-chat-demo">💬 AI: 我可以帮您优化代码...</div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="productivity">
|
|
|
- <h3><div class="tool-icon"><span>✐</span></div>我的便签笔记</h3>
|
|
|
+ <h3><div class="tool-icon"><span>📝</span></div>我的便签笔记</h3>
|
|
|
<p>方便快捷的浏览器便签笔记工具，支持创建目录对笔记进行分类管理，笔记支持一键导出/导入</p>
|
|
|
+ <div class="tool-demo"><div class="sticky-notes-demo"><div class="note-yellow"></div><div class="note-green"></div><div class="note-blue"></div></div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="productivity">
|
|
|
- <h3><div class="tool-icon"><span>ⓜ</span></div>Markdown转换</h3>
|
|
|
+ <h3><div class="tool-icon"><span>📄</span></div>Markdown转换</h3>
|
|
|
<p>Markdown编写/预览工具，支持HTML片段直接转Markdown，支持将内容以PDF格式进行下载</p>
|
|
|
+ <div class="tool-demo"><div class="markdown-demo"># 标题<br/>**粗体** *斜体*</div></div>
|
|
|
</div>
|
|
|
<div class="tool-card" data-category="productivity">
|
|
|
- <h3><div class="tool-icon"><span>♀</span></div>网页油猴工具</h3>
|
|
|
+ <h3><div class="tool-icon"><span>🐒</span></div>网页油猴工具</h3>
|
|
|
<p>自行配置页面匹配规则、编写Hack脚本，实现网页Hack，如页面自动刷新、自动抢票等</p>
|
|
|
+ <div class="tool-demo"><div class="monkey-script-demo">// 自动刷新脚本<br/>setInterval(refresh, 5000)</div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -456,8 +449,24 @@
|
|
|
<!-- 其他工具 -->
|
|
|
<div class="tools-grid" data-category="other">
|
|
|
<div class="tool-card" data-category="other">
|
|
|
- <h3><div class="tool-icon"><span>㉿</span></div>FH开发者工具</h3>
|
|
|
+ <h3><div class="tool-icon"><span>🧠</span></div>便捷思维导图</h3>
|
|
|
+ <p>轻量便捷，随想随用，支持自动保存、本地数据存储、批量数据导入导出、图片格式下载等</p>
|
|
|
+ <div class="tool-demo"><div class="mindmap-demo"><div class="node-main"></div><div class="connector"></div><div class="node-sub"></div></div></div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-card" data-category="other">
|
|
|
+ <h3><div class="tool-icon"><span>📊</span></div>Excel转JSON</h3>
|
|
|
+ <p>将Excel或CVS中的数据，直接转换成为结构化数据，如JSON、XML、MySQL、PHP等</p>
|
|
|
+ <div class="tool-demo"><div class="excel-demo">Excel → JSON</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-card" data-category="other">
|
|
|
+ <h3><div class="tool-icon"><span>📏</span></div>网页栅格标尺</h3>
|
|
|
+ <p>Web开发用，横竖两把尺子，以10px为单位，用以检测&校准当前网页的栅格对齐率</p>
|
|
|
+ <div class="tool-demo"><div class="ruler-demo"><div class="ruler-segment red"></div><div class="ruler-segment blue"></div><div class="ruler-segment red"></div></div></div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-card" data-category="other">
|
|
|
+ <h3><div class="tool-icon"><span>🔧</span></div>FH开发者工具</h3>
|
|
|
<p>以开发平台的思想，FeHelper支持用户进行本地开发，将自己的插件功能集成进FH工具市场</p>
|
|
|
+ <div class="tool-demo"><div class="devtools-demo"></> 开发平台</div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -504,14 +513,14 @@
|
|
|
<div class="timeline-item">
|
|
|
<div class="timeline-year">2025</div>
|
|
|
<div class="timeline-content">
|
|
|
- <h3>UI与功能大改版</h3>
|
|
|
- <p>全新现代化渐变设计，极致响应式体验；所有工具可视化预览，交互动画全面升级；完全移除外部字体依赖，国内访问极速；支持Chrome/Edge/Firefox，开源社区持续壮大。</p>
|
|
|
+ <h3>AI与智能化升级</h3>
|
|
|
+ <p>集成AI智能助手，提供代码优化建议；新增Mock数据生成器、海报制作工具、图表制作等专业工具；个性化工具排序、夜间模式等用户体验全面升级；微信小程序版本发布。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Star趋势图替换原配图 -->
|
|
|
- <div class="about-image" style="display:flex;justify-content:center;align-items:center;height:100%;min-height:320px;">
|
|
|
- <img src="https://api.star-history.com/svg?repos=zxlie/FeHelper&type=Date" alt="FeHelper GitHub Star趋势图" style="width:100%;max-width:480px;display:block;margin:0 auto;">
|
|
|
+ <div class="about-image">
|
|
|
+ <img src="https://api.star-history.com/svg?repos=zxlie/FeHelper&type=Date" alt="FeHelper GitHub Star趋势图" class="star-history-chart">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -575,57 +584,57 @@
|
|
|
</section>
|
|
|
|
|
|
<!-- Offline Download Section -->
|
|
|
- <section id="offline-download" class="offline-download" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 80px 0;">
|
|
|
+ <section id="offline-download" class="offline-download">
|
|
|
<div class="container">
|
|
|
<div class="section-header">
|
|
|
- <h2 style="color: white; margin-bottom: 16px;">🚀 无梯下载指南</h2>
|
|
|
- <p style="color: rgba(255,255,255,0.9); font-size: 18px;">无法访问Chrome商店？没关系！我们为您提供完整的离线下载方案</p>
|
|
|
+ <h2>🚀 无梯下载指南</h2>
|
|
|
+ <p>无法访问Chrome商店？没关系！我们为您提供完整的离线下载方案</p>
|
|
|
</div>
|
|
|
|
|
|
- <div style="max-width: 1000px; margin: 0 auto;">
|
|
|
+ <div class="download-container">
|
|
|
<!-- 下载卡片 -->
|
|
|
- <div style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 16px; padding: 40px; margin-bottom: 40px; border: 1px solid rgba(255,255,255,0.2);">
|
|
|
- <div style="display: flex; align-items: center; margin-bottom: 24px;">
|
|
|
- <div style="width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 16px;">
|
|
|
- <i class="fas fa-download" style="font-size: 20px; color: white;"></i>
|
|
|
+ <div class="download-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="card-icon">
|
|
|
+ <i class="fas fa-download"></i>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <h3 style="color: white; margin: 0; font-size: 24px;">Chrome-Stats 镜像下载</h3>
|
|
|
- <p style="color: rgba(255,255,255,0.8); margin: 4px 0 0 0; font-size: 16px;">第三方镜像站点，国内可直接访问下载</p>
|
|
|
+ <h3 class="card-title">Chrome-Stats 镜像下载</h3>
|
|
|
+ <p class="card-subtitle">第三方镜像站点，国内可直接访问下载</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">
|
|
|
- <div style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 20px;">
|
|
|
- <div style="display: flex; align-items: center; margin-bottom: 16px;">
|
|
|
- <i class="fas fa-rocket" style="color: #f59e0b; margin-right: 8px;"></i>
|
|
|
- <strong style="color: white;">快速开始</strong>
|
|
|
+ <div class="features-grid">
|
|
|
+ <div class="feature-section">
|
|
|
+ <div class="feature-header">
|
|
|
+ <i class="fas fa-rocket"></i>
|
|
|
+ <strong>快速开始</strong>
|
|
|
</div>
|
|
|
- <div style="display: flex; flex-direction: column; gap: 12px;">
|
|
|
- <div style="display: flex; align-items: center; color: rgba(255,255,255,0.9); line-height: 1.4;">
|
|
|
- <span style="background: #3b82f6; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">1</span>
|
|
|
- <span style="font-size: 14px;">点击下载按钮安装扩展</span>
|
|
|
+ <div class="feature-steps">
|
|
|
+ <div class="step-item">
|
|
|
+ <span class="step-number blue">1</span>
|
|
|
+ <span class="step-text">点击下载按钮安装扩展</span>
|
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center; color: rgba(255,255,255,0.9); line-height: 1.4;">
|
|
|
- <span style="background: #10b981; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">2</span>
|
|
|
- <span style="font-size: 14px;">点击浏览器工具栏FeHelper图标</span>
|
|
|
+ <div class="step-item">
|
|
|
+ <span class="step-number green">2</span>
|
|
|
+ <span class="step-text">点击浏览器工具栏FeHelper图标</span>
|
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center; color: rgba(255,255,255,0.9); line-height: 1.4;">
|
|
|
- <span style="background: #8b5cf6; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">3</span>
|
|
|
- <span style="font-size: 14px;">选择需要的工具开始使用</span>
|
|
|
+ <div class="step-item">
|
|
|
+ <span class="step-number purple">3</span>
|
|
|
+ <span class="step-text">选择需要的工具开始使用</span>
|
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center; color: rgba(255,255,255,0.9); line-height: 1.4;">
|
|
|
- <span style="background: #f59e0b; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">4</span>
|
|
|
- <span style="font-size: 14px;">设置快捷键提升使用效率</span>
|
|
|
+ <div class="step-item">
|
|
|
+ <span class="step-number orange">4</span>
|
|
|
+ <span class="step-text">设置快捷键提升使用效率</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 20px;">
|
|
|
- <div style="display: flex; align-items: center; margin-bottom: 12px;">
|
|
|
- <i class="fas fa-shield-alt" style="color: #10b981; margin-right: 8px;"></i>
|
|
|
- <strong style="color: white;">核心优势</strong>
|
|
|
+ <div class="feature-section">
|
|
|
+ <div class="feature-header">
|
|
|
+ <i class="fas fa-shield-alt"></i>
|
|
|
+ <strong>核心优势</strong>
|
|
|
</div>
|
|
|
- <p style="margin: 0; color: rgba(255,255,255,0.9); line-height: 1.6;">
|
|
|
+ <p class="feature-advantages">
|
|
|
✅ <strong>官方版本</strong>：与商店版本完全一致<br>
|
|
|
✅ <strong>开源透明</strong>：MIT协议，代码可审计<br>
|
|
|
✅ <strong>安全可靠</strong>：数据本地处理，隐私无忧<br>
|
|
|
@@ -635,36 +644,34 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div style="text-align: center;">
|
|
|
+ <div class="download-link-center">
|
|
|
<a href="https://chrome-stats.com/d/pkgccpejnmalmdinmhkkfafefagiiiad/download"
|
|
|
target="_blank"
|
|
|
- style="display: inline-flex; align-items: center; background: rgba(255,255,255,0.9); color: #667eea; padding: 16px 32px; border-radius: 12px; text-decoration: none; font-weight: bold; font-size: 18px; margin: 0 10px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1);"
|
|
|
- onmouseover="this.style.background='white'; this.style.transform='translateY(-2px)'"
|
|
|
- onmouseout="this.style.background='rgba(255,255,255,0.9)'; this.style.transform='translateY(0)'">
|
|
|
- <i class="fas fa-external-link-alt" style="margin-right: 8px;"></i>
|
|
|
+ class="download-link">
|
|
|
+ <i class="fas fa-external-link-alt"></i>
|
|
|
前往 Chrome-Stats 下载
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 安装教程 -->
|
|
|
- <div style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 16px; padding: 40px; border: 1px solid rgba(255,255,255,0.2);">
|
|
|
- <h3 style="color: white; margin-bottom: 24px; font-size: 22px; display: flex; align-items: center;">
|
|
|
- <i class="fas fa-cog" style="margin-right: 12px; color: #f59e0b;"></i>
|
|
|
+ <div class="install-tutorial">
|
|
|
+ <h3 class="tutorial-title">
|
|
|
+ <i class="fas fa-cog"></i>
|
|
|
详细安装教程
|
|
|
</h3>
|
|
|
|
|
|
- <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
|
|
|
+ <div class="tutorial-grid">
|
|
|
<!-- 方法一：CRX文件安装 -->
|
|
|
- <div style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 24px;">
|
|
|
- <h4 style="color: white; margin-bottom: 16px; display: flex; align-items: center;">
|
|
|
- <span style="background: #3b82f6; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-right: 8px;">1</span>
|
|
|
+ <div class="method-section">
|
|
|
+ <h4 class="method-title">
|
|
|
+ <span class="method-number blue">1</span>
|
|
|
方法一：CRX文件安装（推荐）
|
|
|
</h4>
|
|
|
- <ol style="color: rgba(255,255,255,0.9); line-height: 1.8; padding-left: 20px;">
|
|
|
+ <ol class="method-steps">
|
|
|
<li>点击上方按钮进入Chrome-Stats下载页面</li>
|
|
|
<li>点击"<strong>Download CRX file</strong>"下载.crx文件</li>
|
|
|
- <li>在Chrome地址栏输入：<code style="background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; color: #fbbf24;">chrome://extensions</code></li>
|
|
|
+ <li>在Chrome地址栏输入：<code>chrome://extensions</code></li>
|
|
|
<li>开启右上角的"<strong>开发者模式</strong>"</li>
|
|
|
<li>将下载的.crx文件直接拖拽到扩展页面</li>
|
|
|
<li>点击"<strong>添加扩展程序</strong>"完成安装</li>
|
|
|
@@ -672,15 +679,15 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 方法二：ZIP文件安装 -->
|
|
|
- <div style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 24px;">
|
|
|
- <h4 style="color: white; margin-bottom: 16px; display: flex; align-items: center;">
|
|
|
- <span style="background: #10b981; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-right: 8px;">2</span>
|
|
|
+ <div class="method-section">
|
|
|
+ <h4 class="method-title">
|
|
|
+ <span class="method-number green">2</span>
|
|
|
方法二：ZIP文件安装
|
|
|
</h4>
|
|
|
- <ol style="color: rgba(255,255,255,0.9); line-height: 1.8; padding-left: 20px;">
|
|
|
+ <ol class="method-steps">
|
|
|
<li>在Chrome-Stats页面点击"<strong>Download ZIP file</strong>"</li>
|
|
|
<li>将下载的ZIP文件解压到本地文件夹</li>
|
|
|
- <li>在Chrome地址栏输入：<code style="background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; color: #fbbf24;">chrome://extensions</code></li>
|
|
|
+ <li>在Chrome地址栏输入：<code>chrome://extensions</code></li>
|
|
|
<li>开启右上角的"<strong>开发者模式</strong>"</li>
|
|
|
<li>点击"<strong>加载已解压的扩展程序</strong>"</li>
|
|
|
<li>选择解压后的文件夹完成安装</li>
|
|
|
@@ -689,12 +696,12 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 注意事项 -->
|
|
|
- <div style="background: rgba(245, 158, 11, 0.2); border-left: 4px solid #f59e0b; border-radius: 8px; padding: 16px; margin-top: 24px;">
|
|
|
- <h4 style="color: #fbbf24; margin-bottom: 8px; display: flex; align-items: center;">
|
|
|
- <i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>
|
|
|
+ <div class="warning-box">
|
|
|
+ <h4 class="warning-title">
|
|
|
+ <i class="fas fa-exclamation-triangle"></i>
|
|
|
重要提示
|
|
|
</h4>
|
|
|
- <ul style="color: rgba(255,255,255,0.9); line-height: 1.6; margin: 0; padding-left: 20px;">
|
|
|
+ <ul class="warning-list">
|
|
|
<li>Chrome可能会提示"无法从此网站添加应用"，这是正常现象，选择继续即可</li>
|
|
|
<li>安装后建议关闭"开发者模式"以避免警告提示</li>
|
|
|
<li>扩展功能与商店版本完全一致，支持自动更新检查</li>
|
|
|
@@ -851,9 +858,9 @@
|
|
|
<div class="footer-bottom">
|
|
|
<p>© 2024 FeHelper. Open source under MIT license.</p>
|
|
|
<p>Made with ❤️ for all office professionals</p>
|
|
|
- <p style="margin-top:8px;font-size:14px;color:rgba(255,255,255,0.6);">
|
|
|
- <a href="https://beian.miit.gov.cn/" target="_blank" style="color:inherit;text-decoration:underline;">京ICP备14006329号-1</a> |
|
|
|
- <a href="https://beian.miit.gov.cn/" target="_blank" style="color:inherit;text-decoration:underline;">京ICP备14006329号-2</a>
|
|
|
+ <p class="footer-icp">
|
|
|
+ <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备14006329号-1</a> |
|
|
|
+ <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备14006329号-2</a>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
zxlie