@mc-markets/ui 1.0.64 → 1.0.67

package/packages/components/Switch/Switch.vue

@@ -0,0 +1,134 @@
+<template>
+  <el-switch v-bind="mergedAttrs" :popper-class="popperClass" class="m-switch">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-switch>
+</template>
+
+<script setup>
+import { useClassName } from "@packages/hooks/useClassName.js"
+
+defineOptions({
+  name: 'MSwitch'
+})
+
+// 定义props
+const props = defineProps({
+  popperClass: {
+    type: String,
+    default: ''
+  }
+})
+
+// 使用类名 Hook
+const { mergedAttrs, className: popperClass } = useClassName('mc-switch-popper')
+</script>
+
+<style lang="scss">
+// Switch popper-class 样式
+// .mc-switch-popper {
+//   自定义开关样式可以在这里添加
+// }
+
+// 自定义主题示例
+.mc-switch-custom {
+  .el-switch__core {
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    border-color: #667eea;
+    
+    &:after {
+      background: white;
+    }
+  }
+  
+  &.is-checked .el-switch__core {
+    background: linear-gradient(45deg, #4c63d2, #5d3a7e);
+    border-color: #4c63d2;
+  }
+}
+
+.mc-switch-success {
+  .el-switch__core {
+    background-color: #67c23a;
+    border-color: #67c23a;
+    
+    &:after {
+      background: white;
+    }
+  }
+  
+  &.is-checked .el-switch__core {
+    background-color: #529b2e;
+    border-color: #529b2e;
+  }
+}
+
+.mc-switch-warning {
+  .el-switch__core {
+    background-color: #e6a23c;
+    border-color: #e6a23c;
+    
+    &:after {
+      background: white;
+    }
+  }
+  
+  &.is-checked .el-switch__core {
+    background-color: #c8951f;
+    border-color: #c8951f;
+  }
+}
+
+.mc-switch-danger {
+  .el-switch__core {
+    background-color: #f56c6c;
+    border-color: #f56c6c;
+    
+    &:after {
+      background: white;
+    }
+  }
+  
+  &.is-checked .el-switch__core {
+    background-color: #f24545;
+    border-color: #f24545;
+  }
+}
+
+// 特殊样式变体
+.mc-switch-gradient {
+  .el-switch__core {
+    background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
+    border: none;
+    
+    &:after {
+      background: white;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+  }
+  
+  &.is-checked .el-switch__core {
+    background: linear-gradient(90deg, #4ecdc4, #45b7d1);
+  }
+}
+
+.mc-switch-neon {
+  .el-switch__core {
+    background-color: #1a1a1a;
+    border: 2px solid #00ffff;
+    box-shadow: 0 0 10px #00ffff;
+    
+    &:after {
+      background: #00ffff;
+      box-shadow: 0 0 5px #00ffff;
+    }
+  }
+  
+  &.is-checked .el-switch__core {
+    background-color: #00ffff;
+    border-color: #00ffff;
+    box-shadow: 0 0 15px #00ffff;
+  }
+}
+</style>

package/packages/components/Table/Table.vue

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

package/packages/components/Table/TableColumn.vue

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

package/packages/components/Tabs/TabPane.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    v-show="active"
+    class="m-tab-pane"
+    :class="{
+      'm-tab-pane--active': active,
+      'm-tab-pane--disabled': disabled
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { inject, computed, onMounted, onUnmounted, useSlots } from 'vue'
+
+// 定义 props
+const props = defineProps({
+  // 选项卡标题
+  label: {
+    type: String,
+    default: ''
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 选项卡名称，用于标识
+  name: {
+    type: [String, Number],
+    default: ''
+  },
+  // 是否可关闭
+  closable: {
+    type: Boolean,
+    default: false
+  },
+  // 是否延迟渲染
+  lazy: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 获取插槽
+const slots = useSlots()
+
+// 注入父组件上下文
+const tabsContext = inject('tabsContext')
+
+// 计算是否激活
+const active = computed(() => {
+  if (!tabsContext) return false
+  return tabsContext.activeName === (props.name || tabsContext.tabIndex)
+})
+
+// 组件挂载时注册到父组件
+onMounted(() => {
+  if (tabsContext) {
+    const tabData = {
+      name: props.name,
+      label: props.label,
+      disabled: props.disabled,
+      closable: props.closable,
+      $slots: slots
+    }
+    tabsContext.registerTab(tabData)
+  }
+})
+
+// 组件卸载时从父组件中移除
+onUnmounted(() => {
+  if (tabsContext) {
+    tabsContext.unregisterTab(props.name)
+  }
+})
+
+// 定义组件名称
+defineOptions({
+  name: 'MTabPane'
+})
+</script>
+
+<style scoped lang="scss">
+.m-tab-pane {
+  display: none;
+  
+  &--active {
+    display: block;
+  }
+  
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+</style>

package/packages/components/Tabs/Tabs.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="m-tabs" :class="[`m-tabs--${type}`, `m-tabs--${tabPosition}`]">
+    <div class="m-tabs__header">
+      <div class="m-tabs__nav">
+        <div
+          v-for="(tab, index) in tabs"
+          :key="tab.name || index"
+          :class="[
+            'm-tabs__item',
+            {
+              'm-tabs__item--active': activeName === (tab.name || index),
+              'm-tabs__item--disabled': tab.disabled,
+              'm-tabs__item--closable': tab.closable
+            }
+          ]"
+          @click="handleTabClick(tab, index)"
+        >
+          <span class="m-tabs__item-text">
+            <slot v-if="tab.$slots?.label" :name="`tab-${tab.name || index}`" />
+            <span v-else>{{ tab.label }}</span>
+          </span>
+          <span
+            v-if="tab.closable"
+            class="m-tabs__item-close"
+            @click.stop="handleTabClose(tab, index)"
+          >
+            <m-icon name="lucide-x" :size="12" />
+          </span>
+        </div>
+        
+        <!-- 添加按钮 -->
+        <div
+          v-if="addable || editable"
+          class="m-tabs__item m-tabs__item--add"
+          @click="handleTabAdd"
+        >
+          <m-icon name="plus" :size="12" />
+        </div>
+      </div>
+    </div>
+    
+    <div class="m-tabs__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, provide, computed, useSlots, watch, nextTick } from 'vue'
+import MIcon from '../Icon/Icon.vue'
+
+// 定义 props
+const props = defineProps({
+  // 当前激活的标签页
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  // 标签页类型
+  type: {
+    type: String,
+    default: '',
+    validator: (value) => ['', 'card', 'border-card'].includes(value)
+  },
+  // 标签位置
+  tabPosition: {
+    type: String,
+    default: 'top',
+    validator: (value) => ['top', 'right', 'bottom', 'left'].includes(value)
+  },
+  // 是否可关闭
+  closable: {
+    type: Boolean,
+    default: false
+  },
+  // 是否可添加
+  addable: {
+    type: Boolean,
+    default: false
+  },
+  // 是否可编辑（同时可添加和关闭）
+  editable: {
+    type: Boolean,
+    default: false
+  },
+  // 标签宽度是否自撑开
+  stretch: {
+    type: Boolean,
+    default: false
+  },
+  // 切换前的钩子函数
+  beforeLeave: {
+    type: Function,
+    default: null
+  }
+})
+
+// 定义 emits
+const emit = defineEmits(['update:modelValue', 'tab-click', 'tab-change', 'tab-remove', 'tab-add', 'edit'])
+
+// 获取插槽
+const slots = useSlots()
+
+// 响应式数据
+const tabs = ref([])
+const activeName = ref(props.modelValue)
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (newVal) => {
+  activeName.value = newVal
+})
+
+// 监听 activeName 变化
+watch(activeName, (newVal) => {
+  emit('update:modelValue', newVal)
+  emit('tab-change', newVal)
+})
+
+// 提供上下文给子组件
+provide('tabsContext', {
+  registerTab: (tab) => {
+    const index = tabs.value.findIndex(t => t.name === tab.name)
+    if (index >= 0) {
+      tabs.value[index] = tab
+    } else {
+      tabs.value.push(tab)
+    }
+    
+    // 如果没有指定 activeName，默认选中第一个
+    if (!activeName.value && tabs.value.length > 0) {
+      activeName.value = tabs.value[0].name || 0
+    }
+  },
+  unregisterTab: (name) => {
+    const index = tabs.value.findIndex(tab => tab.name === name)
+    if (index >= 0) {
+      tabs.value.splice(index, 1)
+    }
+  }
+})
+
+// 处理标签点击
+const handleTabClick = async (tab, index) => {
+  if (tab.disabled) return
+  
+  const tabName = tab.name || index
+  
+  // 如果点击的是当前激活的标签，直接返回
+  if (activeName.value === tabName) return
+  
+  // 执行 beforeLeave 钩子
+  if (props.beforeLeave) {
+    try {
+      const result = await props.beforeLeave(activeName.value, tabName)
+      if (result === false) return
+    } catch (error) {
+      return
+    }
+  }
+  
+  activeName.value = tabName
+  emit('tab-click', { name: tabName, index, disabled: tab.disabled })
+}
+
+// 处理标签关闭
+const handleTabClose = (tab, index) => {
+  const tabName = tab.name || index
+  emit('tab-remove', tabName)
+  emit('edit', tabName, 'remove')
+}
+
+// 处理添加标签
+const handleTabAdd = () => {
+  emit('tab-add')
+  emit('edit', '', 'add')
+}
+
+// 暴露方法给父组件
+defineExpose({
+  activeName: computed(() => activeName.value)
+})
+</script>
+
+<style scoped lang="scss">
+.m-tabs {
+  display: flex;
+  flex-direction: column;
+  
+  &--left {
+    flex-direction: row;
+  }
+  
+  &--right {
+    flex-direction: row-reverse;
+  }
+  
+  &--bottom {
+    flex-direction: column-reverse;
+  }
+
+  &__header {
+    flex-shrink: 0;
+  }
+
+  &__nav {
+    display: flex;
+    border-bottom: 1px solid var(--el-border-color);
+    position: relative;
+    
+    .m-tabs--card &,
+    .m-tabs--border-card & {
+      border-bottom: none;
+    }
+    
+    .m-tabs--left &,
+    .m-tabs--right & {
+      flex-direction: column;
+      border-bottom: none;
+      border-right: 1px solid var(--el-border-color);
+      width: 120px;
+    }
+    
+    .m-tabs--right & {
+      border-right: none;
+      border-left: 1px solid var(--el-border-color);
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-bottom: none;
+    background: transparent;
+    color: var(--el-text-color-regular);
+    font-size: 14px;
+    transition: all 0.3s ease;
+    position: relative;
+    flex-shrink: 0;
+    
+    &:hover {
+      color: var(--el-color-primary);
+    }
+    
+    &--active {
+      color: var(--el-color-primary);
+      border-color: var(--el-border-color);
+      border-bottom-color: var(--el-bg-color);
+      background: var(--el-bg-color);
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: var(--el-color-primary);
+      }
+    }
+    
+    &--disabled {
+      color: var(--el-text-color-disabled);
+      cursor: not-allowed;
+      
+      &:hover {
+        color: var(--el-text-color-disabled);
+      }
+    }
+    
+    &--closable {
+      padding-right: 24px;
+    }
+    
+    &--add {
+      padding: 8px 12px;
+      border: 1px dashed var(--el-border-color);
+      color: var(--el-text-color-regular);
+      
+      &:hover {
+        color: var(--el-color-primary);
+        border-color: var(--el-color-primary);
+      }
+    }
+    
+    // 卡片风格
+    .m-tabs--card & {
+      border: 1px solid var(--el-border-color);
+      border-bottom: none;
+      margin-right: 2px;
+      
+      &--active {
+        border-bottom-color: var(--el-bg-color);
+        background: var(--el-bg-color);
+        
+        &::after {
+          display: none;
+        }
+      }
+    }
+    
+    // 边框卡片风格
+    .m-tabs--border-card & {
+      border: 1px solid var(--el-border-color);
+      border-bottom: none;
+      margin-right: -1px;
+      background: var(--el-fill-color-light);
+      
+      &--active {
+        background: var(--el-bg-color);
+        border-bottom-color: var(--el-bg-color);
+        
+        &::after {
+          display: none;
+        }
+      }
+    }
+    
+    // 左侧和右侧位置
+    .m-tabs--left &,
+    .m-tabs--right & {
+      border-bottom: 1px solid var(--el-border-color);
+      border-right: none;
+      
+      &--active {
+        border-bottom-color: var(--el-border-color);
+        border-right-color: var(--el-bg-color);
+        
+        &::after {
+          display: none;
+        }
+      }
+    }
+    
+    .m-tabs--right & {
+      border-bottom: 1px solid var(--el-border-color);
+      border-left: none;
+      
+      &--active {
+        border-bottom-color: var(--el-border-color);
+        border-left-color: var(--el-bg-color);
+      }
+    }
+  }
+
+  &__item-text {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__item-close {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    transition: background-color 0.2s ease;
+    
+    &:hover {
+      background-color: var(--el-fill-color);
+    }
+  }
+
+  &__content {
+    flex: 1;
+    padding: 16px 0;
+    
+    .m-tabs--card &,
+    .m-tabs--border-card & {
+      padding: 16px;
+      border: 1px solid var(--el-border-color);
+      border-top: none;
+    }
+    
+    .m-tabs--border-card & {
+      background: var(--el-bg-color);
+    }
+    
+    .m-tabs--left &,
+    .m-tabs--right & {
+      flex: 1;
+      padding: 0 0 0 16px;
+    }
+    
+    .m-tabs--right & {
+      padding: 0 16px 0 0;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .m-tabs {
+    &__item {
+      padding: 6px 12px;
+      font-size: 13px;
+    }
+    
+    &--left &__nav,
+    &--right &__nav {
+      width: 100px;
+    }
+  }
+}
+</style>