@mc-markets/ui 1.0.63 → 1.0.67

package/packages/components/Banner/Banner.vue

@@ -0,0 +1,299 @@
+<template>
+  <div 
+    v-if="visible" 
+    class="m-banner"
+    :class="[
+      `m-banner--${type}`,
+      {
+        'm-banner--closable': closable,
+        'm-banner--with-icon': icon || slots.icon
+      }
+    ]"
+    :style="bannerStyle"
+  >
+    <div class="m-banner__content">
+      <!-- 图标插槽 -->
+      <div v-if="icon || slots.icon" class="m-banner__icon">
+        <slot name="icon">
+          <m-icon :name="icon" :size="iconSize" />
+        </slot>
+      </div>
+      
+      <!-- 主要内容 -->
+      <div class="m-banner__text">
+        <slot>{{ content }}</slot>
+      </div>
+      
+      <!-- 关闭按钮 -->
+      <div v-if="closable" class="m-banner__close" @click="handleClose">
+        <m-icon name="lucide-x" :size="closeIconSize" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, useSlots } from 'vue'
+import MIcon from '../Icon/Icon.vue'
+
+// 获取插槽
+const slots = useSlots()
+
+// 定义 props
+const props = defineProps({
+  // 横幅内容
+  content: {
+    type: String,
+    default: ''
+  },
+  // 横幅类型
+  type: {
+    type: String,
+    default: 'info',
+    validator: (value) => ['info', 'success', 'warning', 'error'].includes(value)
+  },
+  // 是否可关闭
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示
+  visible: {
+    type: Boolean,
+    default: true
+  },
+  // 图标名称
+  icon: {
+    type: String,
+    default: ''
+  },
+  // 图标大小
+  iconSize: {
+    type: [String, Number],
+    default: '16px'
+  },
+  // 关闭图标大小
+  closeIconSize: {
+    type: [String, Number],
+    default: '16px'
+  },
+  // 自定义背景色
+  backgroundColor: {
+    type: String,
+    default: ''
+  },
+  // 自定义文字颜色
+  textColor: {
+    type: String,
+    default: ''
+  },
+  // 自定义边框颜色
+  borderColor: {
+    type: String,
+    default: ''
+  },
+  // 持续时间（毫秒），0 表示不自动关闭
+  duration: {
+    type: Number,
+    default: 0
+  }
+})
+
+// 定义 emits
+const emit = defineEmits(['close', 'update:visible'])
+
+// 响应式数据
+const internalVisible = ref(props.visible)
+
+// 监听 visible prop 变化
+watch(() => props.visible, (newVal) => {
+  internalVisible.value = newVal
+})
+
+// 计算样式
+const bannerStyle = computed(() => {
+  const style = {}
+  
+  if (props.backgroundColor) {
+    style.backgroundColor = props.backgroundColor
+  }
+  if (props.textColor) {
+    style.color = props.textColor
+  }
+  if (props.borderColor) {
+    style.borderColor = props.borderColor
+  }
+  
+  return style
+})
+
+// 默认图标映射
+const defaultIcons = {
+  info: 'info',
+  success: 'check-circle',
+  warning: 'warning',
+  error: 'close-circle'
+}
+
+// 计算实际使用的图标
+const actualIcon = computed(() => {
+  return props.icon || defaultIcons[props.type]
+})
+
+// 处理关闭
+const handleClose = () => {
+  internalVisible.value = false
+  emit('update:visible', false)
+  emit('close')
+}
+
+// 自动关闭逻辑
+watch(internalVisible, (newVal) => {
+  if (newVal && props.duration > 0) {
+    setTimeout(() => {
+      handleClose()
+    }, props.duration)
+  }
+})
+
+// 定义组件名称
+defineOptions({
+  name: 'MBanner'
+})
+
+// 暴露方法给父组件
+defineExpose({
+  close: handleClose
+})
+</script>
+
+<style scoped lang="scss">
+.m-banner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  border-radius: 4px;
+  border: 1px solid;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 10px;
+  transition: all 0.3s ease;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex: 1;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: 8px;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    flex: 1;
+    word-break: break-word;
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+    flex-shrink: 0;
+    min-width: 20px;
+    min-height: 20px;
+    opacity: 0.7;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+      opacity: 1;
+    }
+  }
+
+  // 类型样式
+  &--info {
+    background-color: #e1f3ff;
+    border-color: #b3d8ff;
+    color: #0066cc;
+
+    .m-banner__close:hover {
+      background-color: rgba(0, 102, 204, 0.1);
+    }
+  }
+
+  &--success {
+    background-color: #f0f9ff;
+    border-color: #b3e5b3;
+    color: #00a854;
+
+    .m-banner__close:hover {
+      background-color: rgba(0, 168, 84, 0.1);
+    }
+  }
+
+  &--warning {
+    background-color: #fff7e6;
+    border-color: #ffd591;
+    color: #fa8c16;
+
+    .m-banner__close:hover {
+      background-color: rgba(250, 140, 22, 0.1);
+    }
+  }
+
+  &--error {
+    background-color: #fff2f0;
+    border-color: #ffccc7;
+    color: #ff4d4f;
+
+    .m-banner__close:hover {
+      background-color: rgba(255, 77, 79, 0.1);
+    }
+  }
+
+  // 带动画的关闭
+  &.m-banner-leave-active {
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+}
+
+// 深色主题适配
+@media (prefers-color-scheme: dark) {
+  .m-banner {
+    &--info {
+      background-color: rgba(24, 144, 255, 0.1);
+      border-color: rgba(24, 144, 255, 0.3);
+      color: #69c0ff;
+    }
+
+    &--success {
+      background-color: rgba(82, 196, 26, 0.1);
+      border-color: rgba(82, 196, 26, 0.3);
+      color: #95de64;
+    }
+
+    &--warning {
+      background-color: rgba(250, 173, 20, 0.1);
+      border-color: rgba(250, 173, 20, 0.3);
+      color: #ffd666;
+    }
+
+    &--error {
+      background-color: rgba(255, 77, 79, 0.1);
+      border-color: rgba(255, 77, 79, 0.3);
+      color: #ff7875;
+    }
+  }
+}
+</style>

