fix issue 207 account actions visibility

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.9.12 - 2026-07-12
+
+- 修复窄屏导航栏隐藏整个用户区域、导致登录用户无法退出的问题；退出按钮现在在所有视口宽度下保持可见，用户身份详情仍在桌面端显示。
+- 高级模式设置页复用统一的账户管理组件，恢复当前账户信息、退出登录以及超级管理员的账户新增、编辑和删除入口。
+- 新增账户入口回归测试，防止响应式样式或高级模式设置页再次移除关键认证操作。
+
 ## 4.9.11 - 2026-07-09
 
 - 修复登录成功后仍停留在登录页、刷新后又要求登录的循环问题。

app-release.json

@@ -4,8 +4,18 @@
     "name": "KVideo",
     "branch": "main"
   },
-  "currentVersion": "4.9.11",
+  "currentVersion": "4.9.12",
   "releases": [
+    {
+      "version": "4.9.12",
+      "publishedAt": "2026-07-12",
+      "title": "恢复账户管理与退出登录入口",
+      "notes": [
+        "窄屏导航栏现在始终显示退出登录按钮，不再把整个用户操作区隐藏在桌面断点之后。",
+        "高级模式设置页现在复用统一账户管理组件，恢复账户信息、退出登录及超级管理员账户管理功能。",
+        "新增账户入口回归测试，覆盖窄屏导航栏和高级模式设置页。"
+      ]
+    },
     {
       "version": "4.9.11",
       "publishedAt": "2026-07-09",

app/premium/settings/page.tsx

@@ -6,6 +6,7 @@ import { PremiumSourceSettings } from '@/components/settings/PremiumSourceSettin
 import { DisplaySettings } from '@/components/settings/DisplaySettings';
 import { PlayerSettings } from '@/components/settings/PlayerSettings';
 import { AppVersionSettings } from '@/components/settings/AppVersionSettings';
+import { AccountSettings } from '@/components/settings/AccountSettings';
 import { AdminGate } from '@/components/AdminGate';
 import { usePremiumSettingsPage } from './hooks/usePremiumSettingsPage';
 import Link from 'next/link';
@@ -78,6 +79,9 @@ export default function PremiumSettingsPage() {
 
                 <AppVersionSettings />
 
+                {/* Account management and logout must remain available in premium mode. */}
+                <AccountSettings />
+
                 {/* Player Settings */}
                 <PlayerSettings
                     fullscreenType={fullscreenType}

components/layout/Navbar.tsx

@@ -82,8 +82,8 @@ export function Navbar({ onReset, isPremiumMode = false }: NavbarProps) {
 
                             {/* User Info */}
                             {session && (
-                                <div className="hidden sm:flex items-center gap-2">
+                                <div className="flex items-center gap-1 sm:gap-2">
-                                    <div className="flex items-center gap-1.5 px-2.5 py-1 bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-full)] text-xs">
+                                    <div className="hidden sm:flex items-center gap-1.5 px-2.5 py-1 bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-full)] text-xs">
                                         <div className="w-5 h-5 rounded-[var(--radius-full)] bg-[var(--accent-color)]/10 flex items-center justify-center text-[var(--accent-color)] font-bold text-[10px] border border-[var(--glass-border)]">
                                             {session.name.charAt(0)}
                                         </div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "kvideo",
-  "version": "4.9.11",
+  "version": "4.9.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "kvideo",
-      "version": "4.9.11",
+      "version": "4.9.12",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kvideo",
-  "version": "4.9.11",
+  "version": "4.9.12",
   "private": true,
   "scripts": {
     "dev": "node scripts/next-with-lan-access.mjs dev",

tests/account-actions-view.test.ts

@@ -0,0 +1,27 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const projectRoot = process.cwd();
+
+test('navbar keeps logout available below the desktop breakpoint', () => {
+  const source = readFileSync(
+    join(projectRoot, 'components/layout/Navbar.tsx'),
+    'utf8',
+  );
+
+  assert.match(source, /\{session && \(\s*<div className="flex items-center gap-1 sm:gap-2">/);
+  assert.match(source, /<div className="hidden sm:flex[^>]*>[\s\S]*?session\.name/);
+  assert.doesNotMatch(source, /\{session && \(\s*<div className="hidden sm:flex/);
+});
+
+test('premium settings includes the shared account management section', () => {
+  const source = readFileSync(
+    join(projectRoot, 'app/premium/settings/page.tsx'),
+    'utf8',
+  );
+
+  assert.match(source, /import \{ AccountSettings \} from '@\/components\/settings\/AccountSettings';/);
+  assert.match(source, /<AppVersionSettings \/>[\s\S]*?<AccountSettings \/>/);
+});