🚧 WIP: website

2026-09-20 03:16:37 +00:00 · 2025-10-20 14:58:07 +08:00
13 changed files with 3335 additions and 214 deletions
@@ -0,0 +1,121 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+PicGo is an Electron-based cross-platform image upload tool that supports multiple image hosting services (图床) including SMMS, GitHub, Aliyun OSS, Qiniu, Tencent COS, and more. It's built with Vue 3 + TypeScript for the renderer process and Node.js for the main process.
+
+## Architecture
+
+### Core Structure
+- **Main Process**: `src/main/` - Electron main process with Node.js capabilities
+- **Renderer Process**: `src/renderer/` - Vue 3 frontend (no direct Node.js access)
+- **Universal Code**: `src/universal/` - Shared code between processes
+- **Entry Points**: 
+  - `src/background.ts` - Main process bootstrap
+  - `src/main.ts` - Renderer process entry
+
+### Key Directories
+- `src/main/apis/` - Main process APIs (uploader, system, window management)
+- `src/main/server/` - HTTP server for external uploads
+- `src/renderer/pages/` - Vue components for different views
+- `src/renderer/store/` - Vuex-like state management
+- `public/i18n/` - Internationalization files
+- `test/` - Unit and e2e tests
+
+### Data Storage
+- **Config**: JSON file at `~/.picgo/config.json` (via `@picgo/store`)
+- **Gallery**: Separate DB for uploaded images history
+- **Settings**: Stored in config with namespaced keys (`settings.*`)
+
+## Development Commands
+
+### Setup & Install
+```bash
+yarn install  # Use yarn, NOT npm install
+```
+
+### Development
+```bash
+yarn dev              # Start development mode with hot reload
+yarn electron:serve   # Alias for dev
+```
+
+### Build & Release
+```bash
+yarn build            # Build for production
+yarn electron:build   # Build for production
+yarn release          # Build and publish release
+```
+
+### Code Quality
+```bash
+yarn lint             # Run ESLint
+yarn lint:fix         # Auto-fix lint issues
+yarn lint:dpdm        # Check circular dependencies
+yarn gen-i18n         # Generate i18n type definitions
+```
+
+### Testing
+```bash
+# Unit tests
+yarn test:unit        # Run unit tests with Karma
+
+# E2E tests  
+yarn test:e2e         # Run end-to-end tests
+```
+
+### Git Workflow
+```bash
+yarn cz              # Commit with conventional commits
+```
+
+## Key Development Patterns
+
+### Process Communication
+- Use IPC events for cross-process communication
+- Event names defined in `src/universal/events/constants.ts`
+- Main process handles Node.js operations, renderer sends requests
+
+### Configuration
+- Settings stored in namespaced config keys
+- Use `saveConfig()` and `getConfig()` from renderer
+- Main process uses direct picgo instance APIs
+
+### Internationalization
+- Translation files in `public/i18n/*.yml`
+- Run `yarn gen-i18n` after modifying translations
+- Use `T()` function for translations in renderer
+
+### File Organization
+- **Main**: Node.js operations, file system, native features
+- **Renderer**: UI, Vue components, user interactions
+- **Universal**: Types, constants, shared utilities
+
+## Build Configuration
+- **Electron Builder**: Configured in `vue.config.js`
+- **Platforms**: macOS (dmg), Windows (exe), Linux (AppImage, snap)
+- **Auto-updater**: Disabled (commented out in background.ts)
+
+## Common Tasks
+
+### Adding a new feature
+1. Determine if it belongs in main or renderer process
+2. Add events to `src/universal/events/constants.ts` if needed
+3. For Node.js operations, add IPC handlers in main process
+4. For UI, add Vue components in renderer
+
+### Modifying i18n
+1. Update `public/i18n/[lang].yml`
+2. Run `yarn gen-i18n`
+3. Add language option in `src/universal/i18n/index.ts`
+
+### Adding new picbed support
+1. Use picgo plugin system (external to core)
+2. Core picbed configs are in `src/renderer/pages/picbeds/`
+
+## Environment Notes
+- **Development**: Uses `vue-cli-plugin-electron-builder`
+- **Production**: Built with `electron-builder`
+- **Testing**: Karma for unit tests, Spectron for e2e
+- **Hot reload**: Available for both main and renderer processes
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PicGo - The Ultimate Image Upload & Management Tool</title>
+    <meta name="description" content="Seamlessly upload images to multiple cloud storage services with a beautiful, cross-platform interface. Supports 20+ image hosting services." />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,91 @@
+{
+  "nav": {
+    "home": "Home",
+    "features": "Features",
+    "plugins": "Plugins",
+    "download": "Download",
+    "docs": "Docs",
+    "github": "GitHub"
+  },
+  "hero": {
+    "title": "PicGo",
+    "subtitle": "The Ultimate Image Upload & Management Tool",
+    "description": "Seamlessly upload images to multiple cloud storage services with a beautiful, cross-platform interface. Supports 20+ image hosting services with powerful plugin system.",
+    "download": "Download Free",
+    "viewDocs": "View Documentation",
+    "currentVersion": "Current Version"
+  },
+  "features": {
+    "title": "Powerful Features",
+    "subtitle": "Everything you need for efficient image management",
+    "multiPicbed": {
+      "title": "Multi-Picbed Support",
+      "description": "Support for 20+ image hosting services including GitHub, SMMS, Aliyun OSS, Qiniu, Tencent COS, and more. Switch between different picbeds seamlessly."
+    },
+    "pluginSystem": {
+      "title": "Plugin System",
+      "description": "Extend PicGo's functionality with powerful plugins. From custom uploaders to advanced image processing, the possibilities are endless."
+    },
+    "crossPlatform": {
+      "title": "Cross-Platform",
+      "description": "Available on macOS, Windows, and Linux with native performance and consistent user experience across all platforms."
+    },
+    "clipboardUpload": {
+      "title": "Clipboard Upload",
+      "description": "Upload images directly from your clipboard with a single shortcut. Perfect for quick screenshots and captures."
+    },
+    "batchUpload": {
+      "title": "Batch Operations",
+      "description": "Upload multiple images at once, rename files automatically, and manage your uploads efficiently with batch operations."
+    },
+    "galleryManagement": {
+      "title": "Gallery Management",
+      "description": "Keep track of all your uploaded images with a built-in gallery. Search, preview, and manage your image history with ease."
+    }
+  },
+  "plugins": {
+    "title": "Plugin Ecosystem",
+    "subtitle": "Extend PicGo beyond imagination",
+    "description": "With our powerful plugin system, you can add new image hosting services, customize upload workflows, integrate with other tools, and much more.",
+    "viewPlugins": "Browse Plugins",
+    "createPlugin": "Create Your Own Plugin"
+  },
+  "supportedServices": {
+    "title": "Supported Services",
+    "subtitle": "Connect with your favorite image hosting services",
+    "github": "GitHub",
+    "smms": "SM.MS",
+    "aliyun": "Aliyun OSS",
+    "qiniu": "Qiniu",
+    "tencent": "Tencent COS",
+    "upyun": "Upyun",
+    "imgur": "Imgur",
+    "weibo": "Weibo",
+    "andMore": "And 15+ more..."
+  },
+  "download": {
+    "title": "Download PicGo",
+    "subtitle": "Available for all major platforms",
+    "macos": "Download for macOS",
+    "windows": "Download for Windows",
+    "linux": "Download for Linux",
+    "or": "or",
+    "viewReleases": "View all releases"
+  },
+  "footer": {
+    "copyright": "© 2017-2024 PicGo. Open source project maintained by",
+    "author": "Molunerfinn",
+    "license": "Licensed under MIT License",
+    "links": {
+      "github": "GitHub",
+      "issues": "Issues",
+      "discussions": "Discussions",
+      "sponsor": "Sponsor"
+    }
+  },
+  "language": {
+    "switch": "Switch Language",
+    "english": "English",
+    "chinese": "中文"
+  }
+}
@@ -0,0 +1,91 @@
+{
+  "nav": {
+    "home": "ホーム",
+    "features": "機能",
+    "plugins": "プラグイン",
+    "download": "ダウンロード",
+    "docs": "ドキュメント",
+    "github": "GitHub"
+  },
+  "hero": {
+    "title": "PicGo",
+    "subtitle": "究極の画像アップロード＆管理ツール",
+    "description": "美しいクロスプラットフォームインターフェースで、複数のクラウドストレージサービスに画像をシームレスにアップロード。20以上の画像ホスティングサービスをサポートし、強力なプラグインシステムを搭載。",
+    "download": "無料ダウンロード",
+    "viewDocs": "ドキュメントを見る",
+    "currentVersion": "現在のバージョン"
+  },
+  "features": {
+    "title": "強力な機能",
+    "subtitle": "効率的な画像管理に必要なすべて",
+    "multiPicbed": {
+      "title": "マルチピクベッドサポート",
+      "description": "GitHub、SMMS、Alibaba Cloud OSS、Qiniu、Tencent COSなど、20以上の画像ホスティングサービスをサポート。異なるピクベッド間をシームレスに切り替え。"
+    },
+    "pluginSystem": {
+      "title": "プラグインシステム",
+      "description": "強力なプラグインでPicGoの機能を拡張。カスタムアップローダーから高度な画像処理まで、可能性は無限大。"
+    },
+    "crossPlatform": {
+      "title": "クロスプラットフォーム",
+      "description": "macOS、Windows、Linuxで利用可能。すべてのプラットフォームでネイティブパフォーマンスと一貫したユーザー体験を提供。"
+    },
+    "clipboardUpload": {
+      "title": "クリップボードアップロード",
+      "description": "単一のショートカットでクリップボードから画像を直接アップロード。スクリーンショットやキャプチャーに最適。"
+    },
+    "batchUpload": {
+      "title": "バッチ操作",
+      "description": "複数の画像を一度にアップロードし、ファイルを自動的にリネーム。バッチ操作で効率的にアップロードを管理。"
+    },
+    "galleryManagement": {
+      "title": "ギャラリー管理",
+      "description": "内蔵ギャラリーですべてのアップロード画像を追跡。検索、プレビュー、画像履歴を簡単に管理。"
+    }
+  },
+  "plugins": {
+    "title": "プラグインエコシステム",
+    "subtitle": "想像を超えてPicGoを拡張",
+    "description": "強力なプラグインシステムにより、新しい画像ホスティングサービスを追加したり、アップロードワークフローをカスタマイズしたり、他のツールと統合したり、さらに多くのことが可能。",
+    "viewPlugins": "プラグインを見る",
+    "createPlugin": "独自のプラグインを作成"
+  },
+  "supportedServices": {
+    "title": "サポートされているサービス",
+    "subtitle": "お気に入りの画像ホスティングサービスと接続",
+    "github": "GitHub",
+    "smms": "SM.MS",
+    "aliyun": "Alibaba Cloud OSS",
+    "qiniu": "Qiniu",
+    "tencent": "Tencent COS",
+    "upyun": "Upyun",
+    "imgur": "Imgur",
+    "weibo": "Weibo",
+    "andMore": "さらに15以上..."
+  },
+  "download": {
+    "title": "PicGoをダウンロード",
+    "subtitle": "すべての主要プラットフォームで利用可能",
+    "macos": "macOS版をダウンロード",
+    "windows": "Windows版をダウンロード",
+    "linux": "Linux版をダウンロード",
+    "or": "または",
+    "viewReleases": "すべてのリリースを見る"
+  },
+  "footer": {
+    "copyright": "© 2017-2024 PicGo。オープンソースプロジェクト、メンテナ：",
+    "author": "Molunerfinn",
+    "license": "MITライセンスの下で提供",
+    "links": {
+      "github": "GitHub",
+      "issues": "問題報告",
+      "discussions": "ディスカッション",
+      "sponsor": "スポンサー"
+    }
+  },
+  "language": {
+    "switch": "言語を切り替え",
+    "english": "English",
+    "chinese": "中文"
+  }
+}
@@ -0,0 +1,91 @@
+{
+  "nav": {
+    "home": "首页",
+    "features": "特性",
+    "plugins": "插件",
+    "download": "下载",
+    "docs": "文档",
+    "github": "GitHub"
+  },
+  "hero": {
+    "title": "PicGo",
+    "subtitle": "终极图片上传与管理工具",
+    "description": "无缝上传图片到多个云存储服务，拥有美观的跨平台界面。支持20多种图床服务，配备强大的插件系统。",
+    "download": "免费下载",
+    "viewDocs": "查看文档",
+    "currentVersion": "当前版本"
+  },
+  "features": {
+    "title": "强大特性",
+    "subtitle": "高效图片管理所需的一切",
+    "multiPicbed": {
+      "title": "多图床支持",
+      "description": "支持20多种图床服务，包括GitHub、SMMS、阿里云OSS、七牛云、腾讯云COS等。无缝切换不同图床。"
+    },
+    "pluginSystem": {
+      "title": "插件系统",
+      "description": "通过强大的插件系统扩展PicGo功能。从自定义上传器到高级图片处理，可能性无限。"
+    },
+    "crossPlatform": {
+      "title": "跨平台",
+      "description": "支持macOS、Windows和Linux，原生性能，所有平台提供一致的用户体验。"
+    },
+    "clipboardUpload": {
+      "title": "剪贴板上传",
+      "description": "通过快捷键直接从剪贴板上传图片。完美适用于快速截图和捕获。"
+    },
+    "batchUpload": {
+      "title": "批量操作",
+      "description": "一次性上传多张图片，自动重命名文件，通过批量操作高效管理上传。"
+    },
+    "galleryManagement": {
+      "title": "相册管理",
+      "description": "通过内置相册跟踪所有上传图片。轻松搜索、预览和管理图片历史记录。"
+    }
+  },
+  "plugins": {
+    "title": "插件生态",
+    "subtitle": "让PicGo超越想象",
+    "description": "凭借强大的插件系统，您可以添加新的图床服务、自定义上传工作流、集成其他工具等等。",
+    "viewPlugins": "浏览插件",
+    "createPlugin": "创建您的插件"
+  },
+  "supportedServices": {
+    "title": "支持的服务",
+    "subtitle": "连接您喜爱的图床服务",
+    "github": "GitHub",
+    "smms": "SM.MS",
+    "aliyun": "阿里云OSS",
+    "qiniu": "七牛云",
+    "tencent": "腾讯云COS",
+    "upyun": "又拍云",
+    "imgur": "Imgur",
+    "weibo": "微博图床",
+    "andMore": "以及15+更多..."
+  },
+  "download": {
+    "title": "下载PicGo",
+    "subtitle": "支持所有主流平台",
+    "macos": "下载macOS版",
+    "windows": "下载Windows版",
+    "linux": "下载Linux版",
+    "or": "或",
+    "viewReleases": "查看所有版本"
+  },
+  "footer": {
+    "copyright": "© 2017-2024 PicGo。由",
+    "author": "Molunerfinn",
+    "license": "维护的开源项目，MIT许可证",
+    "links": {
+      "github": "GitHub",
+      "issues": "问题反馈",
+      "discussions": "讨论",
+      "sponsor": "赞助"
+    }
+  },
+  "language": {
+    "switch": "切换语言",
+    "english": "English",
+    "chinese": "中文"
+  }
+}
@@ -1,10 +1,24 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './APP.vue'
-import 'melody.css'
+import { createI18n } from 'vue-i18n'
+import en from './locales/en.json'
+import zhCN from './locales/zh-CN.json'
+import 'tailwindcss/tailwind.css'
 import axios from 'axios'

