style(header): 演示模式菜单文案改为「进入演示 / 退出演示」
两端都是四字,动作对称。spec 与 plan 文档同步更新。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -212,7 +212,7 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
|
||||
|
||||
并把第 227 行的结尾 `]` 改为 `])`。
|
||||
|
||||
**这一步是必需的,不是风格偏好**:原来的 `options` 是普通数组,只在 setup 时求值一次。新菜单项的 `label`(「学生视角」/「退出学生视角」)和 `show` 都要跟随状态变化,留在普通数组里永远不会更新。同文件的 `menus`(第 119 行)本来就是 computed,改完两者一致。
|
||||
**这一步是必需的,不是风格偏好**:原来的 `options` 是普通数组,只在 setup 时求值一次。新菜单项的 `label`(「进入演示」/「退出演示」)和 `show` 都要跟随状态变化,留在普通数组里永远不会更新。同文件的 `menus`(第 119 行)本来就是 computed,改完两者一致。
|
||||
|
||||
模板里 `:options="options"`(第 280 行)不用动,computed 在模板中自动解包。
|
||||
|
||||
@@ -239,7 +239,7 @@ function handleToggleDemoMode() {
|
||||
|
||||
```ts
|
||||
{
|
||||
label: userStore.demoMode ? "退出学生视角" : "学生视角",
|
||||
label: userStore.demoMode ? "退出演示" : "进入演示",
|
||||
key: "demo-mode",
|
||||
show: userStore.canToggleDemoMode,
|
||||
icon: renderIcon("fluent-emoji:graduation-cap"),
|
||||
@@ -247,7 +247,7 @@ function handleToggleDemoMode() {
|
||||
},
|
||||
```
|
||||
|
||||
文案本身就是状态指示器:看到「退出学生视角」说明当前正处于演示模式。按设计不额外加横幅。
|
||||
文案本身就是状态指示器:看到「退出演示」说明当前正处于演示模式。按设计不额外加横幅。
|
||||
|
||||
- [ ] **Step 4: 格式化并冒烟构建**
|
||||
|
||||
@@ -265,12 +265,12 @@ Expected: 构建成功,无报错。
|
||||
|
||||
用超管账号登录,逐项核对:
|
||||
|
||||
1. 右上角用户名下拉菜单出现「学生视角」,图标正常显示(不是空白方块)
|
||||
2. 点击 →「后台」菜单项消失,下拉菜单文案变为「退出学生视角」
|
||||
3. 刷新页面 → 仍是学生界面,菜单仍显示「退出学生视角」
|
||||
1. 右上角用户名下拉菜单出现「进入演示」,图标正常显示(不是空白方块)
|
||||
2. 点击 →「后台」菜单项消失,下拉菜单文案变为「退出演示」
|
||||
3. 刷新页面 → 仍是学生界面,菜单仍显示「退出演示」
|
||||
4. 地址栏直接输入 `/admin` → 弹回首页
|
||||
5. 点「退出学生视角」→「后台」入口恢复,文案变回「学生视角」
|
||||
6. 进入 `/admin/problem/list`,打开下拉菜单点「学生视角」→ 自动跳回首页
|
||||
5. 点「退出演示」→「后台」入口恢复,文案变回「进入演示」
|
||||
6. 进入 `/admin/problem/list`,打开下拉菜单点「进入演示」→ 自动跳回首页
|
||||
7. 退出登录后重新用超管登录 → 演示模式已重置为关闭状态
|
||||
8. 用教师管理员账号登录 → 下拉菜单中**没有**这一项
|
||||
|
||||
|
||||
@@ -56,7 +56,7 @@ function toggleDemoMode() {
|
||||
|---|---|
|
||||
| `src/utils/constants.ts` | `STORAGE_KEY` 增加 `DEMO_MODE: "demoMode"` |
|
||||
| `src/shared/store/user.ts` | 新增 `demoMode`、`realIsSuperAdmin`、`canToggleDemoMode`、`toggleDemoMode`;6 个角色 getter 加 `!demoMode.value &&` 前缀;导出新成员 |
|
||||
| `src/shared/components/Header.vue` | 用户下拉菜单 `options` 增加一项「学生视角 / 退出学生视角」 |
|
||||
| `src/shared/components/Header.vue` | 用户下拉菜单 `options` 增加一项「进入演示 / 退出演示」 |
|
||||
|
||||
**不改**:`src/main.ts` 路由守卫、`src/utils/permissions.ts`、以及所有页面级的 `v-if` 判断。它们读的都是上述 getter,自动跟随。
|
||||
|
||||
@@ -65,7 +65,7 @@ function toggleDemoMode() {
|
||||
**入口**:右上角用户头像下拉菜单,与「我的主页」「我的提交」并列。
|
||||
|
||||
- 显示条件:`userStore.canToggleDemoMode`
|
||||
- 文案随状态翻转:未开启显示「学生视角」,已开启显示「退出学生视角」
|
||||
- 文案随状态翻转:未开启显示「进入演示」,已开启显示「退出演示」
|
||||
- 该文案本身就是状态指示器,不额外加横幅或角标
|
||||
|
||||
**点击行为**:
|
||||
@@ -92,11 +92,11 @@ function toggleDemoMode() {
|
||||
|
||||
手工验证(本项目不写测试):
|
||||
|
||||
1. 超管登录 → 下拉菜单出现「学生视角」
|
||||
2. 点击 → 顶栏「后台」消失,菜单文案变为「退出学生视角」
|
||||
1. 超管登录 → 下拉菜单出现「进入演示」
|
||||
2. 点击 → 顶栏「后台」消失,菜单文案变为「退出演示」
|
||||
3. 停在 `/admin/problem/list` 时点击 → 跳回首页
|
||||
4. 地址栏直接输 `/admin` → 弹回首页
|
||||
5. 刷新页面 → 仍是学生界面
|
||||
6. 点「退出学生视角」→ 后台入口恢复
|
||||
6. 点「退出演示」→ 后台入口恢复
|
||||
7. 退出登录再登录 → 演示模式已重置为关闭
|
||||
8. 用教师管理员账号登录 → 菜单中无此项
|
||||
|
||||
@@ -29,7 +29,6 @@ const hiddenICP = computed(() =>
|
||||
["problem", "contest problem"].includes(route.name as string),
|
||||
)
|
||||
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
const copyrightText = `© 2022 - ${currentYear} 判题狗 保留所有权利`
|
||||
|
||||
@@ -56,7 +55,6 @@ function goPublicSecurity() {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
|
||||
.beian--mobile {
|
||||
font-size: 12px;
|
||||
max-width: 100%;
|
||||
|
||||
@@ -227,7 +227,7 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: userStore.demoMode ? "退出演示" : "学生视角",
|
||||
label: userStore.demoMode ? "退出演示" : "进入演示",
|
||||
key: "demo-mode",
|
||||
show: userStore.canToggleDemoMode,
|
||||
icon: renderIcon("fluent-emoji:graduation-cap"),
|
||||
|
||||
Reference in New Issue
Block a user