# ldesign-work-log

**Repository Path**: ldesign-v1/ldesign-work-log

## Basic Information

- **Project Name**: ldesign-work-log
- **Description**: ???? - ??/??/???????
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-12
- **Last Updated**: 2026-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/work-log

工作日志组件，支持日报/周报/月报的结构化填写、模板管理和统计分析。

## ✨ 特性

- 📝 **结构化填报** - 今日完成/明日计划/需要协调/心得备注等结构化模板
- 📅 **日历视图** - 日历面板快速翻阅历史日志，缺填日期高亮提醒
- 📋 **多种周期** - 日报/周报/月报/自定义周期
- 📄 **模板管理** - 自定义日志模板，部门级模板统一配置
- 🔗 **关联事项** - 日志关联任务/项目/工单，自动汇总工时
- 👥 **团队概览** - 管理者视角查看团队成员日志提交情况
- 💬 **评论批注** - 上级对日志的评论与批注
- 📊 **统计汇总** - 工作量统计、工时分布、关键词词云
- 🔔 **填报提醒** - 定时提醒填写日志，未填写预警
- 📤 **导出功能** - 导出个人/团队日志报告（Excel/PDF）
- 📱 **移动端适配** - 移动端快速填报
- 🌓 **主题切换** - 亮色/暗色主题

---

## 📦 安装

```bash
# 使用 pnpm
pnpm add @ldesign/work-log

# 使用 npm
npm install @ldesign/work-log

# Vue 用户
pnpm add @ldesign/work-log-vue
```

## 🚀 快速开始

### 原生 JavaScript/TypeScript

```typescript
import { createWorkLog } from '@ldesign/work-log';

// 创建工作日志实例
const workLog = createWorkLog({
  container: '#work-log',
  type: 'daily',  // 'daily' | 'weekly' | 'monthly'
  theme: 'light', // 'light' | 'dark'
  showCalendar: true,
  showStats: false,
  
  // 值变更回调
  onChange: (entry) => {
    console.log('内容变更:', entry);
  },
  
  // 保存回调
  onSave: (entry) => {
    console.log('保存:', entry);
  },
});

// 获取当前数据
const data = workLog.getValue();

// 设置数据
workLog.setValue({
  sections: [
    { key: 'completed', title: '今日完成', content: '完成了XX功能开发' }
  ],
  workHours: 8,
  tags: ['开发', '前端']
});

// 保存并提交
const entry = workLog.save();

// 切换主题
workLog.setTheme('dark');

// 切换日志类型
workLog.setType('weekly');

// 销毁实例
workLog.destroy();
```

### Vue 3 使用方式

#### 方式一：组件方式

```vue
<template>
  <WorkLog
    :type="logType"
    :theme="theme"
    :logs="logs"
    show-calendar
    show-stats
    @change="handleChange"
    @save="handleSave"
  />
</template>

<script setup>
import { ref } from 'vue';
import { WorkLog } from '@ldesign/work-log-vue';

const logType = ref('daily');
const theme = ref('light');
const logs = ref([]);

const handleChange = (entry) => {
  console.log('变更:', entry);
};

const handleSave = (entry) => {
  console.log('保存:', entry);
  logs.value.push(entry);
};
</script>
```

#### 方式二：Composable 方式

```vue
<template>
  <div ref="containerRef" style="height: 600px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useWorkLog } from '@ldesign/work-log-vue';

const containerRef = ref(null);
const { create, value, save, setTheme } = useWorkLog();

onMounted(() => {
  create(containerRef.value, {
    type: 'daily',
    showCalendar: true,
  });
});

// 保存日志
const handleSave = () => {
  const entry = save();
  console.log('已保存:', entry);
};

// 切换主题
const toggleTheme = () => {
  setTheme(value.theme === 'light' ? 'dark' : 'light');
};
</script>
```

#### 方式三：插件注册

```typescript
// main.ts
import { createApp } from 'vue';
import { WorkLogPlugin } from '@ldesign/work-log-vue';
import App from './App.vue';

const app = createApp(App);

// 全局注册组件
app.use(WorkLogPlugin);

// 或带前缀注册
app.use(WorkLogPlugin, { prefix: 'Ld' }); // LdWorkLog, LdWorkLogEditor...

app.mount('#app');
```

