@yunlefun/vue 0.1.1 → 0.1.3

package/components/YlfSlider.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
+
+withDefaults(defineProps<{
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+}>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+})
+
+const model = defineModel<number[]>({ default: () => [50] })
+</script>
+
+<template>
+  <SliderRoot
+    v-model="model"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+    class="ylf-slider"
+  >
+    <SliderTrack class="ylf-slider__track">
+      <SliderRange class="ylf-slider__range" />
+    </SliderTrack>
+    <SliderThumb v-for="(_, i) in model" :key="i" class="ylf-slider__thumb" />
+  </SliderRoot>
+</template>
+
+<style lang="scss">
+.ylf-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 20px;
+  touch-action: none;
+  user-select: none;
+
+  &[data-disabled] {
+    opacity: 0.5;
+  }
+
+  &__track {
+    position: relative;
+    flex-grow: 1;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--ylf-c-bg-mute, #e2e8f0);
+  }
+
+  &__range {
+    position: absolute;
+    height: 100%;
+    border-radius: 999px;
+    background: var(--ylf-c-brand, #2563eb);
+  }
+
+  &__thumb {
+    display: block;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid var(--ylf-c-brand, #2563eb);
+    box-shadow: var(--ylf-shadow-sm, 0 2px 8px -2px rgba(15, 23, 42, 0.12));
+    cursor: grab;
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 0 0 6px var(--ylf-c-brand-soft, #eff6ff);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px var(--ylf-c-brand-soft, #eff6ff);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+</style>

package/components/YlfSwitch.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { YlfAccentTone } from './theme'
+// 行为 / 可访问性由 reka-ui 提供（role=switch、键盘、焦点、data-state）；
+// 外观全部走 --ylf token，所以视觉识别仍是「晴空蓝为主、高饱和纯色点缀」。
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
+
+withDefaults(defineProps<{
+  /** on 态轨道：brand 主色（默认）或 accent 纯色；aurora 是 accent 的旧别名 */
+  variant?: 'brand' | 'accent' | 'aurora'
+  tone?: YlfAccentTone
+  size?: 'sm' | 'md'
+  disabled?: boolean
+}>(), {
+  variant: 'brand',
+  tone: 'blue',
+  size: 'md',
+  disabled: false,
+})
+
+const checked = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <SwitchRoot
+    v-model="checked"
+    :disabled="disabled"
+    class="ylf-switch"
+    :data-ylf-tone="tone"
+    :class="[`ylf-switch--${variant}`, `ylf-switch--${size}`]"
+  >
+    <SwitchThumb class="ylf-switch__thumb" />
+  </SwitchRoot>
+</template>
+
+<style lang="scss">
+.ylf-switch {
+  --_w: 52px;
+  --_h: 30px;
+  --_pad: 3px;
+
+  position: relative;
+  flex: none;
+  width: var(--_w);
+  height: var(--_h);
+  padding: 0;
+  border: none;
+  border-radius: var(--ylf-radius-pill, 999px);
+  background: var(--ylf-c-bg-mute, #e2e8f0);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background var(--ylf-duration-normal, 240ms) var(--ylf-ease-standard, ease),
+    box-shadow var(--ylf-duration-fast, 160ms) var(--ylf-ease-standard, ease);
+
+  &--sm {
+    --_w: 40px;
+    --_h: 24px;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 3px var(--ylf-c-brand-soft, #eff6ff),
+      0 0 0 5px var(--ylf-c-brand, #2563eb);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // on 态：晴空蓝主色
+  &[data-state='checked'] {
+    background: var(--ylf-c-brand, #2563eb);
+  }
+
+  // 选中的强调轨道，前景与填充色成组。
+  &--accent[data-state='checked'],
+  &--aurora[data-state='checked'] {
+    background: var(--ylf-accent, var(--ylf-c-brand, #2563eb));
+  }
+
+  &__thumb {
+    display: block;
+    width: calc(var(--_h) - var(--_pad) * 2);
+    height: calc(var(--_h) - var(--_pad) * 2);
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    transform: translateX(var(--_pad));
+    transition: transform var(--ylf-duration-normal, 240ms) var(--ylf-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
+    will-change: transform;
+  }
+
+  &[data-state='checked'] &__thumb {
+    background: var(--ylf-c-text-on-accent, #fff);
+    transform: translateX(calc(var(--_w) - var(--_h) + var(--_pad)));
+  }
+  &--accent[data-state='checked'] &__thumb,
+  &--aurora[data-state='checked'] &__thumb {
+    background: var(--ylf-accent-on, var(--ylf-c-text-on-accent, #fff));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-switch,
+  .ylf-switch__thumb {
+    transition: none;
+  }
+}
+</style>

package/components/YlfTabs.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
+
+interface TabItem {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+withDefaults(defineProps<{
+  items: TabItem[]
+  orientation?: 'horizontal' | 'vertical'
+}>(), {
+  orientation: 'horizontal',
+})
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <TabsRoot
+    v-model="model"
+    :orientation="orientation"
+    class="ylf-tabs"
+    :class="`ylf-tabs--${orientation}`"
+  >
+    <TabsList class="ylf-tabs__list">
+      <TabsIndicator class="ylf-tabs__indicator" />
+      <TabsTrigger
+        v-for="t in items"
+        :key="t.value"
+        :value="t.value"
+        :disabled="t.disabled"
+        class="ylf-tabs__trigger"
+      >
+        {{ t.label }}
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent
+      v-for="t in items"
+      :key="t.value"
+      :value="t.value"
+      class="ylf-tabs__content"
+    >
+      <slot :name="t.value" />
+    </TabsContent>
+  </TabsRoot>
+</template>
+
+<style lang="scss">
+.ylf-tabs__list {
+  position: relative;
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--ylf-c-border, #e2e8f0);
+}
+
+.ylf-tabs__trigger {
+  position: relative;
+  padding: 10px 16px;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--ylf-c-text-2, #475569);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover:not([data-disabled]) {
+    color: var(--ylf-c-text, #0f172a);
+  }
+
+  &[data-state='active'] {
+    color: var(--ylf-c-brand, #2563eb);
+  }
+
+  &[data-disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-radius: var(--ylf-radius-sm, 10px);
+    box-shadow: 0 0 0 3px var(--ylf-c-brand-soft, #eff6ff);
+  }
+}
+
+.ylf-tabs__indicator {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: var(--reka-tabs-indicator-size);
+  height: 2.5px;
+  border-radius: 999px;
+  background: var(--ylf-c-brand, #2563eb);
+  transform: translateX(var(--reka-tabs-indicator-position));
+  transition:
+    transform 0.25s var(--ylf-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    width 0.25s ease;
+}
+
+.ylf-tabs__content {
+  padding-top: 16px;
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-tabs__indicator {
+    transition: none;
+  }
+}
+</style>

package/components/YlfTooltip.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+// 行为 / 定位 / a11y 由 reka-ui 提供；皮肤走 token。
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
+
+withDefaults(defineProps<{
+  content?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  delay?: number
+}>(), {
+  side: 'top',
+  delay: 300,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="delay">
+    <TooltipRoot>
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent :side="side" :side-offset="6" class="ylf-tooltip">
+          <slot name="content">
+            {{ content }}
+          </slot>
+          <TooltipArrow class="ylf-tooltip__arrow" :width="10" :height="5" />
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>
+
+<style lang="scss">
+.ylf-tooltip {
+  z-index: 110;
+  max-width: 240px;
+  padding: 7px 11px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--ylf-c-bg, #fbfcff);
+  background: var(--ylf-c-text, #0f172a);
+  border-radius: var(--ylf-radius-sm, 10px);
+  box-shadow: var(--ylf-shadow, 0 10px 28px -8px rgba(15, 23, 42, 0.16));
+  transform-origin: var(--reka-tooltip-content-transform-origin);
+
+  &[data-state='delayed-open'] {
+    animation: ylf-pop-in 0.16s ease;
+  }
+
+  &__arrow {
+    fill: var(--ylf-c-text, #0f172a);
+  }
+}
+
+@keyframes ylf-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-tooltip[data-state='delayed-open'] {
+    animation: none;
+  }
+}
+</style>

package/components/accordion/demo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const items = [
+  { value: 'a', title: '什么是 YunLeFun Design？', content: '云乐坊设计系统，统一设计规范、品牌视觉与 UI 实现；默认晴空蓝为主，高饱和纯色点缀。' },
+  { value: 'b', title: '为什么基于 reka-ui？', content: 'reka 管行为与可访问性，我们只管皮肤——省心，且无障碍达标。' },
+  { value: 'c', title: '支持暗色吗？', content: '晴空白与深蓝夜空两套中性色，token 驱动，零配置随主题切换。' },
+]
+</script>
+
+<template>
+  <YlfAccordion :items="items" />
+</template>

package/components/accordion/index.md

@@ -0,0 +1,19 @@
+---
+title: Accordion
+title_zh: 手风琴
+---
+
+手风琴：展开/收起、键盘导航、单开/多开基于 [reka-ui](https://reka-ui.com)，高度过渡与外观走 token。
+
+## Props
+
+| 属性          | 说明                                         | 类型                  | 默认值   |
+| ------------- | -------------------------------------------- | --------------------- | -------- |
+| `v-model`     | 展开项                                       | `string \| string[]`  | —        |
+| `items`       | 列表 `{ value, title, content?, disabled? }` | `AccordionItemData[]` | —        |
+| `type`        | 单开 / 多开                                  | `single \| multiple`  | `single` |
+| `collapsible` | 单开模式允许全部收起                         | `boolean`             | `true`   |
+
+## Slots
+
+每项内容可用 `value` 同名插槽覆盖 `content`。

package/components/avatar/demo.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-wrap items-center gap-4">
+    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" size="lg" />
+    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" />
+    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" size="sm" />
+    <YlfAvatar fallback="云" />
+    <YlfAvatar fallback="YLF" size="lg" />
+  </div>
+</template>

package/components/avatar/index.md

@@ -0,0 +1,15 @@
+---
+title: Avatar
+title_zh: 头像
+---
+
+头像：图片加载状态管理与回退基于 [reka-ui](https://reka-ui.com)，加载失败时优雅回退到首字。
+
+## Props
+
+| 属性       | 说明                   | 类型             | 默认值 |
+| ---------- | ---------------------- | ---------------- | ------ |
+| `src`      | 图片地址               | `string`         | —      |
+| `alt`      | 替代文字               | `string`         | —      |
+| `fallback` | 回退文字（如姓名首字） | `string`         | —      |
+| `size`     | 尺寸                   | `sm \| md \| lg` | `md`   |

package/components/badge/demo.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+const tones = [
+  { value: 'blue', label: '晴空蓝' },
+  { value: 'sun', label: '精选集' },
+  { value: 'cyan', label: '工具' },
+  { value: 'coral', label: '活动' },
+  { value: 'pink', label: '创作' },
+  { value: 'green', label: '已完成' },
+] as const
+const appearances = [
+  { value: 'solid', label: '实色' },
+  { value: 'soft', label: '柔色' },
+  { value: 'outline', label: '描边' },
+] as const
+const statuses = [
+  { value: 'success', label: '已发布' },
+  { value: 'warning', label: '测试中' },
+  { value: 'danger', label: '发布失败' },
+  { value: 'info', label: '待审核' },
+] as const
+</script>
+
+<template>
+  <div class="ylf-badge-demo">
+    <div class="ylf-badge-demo__group">
+      <p>品牌与内容</p>
+      <div class="ylf-badge-demo__row">
+        <YlfBadge>新上线</YlfBadge>
+        <YlfBadge variant="featured">
+          精选
+        </YlfBadge>
+        <YlfBadge variant="neutral">
+          已归档
+        </YlfBadge>
+      </div>
+    </div>
+    <div class="ylf-badge-demo__group">
+      <p>分类与强调</p>
+      <div v-for="appearance in appearances" :key="appearance.value" class="ylf-badge-demo__row">
+        <span class="ylf-badge-demo__label">{{ appearance.label }}</span>
+        <YlfBadge v-for="tone in tones" :key="tone.value" variant="accent" :tone="tone.value" :appearance="appearance.value">
+          {{ tone.label }}
+        </YlfBadge>
+      </div>
+    </div>
+    <div class="ylf-badge-demo__group">
+      <p>状态与反馈</p>
+      <div v-for="appearance in appearances" :key="appearance.value" class="ylf-badge-demo__row">
+        <span class="ylf-badge-demo__label">{{ appearance.label }}</span>
+        <YlfBadge v-for="status in statuses" :key="status.value" :variant="status.value" :appearance="appearance.value">
+          {{ status.label }}
+        </YlfBadge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ylf-badge-demo {
+  display: grid;
+  gap: var(--ylf-space-6);
+}
+
+.ylf-badge-demo__group > p {
+  margin: 0 0 var(--ylf-space-3);
+  color: var(--ylf-c-text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.ylf-badge-demo__row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--ylf-space-3);
+  margin-top: var(--ylf-space-3);
+}
+
+.ylf-badge-demo__label {
+  width: 100%;
+  color: var(--ylf-c-text-2);
+  font-size: 12px;
+}
+</style>

package/components/badge/index.md

@@ -0,0 +1,41 @@
+---
+title: Badge
+title_zh: 徽标
+---
+
+默认以轻浅晴空蓝标记内容，明黄星芒点缀精选；分类和状态使用同一套高饱和实色，搭配经过对比度校验的前景文字。
+
+## 选择徽标
+
+- `brand`：新内容、版本等日常品牌标记。
+- `featured`：精选、推荐等品牌标记，明黄星芒、浅黄底和中性文字。
+- `accent`：高饱和实色，默认晴空蓝，使用 `tone` 选择明黄、青、珊瑚橙、桃粉或鲜绿。
+- `neutral`：已归档、草稿等普通信息，无需暗示成功或错误。
+- `success` / `warning` / `danger` / `info`：分别使用鲜绿、明黄、珊瑚橙与青色实底，配套状态图形和文字。
+
+徽标使用系统正文字体，默认 12px、500 字重，无阴影、发光或持续动画。前景、底色和描边使用配套 token，随明暗主题调整。使用简短明确的文字描述状态，颜色辅助识别。
+
+晴空蓝实底在浅色主题使用白字、深色主题使用深蓝字；其余纯色标签使用同色相深色文字，保证各组填充与前景的对比度。状态与强调色共享 token，详见[色彩与组件](/guide/colors#状态也来自同一套色板)。
+
+徽标用于展示信息；需要点击筛选或执行操作时，使用按钮等交互组件。
+
+## 强调程度
+
+同一个色彩角色可以选择 `appearance="solid"`（实色重点）、`soft`（柔色分类）或 `outline`（描边次级）。该属性只作用于 `accent` 与状态变体，其余变体沿用自身外观。
+
+## Props
+
+| 属性         | 说明                          | 类型                                                                             | 默认值  |
+| ------------ | ----------------------------- | -------------------------------------------------------------------------------- | ------- |
+| `variant`    | 语义与品牌用途                | `featured \| accent \| brand \| neutral \| success \| warning \| danger \| info` | `brand` |
+| `tone`       | 强调色，仅作用于 `accent`     | `blue \| sun \| cyan \| coral \| pink \| green`                                  | `blue`  |
+| `appearance` | `accent` 与状态变体的强调程度 | `solid \| soft \| outline`                                                       | `solid` |
+| `round`      | 胶囊圆角；关闭后使用小圆角    | `boolean`                                                                        | `true`  |
+
+`tone` 可选 `blue | sun | cyan | coral | pink | green`，默认 `blue`（晴空蓝），仅作用于 `accent`。`featured` 始终使用精选 token，不随 `tone` 改变。旧 `aurora` 值映射到 `featured`。
+
+## Slots
+
+| 名称      | 说明     |
+| --------- | -------- |
+| `default` | 徽标内容 |

package/components/bottom-menu/demo.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { BottomMenuItem } from '@yunlefun/vue'
+import type { BottomMenuItem } from './index'
 import { ref } from 'vue'
 
 const items: BottomMenuItem[] = [
@@ -15,6 +15,12 @@ const items: BottomMenuItem[] = [
     title: '发现',
     to: '/discover',
   },
+  {
+    icon: 'i-ri-copper-coin-line',
+    activeIcon: 'i-ri-copper-coin-fill',
+    title: '云币',
+    to: '/coin',
+  },
   {
     icon: 'i-ri-user-line',
     activeIcon: 'i-ri-user-fill',
@@ -37,13 +43,16 @@ function onClick(item: BottomMenuItem) {
 </script>
 
 <template>
-  <YlfBottomMenu shadow>
-    <YlfBottomMenuItem
-      v-for="item in items"
-      :key="item.to"
-      :item="item"
-      :active="active === item.to"
-      @click="onClick"
-    />
-  </YlfBottomMenu>
+  <div class="mx-auto max-w-xs overflow-hidden border border-$ylf-c-border rounded-ylf-xl">
+    <div class="h-28 op-90 bg-brand-gradient" />
+    <YlfBottomMenu shadow>
+      <YlfBottomMenuItem
+        v-for="item in items"
+        :key="item.to"
+        :item="item"
+        :active="active === item.to"
+        @click="onClick"
+      />
+    </YlfBottomMenu>
+  </div>
 </template>

package/components/bottom-menu/index.md

@@ -2,3 +2,28 @@
 title: Bottom Menu
 title_zh: 底部菜单
 ---
+
+云玻璃底部导航：背景模糊通透，激活项使用晴空蓝主色。适合 H5 / 子应用的主导航。
+
+## YlfBottomMenu Props
+
+| 属性     | 说明     | 类型      | 默认值  |
+| -------- | -------- | --------- | ------- |
+| `shadow` | 浮起阴影 | `boolean` | `false` |
+
+## YlfBottomMenuItem Props
+
+| 属性     | 说明       | 类型             |
+| -------- | ---------- | ---------------- |
+| `item`   | 菜单项数据 | `BottomMenuItem` |
+| `active` | 是否激活   | `boolean`        |
+
+## BottomMenuItem
+
+| 字段         | 说明             | 类型                       |
+| ------------ | ---------------- | -------------------------- |
+| `title`      | 标题             | `string`                   |
+| `icon`       | 图标 class       | `string`                   |
+| `activeIcon` | 激活态图标 class | `string?`                  |
+| `to`         | 路由目标         | `string?`                  |
+| `onClick`    | 点击回调         | `(...args: any[]) => void` |