dev-templates/coder-common-thin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 重命名 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/common/NovaDialog.vue → src/components/common/CoiDialog.vue
View File

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

148
src/components/common/NovaEmpty.vue → src/components/common/CoiEmpty.vue
View File

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

0
src/components/common/NovaIcon.vue → src/components/common/CoiIcon.vue
View File