fix(tag): 修订样式 (#3425)

xiaoyatong · web-flow · commit 7f231a2ee526 · 2026-03-06T17:10:39.000+08:00
* fix(tag): 修订样式

* fix(test): 修订单测

* fix(tag): 改用原样式变量

* fix: 修改github test异常

* fix(test): 修订单测
diff --git a/package.json b/package.json
@@ -163,7 +163,7 @@
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^2.0.4",
+    "@vitest/coverage-v8": "^3.0.7",
     "@vitest/ui": "^2.0.4",
     "autoprefixer": "^10.4.17",
     "axios": "^1.6.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap
diff --git a/src/packages/cell/__test__/__snapshots__/cell.spec.tsx.snap b/src/packages/cell/__test__/__snapshots__/cell.spec.tsx.snap
@@ -99,7 +99,11 @@ exports[`slot extra 1`] = `
       class="nut-cell-extra"
     >
       <div
+        aria-checked="true"
+        aria-disabled="false"
         class="nut-switch"
+        role="switch"
+        tabindex="0"
       >
         <div
           class="nut-switch-button nut-switch-button-open"
diff --git a/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="nut-checkbox nut-checkbox-reverse"
+    class="nut-checkbox nut-checkbox-reverse nut-checkbox-active"
   >
     <div
       class="nut-checkbox-icon-wrap"
diff --git a/src/packages/skeleton/__test__/__snapshots__/skeleton.spec.tsx.snap b/src/packages/skeleton/__test__/__snapshots__/skeleton.spec.tsx.snap
diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss
@@ -30,7 +30,7 @@
   }
 
   &-primary {
-    background: #fa2c19;
+    background: $tag-primary-background-color;
   }
 
   &-info {
diff --git a/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap b/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`timeselect props test 1`] = `"<div><div class="nut-overlay" style="z-index: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-wrapper"><div class="nut-popup-title-title">取件时间</div></div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M512 557.23 783.57 828.8c8.32 8.32 21.76 8.32 30.3 0l14.93-14.93c8.32-8.32 8.32-21.76 0-30.3L557.23 512 828.8 240.43c8.32-8.32 8.32-21.76 0-30.3l-14.93-14.93c-8.32-8.32-21.76-8.32-30.3 0L512 466.77 240.43 195.2c-8.32-8.32-21.76-8.32-30.3 0l-14.93 14.93c-8.32 8.32-8.32 21.76 0 30.3L466.77 512 195.2 783.57c-8.32 8.32-8.32 21.76 0 30.3l14.93 14.93c8.32 8.32 21.76 8.32 30.3 0z" fill="currentColor"></path></svg></div></div><div class="nut-timeselect"><div class="nut-timeselect-content"><div class="nut-timeselect-content-left"><div class="nut-timepannel active">520</div><div class="nut-timepannel">521</div></div><div class="nut-timedetail"><span class="nut-timedetail-item">09:00-10:00</span><span class="nut-timedetail-item">10:00-11:00</span><span class="nut-timedetail-item">11:00-12:00</span></div></div></div></div></div>"`;
+exports[`timeselect props test 1`] = `"<div><div class="nut-overlay" style="z-index: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-wrapper"><div class="nut-popup-title-title">取件时间</div></div><div class="nut-popup-title-right nut-popup-title-right-top-right" role="button" aria-label="关闭" tabindex="-1"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M512 557.23 783.57 828.8c8.32 8.32 21.76 8.32 30.3 0l14.93-14.93c8.32-8.32 8.32-21.76 0-30.3L557.23 512 828.8 240.43c8.32-8.32 8.32-21.76 0-30.3l-14.93-14.93c-8.32-8.32-21.76-8.32-30.3 0L512 466.77 240.43 195.2c-8.32-8.32-21.76-8.32-30.3 0l-14.93 14.93c-8.32 8.32-8.32 21.76 0 30.3L466.77 512 195.2 783.57c-8.32 8.32-8.32 21.76 0 30.3l14.93 14.93c8.32 8.32 21.76 8.32 30.3 0z" fill="currentColor"></path></svg></div></div><div class="nut-timeselect"><div class="nut-timeselect-content"><div class="nut-timeselect-content-left"><div class="nut-timepannel active">520</div><div class="nut-timepannel">521</div></div><div class="nut-timedetail"><span class="nut-timedetail-item">09:00-10:00</span><span class="nut-timedetail-item">10:00-11:00</span><span class="nut-timedetail-item">11:00-12:00</span></div></div></div></div></div>"`;
diff --git a/src/packages/uploader/__tests__/uploader.spec.tsx b/src/packages/uploader/__tests__/uploader.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import { Uploader } from '../uploader'
@@ -275,9 +275,12 @@ test('simulates single file upload', async () => {
   })
   const input: any = container.querySelector('input')
 
-  await fireEvent.change(input, { target: { files: [file] } })
-
-  expect(handleUpload).toHaveBeenCalledTimes(1)
+  await act(async () => {
+    fireEvent.change(input, { target: { files: [file] } })
+  })
+  await waitFor(() => {
+    expect(handleUpload).toHaveBeenCalledTimes(1)
+  })
   expect(handleUpload).toHaveBeenCalledWith(file)
 })
 test('simulates single file upload fail', async () => {
@@ -292,9 +295,12 @@ test('simulates single file upload fail', async () => {
   })
   const input: any = container.querySelector('input')
 
-  await fireEvent.change(input, { target: { files: [file] } })
-
-  expect(handleUpload).toHaveBeenCalledTimes(1)
+  await act(async () => {
+    fireEvent.change(input, { target: { files: [file] } })
+  })
+  await waitFor(() => {
+    expect(handleUpload).toHaveBeenCalledTimes(1)
+  })
   expect(handleUpload).toHaveBeenCalledWith(file)
   await expect(handleUpload()).rejects.toThrow('Upload failed')
 })
