fix:修复面板初始宽度过窄，以及英文状态下月份显示

Author: discreted66

examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts

@@ -10,18 +10,18 @@ test('[DatePanel] 测试月份/年份/日期选择', async ({ page }) => {
 
   // 选择年份展示月份面板
   await page.getByRole('cell', { name: '2025' }).first().click()
-  await expect(page.getByRole('cell', { name: '一月', exact: true }).first()).toBeVisible()
+  await expect(page.getByRole('cell', { name: '1 月', exact: true }).first()).toBeVisible()
 
   // 选择月份展示日期面板
-  await page.getByRole('cell', { name: '一月', exact: true }).first().click()
+  await page.getByRole('cell', { name: '1 月', exact: true }).first().click()
   await expect(page.getByRole('cell', { name: '15' }).locator('div').first()).toBeVisible()
 
   // 选择日期
   await page.getByText('16').first().click()
   await expect(page.locator('.value')).toHaveText('2025-01-16')
 
   // 月份面板
-  await page.getByText('七月').first().click()
+  await page.getByText('7 月').first().click()
   await expect(page.locator('.month')).toHaveText('2025-07')
 
   // 年份面板
@@ -35,8 +35,8 @@ test('[DatePanel] 测试月份/年份/日期选择', async ({ page }) => {
   await expect(page.locator('.value1')).toHaveText('[ "2024-12-19", "2024-12-28" ]')
 
   // monthRange
-  await page.getByText('七月').nth(1).click()
-  await page.getByText('六月').nth(2).click()
+  await page.getByText('7 月').nth(1).click()
+  await page.getByText('6 月').nth(2).click()
   await expect(page.locator('.value2')).toHaveText('[ "2024-07", "2025-06" ]')
 
   // yearRange

examples/sites/demos/pc/app/date-panel/custom-week.spec.ts

@@ -8,7 +8,7 @@ test('[DatePanel] 测试周次序号', async ({ page }) => {
   // 选择年份月份日期
   await page.getByRole('button', { name: '2025 年' }).click()
   await page.getByText('2026').click()
-  await page.getByText('三月').click()
+  await page.getByText('3 月').click()
   await expect(page.getByText('12w')).toBeVisible()
 
   // 选择下个月

examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts

@@ -19,8 +19,8 @@ test('[DatePanel] 测试时间禁用', async ({ page }) => {
     .filter({ hasText: /^2025 年6 月$/ })
     .getByLabel('前一年')
     .click()
-  await page.getByText('一月', { exact: true }).first().click()
-  await page.getByText('六月').first().click()
+  await page.getByText('1 月', { exact: true }).first().click()
+  await page.getByText('6 月').first().click()
   await expect(page.locator('.month')).toHaveText('2024-06')
 
   // 年份面板
@@ -43,9 +43,9 @@ test('[DatePanel] 测试时间禁用', async ({ page }) => {
   await expect(page.locator('.value1')).toHaveText('[ "2025-02-15", "2025-02-19" ]')
 
   // monthRange
-  await page.getByText('一月', { exact: true }).nth(1).click()
-  await page.getByText('二月', { exact: true }).nth(1).click()
-  await page.getByText('五月').nth(2).click()
+  await page.getByText('1 月', { exact: true }).nth(1).click()
+  await page.getByText('2 月', { exact: true }).nth(1).click()
+  await page.getByText('5 月').nth(2).click()
   await expect(page.locator('.value2')).toHaveText('[ "2024-02", "2025-05" ]')
 
   // yearRange

examples/sites/demos/pc/app/date-panel/event.spec.ts

@@ -10,7 +10,7 @@ test('[DatePanel] 测试事件', async ({ page }) => {
 
   // 月份面板
   await page.waitForTimeout(1000)
-  await page.getByText('七月').first().click()
+  await page.getByText('7 月').first().click()
   await expect(page.getByText('触发 月份面板选中 事件，组件绑定值为：2025-')).toBeVisible()
 
   // 年份面板
@@ -26,8 +26,8 @@ test('[DatePanel] 测试事件', async ({ page }) => {
 
   // monthRange
   await page.waitForTimeout(1000)
-  await page.locator('#event').getByText('七月').nth(2).click()
-  await page.locator('#event').getByText('五月').nth(2).click()
+  await page.locator('#event').getByText('7 月').nth(2).click()
+  await page.locator('#event').getByText('5 月').nth(2).click()
   await expect(page.getByText('触发 月份区间面板选中 事件，组件绑定值为：2025-05,2025-')).toBeVisible()
 
   // yearRange

examples/sites/demos/pc/app/date-panel/format.spec.ts

@@ -13,7 +13,7 @@ test('[DatePanel] 测试格式化', async ({ page }) => {
   await expect(page.locator('.value1')).toHaveText('[ "2025/01/28", "2025/02/12" ]')
 
   // monthRange
-  await page.locator('#format').getByText('三月').first().click()
-  await page.locator('#format').getByText('五月').nth(1).click()
+  await page.locator('#format').getByText('3 月').first().click()
+  await page.locator('#format').getByText('5 月').nth(1).click()
   await expect(page.locator('.value2')).toHaveText('[ "2024/03", "2025/05" ]')
 })

examples/sites/demos/pc/app/date-panel/readonly.spec.ts

@@ -13,7 +13,7 @@ test('[DatePanel] 测试只读', async ({ page }) => {
   await expect(page.locator('.value')).toHaveText('2025-01-15')
 
   // 月份面板
-  await page.getByText('七月').first().click()
+  await page.getByText('7 月').first().click()
   await expect(page.locator('.month')).toHaveText('2025-01')
 
   // 年份面板
@@ -26,8 +26,8 @@ test('[DatePanel] 测试只读', async ({ page }) => {
   await expect(page.locator('.value1')).toHaveText('[ "2025-01-15", "2025-02-15" ]')
 
   // monthRange
-  await page.getByText('二月').first().click()
-  await page.getByText('九月').nth(1).click()
+  await page.getByText('2 月').first().click()
+  await page.getByText('9 月').nth(1).click()
   await expect(page.locator('.value2')).toHaveText('[ "2024-03", "2025-02" ]')
 
   // yearRange

examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts

@@ -27,8 +27,8 @@ test('[DatePanel] 测试范围选择取消面板联动', async ({ page }) => {
   await page.getByText('2023 年').click()
   await expect(page.getByText('2023 年')).toBeVisible()
   // 联动
-  await page.getByText('一月', { exact: true }).first().click()
-  await page.getByText('六月').nth(1).click()
+  await page.getByText('1 月', { exact: true }).first().click()
+  await page.getByText('6 月').nth(1).click()
   await expect(page.locator('.value-link1')).toHaveText('[ "2023-01", "2024-06" ]')
 
   // 不联动
@@ -43,8 +43,8 @@ test('[DatePanel] 测试范围选择取消面板联动', async ({ page }) => {
       '.tiny-month-range > .tiny-picker-panel__body-wrapper > .tiny-picker-panel__body > div:nth-child(2) > .tiny-date-range-picker__header > button:nth-child(2)'
     )
     .click()
-  await page.getByText('六月').nth(2).click()
-  await page.getByText('五月').nth(3).click()
+  await page.getByText('6 月').nth(2).click()
+  await page.getByText('5 月').nth(3).click()
   await expect(page.locator('.value-unlink1')).toHaveText('[ "2023-06", "2025-05" ]')
 
   // yaerRange

examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts

@@ -62,15 +62,15 @@ test('[DatePicker] 测试月份/年份选择', async ({ page }) => {
   // 选择月份
   await dateInput.click()
   await page.getByRole('button', { name: '4 月' }).click()
-  await page.getByRole('cell', { name: '六月' }).locator('a').click()
+  await page.getByRole('cell', { name: '6 月' }).locator('a').click()
   await page.getByRole('rowgroup').getByText('4').first().click()
   await expect(dateInput).toHaveValue('2023-06-04')
 
   // 选择年份
   await dateInput.click()
   await page.getByRole('button', { name: '2023 年' }).click()
   await page.getByRole('cell', { name: '2024' }).getByText('2024').click()
-  await page.getByRole('cell', { name: '二月', exact: true }).locator('a').click()
+  await page.getByRole('cell', { name: '2 月', exact: true }).locator('a').click()
   await page.getByRole('rowgroup').getByText('7').first().click()
   await expect(dateInput).toHaveValue('2024-02-07')
 })

examples/sites/demos/pc/app/date-picker/date-range.spec.ts

@@ -65,17 +65,17 @@ test('测试日期范围选择', async ({ page }) => {
   // 月份范围
   const startMonth = page.getByPlaceholder('开始月份')
   const endMonth = page.getByPlaceholder('结束月份')
-  await startMonth.click()
+  await startMonth.first().click()
   await page.waitForTimeout(100)
   await startMonth.fill('2023-05')
   await startMonth.press('Tab')
   await endMonth.fill('2023-06')
   await endMonth.press('Enter')
   await startMonth.click()
   await page.waitForTimeout(100)
-  await page.getByText('一月').first().click()
+  await page.getByText('1 月').first().click()
   await page.waitForTimeout(100)
-  await page.getByText('十二月').first().click()
+  await page.getByText('12 月').first().click()
   await page.waitForTimeout(100)
   await expect(startMonth).toHaveValue('2023-01')
   await expect(endMonth).toHaveValue('2023-12')

packages/theme/src/date-panel/vars.less

@@ -21,7 +21,7 @@
   --tv-DatePanel-line-height: var(--tv-line-height-number, 1.5);
 
   // 面板宽度(默认)
-  --tv-DatePanel-width: 284px;
+  --tv-DatePanel-width: 360px;
   // 面板背景色
   --tv-DatePanel-bg-color: var(--tv-color-bg-2, #ffffff);
 

packages/vue/src/month-table/src/pc.vue

@@ -15,7 +15,7 @@
       <tr v-for="(row, key) in state.rows" :key="key">
         <td v-for="(cell, key) in row" :class="getCellStyle(cell)" :key="key">
           <div>
-            <a class="cell" v-text="t('ui.datepicker.months.' + state.months[cell.text])"></a>
+            <a class="cell" v-text="t(`ui.datepicker.month${cell.text + 1}`)"></a>
           </div>
         </td>
       </tr>