@yunlefun/vue 0.1.1 → 0.1.3

package/components/button/demo.vue

@@ -1,5 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const loading = ref(false)
+function fakeLoad() {
+  loading.value = true
+  setTimeout(() => (loading.value = false), 1600)
+}
+</script>
+
 <template>
-  <YlfButton>
-    Button
-  </YlfButton>
+  <div class="flex flex-col gap-5">
+    <div class="flex flex-wrap items-center gap-3">
+      <YlfButton variant="primary">
+        晴空蓝 Primary
+      </YlfButton>
+      <YlfButton variant="accent">
+        默认强调
+      </YlfButton>
+      <YlfButton variant="accent" tone="sun">
+        发现精选
+      </YlfButton>
+      <YlfButton variant="secondary">
+        Secondary
+      </YlfButton>
+      <YlfButton variant="soft">
+        Soft
+      </YlfButton>
+      <YlfButton variant="ghost">
+        Ghost
+      </YlfButton>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3">
+      <YlfButton variant="accent" tone="cyan">
+        打开工具
+      </YlfButton>
+      <YlfButton variant="accent" tone="coral">
+        参与活动
+      </YlfButton>
+      <YlfButton variant="accent" tone="pink">
+        开始创作
+      </YlfButton>
+      <YlfButton variant="accent" tone="green">
+        完成设置
+      </YlfButton>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3">
+      <YlfButton variant="accent" tone="pink" appearance="soft">
+        收藏灵感
+      </YlfButton>
+      <YlfButton variant="accent" tone="cyan" appearance="outline">
+        看看工具
+      </YlfButton>
+      <YlfButton variant="success" appearance="soft">
+        保存成功
+      </YlfButton>
+      <YlfButton variant="danger" appearance="outline">
+        移除内容
+      </YlfButton>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3">
+      <YlfButton variant="success">
+        成功
+      </YlfButton>
+      <YlfButton variant="warning">
+        提醒
+      </YlfButton>
+      <YlfButton variant="danger">
+        危险
+      </YlfButton>
+      <YlfButton variant="secondary" disabled>
+        禁用
+      </YlfButton>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3">
+      <YlfButton size="sm">
+        Small
+      </YlfButton>
+      <YlfButton size="md">
+        Medium
+      </YlfButton>
+      <YlfButton size="lg">
+        Large
+      </YlfButton>
+      <YlfButton :round="false">
+        标准圆角
+      </YlfButton>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3">
+      <YlfButton :loading="loading" @click="fakeLoad">
+        <template #icon>
+          <div i-ri-magic-line />
+        </template>
+        {{ loading ? '召唤中…' : '点我加载' }}
+      </YlfButton>
+    </div>
+  </div>
 </template>

package/components/button/index.md

@@ -2,3 +2,44 @@
 title: Button
 title_zh: 按钮
 ---