---

## 📁 项目结构

```
work-log/
├── packages/
│   ├── core/              # 核心库 @ldesign/work-log
│   │   └── src/
│   │       ├── core/          # 核心引擎
│   │       │   ├── work-log.ts    # WorkLog 主类
│   │       │   └── event-emitter.ts # 事件发射器
│   │       ├── templates/     # 日志模板
│   │       │   ├── builtin-templates.ts  # 内置模板
│   │       │   └── template-manager.ts   # 模板管理器
│   │       ├── calendar/      # 日历功能
│   │       │   ├── calendar.ts      # 日历逻辑
│   │       │   └── date-utils.ts    # 日期工具
│   │       ├── stats/         # 统计分析
│   │       │   └── stats-engine.ts  # 统计引擎
│   │       ├── renderer/      # DOM渲染
│   │       │   ├── dom-renderer.ts  # DOM渲染器
│   │       │   └── style-manager.ts # 样式管理
│   │       ├── theme/         # 主题系统
│   │       │   ├── theme-manager.ts # 主题管理器
│   │       │   └── tokens.ts        # 设计Token
│   │       ├── utils/         # 工具函数
│   │       │   └── index.ts         # 通用工具
│   │       ├── types/         # TypeScript 类型
│   │       │   └── index.ts         # 类型定义
│   │       └── index.ts       # 入口导出
│   └── vue/               # Vue 组件 @ldesign/work-log-vue
│       └── src/
│           ├── components/    # Vue 组件
│           │   ├── WorkLog.vue         # 主组件
│           │   ├── WorkLogEditor.vue   # 编辑器组件
│           │   ├── WorkLogCalendar.vue # 日历组件
│           │   └── WorkLogStats.vue    # 统计组件
│           ├── composables/   # Vue Composables
│           │   └── useWorkLog.ts       # useWorkLog Hook
│           ├── plugins/       # Vue 插件
│           │   └── work-log-plugin.ts  # 插件定义
│           └── index.ts       # 入口导出
├── playground/            # 演示应用
└── README.md
```

---

## 📖 API 文档

### WorkLog 配置 (WorkLogConfig)

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `container` | `string \| HTMLElement` | - | 挂载容器（必需） |
| `type` | `'daily' \| 'weekly' \| 'monthly'` | `'daily'` | 日志类型 |
| `date` | `Date \| string` | 当前日期 | 初始日期 |
| `theme` | `'light' \| 'dark'` | `'light'` | 主题模式 |
| `template` | `LogTemplate` | 内置模板 | 自定义模板 |
| `data` | `Partial<LogEntry>` | - | 初始数据 |
| `logs` | `LogEntry[]` | - | 日志记录（用于日历标记） |
| `disabled` | `boolean` | `false` | 是否禁用 |
| `readonly` | `boolean` | `false` | 是否只读 |
| `showCalendar` | `boolean` | `true` | 是否显示日历 |
| `showStats` | `boolean` | `false` | 是否显示统计 |

### WorkLog 实例方法

| 方法 | 说明 |
|------|------|
| `getValue()` | 获取当前日志数据 |
| `setValue(entry)` | 设置日志数据 |
| `save()` | 保存并提交日志 |
| `clear()` | 清空日志内容 |
| `setDate(date)` | 设置日期 |
| `getDate()` | 获取当前日期 |
| `setType(type)` | 设置日志类型 |
| `setTemplate(template)` | 设置自定义模板 |
| `setTheme(theme)` | 设置主题 |
| `setDisabled(disabled)` | 设置禁用状态 |
| `setLogs(logs)` | 设置日志记录 |
| `getStats()` | 获取统计数据 |
| `prevMonth()` | 导航到上一个月 |
| `nextMonth()` | 导航到下一个月 |
| `goToday()` | 导航到今天 |
| `on(event, callback)` | 注册事件监听 |
| `focus()` | 聚焦编辑器 |
| `blur()` | 失焦编辑器 |
| `destroy()` | 销毁实例 |
| `refresh()` | 强制重新渲染 |
| `exportToJson()` | 导出为JSON |
| `importFromJson(json)` | 从JSON导入 |

