refactor(site): remove scss pipeline and unify on unocss

Author: IchimaruGin728

workers/gins-rime/site/astro.config.mjs

@@ -14,7 +14,6 @@ export default defineConfig({
       social: [
         { icon: 'github', label: 'GitHub', href: 'https://github.com/IchimaruGin728/Gins-Rime' },
       ],
-      customCss: ['./src/styles/gins.scss', './src/styles/glass.scss'],
       sidebar: [
         {
           label: '快速开始',

workers/gins-rime/site/package.json

@@ -31,7 +31,6 @@
   },
   "devDependencies": {
     "@unocss/astro": "^66.6.8",
-    "sass": "^1.99.0",
     "typescript": "^5.9.3",
     "unocss": "^66.6.8"
   }

workers/gins-rime/site/pnpm-lock.yaml

@@ -34,26 +34,26 @@ export default function DictStatus() {
 
   if (!data) {
     return (
-      <div class="grid gap-4 my-6" style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))">
+      <div class="my-6 grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4">
         {Object.keys(DICT_LABELS).map(k => (
-          <div key={k} class="dict-card skeleton" />
+          <div key={k} class="surface-card h-[4.5rem] animate-pulse" />
         ))}
       </div>
     )
   }
 
   return (
-    <div class="grid gap-4 my-6" style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:stretch">
+    <div class="my-6 grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] items-stretch gap-4">
       {Object.entries(DICT_LABELS).map(([key, label]) => {
         const info = data[key as keyof VersionData]
         return (
-          <div key={key} class="dict-card flex flex-col gap-1 p-4 h-full min-h-[4.5rem] box-border">
-            <span class="font-semibold text-[0.9rem] text-[var(--sl-color-text)]">{label}</span>
-            <span class="text-[0.8rem] tabular-nums text-[var(--sl-color-text-accent)]">
+          <div key={key} class="surface-card box-border flex h-full min-h-[4.5rem] flex-col gap-1">
+            <span class="text-[0.9rem] font-semibold text-[var(--sl-color-white)]">{label}</span>
+            <span class="tabular-nums surface-meta">
               {info?.date ?? '—'}
             </span>
             {info?.lines != null && (
-              <span class="text-[0.75rem] text-[color-mix(in_srgb,var(--sl-color-text)_55%,transparent)]">
+              <span class="text-xs text-[var(--sl-color-gray-3)]">
                 {info.lines.toLocaleString()} 条
               </span>
             )}

workers/gins-rime/site/src/components/DictStatus.tsx

@@ -19,15 +19,15 @@ export default function DownloadBtn() {
 
   return (
     <div class="flex flex-col gap-3 my-6">
-      <a class="download-btn" href={href} download="gins-rime">
+      <a class="primary-btn" href={href} download="gins-rime">
         下载 gins-rime CLI
       </a>
       {meta?.date && (
-        <span class="text-[0.8rem] tabular-nums text-[color-mix(in_srgb,var(--sl-color-text)_55%,transparent)]">
+        <span class="surface-meta-muted tabular-nums">
           {meta.date}{meta.sha ? ` · ${meta.sha}` : ''}
         </span>
       )}
-      <pre class="text-[0.85rem] overflow-x-auto px-4 py-3 rounded-[var(--sl-border-radius-sm)] bg-white/5 border border-white/8 font-mono">
+      <pre class="overflow-x-auto rounded-xl border border-[var(--sl-color-hairline)] bg-black/20 px-4 py-3 font-mono text-[0.85rem] text-[var(--sl-color-gray-2)]">
         {'curl -fsSL ' + href + ' -o gins-rime && chmod +x gins-rime'}
       </pre>
     </div>

workers/gins-rime/site/src/components/DownloadBtn.tsx

@@ -8,7 +8,3 @@ import '@fontsource-variable/outfit'
   <meta name="theme-color" content="#581c87" />
   <meta property="og:image" content="/og.png" />
 </Default>
-
-<script>
-  import '../scripts/glass'
-</script>

workers/gins-rime/site/src/components/Head.astro

@@ -43,26 +43,32 @@ const upstream = [
 ]
 ---
 
-<div class="home-dashboard">
-
-  <p class="panel-label">上游版本</p>
-  <div class="panel-grid">
+<div class="my-8 space-y-8">
+  <section class="space-y-3">
+    <p class="section-label">
+      上游版本
+    </p>
+    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-5">
     {upstream.map(s => (
       <a
         href={s.href}
         target="_blank"
         rel="noopener noreferrer"
-        class="hp-card"
+        class="surface-card-hover"
         aria-label={`${s.name} — ${s.version}`}
       >
-        <span class="hp-name">{s.name}</span>
-        <span class="hp-sub">{s.label}</span>
-        <span class="hp-ver">{s.version}</span>
+        <span class="surface-title">{s.name}</span>
+        <span class="surface-sub">{s.label}</span>
+        <span class="mt-4 block surface-meta">{s.version}</span>
       </a>
     ))}
-  </div>
+    </div>
+  </section>
 
-  <p class="panel-label">词库 & 安装</p>
+  <section class="space-y-3">
+    <p class="section-label">
+      词库 & 安装
+    </p>
   <HomeStatusPanel
     dictVersions={{
       zhwiki:      read('zhwiki.month'),
@@ -71,41 +77,5 @@ const upstream = [
     }}
     client:load
   />
-
+  </section>
 </div>
-
-<style>
-  .home-dashboard {
-    margin: 2rem 0;
-  }
-
-  /* ── Section label ── */
-  .panel-label {
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.07em;
-    text-transform: uppercase;
-    color: color-mix(in srgb, var(--sl-color-text) 40%, transparent);
-    margin: 0 0 0.55rem;
-
-    &:not(:first-child) {
-      margin-top: 1.5rem;
-    }
-  }
-
-  /* ── Shared 5-col grid ── */
-  .panel-grid {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 0.6rem;
-  }
-
-  @media (max-width: 780px) {
-    .panel-grid { grid-template-columns: repeat(3, 1fr); }
-  }
-  @media (max-width: 480px) {
-    .panel-grid { grid-template-columns: repeat(2, 1fr); }
-  }
-
-  /* .hp-card 及排版类已移至 gins.scss 全局 */
-</style>

workers/gins-rime/site/src/components/HomeDashboard.astro

@@ -21,13 +21,6 @@ const DICTS: { key: string; name: string; sub: string }[] = [
 const CLI_HREF = '/releases/latest/gins-rime'
 const INSTALL_CMD = `curl -fsSL ${CLI_HREF} -o gins-rime && chmod +x gins-rime`
 
-const CARD_BASE = [
-  'border-radius:var(--sl-border-radius-sm,8px)',
-  'border:1px solid var(--sl-color-hairline)',
-  'background:color-mix(in srgb,var(--sl-color-accent) 4%,transparent)',
-  'contain:layout style',
-].join(';')
-
 export default function HomeStatusPanel({ dictVersions }: Props) {
   const [status, setStatus] = useState<ApiStatus | null>(null)
 
@@ -41,24 +34,25 @@ export default function HomeStatusPanel({ dictVersions }: Props) {
   const loading = status === null
 
   return (
-    <div class="flex flex-col gap-[0.6rem]">
-
-      {/* ── Dict cards — Grid for perfectly equal height ── */}
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-[0.6rem]">
+    <div class="space-y-4">
+      <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
         {DICTS.map(({ key, name, sub }) => {
           const info = status?.[key as keyof ApiStatus] as DictInfo | undefined
           const ver = dictVersions[key] !== '—' ? dictVersions[key] : (info?.date ?? '—')
           const hasLines = !loading && info?.lines != null
           return (
-            <div key={key} class="flex flex-col p-[0.85rem_1rem] min-h-[5.5rem] rounded-[var(--sl-border-radius-sm,8px)] border border-[var(--sl-color-hairline)] bg-[color-mix(in_srgb,var(--sl-color-accent)_4%,transparent)]">
-              <span class="font-semibold text-[0.875rem] text-[var(--sl-color-text)] truncate">{name}</span>
-              <span class="text-[0.68rem] text-[color-mix(in_srgb,var(--sl-color-text)_42%,transparent)] truncate leading-relaxed">{sub}</span>
+            <div
+              key={key}
+              class="surface-card"
+            >
+              <span class="surface-title">{name}</span>
+              <span class="surface-sub">{sub}</span>
 
-              <div class="mt-auto flex flex-col gap-[0.15rem]">
-                <span class="pt-[0.45rem] text-[0.78rem] font-mono tabular-nums text-[var(--sl-color-text-accent)] truncate">
+              <div class="mt-4 flex flex-col gap-1">
+                <span class="surface-meta">
                   {loading ? '…' : ver}
                 </span>
-                <span class={`text-[0.62rem] tabular-nums text-[color-mix(in_srgb,var(--sl-color-text)_34%,transparent)]${hasLines ? '' : ' invisible'}`}>
+                <span class={`surface-meta-muted${hasLines ? '' : ' invisible'}`}>
                   {info?.lines != null ? `${info.lines.toLocaleString()} entries` : '0 entries'}
                 </span>
               </div>
@@ -67,45 +61,27 @@ export default function HomeStatusPanel({ dictVersions }: Props) {
         })}
       </div>
 
-      {/* ── CLI — full-width bar, horizontal layout ── */}
-      <div style={`display:grid;grid-template-columns:1fr auto;align-items:center;gap:0.75rem 1.25rem;padding:0.85rem 1rem;${CARD_BASE}`}>
-        {/* Left: name + version */}
-        <div style="display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap;min-width:0">
-          <span style="font-weight:600;font-size:0.875rem;color:var(--sl-color-text);white-space:nowrap">Gin's-Rime CLI</span>
-          {status?.cli?.date && (
-            <span style="font-size:0.7rem;font-family:var(--sl-font-mono);color:color-mix(in srgb,var(--sl-color-text) 42%,transparent);font-variant-numeric:tabular-nums;white-space:nowrap">
-              {status.cli.date}{status.cli.sha ? ` · ${status.cli.sha}` : ''}
-            </span>
-          )}
+      <div class="surface-card md:p-5">
+        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div class="min-w-0">
+            <span class="block text-lg font-semibold text-[var(--sl-color-white)]">Gin's-Rime CLI</span>
+            {status?.cli?.date && (
+              <span class="mt-1 block surface-meta-muted">
+                {status.cli.date}{status.cli.sha ? ` · ${status.cli.sha}` : ''}
+              </span>
+            )}
+          </div>
+          <a
+            class="primary-btn"
+            href={CLI_HREF}
+            download="gins-rime"
+          >
+            下载
+          </a>
         </div>
 
-        {/* Right: download button */}
-        <a
-          class="download-btn"
-          href={CLI_HREF}
-          download="gins-rime"
-          style="font-size:0.78rem;padding:0.35rem 0.9rem;white-space:nowrap"
-        >
-          下载
-        </a>
-
-        {/* Bottom: install command, spans both columns */}
-        <pre style={[
-          'grid-column:1/-1',
-          'margin:0',
-          'font-size:0.7rem',
-          'font-family:var(--sl-font-mono)',
-          'overflow-x:auto',
-          'padding:0.45rem 0.7rem',
-          'border-radius:var(--sl-border-radius-sm,8px)',
-          'background:var(--sl-color-bg-sidebar)',
-          'border:1px solid var(--sl-color-hairline)',
-          'white-space:pre',
-          'line-height:1.5',
-          'color:color-mix(in srgb,var(--sl-color-text) 65%,transparent)',
-        ].join(';')}>{INSTALL_CMD}</pre>
+        <pre class="mt-4 overflow-x-auto rounded-xl border border-[var(--sl-color-hairline)] bg-black/20 px-4 py-3 text-xs text-[var(--sl-color-gray-2)]">{INSTALL_CMD}</pre>
       </div>
-
     </div>
   )
 }

workers/gins-rime/site/src/components/HomeStatusPanel.tsx

@@ -6,66 +6,16 @@ import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro'
 ---
 
 <div class="header sl-flex">
-  <div class="title-wrapper sl-flex">
+  <div class="sl-flex min-w-0 items-center px-1 py-1">
     <SiteTitle {...Astro.props} />
   </div>
-  <div class="sl-flex print:hidden">
+  <div class="sl-flex min-w-0 flex-1 items-center justify-start print:hidden">
     <Search {...Astro.props} />
   </div>
-  <div class="sl-hidden md:sl-flex print:hidden right-group">
-    <div class="sl-flex social-icons">
+  <div class="sl-hidden print:hidden md:sl-flex items-center gap-4">
+    <div class="sl-flex items-center gap-4 after:h-8 after:border-r after:border-[var(--sl-color-hairline)] after:content-['']">
       <SocialIcons {...Astro.props} />
     </div>
     <ThemeSelect {...Astro.props} />
   </div>
 </div>
-
-<style>
-  .header {
-    gap: var(--sl-nav-gap);
-    justify-content: space-between;
-    align-items: center;
-    height: 100%;
-  }
-  .title-wrapper {
-    overflow: clip;
-    padding: 0.25rem;
-    margin: -0.25rem;
-    min-width: 0;
-  }
-  .right-group,
-  .social-icons {
-    gap: 1rem;
-    align-items: center;
-  }
-  .social-icons::after {
-    content: '';
-    height: 2rem;
-    border-inline-end: 1px solid var(--sl-color-gray-5);
-  }
-  @media (min-width: 50rem) {
-    :global(:root[data-has-sidebar]) {
-      --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
-    }
-    :global(:root:not([data-has-toc])) {
-      --__toc-width: 0rem;
-    }
-    .header {
-      --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
-      --__main-column-fr: calc(
-        (100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
-          (2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
-          var(--sl-content-width)) / 2
-      );
-      display: grid;
-      grid-template-columns:
-        minmax(
-          calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
-          auto
-        )
-        1fr
-        auto;
-      align-content: center;
-    }
-  }
-</style>