+
+主操作默认使用晴空蓝实色；品牌展示可选择 `accent` 纯色变体，配合 `tone` 指定强调色。描边、柔色和透明按钮用于次级操作，成功、提醒与危险变体表达对应的状态语义。
+
+状态按钮与徽标使用同一套多巴胺色板：成功为鲜绿、提醒为明黄、危险为珊瑚橙，文字使用配套的同色相深色 token。
+
+## Registry
+
+Button 可以通过 URL 将组件源码和共享品牌 token 复制进业务项目；命令、边界和发布验收见 [Registry 分发](/guide/registry)。稳定基础组件仍优先通过 `@yunlefun/vue` 使用。
+
+## 强调程度
+
+同一个色彩角色可以选择 `appearance="solid"`（实色重点）、`soft`（柔色分类）或 `outline`（描边次级）。该属性只作用于 `accent` 与状态变体，旧 `aurora` 别名也支持它；其余变体沿用自身外观。`variant="soft"` 仍表示品牌蓝柔色按钮，彩色柔色按钮请使用 `variant="accent" appearance="soft"`。
+
+## Props
+
+| 属性         | 说明                          | 类型                                                                              | 默认值     |
+| ------------ | ----------------------------- | --------------------------------------------------------------------------------- | ---------- |
+| `variant`    | 风格                          | `primary \| accent \| secondary \| soft \| ghost \| success \| warning \| danger` | `primary`  |
+| `tone`       | 强调色，仅作用于 `accent`     | `blue \| sun \| cyan \| coral \| pink \| green`                                   | `blue`     |
+| `appearance` | `accent` 与状态变体的强调程度 | `solid \| soft \| outline`                                                        | `solid`    |
+| `size`       | 尺寸                          | `sm \| md \| lg`                                                                  | `md`       |
+| `round`      | 胶囊圆角（云是软的）          | `boolean`                                                                         | `true`     |
+| `block`      | 占满整行宽度                  | `boolean`                                                                         | `false`    |
+| `loading`    | 加载态                        | `boolean`                                                                         | `false`    |
+| `disabled`   | 禁用                          | `boolean`                                                                         | `false`    |
+| `tag`        | 渲染标签，如 `'a'`            | `string`                                                                          | `'button'` |
+
+`accent` 的 `tone` 可选 `blue | sun | cyan | coral | pink | green`，默认为 `blue`（晴空蓝）。其他变体保持自己的品牌或状态语义，不受 `tone` 影响。旧 `aurora` 值仍可接收，效果映射到 `accent`。
+
+## Slots
+
+| 名称      | 说明     |
+| --------- | -------- |
+| `default` | 按钮文字 |
+| `icon`    | 左侧图标 |
+
+## Events
+
+| 名称    | 说明                                          |
+| ------- | --------------------------------------------- |
+| `click` | 点击时触发（`disabled` / `loading` 下不触发） |

package/components/card/demo.vue

@@ -1,5 +1,78 @@
 <template>
-  <YlfCard>
-    内容
-  </YlfCard>
+  <div class="ylf-card-demo grid gap-4 sm:grid-cols-2">
+    <YlfCard variant="soft" :hoverable="false">
+      <div class="ic ic-sun">
+        <div i-ri-sparkling-2-line />
+      </div>
+      <h3>柔影卡片</h3>
+      <p>默认表面，色彩浸染的柔和投影，承载主要内容。</p>
+    </YlfCard>
+
+    <YlfCard variant="glass" :hoverable="false">
+      <div class="ic ic-brand">
+        <div i-ri-cloud-line />
+      </div>
+      <h3>云玻璃卡片</h3>
+      <p>背景模糊通透，适合浮层、导航与覆盖在彩云之上的内容。</p>
+    </YlfCard>
+
+    <YlfCard variant="accent" tone="coral" :hoverable="false">
+      <div class="ic ic-coral">
+        <div i-ri-add-circle-line />
+      </div>
+      <h3>纯色强调卡片</h3>
+      <p>珊瑚橙标记精选内容，正文表面保持清晰安静。</p>
+    </YlfCard>
+
+    <YlfCard variant="tinted" tone="pink" :hoverable="false">
+      <YlfBadge variant="accent" tone="pink" appearance="soft">
+        创作
+      </YlfBadge>
+      <h3 class="mt-3!">
+        给灵感一点颜色
+      </h3>
+      <p>柔色铺开在表面，实色留给重点。用同一组 token 组织内容层级。</p>
+    </YlfCard>
+  </div>
 </template>
+
+<style scoped>
+.ylf-card-demo h3 {
+  margin: 0 0 6px;
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.ylf-card-demo p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--ylf-c-text-2);
+}
+
+.ylf-card-demo .ic {
+  width: 44px;
+  height: 44px;
+  margin-bottom: 14px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 22px;
+}
+
+.ylf-card-demo .ic-sun {
+  background: var(--ylf-accent-sun);
+  color: var(--ylf-accent-sun-on);
+}
+
+.ylf-card-demo .ic-brand {
+  background: var(--ylf-c-brand);
+  color: var(--ylf-c-text-on-accent);
+}
+
+.ylf-card-demo .ic-coral {
+  background: var(--ylf-accent-coral);
+  color: var(--ylf-accent-coral-on);
+}
+</style>

