@mc-markets/ui 1.0.87 → 1.0.90

package/packages/components/TabCard/TabCardItem.vue

@@ -1,119 +1,105 @@
-<template>
-  <div
-    :class="[
-      'm-tab-card-item',
-      { 
-        'is-active': isActive,
-        'is-disabled': disabled
-      }
-    ]"
-    @click="handleClick"
-  >
-    <span class="m-tab-card-item__text">
-      <slot>{{ label }}</slot>
-    </span>
-  </div>
-</template>
-
-<script setup>
-import { inject, computed } from 'vue'
-
-defineOptions({
-  name: "MTabCardItem",
-})
-
-// 定义 props
-const props = defineProps({
-  label: {
-    type: String,
-    default: ''
-  },
-  name: {
-    type: [String, Number],
-    required: true
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-})
-
-// 定义 emits
-const emit = defineEmits(['click'])
-
-// 注入父组件上下文
-const tabCardContext = inject('tabCardContext')
-
-// 计算是否激活
-const isActive = computed(() => {
-  return tabCardContext.activeTab.value === props.name
-})
-
-// 处理点击
-const handleClick = () => {
-  if (props.disabled) {
-    return
-  }
-  
-  tabCardContext.handleTabClick(props.name, props.disabled)
-  emit('click', props.name)
-}
-</script>
-
-<style lang="scss" scoped>
-.m-tab-card-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  border-radius: var(--md);
-  cursor: pointer;
-  // transition: all 0.3s ease;
-  user-select: none;
-  background-color: transparent;
-  padding: 0 36px;
-  text-align: center;
-  z-index: 1;
-
-  // &:hover:not(.is-disabled):not(.is-active) {
-  //   background-color: rgba(255, 255, 255, 0.05);
-  // }
-
-  &.is-active {
-    background-color: var(--bg-brand, #ffd700);
-    color: var(--text-quaternary);
-    font-weight: 600;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &:not(.is-active) {
-    color: var(--text-secondary, #ffffff);
-  }
-
-  &__text {
-    font-size: 14px;
-    line-height: 1.4;
-    white-space: nowrap;
-  }
-}
-
-// 深色主题适配
-@media (prefers-color-scheme: dark) {
-  .m-tab-card-item {
-    &:not(.is-active) {
-      color: var(--text-secondary, #cccccc);
-    }
-
-    &.is-active {
-      background-color: var(--bg-brand, #ffd700);
-      color: var(--text-primary, #1a1a1a);
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'm-tab-card-item',
+      { 
+        'is-active': isActive,
+        'is-disabled': disabled
+      }
+    ]"
+    @click="handleClick"
+  >
+    <span class="m-tab-card-item__text">
+      <slot>{{ label }}</slot>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { inject, computed } from 'vue'
+
+defineOptions({
+  name: "MTabCardItem",
+})
+
+// 定义 props
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: [String, Number],
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 定义 emits
+const emit = defineEmits(['click'])
+
+// 注入父组件上下文
+const tabCardContext = inject('tabCardContext')
+
+// 计算是否激活
+const isActive = computed(() => {
+  return tabCardContext.activeTab.value === props.name
+})
+
+// 处理点击
+const handleClick = () => {
+  if (props.disabled) {
+    return
+  }
+  
+  tabCardContext.handleTabClick(props.name, props.disabled)
+  emit('click', props.name)
+}
+</script>
+
+<style lang="scss" scoped>
+.m-tab-card-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: var(--md);
+  cursor: pointer;
+  // transition: all 0.3s ease;
+  user-select: none;
+  background-color: transparent;
+  padding: 0 36px;
+  text-align: center;
+  z-index: 1;
+
+  // &:hover:not(.is-disabled):not(.is-active) {
+  //   background-color: rgba(255, 255, 255, 0.05);
+  // }
+
+  &.is-active {
+    background-color: var(--bg-brand, #ffd700);
+    color: var(--text-quaternary);
+    font-weight: 600;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:not(.is-active) {
+    color: var(--text-secondary, #ffffff);
+  }
+
+  &__text {
+    font-size: 14px;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+}
+</style>

package/packages/components/Table/Table.vue

@@ -1,17 +1,17 @@
-<template>
-  <el-table v-bind="$attrs">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-table>
-</template>
-
-<script setup>
-defineOptions({
-  name: "MTable",
-});
-</script>
-<style lang="scss">
-// Table 组件样式 - 无边框设计
-
-</style>
+<template>
+  <el-table v-bind="$attrs">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-table>
+</template>
+
+<script setup>
+defineOptions({
+  name: "MTable",
+});
+</script>
+<style lang="scss">
+// Table 组件样式 - 无边框设计
+
+</style>

package/packages/components/Table/TableColumn.vue

@@ -1,20 +1,20 @@
-<template>
-  <el-table-column v-bind="$attrs" class="m-table-column">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-table-column>
-</template>
-
-<script setup>
-defineOptions({
-  name: "MTableColumn",
-});
-</script>
-
-<style lang="scss">
-// TableColumn 组件样式
-.m-table-column.el-table-column {
-  // 继承父级 Table 组件的样式
-}
-</style>
+<template>
+  <el-table-column v-bind="$attrs" class="m-table-column">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-table-column>
+</template>
+
+<script setup>
+defineOptions({
+  name: "MTableColumn",
+});
+</script>
+
+<style lang="scss">
+// TableColumn 组件样式
+.m-table-column.el-table-column {
+  // 继承父级 Table 组件的样式
+}
+</style>

package/packages/components/Tabs/TabPane.vue

@@ -1,79 +1,79 @@
-<template>
-  <div
-    v-show="isActive"
-    class="m-tab-pane"
-    :class="{ 'is-active': isActive }"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { inject, computed, onMounted, onUnmounted } from 'vue'
-
-export default {
-  name: 'MTabPane',
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    name: {
-      type: [String, Number],
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    closable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const tabsContext = inject('tabsContext')
-    
-    // 计算tab名称，如果没有提供name则使用label
-    const tabName = computed(() => {
-      return props.name || props.label
-    })
-
-    // 计算是否激活
-    const isActive = computed(() => {
-      return tabsContext.activeTab.value === tabName.value
-    })
-
-    // 组件挂载时注册tab
-    onMounted(() => {
-      const tabInfo = {
-        label: props.label,
-        name: tabName.value,
-        disabled: props.disabled,
-        closable: props.closable
-      }
-      tabsContext.registerTab(tabInfo)
-    })
-
-    // 组件卸载时注销tab
-    onUnmounted(() => {
-      tabsContext.unregisterTab(tabName.value)
-    })
-
-    return {
-      isActive,
-      tabName
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.m-tab-pane {
-  display: none;
-
-  &.is-active {
-    display: block;
-  }
-}
-</style>
+<template>
+  <div
+    v-show="isActive"
+    class="m-tab-pane"
+    :class="{ 'is-active': isActive }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { inject, computed, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'MTabPane',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: [String, Number],
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const tabsContext = inject('tabsContext')
+    
+    // 计算tab名称，如果没有提供name则使用label
+    const tabName = computed(() => {
+      return props.name || props.label
+    })
+
+    // 计算是否激活
+    const isActive = computed(() => {
+      return tabsContext.activeTab.value === tabName.value
+    })
+
+    // 组件挂载时注册tab
+    onMounted(() => {
+      const tabInfo = {
+        label: props.label,
+        name: tabName.value,
+        disabled: props.disabled,
+        closable: props.closable
+      }
+      tabsContext.registerTab(tabInfo)
+    })
+
+    // 组件卸载时注销tab
+    onUnmounted(() => {
+      tabsContext.unregisterTab(tabName.value)
+    })
+
+    return {
+      isActive,
+      tabName
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.m-tab-pane {
+  display: none;
+
+  &.is-active {
+    display: block;
+  }
+}
+</style>