update

src/components/StreetSnaps.astro

@@ -7,15 +7,6 @@ import "@/styles/look-grid.css"
 
 const { locale, t } = getI18n(Astro)
 
-// 登录门禁弹窗文案
-const loginModalTitle = t('login')
-const loginModalPrompt = t('login to continue')
-const loginModalAccountLabel = t('username or email')
-const loginModalPasswordLabel = t('password')
-const loginModalSubmitLabel = t('login')
-const loginModalClose = t('close')
-const loginModalFail = t('login failed')
-
 // 年份筛选：近 10 年（含当年），末项兜底
 const currentYear = new Date().getFullYear()
 const yearFloor = currentYear - 9
@@ -56,7 +47,7 @@ const cityOptions: { value: string; label: string }[] = [
 ]
 ---
 
-<div class="snapsroot w-full" x-data="streetSnapsPage()" data-locale={locale} data-login-fail={loginModalFail}>
+<div class="snapsroot w-full" x-data="streetSnapsPage()" data-locale={locale}>
     <!-- 顶部：极简眉头 -->
     <header class="snapshead">
         <div>
@@ -97,7 +88,7 @@ const cityOptions: { value: string; label: string }[] = [
               <div class="snapsg-b" x-show="!collapsedGroups.year">
                   <ul class="snapschecks snapschecks--flat">
                   {yearOptions.map((o) => (
-                    <li><label><input type="radio" name="snapYear" value={String(o.value)} :checked={'selectedYear === "' + String(o.value) + '"'} :class={`{'is-checked': selectedYear === '${String(o.value)}'`} @click.prevent={'selectedYear = selectedYear === "' + String(o.value) + '" ? "" : "' + String(o.value) + '"; requireLogin() && loadPage(1)'} /> <span>{o.label}</span></label></li>
+                    <li><label login-required><input type="radio" name="snapYear" value={String(o.value)} :checked={'selectedYear === "' + String(o.value) + '"'} :class={`{'is-checked': selectedYear === '${String(o.value)}'`} @click.prevent={'selectedYear = selectedYear === "' + String(o.value) + '" ? "" : "' + String(o.value) + '"; loadPage(1)'} /> <span>{o.label}</span></label></li>
                   ))}
                   </ul>
               </div>
@@ -114,7 +105,7 @@ const cityOptions: { value: string; label: string }[] = [
               <div class="snapsg-b" x-show="!collapsedGroups.sort">
                   <ul class="snapschecks snapschecks--flat">
                   {sortOptions.map((o) => (
-                    <li><label><input type="radio" name="snapSort" value={o.value} :checked={'selectedSort === "' + o.value + '"'} :class={`{'is-checked': selectedSort === '${o.value}'}`} @click.prevent={'selectedSort = selectedSort === "' + o.value + '" ? "image_count" : "' + o.value + '"; requireLogin() && loadPage(1)'} /> <span>{o.label}</span></label></li>
+                    <li><label login-required><input type="radio" name="snapSort" value={o.value} :checked={'selectedSort === "' + o.value + '"'} :class={`{'is-checked': selectedSort === '${o.value}'}`} @click.prevent={'selectedSort = selectedSort === "' + o.value + '" ? "image_count" : "' + o.value + '"; loadPage(1)'} /> <span>{o.label}</span></label></li>
                   ))}
                   </ul>
               </div>
@@ -131,13 +122,13 @@ const cityOptions: { value: string; label: string }[] = [
               <div class="snapsg-b" x-show="!collapsedGroups.city">
                   <ul class="snapschecks snapschecks--flat">
                   {cityOptions.map((o) => (
-                    <li><label><input type="radio" name="snapCity" value={o.value} :checked={'selectedCity === "' + o.value + '"'} :class={`{'is-checked': selectedCity === '${o.value}'}`} @click.prevent={'selectedCity = selectedCity === "' + o.value + '" ? "" : "' + o.value + '"; requireLogin() && loadPage(1)'} /> <span>{o.label}</span></label></li>
+                    <li><label login-required><input type="radio" name="snapCity" value={o.value} :checked={'selectedCity === "' + o.value + '"'} :class={`{'is-checked': selectedCity === '${o.value}'}`} @click.prevent={'selectedCity = selectedCity === "' + o.value + '" ? "" : "' + o.value + '"; loadPage(1)'} /> <span>{o.label}</span></label></li>
                   ))}
                   </ul>
               </div>
               </section>
 
-              <button class="snapsclear" type="button" @click="requireLogin() && clearAll()" x-show="pills.length > 0" x-cloak>Clear all ×</button>
+              <button login-required class="snapsclear" type="button" @click="clearAll()" x-show="pills.length > 0" x-cloak>Clear all ×</button>
           </div>
         </aside>
 
@@ -203,7 +194,7 @@ const cityOptions: { value: string; label: string }[] = [
                                 </div>
                             </div>
                           </a>
-                          <button type="button" class="fav-toggle" :class="{ 'is-on': favState(it.id) }" @click.prevent="toggleFav(it)" :aria-pressed="favState(it.id)" :title="favState(it.id) ? 'Saved' : 'Save'">
+                          <button login-required type="button" class="fav-toggle" :class="{ 'is-on': favState(it.id) }" @click.prevent="toggleFav(it)" :aria-pressed="favState(it.id)" :title="favState(it.id) ? 'Saved' : 'Save'">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/></svg>
                           </button>
                         </div>
@@ -212,45 +203,19 @@ const cityOptions: { value: string; label: string }[] = [
             </template>
         </div>
 
-        <nav class="snappager" x-show="isAuthed && lastPage > 1" aria-label="Pagination">
-            <button class="pg pg-prev" type="button" :disabled="page <= 1 || loading" @click="prevPage()">‹ Prev</button>
+        <nav class="snappager" x-show="lastPage > 1" aria-label="Pagination">
+            <button login-required class="pg pg-prev" type="button" :disabled="page <= 1 || loading" @click="prevPage()">‹ Prev</button>
             <template x-for="(p, i) in pageList" :key="i">
                 <span class="pg-wrap">
                     <span class="pg-ellipsis" x-show="p === '...'" x-text="'…'"></span>
-                    <button class="pg" type="button" x-show="p !== '...'" :class="{ 'is-current': p === page }" :disabled="p === page" @click="goPage(p)" x-text="p"></button>
+                    <button login-required class="pg" type="button" x-show="p !== '...'" :class="{ 'is-current': p === page }" :disabled="p === page" @click="goPage(p)" x-text="p"></button>
                 </span>
             </template>
-            <button class="pg pg-next" type="button" :disabled="page >= lastPage || loading" @click="nextPage()">Next ›</button>
+            <button login-required class="pg pg-next" type="button" :disabled="page >= lastPage || loading" @click="nextPage()">Next ›</button>
         </nav>
         </main>
     </div>
 
-    <!-- 登录门禁弹窗：未登录点筛选/翻页时弹出内联登录表单 -->
-    <div x-show="showLoginModal" x-cloak class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40" @click.self="closeLoginModal()">
-      <div class="bg-white border border-black/10 shadow-lg w-full max-w-md p-8">
-        <div class="flex items-center justify-between mb-6">
-          <h3 class="font-serif text-2xl uppercase">{loginModalTitle}</h3>
-          <button type="button" @click="closeLoginModal()" class="text-xs uppercase tracking-widest hover:opacity-60">{loginModalClose}</button>
-        </div>
-        <p class="text-xs text-zinc-500 uppercase tracking-wide mb-6">{loginModalPrompt}</p>
-        <form @submit.prevent="modalLogin()" class="space-y-5">
-          <div>
-            <label class="block text-[11px] font-mono uppercase tracking-widest text-zinc-500 mb-2">{loginModalAccountLabel}</label>
-            <input type="text" x-model="loginModalAccount" required class="w-full bg-transparent border-0 border-b border-black/30 rounded-none px-0 py-2 text-sm outline-none focus:border-black focus:ring-0" />
-          </div>
-          <div>
-            <label class="block text-[11px] font-mono uppercase tracking-widest text-zinc-500 mb-2">{loginModalPasswordLabel}</label>
-            <input type="password" x-model="loginModalPassword" required class="w-full bg-transparent border-0 border-b border-black/30 rounded-none px-0 py-2 text-sm outline-none focus:border-black focus:ring-0" />
-          </div>
-          <p x-show="loginModalError" x-text="loginModalError" class="text-xs text-red-600 uppercase tracking-wide"></p>
-          <button type="submit" :disabled="loginModalLoading" class="w-full border border-black py-3 text-[12px] font-bold uppercase tracking-[0.2em] hover:bg-black hover:text-white transition-colors disabled:opacity-40">
-            <span x-show="!loginModalLoading">{loginModalSubmitLabel}</span>
-            <span x-show="loginModalLoading" x-cloak>…</span>
-          </button>
-        </form>
-      </div>
-    </div>
-
 </div>
 
 <script id="snaps-year-opts" type="application/json" set:html={JSON.stringify({ yearOptions, sortOptions, cityOptions })}></script>
@@ -258,7 +223,7 @@ const cityOptions: { value: string; label: string }[] = [
 
 
 <script>
-  import { getStreetSnaps, toAbs, getUser, login, type StreetSnapItem } from "@/lib/api"
+  import { getStreetSnaps, toAbs, getUser, type StreetSnapItem } from "@/lib/api"
   import { clientHref, ROUTES } from "@/lib/routes"
   import { SPIN_SVG, makeCardSlots, buildPageList } from "@/lib/looks-grid"
   import { toggleFavorite, checkFavorited, getFavorites } from "@/lib/favorites"
@@ -287,21 +252,12 @@ const cityOptions: { value: string; label: string }[] = [
         loading: false,
         page: 1,
         lastPage: 1,
-        isAuthed: false,
         reqToken: 0,
 
-        // 登录门禁弹窗状态（硬门禁：未登录点筛选/翻页时弹出内联登录表单）
-        showLoginModal: false,
-        loginModalAccount: "",
-        loginModalPassword: "",
-        loginModalError: "",
-        loginModalLoading: false,
-
         // 收藏态：响应式 id 映射（卡片爱心从此读取；按当前页服务端校验，与收藏总量解耦）
         favMap: {} as Record<string, boolean>,
 
         init() {
-          this.isAuthed = !!getUser()
           this.locale = this.$el.dataset.locale || 'en'
           // 支持从 header 下拉深链 ?city=xxx 直接进入对应地区（与侧栏 City 筛选一致）
           const city = new URLSearchParams(window.location.search).get('city')
@@ -324,34 +280,6 @@ const cityOptions: { value: string; label: string }[] = [
           this.loadPage(1)
         },
 
-        // ===== 登录门禁 =====
-        // 未登录返回 false 并弹出登录框；已登录返回 true。
-        requireLogin(): boolean {
-          if (getUser()) return true
-          this.showLoginModal = true
-          return false
-        },
-        async modalLogin() {
-          this.loginModalError = ""
-          this.loginModalLoading = true
-          try {
-            await login({ account: this.loginModalAccount, password: this.loginModalPassword })
-            this.showLoginModal = false
-            this.loginModalAccount = ""
-            this.loginModalPassword = ""
-            // 登录成功后按当前筛选刷新，用户无需再次点击
-            this.loadPage(1)
-          } catch {
-            this.loginModalError = this.$el.dataset.loginFail || "login failed"
-          } finally {
-            this.loginModalLoading = false
-          }
-        },
-        closeLoginModal() {
-          this.showLoginModal = false
-          this.loginModalError = ""
-        },
-
         // 已激活筛选 chips（顶部 pills + 侧栏 Clear all 的可见性都依赖它）
         get pills() {
           const out: { label: string; clear: () => void }[] = []
@@ -417,7 +345,6 @@ const cityOptions: { value: string; label: string }[] = [
         },
 
         goPage(p: number) {
-          if (!this.requireLogin()) return
           if (this.loading) return
           if (p < 1 || p > this.lastPage || p === this.page) return
           this.loadPage(p)
@@ -466,7 +393,6 @@ const cityOptions: { value: string; label: string }[] = [
         },
         favState(id: string) { return !!this.favMap[String(id)] },
         toggleFav(it: any) {
-          if (!getUser()) { this.showLoginModal = true; return false }
           const id = String(it.id)
           const now = !this.favState(id)
           toggleFavorite({ id, type: 'street', title: it.title || '', cover: it.cover || '', brand: (it as any).brand || '' })