@mc-markets/ui 1.0.86 → 1.0.90

package/packages/components/Empty/Empty.vue

@@ -1,74 +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>
+<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 `https://cfdsaas-pre.oss-cn-hongkong.aliyuncs.com/mc-assets/mc-ui/empty/${image}.png`
+})
+</script>

package/packages/components/Form/Form.vue

@@ -1,31 +1,31 @@
-<template>
-  <el-form ref="formRef" v-bind="$attrs" class="m-form">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-form>
-</template>
-
-<script setup>
-import { ref, useAttrs, defineExpose } from 'vue'
-
-defineOptions({
-  name: 'MForm'
-})
-
-const formRef = ref()
-const attrs = useAttrs()
-
-// 暴露表单方法
-defineExpose({
-  validate: (callback) => formRef.value?.validate(callback),
-  validateField: (props, callback) => formRef.value?.validateField(props, callback),
-  resetFields: () => formRef.value?.resetFields(),
-  scrollToField: (prop) => formRef.value?.scrollToField(prop),
-  clearValidate: (props) => formRef.value?.clearValidate(props)
-})
-</script>
-
-<style lang="scss">
-
+<template>
+  <el-form ref="formRef" v-bind="$attrs" class="m-form">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'MForm'
+})
+
+const formRef = ref()
+const attrs = useAttrs()
+
+// 暴露表单方法
+defineExpose({
+  validate: (callback) => formRef.value?.validate(callback),
+  validateField: (props, callback) => formRef.value?.validateField(props, callback),
+  resetFields: () => formRef.value?.resetFields(),
+  scrollToField: (prop) => formRef.value?.scrollToField(prop),
+  clearValidate: (props) => formRef.value?.clearValidate(props)
+})
+</script>
+
+<style lang="scss">
+
 </style>

package/packages/components/FormItem/FormItem.vue

@@ -1,20 +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 {
-  // 自定义样式可以在这里添加
-}
+<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>

package/packages/components/Icon/Icon.vue

