@astgov/theme 1.0.0

package/README.md

@@ -0,0 +1,30 @@
+# @astgov/theme
+
+老派机构风 Astro 主题包。看起来像 2005 的政府网站，写起来像 2026 的 Astro 项目。
+
+## 快速开始
+
+```bash
+# 1. 复制示例网站
+cp -r node_modules/@astgov/theme/example-site/* .
+
+# 2. 安装依赖
+npm install
+
+# 3. 启动
+npm run dev
+
+# 4. 构建
+npm run build
+```
+
+## 文档
+
+- [快速开始](./docs/getting-started.md)
+- [配置详解](./docs/configuration.md)
+- [页面 API](./docs/pages-api.md)
+- [部署指南](./docs/deployment.md)
+
+## License
+
+MIT

package/lib/index.ts

@@ -0,0 +1,11 @@
+export { default as BaseLayout } from '../src/layouts/BaseLayout.astro';
+export { default as BlogLayout } from '../src/layouts/BlogLayout.astro';
+export { default as Header } from '../src/components/Header.astro';
+export { default as Nav } from '../src/components/Nav.astro';
+export { default as Footer } from '../src/components/Footer.astro';
+export { default as Banner } from '../src/components/Banner.astro';
+export { default as CategorySection } from '../src/components/CategorySection.astro';
+export { default as QuickLinks } from '../src/components/QuickLinks.astro';
+export { default as FriendLinks } from '../src/components/FriendLinks.astro';
+export { default as Headline } from '../src/components/Headline.astro';
+export { default as Countdown } from '../src/components/Countdown.astro';

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@astgov/theme",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "2005-style university website theme for Astro — 看起来像 2005，写起来像 2026",
+  "exports": {
+    ".": "./lib/index.ts",
+    "./layouts/*": "./src/layouts/*.astro",
+    "./components/*": "./src/components/*.astro",
+    "./styles/*": "./src/styles/*.css"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "astro": "^4.0.0"
+  },
+  "keywords": ["astro", "theme", "university", "government", "retro", "china"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/astgov-theme"
+  }
+}

package/src/components/Banner.astro

