vue2-client 1.15.107 → 1.15.109

package/src/base-client/components/common/XCalendar/index.md

@@ -1,284 +1,284 @@
-# XCalendar
-
-基于 Ant Design Vue Calendar 的可配置日历组件，支持自定义标题、导航、样式等功能。
-
-## 何时使用
-
-当需要在界面中展示一个功能丰富的日历，并且需要：
-- 自定义日历的标题和导航
-- 添加自定义操作按钮
-- 自定义样式和布局
-- 响应日期选择和月份切换事件
-
-## 引用方式
-
-```javascript
-import XCalendar from '@vue2-client/base-client/components/common/XCalendar/XCalendar'
-
-export default {
-  components: {
-    XCalendar
-  }
-}
-```
-
-## 代码演示
-
-```html
-<x-calendar
-  :configName="calendarConfigName"
-  @select="handleSelect"
-  @monthChange="handleMonthChange"
-  @action="handleAction">
-</x-calendar>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| configName | 配置名称，用于从后端获取配置 | String | '' |
-
-### 事件
-
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| select | 选择日期时触发 | function(date: Moment) |
-| back-to-today | 点击"返回当天"按钮时触发 | function(date: Moment) |
-| action | 点击操作按钮时触发 | function(date: Moment) |
-| add | 点击新增按钮时触发 | function(date: Moment) |
-| month-change | 切换月份时触发 | function(date: Moment) |
-
-## 配置说明
-
-组件通过 `configName` 从后端获取配置，配置格式如下：
-
-### 完整配置结构
-
-```json
-{
-  "header": {
-    "show": true,
-    "title": "我的日程",
-    "showIcon": true,
-    "showBackToToday": true,
-    "backToTodayText": "返回当天",
-    "showMonth": true,
-    "showDay": true,
-    "monthClickable": false,
-    "dayClickable": false
-  },
-  "subHeader": {
-    "show": true,
-    "showNavigation": true,
-    "prevMonthText": "←",
-    "nextMonthText": "→"
-  },
-  "calendar": {
-    "fullscreen": false,
-    "locale": "zh-cn"
-  },
-  "actions": [
-    {
-      "text": "+ 新增日程",
-      "type": "add",
-      "handler": "handleAdd"
-    }
-  ],
-  "styles": {
-    "wrapper": {},
-    "header": {},
-    "titleInput": {},
-    "subHeader": {},
-    "currentDate": {},
-    "year": {},
-    "actionItem": {},
-    "calendarContent": {}
-  },
-  "events": {
-    "select": "select",
-    "backToToday": "back-to-today",
-    "action": "action",
-    "add": "add",
-    "monthChange": "month-change"
-  }
-}
-```
-
-### 配置项详细说明
-
-#### 1. header 配置
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| show | 是否显示头部 | boolean | true |
-| title | 标题文本 | string | '我的日程' |
-| showIcon | 是否显示图标 | boolean | true |
-| showBackToToday | 是否显示返回今天按钮 | boolean | true |
-| backToTodayText | 返回今天按钮文本 | string | '返回当天' |
-| showMonth | 是否显示月份 | boolean | true |
-| showDay | 是否显示日期 | boolean | true |
-| monthClickable | 月份是否可点击 | boolean | false |
-| dayClickable | 日期是否可点击 | boolean | false |
-
-#### 2. subHeader 配置
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| show | 是否显示子标题栏 | boolean | true |
-| showNavigation | 是否显示导航按钮 | boolean | true |
-| prevMonthText | 上个月按钮文本 | string | '←' |
-| nextMonthText | 下个月按钮文本 | string | '→' |
-
-#### 3. calendar 配置
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| fullscreen | 是否全屏显示 | boolean | false |
-| locale | 语言设置 | string | 'zh-cn' |
-
-#### 4. actions 配置
-
-每个操作按钮的配置项：
-
-| 参数 | 说明 | 类型 | 示例 |
-|------|------|------|------|
-| text | 按钮显示文本 | string | '+ 新增日程' |
-| type | 按钮类型标识 | string | 'add' |
-| handler | 处理函数名称 | string | 'handleAdd' |
-
-#### 5. styles 配置
-
-所有样式配置都接受标准的 CSS 属性对象：
-
-| 参数 | 说明 | 类型 | 示例 |
-|------|------|------|------|
-| wrapper | 整体容器样式 | object | { background: '#fff' } |
-| header | 头部样式 | object | { padding: '16px' } |
-| titleInput | 标题输入框样式 | object | { fontSize: '16px' } |
-| subHeader | 子标题栏样式 | object | { marginBottom: '20px' } |
-| currentDate | 当前日期样式 | object | { color: '#1890ff' } |
-| year | 年份样式 | object | { fontSize: '14px' } |
-| actionItem | 操作按钮样式 | object | { cursor: 'pointer' } |
-| calendarContent | 日历内容区域样式 | object | { padding: '24px' } |
-
-## 使用示例
-
-### 1. 基础使用
-
-```html
-<template>
-  <x-calendar :configName="'MyCalendarConfig'" @select="onSelect" />
-</template>
-
-<script>
-export default {
-  methods: {
-    onSelect(date) {
-      console.log('选择的日期：', date.format('YYYY-MM-DD'))
-    }
-  }
-}
-</script>
-```
-
-### 2. 自定义样式配置
-
-```json
-{
-  "styles": {
-    "wrapper": {
-      "backgroundColor": "#f5f5f5",
-      "padding": "24px",
-      "borderRadius": "8px"
-    },
-    "header": {
-      "borderBottom": "1px solid #e8e8e8",
-      "marginBottom": "16px"
-    },
-    "currentDate": {
-      "fontSize": "24px",
-      "fontWeight": "bold",
-      "color": "#1890ff"
-    }
-  }
-}
-```
-
-### 3. 自定义操作按钮
-
-```json
-{
-  "actions": [
-    {
-      "text": "+ 新增日程",
-      "type": "add",
-      "handler": "handleAdd"
-    },
-    {
-      "text": "查看详情",
-      "type": "view",
-      "handler": "handleView"
-    }
-  ]
-}
-```
-
-## 注意事项
-
-1. 组件使用 moment.js 处理日期，确保项目中已正确配置
-2. 样式配置支持所有合法的 CSS 属性，使用驼峰命名
-3. 自定义事件处理函数需要在父组件中实现
-4. 所有配置项都是可选的，未配置时使用默认值
-5. 语言设置默认为中文，可通过 calendar.locale 配置修改
-6. 样式配置支持响应式设计，可根据需要调整
-
-## 常见问题
-
-### 1. 如何修改日历的默认语言？
-
-通过 calendar 配置项设置：
-```json
-{
-  "calendar": {
-    "locale": "en-us"
-  }
-}
-```
-
-### 2. 如何自定义日期显示格式？
-
-可以通过监听 select 事件，在回调函数中自定义格式化：
-```javascript
-onSelect(date) {
-  const formattedDate = date.format('YYYY年MM月DD日')
-}
-```
-
-### 3. 如何添加自定义操作按钮？
-
-在配置中的 actions 数组中添加按钮配置：
-```json
-{
-  "actions": [
-    {
-      "text": "自定义按钮",
-      "type": "custom",
-      "handler": "handleCustom"
-    }
-  ]
-}
-```
-
-### 4. 如何处理按钮点击事件？
-
-在父组件中实现对应的处理函数：
-```javascript
-methods: {
-  handleCustom(date) {
-    console.log('自定义按钮点击，当前日期：', date.format('YYYY-MM-DD'))
-  }
-}
-```
+# XCalendar
+
+基于 Ant Design Vue Calendar 的可配置日历组件，支持自定义标题、导航、样式等功能。
+
+## 何时使用
+
+当需要在界面中展示一个功能丰富的日历，并且需要：
+- 自定义日历的标题和导航
+- 添加自定义操作按钮
+- 自定义样式和布局
+- 响应日期选择和月份切换事件
+
+## 引用方式
+
+```javascript
+import XCalendar from '@vue2-client/base-client/components/common/XCalendar/XCalendar'
+
+export default {
+  components: {
+    XCalendar
+  }
+}
+```
+
+## 代码演示
+
+```html
+<x-calendar
+  :configName="calendarConfigName"
+  @select="handleSelect"
+  @monthChange="handleMonthChange"
+  @action="handleAction">
+</x-calendar>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| configName | 配置名称，用于从后端获取配置 | String | '' |
+
+### 事件
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| select | 选择日期时触发 | function(date: Moment) |
+| back-to-today | 点击"返回当天"按钮时触发 | function(date: Moment) |
+| action | 点击操作按钮时触发 | function(date: Moment) |
+| add | 点击新增按钮时触发 | function(date: Moment) |
+| month-change | 切换月份时触发 | function(date: Moment) |
+
+## 配置说明
+
+组件通过 `configName` 从后端获取配置，配置格式如下：
+
+### 完整配置结构
+
+```json
+{
+  "header": {
+    "show": true,
+    "title": "我的日程",
+    "showIcon": true,
+    "showBackToToday": true,
+    "backToTodayText": "返回当天",
+    "showMonth": true,
+    "showDay": true,
+    "monthClickable": false,
+    "dayClickable": false
+  },
+  "subHeader": {
+    "show": true,
+    "showNavigation": true,
+    "prevMonthText": "←",
+    "nextMonthText": "→"
+  },
+  "calendar": {
+    "fullscreen": false,
+    "locale": "zh-cn"
+  },
+  "actions": [
+    {
+      "text": "+ 新增日程",
+      "type": "add",
+      "handler": "handleAdd"
+    }
+  ],
+  "styles": {
+    "wrapper": {},
+    "header": {},
+    "titleInput": {},
+    "subHeader": {},
+    "currentDate": {},
+    "year": {},
+    "actionItem": {},
+    "calendarContent": {}
+  },
+  "events": {
+    "select": "select",
+    "backToToday": "back-to-today",
+    "action": "action",
+    "add": "add",
+    "monthChange": "month-change"
+  }
+}
+```
+
+### 配置项详细说明
+
+#### 1. header 配置
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| show | 是否显示头部 | boolean | true |
+| title | 标题文本 | string | '我的日程' |
+| showIcon | 是否显示图标 | boolean | true |
+| showBackToToday | 是否显示返回今天按钮 | boolean | true |
+| backToTodayText | 返回今天按钮文本 | string | '返回当天' |
+| showMonth | 是否显示月份 | boolean | true |
+| showDay | 是否显示日期 | boolean | true |
+| monthClickable | 月份是否可点击 | boolean | false |
+| dayClickable | 日期是否可点击 | boolean | false |
+
+#### 2. subHeader 配置
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| show | 是否显示子标题栏 | boolean | true |
+| showNavigation | 是否显示导航按钮 | boolean | true |
+| prevMonthText | 上个月按钮文本 | string | '←' |
+| nextMonthText | 下个月按钮文本 | string | '→' |
+
+#### 3. calendar 配置
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| fullscreen | 是否全屏显示 | boolean | false |
+| locale | 语言设置 | string | 'zh-cn' |
+
+#### 4. actions 配置
+
+每个操作按钮的配置项：
+
+| 参数 | 说明 | 类型 | 示例 |
+|------|------|------|------|
+| text | 按钮显示文本 | string | '+ 新增日程' |
+| type | 按钮类型标识 | string | 'add' |
+| handler | 处理函数名称 | string | 'handleAdd' |
+
+#### 5. styles 配置
+
+所有样式配置都接受标准的 CSS 属性对象：
+
+| 参数 | 说明 | 类型 | 示例 |
+|------|------|------|------|
+| wrapper | 整体容器样式 | object | { background: '#fff' } |
+| header | 头部样式 | object | { padding: '16px' } |
+| titleInput | 标题输入框样式 | object | { fontSize: '16px' } |
+| subHeader | 子标题栏样式 | object | { marginBottom: '20px' } |
+| currentDate | 当前日期样式 | object | { color: '#1890ff' } |
+| year | 年份样式 | object | { fontSize: '14px' } |
+| actionItem | 操作按钮样式 | object | { cursor: 'pointer' } |
+| calendarContent | 日历内容区域样式 | object | { padding: '24px' } |
+
+## 使用示例
+
+### 1. 基础使用
+
+```html
+<template>
+  <x-calendar :configName="'MyCalendarConfig'" @select="onSelect" />
+</template>
+
+<script>
+export default {
+  methods: {
+    onSelect(date) {
+      console.log('选择的日期：', date.format('YYYY-MM-DD'))
+    }
+  }
+}
+</script>
+```
+
+### 2. 自定义样式配置
+
+```json
+{
+  "styles": {
+    "wrapper": {
+      "backgroundColor": "#f5f5f5",
+      "padding": "24px",
+      "borderRadius": "8px"
+    },
+    "header": {
+      "borderBottom": "1px solid #e8e8e8",
+      "marginBottom": "16px"
+    },
+    "currentDate": {
+      "fontSize": "24px",
+      "fontWeight": "bold",
+      "color": "#1890ff"
+    }
+  }
+}
+```
+
+### 3. 自定义操作按钮
+
+```json
+{
+  "actions": [
+    {
+      "text": "+ 新增日程",
+      "type": "add",
+      "handler": "handleAdd"
+    },
+    {
+      "text": "查看详情",
+      "type": "view",
+      "handler": "handleView"
+    }
+  ]
+}
+```
+
+## 注意事项
+
+1. 组件使用 moment.js 处理日期，确保项目中已正确配置
+2. 样式配置支持所有合法的 CSS 属性，使用驼峰命名
+3. 自定义事件处理函数需要在父组件中实现
+4. 所有配置项都是可选的，未配置时使用默认值
+5. 语言设置默认为中文，可通过 calendar.locale 配置修改
+6. 样式配置支持响应式设计，可根据需要调整
+
+## 常见问题
+
+### 1. 如何修改日历的默认语言？
+
+通过 calendar 配置项设置：
+```json
+{
+  "calendar": {
+    "locale": "en-us"
+  }
+}
+```
+
+### 2. 如何自定义日期显示格式？
+
+可以通过监听 select 事件，在回调函数中自定义格式化：
+```javascript
+onSelect(date) {
+  const formattedDate = date.format('YYYY年MM月DD日')
+}
+```
+
+### 3. 如何添加自定义操作按钮？
+
+在配置中的 actions 数组中添加按钮配置：
+```json
+{
+  "actions": [
+    {
+      "text": "自定义按钮",
+      "type": "custom",
+      "handler": "handleCustom"
+    }
+  ]
+}
+```
+
+### 4. 如何处理按钮点击事件？
+
+在父组件中实现对应的处理函数：
+```javascript
+methods: {
+  handleCustom(date) {
+    console.log('自定义按钮点击，当前日期：', date.format('YYYY-MM-DD'))
+  }
+}
+```