优化

src/components/HitokotoCard.astro

@@ -1,6 +1,6 @@
-<aside class="hitokoto-card" aria-label="一言" data-hitokoto-card>
+<aside class="hitokoto-card is-collapsed" aria-label="一言" data-hitokoto-card>
   <div class="hitokoto-card__head">
-    <button class="hitokoto-card__toggle" type="button" aria-label="展开一言" aria-expanded="true" title="一言" data-hitokoto-toggle>
+    <button class="hitokoto-card__toggle" type="button" aria-label="展开一言" aria-expanded="false" title="一言" data-hitokoto-toggle>
       <i class="fa-solid fa-quote-left" aria-hidden="true"></i>
       <span>一言</span>
     </button>
@@ -38,6 +38,7 @@
 
     const endpoint = 'https://yiyan.biss.click/api?encode=json';
     const cacheKey = 'hitokoto-card-cache';
+    const preferenceKey = 'hitokoto-card-expanded';
     const cacheMaxAge = 6 * 60 * 60 * 1000;
     const fallback = {
       sentence: '生活明朗，万物可爱。',
@@ -46,11 +47,32 @@
     };
 
     const isHomePage = ['/', '/index.html'].includes(window.location.pathname);
+    const mobileMedia = window.matchMedia('(max-width: 720px)');
 
-    function setExpanded(expanded) {
+    function readExpandedPreference() {
+      try {
+        const preference = localStorage.getItem(preferenceKey);
+        if (preference === 'true') return true;
+        if (preference === 'false') return false;
+      } catch {
+        // localStorage can be unavailable in strict privacy modes.
+      }
+      return null;
+    }
+
+    function writeExpandedPreference(expanded) {
+      try {
+        localStorage.setItem(preferenceKey, String(expanded));
+      } catch {
+        // localStorage can be unavailable in strict privacy modes.
+      }
+    }
+
+    function setExpanded(expanded, { persist = false } = {}) {
       card.classList.toggle('is-collapsed', !expanded);
       toggle.setAttribute('aria-expanded', String(expanded));
       toggle.setAttribute('aria-label', expanded ? '收起一言' : '展开一言');
+      if (persist) writeExpandedPreference(expanded);
     }
 
     function readCache() {
@@ -117,27 +139,28 @@
       }
     }
 
-    setExpanded(isHomePage);
+    const expandedPreference = readExpandedPreference();
+    setExpanded(expandedPreference ?? (isHomePage && !mobileMedia.matches));
 
     toggle.addEventListener('click', () => {
-      setExpanded(card.classList.contains('is-collapsed'));
+      setExpanded(card.classList.contains('is-collapsed'), { persist: true });
     });
 
     refresh?.addEventListener('click', (event) => {
       event.stopPropagation();
-      setExpanded(true);
+      setExpanded(true, { persist: true });
       fetchHitokoto({ force: true });
     });
 
     collapse?.addEventListener('click', (event) => {
       event.stopPropagation();
-      setExpanded(false);
+      setExpanded(false, { persist: true });
     });
 
     card.addEventListener('click', (event) => {
       if (!card.classList.contains('is-collapsed')) return;
       if (event.target instanceof Element && event.target.closest('a, button')) return;
-      setExpanded(true);
+      setExpanded(true, { persist: true });
     });
 
     fetchHitokoto();

src/styles/site/13-responsive.css

@@ -151,19 +151,23 @@
       0 22px 64px rgba(44, 55, 63, 0.24);
     backdrop-filter: blur(22px) saturate(170%);
     -webkit-backdrop-filter: blur(22px) saturate(170%);
+    visibility: hidden;
     opacity: 0;
     pointer-events: none;
-    transform: translateX(calc(100% + 24px)) scale(0.98);
+    transform: translateY(-8px) scale(0.98);
     transform-origin: top right;
     transition:
+      visibility 0s linear 0.24s,
       opacity 0.18s ease,
       transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
   .nav.is-open .nav-menu {
+    visibility: visible;
     opacity: 1;
     pointer-events: auto;
-    transform: translateX(0) scale(1);
+    transform: translateY(0) scale(1);
+    transition-delay: 0s;
   }
 
   .nav-links {