feat：新增卡片、状态组件

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ABadge: typeof import('ant-design-vue/es')['Badge']
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -37,7 +38,10 @@ declare module '@vue/runtime-core' {
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     AUpload: typeof import('ant-design-vue/es')['Upload']
+    BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
+    CardBox: typeof import('./src/components/CardBox/index.vue')['default']
     GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/BadgeStatus/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <a-badge
+        :status="statusNames ? statusNames[status] : 'default'"
+        :text="text"
+    ></a-badge>
+</template>
+
+<script setup lang="ts">
+import { StatusColorEnum } from '@/utils/consts.ts';
+
+const props = defineProps({
+    text: {
+        type: String,
+    },
+    status: {
+        type: String || Number,
+        default: 'default',
+        validator: (value) => {
+            // 这个值必须匹配下列字符串中的一个
+            return Object.keys(StatusColorEnum).includes(value);
+        },
+    },
+    /**
+     * 自定义status值颜色
+     * @example {
+     *   1: 'success',
+     *   0: 'error'
+     * }
+     */
+    statusNames: { type: Object },
+});
+
+</script>

src/components/CardBox/index.vue

@@ -0,0 +1,382 @@
+<template>
+    <div class="card">
+        <div
+            class="card-warp"
+            :class="{
+                hover: maskShow ? 'hover' : '',
+                active: actived ? 'active' : '',
+            }"
+            @click="handleClick"
+        >
+            <div
+                class="card-content"
+                @mouseenter="setMaskShow(true)"
+                @mouseleave="setMaskShow(false)"
+            >
+                <a-row>
+                    <a-col :span="6">
+                        <!-- 图片 -->
+                        <div class="card-item-avatar">
+                            <slot name="img"> </slot>
+                        </div>
+                    </a-col>
+                    <a-col :span="18">
+                        <!-- 内容 -->
+                        <slot name="content"></slot>
+                    </a-col>
+                </a-row>
+
+                <!-- 勾选 -->
+                <div v-if="actived" class="checked-icon">
+                    <div>
+                        <CheckOutlined />
+                    </div>
+                </div>
+
+                <!-- 状态 -->
+                <div
+                    v-if="showStatus"
+                    class="card-state"
+                    :class="statusNames ? statusNames[status] : ''"
+                >
+                    <div class="card-state-content">
+                        <BadgeStatus
+                            :status="status"
+                            :text="statusText"
+                            :statusNames="statusNames"
+                        ></BadgeStatus>
+                    </div>
+                </div>
+
+                <!-- 遮罩层 -->
+                <div
+                    v-if="showMask"
+                    class="card-mask"
+                    :class="maskShow ? 'show' : ''"
+                >
+                    <slot name="mask"></slot>
+                </div>
+            </div>
+        </div>
+
+        <!-- 按钮 -->
+        <slot name="botton-tool">
+            <div v-if="showTool" class="card-tools">
+                <div
+                    v-for="item in actions"
+                    :key="item.key"
+                    class="card-button"
+                    :class="{
+                        delete: item.key === 'delete',
+                    }"
+                >
+                    <a-tooltip v-if="item.disabled === true">
+                        <template #title>{{ item.message }}</template>
+                        <a-button :disabled="item.disabled">
+                            <template #icon><SearchOutlined /></template>
+                            <span>{{ item.label }}</span>
+                        </a-button>
+                    </a-tooltip>
+
+                    <a-button v-else :disabled="item.disabled">
+                        <template #icon><SearchOutlined /></template>
+                        <span>{{ item.label }}</span>
+                    </a-button>
+                </div>
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { SearchOutlined, CheckOutlined } from '@ant-design/icons-vue';
+import BadgeStatus from '@/components/BadgeStatus/index.vue';
+import { StatusColorEnum } from '@/utils/consts.ts';
+
+type EmitProps = {
+    (e: 'update:modelvalue', data: string | number): void;
+    (e: 'actived', data: boolean): void;
+};
+
+const emit = defineEmits<EmitProps>();
+
+const props = defineProps({
+    showStatus: {
+        type: Boolean,
+        default: true,
+    },
+    showTool: {
+        type: Boolean,
+        default: true,
+    },
+    showMask: {
+        type: Boolean,
+        default: true,
+    },
+    statusText: {
+        type: String,
+        default: '正常',
+    },
+    status: {
+        type: [String, Number],
+        default: 'default',
+    },
+    statusNames: {
+        type: Object,
+    },
+    actions: {
+        type: Array as any,
+        default: () => [],
+    },
+});
+
+const maskShow = ref(false);
+const actived = ref(false);
+
+const setMaskShow = (val: boolean) => {
+    maskShow.value = val;
+};
+
+const handleClick = () => {
+    actived.value = !actived.value;
+    emit('actived', actived.value);
+};
+</script>
+
+<style lang="less" scoped>
+.card {
+    width: 100%;
+    background-color: #fff;
+    .checked-icon {
+        position: absolute;
+        right: -22px;
+        bottom: -22px;
+        z-index: 2;
+        width: 44px;
+        height: 44px;
+        color: #fff;
+        background-color: red;
+        background-color: #2f54eb;
+        transform: rotate(-45deg);
+
+        > div {
+            position: relative;
+            height: 100%;
+            transform: rotate(45deg);
+
+            > span {
+                position: absolute;
+                top: 6px;
+                left: 6px;
+                font-size: 12px;
+            }
+        }
+    }
+
+    .card-warp {
+        position: relative;
+        border: 1px solid #e6e6e6;
+
+        &.hover {
+            cursor: pointer;
+            box-shadow: 0 0 24px rgba(#000, 0.1);
+        }
+
+        &.active {
+            position: relative;
+            border: 1px solid #2f54eb;
+        }
+
+        .card-content {
+            position: relative;
+            padding: 30px 12px 16px 30px;
+            overflow: hidden;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 30px + 10px;
+                display: block;
+                width: 15%;
+                min-width: 64px;
+                height: 2px;
+                background-image: url('/images/rectangle.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                content: ' ';
+            }
+
+            .card-item-avatar {
+                margin-right: 16px;
+            }
+
+            .card-state {
+                position: absolute;
+                top: 30px;
+                right: -12px;
+                display: flex;
+                justify-content: center;
+                width: 100px;
+                padding: 2px 0;
+                background-color: rgba(#5995f5, 0.15);
+                transform: skewX(45deg);
+
+                &.success {
+                    background-color: @success-color-deprecated-bg;
+                }
+
+                &.warning {
+                    background-color: rgba(#ff9000, 0.1);
+                }
+
+                &.error {
+                    background-color: rgba(#e50012, 0.1);
+                }
+
+                .card-state-content {
+                    transform: skewX(-45deg);
+                }
+            }
+        }
+
+        .card-mask {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            color: #fff;
+            background-color: rgba(#000, 0);
+            visibility: hidden;
+            cursor: pointer;
+            transition: all 0.3s;
+
+            > div {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                padding: 0 !important;
+            }
+
+            &.show {
+                background-color: rgba(#000, 0.5);
+                visibility: visible;
+            }
+        }
+    }
+
+    &.item-active {
+        position: relative;
+        color: #2f54eb;
+
+        .checked-icon {
+            display: block;
+        }
+
+        .card-warp {
+            border: 1px solid #2f54eb;
+        }
+    }
+
+    .card-tools {
+        display: flex;
+        margin-top: 8px;
+
+        .card-button {
+            display: flex;
+            flex-grow: 1;
+
+            > span,
+            & button {
+                width: 100%;
+                border-radius: 0;
+            }
+
+            button {
+                background: #f6f6f6;
+                border: 1px solid #e6e6e6;
+                color: #2f54eb;
+
+                &:hover {
+                    background-color: @primary-color-hover;
+                    border-color: @primary-color-hover;
+
+                    span {
+                        color: #fff !important;
+                    }
+                }
+
+                &:active {
+                    background-color: @primary-color-active;
+                    border-color: @primary-color-active;
+
+                    span {
+                        color: #fff !important;
+                    }
+                }
+            }
+
+            &:not(:last-child) {
+                margin-right: 8px;
+            }
+
+            &.delete {
+                flex-basis: 60px;
+                flex-grow: 0;
+
+                button {
+                    background: @error-color-deprecated-bg;
+                    border: 1px solid @error-color-outline;
+
+                    span {
+                        color: @error-color !important;
+                    }
+
+                    &:hover {
+                        background-color: @error-color-hover;
+
+                        span {
+                            color: #fff !important;
+                        }
+                    }
+
+                    &:active {
+                        background-color: @error-color-active;
+
+                        span {
+                            color: #fff !important;
+                        }
+                    }
+                }
+            }
+
+            button[disabled] {
+                background: @disabled-bg;
+                border-color: @disabled-color;
+
+                span {
+                    color: @disabled-color !important;
+                }
+
+                &:hover {
+                    background-color: @disabled-active-bg;
+                }
+
+                &:active {
+                    background-color: @disabled-active-bg;
+                }
+            }
+
+            :deep(.ant-tooltip-disabled-compatible-wrapper) {
+                width: 100%;
+            }
+        }
+    }
+}
+</style>

src/utils/consts.ts

@@ -17,3 +17,14 @@ export const STATE_COLOR = {
     // 已停止
     'stopped': '#F2994A'
 }
+
+/**
+ * 卡片组件状态
+ */
+export const StatusColorEnum = {
+  'success': 'success',
+  'error': 'error',
+  'processing': 'processing',
+  'warning': 'warning',
+  'default': 'default',
+}

src/views/demo/index.vue

@@ -3,13 +3,78 @@
     <div class="page-container">
         父级: {{ testValue }}
         <ViewItem v-model="testValue" />
+        <!-- 卡片 -->
+        <br />卡片组件：
+        <a-row :gutter="20">
+            <a-col :span="6">
+                <CardBox
+                    status="disable"
+                    :statusNames="{ disable: StatusColorEnum.error }"
+                    statusText="正常"
+                    :showMask="false"
+                    :actions="actions"
+                >
+                    <template #img>
+                        <img :src="getImage('/device-product.png')" />
+                    </template>
+                    <template #content>
+                        <div class="card-item-heard-name">设备名称</div>
+                        <a-row>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    设备类型
+                                </div>
+                                <div>直连设备</div>
+                            </a-col>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    产品名称
+                                </div>
+                                <div>测试固定地址</div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                </CardBox>
+            </a-col>
+        </a-row>
     </div>
 </template>
 
 <script setup lang="ts">
 import ViewItem from '@/components/ValueItem/index.vue';
+import CardBox from '@/components/CardBox/index.vue';
+import { StatusColorEnum } from '@/utils/consts';
+import { getImage } from '@/utils/comm';
 
 const testValue = ref('');
+// 卡片按钮
+const actions = ref([
+    {
+        key: 'check',
+        label: '查看',
+    },
+    {
+        key: 'edit',
+        label: '编辑',
+        disabled: true,
+        message: '暂无权限，请联系管理员',
+    },
+    {
+        key: 'delete',
+        label: '删除',
+    },
+]);
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.card-item-heard-name {
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 12px;
+}
+
+.card-item-content-text {
+    color: rgba(0, 0, 0, 0.75);
+    font-size: 12px;
+}
+</style>