@mc-markets/ui 1.0.86 → 1.0.90

package/packages/components/TabCard/TabCard.vue

@@ -1,177 +1,107 @@
-<template>
-  <div class="m-tab-card" :class="{ 'is-disabled': disabled }">
-    <div class="m-tab-card__container">
-      <div
-        v-for="(tab, index) in tabs"
-        :key="tab.name"
-        :class="[
-          'm-tab-card__item',
-          { 
-            'is-active': activeTab === tab.name,
-            'is-disabled': tab.disabled
-          }
-        ]"
-        @click="handleTabClick(tab.name, tab.disabled)"
-      >
-        <span class="m-tab-card__text">{{ tab.label }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, provide } from 'vue'
-import { useClassName } from "@packages/hooks/useClassName.js"
-
-defineOptions({
-  name: "MTabCard",
-})
-
-// 定义 props
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: ''
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  options: {
-    type: Array,
-    default: () => []
-  }
-})
-
-// 定义 emits
-const emit = defineEmits(['update:modelValue', 'change', 'tab-click'])
-
-// 使用类名 Hook
-const { mergedAttrs } = useClassName()
-
-// 内部状态
-const activeTab = ref(props.modelValue)
-
-// 计算 tabs 数据
-const tabs = computed(() => {
-  return props.options.map(option => {
-    if (typeof option === 'string') {
-      return { label: option, name: option, disabled: false }
-    }
-    return {
-      label: option.label || option.name || '',
-      name: option.name || option.label || '',
-      disabled: option.disabled || false
-    }
-  })
-})
-
-// 处理 tab 点击
-const handleTabClick = (tabName, isDisabled) => {
-  if (isDisabled || props.disabled || tabName === activeTab.value) {
-    return
-  }
-  
-  const oldValue = activeTab.value
-  activeTab.value = tabName
-  emit('update:modelValue', tabName)
-  emit('change', tabName, oldValue)
-  emit('tab-click', tabName)
-}
-
-// 监听 modelValue 变化
-watch(() => props.modelValue, (newValue) => {
-  if (newValue !== activeTab.value) {
-    activeTab.value = newValue
-  }
-})
-
-// 提供给子组件的方法
-provide('tabCardContext', {
-  activeTab,
-  handleTabClick
-})
-</script>
-
-<style lang="scss" scoped>
-.m-tab-card {
-  display: inline-block;
-  
-  &.is-disabled {
-    pointer-events: none;
-    opacity: 0.6;
-  }
-
-  &__container {
-    display: flex;
-    background-color: var(--bg-tertiary-hover, #2a2a2a);
-    border-radius: var(--md);
-    padding: 4px;
-    gap: 0;
-  }
-
-  &__item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 132px;
-    height: 40px;
-    padding: 0 16px;
-    border-radius: var(--md);
-    cursor: pointer;
-    // transition: all 0.3s ease;
-    user-select: none;
-    background-color: transparent;
-    min-width: 80px;
-    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 {
-    &__container {
-      background-color: var(--bg-tertiary-hover, #2a2a2a);
-    }
-
-    &__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" :class="{ 'is-disabled': disabled }">
+    <div class="m-tab-card__container">
+      <m-tab-card-item
+        v-for="(tab, index) in tabs"
+        :key="tab.name"
+        :name="tab.name"
+        :label="tab.label"
+        :disabled="tab.disabled"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, provide } from 'vue'
+import { useClassName } from "@packages/hooks/useClassName.js"
+import MTabCardItem from './TabCardItem.vue'
+
+defineOptions({
+  name: "MTabCard",
+})
+
+// 定义 props
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// 定义 emits
+const emit = defineEmits(['update:modelValue', 'change', 'tab-click'])
+
+// 使用类名 Hook
+const { mergedAttrs } = useClassName()
+
+// 内部状态
+const activeTab = ref(props.modelValue)
+
+// 计算 tabs 数据
+const tabs = computed(() => {
+  return props.options.map(option => {
+    if (typeof option === 'string') {
+      return { label: option, name: option, disabled: false }
+    }
+    return {
+      label: option.label || option.name || '',
+      name: option.name || option.label || '',
+      disabled: option.disabled || false
+    }
+  })
+})
+
+// 处理 tab 点击
+const handleTabClick = (tabName, isDisabled) => {
+  if (isDisabled || props.disabled || tabName === activeTab.value) {
+    return
+  }
+  
+  const oldValue = activeTab.value
+  activeTab.value = tabName
+  emit('update:modelValue', tabName)
+  emit('change', tabName, oldValue)
+  emit('tab-click', tabName)
+}
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== activeTab.value) {
+    activeTab.value = newValue
+  }
+})
+
+// 提供给子组件的方法
+provide('tabCardContext', {
+  activeTab,
+  handleTabClick
+})
+</script>
+
+<style lang="scss" scoped>
+.m-tab-card {
+  display: inline-block;
+  
+  &.is-disabled {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  &__container {
+    display: flex;
+    background-color: var(--bg-tertiary-hover, #2a2a2a);
+    border-radius: var(--md);
+    padding: 4px;
+    gap: 0;
+  }
+}
+</style>

package/packages/components/TabCard/TabCardItem.vue

@@ -1,102 +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;
-  padding: 8px 16px;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  user-select: none;
-  background-color: transparent;
-  min-width: 80px;
-  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-primary, #1a1a1a);
-    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>
+<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>