新主题

src/global/components/hc-new-card/hc-new-card.vue

@@ -1,152 +0,0 @@
-<template>
-    <HcCard class="hc-new-card-box" :class="padding ? 'is-padding' : ''">
-        <template v-if="isSlotHeader || titles || isSlotExtra || extraText">
-            <div class="hc-card-header-box">
-                <div class="hc-card-header">
-                    <div v-if="!isSlotHeader && titles" class="title">{{ titles }}</div>
-                    <slot v-if="isSlotHeader" name="header" />
-                </div>
-                <div v-if="isSlotExtra || extraText" class="hc-card-header-extra">
-                    <div v-if="!isSlotExtra && extraText" class="extra">{{ extraText }}</div>
-                    <slot v-if="isSlotExtra" name="extra" />
-                </div>
-            </div>
-        </template>
-        <div v-if="isSlotSearchBar" class="hc-card-search-bar">
-            <slot name="search" />
-        </div>
-        <div class="hc-card-main">
-            <div class="hc-card-main-body">
-                <template v-if="scrollbar">
-                    <el-scrollbar>
-                        <slot />
-                    </el-scrollbar>
-                </template>
-                <template v-else>
-                    <slot />
-                </template>
-            </div>
-        </div>
-        <div v-if="isSlotAction" class="hc-card-action">
-            <slot name="action" />
-        </div>
-    </HcCard>
-</template>
-
-<script setup>
-import { ref, useSlots, watch } from 'vue'
-const props = defineProps({
-    ui: {
-        type: String,
-        default: '',
-    },
-    title: {
-        type: [String, Number],
-        default: '',
-    },
-    extraText: {
-        type: [String, Number],
-        default: '',
-    },
-    scrollbar: {
-        type: Boolean,
-        default: false,
-    },
-    actionSize: {
-        type: [String, Number],
-        default: 'lg',
-    },
-    idRef: {
-        type: [String, Number],
-        default: '',
-    },
-    bodyUi: {
-        type: String,
-        default: '',
-    },
-    actionUi: {
-        type: String,
-        default: '',
-    },
-    padding: {
-        type: Boolean,
-        default: true,
-    },
-})
-
-const titles = ref(props.title)
-
-//监听
-watch(() => props.title, (val) => {
-    titles.value = val ?? ''
-})
-
-//判断<slot>是否有传值
-const slots = useSlots()
-const isSlotHeader = ref(!!slots.header)
-const isSlotExtra = ref(!!slots.extra)
-const isSlotAction = ref(!!slots.action)
-const isSlotSearchBar = ref(!!slots.search)
-</script>
-
-<style lang="scss">
-.el-card.hc-new-card-box {
-    background: white;
-    --el-card-padding: 10px;
-    .hc-card-main-box {
-        display: flex;
-        flex-direction: column;
-    }
-    .hc-card-header-box {
-        position: relative;
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-        height: auto;
-        border-bottom: 1px solid #E9E9E9;
-        margin-bottom: 10px;
-        .hc-card-header {
-            position: relative;
-            flex: 1;
-            display: flex;
-            align-items: center;
-            .title {
-
-            }
-        }
-        .hc-card-header-extra {
-            position: relative;
-            display: flex;
-            align-items: center;
-            margin-left: 24px;
-            .extra {
-
-            }
-        }
-    }
-    .hc-card-search-bar {
-        position: relative;
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-        margin-bottom: 10px;
-    }
-    .hc-card-main {
-        position: relative;
-        flex: 1;
-        flex-basis: auto;
-        .hc-card-main-body {
-            position: absolute;
-            inset: 0;
-        }
-    }
-    .hc-card-action {
-        position: relative;
-        flex-shrink: 0;
-        padding-top: 8px;
-    }
-    &.is-padding .hc-card-header-box {
-        padding-bottom: 8px;
-    }
-}
-</style>

src/global/components/hc-tab-card/hc-tab-card.vue

@@ -1,121 +0,0 @@
-<template>
-    <HcNewCard :padding="false" :scrollbar="scrollbar" class="hc-tab-card-box">
-        <template #header>
-            <div class="tab-card-header-tabs">
-                <template v-for="item in tabsData" :key="item.key">
-                    <div class="item" :class="item.key === tabsKey ? 'cur' : ''" @click="tabsClick(item)">{{ item.name }}</div>
-                </template>
-            </div>
-        </template>
-        <template v-if="isSlotExtra" #extra>
-            <slot name="extra" />
-        </template>
-        <template v-if="isSlotSearch" #search>
-            <slot name="search" />
-        </template>
-        <slot />
-        <template v-if="isSlotAction" #action>
-            <slot name="action" />
-        </template>
-    </HcNewCard>
-</template>
-
-<script setup>
-import { ref, useSlots, watch } from 'vue'
-
-const props = defineProps({
-    tabs: {
-        type: Array,
-        default: () => ([]),
-    },
-    tabKey: {
-        type: [String, Number],
-        default: '1',
-    },
-    scrollbar: {
-        type: Boolean,
-        default: false,
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-})
-
-const emit = defineEmits(['change'])
-
-//判断<slot>是否有传值
-const slots = useSlots()
-const isSlotExtra = ref(!!slots.extra)
-const isSlotAction = ref(!!slots.action)
-const isSlotSearch = ref(!!slots.search)
-
-//监听表头
-const tabsData = ref(props.tabs)
-watch(() => props.tabs, (val) => {
-    tabsData.value = val
-}, { deep: true })
-
-//选项卡禁用
-const isDisabled = ref(props.disabled)
-watch(() => props.disabled, (val) => {
-    isDisabled.value = val
-}, { deep: true })
-
-//选项卡
-const tabsKey = ref(props.tabKey)
-watch(() => props.tabKey, (val) => {
-    tabsKey.value = val
-}, { deep: true })
-const tabsClick = (item) => {
-    if (isDisabled.value) return
-    tabsKey.value = item.key
-    if (item.key !== props.tabKey) {
-        emit('change', item)
-    }
-}
-</script>
-
-<style lang="scss">
-.el-card.hc-tab-card-box {
-    .hc-card-header-box {
-        border-color: #d4d4d4;
-        margin-top: -5px;
-    }
-    .tab-card-header-tabs {
-        position: relative;
-        display: flex;
-        align-items: center;
-        flex: 1;
-        .item {
-            position: relative;
-            height: 38px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 0 8px;
-            color: #747474;
-            cursor: pointer;
-            border: 1px solid white;
-            border-bottom: 0;
-            transition: .2s;
-        }
-        .item.cur {
-            cursor: default;
-            color: var(--el-color-primary);
-            background: white;
-            border-color: #d4d4d4;
-            &::after {
-                position: absolute;
-                content: '';
-                left: 0;
-                right: 0;
-                bottom: -1px;
-                height: 1px;
-                background: white;
-                z-index: 1;
-            }
-        }
-    }
-}
-</style>

src/global/components/index.js

@@ -5,8 +5,6 @@ import HcTasksUser from './hc-tasks-user/index.vue'
 import HcTableForm from './table-form/index.vue'
 import HcUploads from './hc-uploads/index.vue'
 import HcSmsAuth from './hc-sms-auth/index.vue'
-import HcNewCard from './hc-new-card/hc-new-card.vue'
-import HcTabCard from './hc-tab-card/hc-tab-card.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -17,6 +15,4 @@ export const setupComponents = (App) => {
     App.component('HcTableForm', HcTableForm)
     App.component('HcUploads', HcUploads)
     App.component('HcSmsAuth', HcSmsAuth)
-    App.component('HcNewCard', HcNewCard)
-    App.component('HcTabCard', HcTabCard)
 }