From d71fd44a8a95697fe986abee7bf6e6499d435587 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 7 Jul 2025 15:52:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(component):=20=E9=87=8D=E5=91=BD?=
 =?UTF-8?q?=E5=90=8D=E7=BB=84=E4=BB=B6=E5=89=8D=E7=BC=80=E4=BB=8ENova?=
 =?UTF-8?q?=E5=88=B0Coi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

BREAKING CHANGE: 组件名称变更需要更新导入和使用方式
---
 .../common/{NovaDialog.vue => CoiDialog.vue}  |  72 +++++----
 .../common/{NovaEmpty.vue => CoiEmpty.vue}    | 148 +++++++++---------
 .../common/{NovaIcon.vue => CoiIcon.vue}      |   0
 3 files changed, 117 insertions(+), 103 deletions(-)
 rename src/components/common/{NovaDialog.vue => CoiDialog.vue} (76%)
 rename src/components/common/{NovaEmpty.vue => CoiEmpty.vue} (77%)
 rename src/components/common/{NovaIcon.vue => CoiIcon.vue} (100%)

diff --git a/src/components/common/NovaDialog.vue b/src/components/common/CoiDialog.vue
similarity index 76%
rename from src/components/common/NovaDialog.vue
rename to src/components/common/CoiDialog.vue
index 7350ea9..7fc8a1b 100644
--- a/src/components/common/NovaDialog.vue
+++ b/src/components/common/CoiDialog.vue
@@ -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>
diff --git a/src/components/common/NovaEmpty.vue b/src/components/common/CoiEmpty.vue
similarity index 77%
rename from src/components/common/NovaEmpty.vue
rename to src/components/common/CoiEmpty.vue
index 4abba30..207be03 100644
--- a/src/components/common/NovaEmpty.vue
+++ b/src/components/common/CoiEmpty.vue
@@ -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;
   }
 }
diff --git a/src/components/common/NovaIcon.vue b/src/components/common/CoiIcon.vue
similarity index 100%
rename from src/components/common/NovaIcon.vue
rename to src/components/common/CoiIcon.vue