gcsa-ui

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>

当前组件：

规划中：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 接口不变。

Logo

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

移动端侧边栏

<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>

关闭时会冒泡 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