refactor(component): 重命名组件前缀从Nova到Coi

- 重命名 NovaIcon 组件为 CoiIcon
- 重命名 NovaEmpty 组件为 CoiEmpty
- 重命名 NovaDialog 组件为 CoiDialog
- 更新组件内部命名规范,包括CSS类名、事件名和方法名
- 保持组件功能和API不变,仅调整命名规范

BREAKING CHANGE: 组件名称变更需要更新导入和使用方式
This commit is contained in:
Leo 2025-07-07 15:52:37 +08:00
parent 3d39ef37e2
commit d71fd44a8a
3 changed files with 117 additions and 103 deletions

View File

@ -1,8 +1,8 @@
<template>
<n-modal
v-model:show="visible"
:mask-closable="false"
:close-on-esc="false"
:mask-closable="maskClosable"
:close-on-esc="closeOnEsc"
:auto-focus="autoFocus"
preset="card"
:loading="confirmLoading"
@ -10,16 +10,16 @@
:style="{
width: typeof width === 'number' ? `${width}px` : width,
}"
class="nova-dialog"
class="coi-dialog"
@close="handleClose"
>
<!-- 头部插槽 -->
<template #header>
<div v-if="$slots.header" class="nova-dialog-custom-header">
<div v-if="$slots.header" class="coi-dialog-custom-header">
<slot name="header" />
</div>
<div v-else class="nova-dialog-header">
<div class="nova-dialog-title">
<div v-else class="coi-dialog-header">
<div class="coi-dialog-title">
{{ title }}
</div>
</div>
@ -27,7 +27,7 @@
<!-- 内容区域 -->
<div
class="nova-dialog-content"
class="coi-dialog-content"
:style="{
height: fullscreen ? 'auto' : (typeof height === 'number' ? `${height}px` : height),
overflow: height === 'auto' ? 'visible' : 'auto',
@ -38,15 +38,17 @@
<!-- 底部操作区域 -->
<template #footer>
<div v-if="!footerHidden" class="nova-dialog-footer">
<div v-if="!footerHidden" class="coi-dialog-footer">
<NSpace justify="center">
<NButton
v-if="showCancel"
size="medium"
@click="handleCancel"
>
{{ cancelText }}
</NButton>
<NButton
v-if="showConfirm"
type="primary"
size="medium"
:loading="confirmLoading"
@ -83,10 +85,18 @@ interface IDialogProps {
loading?: boolean
/** 隐藏底部按钮 */
footerHidden?: boolean
/** 显示确认按钮 */
showConfirm?: boolean
/** 显示取消按钮 */
showCancel?: boolean
/** 自动聚焦 */
autoFocus?: boolean
/** 居中显示 */
center?: boolean
/** ESC键关闭 */
closeOnEsc?: boolean
/** 点击遮罩层关闭 */
maskClosable?: boolean
}
//
@ -99,15 +109,19 @@ const props = withDefaults(defineProps<IDialogProps>(), {
fullscreen: false,
loading: false,
footerHidden: false,
showConfirm: true,
showCancel: true,
autoFocus: true,
center: true,
closeOnEsc: true,
maskClosable: false,
})
//
const emits = defineEmits<{
novaConfirm: []
novaCancel: []
novaClose: []
coiConfirm: []
coiCancel: []
coiClose: []
}>()
//
@ -118,53 +132,53 @@ const { loading } = toRefs(props)
const confirmLoading = ref(loading)
/** 打开弹框 */
function novaOpen() {
function coiOpen() {
visible.value = true
}
/** 关闭弹框 */
function novaClose() {
function coiClose() {
visible.value = false
}
/** 快速关闭弹框 */
function novaQuickClose() {
function coiQuickClose() {
visible.value = false
}
/** 确认事件处理 */
function handleConfirm() {
emits('novaConfirm')
emits('coiConfirm')
}
/** 取消事件处理 */
function handleCancel() {
emits('novaCancel')
emits('coiCancel')
}
/** 关闭事件处理 */
function handleClose() {
visible.value = false
emits('novaClose')
emits('coiClose')
}
/** 暴露给父组件的方法 */
defineExpose({
novaOpen,
novaClose,
novaQuickClose,
coiOpen,
coiClose,
coiQuickClose,
})
</script>
<style scoped>
/* 弹框标题样式 */
.nova-dialog :deep(.n-card-header) {
.coi-dialog :deep(.n-card-header) {
padding: 0;
border-bottom: none;
background: transparent;
}
.nova-dialog-header {
.coi-dialog-header {
padding: 12px 16px 8px;
background: white;
border-bottom: 1px solid #f0f0f0;
@ -174,7 +188,7 @@ defineExpose({
position: relative;
}
.nova-dialog-title {
.coi-dialog-title {
margin: 0;
font-size: 16px;
font-weight: 500;
@ -183,7 +197,7 @@ defineExpose({
text-align: center;
}
.nova-dialog-custom-header {
.coi-dialog-custom-header {
padding: 12px 16px 8px;
background: white;
border-bottom: 1px solid #f0f0f0;
@ -193,7 +207,7 @@ defineExpose({
}
/* 弹框整体样式 */
.nova-dialog :deep(.n-card) {
.coi-dialog :deep(.n-card) {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid #e0e0e0;
@ -201,23 +215,23 @@ defineExpose({
}
/* 内容区域样式 */
.nova-dialog :deep(.n-card__content) {
.coi-dialog :deep(.n-card__content) {
padding: 0;
background: white;
}
.nova-dialog-content {
.coi-dialog-content {
overflow-x: hidden;
}
/* 底部样式 */
.nova-dialog :deep(.n-card__footer) {
.coi-dialog :deep(.n-card__footer) {
padding: 8px 16px 12px;
border-top: 1px solid #f0f0f0;
background: #fafafa;
}
.nova-dialog-footer {
.coi-dialog-footer {
/* 底部操作区域样式已由 n-space 处理 */
}
</style>

View File

@ -1,37 +1,37 @@
<template>
<div class="nova-empty" :class="sizeClass">
<div class="nova-empty__content">
<div class="coi-empty" :class="sizeClass">
<div class="coi-empty__content">
<!-- 图标区域 -->
<div class="nova-empty__icon-wrapper">
<div class="nova-empty__icon-bg" />
<NIcon class="nova-empty__icon" :size="iconSize" :color="iconColor">
<div class="coi-empty__icon-wrapper">
<div class="coi-empty__icon-bg" />
<NIcon class="coi-empty__icon" :size="iconSize" :color="iconColor">
<component :is="iconComponent" />
</NIcon>
</div>
<!-- 文字区域 -->
<div class="nova-empty__text">
<h3 class="nova-empty__title">
<div class="coi-empty__text">
<h3 class="coi-empty__title">
{{ title }}
</h3>
<p v-if="description" class="nova-empty__description">
<p v-if="description" class="coi-empty__description">
{{ description }}
</p>
</div>
<!-- 操作按钮区域 -->
<div v-if="showAction" class="nova-empty__actions">
<div v-if="showAction" class="coi-empty__actions">
<slot name="action">
<NButton
v-if="actionText"
:type="actionType"
:size="actionButtonSize"
round
class="nova-empty__action-btn"
class="coi-empty__action-btn"
@click="handleAction"
>
<template v-if="actionIcon" #icon>
<NIcon class="nova-empty__action-icon">
<NIcon class="coi-empty__action-icon">
<component :is="actionIconComponent" />
</NIcon>
</template>
@ -42,7 +42,7 @@
</div>
<!-- 装饰性背景元素 -->
<div class="nova-empty__decorations">
<div class="coi-empty__decorations">
<div class="decoration-circle decoration-circle--1" />
<div class="decoration-circle decoration-circle--2" />
<div class="decoration-circle decoration-circle--3" />
@ -54,7 +54,7 @@
import { computed } from 'vue'
import { NButton, NIcon } from 'naive-ui'
export interface NovaEmptyProps {
export interface CoiEmptyProps {
type?: 'default' | 'search' | 'network' | 'permission' | 'custom'
title?: string
description?: string
@ -69,11 +69,11 @@ export interface NovaEmptyProps {
size?: 'small' | 'medium' | 'large'
}
interface NovaEmptyEmits {
interface CoiEmptyEmits {
action: []
}
const props = withDefaults(defineProps<NovaEmptyProps>(), {
const props = withDefaults(defineProps<CoiEmptyProps>(), {
type: 'default',
title: '',
description: '',
@ -88,7 +88,7 @@ const props = withDefaults(defineProps<NovaEmptyProps>(), {
size: 'medium',
})
const emit = defineEmits<NovaEmptyEmits>()
const emit = defineEmits<CoiEmptyEmits>()
//
const typeConfigs = {
@ -144,7 +144,7 @@ const description = computed(() => {
})
//
const sizeClass = computed(() => `nova-empty--${props.size}`)
const sizeClass = computed(() => `coi-empty--${props.size}`)
const iconSize = computed(() => {
if (props.iconSize > 0) {
@ -188,7 +188,7 @@ function handleAction() {
</script>
<style scoped>
.nova-empty {
.coi-empty {
display: flex;
justify-content: center;
align-items: center;
@ -198,7 +198,7 @@ function handleAction() {
background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
}
.nova-empty__content {
.coi-empty__content {
text-align: center;
max-width: 400px;
position: relative;
@ -206,13 +206,13 @@ function handleAction() {
animation: fadeInUp 0.6s ease-out;
}
.nova-empty__icon-wrapper {
.coi-empty__icon-wrapper {
position: relative;
display: inline-block;
margin-bottom: 24px;
}
.nova-empty__icon-bg {
.coi-empty__icon-bg {
position: absolute;
top: 50%;
left: 50%;
@ -225,7 +225,7 @@ function handleAction() {
animation: pulse 3s ease-in-out infinite;
}
.nova-empty__icon {
.coi-empty__icon {
position: relative;
z-index: 1;
color: #8b5cf6;
@ -233,11 +233,11 @@ function handleAction() {
animation: float 4s ease-in-out infinite;
}
.nova-empty__text {
.coi-empty__text {
margin-bottom: 32px;
}
.nova-empty__title {
.coi-empty__title {
font-size: 18px;
font-weight: 600;
color: #374151;
@ -247,7 +247,7 @@ function handleAction() {
animation: slideInDown 0.6s ease-out 0.2s both;
}
.nova-empty__description {
.coi-empty__description {
font-size: 14px;
color: #6b7280;
margin: 0;
@ -255,11 +255,11 @@ function handleAction() {
animation: slideInDown 0.6s ease-out 0.4s both;
}
.nova-empty__actions {
.coi-empty__actions {
animation: slideInUp 0.6s ease-out 0.6s both;
}
.nova-empty__action-btn {
.coi-empty__action-btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
@ -268,7 +268,7 @@ function handleAction() {
border: none;
}
.nova-empty__action-btn::before {
.coi-empty__action-btn::before {
content: '';
position: absolute;
top: 0;
@ -279,26 +279,26 @@ function handleAction() {
transition: left 0.6s ease;
}
.nova-empty__action-btn:hover {
.coi-empty__action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.nova-empty__action-btn:hover::before {
.coi-empty__action-btn:hover::before {
left: 100%;
}
.nova-empty__action-icon {
.coi-empty__action-icon {
margin-right: 4px;
transition: transform 0.3s ease;
}
.nova-empty__action-btn:hover .nova-empty__action-icon {
.coi-empty__action-btn:hover .coi-empty__action-icon {
transform: scale(1.1);
}
/* 装饰性背景元素 */
.nova-empty__decorations {
.coi-empty__decorations {
position: absolute;
top: 0;
left: 0;
@ -341,99 +341,99 @@ function handleAction() {
}
/* 小尺寸 */
.nova-empty--small {
.coi-empty--small {
min-height: 300px;
padding: 30px 15px;
}
.nova-empty--small .nova-empty__content {
.coi-empty--small .coi-empty__content {
max-width: 300px;
}
.nova-empty--small .nova-empty__icon-wrapper {
.coi-empty--small .coi-empty__icon-wrapper {
margin-bottom: 20px;
}
.nova-empty--small .nova-empty__icon-bg {
.coi-empty--small .coi-empty__icon-bg {
width: 90px;
height: 90px;
}
.nova-empty--small .nova-empty__text {
.coi-empty--small .coi-empty__text {
margin-bottom: 24px;
}
.nova-empty--small .nova-empty__title {
.coi-empty--small .coi-empty__title {
font-size: 16px;
}
.nova-empty--small .nova-empty__description {
.coi-empty--small .coi-empty__description {
font-size: 13px;
}
/* 中尺寸(默认) */
.nova-empty--medium {
.coi-empty--medium {
min-height: 400px;
padding: 40px 20px;
}
.nova-empty--medium .nova-empty__content {
.coi-empty--medium .coi-empty__content {
max-width: 400px;
}
.nova-empty--medium .nova-empty__icon-wrapper {
.coi-empty--medium .coi-empty__icon-wrapper {
margin-bottom: 24px;
}
.nova-empty--medium .nova-empty__icon-bg {
.coi-empty--medium .coi-empty__icon-bg {
width: 120px;
height: 120px;
}
.nova-empty--medium .nova-empty__text {
.coi-empty--medium .coi-empty__text {
margin-bottom: 32px;
}
.nova-empty--medium .nova-empty__title {
.coi-empty--medium .coi-empty__title {
font-size: 18px;
}
.nova-empty--medium .nova-empty__description {
.coi-empty--medium .coi-empty__description {
font-size: 14px;
}
/* 大尺寸 */
.nova-empty--large {
.coi-empty--large {
min-height: 500px;
padding: 50px 25px;
}
.nova-empty--large .nova-empty__content {
.coi-empty--large .coi-empty__content {
max-width: 500px;
}
.nova-empty--large .nova-empty__icon-wrapper {
.coi-empty--large .coi-empty__icon-wrapper {
margin-bottom: 28px;
}
.nova-empty--large .nova-empty__icon-bg {
.coi-empty--large .coi-empty__icon-bg {
width: 150px;
height: 150px;
}
.nova-empty--large .nova-empty__text {
.coi-empty--large .coi-empty__text {
margin-bottom: 40px;
}
.nova-empty--large .nova-empty__title {
.coi-empty--large .coi-empty__title {
font-size: 20px;
}
.nova-empty--large .nova-empty__description {
.coi-empty--large .coi-empty__description {
font-size: 15px;
}
.nova-empty--large .nova-empty__action-btn {
.coi-empty--large .coi-empty__action-btn {
padding: 14px 28px;
font-size: 14px;
}
@ -496,24 +496,24 @@ function handleAction() {
/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
.nova-empty {
.coi-empty {
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}
.nova-empty__icon-bg {
.coi-empty__icon-bg {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
opacity: 0.6;
}
.nova-empty__icon {
.coi-empty__icon {
color: #a78bfa;
}
.nova-empty__title {
.coi-empty__title {
color: #e5e7eb;
}
.nova-empty__description {
.coi-empty__description {
color: #9ca3af;
}
@ -522,31 +522,31 @@ function handleAction() {
opacity: 0.4;
}
.nova-empty__action-btn {
.coi-empty__action-btn {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.nova-empty__action-btn:hover {
.coi-empty__action-btn:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
}
/* 响应式设计 */
@media (max-width: 640px) {
.nova-empty {
.coi-empty {
min-height: 320px;
padding: 32px 16px;
}
.nova-empty__title {
.coi-empty__title {
font-size: 16px;
}
.nova-empty__description {
.coi-empty__description {
font-size: 13px;
}
.nova-empty__icon-bg {
.coi-empty__icon-bg {
width: 100px !important;
height: 100px !important;
}
@ -554,21 +554,21 @@ function handleAction() {
/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
.nova-empty__content,
.nova-empty__title,
.nova-empty__description,
.nova-empty__actions,
.nova-empty__icon-bg,
.nova-empty__icon,
.coi-empty__content,
.coi-empty__title,
.coi-empty__description,
.coi-empty__actions,
.coi-empty__icon-bg,
.coi-empty__icon,
.decoration-circle {
animation: none !important;
}
.nova-empty__action-btn {
.coi-empty__action-btn {
transition: none !important;
}
.nova-empty__action-btn:hover {
.coi-empty__action-btn:hover {
transform: none !important;
}
}