品牌 Logo

美餐企业端（Paperwork）品牌标识，包含主标 + 横排 + 竖排 + 组件库标四种形态。主色 #6EB92C（美餐绿）。

Light / Dark 双套

每个 lockup 都有两个 SVG 文件：*.svg（暗色模式，PAPERWORK 文字用 #F3F9FF）和 *-light.svg（亮色模式，PAPERWORK 文字 swap 成 #1F1F1F）。 主标 mark.svg 单文件，两模式通用（绿底白字方块）。

主标 Mark

单独的 logo 标识，最小可识别尺寸 24×24。使用场景：app icon、favicon、卡片角标、组件内嵌徽标。两种模式通用（绿色底 + 白字，在任何背景上都识别）。

横排 Horizontal

横向 lockup，主标 + PAPERWORK 文字 + 美餐企业端 subtitle。使用场景：网页导航栏、文档页眉、横向卡片。

竖排 Vertical

纵向 lockup，使用场景：宣传海报、加载页、视觉强调位。

组件库标 Library

专门为本设计系统文档站点设计的横向标识（用于站点头）。使用场景：当前你正在看的左上角。

Vue 组件 `<Logo>`

通过 <Logo variant="..."> 引用，比硬编 <img src="/logo/..."> 路径更贴 design system 语义。

vue

<Logo variant="mark" />        <!-- 32×32 主标 -->
<Logo variant="vertical" />    <!-- 32×164 竖排 -->
<Logo variant="horizontal" />  <!-- 134×32 横排 -->
<Logo variant="logo" />        <!-- 319×30 组件库标 -->

<!-- light 变体（亮色模式下用，PAPERWORK 文字 swap 成 #1F1F1F） -->
<Logo variant="horizontal" light />

Prop	类型	默认	说明
`variant`	`'mark' \| 'vertical' \| 'horizontal' \| 'logo'`	`'mark'`	选 lockup 形态
`light`	`boolean`	`false`	亮色模式变体（除 `mark` 外都有；`mark` 双模式通用 prop 不生效）
`alt`	`string`	`'美餐 PAPERWORK'`	a11y alt 文案

自动模式切换

VitePress 文档站本身用 .dark class 判断主题。如果想让 Logo 跟随主题自动 swap，仍然需要 :root.dark CSS hack 或者用 useDark() 在 <script> 里 reactive 切换 prop。

资源清单

文件	尺寸	暗色 / 亮色	路径
主标 Mark	32 × 32	通用	`/logo/mark.svg`
横排 Horizontal	134 × 32	双套	`/logo/horizontal[-light].svg`
竖排 Vertical	32 × 164	双套	`/logo/vertical[-light].svg`
组件库标 Library	319 × 30	双套	`/logo/logo[-light].svg`

构建后这些文件位于 dist/logo/，可以直接 <img src="/logo/mark.svg"> 引用，也可以 inline SVG 拷贝到组件内。亮色 light 变体是脚本批替换生成（#F3F9FF / #EDF3F9 → #1F1F1F）。

品牌 Logo ​

主标 Mark ​

横排 Horizontal ​

竖排 Vertical ​

组件库标 Library ​

Vue 组件 <Logo> ​