@@ -321,9 +327,12 @@ test('simulates multiple file upload', async () => {
   const files = [file1, file2, file3]
   const input: any = container.querySelector('input')
 
-  await fireEvent.change(input, { target: { files } })
-
-  expect(handleUpload).toHaveBeenCalledTimes(2)
+  await act(async () => {
+    fireEvent.change(input, { target: { files } })
+  })
+  await waitFor(() => {
+    expect(handleUpload).toHaveBeenCalledTimes(2)
+  })
   expect(handleOverCount).toHaveBeenCalledTimes(1)
   expect(handleOverCount).toHaveBeenCalledWith(3)
 })
@@ -350,9 +359,13 @@ test('simulates file upload when autoupload is false', async () => {
   })
   const files = [file1, file2, file3]
   const input: any = container.querySelector('input')
-  await fireEvent.change(input, { target: { files } })
+  await act(async () => {
+    fireEvent.change(input, { target: { files } })
+  })
+  await waitFor(() => {
+    expect(handleOverCount).toHaveBeenCalledTimes(1)
+  })
   expect(handleUpload).toHaveBeenCalledTimes(0)
-  expect(handleOverCount).toHaveBeenCalledTimes(1)
   expect(handleOverCount).toHaveBeenCalledWith(3)
 })
 test('should render button', () => {
@@ -521,18 +534,30 @@ test('should handle beforeUpload function', async () => {
   const input: any = container.querySelector('input')
 
   // 测试单个 PNG 文件上传
-  await fireEvent.change(input, { target: { files: [pngFile] } })
-  expect(beforeUpload).toHaveBeenCalledTimes(1)
+  await act(async () => {
+    fireEvent.change(input, { target: { files: [pngFile] } })
+  })
+  await waitFor(() => {
+    expect(beforeUpload).toHaveBeenCalledTimes(1)
+  })
   expect(handleUpload).toHaveBeenCalledWith(pngFile)
 
   // 测试单个 JPG 文件被过滤
-  await fireEvent.change(input, { target: { files: [jpgFile] } })
-  expect(beforeUpload).toHaveBeenCalledTimes(2)
+  await act(async () => {
+    fireEvent.change(input, { target: { files: [jpgFile] } })
+  })
+  await waitFor(() => {
+    expect(beforeUpload).toHaveBeenCalledTimes(2)
+  })
   expect(handleUpload).not.toHaveBeenCalledWith(jpgFile)
 
   // 测试多文件上传时的过滤
-  await fireEvent.change(input, { target: { files: [pngFile, jpgFile] } })
-  expect(beforeUpload).toHaveBeenCalledTimes(3)
+  await act(async () => {
+    fireEvent.change(input, { target: { files: [pngFile, jpgFile] } })
+  })
+  await waitFor(() => {
+    expect(beforeUpload).toHaveBeenCalledTimes(3)
+  })
   expect(handleUpload).toHaveBeenCalledTimes(2) // 只有 PNG 文件被上传
 })
 
@@ -552,8 +577,11 @@ test('should handle beforeUpload returning empty array', async () => {
   })
 
   const input: any = container.querySelector('input')
-  await fireEvent.change(input, { target: { files: [file] } })
-
-  expect(beforeUpload).toHaveBeenCalled()
+  await act(async () => {
+    fireEvent.change(input, { target: { files: [file] } })
+  })
+  await waitFor(() => {
+    expect(beforeUpload).toHaveBeenCalled()
+  })
   expect(handleUpload).not.toHaveBeenCalled()
 })

