src/components/HitokotoCard.astro

@@ -0,0 +1,343 @@
+<aside class="hitokoto-card" 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>
+      <i class="fa-solid fa-quote-left" aria-hidden="true"></i>
+      <span>一言</span>
+    </button>
+    <div class="hitokoto-card__actions">
+      <button class="hitokoto-card__refresh" type="button" aria-label="换一句" title="换一句" data-hitokoto-refresh>
+        <i class="fa-solid fa-rotate" aria-hidden="true"></i>
+      </button>
+      <button class="hitokoto-card__collapse" type="button" aria-label="收起一言" title="收起" data-hitokoto-collapse>
+        <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+  <a class="hitokoto-card__text" href="https://hitokoto.cn/" target="_blank" rel="noreferrer" data-hitokoto-text>
+    获取中...
+  </a>
+  <p class="hitokoto-card__from" data-hitokoto-from>来自 Hitokoto</p>
+</aside>
+
+<script>
+  (() => {
+    const card = document.querySelector('[data-hitokoto-card]');
+    const toggle = card?.querySelector('[data-hitokoto-toggle]');
+    const text = card?.querySelector('[data-hitokoto-text]');
+    const from = card?.querySelector('[data-hitokoto-from]');
+    const refresh = card?.querySelector('[data-hitokoto-refresh]');
+    const collapse = card?.querySelector('[data-hitokoto-collapse]');
+    if (
+      !(card instanceof HTMLElement) ||
+      !(toggle instanceof HTMLButtonElement) ||
+      !(text instanceof HTMLAnchorElement) ||
+      !(from instanceof HTMLElement)
+    ) {
+      return;
+    }
+
+    const endpoint = 'https://yiyan.biss.click/api?encode=json';
+    const cacheKey = 'hitokoto-card-cache';
+    const cacheMaxAge = 6 * 60 * 60 * 1000;
+    const fallback = {
+      sentence: '生活明朗，万物可爱。',
+      source: '本地缓存',
+      url: 'https://hitokoto.cn/',
+    };
+
+    const isHomePage = ['/', '/index.html'].includes(window.location.pathname);
+
+    function setExpanded(expanded) {
+      card.classList.toggle('is-collapsed', !expanded);
+      toggle.setAttribute('aria-expanded', String(expanded));
+      toggle.setAttribute('aria-label', expanded ? '收起一言' : '展开一言');
+    }
+
+    function readCache() {
+      try {
+        const cached = localStorage.getItem(cacheKey);
+        if (!cached) return null;
+        const parsed = JSON.parse(cached);
+        if (!parsed || typeof parsed.expiresAt !== 'number' || parsed.expiresAt <= Date.now()) return null;
+        return parsed.data;
+      } catch {
+        return null;
+      }
+    }
+
+    function writeCache(data) {
+      try {
+        localStorage.setItem(
+          cacheKey,
+          JSON.stringify({
+            data,
+            expiresAt: Date.now() + cacheMaxAge,
+          }),
+        );
+      } catch {
+        // localStorage can be unavailable in strict privacy modes.
+      }
+    }
+
+    function renderHitokoto(data) {
+      text.textContent = data.sentence;
+      text.href = data.url || 'https://hitokoto.cn/';
+      from.textContent = data.source ? `出自 ${data.source}` : '来自 Hitokoto';
+    }
+
+    async function fetchHitokoto({ force = false } = {}) {
+      if (!force) {
+        const cached = readCache();
+        if (cached) {
+          renderHitokoto(cached);
+          return;
+        }
+      }
+
+      card.classList.add('is-loading');
+      text.textContent = '获取中...';
+
+      try {
+        const response = await fetch(endpoint);
+        if (!response.ok) throw new Error(`Hitokoto request failed: ${response.status}`);
+        const data = await response.json();
+        const rawSentence = data.hitokoto || data.content || data.sentence || data.text;
+        const sentence = typeof rawSentence === 'string' && rawSentence.trim() ? rawSentence.trim() : fallback.sentence;
+        const source = typeof data.from === 'string' && data.from.trim() ? data.from.trim() : 'Hitokoto';
+        const url = data.uuid ? `https://hitokoto.cn/?uuid=${encodeURIComponent(data.uuid)}` : 'https://hitokoto.cn/';
+        const nextData = { sentence, source, url };
+
+        writeCache(nextData);
+        renderHitokoto(nextData);
+      } catch (error) {
+        console.error(error);
+        renderHitokoto(readCache() || fallback);
+      } finally {
+        card.classList.remove('is-loading');
+      }
+    }
+
+    setExpanded(isHomePage);
+
+    toggle.addEventListener('click', () => {
+      setExpanded(card.classList.contains('is-collapsed'));
+    });
+
+    refresh?.addEventListener('click', (event) => {
+      event.stopPropagation();
+      setExpanded(true);
+      fetchHitokoto({ force: true });
+    });
+
+    collapse?.addEventListener('click', (event) => {
+      event.stopPropagation();
+      setExpanded(false);
+    });
+
+    card.addEventListener('click', (event) => {
+      if (!card.classList.contains('is-collapsed')) return;
+      if (event.target instanceof Element && event.target.closest('a, button')) return;
+      setExpanded(true);
+    });
+
+    fetchHitokoto();
+  })();
+</script>
+
+<style>
+  .hitokoto-card {
+    position: fixed;
+    left: max(18px, env(safe-area-inset-left));
+    bottom: max(18px, env(safe-area-inset-bottom));
+    z-index: 30;
+    width: min(340px, calc(100vw - 36px));
+    min-height: 48px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.58);
+    border-radius: 8px;
+    padding: 14px 15px 13px;
+    color: #40505a;
+    background:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(236, 253, 245, 0.58)),
+      rgba(255, 253, 248, 0.76);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.8),
+      0 18px 44px rgba(44, 55, 63, 0.16);
+    backdrop-filter: blur(18px) saturate(165%);
+    -webkit-backdrop-filter: blur(18px) saturate(165%);
+    transition:
+      width 0.2s ease,
+      padding 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  .hitokoto-card.is-collapsed {
+    width: 48px;
+    padding: 8px;
+    cursor: pointer;
+  }
+
+  .hitokoto-card__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 9px;
+    color: var(--accent);
+    font-size: 0.84rem;
+    font-weight: 800;
+  }
+
+  .hitokoto-card.is-collapsed .hitokoto-card__head {
+    justify-content: center;
+    margin-bottom: 0;
+  }
+
+  .hitokoto-card__toggle,
+  .hitokoto-card__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+  }
+
+  .hitokoto-card__toggle,
+  .hitokoto-card__refresh,
+  .hitokoto-card__collapse {
+    appearance: none;
+    -webkit-appearance: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .hitokoto-card__toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    min-width: 0;
+    border-radius: 999px;
+    padding: 0;
+  }
+
+  .hitokoto-card__toggle:hover {
+    color: var(--accent-strong);
+  }
+
+  .hitokoto-card__refresh,
+  .hitokoto-card__collapse {
+    display: grid;
+    width: 30px;
+    min-width: 30px;
+    height: 30px;
+    place-items: center;
+    border: 1px solid rgba(15, 118, 110, 0.16);
+    border-radius: 999px;
+    background: rgba(236, 253, 245, 0.58);
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  .hitokoto-card__refresh:hover {
+    color: #fff;
+    background: #3eb8be;
+    transform: translateY(-1px);
+  }
+
+  .hitokoto-card__collapse:hover {
+    color: #fff;
+    background: #3eb8be;
+    transform: translateY(1px);
+  }
+
+  .hitokoto-card.is-collapsed .hitokoto-card__toggle {
+    width: 32px;
+    height: 32px;
+    justify-content: center;
+  }
+
+  .hitokoto-card.is-collapsed .hitokoto-card__toggle span,
+  .hitokoto-card.is-collapsed .hitokoto-card__actions,
+  .hitokoto-card.is-collapsed .hitokoto-card__text,
+  .hitokoto-card.is-collapsed .hitokoto-card__from {
+    display: none;
+  }
+
+  .hitokoto-card.is-loading .hitokoto-card__refresh i {
+    animation: hitokoto-spin 0.9s linear infinite;
+  }
+
+  .hitokoto-card__text {
+    display: block;
+    color: #2f4358;
+    font-size: 0.95rem;
+    font-weight: 700;
+    line-height: 1.65;
+    overflow-wrap: anywhere;
+  }
+
+  .hitokoto-card__text:hover {
+    color: var(--accent);
+  }
+
+  .hitokoto-card__from {
+    margin: 8px 0 0;
+    color: var(--muted);
+    font-size: 0.78rem;
+    line-height: 1.45;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :root[data-theme='dark'] .hitokoto-card {
+    border-color: rgba(174, 205, 197, 0.18);
+    color: #dce9e6;
+    background:
+      radial-gradient(circle at 14% 0%, rgba(114, 222, 210, 0.1), transparent 34%),
+      linear-gradient(145deg, rgba(28, 43, 47, 0.82), rgba(12, 22, 25, 0.72)),
+      rgba(17, 28, 31, 0.74);
+    box-shadow: var(--shadow);
+  }
+
+  :root[data-theme='dark'] .hitokoto-card__text {
+    color: #edf7f5;
+  }
+
+  :root[data-theme='dark'] .hitokoto-card__refresh,
+  :root[data-theme='dark'] .hitokoto-card__collapse {
+    border-color: rgba(114, 222, 210, 0.22);
+    background: rgba(114, 222, 210, 0.1);
+  }
+
+  @keyframes hitokoto-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (max-width: 720px) {
+    .hitokoto-card {
+      left: 12px;
+      bottom: 12px;
+      width: min(300px, calc(100vw - 24px));
+      padding: 12px;
+    }
+
+    .hitokoto-card.is-collapsed {
+      width: 46px;
+      padding: 7px;
+    }
+
+    .hitokoto-card__text {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      font-size: 0.9rem;
+    }
+  }
+</style>

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import '../styles/site.css';
 import CustomContextMenu from '@/components/CustomContextMenu.astro';
+import HitokotoCard from '@/components/HitokotoCard.astro';
 import { publicSiteConfig, siteConfig } from '../../site.config.mjs';
 
 interface Props {
@@ -119,6 +120,7 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
         </section>
       </div>
     </footer>
+    <HitokotoCard />
     <CustomContextMenu />
     <script is:inline src={siteConfig.cdn.instantsearchJs}></script>
     <script is:inline src={siteConfig.cdn.typesenseAdapterJs}></script>

src/pages/posts/[slug].astro

@@ -115,9 +115,9 @@ const relatedPosts = allPosts
           <div class="article-summary-footer">
             <span class="article-summary-brand">
               <span aria-hidden="true">✣</span>
-              清羽のAI摘要
+              AI摘要
             </span>
-            <span class="article-summary-model">KIMI-K2.5</span>
+            <span class="article-summary-model">QWEN</span>
           </div>
         </section>
       )}