Initial commit

fc56331a · fisherdaddy · fc56331a · fc56331a · fc56331a · fc56331a
Commit fc56331a authored Sep 10, 2024 by fisherdaddy
16 changed files
--- a/.gitignore
+++ b/.gitignore
+node_modules/
+package-lock.json
\ No newline at end of file
--- a/README.md
+++ b/README.md
+# AI Toolbox
+
+AI 工具箱是一个集成多种人工智能工具的Web应用程序,旨在为用户提供一站式AI解决方案。该项目由 [AI 编辑器 Cursor](https://fisherdaddy.com/posts/cursor-the-ai-code-editor/) 提供支持。
+
+## 功能特性
+
+- 文字转图片卡片：将文本转换为精美的图片卡片
+- JSON格式化工具：美化和验证JSON数据
+- 多语言支持：支持中文和英文界面切换
+- 响应式设计：适配各种设备屏幕尺寸
+
+## 快速开始
+
+### 前置要求
+
+- Node.js (版本 14.0.0 或更高)
+- npm (版本 6.0.0 或更高)
+
+### 安装
+
+1. 克隆仓库
+```bash
+git clone https://github.com/your-username/ai-toolbox.git
+cd ai-toolbox
+```
+
+2. 安装依赖
+```bash
+npm install
+```
+
+3. 启动开发服务器
+```bash
+npm run dev
+```
+
+4. 在浏览器中打开 `http://localhost:3000` 查看应用
+
+## 使用方法
+
+1. 文字转图片卡片
+   - 导航到 "文字卡片" 工具
+   - 在左侧输入框中输入文本
+   - 右侧实时预览生成的图片卡片
+   - 点击 "导出为图片" 下载生成的图片
+
+2. JSON格式化工具
+   - 导航到 "JSON 格式化" 工具
+   - 在左侧输入框中粘贴JSON数据
+   - 右侧自动显示格式化后的JSON结构
+
+## 技术栈
+
+- React
+- React Router
+- Styled Components
+- Vite
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="AI工具箱 - 您的智能助手集合" />
+    <title>AI工具箱 | 智能助手集合</title>
+    <link rel="stylesheet" href="/src/styles/main.css" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
+{
+  "name": "ai-toolbox",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.2",
+    "styled-components": "^6.1.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^4.3.9"
+  }
+}
--- a/src/App.jsx
+++ b/src/App.jsx
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import JsonFormatter from './components/JsonFormatter';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import TextToImage from './components/TextToImage';
+
+function App(op) {
+  return (
+    <div className="app-container">
+      <Header />
+      <div className="content-wrapper">
+        <main>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/text2image" element={<TextToImage />} />
+            <Route path="/json-formatter" element={<JsonFormatter />} />
+          </Routes>
+        </main>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
+import React from 'react';
+
+function Footer() {
+  return (
+    <footer>
+      <p>&copy; 2024 AI工具箱. 保留所有权利。</p>
+    </footer>
+  );
+}
+
+export default Footer;
\ No newline at end of file
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
+import React from 'react';
+import { Link } from 'react-router-dom';
+import LanguageSelector from './LanguageSelector';
+import { useTranslation } from '../js/i18n';
+import '../styles/Header.css'; // 确保创建并导入这个CSS文件
+
+function Header() {
+  const { t } = useTranslation();
+
+  return (
+    <header>
+      <nav>
+        <Link to="/" className="logo no-underline">
+          {t('title')}
+        </Link>
+        <LanguageSelector />
+      </nav>
+    </header>
+  );
+}
+
+export default Header;
\ No newline at end of file
--- a/src/components/JsonFormatter.jsx
+++ b/src/components/JsonFormatter.jsx
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: 'Arial', sans-serif;
+`;
+
+const Title = styled.h2`
+  color: #333;
+  margin-bottom: 20px;
+`;
+
+const FlexContainer = styled.div`
+  display: flex;
+  gap: 20px;
+`;
+
+const TextArea = styled.textarea`
+  width: 100%;
+  height: 400px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 14px;
+`;
+
+const JsonContainer = styled.div`
+  flex: 1;
+  overflow: auto;
+  height: 400px;
+  background-color: #f8f8f8;
+  padding: 10px;
+  border-radius: 4px;
+`;
+
+const ToggleButton = styled.span`
+  cursor: pointer;
+  color: #666;
+  font-weight: bold;
+  margin-right: 5px;
+`;
+
+const Key = styled.span`
+  color: #881391;
+`;
+
+const Value = styled.span`
+  color: #1a1aa6;
+`;
+
+const JsonList = styled.ul`
+  list-style-type: none;
+  padding-left: 20px;
+  margin: 0;
+`;
+
+function JsonFormatter() {
+  const [input, setInput] = useState('');
+  const [parsedJson, setParsedJson] = useState(null);
+
+  useEffect(() => {
+    try {
+      const parsed = JSON.parse(input);
+      setParsedJson(parsed);
+    } catch (error) {
+      setParsedJson(null);
+    }
+  }, [input]);
+
+  return (
+    <Container>
+      <Title>JSON格式化工具</Title>
+      <FlexContainer>
+        <div style={{ flex: 1 }}>
+          <TextArea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="输入JSON数据"
+          />
+        </div>
+        <JsonContainer>
+          {parsedJson ? (
+            <JsonView data={parsedJson} />
+          ) : (
+            <pre>Invalid JSON</pre>
+          )}
+        </JsonContainer>
+      </FlexContainer>
+    </Container>
+  );
+}
+
+function JsonView({ data }) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  if (Array.isArray(data)) {
+    return (
+      <div>
+        <ToggleButton onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? '[-]' : '[+]'}
+        </ToggleButton>
+        {!isExpanded && <span>Array</span>}
+        {isExpanded && (
+          <JsonList>
+            {data.map((item, index) => (
+              <li key={index}>
+                <JsonView data={item} />
+              </li>
+            ))}
+          </JsonList>
+        )}
+      </div>
+    );
+  } else if (typeof data === 'object' && data !== null) {
+    return (
+      <div>
+        <ToggleButton onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? '{-}' : '{+}'}
+        </ToggleButton>
+        {!isExpanded && <span>Object</span>}
+        {isExpanded && (
+          <JsonList>
+            {Object.entries(data).map(([key, value]) => (
+              <li key={key}>
+                <Key>"{key}"</Key>: <JsonView data={value} />
+              </li>
+            ))}
+          </JsonList>
+        )}
+      </div>
+    );
+  } else if (typeof data === 'string') {
+    return <Value>"{data}"</Value>;
+  } else {
+    return <Value>{JSON.stringify(data)}</Value>;
+  }
+}
+
+export default JsonFormatter;
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
+import React from 'react';
+import { useTranslation } from '../js/i18n';
+
+function LanguageSelector() {
+  const { lang, setLanguage } = useTranslation();
+
+  const handleLanguageChange = (e) => {
+    setLanguage(e.target.value);
+  };
+
+  return (
+    <div id="language-selector">
+      <select id="lang-select" value={lang} onChange={handleLanguageChange}>
+        <option value="zh">中文</option>
+        <option value="en">English</option>
+      </select>
+    </div>
+  );
+}
+
+export default LanguageSelector;
\ No newline at end of file
--- a/src/components/TextToImage.jsx
+++ b/src/components/TextToImage.jsx
+import React, { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  max-width: 1200px;
+  height: 80vh;
+  background-color: white;
+  border-radius: 15px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  margin: 20px auto;
+`;
+
+const InputText = styled.textarea`
+  width: 50%;
+  height: 100%;
+  font-size: 16px;
+  padding: 20px;
+  border: none;
+  border-right: 1px solid #e0e0e0;
+  box-sizing: border-box;
+  outline: none;
+  resize: none;
+`;
+
+const PreviewContainer = styled.div`
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px;
+  box-sizing: border-box;
+`;
+
+const Preview = styled.div`
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  max-width: 100%;
+  text-align: left;
+  overflow-y: auto;
+  flex-grow: 1;
+  padding-right: 10px;
+
+  h1, h2, h3 {
+    color: #2c3e50;
+    margin-top: 0;
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+`;
+
+const DownloadButton = styled.button`
+  padding: 12px 24px;
+  background-color: #3498db;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+  align-self: flex-end;
+
+  &:hover {
+    background-color: #2980b9;
+  }
+`;
+
+function TextToImage() {
+  const [text, setText] = useState('');
+  const previewRef = useRef(null);
+
+  const formatText = (text) => {
+    return text
+      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\n/g, '<br/>');
+  };
+
+  const handleDownload = async () => {
+    const previewClone = previewRef.current.cloneNode(true);
+    document.body.appendChild(previewClone);
+    previewClone.style.position = 'absolute';
+    previewClone.style.left = '-9999px';
+    previewClone.style.width = 'auto';
+    previewClone.style.maxWidth = '800px';
+    previewClone.style.height = 'auto';
+    previewClone.style.whiteSpace = 'pre-wrap';
+    previewClone.style.backgroundColor = 'white';
+    previewClone.style.padding = '40px';
+    
+    try {
+      const html2canvas = (await import('html2canvas')).default;
+      const canvas = await html2canvas(previewClone, {
+        backgroundColor: 'white',
+        scale: 2,
+        width: previewClone.offsetWidth,
+        height: previewClone.offsetHeight
+      });
+
+      const link = document.createElement('a');
+      link.download = 'text_image.png';
+      link.href = canvas.toDataURL('image/png');
+      link.click();
+    } catch (error) {
+      console.error('Failed to load html2canvas:', error);
+    } finally {
+      document.body.removeChild(previewClone);
+    }
+  };
+
+  return (
+    <Container>
+      <InputText
+        placeholder="输入文本（可包含标题，如# 标题1）"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <PreviewContainer>
+        <Preview
+          ref={previewRef}
+          dangerouslySetInnerHTML={{ __html: formatText(text) }}
+        />
+        <DownloadButton onClick={handleDownload}>导出为图片</DownloadButton>
+      </PreviewContainer>
+    </Container>
+  );
+}
+
+export default TextToImage;
\ No newline at end of file
--- a/src/js/i18n.js
+++ b/src/js/i18n.js
+import { useState, useEffect } from 'react';
+
+const i18n = {
+  zh: {
+    title: 'AI工具箱',
+    slogan: '您的智能助手集合，一站式解决各种AI需求。',
+    searchPlaceholder: '搜索工具...',
+    tools: {
+      text2image: {
+        title: '文字卡片',
+        description: '将文字转换为图片卡'
+      },
+      jsonFormatter: {
+        title: 'JSON 格式化',
+        description: '美化和验证 JSON 数据'
+      },
+      // 添加更多工具...
+    },
+    // 添加更多翻译...
+  },
+  en: {
+    title: 'AI Toolbox',
+    slogan: 'Your collection of intelligent assistants, solving various AI needs in one place.',
+    searchPlaceholder: 'Search tools...',
+    tools: {
+      text2image: {
+        title: 'Text to Image Card',
+        description: 'Convert text to image card'
+      },
+      jsonFormatter: {
+        title: 'JSON Formatter',
+        description: 'Beautify and validate JSON data'
+      },
+      // 添加更多工具...
+    },
+    // 添加更多翻译...
+  },
+  // 添加更多语言...
+};
+
+let currentLanguage = localStorage.getItem('language') || 'zh'; // 从本地存储获取语言设置，默认为中文
+let listeners = [];
+
+export function setLanguage(lang) {
+  if (i18n[lang]) {
+    currentLanguage = lang;
+    localStorage.setItem('language', lang); // 将语言设置保存到本地存储
+    listeners.forEach(listener => listener(currentLanguage));
+  }
+}
+
+export function getLanguage() {
+  return currentLanguage;
+}
+
+export function t(key) {
+  const keys = key.split('.');
+  let value = i18n[currentLanguage];
+  for (const k of keys) {
+    if (value[k] === undefined) {
+      return key; // 如果翻译不存在，返回原始 key
+    }
+    value = value[k];
+  }
+  return value;
+}
+
+export function useTranslation() {
+  const [lang, setLang] = useState(currentLanguage);
+
+  useEffect(() => {
+    const listener = (newLang) => setLang(newLang);
+    listeners.push(listener);
+    return () => {
+      listeners = listeners.filter(l => l !== listener);
+    };
+  }, []);
+
+  return { t, lang, setLanguage };
+}
--- a/src/main.jsx
+++ b/src/main.jsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter as Router } from 'react-router-dom'
+import App from './App'
+import './styles/main.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <Router>
+      <App />
+    </Router>
+  </React.StrictMode>
+)
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from '../js/i18n';
+
+
+const tools = [
+  { id: 'text2image', icon: 'fa-image', path: '/text2image' },
+  { id: 'jsonFormatter', icon: 'fa-code', path: '/json-formatter' },
+  { id: 'textTranslation', icon: 'fa-language', path: '/text-translation' },
+];
+
+function Home() {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <section className="hero">
+        <h1>{t('title')}</h1>
+        <p className="slogan">{t('slogan')}</p>
+      </section>
+      <section className="tools-section">
+        <div className="tools-grid">
+          {tools.map(tool => (
+            <Link to={tool.path} key={tool.id} className="tool-card">
+              <i className={`fas ${tool.icon} tool-icon`}></i>
+              <h3 className="tool-title">{t(`tools.${tool.id}.title`)}</h3>
+              <p className="tool-description">{t(`tools.${tool.id}.description`)}</p>
+            </Link>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default Home;
--- a/src/styles/Header.css
+++ b/src/styles/Header.css
+.no-underline {
+  text-decoration: none;
+  color: inherit; /* 这会保持链接颜色与周围文本相同 */
+}
+
+.no-underline:hover {
+  text-decoration: none; /* 确保悬停时也不会出现下划线 */
+}
--- a/src/styles/main.css
+++ b/src/styles/main.css
+:root {
+  --primary-color: #000;
+  --secondary-color: #06c;
+  --background-color: #fff;
+  --text-color: #1d1d1f;
+  --card-background: #fbfbfd;
+  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  margin: 0;
+  padding: 0;
+  line-height: 1.47059;
+  font-weight: 400;
+  letter-spacing: -0.022em;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.content-wrapper {
+  flex: 1;
+  padding-top: 2px;
+  padding-bottom: 30px;
+}
+
+header {
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: saturate(180%) blur(20px);
+  padding: 0 5%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.logo {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+main {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 6rem 1rem 4rem;
+}
+
+.hero {
+  text-align: center;
+  margin-bottom: 2rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 0.1rem 0.1rem;
+  border-radius: 20px;
+  color: white;
+}
+
+h1 {
+  font-size: 4rem;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+}
+
+.slogan {
+  font-size: 1.8rem;
+  margin-bottom: 3.5rem;
+  font-weight: 400;
+  opacity: 0.9;
+}
+
+.search-container {
+  position: relative;
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+#tool-search {
+  width: 100%;
+  padding: 1.2rem 1.5rem;
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 12px;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+  transition: all 0.3s ease;
+}
+
+#tool-search::placeholder {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+#tool-search:focus {
+  outline: none;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.search-container i {
+  position: absolute;
+  right: 1.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 1.2rem;
+}
+
+.tools-section h2 {
+  text-align: center;
+  font-size: 3rem;
+  margin-bottom: 4rem;
+  color: var(--primary-color);
+  font-weight: 700;
+}
+
+.tools-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 3rem;
+}
+
+.tool-card {
+  background-color: var(--card-background);
+  border-radius: 20px;
+  padding: 2.5rem;
+  box-shadow: var(--card-shadow);
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.tool-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+}
+
+.tool-icon {
+  font-size: 4rem;
+  color: var(--secondary-color);
+  margin-bottom: 2rem;
+}
+
+.tool-title {
+  font-size: 1.6rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.tool-description {
+  font-size: 1.1rem;
+  color: #86868b;
+  line-height: 1.5;
+}
+
+footer {
+  background-color: var(--card-background);
+  color: #86868b;
+  text-align: center;
+  padding: 1.5rem;
+  font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+  .tools-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  h1 {
+    font-size: 3rem;
+  }
+  
+  .slogan {
+    font-size: 1.5rem;
+  }
+}
\ No newline at end of file
--- a/vite.config.js
+++ b/vite.config.js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000
+  }
+})