feat: enhance admin components and update terminology for private access

Author: zyyv

app/components/DarkToggle.vue

@@ -1,11 +1,33 @@
 <script setup lang="ts">
 const mode = useColorMode()
 const state = mode.state
+const consecutiveClicks = shallowRef(0)
+let resetClicksTimer: number | undefined
+
+const SECRET_CLICK_COUNT = 5
+const CLICK_SEQUENCE_TIMEOUT_MS = 1_500
 
 function toggleDark() {
   mode.value = state.value === 'dark' ? 'light' : 'dark'
+
+  consecutiveClicks.value += 1
+  if (resetClicksTimer) window.clearTimeout(resetClicksTimer)
+
+  if (consecutiveClicks.value === SECRET_CLICK_COUNT) {
+    consecutiveClicks.value = 0
+    void navigateTo('/admin')
+    return
+  }
+
+  resetClicksTimer = window.setTimeout(() => {
+    consecutiveClicks.value = 0
+  }, CLICK_SEQUENCE_TIMEOUT_MS)
 }
 
+onBeforeUnmount(() => {
+  if (resetClicksTimer) window.clearTimeout(resetClicksTimer)
+})
+
 watchEffect(() => {
   if (typeof document !== 'undefined') {
     document

app/components/admin/AdminLogin.vue

@@ -15,16 +15,16 @@ function submit() {
     <div class="login-copy">
       <span class="login-index">PRIVATE / 01</span>
       <h1 id="admin-login-title">Site<br />control.</h1>
-      <p>一个只属于站点维护者的入口。登录后，管理操作会出现在对应内容页面。</p>
+      <p>一个只属于站点维护者的私密空间。验证后，维护操作会出现在对应内容页面。</p>
     </div>
 
     <form class="login-form" @submit.prevent="submit">
       <div class="login-form__heading">
         <span aria-hidden="true"><i /> SECURE SESSION</span>
-        <p>使用 NUXT_ADMIN_PASSWORD 继续</p>
+        <p>验证访问密钥后继续</p>
       </div>
 
-      <label for="admin-password">管理密码</label>
+      <label for="admin-password">访问密钥</label>
       <div class="login-control">
         <input
           id="admin-password"
@@ -55,7 +55,7 @@ function submit() {
       </p>
 
       <button class="login-submit" type="submit" :disabled="loading || !password">
-        <span>{{ loading ? '正在验证' : '进入管理模式' }}</span>
+        <span>{{ loading ? '正在验证' : '进入私密空间' }}</span>
         <i class="i-hugeicons:arrow-up-right-01" aria-hidden="true" />
       </button>
     </form>

app/components/admin/AdminPortal.vue

@@ -27,13 +27,13 @@ async function handleLogout() {
   <section class="portal-shell" aria-labelledby="admin-portal-title">
     <header class="portal-header">
       <div>
-        <span class="portal-index">ADMIN / ACTIVE</span>
+        <span class="portal-index">PRIVATE / ACTIVE</span>
         <h1 id="admin-portal-title">Control<br />room.</h1>
       </div>
       <div class="portal-session">
-        <span><i aria-hidden="true" /> 管理会话已启用</span>
+        <span><i aria-hidden="true" /> 私密会话已启用</span>
         <button type="button" :disabled="mutating" @click="handleLogout">
-          {{ mutating ? '正在退出' : '退出登录' }}
+          {{ mutating ? '正在退出' : '结束会话' }}
         </button>
       </div>
     </header>
@@ -53,7 +53,7 @@ async function handleLogout() {
     </div>
 
     <footer class="portal-footer">
-      <p>登录态同时作用于站点内容页；只有管理员会看到编辑、删除和私密内容控制。</p>
+      <p>私密会话同时作用于站点内容页；维护工具不会对普通访客显示。</p>
       <NuxtLink to="/">返回站点</NuxtLink>
     </footer>
   </section>

app/components/admin/PhotoAdmin.vue

@@ -69,7 +69,7 @@ onMounted(() => loadPhotos(1))
       </div>
       <div class="workspace-status">
         <span><i aria-hidden="true" /> D1 + R2 已连接</span>
-        <NuxtLink to="/admin">管理首页</NuxtLink>
+        <NuxtLink to="/admin">私密首页</NuxtLink>
       </div>
     </header>
 

app/components/bookmarks/BookmarkCollection.vue

@@ -50,7 +50,7 @@ const looseBookmarks = computed(() => props.items.filter((item) => item.kind ===
           <i class="i-hugeicons:folder-02" aria-hidden="true" />
           <h2>{{ folder.title }}</h2>
           <span>{{ folder.children.length }}</span>
-          <span v-if="isAdmin && folder.private" class="collection__private" title="仅管理员可见">
+          <span v-if="isAdmin && folder.private" class="collection__private" title="仅维护者可见">
             <i class="i-hugeicons:square-lock-02" aria-hidden="true" /> 私密
           </span>
         </div>

app/components/bookmarks/BookmarkEditor.vue

@@ -164,7 +164,7 @@ function submit() {
           <label class="editor__visibility">
             <input v-model="form.private" type="checkbox" />
             <span>
-              <strong>仅管理员可见</strong>
+              <strong>仅维护者可见</strong>
               <small>访客看不到此项目；私密文件夹也会隐藏其内容。</small>
             </span>
           </label>

app/components/bookmarks/BookmarkItem.vue

@@ -43,7 +43,7 @@ const host = computed(() => bookmarkHost(props.item.url))
       <span v-for="tag in item.tags.slice(0, 3)" :key="tag">{{ tag }}</span>
     </div>
 
-    <span v-if="isAdmin && item.private" class="bookmark-item__private" title="仅管理员可见">
+    <span v-if="isAdmin && item.private" class="bookmark-item__private" title="仅维护者可见">
       <i class="i-hugeicons:square-lock-02" aria-hidden="true" />
       <span>私密</span>
     </span>

app/components/bookmarks/BookmarksPage.vue

@@ -135,8 +135,8 @@ onMounted(loadBookmarks)
       </p>
 
       <div v-if="isAdmin" class="admin-notice">
-        <span><i class="i-hugeicons:square-lock-02" aria-hidden="true" /> 管理模式</span>
-        <p>你已登录，可以直接维护这页的公开与私密书签。</p>
+        <span><i class="i-hugeicons:square-lock-02" aria-hidden="true" /> 私密模式</span>
+        <p>私密会话已启用，可以直接维护这页的公开与私密书签。</p>
       </div>
 
       <BookmarkToolbar

app/components/icons/IconsUnoCSS.vue

@@ -19,7 +19,7 @@
         from-unocss-from
         via-unocss-via
         to-unocss-to
-        >admin</sub
+        >lab</sub
       >
     </a>
   </div>

app/components/nav/NavHeader.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 const route = useRoute()
-const { authenticated } = useAdminSession()
 
-const publicNavigation = [
+const navigation = [
   { label: 'Home', to: '/', icon: null },
   { label: 'Photos', to: '/photos', icon: 'i-hugeicons:image-03' },
   { label: 'Projects', to: '/projects', icon: 'i-hugeicons:package-search' },
@@ -11,15 +10,6 @@ const publicNavigation = [
   { label: 'About', to: '/about', icon: 'i-hugeicons:user-circle' },
 ] as const
 
-const navigation = computed(() => [
-  ...publicNavigation,
-  {
-    label: authenticated.value ? 'Admin' : 'Login',
-    to: '/admin',
-    icon: authenticated.value ? 'i-hugeicons:dashboard-square-01' : 'i-hugeicons:square-lock-02',
-  },
-])
-
 const isHome = computed(() => route.path === '/')
 const { mode: photosViewMode, togglePhotosView } = usePhotosViewMode()
 
@@ -90,11 +80,6 @@ function isActive(path: string) {
             <MeAvatar v-else-if="item.to === '/'" navigation shared />
             <i v-else class="color-inherit" :class="item.icon" aria-hidden="true" />
             <span v-if="!isHome" class="sr-only">{{ item.label }}</span>
-            <span
-              v-if="authenticated && item.to === '/admin'"
-              class="absolute right-[0.32rem] top-[0.32rem] size-[0.3rem] rounded-full bg-[#568c68]"
-              aria-hidden="true"
-            />
           </NuxtLink>
         </template>
       </div>