style: unify app controls

docs/superpowers/plans/2026-06-16-unified-app-controls-style.md

@@ -61,7 +61,9 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import LoginPage from './LoginPage.vue'
 
-const login = vi.fn()
+const { login } = vi.hoisted(() => ({
+  login: vi.fn(),
+}))
 
 vi.mock('../composables/useAuth', () => ({
   useAuth: () => ({ login }),
@@ -89,8 +91,10 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import AdminPage from './AdminPage.vue'
 
-const authedFetch = vi.fn()
-const logout = vi.fn()
+const { authedFetch, logout } = vi.hoisted(() => ({
+  authedFetch: vi.fn(),
+  logout: vi.fn(),
+}))
 
 vi.mock('../composables/useAuth', () => ({
   authedFetch: (...args: unknown[]) => authedFetch(...args),
@@ -286,6 +290,7 @@ Expected: Still FAIL because component templates have not been updated yet.
 - Modify: `src/components/LoginPage.vue`
 - Modify: `src/components/BookListPage.vue`
 - Modify: `src/components/AdminPage.vue`
+- Modify: `src/style.css`
 
 - [ ] **Step 1: Update LoginPage template classes**
 
@@ -356,7 +361,11 @@ In `src/components/BookListPage.vue`:
 
 Delete the scoped style block from `src/components/BookListPage.vue` because `.app-page-header` and `.app-page-actions` replace its rules.
 
-- [ ] **Step 5: Update AdminPage template classes**
+- [ ] **Step 5: Remove old BookListPage global control rules**
+
+In `src/style.css`, remove the `.book-list-page` block and remove `.book-list-create input`, `.book-list-item input`, `.book-list-create button`, and `.book-list-item button` from the global book-list selectors. Keep the `.dialog input` rule and keep the book-list layout rules such as `.book-list`, `.book-list-item`, `.book-list-name`, and `.book-list-meta`.
+
+- [ ] **Step 6: Update AdminPage template classes**
 
 In `src/components/AdminPage.vue`:
 
@@ -372,7 +381,7 @@ In `src/components/AdminPage.vue`:
 - Add `data-testid="delete-user-u1"` pattern by rendering ``:data-testid="`delete-user-${u.id}`"`` on each delete button.
 - Add `class="ui-button ui-button--danger"` to each delete button.
 
-- [ ] **Step 6: Replace AdminPage scoped styles**
+- [ ] **Step 7: Replace AdminPage scoped styles**
 
 Replace the scoped style block in `src/components/AdminPage.vue` with:
 
@@ -402,7 +411,7 @@ Replace the scoped style block in `src/components/AdminPage.vue` with:
 </style>
 ```
 
-- [ ] **Step 7: Run focused tests**
+- [ ] **Step 8: Run focused tests**
 
 Run:
 

src/components/AdminPage.test.ts

@@ -0,0 +1,40 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import AdminPage from './AdminPage.vue'
+
+const { authedFetch, logout } = vi.hoisted(() => ({
+  authedFetch: vi.fn(),
+  logout: vi.fn(),
+}))
+
+vi.mock('../composables/useAuth', () => ({
+  authedFetch: (...args: unknown[]) => authedFetch(...args),
+  useAuth: () => ({ logout }),
+}))
+
+describe('AdminPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    authedFetch.mockResolvedValue([
+      { id: 'u1', username: 'teacher', role: 'user', createdAt: '2026-01-01T00:00:00.000Z' },
+    ])
+  })
+
+  it('uses shared app control classes', async () => {
+    const wrapper = mount(AdminPage)
+    await flushPromises()
+
+    expect(wrapper.get('.admin-page').classes()).toContain('app-page')
+    expect(wrapper.get('header').classes()).toContain('app-page-header')
+    expect(wrapper.get('input[placeholder="用户名"]').classes()).toContain('ui-field')
+    expect(wrapper.get('input[placeholder="密码"]').classes()).toContain('ui-field')
+    expect(wrapper.get('select').classes()).toContain('ui-select')
+    expect(wrapper.get('button[type="submit"]').classes()).toEqual(
+      expect.arrayContaining(['ui-button', 'ui-button--primary']),
+    )
+    expect(wrapper.get('table').classes()).toContain('ui-table')
+    expect(wrapper.get('button[data-testid="delete-user-u1"]').classes()).toEqual(
+      expect.arrayContaining(['ui-button', 'ui-button--danger']),
+    )
+  })
+})

src/components/AdminPage.vue

@@ -63,30 +63,44 @@ onMounted(loadUsers)
 </script>
 
 <template>
-  <div class="admin-page">
-    <header>
-      <button @click="emit('back')">← 返回</button>
+  <div class="admin-page app-page">
+    <header class="app-page-header">
       <h1>用户管理</h1>
-      <button @click="handleLogout">退出登录</button>
+      <div class="app-page-actions">
+        <button class="ui-button" type="button" @click="emit('back')">← 返回</button>
+        <button class="ui-button" type="button" @click="handleLogout">退出登录</button>
+      </div>
     </header>
 
     <section class="create-user">
       <h2>新建用户</h2>
       <form @submit.prevent="createUser">
-        <input v-model="newUsername" placeholder="用户名" :disabled="loading" />
-        <input v-model="newPassword" type="password" placeholder="密码" :disabled="loading" />
-        <select v-model="newRole" :disabled="loading">
+        <input v-model="newUsername" class="ui-field" placeholder="用户名" :disabled="loading" />
+        <input
+          v-model="newPassword"
+          class="ui-field"
+          type="password"
+          placeholder="密码"
+          :disabled="loading"
+        />
+        <select v-model="newRole" class="ui-select" :disabled="loading">
           <option value="user">普通用户</option>
           <option value="admin">管理员</option>
         </select>
-        <button type="submit" :disabled="loading || !newUsername || !newPassword">创建</button>
+        <button
+          class="ui-button ui-button--primary"
+          type="submit"
+          :disabled="loading || !newUsername || !newPassword"
+        >
+          创建
+        </button>
       </form>
-      <p v-if="error" class="error">{{ error }}</p>
+      <p v-if="error" class="ui-error">{{ error }}</p>
     </section>
 
     <section class="user-list">
       <h2>所有用户</h2>
-      <table>
+      <table class="ui-table">
         <thead>
           <tr>
             <th>用户名</th>
@@ -101,7 +115,14 @@ onMounted(loadUsers)
             <td>{{ u.role === 'admin' ? '管理员' : '普通用户' }}</td>
             <td>{{ new Date(u.createdAt).toLocaleDateString('zh-CN') }}</td>
             <td>
-              <button @click="removeUser(u.id)">删除</button>
+              <button
+                class="ui-button ui-button--danger"
+                type="button"
+                :data-testid="`delete-user-${u.id}`"
+                @click="removeUser(u.id)"
+              >
+                删除
+              </button>
             </td>
           </tr>
         </tbody>
@@ -111,69 +132,25 @@ onMounted(loadUsers)
 </template>
 
 <style scoped>
-.admin-page {
-  padding: 1.5rem;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-header h1 {
+.app-page-header h1 {
   flex: 1;
-  margin: 0;
+}
+
+.create-user {
+  margin-bottom: 24px;
+}
+
+.create-user h2,
+.user-list h2 {
+  margin: 0 0 12px;
+  color: var(--green-700);
+  font-size: 18px;
 }
 
 .create-user form {
   display: flex;
-  gap: 0.5rem;
+  gap: 8px;
   flex-wrap: wrap;
   align-items: center;
 }
-
-.create-user input,
-.create-user select {
-  padding: 0.4rem 0.6rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.error {
-  color: #c0392b;
-  font-size: 0.875rem;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 0.5rem;
-}
-
-th, td {
-  text-align: left;
-  padding: 0.5rem;
-  border-bottom: 1px solid #eee;
-}
-
-th {
-  font-weight: 600;
-  color: #555;
-}
-
-button {
-  padding: 0.3rem 0.7rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  cursor: pointer;
-  background: white;
-}
-
-button:hover {
-  background: #f5f5f5;
-}
 </style>

src/components/BookListPage.test.ts

@@ -127,4 +127,23 @@ describe('BookListPage', () => {
     expect(booksApi.deleteBook).not.toHaveBeenCalled()
     expect(wrapper.text()).toContain('Web 前端开发')
   })
+
+  it('uses shared app control classes for actions', async () => {
+    vi.mocked(booksApi.listBooks).mockResolvedValue([
+      { id: 'b1', name: 'Web 前端开发', updatedAt: '2026-01-01T00:00:00.000Z', lessonCount: 0 },
+    ])
+
+    const wrapper = mount(BookListPage)
+    await flushPromises()
+
+    expect(wrapper.get('form.book-list-create input').classes()).toContain('ui-field')
+    expect(wrapper.get('form.book-list-create button[type="submit"]').classes()).toEqual(
+      expect.arrayContaining(['ui-button', 'ui-button--primary']),
+    )
+    expect(wrapper.get('button[data-testid="open-b1"]').classes()).toContain('ui-button')
+    expect(wrapper.get('button[data-testid="rename-b1"]').classes()).toContain('ui-button')
+    expect(wrapper.get('button[data-testid="delete-b1"]').classes()).toEqual(
+      expect.arrayContaining(['ui-button', 'ui-button--danger']),
+    )
+  })
 })

src/components/BookListPage.vue

@@ -103,18 +103,26 @@ async function removeBook(book: BookSummary): Promise<void> {
 </script>
 
 <template>
-  <div class="book-list-page">
-    <div class="page-header">
+  <div class="book-list-page app-page">
+    <div class="app-page-header">
       <h1>教学设计</h1>
-      <div class="header-actions">
-        <button v-if="user?.role === 'admin'" type="button" @click="emit('admin')">用户管理</button>
-        <button type="button" @click="logout">退出登录</button>
+      <div class="app-page-actions">
+        <button v-if="user?.role === 'admin'" class="ui-button" type="button" @click="emit('admin')">
+          用户管理
+        </button>
+        <button class="ui-button" type="button" @click="logout">退出登录</button>
       </div>
     </div>
 
     <form class="book-list-create" @submit.prevent="createBook">
-      <input v-model="newBookName" type="text" placeholder="新整本名称" aria-label="新整本名称" />
-      <button type="submit">新建整本</button>
+      <input
+        v-model="newBookName"
+        class="ui-field"
+        type="text"
+        placeholder="新整本名称"
+        aria-label="新整本名称"
+      />
+      <button class="ui-button ui-button--primary" type="submit">新建整本</button>
     </form>
 
     <p v-if="actionError" class="app-notice app-notice--error" role="alert">
@@ -135,37 +143,37 @@ async function removeBook(book: BookSummary): Promise<void> {
       <ul v-else class="book-list">
         <li v-for="book in books" :key="book.id" class="book-list-item">
           <template v-if="renamingId === book.id">
-            <input v-model="renameValue" type="text" aria-label="整本名称" />
-            <button type="button" :data-testid="`confirm-rename-${book.id}`" @click="confirmRename">保存</button>
-            <button type="button" @click="cancelRename">取消</button>
+            <input v-model="renameValue" class="ui-field" type="text" aria-label="整本名称" />
+            <button
+              class="ui-button"
+              type="button"
+              :data-testid="`confirm-rename-${book.id}`"
+              @click="confirmRename"
+            >
+              保存
+            </button>
+            <button class="ui-button" type="button" @click="cancelRename">取消</button>
           </template>
           <template v-else>
             <span class="book-list-name">{{ book.name }}</span>
             <span class="book-list-meta">更新于 {{ formatCstUpdatedAt(book.updatedAt) }} · {{ book.lessonCount }} 课</span>
-            <button type="button" :data-testid="`open-${book.id}`" @click="emit('open', book.id)">打开</button>
-            <button type="button" :data-testid="`rename-${book.id}`" @click="startRename(book)">重命名</button>
-            <button type="button" :data-testid="`delete-${book.id}`" @click="removeBook(book)">删除</button>
+            <button class="ui-button" type="button" :data-testid="`open-${book.id}`" @click="emit('open', book.id)">
+              打开
+            </button>
+            <button class="ui-button" type="button" :data-testid="`rename-${book.id}`" @click="startRename(book)">
+              重命名
+            </button>
+            <button
+              class="ui-button ui-button--danger"
+              type="button"
+              :data-testid="`delete-${book.id}`"
+              @click="removeBook(book)"
+            >
+              删除
+            </button>
           </template>
         </li>
       </ul>
     </template>
   </div>
 </template>
-
-<style scoped>
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-.page-header h1 {
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-</style>

src/components/LoginPage.test.ts

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import LoginPage from './LoginPage.vue'
+
+const { login } = vi.hoisted(() => ({
+  login: vi.fn(),
+}))
+
+vi.mock('../composables/useAuth', () => ({
+  useAuth: () => ({ login }),
+}))
+
+describe('LoginPage', () => {
+  it('uses shared form field and primary button classes', () => {
+    const wrapper = mount(LoginPage)
+
+    expect(wrapper.get('#username').classes()).toContain('ui-field')
+    expect(wrapper.get('#password').classes()).toContain('ui-field')
+    expect(wrapper.get('button[type="submit"]').classes()).toEqual(
+      expect.arrayContaining(['ui-button', 'ui-button--primary']),
+    )
+  })
+})

src/components/LoginPage.vue

@@ -33,6 +33,7 @@ async function handleSubmit(): Promise<void> {
         <label for="username">用户名</label>
         <input
           id="username"
+          class="ui-field"
           v-model="username"
           type="text"
           autocomplete="username"
@@ -43,14 +44,19 @@ async function handleSubmit(): Promise<void> {
         <label for="password">密码</label>
         <input
           id="password"
+          class="ui-field"
           v-model="password"
           type="password"
           autocomplete="current-password"
           :disabled="loading"
         />
       </div>
-      <p v-if="error" class="error">{{ error }}</p>
-      <button type="submit" :disabled="loading || !username || !password">
+      <p v-if="error" class="ui-error">{{ error }}</p>
+      <button
+        class="ui-button ui-button--primary"
+        type="submit"
+        :disabled="loading || !username || !password"
+      >
         {{ loading ? '登录中…' : '登录' }}
       </button>
     </form>
@@ -63,66 +69,37 @@ async function handleSubmit(): Promise<void> {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: #f5f5f5;
+  background: #edf0f2;
+  padding: 24px;
 }
 
 .login-form {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  width: 320px;
+  width: min(100%, 340px);
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 16px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: 0 4px 18px rgba(32, 42, 51, 0.12);
+  padding: 24px;
 }
 
 .login-form h1 {
   margin: 0;
-  font-size: 1.5rem;
+  color: var(--green-700);
+  font-size: 24px;
   text-align: center;
 }
 
 .field {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 6px;
 }
 
 .field label {
-  font-size: 0.875rem;
-  color: #555;
-}
-
-.field input {
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 1rem;
-}
-
-.field input:disabled {
-  background: #f5f5f5;
-}
-
-.error {
-  color: #c0392b;
-  font-size: 0.875rem;
-  margin: 0;
-}
-
-button[type='submit'] {
-  padding: 0.6rem;
-  background: #2c3e50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-button[type='submit']:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  color: var(--muted);
+  font-size: 14px;
 }
 </style>

src/style.css

@@ -38,6 +38,130 @@ input {
   min-height: 100vh;
 }
 
+/* Shared app controls */
+.app-page {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 32px 16px;
+}
+
+.app-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.app-page-header h1 {
+  margin: 0;
+  color: var(--green-700);
+  font-size: 24px;
+}
+
+.app-page-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.ui-button {
+  border: 1px solid var(--line);
+  background: #fff;
+  border-radius: 6px;
+  padding: 6px 14px;
+  color: var(--green-700);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.ui-button:hover:not(:disabled) {
+  background: var(--green-100);
+  border-color: var(--green-600);
+}
+
+.ui-button:disabled {
+  color: var(--muted);
+  border-color: var(--line);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ui-button--primary {
+  border-color: var(--green-600);
+  background: var(--green-600);
+  color: #fff;
+}
+
+.ui-button--primary:hover:not(:disabled) {
+  background: var(--green-700);
+  border-color: var(--green-700);
+}
+
+.ui-button--danger {
+  color: #c0392b;
+}
+
+.ui-button--danger:hover:not(:disabled) {
+  background: #fdecea;
+  border-color: #c0392b;
+}
+
+.ui-field,
+.ui-select {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 8px 12px;
+  background: #fff;
+  color: #202a33;
+}
+
+.ui-field:focus,
+.ui-select:focus {
+  outline: none;
+  border-color: var(--green-600);
+  box-shadow: 0 0 0 2px rgba(45, 122, 88, 0.16);
+}
+
+.ui-field:disabled,
+.ui-select:disabled {
+  background: #f4f6f7;
+  color: var(--muted);
+  cursor: not-allowed;
+}
+
+.ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 8px;
+  background: #fff;
+  border: 1px solid var(--line);
+}
+
+.ui-table th,
+.ui-table td {
+  text-align: left;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.ui-table th {
+  background: var(--green-100);
+  color: var(--green-700);
+  font-weight: 600;
+}
+
+.ui-table tr:last-child td {
+  border-bottom: none;
+}
+
+.ui-error {
+  color: #c0392b;
+  font-size: 14px;
+  margin: 8px 0 0;
+}
+
 /* Toolbar */
 .workspace-toolbar {
   display: flex;
@@ -592,38 +716,19 @@ table {
 }
 
 /* Book list */
-.book-list-page {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 32px 16px;
-}
-
 .book-list-create {
   display: flex;
   gap: 8px;
   margin-bottom: 16px;
 }
 
-.dialog input,
-.book-list-create input,
-.book-list-item input {
+.dialog input {
   flex: 1 1 auto;
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 8px 12px;
 }
 
-.book-list-create button,
-.book-list-item button {
-  border: 1px solid var(--line);
-  background: #fff;
-  border-radius: 6px;
-  padding: 6px 14px;
-  color: var(--green-700);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
 .book-list {
   list-style: none;
   margin: 0;