Original file line number	Diff line number	Diff line change
@@ -99,7 +99,11 @@ exports[`slot extra 1`] = `
`99`	`99`	`class="nut-cell-extra"`
`100`	`100`	`>`
`101`	`101`	`<div`
	`102`	`+ aria-checked="true"`
	`103`	`+ aria-disabled="false"`
`102`	`104`	`class="nut-switch"`
	`105`	`+ role="switch"`
	`106`	`+ tabindex="0"`
`103`	`107`	`>`
`104`	`108`	`<div`
`105`	`109`	`class="nut-switch-button nut-switch-button-open"`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	exports[`should match snapshot 1`] = `
`4`	`4`	`<DocumentFragment>`
`5`	`5`	`<div`
`6`		`- class="nut-checkbox nut-checkbox-reverse"`
	`6`	`+ class="nut-checkbox nut-checkbox-reverse nut-checkbox-active"`
`7`	`7`	`>`
`8`	`8`	`<div`
`9`	`9`	`class="nut-checkbox-icon-wrap"`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`&-primary {`
`33`		`- background: #fa2c19;`
	`33`	`+ background: $tag-primary-background-color;`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`&-info {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html`
`2`	`2`
`3`		-exports[`timeselect props test 1`] = `"<div><div class="nut-overlay" style="z-index: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-wrapper"><div class="nut-popup-title-title">取件时间</div></div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M512 557.23 783.57 828.8c8.32 8.32 21.76 8.32 30.3 0l14.93-14.93c8.32-8.32 8.32-21.76 0-30.3L557.23 512 828.8 240.43c8.32-8.32 8.32-21.76 0-30.3l-14.93-14.93c-8.32-8.32-21.76-8.32-30.3 0L512 466.77 240.43 195.2c-8.32-8.32-21.76-8.32-30.3 0l-14.93 14.93c-8.32 8.32-8.32 21.76 0 30.3L466.77 512 195.2 783.57c-8.32 8.32-8.32 21.76 0 30.3l14.93 14.93c8.32 8.32 21.76 8.32 30.3 0z" fill="currentColor"></path></svg></div></div><div class="nut-timeselect"><div class="nut-timeselect-content"><div class="nut-timeselect-content-left"><div class="nut-timepannel active">520</div><div class="nut-timepannel">521</div></div><div class="nut-timedetail"><span class="nut-timedetail-item">09:00-10:00</span><span class="nut-timedetail-item">10:00-11:00</span><span class="nut-timedetail-item">11:00-12:00</span></div></div></div></div></div>"`;
	`3`	+exports[`timeselect props test 1`] = `"<div><div class="nut-overlay" style="z-index: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-wrapper"><div class="nut-popup-title-title">取件时间</div></div><div class="nut-popup-title-right nut-popup-title-right-top-right" role="button" aria-label="关闭" tabindex="-1"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M512 557.23 783.57 828.8c8.32 8.32 21.76 8.32 30.3 0l14.93-14.93c8.32-8.32 8.32-21.76 0-30.3L557.23 512 828.8 240.43c8.32-8.32 8.32-21.76 0-30.3l-14.93-14.93c-8.32-8.32-21.76-8.32-30.3 0L512 466.77 240.43 195.2c-8.32-8.32-21.76-8.32-30.3 0l-14.93 14.93c-8.32 8.32-8.32 21.76 0 30.3L466.77 512 195.2 783.57c-8.32 8.32-8.32 21.76 0 30.3l14.93 14.93c8.32 8.32 21.76 8.32 30.3 0z" fill="currentColor"></path></svg></div></div><div class="nut-timeselect"><div class="nut-timeselect-content"><div class="nut-timeselect-content-left"><div class="nut-timepannel active">520</div><div class="nut-timepannel">521</div></div><div class="nut-timedetail"><span class="nut-timedetail-item">09:00-10:00</span><span class="nut-timedetail-item">10:00-11:00</span><span class="nut-timedetail-item">11:00-12:00</span></div></div></div></div></div>"`;