AI 生成: 一个开箱即用的 AI 工具聚合站，内置多种热门 AI 小工具（文本改写、代码解释、文案生成、翻译、总结等），支持一键部署，界面现代美观，谁用谁火。

2026-09-28 22:11:03 +08:00
commit 8a56ac5a89
5 changed files with 717 additions and 0 deletions
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI Tool Station · 一键部署的 AI 工具站</title>
+  <meta name="description" content="开箱即用的 AI 工具聚合站，内置多种热门 AI 小工具，一键部署，谁用谁火。" />
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <span class="logo">🚀</span>
+      <span class="brand-name">AI Tool Station</span>
+    </div>
+    <button id="settingsBtn" class="ghost-btn" title="设置 API">⚙️ 设置</button>
+  </header>
+
+  <main class="container">
+    <section class="hero">
+      <h1>一键部署的 <span class="grad">AI 工具站</span></h1>
+      <p>内置多个热门 AI 小工具，开箱即用，谁用谁火 🔥</p>
+    </section>
+
+    <section class="tools-grid" id="toolsGrid">
+      <!-- 工具卡片由 JS 渲染 -->
+    </section>
+
+    <section class="panel" id="panel" hidden>
+      <div class="panel-head">
+        <h2 id="panelTitle">工具</h2>
+        <button id="closePanel" class="ghost-btn">✕ 关闭</button>
+      </div>
+      <p class="panel-desc" id="panelDesc"></p>
+      <textarea id="inputBox" class="input-box" placeholder="请输入内容..."></textarea>
+      <div class="actions">
+        <button id="runBtn" class="primary-btn">✨ 运行</button>
+        <button id="copyBtn" class="ghost-btn">📋 复制结果</button>
+        <button id="clearBtn" class="ghost-btn">🧹 清空</button>
+      </div>
+      <div class="output" id="outputBox" aria-live="polite"></div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <span>© <span id="year"></span> AI Tool Station · MIT License</span>
+  </footer>
+
+  <!-- 设置弹窗 -->
+  <div class="modal" id="settingsModal" hidden>
+    <div class="modal-card">
+      <h3>⚙️ API 设置</h3>
+      <p class="hint">留空则使用内置模拟模式。支持 OpenAI 兼容接口。</p>
+      <label>API Base URL
+        <input id="apiBase" type="text" placeholder="https://api.openai.com/v1" />
+      </label>
+      <label>API Key
+        <input id="apiKey" type="password" placeholder="sk-..." />
+      </label>
+      <label>模型
+        <input id="apiModel" type="text" placeholder="gpt-4o-mini" />
+      </label>
+      <div class="modal-actions">
+        <button id="saveSettings" class="primary-btn">保存</button>
+        <button id="cancelSettings" class="ghost-btn">取消</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="js/tools.js"></script>
+  <script src="js/app.js"></script>
+</body>
+</html>