-Vue.prototype.$http = axios
+const messages = {
+  en,
+  'zh-CN': zhCN
+}

-new Vue({
-  render: h => h(App)
-}).$mount('#app')
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages
+})
+
+const app = createApp(App)
+app.use(i18n)
+app.config.globalProperties.$http = axios
+app.mount('#app')
@@ -0,0 +1,26 @@
+{
+  "name": "picgo-website",
+  "version": "1.0.0",
+  "description": "Modern PicGo official website",
+  "main": "main.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "serve": "npx serve ."
+  },
+  "dependencies": {
+    "vue": "^3.4.31",
+    "vue-i18n": "^9.13.1",
+    "axios": "^1.7.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "vite": "^5.3.4",
+    "tailwindcss": "^3.4.6",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "serve": "^14.2.3"
+  },
+  "type": "module"
+}
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./**/*.{vue,js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        'sans': ['Inter', 'system-ui', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+}
@@ -4,7 +4,10 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>PicGo</title>
+  <title>PicGo - The Ultimate Image Upload & Management Tool</title>
+  <meta name="description" content="Seamlessly upload images to multiple cloud storage services with a beautiful, cross-platform interface. Supports 20+ image hosting services.">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 </head>
 <body>
  <div id="app"></div>
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 3000,
+    open: true
+  },
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: true,
+    target: 'es2022'
+  },
+  optimizeDeps: {
+    include: ['vue', 'vue-i18n', 'axios']
+  }
+})