package/components/card/index.md

@@ -2,3 +2,22 @@
 title: Card
 title_zh: 卡片
 ---
+
+以中性表面承载内容，可选云玻璃、顶部纯色强调或 `tinted` 柔色表面。静态内容显式关闭 `hoverable`，避免上浮暗示可点击。
+
+## Props
+
+| 属性        | 说明                           | 类型                                            | 默认值   |
+| ----------- | ------------------------------ | ----------------------------------------------- | -------- |
+| `variant`   | 表面风格                       | `soft \| glass \| accent \| tinted`             | `soft`   |
+| `tone`      | 强调色，用于 `accent / tinted` | `blue \| sun \| cyan \| coral \| pink \| green` | `blue`   |
+| `hoverable` | 悬停时轻轻抬升                 | `boolean`                                       | `true`   |
+| `padding`   | 内边距（任意 CSS 值）          | `string`                                        | `'22px'` |
+
+## Slots
+
+| 名称      | 说明     |
+| --------- | -------- |
+| `default` | 卡片内容 |
+
+`tone` 接受 `blue | sun | cyan | coral | pink | green`，默认 `blue`（晴空蓝），在 `accent` 和 `tinted` 下生效。旧 `gradient` 值映射到 `accent` 的纯色顶边，不再绘制渐变边框。

package/components/checkbox/demo.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const a = ref(true)
+const b = ref(false)
+const c = ref<boolean | 'indeterminate'>('indeterminate')
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <YlfCheckbox v-model="a" />
+      <span class="text-sm">已勾选</span>
+    </div>
+    <div class="flex items-center gap-2">
+      <YlfCheckbox v-model="b" />
+      <span class="text-sm">未勾选</span>
+    </div>
+    <div class="flex items-center gap-2">
+      <YlfCheckbox v-model="c" />
+      <span class="text-sm">半选 indeterminate</span>
+    </div>
+    <div class="flex items-center gap-2 op-60">
+      <YlfCheckbox :model-value="true" disabled />
+      <span class="text-sm">禁用</span>
+    </div>
+  </div>
+</template>

package/components/checkbox/index.md

