feat: 管理后台接真实接口并加 Playwright e2e

web/src/views/EndpointsView.spec.ts

@@ -1,6 +1,6 @@
 import { config, mount, flushPromises } from "@vue/test-utils";
 import { createPinia, setActivePinia } from "pinia";
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   NConfigProvider,
   NDialogProvider,
@@ -12,6 +12,8 @@ import { defineComponent, h, nextTick } from "vue";
 import EndpointsView from "./EndpointsView.vue";
 import { mockApi } from "@/api/mock";
 
+vi.mock("@/api/admin", async () => import("@/api/admin-mock"));
+
 config.global.stubs = { teleport: true };
 
 function wrap(Comp: object) {

web/src/views/GroupsView.vue

@@ -230,6 +230,7 @@ async function onTransfer(endpointId: string) {
       <template #actions>
         <n-button
           type="primary"
+          data-testid="group-create-open"
           @click="
             Object.assign(createForm, { id: '', name: '', owner_id: '', member_ids: '' });
             createOpen = true;
@@ -267,23 +268,31 @@ async function onTransfer(endpointId: string) {
       <n-scrollbar style="max-height: 320px">
         <n-form label-placement="left" label-width="90" :show-feedback="false">
           <n-form-item label="编号">
-            <n-input v-model:value="createForm.id" placeholder="留空则生成" />
+            <n-input v-model:value="createForm.id" placeholder="留空则生成" data-testid="group-id" />
           </n-form-item>
           <n-form-item label="名称">
-            <n-input v-model:value="createForm.name" />
+            <n-input v-model:value="createForm.name" data-testid="group-name" />
           </n-form-item>
           <n-form-item label="群主编号">
-            <n-input v-model:value="createForm.owner_id" />
+            <n-input v-model:value="createForm.owner_id" data-testid="group-owner" />
           </n-form-item>
           <n-form-item label="成员" label-placement="top">
-            <n-input v-model:value="createForm.member_ids" type="textarea" :rows="3" placeholder="多个编号用逗号或空格分隔" />
+            <n-input
+              v-model:value="createForm.member_ids"
+              type="textarea"
+              :rows="3"
+              placeholder="多个编号用逗号或空格分隔"
+              data-testid="group-members"
+            />
           </n-form-item>
         </n-form>
       </n-scrollbar>
       <template #footer>
         <n-space justify="end">
           <n-button @click="createOpen = false">取消</n-button>
-          <n-button type="primary" :loading="createLoading" @click="submitCreate">创建</n-button>
+          <n-button type="primary" :loading="createLoading" data-testid="group-create-submit" @click="submitCreate">
+            创建
+          </n-button>
         </n-space>
       </template>
     </n-modal>

web/src/views/LoginView.spec.ts

@@ -1,7 +1,7 @@
 import { config, mount, flushPromises } from "@vue/test-utils";
 import { createPinia, setActivePinia } from "pinia";
 import { createMemoryHistory, createRouter } from "vue-router";
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   NConfigProvider,
   NDialogProvider,
@@ -14,6 +14,8 @@ import LoginView from "./LoginView.vue";
 import { mockApi } from "@/api/mock";
 import { useAuthStore } from "@/stores/auth";
 
+vi.mock("@/api/admin", async () => import("@/api/admin-mock"));
+
 config.global.stubs = { teleport: true };
 
 function wrap(child: object) {

web/src/views/LoginView.vue

@@ -52,9 +52,6 @@ async function onSubmit() {
           </n-button>
         </n-space>
       </n-form>
-      <n-text depth="3" style="display: block; margin-top: 12px; font-size: 12px">
-        假数据模式：用户名 admin，密码 adminpassword
-      </n-text>
     </n-card>
   </div>
 </template>

web/src/views/RegistrationView.vue

@@ -71,16 +71,23 @@ async function generateCode() {
               开放注册
               <HelpTip>开启后需同时设置安全码，客户端注册时携带。</HelpTip>
             </template>
-            <n-switch :value="data.enabled" :loading="saving" @update:value="onToggle" />
+            <n-switch
+              :value="data.enabled"
+              :loading="saving"
+              data-testid="reg-enabled"
+              @update:value="onToggle"
+            />
           </n-form-item>
           <n-form-item label="安全码">
-            <n-input v-model:value="codeDraft" placeholder="8–64 字符" />
+            <n-input v-model:value="codeDraft" placeholder="8–64 字符" data-testid="reg-code" />
           </n-form-item>
           <n-form-item label="更新时间">
             <n-text>{{ formatLocalMs(data.updated_at_ms) }}</n-text>
           </n-form-item>
           <n-space>
-            <n-button type="primary" :loading="saving" @click="saveCode">保存安全码</n-button>
+            <n-button type="primary" :loading="saving" data-testid="reg-save-code" @click="saveCode">
+              保存安全码
+            </n-button>
             <n-button :loading="saving" @click="generateCode">生成安全码</n-button>
           </n-space>
         </n-form>

web/src/views/TokensView.spec.ts

@@ -1,6 +1,6 @@
 import { config, mount, flushPromises } from "@vue/test-utils";
 import { createPinia, setActivePinia } from "pinia";
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   NConfigProvider,
   NDialogProvider,
@@ -12,6 +12,8 @@ import { defineComponent, h, nextTick } from "vue";
 import TokensView from "./TokensView.vue";
 import { mockApi } from "@/api/mock";
 
+vi.mock("@/api/admin", async () => import("@/api/admin-mock"));
+
 config.global.stubs = { teleport: true };
 
 function wrap(Comp: object) {

web/src/views/TokensView.vue

@@ -40,7 +40,7 @@ onMounted(() => {
 });
 
 const columns = computed<DataTableColumns<ApiToken>>(() => [
-  { title: "ID", key: "id", width: 60 },
+  { title: "ID", key: "id", width: 140, ellipsis: { tooltip: true } },
   { title: "名称", key: "name", width: 160 },
   {
     title: "启用",