Add React web application for plugin submission

- Created React app with Vite for plugin marketplace submission
- Implemented GitHub OAuth login flow
- Added repository selection with auto-detection of submitted plugins
- Implemented npm package validation
- Added support for app type plugins (single JS files)
- Created GitHub Actions workflow for deployment
- Updated README with web app information

Co-authored-by: sj817 <74231782+sj817@users.noreply.github.com>

Author: Copilot

.github/workflows/deploy-web.yml

@@ -0,0 +1,67 @@
+name: Deploy Web App to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+      - copilot/implement-github-login-feature
+    paths:
+      - 'web/**'
+      - '.github/workflows/deploy-web.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: 'web/package-lock.json'
+
+      - name: Install dependencies
+        run: |
+          cd web
+          npm ci
+
+      - name: Build
+        run: |
+          cd web
+          npm run build
+
+      - name: Copy plugins.json to dist
+        run: |
+          cp plugins.json web/dist/
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './web/dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -6,6 +6,7 @@
 
 - [插件列表](#插件列表)
 - [提交插件](#提交插件)
+- [在线提交工具](#在线提交工具)
 - [插件规范](#插件规范)
 
 ## 插件列表
@@ -14,13 +15,27 @@
 
 ## 提交插件
 
-### 前置条件
+### 在线提交工具
+
+我们提供了一个在线工具来简化插件提交流程：
+
+🔗 **[插件提交页面](https://karinjs.github.io/plugins-list/)** （开发中）
+
+该工具提供以下功能：
+- 使用 GitHub 登录
+- 自动检测已提交的插件
+- 验证 npm 包存在性
+- 简化的提交流程
+
+### 手动提交
+
+#### 前置条件
 
 1. 确保你的插件符合规范要求
 2. 确保你的插件遵循 [插件规范](#插件规范)
 3. 准备好插件的相关信息
 
-### 提交步骤
+#### 提交步骤
 
 1. Fork 本仓库
 2. 在 `plugins.json` 文件中添加你的插件信息

web/.env.example

@@ -0,0 +1,5 @@
+# GitHub OAuth App Configuration
+# Create a GitHub OAuth App at: https://github.com/settings/developers
+# Set Authorization callback URL to: http://localhost:5173/plugins-list/ (for dev) or https://karinjs.github.io/plugins-list/ (for production)
+
+VITE_GITHUB_CLIENT_ID=your_github_oauth_client_id_here

web/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

web/README.md

@@ -0,0 +1,96 @@
+# Karin 插件市场提交页面
+
+这是一个用于提交插件到 Karin 插件市场的 React 应用。
+
+## 功能
+
+- ✅ GitHub OAuth 登录
+- ✅ 自动获取用户的 GitHub 仓库
+- ✅ 自动检测并勾选已提交的插件（基于 package.json 的 name 字段）
+- ✅ 验证 npm 包是否存在（对于 npm 类型插件）
+- ✅ 支持单 JS 文件类型插件（app 类型，无需 npm 验证）
+
+## 开发
+
+### 前置要求
+
+- Node.js 18+
+- npm 或 pnpm
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 配置 GitHub OAuth
+
+1. 在 GitHub 创建 OAuth App：https://github.com/settings/developers
+2. 设置 Authorization callback URL：
+   - 开发环境：`http://localhost:5173/plugins-list/`
+   - 生产环境：`https://karinjs.github.io/plugins-list/`
+3. 复制 `.env.example` 到 `.env`
+4. 在 `.env` 中填入你的 Client ID
+
+### 开发模式
+
+```bash
+npm run dev
+```
+
+### 构建
+
+```bash
+npm run build
+```
+
+### 部署
+
+构建后的文件在 `dist` 目录中，可以部署到 GitHub Pages 或任何静态网站托管服务。
+
+#### GitHub Pages 部署
+
+1. 确保仓库有 `gh-pages` 分支
+2. 运行构建命令
+3. 将 `dist` 目录的内容推送到 `gh-pages` 分支
+
+## 测试说明
+
+由于 GitHub OAuth 需要后端服务来交换 access token（不能在前端暴露 client secret），当前实现包含以下测试方法：
+
+### 方法 1：使用个人访问令牌（Personal Access Token）
+
+1. 访问 https://github.com/settings/tokens
+2. 点击 "Generate new token (classic)"
+3. 勾选 `repo` 和 `read:user` 权限
+4. 生成令牌并复制
+5. 在浏览器控制台运行：
+   ```javascript
+   localStorage.setItem('github_token', 'YOUR_TOKEN_HERE');
+   ```
+6. 刷新页面
+
+### 方法 2：完整 OAuth 流程
+
+需要配置后端服务来处理 OAuth 回调并交换 token。可以使用：
+- GitHub Actions
+- Cloudflare Workers
+- Vercel Serverless Functions
+- 或任何其他后端服务
+
+## 使用说明
+
+1. 点击"使用 GitHub 登录"按钮
+2. 授权应用访问您的 GitHub 仓库
+3. 查看包含 `package.json` 的仓库列表
+4. 已提交的插件会自动勾选并显示"已提交"标签
+5. 选择要提交的仓库
+6. 点击"提交"按钮进行验证
+7. 验证成功后，会显示可提交的仓库列表
+
+## 注意事项
+
+- 只有包含 `package.json` 的仓库才会显示
+- npm 类型插件会验证包是否在 npm 上存在
+- app 类型插件（单 JS 文件）不需要 npm 验证
+- 插件名称基于 `package.json` 中的 `name` 字段

web/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

web/index.html

@@ -0,0 +1,13 @@
+<!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>web</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>