@mc-markets/ui 1.0.69 → 1.0.72

package/packages/components/Alert/Alert.vue

@@ -1,13 +1,127 @@
 <template>
-  <el-alert v-bind="$attrs">
+  <el-alert v-bind="mergedAttrs" class="mc-alert">
+    <!-- 自定义图标插槽 -->
+    <template v-if="iconUrl" #icon>
+      <img :src="iconUrl" :alt="`${type} icon`" class="mc-alert-icon" />
+    </template>
+    
+    <!-- 其他插槽 -->
     <template v-for="(_, name) in $slots" :key="name" #[name]>
       <slot :name="name" />
     </template>
   </el-alert>
 </template>
 
-<script setup>
-defineOptions({
+<script>
+// 定义可选的Alert类型
+const availableTypes = ['success', 'warning', 'error']
+
+export default {
   name: 'MAlert'
+}
+</script>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'success',
+    validator: (value) => availableTypes.includes(value)
+  },
+  useCustomIcon: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const attrs = useAttrs()
+
+// 排除已处理的属性，确保 type 属性正确传递
+const mergedAttrs = computed(() => {
+  const { useCustomIcon, ...rest } = attrs
+  return {
+    ...rest,
+    type: props.type  // 确保 type 属性正确传递给 el-alert
+  }
+})
+
+// 计算图标URL
+const iconUrl = computed(() => {
+  if (!props.useCustomIcon) {
+    return null
+  }
+  
+  return `/images/alert/alert-${props.type}.png`
 })
 </script>
+
+<style lang="scss">
+.mc-alert.el-alert {
+  --el-alert-padding: 14px 16px;
+  .mc-alert-icon {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+  }
+  .el-alert__close-btn{
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  // Error 类型样式
+  &.el-alert--error.is-light {
+    background-color: var(--all-red-10);
+    color: var(--text-error-primary);
+    border-color: var(--all-red-10);
+    
+    .el-alert__title,
+    .el-alert__description,
+    .el-alert__close-btn {
+      color: var(--text-error-primary);
+    }
+  
+    .el-alert__icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+  
+  // Warning 类型样式
+  &.el-alert--warning.is-light {
+    background-color: var(--all-orange-10);
+    color: var(--text-warning-primary);
+    border-color: var(--all-orange-10);
+    
+    .el-alert__title,
+    .el-alert__description,
+    .el-alert__close-btn {
+      color: var(--text-warning-primary);
+    }
+  
+    .el-alert__icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+  
+  // Success 类型样式
+  &.el-alert--success.is-light {
+    background-color: var(--all-green-10);
+    color: var(--all-green-4);
+    border-color: var(--all-green-10);
+    
+    .el-alert__title,
+    .el-alert__description,
+    .el-alert__close-btn {
+      color: var(--all-green-4);
+    }
+  
+    .el-alert__icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+</style>

package/packages/components/DatePicker/DatePicker.vue

@@ -34,7 +34,7 @@ const { mergedAttrs, className: popperClass } = useClassName(
     border-radius: 6px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     .current,
-    .today:not(.in-range),
+    // .today:not(.in-range),
     .start-date,
     .end-date {
       .el-date-table-cell {

package/packages/components/NotifiMessage/NotifiMessage.vue

@@ -0,0 +1,292 @@
+<template>
+  <teleport to="body">
+    <transition-group name="notification" tag="div" class="notification-container">
+      <div
+        v-for="notification in notifications"
+        :key="notification.id"
+        :class="[
+          'custom-notification',
+          `notification-${notification.position}`
+        ]"
+      >
+        <!-- 图标 -->
+        <div class="notification-icon">
+          <img 
+            src="https://cfdsaas-pre.oss-cn-hongkong.aliyuncs.com/mc-assets/MCImages/userCenter/icon-quota-tip.png" 
+            alt="notification icon"
+          />
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="notification-content">
+          <!-- 标题 -->
+          <div class="notification-title">{{ notification.title }}</div>
+          
+          <!-- 消息内容 -->
+          <div class="notification-message">{{ notification.message }}</div>
+          
+          <!-- 自定义插槽内容 -->
+          <div v-if="notification.slotContent" class="notification-action">
+            <component :is="notification.slotContent" />
+          </div>
+        </div>
+
+        <!-- 关闭按钮 -->
+        <button 
+          v-if="notification.showClose"
+          class="notification-close"
+          @click="closeNotification(notification.id)"
+        >
+          ×
+        </button>
+      </div>
+    </transition-group>
+  </teleport>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+// 全局通知列表
+const notifications = ref([])
+let notificationId = 0
+
+// 创建 NotifiMessage 静态方法对象
+const NotifiMessage = {
+  // 默认配置
+  defaultOptions: {
+    title: '',
+    message: '',
+    duration: 4500,
+    position: 'top-right',
+    showClose: true,
+    offset: 20
+  },
+
+  // 显示通知
+  show(options = {}) {
+    const config = {
+      ...this.defaultOptions,
+      ...options,
+      id: ++notificationId
+    }
+
+    // 添加到通知列表
+    notifications.value.push(config)
+
+    // 如果设置了自动关闭时间，则自动关闭
+    if (config.duration > 0) {
+      setTimeout(() => {
+        this.close(config.id)
+      }, config.duration)
+    }
+
+    return {
+      close: () => this.close(config.id)
+    }
+  },
+
+  // 关闭指定通知
+  close(id) {
+    const index = notifications.value.findIndex(n => n.id === id)
+    if (index > -1) {
+      notifications.value.splice(index, 1)
+    }
+  },
+
+  // 关闭所有通知
+  closeAll() {
+    notifications.value = []
+  },
+
+  // 便捷方法
+  success(options = {}) {
+    return this.show(options)
+  },
+
+  warning(options = {}) {
+    return this.show(options)
+  },
+
+  error(options = {}) {
+    return this.show(options)
+  }
+}
+
+// 关闭通知的方法
+const closeNotification = (id) => {
+  const index = notifications.value.findIndex(n => n.id === id)
+  if (index > -1) {
+    notifications.value.splice(index, 1)
+  }
+}
+
+
+// Vue 组件定义
+export default {
+  name: 'MNotifiMessage',
+  setup() {
+    return {
+      notifications,
+      closeNotification
+    }
+  }
+}
+
+// 导出类供直接使用
+export { NotifiMessage }
+</script>
+
+<style lang="scss">
+.notification-container {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.custom-notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 400px;
+  background: #201F24;
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+  z-index: 9999;
+  
+  // 多个通知的堆叠效果
+  &:nth-child(2) { top: 100px; }
+  &:nth-child(3) { top: 180px; }
+  &:nth-child(4) { top: 260px; }
+  &:nth-child(5) { top: 340px; }
+  
+  .notification-icon {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transform: translate(-9px, -8px);
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  
+  .notification-content {
+    flex: 1;
+    
+    .notification-title {
+      color: #FFFFFF;
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    
+    .notification-message {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 14px;
+      line-height: 1.5;
+      margin-bottom: 16px;
+    }
+    
+    .notification-action {
+      .custom-action-link {
+        color: #FFD905;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        transition: all 0.2s ease;
+        
+        &:hover {
+          color: #FFF;
+        }
+        
+        span {
+          line-height: 1;
+        }
+        
+        .arrow {
+          transition: transform 0.2s ease;
+          display: flex;
+          align-items: center;
+          line-height: 1;
+        }
+        
+        &:hover .arrow {
+          transform: translateX(2px);
+        }
+      }
+    }
+  }
+  
+  .notification-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    line-height: 1;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
+}
+
+// 动画效果
+.notification-enter-active {
+  transition: all 0.3s ease;
+}
+
+.notification-leave-active {
+  transition: all 0.3s ease;
+}
+
+.notification-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.notification-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.notification-move {
+  transition: transform 0.3s ease;
+}
+
+// 响应式设计
+@media (max-width: 480px) {
+  .custom-notification {
+    width: calc(100vw - 40px);
+    left: 20px !important;
+    right: 20px !important;
+  }
+}
+</style>

package/packages/components/Notification/Notification.vue

@@ -1,13 +1,19 @@
 <template>
-  <el-notification v-bind="$attrs">
+  <el-notification v-bind="$attrs" class="mc-notification">
+    <!-- 其他插槽 -->
     <template v-for="(_, name) in $slots" :key="name" #[name]>
       <slot :name="name" />
     </template>
   </el-notification>
 </template>
 
-<script setup>
-defineOptions({
-  name: 'MNotification'
-})
+<script>
+export default {
+  name: "MNotification",
+};
 </script>
+
+<style lang="scss">
+// Notification 基础样式
+// 如需自定义样式，可以在这里添加
+</style>

package/packages/styles/index.scss

@@ -101,4 +101,4 @@ html.dark{
 
   --el-text-color-placeholder:var(--text-tertiary);
   --el-border-radius-base:8px;
-}
+}

package/dist/components/Card/Card.vue.d.ts

@@ -1,8 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare function __VLS_template(): Partial<Record<NonNullable<string | number>, (_: {}) => any>>;
-//# sourceMappingURL=Card.vue.d.ts.map

package/dist/components/Card/Card.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.vue.d.ts","sourceRoot":"","sources":["../../../packages/components/Card/Card.vue.js"],"names":[],"mappings":"AAOA;wBAmFqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;;6BAC1E,CAAC,EAAE,CAAC;;;AAPjC,6SAKG;AAvEH,2FAuDsF,GAAG,GAIxF"}

package/packages/components/Card/Card.vue

@@ -1,20 +0,0 @@
-<template>
-  <el-card v-bind="$attrs" class="m-card">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-card>
-</template>
-
-<script setup>
-defineOptions({
-  name: 'MCard'
-})
-</script>
-
-<style lang="scss">
-// Card 组件样式 - 使用 m-card 类名隔离样式
-.m-card {
-  // 自定义样式可以在这里添加
-}
-</style>