vue2-client 1.12.95 → 1.12.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.12.95",
+  "version": "1.12.97",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XCalendar/XCalendar.vue

@@ -128,9 +128,9 @@ export default {
   },
   props: {
     // 接收配置
-    config: {
-      type: Object,
-      default: () => ({})
+    configName: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -144,11 +144,10 @@ export default {
     }
   },
   created () {
-    this.getData(this.config)
+    this.getData(this.configName)
   },
   computed: {
     // 使用计算属性访问合并后的配置
-    // eslint-disable-next-line vue/no-dupe-keys
     config () {
       return this.mergedConfig
     },
@@ -164,6 +163,7 @@ export default {
   methods: {
     // 获取配置
     getData (config) {
+      console.warn(config)
       getConfigByName(config, 'af-his', res => {
         // 深度合并配置
         this.mergedConfig = this.mergeConfig(defaultConfig, res)

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

@@ -0,0 +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'))
+  }
+}
+```