gcsa-ui

GCSA 官网 Vue 3 / Web Components 组件库。

• Vue 3 / Nuxt 3：import { SiteFooter, GcsaLogo, GcsaMobileSidebar } from 'gcsa-ui'
• Nuxt 2 / Next.js / React / 纯 HTML：import 'gcsa-ui/elements' → <gcsa-site-footer> / <gcsa-logo> / <gcsa-mobile-sidebar>

当前组件：

| Vue | Web Component | |-----|----------------| | SiteFooter | <gcsa-site-footer> | | GcsaLogo | <gcsa-logo> | | GcsaMobileSidebar | <gcsa-mobile-sidebar> |

规划中：ContactForm / <gcsa-contact-form>

安装

pnpm add gcsa-ui
# 或本地
pnpm add ./gcsa-ui/gcsa-ui-1.2.3.tgz

• Vue 用法需要宿主安装 vue@^3.4（peer，可选）
• Web Components 用法 不需要 Vue（运行时已打进 elements 包）
• 不再依赖 Font Awesome（图标已内联 SVG）

本地预览（文档站）

cd gcsa-ui
pnpm install
pnpm dev
# 打开 http://localhost:5179

文档站直接引用 src/，保存后 HMR 即时刷新。左侧导航切换组件，顶部切换语言与主题。

构建产物预览（Web Components dist 路径）仍可用：

pnpm build
python3 -m http.server 5179
# 打开 http://localhost:5179/example/usage-html.html

发版

pnpm publish:npm                  # 构建 + npm publish
pnpm publish:npm -- --dry-run     # 仅验证
pnpm publish:npm -- --bump patch  # 自动升 patch 版本

用法 A：Web Components（推荐跨框架）

页脚

<script type="module" src="./dist/gcsa-ui-elements.js"></script>
<gcsa-site-footer locale="zh-CN" theme="dark"></gcsa-site-footer>

SiteFooter 页脚布局与 gcsa.org 主站底部对齐（品牌分隔线 → 导航 → 联系方式 → 四家法律顾问）， 内置简中 / 繁中 / English 法律顾问入口及详情弹窗（含李及李等四家机构、免责声明）。

主站更新 legalCounsel.json 后，在本目录执行：

pnpm sync:legal-counsel-from-gcsa

现有 locale / theme / override 接口不变。

| 属性 | 说明 | |------|------| | locale | zh-CN（默认）/ zh-TW / en-US | | active-nav-key | products | media | contact | about | | theme | dark / light；不传则跟随 html.dark / data-theme（iOS 靠内部 class 同步，勿只依赖 :host-context） | | override | JSON 字符串，局部覆盖固化文案（一般不用） |

Logo

<gcsa-logo theme="dark"></gcsa-logo>
<!-- Finger 风格覆盖 -->
<gcsa-logo theme="dark" title="GCSA" tagline="Finger" href="/"></gcsa-logo>

| 属性 | 说明 | |------|------| | href | 链接；空则非链接 | | title / tagline | 主字标 / 副标题（默认 GCSA / www.gcsa.org） | | show-tagline / show-wordmark | true/false | | size | sm | md | lg | | tone | auto | on-dark | on-light | | theme | dark | light；不传则跟随页面 html.dark / data-theme | | layout | row | stack |

移动端侧边栏

<button id="open">打开</button>
<gcsa-mobile-sidebar id="menu" locale="zh-CN" theme="dark"></gcsa-mobile-sidebar>
<script type="module">
  const menu = document.getElementById('menu')
  document.getElementById('open').onclick = () => menu.setAttribute('open', '')
  menu.addEventListener('close', () => menu.removeAttribute('open'))
</script>

| 属性 | 说明 | |------|------| | open | 设为 true 或有该属性即打开（推荐 open="true" / el.open = true） | | locale | 默认导航文案语言 | | active-nav-key | 高亮项 | | theme | dark | light；不传则跟随页面 html.dark / data-theme | | logo-title / logo-tagline / logo-href | 头部 Logo 覆盖 | | nav-items | JSON 数组，覆盖默认导航 | | menu-aria-label / close-aria-label | 无障碍文案 |

关闭时会冒泡 close 事件，并在 CE 内自动移除 open 属性。

Web Components 各入口由 CE 根组件显式导入所需的自包含样式并写入各自 Shadow DOM， 不依赖子组件 scoped CSS 自动注入，因此 不必再引 gcsa-ui/style.css。

Next 建议：dynamic(..., { ssr: false })，避免 SSR 报错。

用法 B：Vue 3 组件

<script setup>
import { ref } from 'vue'
import { GcsaLogo, GcsaMobileSidebar, SiteFooter } from 'gcsa-ui'
import 'gcsa-ui/style.css'

const open = ref(false)
</script>

<template>
  <GcsaLogo theme="dark" />
  <button @click="open = true">菜单</button>
  <GcsaMobileSidebar :open="open" theme="dark" @close="open = false" />
  <SiteFooter locale="zh-CN" />
</template>

或：

import { createApp } from 'vue'
import { GcsaUiPlugin } from 'gcsa-ui'
import 'gcsa-ui/style.css'
createApp(App).use(GcsaUiPlugin).mount('#app')

目录约定

src/
  components/
    SiteFooter.vue / GcsaSiteFooter.ce.vue
    FooterCounselModal.vue / FooterCounselLogo.vue
    GcsaLogo.vue / GcsaLogo.ce.vue
    GcsaMobileSidebar.vue / GcsaMobileSidebar.ce.vue
  consts/
    gcsaFooterContent.ts
    gcsaLegalCounselContent.ts
    gcsaChromeContent.ts
  elements.ts
  index.ts
  css/

新增组件时：写 Vue SFC → 可选加 *.ce.vue → 在 elements.ts 里 customElements.define。

构建

cd gcsa-ui
pnpm install
pnpm build
# dist/gcsa-ui.js + gcsa-ui.css          （Vue，vue external）
# dist/gcsa-ui-elements.js(.iife.js)     （Web Components，vue 已打包）
pnpm pack:local