@@ -0,0 +1,41 @@
+---
+interface Props { images: { src: string; alt: string; link?: string }[] }
+const { images = [] } = Astro.props;
+---
+
+{images.length > 0 && (
+  <div class="banner" id="banner">
+    <div class="banner-slides" id="bannerSlides">
+      {images.map((img, i) => (
+        <div class="banner-slide" data-index={i}>
+          {img.link ? <a href={img.link}><img src={img.src} alt={img.alt} /></a> : <img src={img.src} alt={img.alt} />}
+        </div>
+      ))}
+    </div>
+    {images.length > 1 && (<>
+      <button class="banner-btn banner-prev" id="bannerPrev" aria-label="上一张">‹</button>
+      <button class="banner-btn banner-next" id="bannerNext" aria-label="下一张">›</button>
+      <div class="banner-dots" id="bannerDots">{images.map((_, i) => (<span class="banner-dot" data-index={i}></span>))}</div>
+    </>)}
+  </div>
+)}
+
+<script>
+(function(){var b=document.getElementById('banner');if(!b)return;var s=document.getElementById('bannerSlides'),sl=s?.querySelectorAll('.banner-slide'),dt=document.querySelectorAll('.banner-dot'),p=document.getElementById('bannerPrev'),n=document.getElementById('bannerNext');if(!sl||sl.length<2)return;var c=0,iv;function go(i){sl.forEach(function(e,j){e.style.display=j===i?'block':'none'});dt.forEach(function(e,j){e.className=j===i?'banner-dot active':'banner-dot'});c=i}function nx(){go((c+1)%sl.length)}function pr(){go((c-1+sl.length)%sl.length)}function st(){cl();iv=window.setInterval(nx,4000)}function cl(){if(iv){clearInterval(iv);iv=0}}go(0);st();p?.addEventListener('click',function(e){e.preventDefault();pr();st()});n?.addEventListener('click',function(e){e.preventDefault();nx();st()});dt.forEach(function(e){e.addEventListener('click',function(){go(parseInt(this.getAttribute('data-index')||'0',10));st()})});b.addEventListener('mouseenter',cl);b.addEventListener('mouseleave',st)})();
+</script>
+
+<style>
+  .banner { position: relative; width: 100%; overflow: hidden; background: var(--color-primary, #003366); }
+  .banner-slides { position: relative; }
+  .banner-slide { display: none; }
+  .banner-slide:first-child { display: block; }
+  .banner-slide img { display: block; width: 100%; height: 360px; object-fit: cover; }
+  .banner-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0,0,0,.35); color: #FFF; border: none; font-size: 36px; line-height: 1; padding: 8px 14px; cursor: pointer; font-family: Arial,sans-serif; transition: background .2s; border-radius: 0; }
+  .banner-btn:hover { background: rgba(0,0,0,.6); }
+  .banner-prev { left: 10px; }
+  .banner-next { right: 10px; }
+  .banner-dots { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; z-index: 10; }
+  .banner-dot { display: inline-block; width: 12px; height: 12px; margin: 0 5px; background: rgba(255,255,255,.5); border: 2px solid #FFF; cursor: pointer; transition: background .2s; }
+  .banner-dot.active { background: #FFF; }
+  @media (max-width: 767px) { .banner-slide img { height: 200px; } .banner-btn { font-size: 24px; padding: 4px 10px; } .banner-dot { width: 10px; height: 10px; } }
+</style>

package/src/components/CategorySection.astro

@@ -0,0 +1,53 @@
+---
+interface Post {
+  slug: string;
+  data: { title: string; date: string; tags?: string[] };
+}
+
+interface Props {
+  title?: string;
+  posts?: Post[];
+  viewAllLink?: string;
+}
+
+const { title, posts = [], viewAllLink } = Astro.props;
+---
+
+<div class="module">
+  <div class="list-header">
+    <h3 class="module-title">{title}</h3>
+    {viewAllLink && <a href={viewAllLink} class="more-link">更多 →</a>}
+  </div>
+  <div class="list-body">
+    {posts.map(post => {
+      const d = post.data.date;
+      return (
+        <div class="list-item">
+          <a href={`/${post.slug}`} class="list-link">
+            <span class="list-date-block">
+              <span class="list-day">{d.slice(8, 10)}</span>
+              <span class="list-month">{d.slice(5, 7)}月</span>
+            </span>
+            <span class="list-text">{post.data.title}</span>
+          </a>
+        </div>
+      );
+    })}
+  </div>
+</div>
+
+<style>
+  .list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid var(--color-primary, #003366); }
+  .module-title { font-size: 15px; font-weight: bold; color: var(--color-primary, #003366); margin: 0; }
+  .more-link { font-size: 12px; color: var(--color-link, #00F); text-decoration: none; }
+  .list-body { list-style: none; padding: 0; margin: 0; }
+  .list-item { border-bottom: 1px dashed var(--color-divider, #EEE); }
+  .list-item:last-child { border-bottom: none; }
+  .list-link { display: flex; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none; color: var(--color-text, #333); }
+  .list-link:hover { text-decoration: none; }
+  .list-date-block { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; line-height: 1.2; }
+  .list-day { font-size: 17px; font-weight: bold; font-family: Arial,sans-serif; color: var(--color-secondary, #C00); }
+  .list-month { font-size: 10px; font-family: Arial,sans-serif; color: #888; }
+  .list-text { font-size: 13px; font-family: "宋体","SimSun",serif; color: var(--color-link, #00F); line-height: 1.4; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .list-link:hover .list-text { color: var(--color-secondary, #C00); text-decoration: underline; }
+</style>

package/src/components/Countdown.astro

@@ -0,0 +1,31 @@
+---
+interface Props { title?: string; targetDate?: string; buttonLink?: string; buttonText?: string; }
+const { title = '距报名截止还有', targetDate = '', buttonLink = '/signup', buttonText = '立即报名 →' } = Astro.props;
+---
+
+{targetDate && (
+  <div class="countdown-module">
+    <div class="countdown-title">{title}</div>
+    <div class="countdown-display" id="countdownDisplay" data-target={targetDate}>
+      <span class="countdown-num" id="cdDays">00</span><span class="countdown-label">天</span>
+      <span class="countdown-num" id="cdHours">00</span><span class="countdown-label">时</span>
+      <span class="countdown-num" id="cdMinutes">00</span><span class="countdown-label">分</span>
+      <span class="countdown-num" id="cdSeconds">00</span><span class="countdown-label">秒</span>
+    </div>
+    <a href={buttonLink} class="countdown-btn">{buttonText}</a>
+  </div>
+)}
+
+<script>
+(function(){var e=document.getElementById('countdownDisplay');if(!e)return;var t=e.getAttribute('data-target')||'';if(!t)return;var d=document.getElementById('cdDays'),h=document.getElementById('cdHours'),m=document.getElementById('cdMinutes'),s=document.getElementById('cdSeconds');function p(n){return String(n).padStart(2,'0')}function u(){var n=new Date,o=new Date(t).getTime()-n.getTime();if(o<=0){d&&(d.textContent='00');h&&(h.textContent='00');m&&(m.textContent='00');s&&(s.textContent='00');return}var l=Math.floor(o/1e3),r=Math.floor(l/86400),g=Math.floor(l%86400/3600),e=Math.floor(l%3600/60),i=l%60;d&&(d.textContent=p(r));h&&(h.textContent=p(g));m&&(m.textContent=p(e));s&&(s.textContent=p(i))}u();setInterval(u,1e3)})();
+</script>
+
+<style>
+  .countdown-module { text-align: center; padding: 8px; }
+  .countdown-title { font-size: 15px; font-weight: bold; color: var(--color-secondary, #C00); font-family: "黑体","SimHei",sans-serif; margin-bottom: 8px; }
+  .countdown-display { margin-bottom: 10px; }
+  .countdown-num { display: inline-block; font-size: 24px; font-weight: bold; font-family: Arial,sans-serif; color: var(--color-primary, #036); background: #F0F0F0; padding: 3px 6px; margin: 0 2px; border: 1px solid var(--color-border, #CCC); min-width: 38px; text-align: center; }
+  .countdown-label { font-size: 13px; color: #666; font-family: "宋体","SimSun",serif; margin: 0 2px; }
+  .countdown-btn { display: inline-block; background: var(--color-secondary, #C00); color: #FFF; padding: 6px 24px; font-size: 14px; font-weight: bold; font-family: "黑体","SimHei",sans-serif; text-decoration: none; }
+  .countdown-btn:hover { background: #A00; text-decoration: none; color: #FFF; }
+</style>

package/src/components/Footer.astro

@@ -0,0 +1,47 @@
+---
+interface Props {
+  organization?: string;
+  contacts?: { label: string; value: string }[];
+  records?: { label: string; value: string; link?: string }[];
+  policeRecord?: string;
+  links?: { text: string; url: string }[];
+  extraLinks?: { text: string; url: string }[];
+  qrCodes?: { src: string; alt: string }[];
+  footerLogo?: string;
+}
+
+const { organization = '', contacts = [], records = [], policeRecord, links = [], extraLinks = [], qrCodes = [] } = Astro.props;
+---
+
+<footer class="footer">
+  <div class="container">
+    <div class="footer-bar">
+      <span class="footer-org">{organization}</span>
+      {records.length > 0 && records.map((r, i) => (<><span class="footer-sep">|</span><span>{r.link ? <a href={r.link} target="_blank" rel="noopener">{r.value}</a> : r.value}</span></>))}
+      {policeRecord && <><span class="footer-sep">|</span><a href="http://www.beian.gov.cn" target="_blank" rel="noopener">{policeRecord}</a></>}
+    </div>
+    {extraLinks.length > 0 && (
+      <div class="footer-extra">{extraLinks.map((link, i) => (<span>{i > 0 && <span class="footer-sep">|</span>}<a href={link.url}>{link.text}</a></span>))}</div>
+    )}
+    {qrCodes.length > 0 && (
+      <div class="footer-qr">{qrCodes.map(qr => (<div class="qr-item"><img src={qr.src} alt={qr.alt} class="qr-img" /><span class="qr-alt">{qr.alt}</span></div>))}</div>
+    )}
+    <div class="footer-copyright">版权所有 &copy; {new Date().getFullYear()} {organization}</div>
+  </div>
+</footer>
+
+<style>
+  .footer { background: var(--color-primary, #003366); color: #EEE; padding: 10px 0; font-size: 12px; line-height: 1.6; font-family: "宋体","SimSun",serif; }
+  .footer a { color: #E8F0FF; text-decoration: none; }
+  .footer a:hover { color: #FFF; text-decoration: underline; }
+  .footer-bar { text-align: center; margin-bottom: 4px; }
+  .footer-org { color: #FFF; font-weight: bold; }
+  .footer-sep { margin: 0 6px; color: #B0C8E0; }
+  .footer-extra { text-align: center; margin-bottom: 6px; font-size: 12px; }
+  .footer-qr { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
+  .qr-item { text-align: center; }
+  .qr-img { width: 50px; height: 50px; display: block; border: 1px solid #FFF; margin-bottom: 2px; }
+  .qr-alt { font-size: 10px; color: #E8F0FF; display: block; }
+  .footer-copyright { text-align: center; font-size: 11px; color: #D0E0F0; }
+  @media (max-width: 767px) { .footer-bar { display: flex; flex-direction: column; gap: 2px; } .footer-sep { display: none; } .footer-qr { flex-wrap: wrap; } }
+</style>

package/src/components/FriendLinks.astro

@@ -0,0 +1,25 @@
+---
+interface Props { title?: string; links?: { text: string; url: string; target?: string }[] }
+const { title = '友情链接', links = [] } = Astro.props;
+---
+
+{links.length > 0 && (
+  <div class="module">
+    <h3 class="module-title">{title}</h3>
+    <div class="fl-links">
+      {links.map(link => (
+        <a href={link.url} target={link.target || '_blank'} rel="noopener" class="fl-item">{link.text}</a>
+      ))}
+    </div>
+  </div>
+)}
+
+<style>
+  .module-title { font-size: 15px; font-weight: bold; color: var(--color-primary, #036); border-left: 3px solid var(--color-secondary, #C00); padding-left: 8px; margin-bottom: 10px; line-height: 1.4; }
+  .fl-links { display: flex; flex-wrap: wrap; }
+  .fl-item { display: inline-block; padding: 5px 16px; color: var(--color-link, #00F); font-size: 13px; font-family: "宋体","SimSun",serif; text-decoration: none; border-right: 1px solid var(--color-border, #CCC); line-height: 1.6; }
+  .fl-item:first-child { padding-left: 0; }
+  .fl-item:last-child { border-right: none; }
+  .fl-item:hover { color: var(--color-secondary, #C00); text-decoration: underline; }
+  @media (max-width: 767px) { .fl-item { padding: 5px 10px; font-size: 12px; } }
+</style>

package/src/components/Header.astro

@@ -0,0 +1,93 @@
+---
+interface Props {
+  siteName?: string;
+  siteSubtitle?: string;
+  siteLogo?: string;
+  topBar?: {
+    enabled?: boolean;
+    quickLinks?: { text: string; url: string; target?: string }[];
+    rightLinks?: { text: string; url: string; target?: string }[];
+    searchEnabled?: boolean;
+    searchPlaceholder?: string;
+  };
+}
+
+const { siteName, siteSubtitle, siteLogo, topBar = {} } = Astro.props;
+const { enabled = true, quickLinks = [], rightLinks = [], searchEnabled = false, searchPlaceholder = '请输入关键字' } = topBar;
+---
+
+<header class="top-header">
+  {enabled && (
+    <div class="toolbar">
+      <div class="container toolbar-inner">
+        <div class="toolbar-left">
+          {quickLinks.map(link => (
+            <a href={link.url} target={link.target || '_self'} class="toolbar-link">{link.text}</a>
+          ))}
+        </div>
+        <div class="toolbar-right">
+          <span class="font-size-group">
+            <a href="#" class="font-btn font-small" data-size="small" title="小字号">小</a>
+            <span class="font-sep">|</span>
+            <a href="#" class="font-btn font-medium" data-size="medium" title="中字号">中</a>
+            <span class="font-sep">|</span>
+            <a href="#" class="font-btn font-large" data-size="large" title="大字号">大</a>
+          </span>
+          {searchEnabled && (
+            <form class="search-form" action="/search" method="get">
+              <input type="text" class="search-input" placeholder={searchPlaceholder} name="keyword" />
+              <button type="submit" class="search-btn">搜索</button>
+            </form>
+          )}
+          {rightLinks.map(link => (
+            <a href={link.url} target={link.target || '_self'} class="toolbar-link toolbar-link-right">{link.text}</a>
+          ))}
+        </div>
+      </div>
+    </div>
+  )}
+  <div class="header-main">
+    <div class="container header-main-inner">
+      {siteLogo && <a href="/" class="logo-link"><img src={siteLogo} alt={siteName} class="logo-img" /></a>}
+      <div class="site-title-group">
+        <h1 class="site-name"><a href="/">{siteName}</a></h1>
+        {siteSubtitle && <p class="site-subtitle">{siteSubtitle}</p>}
+      </div>
+    </div>
+  </div>
+</header>
+
+<script>
+(function(){var b=document.querySelectorAll('.font-btn'),d=document.documentElement;b.forEach(function(e){e.addEventListener('click',function(f){f.preventDefault();b.forEach(function(g){g.classList.remove('active')});e.classList.add('active');d.setAttribute('data-font-size',e.getAttribute('data-size')||'medium')})})})();
+</script>
+
+<style>
+  .toolbar { background: var(--color-primary, #003366); font-size: 12px; line-height: 1; border-bottom: 1px solid rgba(255,255,255,.1); }
+  .toolbar-inner { display: flex; justify-content: space-between; align-items: center; height: 34px; }
+  .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 0; }
+  .toolbar-link { color: #F0F0F0; text-decoration: none; padding: 0 10px; border-right: 1px solid rgba(255,255,255,.15); font-family: "宋体", "SimSun", serif; white-space: nowrap; }
+  .toolbar-link:first-child { padding-left: 0; }
+  .toolbar-link:last-child { border-right: none; }
+  .toolbar-link:hover { color: #FFF; text-decoration: underline; }
+  .toolbar-link-right { border-right: none; border-left: 1px solid rgba(255,255,255,.15); }
+  .toolbar-link-right:first-child { border-left: none; }
+  .font-size-group { display: flex; align-items: center; margin-right: 10px; white-space: nowrap; }
+  .font-btn { color: #E8F0FF; text-decoration: none; padding: 0 3px; font-family: "宋体", "SimSun", serif; font-size: 12px; }
+  .font-btn:hover { color: #FFF; text-decoration: underline; }
+  .font-btn.active { color: #FFF; font-weight: bold; }
+  .font-sep { color: #8AC; margin: 0 2px; }
+  .search-form { display: flex; align-items: center; margin: 0 10px; }
+  .search-input { height: 22px; padding: 0 6px; border: 1px solid #557799; background: #FFF; font-size: 12px; font-family: "宋体", "SimSun", serif; width: 140px; outline: none; border-radius: 0; }
+  .search-input:focus { border-color: #9BD; }
+  .search-btn { height: 22px; padding: 0 8px; background: var(--color-secondary, #CC0000); color: #FFF; border: none; font-size: 11px; font-family: "宋体", "SimSun", serif; cursor: pointer; border-radius: 0; }
+  .search-btn:hover { background: #900; }
+  .header-main { background: #FFF; padding: 10px 0; border-bottom: 2px solid var(--color-primary, #003366); }
+  .header-main-inner { display: flex; align-items: center; gap: 16px; }
+  .logo-img { max-height: 64px; width: auto; display: block; }
+  .site-title-group { flex: 1; }
+  .site-name { font-size: 24px; font-weight: bold; line-height: 1.3; margin: 0; }
+  .site-name a { color: var(--color-primary, #003366); text-decoration: none; font-family: "黑体", "SimHei", sans-serif; }
+  .site-name a:hover { color: var(--color-secondary, #CC0000); }
+  .site-subtitle { font-size: 13px; color: #888; margin-top: 2px; font-family: "宋体", "SimSun", serif; }
+  @media (max-width: 767px) { .toolbar { display: none; } .header-main { padding: 8px 0; } .site-name { font-size: 18px; } .logo-img { max-height: 44px; } .search-form { display: none; } }
+</style>

package/src/components/Headline.astro

@@ -0,0 +1,37 @@
+---
+interface Props {
+  cards?: { src: string; alt: string; title: string; date: string; link?: string }[];
+}
+const { cards = [] } = Astro.props;
+---
+
+{cards.length > 0 && (
+  <section class="headline-section"><div class="container">
+    <div class="headline-grid">
+      {cards.map(card => (
+        <article class="headline-card">
+          <a href={card.link || '#'}>
+            <div class="card-img"><img src={card.src} alt={card.alt} loading="lazy" /></div>
+            <div class="card-body"><h3 class="card-title">{card.title}</h3><time class="card-date">{card.date}</time></div>
+          </a>
+        </article>
+      ))}
+    </div>
+  </div></section>
+)}
+
+<style>
+  .headline-section { padding: 10px 0 5px 0; }
+  .headline-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
+  .headline-card { background: #FFF; border: 1px solid var(--color-border, #CCC); transition: border-color .15s; }
+  .headline-card:hover { border-color: var(--color-secondary, #C00); }
+  .headline-card a { text-decoration: none; color: inherit; display: block; }
+  .card-img { width: 100%; height: 150px; overflow: hidden; border-bottom: 1px solid var(--color-divider, #EEE); }
+  .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .card-body { padding: 8px 10px 10px; }
+  .card-title { font-size: 13px; font-weight: bold; font-family: "黑体","SimHei",sans-serif; color: var(--color-text, #333); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px; }
+  .headline-card:hover .card-title { color: var(--color-secondary, #C00); }
+  .card-date { font-size: 12px; color: #999; font-family: Arial,sans-serif; }
+  @media (max-width: 768px) { .headline-grid { grid-template-columns: 1fr; } .card-img { height: 180px; } }
+  @media (min-width:769px) and (max-width:1199px) { .headline-grid { grid-template-columns: repeat(2,1fr); } }
+</style>

package/src/components/Nav.astro

@@ -0,0 +1,52 @@
+---
+interface NavItem {
+  text: string;
+  url: string;
+  target?: string;
+  highlight?: boolean;
+  dropdown?: { text: string; url: string; target?: string }[];
+}
+
+interface Props { items?: NavItem[] }
+const { items = [] } = Astro.props;
+---
+
+<nav class="nav">
+  <div class="container nav-inner">
+    {items.map(item => (
+      <div class:list={{ 'nav-item': true, 'has-dropdown': item.dropdown && item.dropdown.length > 0 }}>
+        <a
+          href={item.dropdown ? 'javascript:void(0)' : item.url}
+          class:list={{ 'nav-link': true, highlight: item.highlight }}
+        >
+          {item.text}
+          {item.dropdown && item.dropdown.length > 0 && <span class="nav-arrow">▼</span>}
+        </a>
+        {item.dropdown && item.dropdown.length > 0 && (
+          <div class="dropdown-menu">
+            {item.dropdown.map(sub => (
+              <a href={sub.url} target={sub.target || '_self'} class="dropdown-item">{sub.text}</a>
+            ))}
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+</nav>
+
+<style>
+  .nav { background: var(--color-secondary, #CC0000); padding: 0; position: relative; z-index: 100; }
+  .nav-inner { display: flex; flex-wrap: nowrap; position: relative; }
+  .nav-item { position: relative; flex: 0 0 auto; }
+  .nav-link { display: block; padding: 8px 18px; color: #FFF; font-size: 15px; font-weight: bold; text-decoration: none; font-family: "黑体","SimHei",sans-serif; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.15); transition: background .15s; line-height: 1.4; }
+  .nav-link:hover { background: rgba(0,0,0,.2); text-decoration: none; color: #FFF; }
+  .nav-link.highlight { background: #FF6600; }
+  .nav-link.highlight:hover { background: #E05500; }
+  .nav-arrow { font-size: 10px; margin-left: 4px; vertical-align: middle; }
+  .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 140px; background: #FFF; border: 1px solid var(--color-border, #CCC); border-top: 2px solid var(--color-secondary, #C00); z-index: 200; padding: 0; }
+  .nav-item:hover .dropdown-menu { display: block; }
+  .dropdown-item { display: block; padding: 8px 16px; color: #333; font-size: 13px; font-family: "宋体","SimSun",serif; text-decoration: none; border-bottom: 1px solid #EEE; }
+  .dropdown-item:last-child { border-bottom: none; }
+  .dropdown-item:hover { background: #F5F5F5; color: var(--color-primary, #036); text-decoration: none; }
+  @media (max-width: 767px) { .nav-inner { flex-wrap: wrap; } .nav-link { padding: 7px 12px; font-size: 13px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); } .nav-item { width: 100%; } .dropdown-menu { position: static; width: 100%; } }
+</style>

package/src/components/QuickLinks.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+  links?: { text: string; url: string; target?: string }[];
+}
+const { links = [] } = Astro.props;
+---
+
+{links.length > 0 && (
+  <section class="ql-section"><div class="container">
+    <div class="ql-bar">
+      <div class="ql-label">快速通道</div>
+      <div class="ql-list" id="qlList">
+        {links.map(link => (
+          <a href={link.url} target={link.target || '_self'} class="ql-item">
+            <span class="ql-text">{link.text}</span>
+          </a>
+        ))}
+      </div>
+      {links.length > 4 && <button class="ql-toggle" id="qlToggle">展开更多</button>}
+    </div>
+  </div></section>
+)}
+
+<script>
+(function(){var t=document.getElementById('qlToggle'),l=document.getElementById('qlList');if(!t||!l)return;t.addEventListener('click',function(){l.classList.toggle('expanded');t.textContent=l.classList.contains('expanded')?'收起':'展开更多'})})();
+</script>
+
+<style>
+  .ql-section { padding: 0 0 8px 0; }
+  .ql-bar { display: flex; align-items: stretch; border: 1px solid var(--color-border, #CCC); background: #FFF; }
+  .ql-label { background: var(--color-primary, #036); color: #FFF; font-size: 14px; font-weight: bold; font-family: "黑体","SimHei",sans-serif; padding: 8px 14px; display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
+  .ql-list { display: flex; flex-wrap: wrap; align-items: center; flex: 1; overflow: hidden; max-height: 80px; transition: max-height .25s; }
+  .ql-list.expanded { max-height: 200px; }
+  .ql-item { display: flex; align-items: center; gap: 4px; padding: 6px 14px; text-decoration: none; color: var(--color-text, #333); font-size: 13px; font-family: "宋体","SimSun",serif; border-right: 1px solid var(--color-divider, #EEE); transition: background .15s; }
+  .ql-item:hover { background: #F5F5F5; color: var(--color-primary, #036); text-decoration: none; }
+  .ql-text { line-height: 1.3; }
+  .ql-toggle { background: var(--color-bg, #F5F5F5); border: none; border-left: 1px solid var(--color-border, #CCC); padding: 6px 12px; font-size: 12px; color: var(--color-link, #00F); cursor: pointer; font-family: "宋体","SimSun",serif; white-space: nowrap; flex-shrink: 0; }
+  .ql-toggle:hover { color: var(--color-secondary, #C00); text-decoration: underline; }
+  @media (max-width: 767px) { .ql-bar { flex-wrap: wrap; } .ql-label { width: 100%; justify-content: center; } .ql-item { padding: 5px 10px; font-size: 12px; } }
+</style>

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,133 @@
+---
+import Header from '../components/Header.astro';
+import Nav from '../components/Nav.astro';
+import Footer from '../components/Footer.astro';
+import '../styles/global.css';
+
+interface TopBarLink {
+  text: string;
+  url: string;
+  target?: string;
+}
+
+interface NavItem {
+  text: string;
+  url: string;
+  target?: string;
+  highlight?: boolean;
+  dropdown?: { text: string; url: string; target?: string }[];
+}
+
+interface FooterConfig {
+  organization: string;
+  contacts?: { label: string; value: string }[];
+  records?: { label: string; value: string; link?: string }[];
+  policeRecord?: string;
+  links?: { text: string; url: string }[];
+  extraLinks?: { text: string; url: string }[];
+  qrCodes?: { src: string; alt: string }[];
+  footerLogo?: string;
+}
+
+interface Props {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  siteName?: string;
+  siteSubtitle?: string;
+  siteLogo?: string;
+  siteIcon?: string;
+  topBar?: {
+    enabled?: boolean;
+    quickLinks?: TopBarLink[];
+    rightLinks?: TopBarLink[];
+    searchEnabled?: boolean;
+    searchPlaceholder?: string;
+  };
+  navItems?: NavItem[];
+  footer?: FooterConfig;
+  colors?: {
+    primary?: string;
+    primaryLight?: string;
+    secondary?: string;
+    accent?: string;
+    background?: string;
+    text?: string;
+    link?: string;
+    linkVisited?: string;
+    border?: string;
+    divider?: string;
+    fontFamily?: string;
+  };
+  defaultFontSize?: string;
+}
+
+const {
+  title = 'AstGov',
+  description = '',
+  keywords = '',
+  siteName,
+  siteSubtitle,
+  siteLogo,
+  siteIcon = '/favicon.svg',
+  topBar = {},
+  navItems = [],
+  footer = { organization: '' },
+  colors = {},
+  defaultFontSize = 'medium',
+} = Astro.props;
+
+const fontSizeAttr = defaultFontSize;
+const cssVars = `
+:root {
+  --color-primary: ${colors.primary || '#003366'};
+  --color-primary-light: ${colors.primaryLight || colors.primary || '#003366'};
+  --color-secondary: ${colors.secondary || '#CC0000'};
+  --color-accent: ${colors.accent || colors.secondary || '#CC0000'};
+  --color-bg: ${colors.background || '#F5F5F5'};
+  --color-text: ${colors.text || '#333333'};
+  --color-link: ${colors.link || '#0000FF'};
+  --color-link-visited: ${colors.linkVisited || '#800080'};
+  --color-border: ${colors.border || '#CCCCCC'};
+  --color-divider: ${colors.divider || '#EEEEEE'};
+  --font-body: ${colors.fontFamily || '"宋体", "SimSun", serif'};
+  --font-heading: "黑体", "SimHei", sans-serif;
+}
+`;
+---
+
+<!DOCTYPE html>
+<html lang="zh-CN" data-font-size={fontSizeAttr}>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{title ? `${title} - ${siteName || ''}`.replace(/ - $/, '') : siteName || 'AstGov'}</title>
+  <meta name="description" content={description} />
+  <meta name="keywords" content={keywords} />
+  <link rel="icon" href={siteIcon} type="image/svg+xml" />
+  <link rel="stylesheet" href="/styles/global.css" />
+  <style is:global set:html={cssVars}></style>
+</head>
+<body>
+  <Header
+    siteName={siteName}
+    siteSubtitle={siteSubtitle}
+    siteLogo={siteLogo}
+    topBar={topBar}
+  />
+  <Nav items={navItems} />
+  <main>
+    <slot />
+  </main>
+  <Footer
+    organization={footer.organization}
+    contacts={footer.contacts}
+    records={footer.records}
+    policeRecord={footer.policeRecord}
+    links={footer.links}
+    extraLinks={footer.extraLinks}
+    qrCodes={footer.qrCodes}
+    footerLogo={footer.footerLogo}
+  />
+</body>
+</html>

package/src/layouts/BlogLayout.astro

@@ -0,0 +1,38 @@
+---
+import BaseLayout from './BaseLayout.astro';
+
+interface Props {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  siteName?: string;
+  siteSubtitle?: string;
+  siteLogo?: string;
+  siteIcon?: string;
+  topBar?: any;
+  navItems?: any[];
+  footer?: any;
+  colors?: any;
+  defaultFontSize?: string;
+}
+
+const props = Astro.props;
+---
+
+<BaseLayout {...props}>
+  <section class="page-section">
+    <div class="container">
+      <article class="article">
+        <slot />
+      </article>
+    </div>
+  </section>
+</BaseLayout>
+
+<style>
+  .page-section { padding: 15px 0; min-height: 400px; }
+  .article { background: #FFFFFF; border: 1px solid var(--color-border, #CCCCCC); padding: 30px 35px; }
+  @media (max-width: 767px) {
+    .article { padding: 15px 18px; }
+  }
+</style>

package/src/styles/global.css

@@ -0,0 +1,26 @@
+/* ============================================================
+   AstGov 主题包 — 全局样式
+   2000 年代老派政府网站风格
+   ============================================================ */
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+html{font-size:14px;scroll-behavior:smooth}
+body{font-family:var(--font-body, "宋体", "SimSun", serif);font-size:14px;line-height:1.8;color:var(--color-text, #333);background-color:var(--color-bg, #F5F5F5);min-height:100vh}
+img{max-width:100%;height:auto;border:none}
+a{color:var(--color-link, #00F);text-decoration:none}
+a:visited{color:var(--color-link-visited, #808)}
+a:hover{color:var(--color-secondary, #C00);text-decoration:underline}
+ul,ol{list-style:none;padding:0;margin:0}
+.container{max-width:1200px;margin:0 auto;padding:0 15px}
+h1,h2,h3,h4,h5,h6{font-family:var(--font-heading, "黑体", "SimHei", sans-serif);line-height:1.5;color:var(--color-text, #333)}
+h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}h4{font-size:14px}
+.module-title{font-size:15px;font-weight:bold;color:var(--color-primary, #036);border-left:3px solid var(--color-secondary, #C00);padding-left:8px;margin-bottom:10px;line-height:1.4}
+.module-title .more-link{float:right;font-size:12px;font-weight:normal;color:var(--color-link, #00F);padding-top:1px}
+.module{background:#FFF;border:1px solid var(--color-border, #CCC);padding:10px;margin-bottom:10px}
+.two-col{display:flex;gap:10px}
+.two-col .col-main{flex:0 0 70%;max-width:70%}
+.two-col .col-side{flex:0 0 calc(30% - 10px);max-width:calc(30% - 10px)}
+html[data-font-size="small"]{font-size:12px}html[data-font-size="small"] body{font-size:12px}html[data-font-size="small"] h1{font-size:20px}html[data-font-size="small"] h2{font-size:17px}html[data-font-size="small"] h3{font-size:14px}html[data-font-size="small"] .module-title{font-size:13px}
+html[data-font-size="large"]{font-size:16px}html[data-font-size="large"] body{font-size:16px}html[data-font-size="large"] h1{font-size:28px}html[data-font-size="large"] h2{font-size:23px}html[data-font-size="large"] h3{font-size:18px}html[data-font-size="large"] .module-title{font-size:17px}
+.card-date,.footer,.toolbar{font-size:12px!important}
+@media(max-width:1199px){.two-col{flex-direction:column}.two-col .col-main,.two-col .col-side{flex:0 0 100%;max-width:100%}}
+@media(max-width:767px){.container{padding:0 10px}.module{padding:8px}}