mirror of
https://github.com/sky22333/hubproxy.git
synced 2026-08-05 03:24:57 +08:00
重构前端
This commit is contained in:
sky22333
BIN
.github/demo/demo.png
vendored
Normal file
BIN
.github/demo/demo.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
.github/demo/demo1.jpg
vendored
BIN
.github/demo/demo1.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
12
.github/workflows/release.yml
vendored
12
.github/workflows/release.yml
vendored
@@ -25,6 +25,18 @@ jobs:
|
||||
with:
|
||||
go-version-file: "src/go.mod"
|
||||
cache-dependency-path: "src/go.sum"
|
||||
|
||||
- name: 设置 Node.js
|
||||
uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version-file: web/package.json
|
||||
cache-dependency-path: web/package-lock.json
|
||||
|
||||
- name: 构建前端
|
||||
run: |
|
||||
cd web
|
||||
npm ci
|
||||
npm run build
|
||||
|
||||
- name: 获取版本号
|
||||
id: version
|
||||
|
||||
25
.gitignore
vendored
25
.gitignore
vendored
@@ -1,5 +1,26 @@
|
||||
.idea
|
||||
.vscode
|
||||
# IDE / OS
|
||||
.idea/
|
||||
.vscode/
|
||||
.DS_Store
|
||||
|
||||
# Go build artifacts
|
||||
/hubproxy*
|
||||
*.exe
|
||||
build/
|
||||
|
||||
# Frontend (web/)
|
||||
web/node_modules/
|
||||
web/dist/
|
||||
web/dist-ssr/
|
||||
web/.tmp/
|
||||
web/*.local
|
||||
web/npm-debug.log*
|
||||
web/yarn-debug.log*
|
||||
web/yarn-error.log*
|
||||
web/pnpm-debug.log*
|
||||
|
||||
# Frontend build output embedded by Go
|
||||
src/dist/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
FROM node:24-alpine AS frontend
|
||||
|
||||
WORKDIR /web
|
||||
COPY web/package.json web/package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY web/ .
|
||||
RUN npm run build
|
||||
|
||||
FROM golang:1.26-alpine AS builder
|
||||
|
||||
ARG TARGETARCH
|
||||
@@ -8,6 +16,7 @@ COPY src/go.mod src/go.sum ./
|
||||
RUN apk add --no-cache upx && go mod download
|
||||
|
||||
COPY src/ .
|
||||
COPY --from=frontend /src/dist ./dist
|
||||
|
||||
RUN CGO_ENABLED=0 GOOS=linux GOARCH=${TARGETARCH} go build -ldflags="-s -w -X main.Version=${VERSION}" -trimpath -o hubproxy . && upx -9 hubproxy
|
||||
|
||||
|
||||
10
README.md
10
README.md
@@ -165,7 +165,7 @@ port = 5000
|
||||
fileSize = 2147483648
|
||||
# HTTP/2 多路复用，提升下载速度
|
||||
enableH2C = false
|
||||
# 是否启用前端静态页面
|
||||
# 是否启用前端页面（Vue SPA）
|
||||
enableFrontend = true
|
||||
|
||||
[rateLimit]
|
||||
@@ -262,7 +262,7 @@ CONFIG_PATH=config.toml # 配置文件路径
|
||||
SERVER_HOST=0.0.0.0 # 监听地址
|
||||
SERVER_PORT=5000 # 监听端口
|
||||
ENABLE_H2C=false # 是否启用 H2C
|
||||
ENABLE_FRONTEND=true # 是否启用前端静态页面
|
||||
ENABLE_FRONTEND=true # 是否启用前端页面（Vue SPA）
|
||||
MAX_FILE_SIZE=2147483648 # GitHub 文件大小限制（字节）
|
||||
RATE_LIMIT=500 # 每周期请求数
|
||||
RATE_PERIOD_HOURS=3 # 限流周期（小时）
|
||||
@@ -314,8 +314,4 @@ example.com {
|
||||
|
||||
## 界面预览
|
||||
|
||||
|
||||
|
||||
## Star History
|
||||
|
||||
[](https://www.star-history.com/?repos=sky22333%2Fhubproxy&type=date&legend=top-left)
|
||||
|
||||
|
||||
@@ -466,9 +466,9 @@ func sendErrorResponse(c *gin.Context, message string) {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": message})
|
||||
}
|
||||
|
||||
// RegisterSearchRoute 注册搜索相关路由
|
||||
// RegisterSearchRoute 注册搜索与标签相关 API 路由。
|
||||
func RegisterSearchRoute(r *gin.Engine) {
|
||||
r.GET("/search", func(c *gin.Context) {
|
||||
r.GET("/api/search", func(c *gin.Context) {
|
||||
query := c.Query("q")
|
||||
if query == "" {
|
||||
sendErrorResponse(c, "搜索关键词不能为空")
|
||||
@@ -486,7 +486,7 @@ func RegisterSearchRoute(r *gin.Engine) {
|
||||
c.JSON(http.StatusOK, result)
|
||||
})
|
||||
|
||||
r.GET("/tags/:namespace/:name", func(c *gin.Context) {
|
||||
r.GET("/api/tags/:namespace/:name", func(c *gin.Context) {
|
||||
namespace := c.Param("namespace")
|
||||
name := c.Param("name")
|
||||
|
||||
@@ -503,15 +503,9 @@ func RegisterSearchRoute(r *gin.Engine) {
|
||||
return
|
||||
}
|
||||
|
||||
if c.Query("page") != "" || c.Query("page_size") != "" {
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"tags": tags,
|
||||
"has_more": hasMore,
|
||||
"page": page,
|
||||
"page_size": pageSize,
|
||||
})
|
||||
} else {
|
||||
c.JSON(http.StatusOK, tags)
|
||||
}
|
||||
c.JSON(http.StatusOK, TagPageResult{
|
||||
Tags: tags,
|
||||
HasMore: hasMore,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
84
src/main.go
84
src/main.go
@@ -4,7 +4,9 @@ import (
|
||||
"embed"
|
||||
"fmt"
|
||||
"log"
|
||||
"mime"
|
||||
"net/http"
|
||||
"path"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
@@ -16,7 +18,7 @@ import (
|
||||
"hubproxy/utils"
|
||||
)
|
||||
|
||||
//go:embed public/*
|
||||
//go:embed all:dist
|
||||
var staticFiles embed.FS
|
||||
|
||||
var (
|
||||
@@ -26,18 +28,63 @@ var (
|
||||
|
||||
var Version = "dev"
|
||||
|
||||
func init() {
|
||||
for ext, typ := range map[string]string{
|
||||
".js": "application/javascript; charset=utf-8",
|
||||
".mjs": "application/javascript; charset=utf-8",
|
||||
".woff": "font/woff",
|
||||
".woff2": "font/woff2",
|
||||
".map": "application/json",
|
||||
} {
|
||||
_ = mime.AddExtensionType(ext, typ)
|
||||
}
|
||||
}
|
||||
|
||||
func contentTypeFor(filename string) string {
|
||||
if ct := mime.TypeByExtension(path.Ext(filename)); ct != "" {
|
||||
return ct
|
||||
}
|
||||
return "application/octet-stream"
|
||||
}
|
||||
|
||||
func serveEmbedFile(c *gin.Context, filename string) {
|
||||
data, err := staticFiles.ReadFile(filename)
|
||||
if err != nil {
|
||||
c.Status(http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
c.Data(http.StatusOK, contentTypeFor(filename), data)
|
||||
}
|
||||
|
||||
contentType := "text/html; charset=utf-8"
|
||||
if strings.HasSuffix(filename, ".ico") {
|
||||
contentType = "image/x-icon"
|
||||
func serveSPA(c *gin.Context) {
|
||||
serveEmbedFile(c, "dist/index.html")
|
||||
}
|
||||
|
||||
func registerFrontendRoutes(router *gin.Engine, enabled bool) {
|
||||
if !enabled {
|
||||
notFound := func(c *gin.Context) { c.Status(http.StatusNotFound) }
|
||||
router.GET("/", notFound)
|
||||
router.GET("/images", notFound)
|
||||
router.GET("/search", notFound)
|
||||
router.GET("/assets/*filepath", notFound)
|
||||
router.GET("/favicon.svg", notFound)
|
||||
return
|
||||
}
|
||||
c.Data(http.StatusOK, contentType, data)
|
||||
|
||||
router.GET("/", serveSPA)
|
||||
router.GET("/images", serveSPA)
|
||||
router.GET("/search", serveSPA)
|
||||
router.GET("/favicon.svg", func(c *gin.Context) {
|
||||
serveEmbedFile(c, "dist/favicon.svg")
|
||||
})
|
||||
router.GET("/assets/*filepath", func(c *gin.Context) {
|
||||
filepath := strings.TrimPrefix(c.Param("filepath"), "/")
|
||||
if filepath == "" || strings.Contains(filepath, "..") {
|
||||
c.Status(http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
serveEmbedFile(c, path.Join("dist/assets", filepath))
|
||||
})
|
||||
}
|
||||
|
||||
func buildRouter(cfg *config.AppConfig) *gin.Engine {
|
||||
@@ -56,32 +103,7 @@ func buildRouter(cfg *config.AppConfig) *gin.Engine {
|
||||
|
||||
initHealthRoutes(router)
|
||||
handlers.InitImageTarRoutes(router)
|
||||
|
||||
if cfg.Server.EnableFrontend {
|
||||
router.GET("/", func(c *gin.Context) {
|
||||
serveEmbedFile(c, "public/index.html")
|
||||
})
|
||||
router.GET("/public/*filepath", func(c *gin.Context) {
|
||||
filepath := strings.TrimPrefix(c.Param("filepath"), "/")
|
||||
serveEmbedFile(c, "public/"+filepath)
|
||||
})
|
||||
router.GET("/images.html", func(c *gin.Context) {
|
||||
serveEmbedFile(c, "public/images.html")
|
||||
})
|
||||
router.GET("/search.html", func(c *gin.Context) {
|
||||
serveEmbedFile(c, "public/search.html")
|
||||
})
|
||||
router.GET("/favicon.ico", func(c *gin.Context) {
|
||||
serveEmbedFile(c, "public/favicon.ico")
|
||||
})
|
||||
} else {
|
||||
router.GET("/", func(c *gin.Context) { c.Status(http.StatusNotFound) })
|
||||
router.GET("/public/*filepath", func(c *gin.Context) { c.Status(http.StatusNotFound) })
|
||||
router.GET("/images.html", func(c *gin.Context) { c.Status(http.StatusNotFound) })
|
||||
router.GET("/search.html", func(c *gin.Context) { c.Status(http.StatusNotFound) })
|
||||
router.GET("/favicon.ico", func(c *gin.Context) { c.Status(http.StatusNotFound) })
|
||||
}
|
||||
|
||||
registerFrontendRoutes(router, cfg.Server.EnableFrontend)
|
||||
handlers.RegisterSearchRoute(router)
|
||||
|
||||
router.Any("/token", handlers.ProxyDockerAuthGin)
|
||||
|
||||
@@ -71,7 +71,7 @@ func TestFrontendDisabledRoutesReturnNotFound(t *testing.T) {
|
||||
enableFrontend = false
|
||||
`)
|
||||
|
||||
for _, path := range []string{"/", "/images.html", "/search.html", "/favicon.ico"} {
|
||||
for _, path := range []string{"/", "/images", "/search", "/favicon.svg"} {
|
||||
w := performRequest(router, http.MethodGet, path, "")
|
||||
if w.Code != http.StatusNotFound {
|
||||
t.Fatalf("%s status = %d, want 404", path, w.Code)
|
||||
@@ -157,10 +157,13 @@ func TestDockerV2PingAndInvalidPath(t *testing.T) {
|
||||
}
|
||||
}
|
||||
|
||||
func TestSearchRouteRejectsMissingQuery(t *testing.T) {
|
||||
router := newTestRouter(t, "")
|
||||
func TestSearchAPIRejectsMissingQuery(t *testing.T) {
|
||||
router := newTestRouter(t, `
|
||||
[server]
|
||||
enableFrontend = false
|
||||
`)
|
||||
|
||||
w := performRequest(router, http.MethodGet, "/search", "")
|
||||
w := performRequest(router, http.MethodGet, "/api/search", "")
|
||||
if w.Code != http.StatusBadRequest {
|
||||
t.Fatalf("status = %d, want 400; body=%s", w.Code, w.Body.String())
|
||||
}
|
||||
@@ -173,3 +176,21 @@ func TestSearchRouteRejectsMissingQuery(t *testing.T) {
|
||||
t.Fatalf("missing error response: %#v", got)
|
||||
}
|
||||
}
|
||||
|
||||
func TestSearchServesSPAWhenFrontendEnabled(t *testing.T) {
|
||||
router := newTestRouter(t, `
|
||||
[server]
|
||||
enableFrontend = true
|
||||
`)
|
||||
|
||||
w := performRequest(router, http.MethodGet, "/search?q=nginx", "")
|
||||
if w.Code != http.StatusOK {
|
||||
t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
|
||||
}
|
||||
if !strings.Contains(w.Header().Get("Content-Type"), "text/html") {
|
||||
t.Fatalf("content-type = %q, want text/html", w.Header().Get("Content-Type"))
|
||||
}
|
||||
if !strings.Contains(w.Body.String(), `<div id="app">`) {
|
||||
t.Fatalf("SPA shell missing: %s", w.Body.String())
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
961
src/public/images.html
vendored
961
src/public/images.html
vendored
@@ -1,961 +0,0 @@
|
||||
<!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="Docker镜像流式下载工具、即点即下无需等待">
|
||||
<meta name="keywords" content="Docker镜像下载、流式下载、即时下载">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<title>Docker离线镜像下载</title>
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<style>
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #0f172a;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #0f172a;
|
||||
--primary: #2563eb;
|
||||
--primary-foreground: #f8fafc;
|
||||
--secondary: #f1f5f9;
|
||||
--secondary-foreground: #0f172a;
|
||||
--muted: #f1f5f9;
|
||||
--muted-foreground: #64748b;
|
||||
--accent: #f1f5f9;
|
||||
--accent-foreground: #0f172a;
|
||||
--border: #e2e8f0;
|
||||
--input: #ffffff;
|
||||
--ring: #2563eb;
|
||||
--radius: 0.5rem;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--error: #ef4444;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #0f172a;
|
||||
--foreground: #f8fafc;
|
||||
--card: #1e293b;
|
||||
--card-foreground: #f8fafc;
|
||||
--primary: #3b82f6;
|
||||
--primary-foreground: #f8fafc;
|
||||
--secondary: #1e293b;
|
||||
--secondary-foreground: #f8fafc;
|
||||
--muted: #1e293b;
|
||||
--muted-foreground: #94a3b8;
|
||||
--accent: #1e293b;
|
||||
--accent-foreground: #f8fafc;
|
||||
--border: #334155;
|
||||
--input: #1e293b;
|
||||
--ring: #3b82f6;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0f172a;
|
||||
--foreground: #f8fafc;
|
||||
--card: #1e293b;
|
||||
--card-foreground: #f8fafc;
|
||||
--primary: #3b82f6;
|
||||
--primary-foreground: #f8fafc;
|
||||
--secondary: #1e293b;
|
||||
--secondary-foreground: #f8fafc;
|
||||
--muted: #1e293b;
|
||||
--muted-foreground: #94a3b8;
|
||||
--accent: #1e293b;
|
||||
--accent-foreground: #f8fafc;
|
||||
--border: #334155;
|
||||
--input: #1e293b;
|
||||
--ring: #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dark .navbar {
|
||||
background-color: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--primary), #3b82f6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
text-decoration: none;
|
||||
color: var(--muted-foreground);
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--foreground);
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
padding: 0.5rem;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background-color: transparent;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--muted);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* 主要内容 */
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, var(--primary), #3b82f6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--muted-foreground);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* 下载区域 */
|
||||
.download-section,
|
||||
.batch-section {
|
||||
background-color: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select,
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--input);
|
||||
color: var(--foreground);
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus,
|
||||
.textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: rgba(16, 185, 129, 0.1);
|
||||
color: var(--success);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
color: var(--error);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: rgba(245, 158, 11, 0.1);
|
||||
color: var(--warning);
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted-foreground);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-container {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.download-section,
|
||||
.batch-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.features {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 切换开关样式 */
|
||||
.switch-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--muted);
|
||||
transition: 0.2s;
|
||||
border-radius: 24px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
transition: 0.2s;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-container {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
z-index: 1000;
|
||||
transform: translateY(-100vh);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: block !important;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--foreground);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle:hover {
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.download-section,
|
||||
.batch-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.features {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<div class="navbar-container">
|
||||
<a href="/" class="logo">
|
||||
<div class="logo-icon">
|
||||
⚡
|
||||
</div>
|
||||
加速服务
|
||||
</a>
|
||||
|
||||
<button class="mobile-menu-toggle" id="mobileMenuToggle">
|
||||
☰
|
||||
</button>
|
||||
|
||||
<div class="nav-links" id="navLinks">
|
||||
<a href="/" class="nav-link">🚀 GitHub加速</a>
|
||||
<a href="/images.html" class="nav-link active">🐳 离线镜像下载</a>
|
||||
<a href="/search.html" class="nav-link">🔍 镜像搜索</a>
|
||||
|
||||
<button class="theme-toggle" id="themeToggle">
|
||||
🌙
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="main">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">Docker离线镜像下载</h1>
|
||||
<p class="subtitle">即点即下，无需等待打包，完全符合docker load加载标准</p>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<span class="feature-icon">⚡</span>
|
||||
<span>即时下载</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🔄</span>
|
||||
<span>流式传输</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-icon">💾</span>
|
||||
<span>无需等待</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🏗️</span>
|
||||
<span>多架构支持</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="download-section">
|
||||
<h2 class="section-title">单镜像下载</h2>
|
||||
|
||||
<div id="singleStatus"></div>
|
||||
|
||||
<form id="singleForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="imageInput">镜像名称</label>
|
||||
<input
|
||||
type="text"
|
||||
id="imageInput"
|
||||
class="form-input"
|
||||
placeholder="例如: nginx:alpine"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="platformInput">目标架构（可选）</label>
|
||||
<input
|
||||
type="text"
|
||||
id="platformInput"
|
||||
class="form-input"
|
||||
placeholder="linux/amd64"
|
||||
value="linux/amd64"
|
||||
>
|
||||
<div class="help-text">
|
||||
常用平台: linux/amd64, linux/arm64, linux/arm/v7
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="compressedToggle" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label for="compressedToggle" class="switch-label">使用压缩层（减小包体积）</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-full" id="downloadBtn">
|
||||
<span id="downloadText">立即下载</span>
|
||||
<span id="downloadLoading" class="loading hidden"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="batch-section">
|
||||
<h2 class="section-title">多个镜像批量下载</h2>
|
||||
|
||||
<div id="batchStatus"></div>
|
||||
|
||||
<form id="batchForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="imagesTextarea">镜像列表，每行一个，会将多个镜像自动合并，符合官方标准，兼容docker load</label>
|
||||
<textarea
|
||||
id="imagesTextarea"
|
||||
class="textarea"
|
||||
placeholder="alpine redis:alpine stilleshan/frpc:0.62.1"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="batchPlatformInput">目标架构（可选）</label>
|
||||
<input
|
||||
type="text"
|
||||
id="batchPlatformInput"
|
||||
class="form-input"
|
||||
placeholder="linux/amd64"
|
||||
value="linux/amd64"
|
||||
>
|
||||
<div class="help-text">
|
||||
所有镜像将使用相同的目标架构
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="batchCompressedToggle" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label for="batchCompressedToggle" class="switch-label">使用压缩层（减小包体积）</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-full" id="batchDownloadBtn">
|
||||
<span id="batchDownloadText">开始下载</span>
|
||||
<span id="batchDownloadLoading" class="loading hidden"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function initTheme() {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
||||
html.classList.add('dark');
|
||||
themeToggle.textContent = '☀️';
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
html.classList.toggle('dark');
|
||||
const isDark = html.classList.contains('dark');
|
||||
themeToggle.textContent = isDark ? '☀️' : '🌙';
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||
});
|
||||
}
|
||||
|
||||
function showStatus(elementId, message, type = 'success') {
|
||||
const element = document.getElementById(elementId);
|
||||
element.className = `status status-${type}`;
|
||||
element.textContent = message;
|
||||
element.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function hideStatus(elementId) {
|
||||
document.getElementById(elementId).classList.add('hidden');
|
||||
}
|
||||
|
||||
function setButtonLoading(btnId, textId, loadingId, loading) {
|
||||
const btn = document.getElementById(btnId);
|
||||
const text = document.getElementById(textId);
|
||||
const loadingSpinner = document.getElementById(loadingId);
|
||||
|
||||
btn.disabled = loading;
|
||||
if (loading) {
|
||||
text.classList.add('hidden');
|
||||
loadingSpinner.classList.remove('hidden');
|
||||
} else {
|
||||
text.classList.remove('hidden');
|
||||
loadingSpinner.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function buildDownloadUrl(imageName, platform = '', useCompressed = true, mode = '') {
|
||||
const params = new URLSearchParams();
|
||||
params.set('image', imageName);
|
||||
if (platform && platform.trim()) {
|
||||
params.set('platform', platform.trim());
|
||||
}
|
||||
params.set('compressed', useCompressed.toString());
|
||||
if (mode) {
|
||||
params.set('mode', mode);
|
||||
}
|
||||
return '/api/image/download?' + params.toString();
|
||||
}
|
||||
|
||||
function buildInfoUrl(imageName) {
|
||||
const params = new URLSearchParams();
|
||||
params.set('image', imageName);
|
||||
return '/api/image/info?' + params.toString();
|
||||
}
|
||||
|
||||
async function preflightImageDownload(imageName) {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 8000);
|
||||
try {
|
||||
const response = await fetch(buildInfoUrl(imageName), {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
cache: 'no-store',
|
||||
signal: controller.signal
|
||||
});
|
||||
|
||||
const contentType = response.headers.get('Content-Type') || '';
|
||||
let payload = null;
|
||||
if (contentType.includes('application/json')) {
|
||||
payload = await response.json();
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
return { ok: false, error: (payload && payload.error) ? payload.error : '镜像预检失败' };
|
||||
}
|
||||
|
||||
if (payload && payload.success === false) {
|
||||
return { ok: false, error: payload.error || '镜像预检失败' };
|
||||
}
|
||||
|
||||
return { ok: true };
|
||||
} catch (error) {
|
||||
if (error.name === 'AbortError') {
|
||||
return { ok: false, error: '预检超时，请稍后重试' };
|
||||
}
|
||||
return { ok: false, error: '网络错误: ' + error.message };
|
||||
} finally {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
}
|
||||
|
||||
async function preflightImages(images) {
|
||||
const uniqueImages = Array.from(new Set(images));
|
||||
const results = await Promise.allSettled(uniqueImages.map((imageName) => preflightImageDownload(imageName)));
|
||||
for (let i = 0; i < results.length; i++) {
|
||||
const result = results[i];
|
||||
if (result.status === 'rejected') {
|
||||
return { ok: false, error: '预检失败，请稍后重试' };
|
||||
}
|
||||
if (!result.value.ok) {
|
||||
return { ok: false, error: result.value.error || '预检失败' };
|
||||
}
|
||||
}
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
document.getElementById('singleForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const imageName = document.getElementById('imageInput').value.trim();
|
||||
if (!imageName) {
|
||||
showStatus('singleStatus', '请输入镜像名称', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const platform = document.getElementById('platformInput').value.trim();
|
||||
const useCompressed = document.getElementById('compressedToggle').checked;
|
||||
|
||||
hideStatus('singleStatus');
|
||||
setButtonLoading('downloadBtn', 'downloadText', 'downloadLoading', true);
|
||||
|
||||
showStatus('singleStatus', '正在准备下载...', 'success');
|
||||
const preflightResult = await preflightImages([imageName]);
|
||||
if (!preflightResult.ok) {
|
||||
showStatus('singleStatus', preflightResult.error, 'error');
|
||||
setButtonLoading('downloadBtn', 'downloadText', 'downloadLoading', false);
|
||||
return;
|
||||
}
|
||||
|
||||
const prepareUrl = buildDownloadUrl(imageName, platform, useCompressed, 'prepare');
|
||||
try {
|
||||
const response = await fetch(prepareUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
cache: 'no-store'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (!data || !data.download_url) {
|
||||
showStatus('singleStatus', '下载地址生成失败', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = data.download_url;
|
||||
link.download = '';
|
||||
link.style.display = 'none';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
const platformText = platform ? ` (${platform})` : '';
|
||||
showStatus('singleStatus', `开始下载 ${imageName}${platformText}`, 'success');
|
||||
} else {
|
||||
const error = await response.json();
|
||||
showStatus('singleStatus', error.error || '下载失败', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showStatus('singleStatus', '网络错误: ' + error.message, 'error');
|
||||
} finally {
|
||||
setButtonLoading('downloadBtn', 'downloadText', 'downloadLoading', false);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('batchForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const imagesText = document.getElementById('imagesTextarea').value.trim();
|
||||
if (!imagesText) {
|
||||
showStatus('batchStatus', '请输入镜像列表', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const images = imagesText.split('\n')
|
||||
.map(line => line.trim())
|
||||
.filter(line => line && !line.startsWith('#'));
|
||||
|
||||
if (images.length === 0) {
|
||||
showStatus('batchStatus', '镜像列表为空', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const platform = document.getElementById('batchPlatformInput').value.trim();
|
||||
const useCompressed = document.getElementById('batchCompressedToggle').checked;
|
||||
|
||||
const options = {
|
||||
images: images,
|
||||
useCompressedLayers: useCompressed
|
||||
};
|
||||
|
||||
if (platform) {
|
||||
options.platform = platform;
|
||||
}
|
||||
|
||||
hideStatus('batchStatus');
|
||||
setButtonLoading('batchDownloadBtn', 'batchDownloadText', 'batchDownloadLoading', true);
|
||||
showStatus('batchStatus', '正在准备下载...', 'success');
|
||||
const preflightResult = await preflightImages(images);
|
||||
if (!preflightResult.ok) {
|
||||
showStatus('batchStatus', preflightResult.error, 'error');
|
||||
setButtonLoading('batchDownloadBtn', 'batchDownloadText', 'batchDownloadLoading', false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/image/batch?mode=prepare', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(options)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (!data || !data.download_url) {
|
||||
showStatus('batchStatus', '下载地址生成失败', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const url = data.download_url;
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.style.display = 'none';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
const platformText = platform ? ` (${platform})` : '';
|
||||
showStatus('batchStatus', `开始下载 ${images.length} 个镜像${platformText}`, 'success');
|
||||
} else {
|
||||
const error = await response.json();
|
||||
showStatus('batchStatus', error.error || '下载失败', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showStatus('batchStatus', '网络错误: ' + error.message, 'error');
|
||||
} finally {
|
||||
setButtonLoading('batchDownloadBtn', 'batchDownloadText', 'batchDownloadLoading', false);
|
||||
}
|
||||
});
|
||||
|
||||
function initMobileMenu() {
|
||||
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
|
||||
const navLinks = document.getElementById('navLinks');
|
||||
|
||||
if (mobileMenuToggle && navLinks) {
|
||||
mobileMenuToggle.addEventListener('click', () => {
|
||||
navLinks.classList.toggle('active');
|
||||
});
|
||||
|
||||
navLinks.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('nav-link')) {
|
||||
navLinks.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
initTheme();
|
||||
initMobileMenu();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
832
src/public/index.html
vendored
832
src/public/index.html
vendored
@@ -1,832 +0,0 @@
|
||||
<!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="Github文件加速、docker镜像加速">
|
||||
<meta name="keywords" content="Github、文件加速、ghproxy、docker镜像加速">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<title>Github、Docker加速</title>
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<style>
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #0f172a;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #0f172a;
|
||||
--primary: #2563eb;
|
||||
--primary-foreground: #f8fafc;
|
||||
--secondary: #f1f5f9;
|
||||
--secondary-foreground: #0f172a;
|
||||
--muted: #f1f5f9;
|
||||
--muted-foreground: #64748b;
|
||||
--accent: #f1f5f9;
|
||||
--accent-foreground: #0f172a;
|
||||
--border: #e2e8f0;
|
||||
--input: #ffffff;
|
||||
--ring: #2563eb;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #0f172a;
|
||||
--foreground: #f8fafc;
|
||||
--card: #1e293b;
|
||||
--card-foreground: #f8fafc;
|
||||
--primary: #3b82f6;
|
||||
--primary-foreground: #f8fafc;
|
||||
--secondary: #1e293b;
|
||||
--secondary-foreground: #f8fafc;
|
||||
--muted: #1e293b;
|
||||
--muted-foreground: #94a3b8;
|
||||
--accent: #1e293b;
|
||||
--accent-foreground: #f8fafc;
|
||||
--border: #334155;
|
||||
--input: #1e293b;
|
||||
--ring: #3b82f6;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0f172a;
|
||||
--foreground: #f8fafc;
|
||||
--card: #1e293b;
|
||||
--card-foreground: #f8fafc;
|
||||
--primary: #3b82f6;
|
||||
--primary-foreground: #f8fafc;
|
||||
--secondary: #1e293b;
|
||||
--secondary-foreground: #f8fafc;
|
||||
--muted: #1e293b;
|
||||
--muted-foreground: #94a3b8;
|
||||
--accent: #1e293b;
|
||||
--accent-foreground: #f8fafc;
|
||||
--border: #334155;
|
||||
--input: #1e293b;
|
||||
--ring: #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: var(--background);
|
||||
backdrop-filter: blur(8px);
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.dark .navbar {
|
||||
background-color: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--primary), #3b82f6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
text-decoration: none;
|
||||
color: var(--muted-foreground);
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--foreground);
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
padding: 0.5rem;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background-color: transparent;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--muted);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, var(--primary), #3b82f6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--muted-foreground);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInUp 0.6s ease-out 0.2s forwards;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--input);
|
||||
color: var(--foreground);
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background-color: #1d4ed8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
.output-container {
|
||||
margin-top: 1.5rem;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.output-container.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.success-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.output-box {
|
||||
background-color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.875rem;
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.output-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.docker-info {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInUp 0.6s ease-out 0.4s forwards;
|
||||
}
|
||||
|
||||
.docker-button {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.docker-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .docker-button {
|
||||
background: linear-gradient(135deg, #374151, #4b5563);
|
||||
}
|
||||
|
||||
.dark .docker-button:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--card);
|
||||
border-radius: 0.75rem;
|
||||
padding: 2rem;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--muted-foreground);
|
||||
padding: 0.25rem;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
.domain-examples {
|
||||
background-color: var(--muted);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.domain-examples strong {
|
||||
color: var(--foreground);
|
||||
display: block;
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.domain-examples strong:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1001;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.github-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--muted-foreground);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
z-index: 1000;
|
||||
transform: translateY(-100vh);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: block !important;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--foreground);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle:hover {
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 0.875rem 1.5rem;
|
||||
}
|
||||
|
||||
.output-actions {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<div class="navbar-container">
|
||||
<a href="/" class="logo">
|
||||
<div class="logo-icon">
|
||||
⚡
|
||||
</div>
|
||||
加速服务
|
||||
</a>
|
||||
|
||||
<button class="mobile-menu-toggle" id="mobileMenuToggle">
|
||||
☰
|
||||
</button>
|
||||
|
||||
<div class="nav-links" id="navLinks">
|
||||
<a href="/" class="nav-link active">🚀 GitHub加速</a>
|
||||
<a href="/images.html" class="nav-link">🐳 离线镜像下载</a>
|
||||
<a href="/search.html" class="nav-link">🔍 镜像搜索</a>
|
||||
|
||||
<button class="theme-toggle" id="themeToggle">
|
||||
🌙
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="main">
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<h1 class="hero-title">GitHub 文件加速</h1>
|
||||
<p class="hero-subtitle">
|
||||
快速下载GitHub上的文件和仓库，解决国内访问GitHub速度慢的问题，支持Docker镜像加速和Hugging Face仓库。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
⚡ 快速转换加速链接
|
||||
</h2>
|
||||
<p class="card-description">
|
||||
输入GitHub文件链接，自动转换加速链接，可以直接在Github文件链接前加上本站域名使用。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-container">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
id="githubLinkInput"
|
||||
placeholder="请输入GitHub文件链接，例如：https://github.com/user/repo/releases/download/..."
|
||||
>
|
||||
<button class="button button-primary" id="formatButton">
|
||||
获取加速链接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-container" id="outputBlock">
|
||||
<div class="success-header">
|
||||
<span>✅</span>
|
||||
<strong>加速链接已生成</strong>
|
||||
</div>
|
||||
<div class="output-box" id="formattedLinkOutput"></div>
|
||||
<div class="output-actions">
|
||||
<button class="button button-secondary" id="copyButton">
|
||||
📋 复制链接
|
||||
</button>
|
||||
<button class="button button-secondary" id="redirButton">
|
||||
🔗 打开链接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card docker-info">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
🐳 Docker 镜像加速
|
||||
</h3>
|
||||
<p class="card-description">
|
||||
支持多种镜像仓库，在镜像名称前添加本站域名即可加速下载。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button class="docker-button" id="dockerButton">
|
||||
查看 Docker 镜像加速使用说明
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="dockerModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<button class="close-button" id="closeModal">×</button>
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Docker 镜像加速</h2>
|
||||
<p>支持多种镜像仓库，在镜像名称前添加本站域名即可加速下载。</p>
|
||||
</div>
|
||||
|
||||
<div class="domain-examples">
|
||||
<strong>Docker 官方镜像：</strong>
|
||||
docker pull <span class="domain-base"></span>/nginx
|
||||
|
||||
<strong>Docker 镜像：</strong>
|
||||
docker pull <span class="domain-base"></span>/user/image
|
||||
|
||||
<strong>ghcr.io 镜像：</strong>
|
||||
docker pull <span class="domain-base"></span>/ghcr.io/user/image
|
||||
|
||||
<strong>Quay.io 镜像：</strong>
|
||||
docker pull <span class="domain-base"></span>/quay.io/org/image
|
||||
|
||||
<strong>Kubernetes 镜像：</strong>
|
||||
docker pull <span class="domain-base"></span>/registry.k8s.io/pause:3.8
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast" class="toast">
|
||||
链接已复制到剪贴板
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<a href="https://github.com/sky22333/hubproxy" target="_blank" class="github-link">
|
||||
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
||||
html.classList.add('dark');
|
||||
themeToggle.textContent = '☀️';
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
html.classList.toggle('dark');
|
||||
const isDark = html.classList.contains('dark');
|
||||
themeToggle.textContent = isDark ? '☀️' : '🌙';
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const fullDomain = window.location.host;
|
||||
document.querySelectorAll('.domain-base').forEach(span => {
|
||||
span.textContent = fullDomain;
|
||||
});
|
||||
|
||||
const modal = document.getElementById('dockerModal');
|
||||
const dockerButton = document.getElementById('dockerButton');
|
||||
const closeButton = document.getElementById('closeModal');
|
||||
|
||||
dockerButton.onclick = () => modal.style.display = "flex";
|
||||
closeButton.onclick = () => modal.style.display = "none";
|
||||
window.onclick = (event) => {
|
||||
if (event.target == modal) modal.style.display = "none";
|
||||
};
|
||||
});
|
||||
|
||||
function formatGithubLink() {
|
||||
const githubLinkInput = document.getElementById('githubLinkInput');
|
||||
const currentHost = window.location.host;
|
||||
let formattedLink = "";
|
||||
const link = githubLinkInput.value.trim();
|
||||
|
||||
if (link.startsWith("https://") || link.startsWith("http://")) {
|
||||
formattedLink = "https://" + currentHost + "/" + link;
|
||||
} else if (
|
||||
link.startsWith("github.com/") ||
|
||||
link.startsWith("raw.githubusercontent.com/") ||
|
||||
link.startsWith("gist.githubusercontent.com/") ||
|
||||
link.startsWith("huggingface.co/") ||
|
||||
link.startsWith("cdn-lfs.hf.co/")
|
||||
) {
|
||||
formattedLink = "https://" + currentHost + "/https://" + link;
|
||||
} else {
|
||||
showToast('请输入有效的链接');
|
||||
return;
|
||||
}
|
||||
|
||||
const formattedLinkOutput = document.getElementById('formattedLinkOutput');
|
||||
formattedLinkOutput.textContent = formattedLink;
|
||||
|
||||
const outputBlock = document.getElementById('outputBlock');
|
||||
outputBlock.classList.add('show');
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
const output = document.getElementById('formattedLinkOutput');
|
||||
const text = output.textContent;
|
||||
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showToast('链接已复制到剪贴板');
|
||||
}).catch(() => {
|
||||
showToast('复制失败');
|
||||
});
|
||||
} else {
|
||||
const range = document.createRange();
|
||||
range.selectNode(output);
|
||||
window.getSelection().removeAllRanges();
|
||||
window.getSelection().addRange(range);
|
||||
document.execCommand('copy');
|
||||
window.getSelection().removeAllRanges();
|
||||
showToast('链接已复制到剪贴板');
|
||||
}
|
||||
}
|
||||
|
||||
function openLink() {
|
||||
const formattedLinkOutput = document.getElementById('formattedLinkOutput');
|
||||
window.open(formattedLinkOutput.textContent);
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = message;
|
||||
toast.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
document.getElementById('formatButton').addEventListener('click', formatGithubLink);
|
||||
document.getElementById('copyButton').addEventListener('click', copyToClipboard);
|
||||
document.getElementById('redirButton').addEventListener('click', openLink);
|
||||
|
||||
document.getElementById('githubLinkInput').addEventListener('keyup', function(event) {
|
||||
if (event.key === 'Enter') {
|
||||
formatGithubLink();
|
||||
}
|
||||
});
|
||||
|
||||
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
|
||||
const navLinks = document.getElementById('navLinks');
|
||||
|
||||
mobileMenuToggle.addEventListener('click', () => {
|
||||
navLinks.classList.toggle('active');
|
||||
mobileMenuToggle.textContent = navLinks.classList.contains('active') ? '✕' : '☰';
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.navbar') && navLinks.classList.contains('active')) {
|
||||
navLinks.classList.remove('active');
|
||||
mobileMenuToggle.textContent = '☰';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1501
src/public/search.html
vendored
1501
src/public/search.html
vendored
File diff suppressed because it is too large
Load Diff
@@ -212,8 +212,9 @@ func (i *IPRateLimiter) GetLimiter(ip string) (*rate.Limiter, bool) {
|
||||
func RateLimitMiddleware(limiter *IPRateLimiter) gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
path := c.Request.URL.Path
|
||||
if path == "/" || path == "/favicon.ico" || path == "/images.html" || path == "/search.html" ||
|
||||
strings.HasPrefix(path, "/public/") {
|
||||
if path == "/" || path == "/images" || path == "/search" ||
|
||||
path == "/favicon.svg" ||
|
||||
strings.HasPrefix(path, "/assets/") {
|
||||
c.Next()
|
||||
return
|
||||
}
|
||||
|
||||
24
web/.gitignore
vendored
Normal file
24
web/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
9
web/README.md
Normal file
9
web/README.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# HubProxy Web
|
||||
|
||||
Vue 3 + Vite + Tailwind 前端。
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev # 代理到 :5000
|
||||
npm run build # 输出到 ../src/dist
|
||||
```
|
||||
14
web/index.html
vendored
Normal file
14
web/index.html
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="HubProxy - GitHub 加速、Docker 镜像加速与离线下载" />
|
||||
<title>HubProxy</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1723
web/package-lock.json
generated
Normal file
1723
web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
web/package.json
Normal file
34
web/package.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"packageManager": "npm@11.12.1",
|
||||
"engines": {
|
||||
"node": ">=24"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/manrope": "^5.2.8",
|
||||
"@fontsource/syne": "^5.2.7",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-vue-next": "^0.577.0",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"vue": "^3.5.39",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.3.2",
|
||||
"@types/node": "^24.13.2",
|
||||
"@vitejs/plugin-vue": "^6.0.7",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"tailwindcss": "^4.3.2",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.1.1",
|
||||
"vue-tsc": "^3.3.5"
|
||||
}
|
||||
}
|
||||
1
web/public/favicon.svg
Normal file
1
web/public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
web/public/icons.svg
Normal file
24
web/public/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
14
web/src/App.vue
Normal file
14
web/src/App.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import AppShell from '@/components/AppShell.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppShell>
|
||||
<RouterView v-slot="{ Component, route }">
|
||||
<Transition name="page">
|
||||
<component :is="Component" :key="route.path" />
|
||||
</Transition>
|
||||
</RouterView>
|
||||
</AppShell>
|
||||
</template>
|
||||
137
web/src/api.ts
Normal file
137
web/src/api.ts
Normal file
@@ -0,0 +1,137 @@
|
||||
class ApiError extends Error {
|
||||
status: number
|
||||
|
||||
constructor(message: string, status: number) {
|
||||
super(message)
|
||||
this.name = 'ApiError'
|
||||
this.status = status
|
||||
}
|
||||
}
|
||||
|
||||
async function parseError(res: Response): Promise<string> {
|
||||
const contentType = res.headers.get('Content-Type') || ''
|
||||
if (contentType.includes('application/json')) {
|
||||
try {
|
||||
const data = (await res.json()) as { error?: string; message?: string }
|
||||
return data.error || data.message || `请求失败 (${res.status})`
|
||||
} catch {
|
||||
return `请求失败 (${res.status})`
|
||||
}
|
||||
}
|
||||
try {
|
||||
const text = await res.text()
|
||||
return text || `请求失败 (${res.status})`
|
||||
} catch {
|
||||
return `请求失败 (${res.status})`
|
||||
}
|
||||
}
|
||||
|
||||
async function getJSON<T>(url: string, init?: RequestInit): Promise<T> {
|
||||
const res = await fetch(url, {
|
||||
...init,
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
...(init?.headers || {}),
|
||||
},
|
||||
cache: 'no-store',
|
||||
})
|
||||
if (!res.ok) throw new ApiError(await parseError(res), res.status)
|
||||
return (await res.json()) as T
|
||||
}
|
||||
|
||||
export interface PrepareDownloadResponse {
|
||||
download_url: string
|
||||
}
|
||||
|
||||
export interface ImageInfoResponse {
|
||||
success: boolean
|
||||
}
|
||||
|
||||
export interface Repository {
|
||||
repo_name?: string
|
||||
short_description?: string
|
||||
is_official?: boolean
|
||||
star_count?: number
|
||||
pull_count?: number
|
||||
namespace?: string
|
||||
}
|
||||
|
||||
export interface SearchResponse {
|
||||
count: number
|
||||
results: Repository[]
|
||||
}
|
||||
|
||||
export interface TagInfo {
|
||||
name: string
|
||||
last_updated?: string
|
||||
full_size?: number
|
||||
images?: Array<{
|
||||
architecture?: string
|
||||
os?: string
|
||||
variant?: string
|
||||
size?: number
|
||||
}>
|
||||
}
|
||||
|
||||
export interface TagPageResult {
|
||||
tags: TagInfo[]
|
||||
has_more: boolean
|
||||
}
|
||||
|
||||
export function prepareSingleDownload(params: {
|
||||
image: string
|
||||
platform?: string
|
||||
compressed: boolean
|
||||
}) {
|
||||
const q = new URLSearchParams()
|
||||
q.set('image', params.image)
|
||||
q.set('mode', 'prepare')
|
||||
q.set('compressed', String(params.compressed))
|
||||
if (params.platform?.trim()) q.set('platform', params.platform.trim())
|
||||
return getJSON<PrepareDownloadResponse>(`/api/image/download?${q}`)
|
||||
}
|
||||
|
||||
export function fetchImageInfo(image: string) {
|
||||
const q = new URLSearchParams({ image })
|
||||
return getJSON<ImageInfoResponse>(`/api/image/info?${q}`)
|
||||
}
|
||||
|
||||
export function prepareBatchDownload(body: {
|
||||
images: string[]
|
||||
platform?: string
|
||||
useCompressedLayers: boolean
|
||||
}) {
|
||||
return getJSON<PrepareDownloadResponse>('/api/image/batch?mode=prepare', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
}
|
||||
|
||||
export function searchImages(q: string, page: number, pageSize = 25) {
|
||||
const params = new URLSearchParams({
|
||||
q,
|
||||
page: String(page),
|
||||
page_size: String(pageSize),
|
||||
})
|
||||
return getJSON<SearchResponse>(`/api/search?${params}`)
|
||||
}
|
||||
|
||||
export function fetchTags(namespace: string, name: string, page: number, pageSize = 100) {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page),
|
||||
page_size: String(pageSize),
|
||||
})
|
||||
return getJSON<TagPageResult>(
|
||||
`/api/tags/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}?${params}`,
|
||||
)
|
||||
}
|
||||
|
||||
export function triggerDownload(url: string) {
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.style.display = 'none'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
120
web/src/components/AppShell.vue
Normal file
120
web/src/components/AppShell.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { RouterLink, useRoute } from 'vue-router'
|
||||
import { Container, Github, Menu, Rocket, Search, X, Zap } from 'lucide-vue-next'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import ThemeToggle from '@/components/ThemeToggle.vue'
|
||||
|
||||
const STORAGE_KEY = 'theme'
|
||||
const route = useRoute()
|
||||
const isDark = ref(false)
|
||||
const menuOpen = ref(false)
|
||||
|
||||
const links = [
|
||||
{ to: '/', label: 'GitHub 加速', icon: Rocket },
|
||||
{ to: '/images', label: '离线镜像', icon: Container },
|
||||
{ to: '/search', label: '镜像搜索', icon: Search },
|
||||
] as const
|
||||
|
||||
const currentPath = computed(() => route.path)
|
||||
|
||||
function applyTheme(dark: boolean) {
|
||||
isDark.value = dark
|
||||
document.documentElement.classList.toggle('dark', dark)
|
||||
localStorage.setItem(STORAGE_KEY, dark ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
applyTheme(!isDark.value)
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuOpen.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
if (saved === 'dark' || saved === 'light') {
|
||||
applyTheme(saved === 'dark')
|
||||
} else {
|
||||
applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="shell-atmosphere flex min-h-screen flex-col text-foreground">
|
||||
<header class="sticky top-0 z-50 border-b border-border/50 bg-background/70 backdrop-blur-xl">
|
||||
<div class="mx-auto flex h-[4.25rem] max-w-6xl items-center justify-between gap-3 px-5 sm:px-8">
|
||||
<RouterLink
|
||||
to="/"
|
||||
class="flex items-center gap-3 font-display text-lg font-semibold tracking-tight transition-opacity hover:opacity-80"
|
||||
@click="closeMenu"
|
||||
>
|
||||
<span class="brand-mark flex size-9 items-center justify-center rounded-lg">
|
||||
<Zap class="size-[18px]" />
|
||||
</span>
|
||||
<span>HubProxy</span>
|
||||
</RouterLink>
|
||||
|
||||
<nav class="hidden items-center gap-1.5 md:flex">
|
||||
<RouterLink
|
||||
v-for="link in links"
|
||||
:key="link.to"
|
||||
:to="link.to"
|
||||
class="inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-[15px] transition-colors duration-150"
|
||||
:class="currentPath === link.to ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent hover:text-foreground'"
|
||||
>
|
||||
<component :is="link.icon" class="size-4" />
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
<ThemeToggle :is-dark="isDark" button-class="ml-1" @toggle="toggleTheme" />
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center gap-0.5 md:hidden">
|
||||
<ThemeToggle :is-dark="isDark" @toggle="toggleTheme" />
|
||||
<Button variant="ghost" size="icon" aria-label="菜单" @click="menuOpen = !menuOpen">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<X v-if="menuOpen" key="x" class="size-4" />
|
||||
<Menu v-else key="menu" class="size-4" />
|
||||
</Transition>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="menu">
|
||||
<div v-if="menuOpen" class="border-t border-border px-5 py-2 md:hidden">
|
||||
<div class="flex flex-col gap-1">
|
||||
<RouterLink
|
||||
v-for="link in links"
|
||||
:key="link.to"
|
||||
:to="link.to"
|
||||
class="inline-flex items-center gap-2 rounded-full px-3.5 py-2 text-[15px] transition-colors"
|
||||
:class="currentPath === link.to ? 'bg-primary text-primary-foreground' : 'text-muted-foreground'"
|
||||
@click="closeMenu"
|
||||
>
|
||||
<component :is="link.icon" class="size-4" />
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</header>
|
||||
|
||||
<main class="mx-auto w-full max-w-6xl flex-1 px-5 py-10 text-base sm:px-8 sm:py-16">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer class="flex justify-center pb-10 pt-2">
|
||||
<a
|
||||
href="https://github.com/sky22333/hubproxy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
class="text-muted-foreground transition-colors duration-150 hover:text-foreground"
|
||||
>
|
||||
<Github class="size-5" />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
19
web/src/components/PageHero.vue
Normal file
19
web/src/components/PageHero.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
eyebrow: string
|
||||
title: string
|
||||
subtitle: string
|
||||
gradient?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="page-hero">
|
||||
<p class="eyebrow">{{ eyebrow }}</p>
|
||||
<h1 class="display-title" :class="{ 'gradient-text': gradient }">{{ title }}</h1>
|
||||
<p class="mx-auto max-w-xl text-lg text-muted-foreground sm:text-xl">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
<slot />
|
||||
</header>
|
||||
</template>
|
||||
28
web/src/components/ThemeToggle.vue
Normal file
28
web/src/components/ThemeToggle.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { Moon, Sun } from 'lucide-vue-next'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
defineProps<{
|
||||
isDark: boolean
|
||||
buttonClass?: HTMLAttributes['class']
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{ toggle: [] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="切换主题"
|
||||
:class="cn(buttonClass)"
|
||||
@click="emit('toggle')"
|
||||
>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<Sun v-if="isDark" key="sun" class="size-4" />
|
||||
<Moon v-else key="moon" class="size-4" />
|
||||
</Transition>
|
||||
</Button>
|
||||
</template>
|
||||
45
web/src/components/ui/Button.vue
Normal file
45
web/src/components/ui/Button.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'default' | 'secondary' | 'outline' | 'ghost'
|
||||
size?: 'default' | 'sm' | 'icon'
|
||||
disabled?: boolean
|
||||
class?: HTMLAttributes['class']
|
||||
}>(),
|
||||
{
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
)
|
||||
|
||||
const variants: Record<NonNullable<typeof props.variant>, string> = {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground text-muted-foreground',
|
||||
}
|
||||
|
||||
const sizes: Record<NonNullable<typeof props.size>, string> = {
|
||||
default: 'h-11 px-5 text-base',
|
||||
sm: 'h-9 px-3 text-sm',
|
||||
icon: 'size-11',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
:class="cn(
|
||||
'inline-flex items-center justify-center gap-1.5 rounded-lg font-medium outline-none transition-[opacity,transform,background-color,color] duration-150 ease-out active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
|
||||
variants[variant],
|
||||
sizes[size],
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
28
web/src/components/ui/Input.vue
Normal file
28
web/src/components/ui/Input.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const model = defineModel<string>({ default: '' })
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
type?: string
|
||||
id?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
:id="id"
|
||||
v-model="model"
|
||||
:type="type || 'text'"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:class="cn(
|
||||
'h-11 w-full rounded-lg border border-input bg-transparent px-3.5 text-base outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:opacity-50',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
</template>
|
||||
40
web/src/components/ui/Switch.vue
Normal file
40
web/src/components/ui/Switch.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const checked = defineModel<boolean>('checked', { default: false })
|
||||
|
||||
const props = defineProps<{
|
||||
id?: string
|
||||
class?: HTMLAttributes['class']
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
function toggle() {
|
||||
if (props.disabled) return
|
||||
checked.value = !checked.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
:id="id"
|
||||
type="button"
|
||||
role="switch"
|
||||
:aria-checked="checked"
|
||||
:disabled="disabled"
|
||||
:class="cn(
|
||||
'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:opacity-50',
|
||||
checked ? 'bg-primary' : 'bg-muted',
|
||||
props.class,
|
||||
)"
|
||||
@click="toggle"
|
||||
>
|
||||
<span
|
||||
:class="cn(
|
||||
'pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform duration-150 ease-out',
|
||||
checked ? 'translate-x-[16px]' : 'translate-x-0.5',
|
||||
)"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
26
web/src/components/ui/Textarea.vue
Normal file
26
web/src/components/ui/Textarea.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const model = defineModel<string>({ default: '' })
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
id?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<textarea
|
||||
:id="id"
|
||||
v-model="model"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:class="cn(
|
||||
'min-h-36 w-full rounded-lg border border-input bg-transparent px-3.5 py-3 text-base outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:opacity-50',
|
||||
props.class,
|
||||
)"
|
||||
/>
|
||||
</template>
|
||||
29
web/src/fonts/syne-600.woff2.css
Normal file
29
web/src/fonts/syne-600.woff2.css
Normal file
@@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 600;
|
||||
src: url('@fontsource/syne/files/syne-greek-600-normal.woff2') format('woff2');
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 600;
|
||||
src: url('@fontsource/syne/files/syne-latin-ext-600-normal.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
|
||||
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
|
||||
U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 600;
|
||||
src: url('@fontsource/syne/files/syne-latin-600-normal.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
|
||||
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
80
web/src/lib/utils.ts
Normal file
80
web/src/lib/utils.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import type { ClassValue } from 'clsx'
|
||||
import { clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
||||
export function formatNumber(num: number): string {
|
||||
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)}B+`
|
||||
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M+`
|
||||
if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K+`
|
||||
return String(num)
|
||||
}
|
||||
|
||||
export function formatSize(bytes?: number): string {
|
||||
if (bytes == null || bytes <= 0) return ''
|
||||
const units = ['B', 'KB', 'MB', 'GB']
|
||||
let size = bytes
|
||||
let i = 0
|
||||
while (size >= 1024 && i < units.length - 1) {
|
||||
size /= 1024
|
||||
i++
|
||||
}
|
||||
return `${size.toFixed(i === 0 ? 0 : 1)} ${units[i]}`
|
||||
}
|
||||
|
||||
export function formatArchs(
|
||||
images?: Array<{ architecture?: string; os?: string; variant?: string }>,
|
||||
): string[] {
|
||||
if (!images?.length) return []
|
||||
const seen = new Set<string>()
|
||||
const out: string[] = []
|
||||
for (const img of images) {
|
||||
const arch = img.architecture?.trim()
|
||||
if (!arch || arch === 'unknown') continue
|
||||
const os = img.os?.trim()
|
||||
let label = os && os !== 'unknown' ? `${os}/${arch}` : arch
|
||||
if (img.variant) label += `/${img.variant}`
|
||||
if (seen.has(label)) continue
|
||||
seen.add(label)
|
||||
out.push(label)
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
export function formatTimeAgo(dateString?: string): string {
|
||||
if (!dateString) return '未知时间'
|
||||
const date = new Date(dateString)
|
||||
if (Number.isNaN(date.getTime())) return '未知时间'
|
||||
|
||||
const diffMs = Math.abs(Date.now() - date.getTime())
|
||||
const minutes = Math.floor(diffMs / 60_000)
|
||||
const hours = Math.floor(diffMs / 3_600_000)
|
||||
const days = Math.floor(diffMs / 86_400_000)
|
||||
const months = Math.floor(days / 30)
|
||||
const years = Math.floor(days / 365)
|
||||
|
||||
if (minutes < 1) return '刚刚'
|
||||
if (minutes < 60) return `${minutes}分钟前`
|
||||
if (hours < 24) return `${hours}小时前`
|
||||
if (days < 7) return `${days}天前`
|
||||
if (days < 30) return `${Math.floor(days / 7)}周前`
|
||||
if (months < 12) return `${months}个月前`
|
||||
if (years < 1) return '近1年'
|
||||
return `${years}年前`
|
||||
}
|
||||
|
||||
export async function copyText(text: string): Promise<boolean> {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export function errorMessage(error: unknown, fallback: string): string {
|
||||
return error instanceof Error ? error.message : fallback
|
||||
}
|
||||
10
web/src/main.ts
Normal file
10
web/src/main.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
if ('scrollRestoration' in history) {
|
||||
history.scrollRestoration = 'manual'
|
||||
}
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
178
web/src/pages/HomePage.vue
Normal file
178
web/src/pages/HomePage.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { Check, Clipboard, Container, Link2, Rocket, Sparkles } from 'lucide-vue-next'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import Input from '@/components/ui/Input.vue'
|
||||
import PageHero from '@/components/PageHero.vue'
|
||||
import { copyText } from '@/lib/utils'
|
||||
|
||||
const input = ref('')
|
||||
const output = ref('')
|
||||
const error = ref('')
|
||||
const copied = ref(false)
|
||||
|
||||
const host = computed(() => window.location.host)
|
||||
|
||||
const features = [
|
||||
{ icon: Rocket, label: 'GitHub 加速' },
|
||||
{ icon: Container, label: 'Docker 镜像' },
|
||||
{ icon: Sparkles, label: 'Hugging Face' },
|
||||
] as const
|
||||
|
||||
const dockerExamples = computed(() => [
|
||||
{
|
||||
id: 'official',
|
||||
label: '官方镜像',
|
||||
original: 'docker pull nginx',
|
||||
accelerated: `docker pull ${host.value}/nginx`,
|
||||
},
|
||||
{
|
||||
id: 'user',
|
||||
label: '用户镜像',
|
||||
original: 'docker pull user/app:tag',
|
||||
accelerated: `docker pull ${host.value}/user/app:tag`,
|
||||
},
|
||||
{
|
||||
id: 'ghcr',
|
||||
label: 'GHCR',
|
||||
original: 'docker pull ghcr.io/org/app',
|
||||
accelerated: `docker pull ${host.value}/ghcr.io/org/app`,
|
||||
},
|
||||
])
|
||||
|
||||
const allowedHosts = [
|
||||
'github.com/',
|
||||
'raw.githubusercontent.com/',
|
||||
'gist.githubusercontent.com/',
|
||||
'huggingface.co/',
|
||||
'cdn-lfs.hf.co/',
|
||||
]
|
||||
|
||||
function formatLink() {
|
||||
error.value = ''
|
||||
copied.value = false
|
||||
const link = input.value.trim()
|
||||
if (!link) {
|
||||
error.value = '请输入有效的链接'
|
||||
output.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
if (link.startsWith('https://') || link.startsWith('http://')) {
|
||||
output.value = `https://${host.value}/${link}`
|
||||
return
|
||||
}
|
||||
|
||||
if (allowedHosts.some((prefix) => link.startsWith(prefix))) {
|
||||
output.value = `https://${host.value}/https://${link}`
|
||||
return
|
||||
}
|
||||
|
||||
error.value = '请输入有效的 GitHub / Hugging Face 链接'
|
||||
output.value = ''
|
||||
}
|
||||
|
||||
async function onCopy() {
|
||||
if (!output.value) return
|
||||
copied.value = await copyText(output.value)
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
if (!output.value) return
|
||||
window.open(output.value, '_blank', 'noopener,noreferrer')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-3xl">
|
||||
<PageHero
|
||||
eyebrow="面向开发者和运维人员的加速服务"
|
||||
title="HubProxy"
|
||||
subtitle="GitHub 文件加速 · Docker 镜像加速 · Hugging Face 资源"
|
||||
gradient
|
||||
>
|
||||
<div class="flex flex-wrap justify-center gap-2 pt-2">
|
||||
<span
|
||||
v-for="item in features"
|
||||
:key="item.label"
|
||||
class="feature-pill"
|
||||
>
|
||||
<component :is="item.icon" class="size-4" />
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</PageHero>
|
||||
|
||||
<section class="surface-panel field-block">
|
||||
<div class="flex flex-col gap-3 sm:flex-row">
|
||||
<Input
|
||||
v-model="input"
|
||||
class="sm:flex-1"
|
||||
placeholder="粘贴 GitHub / Hugging Face 原始链接"
|
||||
@keyup.enter="formatLink"
|
||||
/>
|
||||
<Button @click="formatLink">获取加速链接</Button>
|
||||
</div>
|
||||
|
||||
<Transition name="fade" mode="out-in">
|
||||
<p v-if="error" key="error" class="text-center text-destructive">{{ error }}</p>
|
||||
<div v-else-if="output" key="output" class="space-y-4 pt-2">
|
||||
<div class="flex items-center justify-center gap-2 font-medium text-primary">
|
||||
<Check class="size-4" />
|
||||
加速链接已生成
|
||||
</div>
|
||||
<p class="break-all rounded-lg border border-border bg-muted/40 px-4 py-3.5 font-mono">
|
||||
{{ output }}
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-2">
|
||||
<Button variant="secondary" size="sm" @click="onCopy">
|
||||
<Clipboard class="size-4" />
|
||||
{{ copied ? '已复制' : '复制链接' }}
|
||||
</Button>
|
||||
<Button variant="secondary" size="sm" @click="onOpen">
|
||||
<Link2 class="size-4" />
|
||||
打开链接
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</section>
|
||||
|
||||
<section class="space-y-6 pt-12">
|
||||
<div class="space-y-1 text-center">
|
||||
<h2 class="text-sm font-semibold tracking-[0.16em] text-muted-foreground uppercase">
|
||||
Docker 镜像加速
|
||||
</h2>
|
||||
<p class="text-muted-foreground">
|
||||
在镜像名前加上本站域名，一行命令即可加速拉取
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="terminal-block">
|
||||
<div class="terminal-header">
|
||||
<span class="terminal-dot" />
|
||||
<span class="terminal-dot" />
|
||||
<span class="terminal-dot" />
|
||||
<span class="ml-2 text-xs text-muted-foreground">shell</span>
|
||||
</div>
|
||||
<div class="terminal-body">
|
||||
<div
|
||||
v-for="item in dockerExamples"
|
||||
:key="item.id"
|
||||
class="terminal-example"
|
||||
>
|
||||
<span class="example-tag">{{ item.label }}</span>
|
||||
<p class="font-mono leading-relaxed">
|
||||
<span class="text-muted-foreground">$ </span>
|
||||
<span class="text-muted-foreground/70 line-through decoration-muted-foreground/40">{{ item.original }}</span>
|
||||
</p>
|
||||
<p class="font-mono leading-relaxed">
|
||||
<span class="text-muted-foreground">$ </span>
|
||||
<span class="text-primary">{{ item.accelerated }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
176
web/src/pages/ImagesPage.vue
Normal file
176
web/src/pages/ImagesPage.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Loader2 } from 'lucide-vue-next'
|
||||
import {
|
||||
fetchImageInfo,
|
||||
prepareBatchDownload,
|
||||
prepareSingleDownload,
|
||||
triggerDownload,
|
||||
} from '@/api'
|
||||
import { errorMessage } from '@/lib/utils'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import Input from '@/components/ui/Input.vue'
|
||||
import PageHero from '@/components/PageHero.vue'
|
||||
import Switch from '@/components/ui/Switch.vue'
|
||||
import Textarea from '@/components/ui/Textarea.vue'
|
||||
|
||||
const singleImage = ref('')
|
||||
const singlePlatform = ref('linux/amd64')
|
||||
const singleCompressed = ref(true)
|
||||
const singleStatus = ref('')
|
||||
const singleError = ref('')
|
||||
const singleLoading = ref(false)
|
||||
|
||||
const batchText = ref('')
|
||||
const batchPlatform = ref('linux/amd64')
|
||||
const batchCompressed = ref(true)
|
||||
const batchStatus = ref('')
|
||||
const batchError = ref('')
|
||||
const batchLoading = ref(false)
|
||||
|
||||
async function preflight(images: string[]) {
|
||||
for (const image of [...new Set(images)]) {
|
||||
await fetchImageInfo(image)
|
||||
}
|
||||
}
|
||||
|
||||
async function onSingleSubmit() {
|
||||
singleError.value = ''
|
||||
singleStatus.value = ''
|
||||
const image = singleImage.value.trim()
|
||||
if (!image) {
|
||||
singleError.value = '请输入镜像名称'
|
||||
return
|
||||
}
|
||||
|
||||
singleLoading.value = true
|
||||
singleStatus.value = '正在准备下载...'
|
||||
try {
|
||||
await preflight([image])
|
||||
const data = await prepareSingleDownload({
|
||||
image,
|
||||
platform: singlePlatform.value,
|
||||
compressed: singleCompressed.value,
|
||||
})
|
||||
if (!data.download_url) throw new Error('下载地址生成失败')
|
||||
triggerDownload(data.download_url)
|
||||
const platformText = singlePlatform.value.trim()
|
||||
? ` (${singlePlatform.value.trim()})`
|
||||
: ''
|
||||
singleStatus.value = `开始下载 ${image}${platformText}`
|
||||
} catch (e) {
|
||||
singleStatus.value = ''
|
||||
singleError.value = errorMessage(e, '下载失败')
|
||||
} finally {
|
||||
singleLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function onBatchSubmit() {
|
||||
batchError.value = ''
|
||||
batchStatus.value = ''
|
||||
const images = batchText.value
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && !line.startsWith('#'))
|
||||
|
||||
if (images.length === 0) {
|
||||
batchError.value = '请输入镜像列表'
|
||||
return
|
||||
}
|
||||
|
||||
batchLoading.value = true
|
||||
batchStatus.value = '正在准备批量下载...'
|
||||
try {
|
||||
await preflight(images)
|
||||
const data = await prepareBatchDownload({
|
||||
images,
|
||||
platform: batchPlatform.value,
|
||||
useCompressedLayers: batchCompressed.value,
|
||||
})
|
||||
if (!data.download_url) throw new Error('下载地址生成失败')
|
||||
triggerDownload(data.download_url)
|
||||
batchStatus.value = `开始下载 ${images.length} 个镜像`
|
||||
} catch (e) {
|
||||
batchStatus.value = ''
|
||||
batchError.value = errorMessage(e, '下载失败')
|
||||
} finally {
|
||||
batchLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-3xl">
|
||||
<PageHero
|
||||
eyebrow="Offline Image"
|
||||
title="离线镜像"
|
||||
subtitle="流式下载，兼容 docker load，支持多架构。"
|
||||
/>
|
||||
|
||||
<section class="field-block">
|
||||
<h2 class="text-center text-sm font-semibold tracking-[0.16em] text-muted-foreground uppercase">
|
||||
单镜像
|
||||
</h2>
|
||||
|
||||
<Transition name="fade" mode="out-in">
|
||||
<p v-if="singleError" key="error" class="text-center text-destructive">{{ singleError }}</p>
|
||||
<p v-else-if="singleStatus" key="status" class="flex items-center justify-center gap-2 text-muted-foreground">
|
||||
<Loader2 v-if="singleLoading" class="size-4 animate-spin" />
|
||||
{{ singleStatus }}
|
||||
</p>
|
||||
</Transition>
|
||||
|
||||
<label class="block space-y-1.5">
|
||||
<span>镜像名称</span>
|
||||
<Input v-model="singleImage" placeholder="nginx 或 user/app:tag" />
|
||||
</label>
|
||||
<label class="block space-y-1.5">
|
||||
<span>目标架构（可选）</span>
|
||||
<Input v-model="singlePlatform" placeholder="linux/amd64" />
|
||||
</label>
|
||||
<div class="flex items-center justify-between py-1">
|
||||
<span>压缩层</span>
|
||||
<Switch v-model:checked="singleCompressed" />
|
||||
</div>
|
||||
<Button class="w-full" :disabled="singleLoading" @click="onSingleSubmit">
|
||||
<Loader2 v-if="singleLoading" class="size-4 animate-spin" />
|
||||
{{ singleLoading ? '准备中...' : '立即下载' }}
|
||||
</Button>
|
||||
</section>
|
||||
|
||||
<section class="section-gap field-block">
|
||||
<h2 class="text-center text-sm font-semibold tracking-[0.16em] text-muted-foreground uppercase">
|
||||
批量下载
|
||||
</h2>
|
||||
|
||||
<Transition name="fade" mode="out-in">
|
||||
<p v-if="batchError" key="error" class="text-center text-destructive">{{ batchError }}</p>
|
||||
<p v-else-if="batchStatus" key="status" class="flex items-center justify-center gap-2 text-muted-foreground">
|
||||
<Loader2 v-if="batchLoading" class="size-4 animate-spin" />
|
||||
{{ batchStatus }}
|
||||
</p>
|
||||
</Transition>
|
||||
|
||||
<label class="block space-y-1.5">
|
||||
<span>镜像列表</span>
|
||||
<Textarea
|
||||
v-model="batchText"
|
||||
placeholder="alpine redis:alpine user/app:1.0"
|
||||
/>
|
||||
</label>
|
||||
<label class="block space-y-1.5">
|
||||
<span>目标架构（可选）</span>
|
||||
<Input v-model="batchPlatform" placeholder="linux/amd64" />
|
||||
</label>
|
||||
<div class="flex items-center justify-between py-1">
|
||||
<span>压缩层</span>
|
||||
<Switch v-model:checked="batchCompressed" />
|
||||
</div>
|
||||
<Button class="w-full" :disabled="batchLoading" @click="onBatchSubmit">
|
||||
<Loader2 v-if="batchLoading" class="size-4 animate-spin" />
|
||||
{{ batchLoading ? '准备中...' : '批量下载' }}
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
400
web/src/pages/SearchPage.vue
Normal file
400
web/src/pages/SearchPage.vue
Normal file
@@ -0,0 +1,400 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ChevronLeft, ChevronRight, Copy, Loader2, Search } from 'lucide-vue-next'
|
||||
import {
|
||||
fetchTags,
|
||||
searchImages,
|
||||
type Repository,
|
||||
type TagInfo,
|
||||
} from '@/api'
|
||||
import { copyText, errorMessage, formatArchs, formatNumber, formatSize, formatTimeAgo } from '@/lib/utils'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import Input from '@/components/ui/Input.vue'
|
||||
import PageHero from '@/components/PageHero.vue'
|
||||
|
||||
interface RepoView {
|
||||
raw: Repository
|
||||
displayName: string
|
||||
namespace: string
|
||||
name: string
|
||||
fullRepoName: string
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const query = ref('')
|
||||
const searching = ref(false)
|
||||
const searchError = ref('')
|
||||
const results = ref<RepoView[]>([])
|
||||
const resultCount = ref(0)
|
||||
const resultsPage = ref(1)
|
||||
const pageSize = 25
|
||||
|
||||
const selected = ref<RepoView | null>(null)
|
||||
const tagsLoading = ref(false)
|
||||
const tagsError = ref('')
|
||||
const tags = ref<TagInfo[]>([])
|
||||
const tagFilter = ref('')
|
||||
const tagsPage = ref(1)
|
||||
const tagsHasMore = ref(false)
|
||||
const copyHint = ref('')
|
||||
|
||||
const host = computed(() => window.location.host)
|
||||
|
||||
const hasResults = computed(() => results.value.length > 0)
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(resultCount.value / pageSize)))
|
||||
const hasMoreResults = computed(() => resultsPage.value < totalPages.value)
|
||||
|
||||
const filteredTags = computed(() => {
|
||||
const q = tagFilter.value.trim().toLowerCase()
|
||||
if (!q) return tags.value
|
||||
const exact: TagInfo[] = []
|
||||
const starts: TagInfo[] = []
|
||||
const includes: TagInfo[] = []
|
||||
for (const tag of tags.value) {
|
||||
const name = tag.name.toLowerCase()
|
||||
if (name === q) exact.push(tag)
|
||||
else if (name.startsWith(q)) starts.push(tag)
|
||||
else if (name.includes(q)) includes.push(tag)
|
||||
}
|
||||
return [...exact, ...starts, ...includes]
|
||||
})
|
||||
|
||||
const displayTags = computed(() =>
|
||||
filteredTags.value.map((tag) => ({
|
||||
tag,
|
||||
archs: formatArchs(tag.images),
|
||||
size: formatSize(tag.full_size),
|
||||
})),
|
||||
)
|
||||
|
||||
function toRepoView(item: Repository): RepoView | null {
|
||||
const rawName = item.repo_name || ''
|
||||
const namespace =
|
||||
item.namespace ||
|
||||
(item.is_official ? 'library' : rawName.includes('/') ? rawName.split('/')[0] : '')
|
||||
const name = rawName.replace(/^library\//, '').includes('/')
|
||||
? rawName.split('/').pop() || ''
|
||||
: rawName.replace(/^library\//, '')
|
||||
|
||||
if (!namespace || !name) return null
|
||||
|
||||
const displayName = item.is_official
|
||||
? name
|
||||
: item.namespace
|
||||
? `${item.namespace}/${name}`
|
||||
: rawName.includes('/')
|
||||
? rawName
|
||||
: `${namespace}/${name}`
|
||||
|
||||
return {
|
||||
raw: item,
|
||||
displayName,
|
||||
namespace,
|
||||
name,
|
||||
fullRepoName: item.is_official ? name : `${namespace}/${name}`,
|
||||
}
|
||||
}
|
||||
|
||||
async function runSearch(q: string, page = 1) {
|
||||
const trimmed = q.trim()
|
||||
if (!trimmed) {
|
||||
searchError.value = '请输入搜索关键词'
|
||||
return
|
||||
}
|
||||
|
||||
searching.value = true
|
||||
searchError.value = ''
|
||||
results.value = []
|
||||
selected.value = null
|
||||
tags.value = []
|
||||
tagsError.value = ''
|
||||
tagFilter.value = ''
|
||||
|
||||
try {
|
||||
let searchQuery = trimmed
|
||||
let targetRepo = ''
|
||||
if (trimmed.includes('/')) {
|
||||
const [ns] = trimmed.split('/')
|
||||
searchQuery = ns
|
||||
targetRepo = trimmed.toLowerCase()
|
||||
}
|
||||
|
||||
const data = await searchImages(searchQuery, page, pageSize)
|
||||
const views = (data.results || [])
|
||||
.map(toRepoView)
|
||||
.filter((v): v is RepoView => v !== null)
|
||||
|
||||
views.sort((a, b) => {
|
||||
if (targetRepo) {
|
||||
const aMatch =
|
||||
a.displayName.toLowerCase() === targetRepo ||
|
||||
a.fullRepoName.toLowerCase() === targetRepo
|
||||
const bMatch =
|
||||
b.displayName.toLowerCase() === targetRepo ||
|
||||
b.fullRepoName.toLowerCase() === targetRepo
|
||||
if (aMatch && !bMatch) return -1
|
||||
if (!aMatch && bMatch) return 1
|
||||
}
|
||||
if (!!a.raw.is_official !== !!b.raw.is_official) {
|
||||
return a.raw.is_official ? -1 : 1
|
||||
}
|
||||
return (b.raw.pull_count || 0) - (a.raw.pull_count || 0)
|
||||
})
|
||||
|
||||
results.value = views
|
||||
resultCount.value = data.count ?? views.length
|
||||
resultsPage.value = page
|
||||
if (views.length === 0) searchError.value = '未找到相关镜像'
|
||||
} catch (e) {
|
||||
searchError.value = errorMessage(e, '搜索失败')
|
||||
} finally {
|
||||
searching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
const q = query.value.trim()
|
||||
await router.replace({ path: '/search', query: q ? { q } : {} })
|
||||
await runSearch(q, 1)
|
||||
}
|
||||
|
||||
async function loadResultsPage(page: number) {
|
||||
if (page < 1 || page > totalPages.value || searching.value) return
|
||||
await runSearch(query.value, page)
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
async function loadTagPage(repo: RepoView, page: number) {
|
||||
selected.value = repo
|
||||
tagsLoading.value = true
|
||||
tagsError.value = ''
|
||||
tagsPage.value = page
|
||||
if (page === 1) tagFilter.value = ''
|
||||
|
||||
try {
|
||||
const data = await fetchTags(repo.namespace, repo.name, page, 100)
|
||||
tags.value = data.tags || []
|
||||
tagsHasMore.value = !!data.has_more
|
||||
if (tags.value.length === 0) tagsError.value = '该镜像暂无可用标签'
|
||||
} catch (e) {
|
||||
tags.value = []
|
||||
tagsError.value = errorMessage(e, '加载标签失败')
|
||||
} finally {
|
||||
tagsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function backToResults() {
|
||||
selected.value = null
|
||||
tags.value = []
|
||||
tagsError.value = ''
|
||||
tagFilter.value = ''
|
||||
}
|
||||
|
||||
async function copyPull(tagName?: string) {
|
||||
if (!selected.value) return
|
||||
const image = tagName
|
||||
? `${host.value}/${selected.value.fullRepoName}:${tagName}`
|
||||
: `${host.value}/${selected.value.fullRepoName}`
|
||||
const refName = `docker pull ${image}`
|
||||
const ok = await copyText(refName)
|
||||
copyHint.value = ok ? `已复制 ${refName}` : '复制失败'
|
||||
setTimeout(() => {
|
||||
if (copyHint.value.includes(refName) || copyHint.value === '复制失败') copyHint.value = ''
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query.q,
|
||||
async (q) => {
|
||||
const next = typeof q === 'string' ? q : ''
|
||||
if (next === query.value) return
|
||||
query.value = next
|
||||
if (next) await runSearch(next, 1)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHero
|
||||
eyebrow="Docker Hub"
|
||||
title="镜像搜索"
|
||||
subtitle="检索官方与社区镜像，查看标签与架构，一键复制拉取命令。"
|
||||
/>
|
||||
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div v-if="!selected" key="search" class="mx-auto max-w-3xl space-y-6">
|
||||
<div class="flex flex-col gap-3 sm:flex-row">
|
||||
<Input
|
||||
v-model="query"
|
||||
class="sm:flex-1"
|
||||
placeholder="例如 nginx、redis、library/ubuntu"
|
||||
@keydown.enter="onSearch"
|
||||
/>
|
||||
<Button :disabled="searching" @click="onSearch">
|
||||
<Loader2 v-if="searching" class="size-4 animate-spin" />
|
||||
<Search v-else class="size-4" />
|
||||
{{ searching ? '搜索中...' : '搜索' }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="searchError"
|
||||
class="text-center text-destructive"
|
||||
>
|
||||
{{ searchError }}
|
||||
</p>
|
||||
|
||||
<div v-if="searching" class="space-y-3">
|
||||
<div v-for="i in 3" :key="i" class="h-16 animate-pulse rounded-xl bg-muted" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="hasResults" class="space-y-2">
|
||||
<p class="text-center text-muted-foreground">
|
||||
共 {{ resultCount }} 条结果
|
||||
<template v-if="totalPages > 1"> · 第 {{ resultsPage }} / {{ totalPages }} 页</template>
|
||||
</p>
|
||||
<div class="divide-y divide-border border-y border-border">
|
||||
<button
|
||||
v-for="item in results"
|
||||
:key="`${item.namespace}/${item.name}`"
|
||||
type="button"
|
||||
class="w-full py-4 text-left transition-colors duration-150 hover:text-primary"
|
||||
@click="loadTagPage(item, 1)"
|
||||
>
|
||||
<div class="mb-1 flex flex-wrap items-center gap-2">
|
||||
<span class="text-base font-medium">{{ item.displayName }}</span>
|
||||
<span
|
||||
v-if="item.raw.is_official"
|
||||
class="rounded-full bg-primary/12 px-2 py-0.5 text-[11px] text-primary"
|
||||
>官方</span>
|
||||
<span
|
||||
v-if="item.raw.star_count"
|
||||
class="text-xs text-muted-foreground"
|
||||
>★ {{ formatNumber(item.raw.star_count) }}</span>
|
||||
<span
|
||||
v-if="item.raw.pull_count"
|
||||
class="text-xs text-muted-foreground"
|
||||
>⬇ {{ formatNumber(item.raw.pull_count) }}</span>
|
||||
</div>
|
||||
<p class="line-clamp-2 text-muted-foreground">
|
||||
{{ item.raw.short_description || '暂无描述' }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="totalPages > 1" class="flex items-center justify-center gap-1.5 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="searching || resultsPage <= 1"
|
||||
@click="loadResultsPage(resultsPage - 1)"
|
||||
>
|
||||
<ChevronLeft class="size-4" />
|
||||
</Button>
|
||||
<span class="min-w-14 text-center text-muted-foreground">第 {{ resultsPage }} 页</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="searching || !hasMoreResults"
|
||||
@click="loadResultsPage(resultsPage + 1)"
|
||||
>
|
||||
<ChevronRight class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else key="tags" class="mx-auto max-w-3xl space-y-6">
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-primary"
|
||||
@click="backToResults"
|
||||
>
|
||||
← 返回搜索结果
|
||||
</button>
|
||||
|
||||
<div class="space-y-2 text-center">
|
||||
<div class="flex flex-wrap items-center justify-center gap-2">
|
||||
<h2 class="text-2xl font-semibold tracking-tight sm:text-3xl">{{ selected.fullRepoName }}</h2>
|
||||
<span
|
||||
v-if="selected.raw.is_official"
|
||||
class="rounded-full bg-primary/12 px-2 py-0.5 text-[11px] text-primary"
|
||||
>官方</span>
|
||||
</div>
|
||||
<p class="text-base text-muted-foreground">
|
||||
{{ selected.raw.short_description || '暂无描述' }}
|
||||
</p>
|
||||
<Transition name="fade">
|
||||
<p v-if="copyHint" class="text-muted-foreground">{{ copyHint }}</p>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<Input v-model="tagFilter" class="sm:flex-1" placeholder="筛选当前页标签..." />
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="tagsLoading || tagsPage <= 1"
|
||||
@click="loadTagPage(selected, tagsPage - 1)"
|
||||
>
|
||||
<ChevronLeft class="size-4" />
|
||||
</Button>
|
||||
<span class="min-w-14 text-center text-muted-foreground">第 {{ tagsPage }} 页</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="tagsLoading || !tagsHasMore"
|
||||
@click="loadTagPage(selected, tagsPage + 1)"
|
||||
>
|
||||
<ChevronRight class="size-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" @click="copyPull()">
|
||||
<Copy class="size-4" />
|
||||
复制
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="tagsError" class="text-center text-destructive">{{ tagsError }}</p>
|
||||
<div v-else-if="tagsLoading" class="space-y-3">
|
||||
<div v-for="i in 5" :key="i" class="h-14 animate-pulse rounded-xl bg-muted" />
|
||||
</div>
|
||||
<p v-else-if="displayTags.length === 0" class="text-center text-muted-foreground">
|
||||
没有匹配的标签
|
||||
</p>
|
||||
<div v-else class="divide-y divide-border border-y border-border">
|
||||
<div
|
||||
v-for="{ tag, archs, size } in displayTags"
|
||||
:key="tag.name"
|
||||
class="flex items-start justify-between gap-3 py-4"
|
||||
>
|
||||
<div class="min-w-0 space-y-1.5">
|
||||
<p class="truncate text-base font-medium">{{ tag.name }}</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
<template v-if="size">{{ size }} · </template>
|
||||
{{ formatTimeAgo(tag.last_updated) }}
|
||||
</p>
|
||||
<div v-if="archs.length" class="flex flex-wrap gap-1.5">
|
||||
<span
|
||||
v-for="arch in archs"
|
||||
:key="arch"
|
||||
class="rounded-full bg-primary/10 px-2 py-0.5 font-mono text-[11px] text-primary"
|
||||
>{{ arch }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" class="shrink-0" @click="copyPull(tag.name)">
|
||||
<Copy class="size-4" />
|
||||
复制
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
37
web/src/router/index.ts
Normal file
37
web/src/router/index.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomePage from '@/pages/HomePage.vue'
|
||||
import ImagesPage from '@/pages/ImagesPage.vue'
|
||||
import SearchPage from '@/pages/SearchPage.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: HomePage,
|
||||
meta: { title: 'GitHub 加速' },
|
||||
},
|
||||
{
|
||||
path: '/images',
|
||||
component: ImagesPage,
|
||||
meta: { title: '离线镜像下载' },
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
component: SearchPage,
|
||||
meta: { title: '镜像搜索' },
|
||||
},
|
||||
],
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (savedPosition) return savedPosition
|
||||
if (to.path !== from.path) return { top: 0, left: 0 }
|
||||
return false
|
||||
},
|
||||
})
|
||||
|
||||
router.afterEach((to) => {
|
||||
const title = (to.meta.title as string) || 'HubProxy'
|
||||
document.title = `${title} · HubProxy`
|
||||
})
|
||||
|
||||
export default router
|
||||
233
web/src/style.css
Normal file
233
web/src/style.css
Normal file
@@ -0,0 +1,233 @@
|
||||
@import "tailwindcss";
|
||||
@import "@fontsource-variable/manrope";
|
||||
@import "./fonts/syne-600.woff2.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--font-sans: "Manrope Variable", "Manrope", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display: "Syne", "Manrope Variable", ui-sans-serif, system-ui, sans-serif;
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--radius-lg: var(--radius);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.75rem;
|
||||
--background: oklch(0.985 0.004 260);
|
||||
--foreground: oklch(0.2 0.02 260);
|
||||
--primary: oklch(0.46 0.14 264);
|
||||
--primary-foreground: oklch(0.99 0.005 264);
|
||||
--secondary: oklch(0.945 0.012 260);
|
||||
--secondary-foreground: oklch(0.28 0.03 260);
|
||||
--muted: oklch(0.955 0.008 260);
|
||||
--muted-foreground: oklch(0.48 0.025 260);
|
||||
--accent: oklch(0.94 0.015 260);
|
||||
--accent-foreground: oklch(0.26 0.03 260);
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--border: oklch(0.9 0.01 260);
|
||||
--input: oklch(0.9 0.01 260);
|
||||
--ring: oklch(0.46 0.14 264);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.16 0.015 260);
|
||||
--foreground: oklch(0.96 0.008 260);
|
||||
--primary: oklch(0.72 0.11 264);
|
||||
--primary-foreground: oklch(0.16 0.02 260);
|
||||
--secondary: oklch(0.24 0.02 260);
|
||||
--secondary-foreground: oklch(0.94 0.008 260);
|
||||
--muted: oklch(0.24 0.02 260);
|
||||
--muted-foreground: oklch(0.68 0.025 260);
|
||||
--accent: oklch(0.26 0.025 260);
|
||||
--accent-foreground: oklch(0.94 0.008 260);
|
||||
--destructive: oklch(0.65 0.17 22);
|
||||
--border: oklch(1 0 0 / 11%);
|
||||
--input: oklch(1 0 0 / 14%);
|
||||
--ring: oklch(0.72 0.11 264);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
html {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
html::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground font-sans antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.shell-atmosphere {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.shell-atmosphere::before {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background:
|
||||
radial-gradient(ellipse 70% 45% at 50% -15%, oklch(0.72 0.06 264 / 0.12), transparent 60%),
|
||||
linear-gradient(180deg, var(--background), oklch(0.975 0.006 260));
|
||||
}
|
||||
|
||||
.dark .shell-atmosphere::before {
|
||||
background:
|
||||
radial-gradient(ellipse 65% 40% at 50% -10%, oklch(0.45 0.08 264 / 0.18), transparent 55%),
|
||||
linear-gradient(180deg, var(--background), oklch(0.14 0.015 260));
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
@apply bg-primary/10 text-primary dark:bg-primary/15;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@apply mb-3 text-[11px] font-semibold tracking-[0.22em] text-primary uppercase;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
@apply relative mb-14 space-y-4 pb-12 text-center sm:mb-16 sm:pb-14;
|
||||
}
|
||||
|
||||
.page-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: min(8rem, 32%);
|
||||
height: 2px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 999px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.display-title {
|
||||
font-family: var(--font-display);
|
||||
@apply text-5xl font-semibold tracking-tight sm:text-6xl;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--foreground) 30%, var(--primary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.feature-pill {
|
||||
@apply inline-flex items-center gap-2 rounded-full border border-border bg-background/60 px-3.5 py-1.5 text-sm text-muted-foreground backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.surface-panel {
|
||||
@apply rounded-xl border border-border/80 bg-background/50 p-5 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.terminal-block {
|
||||
@apply overflow-hidden rounded-xl border border-border/80 bg-background/50 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
@apply flex items-center gap-1.5 border-b border-border/70 px-4 py-2.5;
|
||||
}
|
||||
|
||||
.terminal-dot {
|
||||
@apply size-2 rounded-full bg-border;
|
||||
}
|
||||
|
||||
.terminal-body {
|
||||
@apply space-y-0 px-4 py-3;
|
||||
}
|
||||
|
||||
.terminal-example {
|
||||
@apply space-y-1 py-3;
|
||||
}
|
||||
|
||||
.terminal-example + .terminal-example {
|
||||
@apply border-t border-border/60;
|
||||
}
|
||||
|
||||
.example-tag {
|
||||
@apply mb-1 inline-block rounded-md bg-primary/10 px-2 py-0.5 text-[11px] font-medium text-primary;
|
||||
}
|
||||
|
||||
.section-gap {
|
||||
@apply space-y-8 border-t border-border pt-12;
|
||||
}
|
||||
|
||||
.field-block {
|
||||
@apply space-y-4;
|
||||
}
|
||||
}
|
||||
|
||||
.page-enter-active {
|
||||
transition: opacity 150ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.page-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition:
|
||||
opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
.menu-enter-active,
|
||||
.menu-leave-active {
|
||||
transition:
|
||||
opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.menu-enter-from,
|
||||
.menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.page-enter-active,
|
||||
.fade-enter-active,
|
||||
.fade-leave-active,
|
||||
.menu-enter-active,
|
||||
.menu-leave-active {
|
||||
transition: none !important;
|
||||
}
|
||||
.page-enter-from,
|
||||
.fade-enter-from,
|
||||
.fade-leave-to,
|
||||
.menu-enter-from,
|
||||
.menu-leave-to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
18
web/tsconfig.app.json
Normal file
18
web/tsconfig.app.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
"allowArbitraryExtensions": true,
|
||||
"ignoreDeprecations": "6.0",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
13
web/tsconfig.json
Normal file
13
web/tsconfig.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
23
web/tsconfig.node.json
Normal file
23
web/tsconfig.node.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"module": "nodenext",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
23
web/vite.config.ts
Normal file
23
web/vite.config.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import path from 'node:path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: '../src/dist',
|
||||
emptyOutDir: true,
|
||||
sourcemap: false,
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://127.0.0.1:5000',
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user