### 事件

| 事件名 | 参数 | 说明 |
|--------|------|------|
| `change` | `Partial<LogEntry>` | 内容变更 |
| `save` | `LogEntry` | 保存完成 |
| `date-change` | `string` | 日期变更 |
| `type-change` | `LogType` | 类型变更 |
| `theme-change` | `ThemeMode` | 主题变更 |
| `focus` | - | 聚焦 |
| `blur` | - | 失焦 |
| `error` | `Error` | 错误 |

### 内置模板

| 模板Key | 名称 | 说明 |
|---------|------|------|
| `daily-default` | 日报模板 | 标准日报，含今日完成/明日计划/问题协调/心得备注 |
| `weekly-default` | 周报模板 | 标准周报，含本周总结/下周计划/项目进展/风险预警 |
| `monthly-default` | 月报模板 | 标准月报，含月度总结/关键成果/问题分析/下月规划 |
| `daily-simple` | 简洁日报 | 简化版，仅完成与计划 |
| `daily-dev` | 研发日报 | 研发专用，含需求/Bug/代码审查/技术调研 |
| `weekly-project` | 项目周报 | 项目管理专用，含进度/风险/资源/质量 |

---

## 🎨 主题定制

### 使用CSS变量

组件通过CSS变量实现主题，可直接覆盖：

```css
:root {
  --wl-primary: #4f6ef7;
  --wl-bg: #f7f8fa;
  --wl-text: #1a1a2e;
  /* 更多变量... */
}
```

### 编程式切换

```typescript
// 切换主题
workLog.setTheme('dark');

// 监听主题变化
workLog.on('theme-change', (theme) => {
  console.log('主题切换为:', theme);
});
```

---

## 📊 统计功能

```typescript
import { StatsEngine } from '@ldesign/work-log';

// 计算统计数据
const stats = StatsEngine.compute(logs);

console.log(stats.totalDays);        // 填报天数
console.log(stats.completionRate);   // 完成率
console.log(stats.totalHours);       // 总工时
console.log(stats.streak);           // 连续填报天数
console.log(stats.weeklyData);       // 按周统计
console.log(stats.tagDistribution);  // 标签分布

// 获取月度填报率
const monthlyRates = StatsEngine.getMonthlyRates(logs, 6);

// 获取工时分布
const hoursDist = StatsEngine.getHoursDistribution(logs);
```

---

## 🔧 高级用法

### 自定义模板

```typescript
import type { LogTemplate } from '@ldesign/work-log';
import { TemplateManager } from '@ldesign/work-log';

const customTemplate: LogTemplate = {
  name: '自定义日报',
  key: 'my-daily',
  description: '团队专用日报模板',
  type: 'daily',
  sections: [
    {
      key: 'tasks',
      title: '任务完成',
      placeholder: '请输入完成的任务...',
      required: true,
    },
    {
      key: 'plans',
      title: '明日计划',
      placeholder: '请输入明日计划...',
      required: true,
    },
    {
      key: 'issues',
      title: '问题反馈',
      placeholder: '请输入遇到的问题...',
      required: false,
    },
  ],
};

// 注册模板
const templateManager = new TemplateManager();
templateManager.register(customTemplate);

// 使用自定义模板
workLog.setTemplate(customTemplate);
```

### 导出JSON

```typescript
// 导出
const json = workLog.exportToJson();

// 导入
workLog.importFromJson(json);
```

---

## 📱 响应式设计

组件自动适配移动端，在小屏幕下：
- 侧边栏自动隐藏
- 日历和统计面板堆叠显示
- 触控友好的交互

---

## 🔗 相关链接

- [LDesign 官方文档](https://ldesign.github.io)
- [GitHub 仓库](https://github.com/ldesign/ldesign)
- [问题反馈](https://github.com/ldesign/ldesign/issues)

---

## 📄 License

MIT