feat(components): add card component

[yzh990918]

No description provided.

[netlify]

✅ Deploy Preview for idyllic-kitten-f7a0d0 ready!

Name	Link
🔨 Latest commit	fbcc125
🔍 Latest deploy log	https://app.netlify.com/sites/idyllic-kitten-f7a0d0/deploys/6309079ab8fe7d0008551b70
😎 Deploy Preview	https://deploy-preview-25--idyllic-kitten-f7a0d0.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[yzh990918]

目前好像只有o-card被打包进了style.css， o-card-bordered 没打进去

[zyyv]

目前好像只有o-card被打包进了style.css， o-card-bordered 没打进去

大佬 我更倾向于sfc 我们可以统一风格吗😭

[yzh990918]

目前好像只有o-card被打包进了style.css， o-card-bordered 没打进去

大佬 我更倾向于sfc 我们可以统一风格吗😭

😂可以先看看那个unocss打包的问题，另外sfc和tsx，感觉组件还是写tsx方便些，setup script 的 defineProps 定义时引入声明的interface或者type会有打包的坑，好像官方还没解决。支持两种写法都OK的啦

[zyyv]

是因为在组件中，使用了动态类。unocss 没有提取到相关的 token 用于生成css。所以我一般在文件中都写全称。如果使用动态类，就得提前放进 safelist

就必须让 unocss 知道你要生成的 css

onu-ui/packages/components/switch/src/index.vue

Lines 120 to 139 in 7db528f

	const sizeMap = {
	small: 'o-switch-size-small',
	medium: 'o-switch-size-medium',
	large: 'o-switch-size-large',
	}
	const sizeCircleMap = {
	small: 'o-switch-size-small-circle',
	medium: 'o-switch-size-medium-circle',
	large: 'o-switch-size-large-circle',
	}
	const sizeSlotCheckMap = {
	small: 'o-switch-small-slot-check',
	medium: 'o-switch-medium-slot-check',
	large: 'o-switch-large-slot-check',
	}
	const sizeSlotUncheckMap = {
	small: 'o-switch-small-slot-uncheck',
	medium: 'o-switch-medium-slot-uncheck',
	large: 'o-switch-large-slot-uncheck',
	}

或者 添加进 safelist

onu-ui/packages/components/unocss.config.ts

Line 11 in 7db528f

safelist: [['xs', 'sm', 'md', 'lg'].map(s => [`o-button-${s}`, `o-avatar-${s}`, `o-avatar-group-${s}`])].flat(2) as string[],

[yzh990918]

是因为在组件中，使用了动态类。unocss 没有提取到相关的 token 用于生成css。所以我一般在文件中都写全称。如果使用动态类，就得提前放进 safelist

就必须让 unocss 知道你要生成的 css

onu-ui/packages/components/switch/src/index.vue

Lines 120 to 139 in 7db528f

	const sizeMap = {
	small: 'o-switch-size-small',
	medium: 'o-switch-size-medium',
	large: 'o-switch-size-large',
	}
	const sizeCircleMap = {
	small: 'o-switch-size-small-circle',
	medium: 'o-switch-size-medium-circle',
	large: 'o-switch-size-large-circle',
	}
	const sizeSlotCheckMap = {
	small: 'o-switch-small-slot-check',
	medium: 'o-switch-medium-slot-check',
	large: 'o-switch-large-slot-check',
	}
	const sizeSlotUncheckMap = {
	small: 'o-switch-small-slot-uncheck',
	medium: 'o-switch-medium-slot-uncheck',
	large: 'o-switch-large-slot-uncheck',
	}

或者 添加进 safelist

onu-ui/packages/components/unocss.config.ts

Line 11 in 7db528f

safelist: [['xs', 'sm', 'md', 'lg'].map(s => [`o-button-${s}`, `o-avatar-${s}`, `o-avatar-group-${s}`])].flat(2) as string[],

好的 我把组件替换成SFC再提交