feat: 脚本创作+发布+市场体系

- 数据模型新增: title(必填), description(可选), status(draft/published) - 新增 API: POST /scripts/:id/publish, GET /api/market (搜索+分页+runtime过滤) - 前端首页重构: 选语言 → CodeMirror 编辑器(8种语言语法高亮) → 标题/描述 → 草稿/发布 - 新增 /market 页面: 浏览已发布脚本, 搜索+过滤+分页 - 详情页新增: 发布按钮(草稿→市场), title/description 展示 - Shell 类运行时显示 source 命令(继承环境变量) - backend GetSourceCommand 支持 bash/zsh/sh/fish 四种 shell 格式 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-29 14:04:15 +08:00
parent e3d380f9ab
commit e6e4357a28
16 changed files with 1051 additions and 183 deletions
--- a/frontend/src/pages/Market.tsx
+++ b/frontend/src/pages/Market.tsx
@@ -0,0 +1,118 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Link } from 'react-router-dom'
+import { listMarket } from '../lib/api'
+import { MarketItem, RUNTIME_OPTIONS } from '../types'
+
+export default function Market() {
+  const [items, setItems] = useState<MarketItem[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [runtime, setRuntime] = useState('')
+  const [search, setSearch] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  const fetchMarket = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await listMarket({ page, per_page: 20, runtime, search })
+      setItems(res.items)
+      setTotal(res.total)
+    } catch {
+      setItems([])
+    } finally {
+      setLoading(false)
+    }
+  }, [page, runtime, search])
+
+  useEffect(() => { fetchMarket() }, [fetchMarket])
+
+  const totalPages = Math.ceil(total / 20)
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold mb-1">脚本市场</h1>
+        <p className="text-gray-400 text-sm">浏览已发布的脚本，一键获取运行命令</p>
+      </div>
+
+      {/* Search + Filter */}
+      <div className="flex gap-4">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => { setSearch(e.target.value); setPage(1) }}
+          placeholder="搜索脚本..."
+          className="flex-1 px-4 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm focus:outline-none focus:border-blue-500"
+        />
+        <select
+          value={runtime}
+          onChange={(e) => { setRuntime(e.target.value); setPage(1) }}
+          className="px-3 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm focus:outline-none focus:border-blue-500"
+        >
+          <option value="">全部</option>
+          {RUNTIME_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Results */}
+      {loading ? (
+        <div className="text-center py-10 text-gray-500 animate-pulse">加载中...</div>
+      ) : items.length === 0 ? (
+        <div className="text-center py-10">
+          <p className="text-gray-500">暂无脚本</p>
+          <Link to="/" className="text-blue-400 hover:underline text-sm mt-2 block">创建一个</Link>
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2">
+          {items.map((item) => (
+            <Link
+              key={item.id}
+              to={`/s/${item.id}`}
+              className="bg-gray-800/60 border border-gray-700 rounded-lg p-4 hover:border-blue-500/50 transition-colors group"
+            >
+              <div className="flex items-center gap-2 mb-2">
+                <span className="font-medium text-sm group-hover:text-blue-400 transition-colors">
+                  {item.title}
+                </span>
+                <span className="px-1.5 py-0.5 bg-blue-600/20 text-blue-400 text-xs rounded border border-blue-600/30">
+                  {item.runtime}
+                </span>
+              </div>
+              {item.description && (
+                <p className="text-gray-400 text-xs line-clamp-2">{item.description}</p>
+              )}
+              <div className="mt-2 text-xs text-gray-500 font-mono">
+                {item.id}
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex justify-center gap-2">
+          <button
+            onClick={() => setPage(Math.max(1, page - 1))}
+            disabled={page === 1}
+            className="px-3 py-1 bg-gray-800 hover:bg-gray-700 disabled:bg-gray-900 disabled:text-gray-600 rounded text-sm"
+          >
+            上一页
+          </button>
+          <span className="text-sm text-gray-400 py-1">
+            {page} / {totalPages} ({total} 个脚本)
+          </span>
+          <button
+            onClick={() => setPage(Math.min(totalPages, page + 1))}
+            disabled={page === totalPages}
+            className="px-3 py-1 bg-gray-800 hover:bg-gray-700 disabled:bg-gray-900 disabled:text-gray-600 rounded text-sm"
+          >
+            下一页
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}