@yunlefun/vue 0.1.1 → 0.1.2

package/README.md

@@ -1,52 +1,41 @@
 # @yunlefun/vue
 
-Vue toolkit(components/composables) for YunLeFun.
+YunLeFun Design 的 Vue 组件实现，提供 `Ylf*` 组件与 Nuxt 集成。
 
-## Usage
+## 安装
 
 ```bash
-pnpm add -D @yunlefun/vue sass
+pnpm add @yunlefun/ui @yunlefun/vue
+pnpm add -D sass
 ```
 
-### Use it in Nuxt
+在应用 SCSS 入口加载共享主题：
 
-```ts
-export default defineNuxtConfig({
-  modules: [
-    // ...
-    '@vueuse/nuxt',
-    '@unocss/nuxt',
-    '@pinia/nuxt',
-    // add this line
-    '@yunlefun/vue/nuxt',
-  ],
-})
+```scss
+@use '@yunlefun/ui/styles';
 ```
 
-### Add auto import resolver for vue components
+## Vue / Vite
+
+```vue
+<script setup lang="ts">
+import YlfButton from '@yunlefun/vue/components/YlfButton.vue'
+</script>
+
+<template>
+  <YlfButton>保存资料</YlfButton>
+</template>
+```
+
+## Nuxt
 
 ```ts
