feat(calendar-view): [calendar-view] Adapting to the SMB themes (#2031)

* feat(calendar-view): [calendar-view] Adapting to SMB themes

* feat(calendar-view): [calendar-view] Adapting to the SMB theme

* feat(calendar-view): [calendar-view] Adapting to the SMB theme

* feat(calendar-view): [calendar-view] Adapting to the SMB theme

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

@@ -3,27 +3,27 @@ import { test, expect } from '@playwright/test'
 test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-event')
-  const timeInput = page.locator('.tiny-filter-box').locator('.value')
-  const timeBtn = page.getByText('2023 年 05 月')
+  const timeInput = page.locator('.tiny-calendar-view').locator('.tiny-input__inner')
+  const timeBtn = page.getByRole('textbox', { name: '年 05 月' })
   const leftYear = page.getByRole('button', { name: '前一年' })
   const month6 = page.getByText('六月')
   const leftSvg = page.locator('.header-left > .tiny-svg')
   const rightSvg = page.locator('.header-right > .tiny-svg')
   const mode = page.locator('label').nth(2)
-  const modalVal = page.getByText('模式切换事件: timeline')
+  const modalVal = page.getByText('模式切换事件: schedule')
   await timeBtn.click()
   await page.waitForTimeout(100)
   await leftYear.click()
   await page.waitForTimeout(100)
   await month6.click()
   await page.waitForTimeout(100)
-  await expect(timeInput).toHaveText('2022 年 06 月')
+  await expect(timeInput).toHaveAttribute('title', '2022 年 06 月')
   await leftSvg.click()
   await page.waitForTimeout(100)
-  await expect(timeInput).toHaveText('2022 年 05 月')
+  await expect(timeInput).toHaveAttribute('title', '2022 年 05 月')
   await rightSvg.click()
   await page.waitForTimeout(100)
-  await expect(timeInput).toHaveText('2022 年 06 月')
+  await expect(timeInput).toHaveAttribute('title', '2022 年 06 月')
   await mode.click()
   await page.waitForTimeout(100)
   await expect(modalVal).toBeVisible()

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

@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test('显示模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-mode')
-  const monthBtn = page.locator('label').nth(1)
-  const timelineBtn = page.locator('label').nth(2)
-  const scheduleBtn = page.locator('label').nth(3)
+  const monthBtn = page.getByLabel('示例', { exact: true }).locator('label').first()
+  const timelineBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(1)
+  const scheduleBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(2)
   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')

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

@@ -5,7 +5,7 @@ test('自定义头部显示', async ({ page }) => {
   await page.goto('calendar-view#custom-header')
 
   const demo = page.locator('#custom-header')
-  const timelineBtn = demo.locator('label').nth(3)
+  const timelineBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(2)
   const customHeader = demo.getByText('2023-5-3 周三')
   await timelineBtn.click()
   await page.waitForTimeout(200)

packages/theme/src/calendar-view/index.less

@@ -675,18 +675,18 @@
       margin-bottom: 6px;
       border-left-width: 2px;
       border-left-color: #1890ff;
+      font-weight: var(--ti-calendar-view-tooltip-title-font-weight);
     }
 
     .date{
       margin-bottom: 6px;
       padding: 0 8px;
-      color: #8d959e;
-      font-weight: var(--ti-calendar-view-tooltip-title-font-weight);
+      color: var(--ti-calendar-view-tooltip-date-text-color, #8d959e);
     }
 
     .content{
       padding: 0 8px;
-      color: var(--ti-calendar-view-tooltip-content-color);
+      color: var(--ti-calendar-view-tooltip-content-text-color, #8d959e);
     }
   }
 }

packages/theme/src/calendar-view/smb-theme.js

@@ -21,8 +21,8 @@ export const tinyCalendarViewSmbTheme = {
   'ti-calendar-view-header-main-text-color': 'var(--ti-common-color-text-weaken)',
   'ti-calendar-view-tooltip-title-font-size': 'var(--ti-common-font-size-2)',
   'ti-calendar-view-tooltip-title-font-weight': 'var(--ti-common-font-weight-bold)',
-  'ti-calendar-view-tooltip-content-color': 'var(--ti-common-color-text-primary)',
-  'ti-calendar-view-tooltip-date-color': 'var(--ti-common-color-text-secondary)',
+  'ti-calendar-view-tooltip-content-text-color': 'var(--ti-common-color-text-primary)',
+  'ti-calendar-view-tooltip-date-text-color': 'var(--ti-common-color-text-secondary)',
   'ti-calendar-view-day-selected-border-radius': 'unset',
   'ti-calendar-view-day-selected-svg-right': 'unset',
   'ti-calendar-view-day-selected-svg-top': 'unset',

packages/theme/src/calendar-view/vars.less

@@ -29,8 +29,8 @@
     // 提示
     --ti-calendar-view-tooltip-title-font-size: var(--ti-common-font-size-base);
     --ti-calendar-view-tooltip-title-font-weight: var(--ti-common-font-weight-5);
-    --ti-calendar-view-tooltip-date-color: #8d959e;
-    --ti-calendar-view-tooltip-content-color: #8d959e;
+    --ti-calendar-view-tooltip-date-text-color: #8d959e;
+    --ti-calendar-view-tooltip-content-text-color: #8d959e;
     // 箭头
     --ti-calendar-view-header-left-svg-fill: unset;
     --ti-calendar-view-header-right-svg-fill: unset;

packages/theme/src/theme.config.js

@@ -31,6 +31,7 @@ export default {
   'color-select-panel': 'color-select-panel',
   'color-picker': 'color-picker',
   'calendar-view': 'calendar-view',
+  'calendar-view-tooltip': 'calendar-view-tooltip',
   'detail-page': 'detail-page',
   'dialog-box': 'dialog-box__wrapper',
   'dropdown-item': 'dropdown-item',

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

@@ -8,7 +8,6 @@
       <tiny-date-picker
         v-model="state.currentDate"
         class="tiny-calendar-view__picker"
-        shape="filter"
         type="month"
         :clearable="false"
         @change="currentDateChange"
@@ -60,8 +59,8 @@
                   day.isLast || day.isNext
                     ? 'is-next-or-last'
                     : isToday(day) || isSelectedDate(day)
-                      ? 'is-selected'
-                      : '',
+                    ? 'is-selected'
+                    : '',
                   day.disabled ? 'is-disabled' : ''
                 ]"
               >