stellar-ui-v2 1.35.3

package/components/ste-button/ste-button.vue

@@ -0,0 +1,345 @@
+<template>
+	<button
+		v-if="stopPropagation"
+		class="ste-button--root"
+		:disabled="disabled"
+		:hover-class="!loading ? 'ste-button--root-active' : ''"
+		@click.stop="handleClick"
+		:style="[cmpBtnStyle]"
+		:open-type="openType"
+		:scope="scope"
+		@getuserinfo="getuserinfo"
+		@getUserInfo="getuserinfo"
+		@contact="contact"
+		@getphonenumber="getphonenumber"
+		@getPhoneNumber="getphonenumber"
+		@getrealtimephonenumber="getrealtimephonenumber"
+		@agreeprivacyauthorization="agreeprivacyauthorization"
+		@error="error"
+		@opensetting="opensetting"
+		@launchapp="launchapp"
+		@chooseavatar="chooseavatar"
+		@getAuthorize="getAuthorize"
+		@followLifestyle="followLifestyle"
+	>
+		<view class="btn-box">
+			<text v-if="loading">加载中.......</text>
+			<slot v-else></slot>
+		</view>
+	</button>
+	<button
+		v-else
+		class="ste-button--root"
+		:disabled="disabled"
+		:hover-class="!loading ? 'ste-button--root-active' : ''"
+		@click="handleClick"
+		:style="[cmpBtnStyle]"
+		:open-type="openType"
+		:scope="scope"
+		@getuserinfo="getuserinfo"
+		@getUserInfo="getuserinfo"
+		@contact="contact"
+		@getphonenumber="getphonenumber"
+		@getPhoneNumber="getphonenumber"
+		@getrealtimephonenumber="getrealtimephonenumber"
+		@agreeprivacyauthorization="agreeprivacyauthorization"
+		@error="error"
+		@opensetting="opensetting"
+		@launchapp="launchapp"
+		@chooseavatar="chooseavatar"
+		@getAuthorize="getAuthorize"
+		@followLifestyle="followLifestyle"
+	>
+		<view class="btn-box">
+			<text v-if="loading">加载中.......</text>
+			<slot v-else></slot>
+		</view>
+	</button>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+/**
+ * ste-button 按钮
+ * @description 按钮组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-button
+ * @property {Number} mode 尺寸 默认值 200
+ * @value 100 小 {Number}
+ * @value 200 中 {Number}
+ * @value 300 大 {Number}
+ * @value 400 超大 {Number}
+ * @property {String} color 文本颜色 默认值 #ffffff
+ * @property {String} background 背景 默认值 #0090FF
+ * @property {String} borderColor 边框颜色
+ * @property {Number|String} width 宽度 默认值 auto
+ * @value auto 自适应宽度 {String}
+ * @value 100% 填满 {String}
+ * @value {{Number}}  自适应宽度，单位rpx {Number}
+ * @property {Boolean} round 是否圆角按钮 默认 true
+ * @property {Boolean} disabled 是否禁用状态 默认 false
+ * @property {Boolean} loading 是否加载中状态 默认 false
+ * @property {Boolean} stopPropagation 是否阻止冒泡行为 默认 false
+ * @property {String} openType 微信开放能力和支付宝开放能力
+ * @property {String} scope 支付宝开放能力，当 openType 为 getAuthorize 时有效
+ * @property {Object} rootStyle 按钮样式属性
+ * @event {Function} click 非禁止并且非加载中，才能点击
+ * @event {Function} getuserinfo 微信小程序：用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo。支付宝小程序：当 open-type 为 getAuthorize 且 scope 为 userInfo 时有效。当授权成功时触发。
+ * @event {Function} contact 微信小程序：客服消息回调，open-type="contact"时有效。
+ * @event {Function} getphonenumber 微信小程序：手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用。支付宝小程序：当 open-type 为 getAuthorize 且 scope 为 phoneNumber 时有效。当授权成功时触发。
+ * @event {Function} getrealtimephonenumber 微信小程序：手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用。
+ * @event {Function} agreeprivacyauthorization 微信小程序：用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })）
+ * @event {Function} error 微信小程序：当使用开放能力时，发生错误的回调，open-type=launchApp时有效 支付宝小程序：当 open-type 为 getAuthorize 时有效。当授权失败时触发。event.detail = {type, errorMessage}，此时 type 的值为 getAuthorize。
+ * @event {Function} launchapp 微信小程序：打开 APP 成功的回调，open-type=launchApp时有效
+ * @event {Function} opensetting 微信小程序：在打开授权设置页后回调，open-type=openSetting时有效
+ * @event {Function} chooseavatar 微信小程序：获取用户头像回调，open-type=chooseAvatar时有效。返回 e.detail.avatarUrl 为头像临时文件链接。
+ * @event {Function} getAuthorize 支付宝小程序：当 open-type 为 getAuthorize 时有效。当授权成功时触发。
+ * @event {Function} followLifestyle 支付宝小程序：当 open-type 为 lifestyle 时有效。当点击按钮时触发。event.detail = { followStatus }，folllowStatus 合法值有 1、2、3，其中 1 表示已关注。2 表示用户不允许关注。3 表示发生未知错误；。
+ */
+export default {
+	group: '基础组件',
+	title: 'Button 按钮',
+	name: 'ste-button',
+	props: {
+		mode: {
+			type: [Number, String, null],
+			default: 200,
+		},
+		color: {
+			type: [String, null],
+			default: '#ffffff',
+		},
+		background: {
+			type: [String, null],
+			default: '',
+		},
+		borderColor: {
+			type: [String, null],
+			default: '',
+		},
+		width: {
+			type: [String, Number, null],
+			default: 'auto',
+		},
+		round: {
+			type: [Boolean, null],
+			default: true,
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		loading: {
+			type: [Boolean, null],
+			default: false,
+		},
+		openType: {
+			type: [String, null],
+			default: '',
+		},
+		scope: {
+			type: [String, null],
+			default: '',
+		},
+		rootStyle: {
+			type: [Object, null],
+			default: () => {},
+		},
+		stopPropagation: {
+			type: [Boolean, null],
+			default: true,
+		},
+	},
+	data() {
+		return {};
+	},
+	created() {},
+	computed: {
+		cmpBtnStyle() {
+			let style = {};
+			// 为解决支付宝动态类名时不兼容，尽量使用内联样式
+
+			// 圆角 round
+			if (this.round) {
+				style.borderRadius = utils.formatPx(48);
+			}
+
+			// 宽度 width
+			if (this.width == '100%' || this.width == 'auto') {
+				style.width = this.width;
+			} else {
+				style.width = utils.formatPx(this.width);
+			}
+
+			// 边框色 borderColor
+			if (this.borderColor) {
+				style.border = `solid ${utils.formatPx(2)}`;
+				style.borderColor = this.borderColor;
+			}
+
+			// 类型 mode
+			switch (this.mode) {
+				case 100:
+					style.padding = `0 ${utils.formatPx(30)}`;
+					style.height = utils.formatPx(48);
+					style.fontSize = '24rpx';
+					break;
+				case 300:
+					style.padding = `0 ${utils.formatPx(72)}`;
+					style.height = utils.formatPx(80);
+					style.fontSize = '32rpx';
+					break;
+				case 400:
+					style.padding = `0 ${utils.formatPx(72)}`;
+					style.height = utils.formatPx(96);
+					style.fontSize = '36rpx';
+					break;
+				default:
+					style.padding = `0 ${utils.formatPx(40)}`;
+					style.height = utils.formatPx(68);
+					style.fontSize = '28rpx';
+					break;
+			}
+
+			// 背景色 & 字体色
+			style = { ...style, ...utils.bg2style(this.background ? this.background : color.getColor().steThemeColor) };
+			style.color = this.color;
+
+			// 禁用 disabled | 加载 loading
+			// #ifdef H5
+			if (this.disabled || this.loading) {
+				style.cursor = 'not-allowed';
+			}
+			// #endif
+			if (this.disabled) {
+				style.opacity = 0.5;
+			}
+			return utils.deepMerge(style, this.rootStyle);
+		},
+	},
+	methods: {
+		handleClick(e) {
+			if (!this.disabled && !this.loading) {
+				this.$emit('click');
+			}
+		},
+		getuserinfo(e) {
+			this.$emit('getuserinfo', e);
+		},
+		contact(e) {
+			this.$emit('contact', e);
+		},
+		getphonenumber(e) {
+			this.$emit('getphonenumber', e);
+		},
+		getrealtimephonenumber(e) {
+			this.$emit('getrealtimephonenumber', e);
+		},
+		greeprivacyauthorization(e) {
+			this.$emit('greeprivacyauthorization', e);
+		},
+		error(e) {
+			this.$emit('error', e);
+		},
+		launchapp(e) {
+			this.$emit('launchapp', e);
+		},
+		opensetting(e) {
+			this.$emit('opensetting', e);
+		},
+		chooseavatar(e) {
+			this.$emit('chooseavatar', e);
+		},
+		getAuthorize(e) {
+			this.$emit('getAuthorize', e);
+		},
+		followLifestyle(e) {
+			this.$emit('followLifestyle', e);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-button--root {
+	position: relative;
+	align-items: center;
+	justify-content: center;
+	display: inline-flex;
+	flex-direction: row;
+	box-sizing: border-box;
+	flex-direction: row;
+	background-size: cover;
+	border-radius: 10rpx;
+
+	.btn-box {
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:before {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 100%;
+		height: 100%;
+		border: inherit;
+		border-radius: inherit;
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+		opacity: 0;
+		content: ' ';
+		background-color: #000;
+		border-color: #000;
+	}
+
+	&:after {
+		border: none;
+	}
+
+	&-disabled {
+		background: #666666;
+		color: #ffffff;
+
+		cursor: not-allowed;
+	}
+
+	&-loading {
+		cursor: not-allowed;
+	}
+
+	&-active {
+		&:before {
+			opacity: 0.15;
+		}
+	}
+
+	&-100 {
+		padding: 0 30rpx;
+		height: 48rpx;
+		font-size: 24rpx;
+	}
+
+	&-200 {
+		padding: 0 40rpx;
+		height: 68rpx;
+		font-size: 28rpx;
+	}
+
+	&-300 {
+		padding: 0 72rpx;
+		height: 80rpx;
+		font-size: 32rpx;
+	}
+
+	&-400 {
+		padding: 0 72rpx;
+		height: 96rpx;
+		font-size: 36rpx;
+	}
+}
+</style>

package/components/ste-calendar/README.md

@@ -0,0 +1,304 @@
+# Calendar 日历
+日历组件
+
+---$
+
+### 基础用法
+- 属性`height`用于设置日历的高度，单位为`rpx`，默认`100%`
+- 属性`showTitle`用于设置是否显示日历的标题，默认`true`
+- 属性`title`用户设置日历的标题，默认`日期选择`
+- 事件`confirm`用于监听用户点击确定按钮事件，参数为选中的日期数组
+```html
+<template>
+	<ste-calendar height="720" :showTitle="false" @confirm="handleConfirm" />
+</template>
+<script>
+	export default{
+		methods: {
+			handleConfirm(v) {
+				this.showToast({
+					title: '确定选择：' + v.join(' '),
+					icon: 'none',
+					duration: 1500,
+				});
+			},
+		},
+	}
+</script>
+```
+
+### 结合弹窗使用
+
+#### 基础使用
+```html
+<ste-button @click="show1 = true">默认(单个日期)</ste-button>
+<ste-popup :show.sync="show1" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar @confirm ="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 多个日期
+- 属性`mode`用于设置日历的模式，可选值`single`、`multiple`、`range`，默认`single`
+	- 设置为`multiple`可以选择多个日期
+```html
+<ste-button @click="show2 = true">多个日期</ste-button>
+<ste-popup :show.sync="show2" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar mode="multiple" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 日期范围
+- 属性`mode`用于设置日历的模式，可选值`single`、`multiple`、`range`，默认`single`
+	- 设置为`single`可以选择日期范围
+```html
+<ste-button @click="show2 = true">日期范围</ste-button>
+<ste-popup :show.sync="show2" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar mode="single" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 自定义主题色
+- 属性`color`可以设置日历的主题色，包括周末日期颜色、日期选中颜色、日期范围选中颜色、确定按钮颜色
+```html
+<ste-button @click="show4 = true">自定义主题色</ste-button>
+<ste-popup :show.sync="show4" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar color="#3478f6" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 自定义文案
+- 属性`title`可以设置标题文案
+- 属性`startText`可以设置开始日期的文案，`mode`值为`range`时生效
+- 属性`endText`可以设置结束日期的文案，`mode`值为`range`时生效
+```html
+<ste-button @click="show5 = true">自定义文案</ste-button>
+<ste-popup :show.sync="show5" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar mode="range" title="酒店预约" startText="住店" endText="离店" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 日期最大范围
+- 属性`minDate`可以设置日期的最小可选范围
+- 属性`maxDate`可以设置日期的最大可选范围
+
+```html
+<ste-button @click="show6 = true">日期最大范围</ste-button>
+<ste-popup :show.sync="show6" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar mode="range" minDate="2024-05-10" maxDate="2024-05-20" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 多选数量限制
+- 属性`maxCount`用于设置多选模式下最多可选的日期数量
+
+```html
+<ste-button @click="show7 = true">多选数量限制</ste-button>
+<ste-popup :show.sync="show7" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar mode="multiple" :maxCount="5" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 多选数量限制
+- 属性`maxRange`用于设置范围模式下最多可选的日期数量
+- 属性`showRangePrompt`用于设置范围模式下是否显示超出数量时的提示文案
+- 属性`rangePrompt`用于设置范围模式下超出数量时的提示文案
+
+```html
+<ste-button @click="show7 = true">范围数量限制</ste-button>
+<ste-popup :show.sync="show7" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar mode="range" :maxRange="5" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 默认选择日期
+- 属性`list`用于设置默认选择的日期
+
+```html
+<ste-button @click="show8 = true">默认选择日期</ste-button>
+<ste-popup :show.sync="show8" height="60vh" position="bottom">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar :list="[Date.now()]" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+```
+#### 默认展示月份
+- 属性`defaultDate`用于设置默认展示的日期，因为弹窗中的日历不在文档流，无法设置滚动距离，所以需要在弹窗动画结束之后手动设置默认展示的时间
+
+```html
+<ste-button @click="show9 = true">默认展示月份</ste-button>
+<ste-popup :show.sync="show9" position="bottom" height="60vh" @open-after="setViewMonth">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar ref="calendarRef" minDate="2024-05-20" maxDate="2024-12-01" @confirm="handleConfirm" />
+	</div>
+</ste-popup>
+<script>
+	export default{
+		methods: {
+			setViewMonth() {
+				this.$refs.calendarRef.showMonth('2024-07-12');
+			},
+		},
+	}
+</script>
+```
+#### 隐藏确定按钮
+- 属性`showConfirm`用于设置是否显示确定按钮
+- 事件`select`用于监听选择日期的事件
+
+```html
+<ste-button @click="show10 = true">隐藏确定按钮</ste-button>
+<ste-popup :show.sync="show10" position="bottom" height="60vh">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar minDate="2024-05-20" maxDate="2024-12-01" @select="handleConfirm" :showConfirm="false" />
+	</div>
+</ste-popup>
+```
+#### 只读
+- 属性`readonly`用于设置是否只读
+
+```html
+<ste-button @click="show11 = true">只读</ste-button>
+<ste-popup :show.sync="show11" position="bottom" height="60vh">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar minDate="2024-05-20" maxDate="2024-06-10" readonly :list="['2024-05-21']" />
+	</div>
+</ste-popup>
+```
+
+#### 隐藏背景月份
+- 属性`showMark`用于设置是否显示背景月份
+
+```html
+<ste-button @click="show12 = true">隐藏背景月份</ste-button>
+<ste-popup :show.sync="show12" position="bottom" height="60vh">
+	<div style="padding-bottom: 20px; height: 100%">
+		<ste-calendar :showMark="false" @select="handleConfirm" />
+	</div>
+</ste-popup>
+```
+
+#### 手动切换、标记
+- 属性`weekendColor`用于设置周末日期颜色
+- 属性`monthCount`用于设置渲染的月数
+- 属性`signs`用于设置标记的日期
+
+```html
+<ste-select mode="month" v-model="defaultDate" width="200" options-width="420" border-color="transparency">
+	<template v-slot:icon>
+		<ste-icon code="&#xe699;"></ste-icon>
+	</template>
+</ste-select>
+
+<ste-calendar
+	@select="handleConfirm"
+	weekendColor="#999"
+	color="#09f"
+	:signs="signs"
+	:defaultDate="defaultDate"
+	:monthCount="1"
+	:showConfirm="false"
+	:showTitle="false"
+/>
+
+<script>
+import utils from 'stellar-ui/utils/utils';
+export default{
+	data(){
+		return {
+			defaultDate: utils.dayjs().format('YYYY-MM'),
+			signs: {
+				'2024-11-12': [
+					{ content: 'XXXXX', className: 'test-signs' },
+					{ content: 'XXXXX', className: 'test-signs' },
+					{ content: 'XXXXX', className: 'test-signs' },
+				],
+				'2024-11-13': [
+					{ content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
+					{ content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
+					{ content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
+				],
+			},
+		}
+	},
+}
+</script>
+<style>
+/deep/ .test-signs {
+	color: #fff;
+	background-color: #000;
+}
+</style>
+```
+
+---$
+### API
+#### Tabs Props
+背景之外的颜色属性只支持`16进制`、`RGB`、`RGBA`格式
+| 属性名			| 说明																					| 类型			| 默认值					| 可选值														| 支持版本	|
+| -----				| -----																					| -----			| -----					| -----														| -----		|
+| `mode`			| 选择模式																				| `String`		| `"single"`			| `"single"`单选<br/>`"multiple"`多选<br/>`"range"`范围选择	| -			|
+| `title`			| 标题文本																				| `String`		| `"日期选择"`			| -															| -			|
+| `showTitle`		| 是否显示标题																			| `Boolean`		| `true`				| -															| -			|
+| `list`			| 已选中的日期																			| `Array<Date>`	| `[]`					| -															| -			|
+| `startText`		| 开始日期的提示文字，`mode`=`range`时生效													| `String`		| `[]`					| -															| -			|
+| `endText`			| 结束日期的提示文字，`mode`=`range`时生效													| `String`		| `[]`					| -															| -			|
+| `color`			| 主题颜色（选中日期背景、月份背景、当天日期颜色和确定按钮颜色）								| `String`		| `#0090FF`				| -															| -			|
+| `weekendColor`	| 周末日期颜色																			| `String`		| `#0090FF`				| -															| -			|
+| `minDate`			| 开始日期	（没有该属性的情况下，从`defaultDate`开始渲染）									| `Date`		| `0`					| -															| -			|
+| `maxDate`			| 结束日期	（没有该属性的情况下，从`minDate`或者`defaultDate`开始往后渲染`maxCount`个月）	| `Date`		| `0`					| -															| -			|
+| `defaultDate`		| 默认展示日期（不设置`minDate`和`maxDate`的情况下，列表展示从默认月份开始往后`maxCount`个月）	| `Date`		| `new Date()`			| -															| -			|
+| `monthCount`		| 渲染的月数（如果存在`maxDate`则该属性不生效）												| `Number`		| `12`					| -															| -			|
+| `maxCount`		| `mode`=`multiple`时，最多可选多少个日期													| `Number`		| `0`					| -															| -			|
+| `formatter`		| 日期格式化																				| `String`		| `"YYYY-MM-DD"`		| -															| -			|
+| `showMark`		| 是否显示月份背景色																		| `Boolean`		| `true`				| -															| -			|
+| `readonly`		| 是否为只读状态，只读状态下禁止选择日期														| `Boolean`		| `false`				| -															| -			|
+| `maxRange`		| 日期区间最多可选天数，`mode`=`range`时有效												| `Number`		| `0`					| -															| -			|
+| `rangePrompt`		| 范围选择超过最多可选天数时的提示文案														| `String`		| `"选择天数不能超过XX天"`	| -															| -			|
+| `showRangePrompt`	| 范围选择超过最多可选天数时，是否展示提示文案												| `Number`		| `0`					| -															| -			|
+| `allowSameDay`	| 是否允许日期范围的起止时间为同一天														| `Boolean`		| `true`				| -															| -			|
+| `signs`			| 标签对象（每一天的支持最多三条标签）														| `Signs`		| `true`				| -															| -			|
+
+##### Signs 示例
+```javascript
+{
+	"2024-11-21":[
+		{content:"标记1",className:"XXX"}
+		{content:"标记1",className:"XXX"}
+		{content:"标记1",className:"XXX"}
+	],
+	"2024-11-22":[
+		{content:"标记1",style:{}}
+		{content:"标记1",style:{}}
+		{content:"标记1",style:{}}
+	]
+}
+```
+
+
+#### Tabs Events
+
+| 事件名			| 说明																																| 事件参数							| 支持版本	|
+| ---					| ---																																| ---									| ---			|
+| `confirm`		| 监听用户点击确定按钮，参数为用户选中的日期列表												| `Array<Date>`				| -				|
+| `select`		| 监听用户选择日期，参数一为用户选中的日期列表，参数二为当前点击的日期	| `Array<Date>`,`Date`| -				|
+| `viewMonth`	| 监听用户滚动日历时，视图区域展示的月份变化														| `YYYY-MM`						| -				|
+
+
+---$
+{{xuyajun}}