-// vite.config.ts
-import { defineConfig } from 'vite'
-import Components from 'unplugin-vue-components/vite'
-
-export default defineConfig({
-  plugins: [
-    // https://github.com/antfu/unplugin-vue-components
-    Components({
-      // allow auto load markdown components under `./src/components/`
-      extensions: ['vue', 'md'],
-      // allow auto import and register components used in markdown
-      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-      dts: 'src/components.d.ts',
-      resolvers: [
-        // add @yunlefun/vue auto import resolver
-        YlfResolver(),
-      ],
-      di
-    }),
-  ]
+export default defineNuxtConfig({
+  modules: ['@yunlefun/vue/nuxt'],
+  css: ['@yunlefun/ui/styles'],
 })
 ```
 
-You can use `<YlfXxx />` components in your vue files directly.
+根入口目前提供类型和组件目录信息，组件通过 `components/*.vue` 子路径或 Nuxt 模块使用；没有公开的 `YlfResolver`。
+
+更多内容见 [Vue 接入](./index.md)、[子包职责](../guide/packages.md)与[设计体系](../guide/design-system.md)。

package/components/YlfAccordion.vue

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'reka-ui'
+
+interface AccordionItemData {
+  value: string
+  title: string
+  content?: string
+  disabled?: boolean
+}
+
+withDefaults(defineProps<{
+  items: AccordionItemData[]
+  type?: 'single' | 'multiple'
+  collapsible?: boolean
+}>(), {
+  type: 'single',
+  collapsible: true,
+})
+
+const model = defineModel<string | string[]>()
+</script>
+
+<template>
+  <AccordionRoot
+    v-model="model"
+    :type="type"
+    :collapsible="collapsible"
+    class="ylf-accordion"
+  >
+    <AccordionItem
+      v-for="it in items"
+      :key="it.value"
+      :value="it.value"
+      :disabled="it.disabled"
+      class="ylf-accordion__item"
+    >
+      <AccordionHeader class="ylf-accordion__header">
+        <AccordionTrigger class="ylf-accordion__trigger">
+          <span>{{ it.title }}</span>
+          <svg class="ylf-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </AccordionTrigger>
+      </AccordionHeader>
+      <AccordionContent class="ylf-accordion__content">
+        <div class="ylf-accordion__body">
+          <slot :name="it.value">
+            {{ it.content }}
+          </slot>
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>
+
+<style lang="scss">
+.ylf-accordion {
+  border: 1px solid var(--ylf-c-border, #e2e8f0);
+  border-radius: var(--ylf-radius, 14px);
+  overflow: hidden;
+  background: var(--ylf-c-surface, #fff);
+}
+
+.ylf-accordion__item + .ylf-accordion__item {
+  border-top: 1px solid var(--ylf-c-border, #e2e8f0);
+}
+
+.ylf-accordion__header {
+  margin: 0;
+}
+
+.ylf-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 16px;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: left;
+  color: var(--ylf-c-text, #0f172a);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background 0.18s ease;
+
+  &:hover {
+    background: var(--ylf-c-bg-soft, #f1f5f9);
+  }
+
+  &[data-disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--ylf-c-brand, #2563eb);
+  }
+}
+
+.ylf-accordion__chevron {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  color: var(--ylf-c-text-3, #64748b);
+  transition: transform 0.25s ease;
+}
+
+.ylf-accordion__trigger[data-state='open'] .ylf-accordion__chevron {
+  transform: rotate(180deg);
+}
+
+.ylf-accordion__content {
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--ylf-c-text-2, #475569);
+
+  &[data-state='open'] {
+    animation: ylf-acc-down 0.25s ease;
+  }
+
+  &[data-state='closed'] {
+    animation: ylf-acc-up 0.2s ease;
+  }
+}
+
+.ylf-accordion__body {
+  padding: 0 16px 16px;
+}
+
+@keyframes ylf-acc-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--reka-accordion-content-height);
+  }
+}
+
+@keyframes ylf-acc-up {
+  from {
+    height: var(--reka-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-accordion__content[data-state='open'],
+  .ylf-accordion__content[data-state='closed'] {
+    animation: none;
+  }
+
+  .ylf-accordion__chevron {
+    transition: none;
+  }
+}
+</style>

package/components/YlfAvatar.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { AvatarFallback, AvatarImage, AvatarRoot } from 'reka-ui'
+
+withDefaults(defineProps<{
+  src?: string
+  alt?: string
+  /** 图片加载失败/缺省时显示的文字（如姓名首字） */
+  fallback?: string
+  size?: 'sm' | 'md' | 'lg'
+}>(), {
+  size: 'md',
+  fallback: '',
+})
+</script>
+
+<template>
+  <AvatarRoot class="ylf-avatar" :class="`ylf-avatar--${size}`">
+    <AvatarImage v-if="src" :src="src" :alt="alt" class="ylf-avatar__img" />
+    <AvatarFallback class="ylf-avatar__fallback" :delay-ms="200">
+      {{ fallback }}
+    </AvatarFallback>
+  </AvatarRoot>
+</template>
+
+<style lang="scss">
+.ylf-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  overflow: hidden;
+  border-radius: 50%;
+  user-select: none;
+  background: var(--ylf-c-brand-soft, #eff6ff);
+
+  &--sm {
+    width: 32px;
+    height: 32px;
+    font-size: 13px;
+  }
+
+  &--md {
+    width: 44px;
+    height: 44px;
+    font-size: 16px;
+  }
+
+  &--lg {
+    width: 64px;
+    height: 64px;
+    font-size: 22px;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-weight: 600;
+    color: var(--ylf-c-brand, #2563eb);
+  }
+}
+</style>

package/components/YlfBadge.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { YlfAccentTone, YlfColorAppearance } from './theme'
+import { computed } from 'vue'
+
+type BadgeVariant
+  = | 'featured' // 精选：明黄星芒 + 中性文字
+    | 'accent' // 高饱和实色
+    | 'aurora' // @deprecated 使用 featured
+    | 'brand' // 晴空蓝
+    | 'neutral' // 灰蓝中性信息
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'info'
+
+const props = withDefaults(defineProps<{
+  variant?: BadgeVariant
+  /** 仅 accent 变体使用 */
+  tone?: YlfAccentTone
+  /** accent 与状态变体的强调程度 */
+  appearance?: YlfColorAppearance
+  /** 胶囊圆角 */
+  round?: boolean
+}>(), {
+  variant: 'brand',
+  tone: 'blue',
+  appearance: 'solid',
+  round: true,
+})
+
+const statusPaths: Partial<Record<BadgeVariant, string>> = {
+  success: 'M3.5 8 6.5 11 12.5 5',
+  warning: 'M8 3v6M8 12h.01',
+  danger: 'm4.5 4.5 7 7m0-7-7 7',
+  info: 'M8 7v5M8 4h.01',
+}
+const statusPath = computed(() => statusPaths[props.variant])
+</script>
+
+<template>
+  <span class="ylf-badge" :data-ylf-tone="tone" :class="[`ylf-badge--${variant}`, `is-${appearance}`, { 'is-round': round }]">
+    <span v-if="variant === 'featured' || variant === 'aurora'" class="ylf-badge__spark" aria-hidden="true" />
+    <svg v-else-if="statusPath" class="ylf-badge__status-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path :d="statusPath" />
+    </svg>
+    <slot />
+  </span>
+</template>
+
+<style lang="scss">
+.ylf-badge {
+  --_badge-tone: var(--ylf-c-brand, #2563eb);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  padding: 2px 9px;
+  border: 1px solid color-mix(in srgb, var(--_badge-tone) 18%, var(--ylf-c-surface, #fff));
+  border-radius: var(--ylf-radius-sm, 10px);
+  background: color-mix(in srgb, var(--_badge-tone) 6%, var(--ylf-c-surface, #fff));
+  color: var(--_badge-tone);
+  font-family: var(--ylf-font-body, inherit);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+  white-space: nowrap;
+
+  &.is-round {
+    border-radius: var(--ylf-radius-pill, 999px);
+  }
+
+  &--accent {
+    --_color: var(--ylf-accent, var(--ylf-c-brand, #2563eb));
+    --_soft: var(--ylf-accent-soft, var(--ylf-c-brand-soft, #eff6ff));
+    --_text: var(--ylf-accent-text, var(--ylf-c-brand, #2563eb));
+
+    color: var(--ylf-accent-on, var(--ylf-c-text-on-accent, #fff));
+    background: var(--ylf-accent, var(--ylf-c-brand, #2563eb));
+    border-color: transparent;
+  }
+
+  &--featured,
+  &--aurora {
+    color: var(--ylf-c-feature-text, #0f172a);
+    background: var(--ylf-c-feature-bg, #fef9c3);
+    border-color: color-mix(in srgb, var(--ylf-c-feature, #facc15) 45%, var(--ylf-c-surface, #fff));
+  }
+
+  // 装饰星芒不承担状态语义，标签文字保持清晰。
+  &__spark {
+    flex: none;
+    width: 12px;
+    height: 12px;
+    background: var(--ylf-c-feature, #facc15);
+    clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
+  }
+
+  &--neutral {
+    --_badge-tone: var(--ylf-c-text-2, #475569);
+  }
+
+  &__status-icon {
+    flex: none;
+    width: 12px;
+    height: 12px;
+  }
+
+  @each $status, $fill, $on in (success, #22c55e, #124324), (warning, #facc15, #64380e), (danger, #ff6b4a, #551b0a),
+    (info, #06b6d4, #083e4f)
+  {
+    &--#{$status} {
+      --_color: var(--ylf-status-#{$status}, #{$fill});
+      --_soft: var(--ylf-status-#{$status}-soft, var(--ylf-c-bg-soft, #f1f5f9));
+      --_text: var(--ylf-status-#{$status}-text, #{$on});
+
+      color: var(--ylf-status-#{$status}-on, $on);
+      background: var(--ylf-status-#{$status}, $fill);
+      border-color: transparent;
+    }
+  }
+
+  &--accent,
+  &--success,
+  &--warning,
+  &--danger,
+  &--info {
+    &.is-soft {
+      color: var(--_text);
+      background: var(--_soft);
+    }
+
+    &.is-outline {
+      color: var(--_text);
+      background: transparent;
+      border-color: var(--_color);
+    }
+  }
+}
+</style>

package/components/YlfBottomMenu.vue

@@ -1,15 +1,32 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  /** 浮起阴影 */
+  shadow?: boolean
+}>(), {
+  shadow: false,
+})
+</script>
+
 <template>
-  <nav class="ylf-bottom-menu mx-auto flex justify-between">
+  <nav class="ylf-bottom-menu" :class="{ 'is-shadow': shadow }">
     <slot />
   </nav>
 </template>
 
-<style>
+<style lang="scss">
 .ylf-bottom-menu {
-  background-color: var(--ylf-bottom-menu-c-bg, #fff);
-}
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  gap: 4px;
+  padding: 8px 6px;
+  background: var(--ylf-bottom-menu-c-bg, var(--ylf-glass-bg, rgba(255, 255, 255, 0.62)));
+  -webkit-backdrop-filter: var(--ylf-glass-blur, saturate(160%) blur(16px));
+  backdrop-filter: var(--ylf-glass-blur, saturate(160%) blur(16px));
+  border-top: 1px solid var(--ylf-c-border, #e2e8f0);
 
-.dark .ylf-bottom-menu {
-  background-color: var(--ylf-bottom-menu-c-bg, #222);
+  &.is-shadow {
+    box-shadow: var(--ylf-shadow, 0 10px 28px -8px rgba(15, 23, 42, 0.16));
+  }
 }
 </style>

package/components/YlfBottomMenuItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { BottomMenuItem } from '@yunlefun/vue'
+import type { BottomMenuItem } from './bottom-menu'
 
 defineProps<{
   active: boolean
@@ -11,35 +11,55 @@ const emit = defineEmits(['click'])
 
 <template>
   <button
-    :class="{
-      active,
-    }"
-    class="ylf-bottom-menu-item cursor-pointer transition"
-    flex="~ 1"
-    justify="center" items="center"
-    text-gray-800 dark="text-white"
-    hover="text-blue-500"
-    p="2"
-    :to="item.to"
+    class="ylf-bottom-menu-item"
+    :class="{ active }"
+    type="button"
     @click="emit('click', item)"
   >
-    <div flex="~ col" justify="center" items="center">
-      <slot>
-        <div text-xl :class="(active && item.activeIcon) || item.icon" />
-        <span text-xs mt="1">
-          {{ item.title }}
-        </span>
-      </slot>
-    </div>
+    <slot>
+      <div class="ylf-bottom-menu-item__icon" :class="(active && item.activeIcon) || item.icon" />
+      <span class="ylf-bottom-menu-item__label">{{ item.title }}</span>
+    </slot>
   </button>
 </template>
 
 <style lang="scss">
 .ylf-bottom-menu-item {
-  color: var(--ylf-c-text, black);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--ylf-c-text-3, #64748b);
+  transition:
+    color 0.2s ease,
+    transform 0.2s var(--ylf-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
+
+  &__icon {
+    font-size: 22px;
+  }
+
+  &__label {
+    font-size: 12px;
+  }
+
+  &:active {
+    transform: scale(0.92);
+  }
 
   &.active {
-    color: var(--ylf-c-primary, dodgerblue);
+    color: var(--ylf-c-brand, #2563eb);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-bottom-menu-item {
+    transition: none;
   }
 }
 </style>