fix(calendar-view): [calendar-view]add attributes (#3525)

examples/sites/demos/apis/calendar-view.js

@@ -195,9 +195,10 @@ export default {
             'en-US': 'Should the upper left button be displayed, Default Display'
           },
           meta: {
-            stable: '3.22.0'
+            stable: '3.25.0'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-mode',
           mfDemo: 'calendar-mode'
         }
       ],

examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="6"
+    :modes="['month', 'timeline', 'schedule']"
+    :show-back-today="false"
+  >
   </tiny-calendar-view>
 </template>
 

examples/sites/demos/pc/app/calendar-view/calendar-mode.spec.ts

@@ -9,6 +9,9 @@ test('显示模式', async ({ page }) => {
   const dmonthDom = page.locator('.tiny-calendar-view-month__main')
   const timelineDom = page.locator('.tiny-calendar-view-week__timeline')
   const scheduleDom = page.locator('.tiny-calendar-view-week__schedule')
+
+  const calendarHeader = page.locator('.tiny-calendar-view__header')
+  await expect(calendarHeader.locator('div').first()).not.toHaveClass('.tiny-button .tiny-button--default')
   // 验证按钮是否选中，验证时间组件页面是否正确
   await expect(monthBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
   await expect(dmonthDom).toBeVisible()

examples/sites/demos/pc/app/calendar-view/calendar-mode.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="6"
+    :modes="['month', 'timeline', 'schedule']"
+    :show-back-today="false"
+  >
   </tiny-calendar-view>
 </template>
 

packages/vue/src/calendar-view/src/pc.vue

@@ -2,7 +2,7 @@
   <div class="tiny-calendar-view" :style="{ 'height': typeof height === 'number' ? height + 'px' : height }">
     <div class="tiny-calendar-view__header">
       <div>
-        <tiny-button @click="toToday">{{ t('ui.calendarView.backToday') }}</tiny-button>
+        <tiny-button v-if="showBackToday" @click="toToday">{{ t('ui.calendarView.backToday') }}</tiny-button>
       </div>
       <tiny-date-picker
         v-model="state.currentDate"
@@ -123,9 +123,11 @@
                   :class="[date.value.split('-')[2] > 9 ? 'is-two-digit' : '', markColor ? `mark-${markColor}` : '']"
                 ></span>
               </span>
-              <span class="week-day" :class="[dateIsToday(date.value) && 'is-today', { current: computedSelectDay(date) }]">{{
-                dateIsToday(date.value) ? t('ui.datepicker.today') : t(`ui.calendarView.weekDays.${index}`)
-              }}</span>
+              <span
+                class="week-day"
+                :class="[dateIsToday(date.value) && 'is-today', { current: computedSelectDay(date) }]"
+                >{{ dateIsToday(date.value) ? t('ui.datepicker.today') : t(`ui.calendarView.weekDays.${index}`) }}</span
+              >
             </slot>
           </li>
         </ul>
@@ -285,6 +287,7 @@ export default defineComponent({
     'height',
     'markColor',
     'multiSelect',
+    'showBackToday',
     'showTipTime'
   ],
   setup(props, context) {