@@ -0,0 +1,14 @@
+---
+title: Checkbox
+title_zh: 复选框
+---
+
+复选框：行为与可访问性基于 [reka-ui](https://reka-ui.com)（`role="checkbox"`、键盘、`indeterminate` 三态），外观使用共享主题 token。
+
+## Props
+
+| 属性       | 说明       | 类型                         | 默认值  |
+| ---------- | ---------- | ---------------------------- | ------- |
+| `v-model`  | 勾选状态   | `boolean \| 'indeterminate'` | `false` |
+| `value`    | 表单提交值 | `string`                     | —       |
+| `disabled` | 禁用       | `boolean`                    | `false` |

package/components/common/demo.vue

@@ -1,3 +1,9 @@
 <template>
-  <YlfLogo />
+  <div class="flex flex-wrap items-center gap-8">
+    <YlfLogo />
+    <YlfLogo layout="horizontal" size="sm" />
+    <a href="https://www.yunle.fun/" aria-label="云乐坊首页">
+      <YlfLogo size="sm" :wordmark="false" />
+    </a>
+  </div>
 </template>

package/components/common/index.md

@@ -2,3 +2,13 @@
 title: Common
 title_zh: 常见组件
 ---
+
+## 品牌标志
+
+`YlfLogo` 使用云乐坊主站的正式标志，默认晴空蓝，随明暗主题切换。云朵作为品牌装饰，与正式标志区分。使用方式见[品牌与界面](/guide/patterns)。
+
+| 属性       | 可选值                    | 默认值     |
+| ---------- | ------------------------- | ---------- |
+| `size`     | `sm` / `md` / `lg`        | `md`       |
+| `layout`   | `vertical` / `horizontal` | `vertical` |
+| `wordmark` | `boolean`                 | `true`     |

package/components/dialog/demo.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const open = ref(false)
+</script>
+
+<template>
+  <YlfDialog
+    v-model:open="open"
+    title="云端之上"
+    description="这是一个基于 reka-ui 的对话框：自带遮罩、焦点陷阱、ESC / 点击外部关闭、滚动锁与 aria 关联。"
+  >
+    <template #trigger>
+      <YlfButton variant="primary">
+        打开对话框
+      </YlfButton>
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <p class="text-sm">
+        行为由 reka-ui 提供，皮肤是云乐坊 token —— 试试按 <kbd>Esc</kbd> 或点击遮罩关闭。
+      </p>
+      <div class="flex justify-end gap-2">
+        <YlfButton variant="secondary" size="sm" @click="open = false">
+          取消
+        </YlfButton>
+        <YlfButton variant="primary" size="sm" @click="open = false">
+          确定
+        </YlfButton>
+      </div>
+    </div>
+  </YlfDialog>
+</template>

package/components/dialog/index.md

@@ -0,0 +1,30 @@
+---
+title: Dialog
+title_zh: 对话框
+---
+
+对话框：行为与可访问性全部基于 [reka-ui](https://reka-ui.com)（遮罩、焦点陷阱、`Esc` / 点击外部关闭、滚动锁、`aria-labelledby` / `aria-describedby`），外观使用共享主题 token。
+
+## Props
+
+| 属性              | 说明                             | 类型      | 默认值     |
+| ----------------- | -------------------------------- | --------- | ---------- |
+| `v-model:open`    | 显隐状态                         | `boolean` | `false`    |
+| `title`           | 可见标题                         | `string`  | —          |
+| `description`     | 描述                             | `string`  | —          |
+| `accessibleTitle` | 无可见标题时供辅助技术读取的标题 | `string`  | `'对话框'` |
+
+建议始终提供 `title`。只有视觉设计明确隐藏标题时，才改用描述场景的 `accessible-title`。
+
+## Registry
+
+Dialog 可通过 [Registry 分发](/guide/registry)复制源码；安装时会自动带入 `reka-ui`、Sass 与共享 token。
+
+## Slots
+
+| 名称          | 说明                                       |
+| ------------- | ------------------------------------------ |
+| `trigger`     | 触发器（`as-child`，把行为透传给你的按钮） |
+| `title`       | 自定义标题                                 |
+| `description` | 自定义描述                                 |
+| `default`     | 正文内容                                   |

package/components/dropdown-menu/demo.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const last = ref('')
+const items = [
+  { label: '个人资料', value: 'profile' },
+  { label: '云币钱包', value: 'wallet' },
+  { label: '偏好设置', value: 'settings' },
+  { separator: true },
+  { label: '退出登录', value: 'logout' },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <YlfDropdownMenu :items="items" @select="last = $event">
+      <template #trigger>
+        <YlfButton variant="secondary">
+          菜单 ▾
+        </YlfButton>
+      </template>
+    </YlfDropdownMenu>
+    <p class="text-sm op-70">
+      最近选择：{{ last || '（无）' }}
+    </p>
+  </div>
+</template>

package/components/dropdown-menu/index.md

@@ -0,0 +1,27 @@
+---
+title: Dropdown Menu
+title_zh: 下拉菜单
+---
+
+下拉菜单：定位、键盘导航（方向键 / Home / End / 首字母）、焦点管理基于 [reka-ui](https://reka-ui.com)，外观走 token。
+
+## Props
+
+| 属性    | 说明   | 类型         | 默认值 |
+| ------- | ------ | ------------ | ------ |
+| `items` | 菜单项 | `MenuItem[]` | —      |
+
+### MenuItem
+
+| 字段        | 说明         | 类型       |
+| ----------- | ------------ | ---------- |
+| `label`     | 文案         | `string`   |
+| `value`     | 选中值       | `string`   |
+| `disabled`  | 禁用         | `boolean?` |
+| `separator` | 渲染为分隔线 | `boolean?` |
+
+## Events
+
+| 名称     | 说明                         |
+| -------- | ---------------------------- |
+| `select` | 选中某项时触发，回传 `value` |

package/components/popover/demo.vue

@@ -0,0 +1,18 @@
+<template>
+  <YlfPopover side="bottom" align="start">
+    <template #trigger>
+      <YlfButton variant="primary">
+        打开浮层
+      </YlfButton>
+    </template>
+
+    <div class="flex flex-col gap-2">
+      <p class="m-0 text-sm font-600">
+        云乐坊浮层
+      </p>
+      <p class="m-0 text-sm op-70">
+        定位、点击外部关闭、焦点管理都来自 reka-ui，皮肤是云乐坊 token。
+      </p>
+    </div>
+  </YlfPopover>
+</template>

package/components/popover/index.md

@@ -0,0 +1,21 @@
+---
+title: Popover
+title_zh: 浮层
+---
+
+浮层：定位、点击外部关闭、焦点管理基于 [reka-ui](https://reka-ui.com)，外观走 token。
+
+## Props
+
+| 属性           | 说明     | 类型                             | 默认值   |
+| -------------- | -------- | -------------------------------- | -------- |
+| `v-model:open` | 显隐状态 | `boolean`                        | `false`  |
+| `side`         | 方向     | `top \| right \| bottom \| left` | `bottom` |
+| `align`        | 对齐     | `start \| center \| end`         | `center` |
+
+## Slots
+
+| 名称      | 说明                   |
+| --------- | ---------------------- |
+| `trigger` | 触发元素（`as-child`） |
+| `default` | 浮层内容               |

package/components/progress/demo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(40)
+function step(d: number) {
+  value.value = Math.max(0, Math.min(100, value.value + d))
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <YlfProgress :value="value" aria-label="主色进度" />
+    <YlfProgress :value="value" variant="accent" tone="green" aria-label="完成进度" />
+    <div class="flex items-center gap-3">
+      <YlfButton size="sm" variant="secondary" @click="step(-10)">
+        −10
+      </YlfButton>
+      <YlfButton size="sm" variant="primary" @click="step(10)">
+        +10
+      </YlfButton>
+      <span class="text-sm op-70">{{ value }}%</span>
+    </div>
+  </div>
+</template>

package/components/progress/index.md

@@ -0,0 +1,17 @@
+---
+title: Progress
+title_zh: 进度条
+---
+
+进度条：基于 [reka-ui](https://reka-ui.com)（`role="progressbar"` + aria 值），外观走 token，可选高饱和纯色填充。
+
+## Props
+
+| 属性      | 说明                      | 类型                                            | 默认值  |
+| --------- | ------------------------- | ----------------------------------------------- | ------- |
+| `value`   | 当前进度                  | `number`                                        | `0`     |
+| `max`     | 最大值                    | `number`                                        | `100`   |
+| `variant` | 填充                      | `brand \| accent`                               | `brand` |
+| `tone`    | 强调色，仅作用于 `accent` | `blue \| sun \| cyan \| coral \| pink \| green` | `blue`  |
+
+`tone` 接受 `blue | sun | cyan | coral | pink | green`，默认 `blue`（晴空蓝），只在 `accent` 下生效。旧 `aurora` 值映射到 `accent`。同一流程中的同类状态使用同一种颜色。

package/components/radio/demo.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const picked = ref('iris')
+const options = [
+  { label: '晴空蓝', value: 'sky' },
+  { label: '鸢尾紫', value: 'iris' },
+  { label: '兰紫粉', value: 'pink' },
+  { label: '禁用项', value: 'disabled', disabled: true },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <YlfRadioGroup v-model="picked" :options="options" orientation="horizontal" />
+    <p class="text-sm op-70">
+      当前：{{ picked }}
+    </p>
+  </div>
+</template>

package/components/radio/index.md

@@ -0,0 +1,23 @@
+---
+title: Radio
+title_zh: 单选框
+---
+
+单选框组：行为与可访问性基于 [reka-ui](https://reka-ui.com)（`role="radiogroup"`、方向键 roving focus），外观使用共享主题 token。
+
+## Props
+
+| 属性          | 说明     | 类型                     | 默认值     |
+| ------------- | -------- | ------------------------ | ---------- |
+| `v-model`     | 选中值   | `string`                 | —          |
+| `options`     | 选项列表 | `RadioOption[]`          | —          |
+| `orientation` | 排列方向 | `vertical \| horizontal` | `vertical` |
+| `disabled`    | 整组禁用 | `boolean`                | `false`    |
+
+### RadioOption
+
+| 字段       | 说明     | 类型       |
+| ---------- | -------- | ---------- |
+| `label`    | 文案     | `string`   |
+| `value`    | 值       | `string`   |
+| `disabled` | 禁用该项 | `boolean?` |

package/components/select/demo.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const picked = ref('')
+const options = [
+  { label: '晴空蓝', value: 'blue', color: 'var(--ylf-accent-blue)' },
+  { label: '明黄', value: 'sun', color: 'var(--ylf-accent-sun)' },
+  { label: '桃粉', value: 'pink', color: 'var(--ylf-accent-pink)' },
+  { label: '暂不可选', value: 'x', disabled: true },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <YlfSelect v-model="picked" :options="options" placeholder="选择一种颜色" />
+    <p class="text-sm op-70">
+      当前：{{ picked || '（未选）' }}
+    </p>
+  </div>
+</template>

package/components/select/index.md

@@ -0,0 +1,41 @@
+---
+title: Select
+title_zh: 选择器
+---
+
+选择器：定位、键盘导航、首字母检索、滚动基于 [reka-ui](https://reka-ui.com)，外观走 token。
+
+## Props
+
+| 属性          | 说明                                       | 类型             | 默认值   |
+| ------------- | ------------------------------------------ | ---------------- | -------- |
+| `v-model`     | 选中值                                     | `string`         | —        |
+| `options`     | 选项 `{ label, value, disabled?, color? }` | `SelectOption[]` | —        |
+| `placeholder` | 占位文案                                   | `string`         | `请选择` |
+| `disabled`    | 禁用                                       | `boolean`        | `false`  |
+
+`id`、`class`、`style`、`aria-label` 和 `aria-labelledby` 等属性会传给触发按钮。使用可见标签时，通过 `<label for="…">` 与组件的 `id` 关联；没有标签时可传入 `aria-label`，否则使用占位文案。`v-model` 和选项值支持字符串联合类型。
+
+下拉面板默认挂载到页面根部。局部明暗主题可通过 Reka UI 的 `ConfigProvider` 将 `teleport-to` 指向主题容器中的元素，确保面板继承同一套 token；容器应允许浮层溢出。首页的颜色与强调样式选择器使用的就是本组件。
+
+## 色点预览
+
+选项的 `color` 是可选 CSS 色值，支持 `var(--ylf-*)`。设置后，下拉列表和当前选中值会显示同色圆点；不设置时保持普通文本选择器。色点仅作视觉辅助，颜色名称和选中勾选仍保留。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tone = ref('blue')
+const options = [
+  { value: 'blue', label: '晴空蓝', color: 'var(--ylf-accent-blue)' },
+  { value: 'sun', label: '明黄', color: 'var(--ylf-accent-sun)' },
+]
+</script>
+
+<template>
+  <YlfSelect v-model="tone" :options="options" aria-label="强调色" />
+</template>
+```
+
+使用 token 时，色点会随所在主题更新；页面和浮层需处于同一主题范围。