update

2026-08-31 19:59:36 +08:00
parent 0d13748d7e
commit 97b023bbbd
13 changed files with 654 additions and 51 deletions
--- a/src/components/RunwayLooks.astro
+++ b/src/components/RunwayLooks.astro
@ -8,6 +8,15 @@ import "@/styles/look-grid.css"

 const { locale, t, getRelativeLocaleUrl } = 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')
+
 // 热门品牌：走 SSG 专属接口 /api/v1/ssg/brands/hot，后端固定返回热度前 30 个、按热度顺序排列。
 // 侧栏 filter 展示前 10 个（模板内 slice(0,10)），品牌弹窗 HOT 标签展示全部 30 个。
 // 接口不可用时回落假数据先看效果。
@ -64,7 +73,7 @@ const seasonOptions: { value: string; label: string }[] = [

 ---

-<div class="showsroot w-full" x-data="showsPage()" data-locale={locale}>
+<div class="showsroot w-full" x-data="showsPage()" data-locale={locale} data-login-fail={loginModalFail}>
    <!-- 顶部：极简眉头 -->
    <header class="showshead">
        <div>
@ -252,7 +261,31 @@ const seasonOptions: { value: string; label: string }[] = [
    <!-- 品牌筛选弹窗：抽成独立组件 BrandModal.astro（状态由本页 showsPage 提供） -->
    <BrandModal />

-
+    <!-- 登录门禁弹窗：未登录点筛选/翻页时弹出内联登录表单 -->
+    <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>

@ -262,7 +295,7 @@ const seasonOptions: { value: string; label: string }[] = [


 <script>
-  import { getArticles, getBrands, toAbs, type ArticleItem, type BrandEntry } from "@/lib/api"
+  import { getArticles, getBrands, toAbs, getUser, login, type ArticleItem, type BrandEntry } from "@/lib/api"
  import { clientHref, ROUTES } from "@/lib/routes"
  import { SPIN_SVG, makeCardSlots, buildPageList } from "@/lib/looks-grid"

@ -301,6 +334,13 @@ const seasonOptions: { value: string; label: string }[] = [
        lastPage: 1,
        reqToken: 0,

+        // 登录门禁弹窗状态（硬门禁：未登录点筛选/翻页时弹出内联登录表单）
+        showLoginModal: false,
+        loginModalAccount: "",
+        loginModalPassword: "",
+        loginModalError: "",
+        loginModalLoading: false,
+
        init() {
          this.locale = this.$el.dataset.locale || 'en';
          // 支持从 header 下拉深链 ?collection=xxx 直接进入对应分类（与侧栏 COLLECTION 筛选一致）
@ -353,6 +393,7 @@ const seasonOptions: { value: string; label: string }[] = [
        },

        refreshFilter() {
+          if (!this.requireLogin()) return
          this.loadPage(1)
        },

@ -441,6 +482,34 @@ const seasonOptions: { value: string; label: string }[] = [
          this.refreshFilter()
        },

+        // ===== 登录门禁 =====
+        // 未登录返回 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 = ""
+        },
+
        // API 加载（分页：每次整页替换，不追加）
        async loadPage(page: number) {
          const myToken = ++this.reqToken
@ -478,6 +547,7 @@ const seasonOptions: { 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)
--- a/src/components/StreetSnaps.astro
+++ b/src/components/StreetSnaps.astro
@ -7,6 +7,15 @@ 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
@ -47,7 +56,7 @@ const cityOptions: { value: string; label: string }[] = [
 ]
 ---

-<div class="snapsroot w-full" x-data="streetSnapsPage()" data-locale={locale}>
+<div class="snapsroot w-full" x-data="streetSnapsPage()" data-locale={locale} data-login-fail={loginModalFail}>
    <!-- 顶部：极简眉头 -->
    <header class="snapshead">
        <div>
@ -88,7 +97,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) + '"; loadPage(1)'} /> <span>{o.label}</span></label></li>
+                    <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>
                  ))}
                  </ul>
              </div>
@ -105,7 +114,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 + '"; loadPage(1)'} /> <span>{o.label}</span></label></li>
+                    <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>
                  ))}
                  </ul>
              </div>
@ -122,13 +131,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 + '"; loadPage(1)'} /> <span>{o.label}</span></label></li>
+                    <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>
                  ))}
                  </ul>
              </div>
              </section>

-              <button class="snapsclear" type="button" @click="clearAll()" x-show="pills.length > 0" x-cloak>Clear all ×</button>
+              <button class="snapsclear" type="button" @click="requireLogin() && clearAll()" x-show="pills.length > 0" x-cloak>Clear all ×</button>
          </div>
        </aside>

@ -210,6 +219,33 @@ const cityOptions: { value: string; label: string }[] = [
        </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>
@ -217,7 +253,7 @@ const cityOptions: { value: string; label: string }[] = [


 <script>
-  import { getStreetSnaps, toAbs, type StreetSnapItem } from "@/lib/api"
+  import { getStreetSnaps, toAbs, getUser, login, type StreetSnapItem } from "@/lib/api"
  import { clientHref, ROUTES } from "@/lib/routes"
  import { SPIN_SVG, makeCardSlots, buildPageList } from "@/lib/looks-grid"

@ -247,6 +283,13 @@ const cityOptions: { value: string; label: string }[] = [
        lastPage: 1,
        reqToken: 0,

+        // 登录门禁弹窗状态（硬门禁：未登录点筛选/翻页时弹出内联登录表单）
+        showLoginModal: false,
+        loginModalAccount: "",
+        loginModalPassword: "",
+        loginModalError: "",
+        loginModalLoading: false,
+
        init() {
          this.locale = this.$el.dataset.locale || 'en'
          // 支持从 header 下拉深链 ?city=xxx 直接进入对应地区（与侧栏 City 筛选一致）
@ -267,6 +310,34 @@ 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 }[] = []
@ -331,6 +402,7 @@ 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)