@@ -1,210 +1,210 @@
-<template>
-  <i 
-    :class="iconClass" 
-    :style="iconStyle"
-    v-bind="$attrs"
-    @click="handleClick"
-  >
-    <slot></slot>
-  </i>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-// 定义组件名
-defineOptions({
-  name: 'MIcon'
-})
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true
-  },
-  size: {
-    type: [String, Number],
-    default: '16px'
-  },
-  color: {
-    type: String,
-    default: 'inherit'
-  },
-  spin: {
-    type: Boolean,
-    default: false
-  },
-  pulse: {
-    type: Boolean,
-    default: false
-  },
-  rotate: {
-    type: Number,
-    default: 0
-  },
-  flip: {
-    type: String,
-    default: undefined
-  },
-  prefix: {
-    type: String,
-    default: 'icon'
-  }
-})
-
-const emit = defineEmits(['click'])
-
-// 计算图标类名
-const iconClass = computed(() => {
-  const classes = ['iconfont']
-  
-  // 添加图标名称类
-  if (props.name) {
-    classes.push(`${props.prefix}-${props.name}`)
-  }
-  
-  // 添加动画类
-  if (props.spin) {
-    classes.push('icon-spin')
-  }
-  if (props.pulse) {
-    classes.push('icon-pulse')
-  }
-  
-  // 添加翻转类
-  if (props.flip) {
-    classes.push(`icon-flip-${props.flip}`)
-  }
-  
-  return classes
-})
-
-// 计算图标样式
-const iconStyle = computed(() => {
-  const style = {}
-  
-  // 设置大小
-  if (props.size) {
-    if (typeof props.size === 'number') {
-      style.fontSize = `${props.size}px`
-    } else {
-      style.fontSize = props.size
-    }
-  }
-  
-  // 设置颜色
-  if (props.color) {
-    style.color = props.color
-  }
-  
-  // 设置旋转
-  if (props.rotate !== 0) {
-    style.transform = `rotate(${props.rotate}deg)`
-  }
-  
-  return style
-})
-
-// 点击事件处理
-const handleClick = (event) => {
-  emit('click', event)
-}
-</script>
-
-<style scoped lang="scss">
-.iconfont {
-  display: inline-block;
-  font-style: normal;
-  vertical-align: baseline;
-  text-align: center;
-  text-transform: none;
-  line-height: 1;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* 旋转动画 */
-.icon-spin {
-  animation: icon-spin 1s linear infinite;
-}
-
-@keyframes icon-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* 脉冲动画 */
-.icon-pulse {
-  animation: icon-pulse 1s ease-in-out infinite;
-}
-
-@keyframes icon-pulse {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-/* 翻转效果 */
-.icon-flip-horizontal {
-  transform: scaleX(-1);
-}
-
-.icon-flip-vertical {
-  transform: scaleY(-1);
-}
-
-.icon-flip-both {
-  transform: scale(-1);
-}
-
-/* 当有旋转时，需要与翻转效果结合 */
-.icon-spin.icon-flip-horizontal {
-  animation: icon-spin-flip-horizontal 1s linear infinite;
-}
-
-.icon-spin.icon-flip-vertical {
-  animation: icon-spin-flip-vertical 1s linear infinite;
-}
-
-.icon-spin.icon-flip-both {
-  animation: icon-spin-flip-both 1s linear infinite;
-}
-
-@keyframes icon-spin-flip-horizontal {
-  from {
-    transform: rotate(0deg) scaleX(-1);
-  }
-  to {
-    transform: rotate(360deg) scaleX(-1);
-  }
-}
-
-@keyframes icon-spin-flip-vertical {
-  from {
-    transform: rotate(0deg) scaleY(-1);
-  }
-  to {
-    transform: rotate(360deg) scaleY(-1);
-  }
-}
-
-@keyframes icon-spin-flip-both {
-  from {
-    transform: rotate(0deg) scale(-1);
-  }
-  to {
-    transform: rotate(360deg) scale(-1);
-  }
-}
-</style>
+<template>
+  <i 
+    :class="iconClass" 
+    :style="iconStyle"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </i>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// 定义组件名
+defineOptions({
+  name: 'MIcon'
+})
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: [String, Number],
+    default: '16px'
+  },
+  color: {
+    type: String,
+    default: 'inherit'
+  },
+  spin: {
+    type: Boolean,
+    default: false
+  },
+  pulse: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: Number,
+    default: 0
+  },
+  flip: {
+    type: String,
+    default: undefined
+  },
+  prefix: {
+    type: String,
+    default: 'icon'
+  }
+})
+
+const emit = defineEmits(['click'])
+
+// 计算图标类名
+const iconClass = computed(() => {
+  const classes = ['iconfont']
+  
+  // 添加图标名称类
+  if (props.name) {
+    classes.push(`${props.prefix}-${props.name}`)
+  }
+  
+  // 添加动画类
+  if (props.spin) {
+    classes.push('icon-spin')
+  }
+  if (props.pulse) {
+    classes.push('icon-pulse')
+  }
+  
+  // 添加翻转类
+  if (props.flip) {
+    classes.push(`icon-flip-${props.flip}`)
+  }
+  
+  return classes
+})
+
+// 计算图标样式
+const iconStyle = computed(() => {
+  const style = {}
+  
+  // 设置大小
+  if (props.size) {
+    if (typeof props.size === 'number') {
+      style.fontSize = `${props.size}px`
+    } else {
+      style.fontSize = props.size
+    }
+  }
+  
+  // 设置颜色
+  if (props.color) {
+    style.color = props.color
+  }
+  
+  // 设置旋转
+  if (props.rotate !== 0) {
+    style.transform = `rotate(${props.rotate}deg)`
+  }
+  
+  return style
+})
+
+// 点击事件处理
+const handleClick = (event) => {
+  emit('click', event)
+}
+</script>
+
+<style scoped lang="scss">
+.iconfont {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 旋转动画 */
+.icon-spin {
+  animation: icon-spin 1s linear infinite;
+}
+
+@keyframes icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 脉冲动画 */
+.icon-pulse {
+  animation: icon-pulse 1s ease-in-out infinite;
+}
+
+@keyframes icon-pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* 翻转效果 */
+.icon-flip-horizontal {
+  transform: scaleX(-1);
+}
+
+.icon-flip-vertical {
+  transform: scaleY(-1);
+}
+
+.icon-flip-both {
+  transform: scale(-1);
+}
+
+/* 当有旋转时，需要与翻转效果结合 */
+.icon-spin.icon-flip-horizontal {
+  animation: icon-spin-flip-horizontal 1s linear infinite;
+}
+
+.icon-spin.icon-flip-vertical {
+  animation: icon-spin-flip-vertical 1s linear infinite;
+}
+
+.icon-spin.icon-flip-both {
+  animation: icon-spin-flip-both 1s linear infinite;
+}
+
+@keyframes icon-spin-flip-horizontal {
+  from {
+    transform: rotate(0deg) scaleX(-1);
+  }
+  to {
+    transform: rotate(360deg) scaleX(-1);
+  }
+}
+
+@keyframes icon-spin-flip-vertical {
+  from {
+    transform: rotate(0deg) scaleY(-1);
+  }
+  to {
+    transform: rotate(360deg) scaleY(-1);
+  }
+}
+
+@keyframes icon-spin-flip-both {
+  from {
+    transform: rotate(0deg) scale(-1);
+  }
+  to {
+    transform: rotate(360deg) scale(-1);
+  }
+}
+</style>