@composy/attendance-vue

@composy/attendance-vue

@composy/attendance-core 的 Vue 适配层，提供四个组件、组合式函数和全局插件。

特性

• 组件：AttendanceCalendar、AttendanceStats、ClockInPanel、LeavePanel。
• Composables：useAttendanceCalendar、useAttendanceStats、useClockInPanel、useLeavePanel。
• 完整 props 同步：月份、数据、主题、排班、图例、今天按钮、选中日期、禁用态等更新会同步到 core 实例。
• 事件：monthChange、dateClick、clockIn、clock、recordClick。
• 样式：自动引入 ldesign-attendance-* 样式，也可显式引入 @composy/attendance-vue/index.css。

安装

pnpm add @composy/attendance-core @composy/attendance-vue

peer 依赖 vue ^2.7.0 || ^3.5.32，基于 vue-demi 同时兼容 Vue 2.7 与 Vue 3。组件使用 vue-demi 生命周期与 render function，构建不依赖 Vue 版本专属的 SFC 编译器。

使用

<script setup lang="ts">
import type { ClockRecord, DayRecord } from '@composy/attendance-core'
import { generateMonthRecords, generateSchedules, getCurrentMonth } from '@composy/attendance-core'
import { AttendanceCalendar, ClockInPanel } from '@composy/attendance-vue'
import '@composy/attendance-vue/index.css'

const month = getCurrentMonth()
const records = generateMonthRecords(month)
const schedules = generateSchedules(month)
const todayClocks: ClockRecord[] = []

function handleDateClick(date: string, record?: DayRecord) {
  console.info(date, record)
}

function handleClock(record: ClockRecord, clocks: ClockRecord[]) {
  console.info(record, clocks)
}
</script>

<template>
  <AttendanceCalendar
    :month="month"
    :records="records"
    :schedules="schedules"
    show-shift
    show-today-button
    @date-click="handleDateClick"
  />

  <ClockInPanel
    :today-clocks="todayClocks"
    location="总部大楼"
    method="wifi"
    @clock="handleClock"
  />
</template>

插件

import { createAttendancePlugin } from '@composy/attendance-vue'
import { createApp } from 'vue'
import '@composy/attendance-vue/index.css'

createApp(App).use(createAttendancePlugin({ prefix: 'L' }))

注册后组件名为 LAttendanceCalendar、LAttendanceStats、LClockInPanel、LLeavePanel。

Vue 2.7 项目可通过 Vue.use(createAttendancePlugin({ prefix: 'L' })) 注册同一插件；Vue 3 项目使用 app.use(...)。

验证

pnpm type-check       # vue-tsc，检查 Vue/ESM 配置
pnpm type-check:cjs   # vue-tsc，检查 Vue/CJS 配置
pnpm build            # Builder + 样式同步 + 产物契约检查
pnpm lint:check       # ESLint 严格检查

相关链接

• @composy/attendance-core — 框架无关核心与完整 Config 类型
• workspace 总览 — 子模块结构与根脚本

License

MIT

快照与组合式 API

四个 use* composable 和组件 render context 都暴露 getSnapshot()，返回 Core 实例的防御性快照：

const { create, getSnapshot } = useAttendanceCalendar()
create(host, { month: '2026-06' })
const snapshot = getSnapshot()
console.info(snapshot)

快照可安全用于 Pinia、日志或 URL 状态同步；修改返回对象不会改变 Core 内部记录。组件更新仍由 props 驱动，getSnapshot() 只用于读取当前已应用状态。Vue 2.7 与 Vue 3 均通过 vue-demi 使用同一 API。