Compare commits

...

2 Commits

Author SHA1 Message Date
q792602257 eb33f534f5 前端页面调整 2026-06-10 14:18:40 +08:00
q792602257 9516adc810 前端页面调整 2026-06-10 14:04:14 +08:00
4 changed files with 109 additions and 53 deletions
+13 -11
View File
@@ -1,12 +1,12 @@
// Package httpx 内的 spa.go 提供 SPA 静态资源 + 404 fallback。 // Package httpx 内的 spa.go 提供 SPA 静态资源 + 404 fallback。
// 命中文件直接 ServeFile;不存在但路径无后缀视为前端路由,回退 index.html; // 命中文件直接 ServeFile;不存在且最后一段无扩展名视为前端路由,回退 index.html;
// /api/ 前缀始终返回 404(避免把 API 拼写错误掩盖成 HTML)。 // /api/ 前缀始终返回 404(避免把 API 拼写错误掩盖成 HTML)。
package httpx package httpx
import ( import (
"errors"
"io/fs" "io/fs"
"net/http" "net/http"
stdpath "path"
"strings" "strings"
) )
@@ -18,16 +18,18 @@ func NewSPAHandler(distFS fs.FS) http.Handler {
http.NotFound(w, r) http.NotFound(w, r)
return return
} }
path := strings.TrimPrefix(r.URL.Path, "/") // Trim 两侧斜杠:带尾斜杠的路径(如 /p/x/w/)对 fs.Stat 是非法 fs 路径,
if path == "" { // 返回 ErrInvalid 而非 ErrNotExist,必须先归一化才能正确触发回退。
path = "index.html" name := strings.Trim(r.URL.Path, "/")
if name == "" {
name = "index.html"
} }
if _, err := fs.Stat(distFS, path); err != nil { if _, err := fs.Stat(distFS, name); err != nil && stdpath.Ext(name) == "" {
if errors.Is(err, fs.ErrNotExist) && !strings.Contains(path, ".") { // 前端路由:直接发 index.html 内容,不能改写 r.URL.Path 再走
r.URL.Path = "/index.html" // fileServer——FileServer 会把 /index.html 301 重定向到 "./",
fileServer.ServeHTTP(w, r) // 深层路由刷新会被改写成带尾斜杠的错误 URL。
return http.ServeFileFS(w, r, distFS, "index.html")
} return
} }
fileServer.ServeHTTP(w, r) fileServer.ServeHTTP(w, r)
}) })
+46
View File
@@ -0,0 +1,46 @@
package httpx
import (
"net/http/httptest"
"strings"
"testing"
"testing/fstest"
)
func TestSPAHandler(t *testing.T) {
distFS := fstest.MapFS{
"index.html": {Data: []byte("<html>app</html>")},
"assets/app.js": {Data: []byte("console.log(1)")},
}
h := NewSPAHandler(distFS)
tests := []struct {
name string
path string
wantStatus int
wantBody string
}{
{"根路径返回 index", "/", 200, "<html>app</html>"},
{"静态文件直接命中", "/assets/app.js", 200, "console.log(1)"},
{"前端路由回退 index", "/p/TestProject/w/main", 200, "<html>app</html>"},
{"带尾斜杠的前端路由也回退 index", "/p/TestProject/w/", 200, "<html>app</html>"},
{"不存在的带扩展名文件返回 404", "/assets/missing.js", 404, ""},
{"api 前缀不回退", "/api/v1/unknown", 404, ""},
}
for _, tt := range tests {
t.Run(tt.name, func(t *testing.T) {
rec := httptest.NewRecorder()
h.ServeHTTP(rec, httptest.NewRequest("GET", tt.path, nil))
if rec.Code != tt.wantStatus {
t.Fatalf("status = %d, want %d", rec.Code, tt.wantStatus)
}
if tt.wantBody != "" && strings.TrimSpace(rec.Body.String()) != tt.wantBody {
t.Fatalf("body = %q, want %q", rec.Body.String(), tt.wantBody)
}
// 回退必须直接 200 返回内容,禁止 301 ./ 重定向(会把深层路由改写成尾斜杠 URL)
if rec.Code == 301 || rec.Code == 302 {
t.Fatalf("unexpected redirect to %q", rec.Header().Get("Location"))
}
})
}
}
+6 -1
View File
@@ -158,7 +158,7 @@ const routes: RouteRecordRaw[] = [
path: '/admin/acp-sessions', path: '/admin/acp-sessions',
name: 'admin-acp-sessions', name: 'admin-acp-sessions',
component: () => import('@/views/acp/AcpAdminSessionsView.vue'), component: () => import('@/views/acp/AcpAdminSessionsView.vue'),
meta: { requiresAdmin: true }, meta: { requiresAuth: true, requiresAdmin: true },
}, },
{ {
path: '/admin/acp/agent-kinds', path: '/admin/acp/agent-kinds',
@@ -175,6 +175,11 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/views/admin/AgentKindEditView.vue'), component: () => import('@/views/admin/AgentKindEditView.vue'),
meta: { requiresAuth: true, requiresAdmin: true }, meta: { requiresAuth: true, requiresAdmin: true },
}, },
{
// 兜底:匹配不到的路径(如空参数的 /p/x/w/、手输错误 URL)统一回首页,避免白屏
path: '/:pathMatch(.*)*',
redirect: '/',
},
] ]
const router = createRouter({ const router = createRouter({
+44 -41
View File
@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { useAcpStore } from '@/stores/acp' import { useAcpStore } from '@/stores/acp'
import AppShell from '@/layouts/AppShell.vue'
import SessionStatusBadge from '@/components/acp/SessionStatusBadge.vue' import SessionStatusBadge from '@/components/acp/SessionStatusBadge.vue'
const store = useAcpStore() const store = useAcpStore()
@@ -21,47 +22,49 @@ async function terminate(id: string) {
</script> </script>
<template> <template>
<div class="p-6 space-y-4"> <AppShell>
<div class="flex items-center justify-between"> <div class="space-y-4">
<h1 class="text-2xl font-semibold">All ACP Sessions</h1> <div class="flex items-center justify-between">
<span class="text-sm text-gray-500">Global admin view (all users)</span> <h2 class="text-lg font-semibold">ACP 会话管理</h2>
</div> <span class="text-sm text-gray-500">全局管理员视图所有用户</span>
</div>
<div v-if="store.loading" class="text-gray-500">Loading...</div> <div v-if="store.loading" class="text-gray-500">Loading...</div>
<div v-else-if="store.error" class="text-red-600">{{ store.error }}</div> <div v-else-if="store.error" class="text-red-600">{{ store.error }}</div>
<div v-else-if="store.sessions.length === 0" class="text-gray-500"> <div v-else-if="store.sessions.length === 0" class="text-gray-500">
No sessions. No sessions.
</div> </div>
<table v-else class="w-full text-sm"> <table v-else class="w-full text-sm">
<thead class="text-left"> <thead class="text-left">
<tr class="border-b"> <tr class="border-b">
<th class="px-3 py-2">User</th> <th class="px-3 py-2">User</th>
<th class="px-3 py-2">Branch</th> <th class="px-3 py-2">Branch</th>
<th class="px-3 py-2">Status</th> <th class="px-3 py-2">Status</th>
<th class="px-3 py-2">Started</th> <th class="px-3 py-2">Started</th>
<th class="px-3 py-2 text-right">Actions</th> <th class="px-3 py-2 text-right">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="s in store.sessions" :key="s.id" class="border-t hover:bg-gray-50"> <tr v-for="s in store.sessions" :key="s.id" class="border-t hover:bg-gray-50">
<td class="px-3 py-2 font-mono text-xs">{{ s.user_id }}</td> <td class="px-3 py-2 font-mono text-xs">{{ s.user_id }}</td>
<td class="px-3 py-2 font-mono text-xs">{{ s.branch }}</td> <td class="px-3 py-2 font-mono text-xs">{{ s.branch }}</td>
<td class="px-3 py-2"><SessionStatusBadge :status="s.status" /></td> <td class="px-3 py-2"><SessionStatusBadge :status="s.status" /></td>
<td class="px-3 py-2 text-xs text-gray-500"> <td class="px-3 py-2 text-xs text-gray-500">
{{ new Date(s.started_at).toLocaleString() }} {{ new Date(s.started_at).toLocaleString() }}
</td> </td>
<td class="px-3 py-2 text-right space-x-2"> <td class="px-3 py-2 text-right space-x-2">
<button <button
v-if="s.status === 'starting' || s.status === 'running'" v-if="s.status === 'starting' || s.status === 'running'"
class="text-red-600 hover:underline" class="text-red-600 hover:underline"
@click="terminate(s.id)" @click="terminate(s.id)"
> >
Terminate Terminate
</button> </button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</AppShell>
</template> </template>