package/packages/components/Button/Button.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-button v-bind="$attrs" class="m-button">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-button>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'MButton'
+})
+</script>
+
+<style lang="scss" scoped>
+// Button 组件样式 - 使用高优先级选择器确保不被全局样式覆盖
+
+</style>

package/packages/components/Card/Card.vue

@@ -0,0 +1,20 @@
+<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>

package/packages/components/DatePicker/DatePicker.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-date-picker v-bind="mergedAttrs" :popper-class="popperClass">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-date-picker>
+</template>
+
+<script setup>
+import { useClassName } from "@packages/hooks/useClassName.js";
+
+defineOptions({
+  name: "MDatePicker",
+});
+
+// 定义 props，提供默认的 type 值
+const props = defineProps({
+  popperClass: {
+    type: String,
+    default: "",
+  },
+});
+
+// 使用类名 Hook，排除 type 和 popperClass 属性
+const { mergedAttrs, className: popperClass } = useClassName(
+  "mc-datepicker-popper",
+  "popperClass"
+);
+</script>
+<style lang="scss">
+.mc-datepicker-popper {
+  .el-picker-panel {
+    border: 1px solid var(--border-primary);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    .current,
+    .today:not(.in-range),
+    .start-date,
+    .end-date {
+      .el-date-table-cell {
+        .el-date-table-cell__text {
+          color: var(--text-quaternary);
+          border-radius: 3px;
+        }
+      }
+    }
+
+    .start-date {
+      .el-date-table-cell {
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+    }
+
+    .end-date {
+      .el-date-table-cell {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    }
+
+    .el-button.is-text {
+      color: var(--text-brand);
+    }
+    .el-button.is-plain {
+      background: var(--bg-brand);
+      color: var(--text-quaternary);
+    }
+  }
+}
+</style>

package/packages/components/Dialog/Dialog.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisible"
+      :width="width"
+      :title="title"
+      :draggable="draggable"
+      :close-on-click-modal="closeOnClickModal"
+      :center="center"
+      v-bind="$attrs"
+      class="m-dialog"
+      header-class="m-header"
+    >测试组
+      <template v-if="$slots.header" #header="{ close, titleId, titleClass }">
+        <slot name="header" v-bind="{ close, titleId, titleClass }"></slot>
+      </template>
+      <slot name="default"></slot>
+      <template v-if="$slots.footer" #footer class="m-footer">
+        <slot name="footer"></slot>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  width: {
+    type: String,
+    default: '440px'
+  },
+  center: {
+    type: Boolean,
+    default: true
+  },
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickModal: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const emit = defineEmits(['close'])
+const dialogVisible = defineModel('modelValue', {
+  type: Boolean,
+  default: false
+})
+
+</script>
+
+<style scoped lang="scss">
+:deep(.m-dialog) {
+  --el-dialog-padding-primary:24px;
+  --el-dialog-title-font-size:24px;
+  --el-dialog-border-radius:16px;
+  --el-dialog-bg-color:var(--bg-tertiary);
+}
+
+:deep(.m-header) {
+  padding-bottom: 24px;
+  padding-right: 0;
+
+  .el-dialog__title {
+    line-height: 32px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .el-dialog__headerbtn {
+    width: 24px;
+    height: 24px;
+    right: 22px;
+    top: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .el-dialog__close {
+      font-size: 20px;
+      color: var(--icon-tertiary);
+    }
+
+    &:hover{
+      .el-dialog__close{
+        color: var(--bg-brand-hover);
+      }
+    }
+  }
+}
+
+:deep(.el-dialog__footer) {
+  display: flex;
+  >.el-button{
+    flex: 1;
+  }
+}
+</style>

package/packages/components/Empty/Empty.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-empty v-bind="mergedAttrs" :image="imageUrl">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-empty>
+</template>
+
+<script>
+// 定义可选的图片文件名（在模块作用域中）
+const availableImages = [
+  '404',
+  'billing', 
+  'cart',
+  'comments',
+  'dashboard',
+  'files',
+  'inbox',
+  'location',
+  'network',
+  'notifications',
+  'orders',
+  'records',
+  'session',
+  'subscription',
+  'todo',
+  'wishlist'
+]
+
+export default {
+  name: 'MEmpty'
+}
+</script>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps({
+  image: {
+    type: String,
+    default: 'orders',
+    validator: (value) => {
+      // 如果是完整的URL或路径，直接通过验证
+      if (value.includes('/') || value.includes('http')) {
+        return true
+      }
+      // 否则检查是否在可选列表中
+      return availableImages.includes(value)
+    }
+  }
+})
+
+const attrs = useAttrs()
+
+// 排除 image 属性，避免重复绑定
+const mergedAttrs = computed(() => {
+  const { image, ...rest } = attrs
+  return rest
+})
+
+// 计算图片URL
+const imageUrl = computed(() => {
+  const { image } = props
+  
+  // 如果是完整的URL或路径，直接返回
+  if (image.includes('/') || image.includes('http')) {
+    return image
+  }
+  
+  // 使用 public 目录中的图片
+  // Vite 会自动处理 public 目录中的静态资源
+  return `/images/empty/${image}.png`
+})
+</script>

package/packages/components/Form/Form.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-form v-bind="$attrs" class="m-form">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-form>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'MForm'
+})
+</script>
+
+<style lang="scss">
+
+</style>

package/packages/components/FormItem/FormItem.vue

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