twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 00:18:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: card list demo (#242)

Browse Source
This commit is contained in:
一万 2022-04-13 21:31:36 +08:00 committed by GitHub
parent 160db34fa0
commit c89620159a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 1021 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/en.yaml
View File

@ -74,3 +74,5 @@ menus:
hsAntTabs: Imitate Antdv Tabs
hsAntAnchor: Imitate Antdv Anchor
hsAntTreeSelect: Imitate Antdv TreeSelector
list: List Page
listCard: Card List page

2
locales/zh-CN.yaml
View File

@ -74,3 +74,5 @@ menus:
hsAntTabs: 仿antdv标签页
hsAntAnchor: 仿antdv锚点
hsAntTreeSelect: 仿antdv树型选择器
list: 列表页
listCard: 卡片列表页

2
mock/asyncRoutes.ts
View File

@ -127,7 +127,7 @@ const tabsRouter = {
icon: "IF-team-icontabs",
title: "menus.hstabs",
i18n: true,
rank: 12
rank: 13
},
children: [
{

456
mock/list.ts Normal file
View File

@ -0,0 +1,456 @@
import { MockMethod } from "vite-plugin-mock";
export default [
{
url: "/getCardList",
method: "post",
response: () => {
return {
code: 0,
data: {
list: [
{
index: 1,
isSetup: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "SSL证书",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 2,
isSetup: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "人脸识别",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 3,
isSetup: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "CVM",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 4,
isSetup: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "SSL证书",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 5,
isSetup: true,
type: 3,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
name: "SSL证书",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 6,
isSetup: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "T-Sec 云防火墙",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 7,
isSetup: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "CVM",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 8,
isSetup: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "SSL证书",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 9,
isSetup: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "SSL证书",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 10,
isSetup: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "CVM",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 11,
isSetup: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "云数据库",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 12,
isSetup: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "SSL证书",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 13,
isSetup: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
name: "云数据库",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 14,
isSetup: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "SSL证书",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
},
{
index: 15,
isSetup: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "云数据库",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 16,
isSetup: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "CVM",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
},
{
index: 17,
isSetup: false,
type: 5,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
name: "云数据库",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 18,
isSetup: false,
type: 4,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
name: "云数据库",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 19,
isSetup: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "CVM",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 20,
isSetup: true,
type: 4,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
name: "SSL证书",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 21,
isSetup: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "云数据库",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 22,
isSetup: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
name: "CVM",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 23,
isSetup: true,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "人脸识别",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
},
{
index: 24,
isSetup: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "人脸识别",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
},
{
index: 25,
isSetup: false,
type: 5,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
name: "CVM",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 26,
isSetup: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "SSL证书",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 27,
isSetup: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "CVM",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 28,
isSetup: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "云数据库",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
},
{
index: 29,
isSetup: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
name: "CVM",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 30,
isSetup: true,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "CVM",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 31,
isSetup: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "CVM",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
},
{
index: 32,
isSetup: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "T-Sec 云防火墙",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 33,
isSetup: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "CVM",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 34,
isSetup: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "SSL证书",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 35,
isSetup: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "云数据库",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
},
{
index: 36,
isSetup: false,
type: 4,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
name: "SSL证书",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 37,
isSetup: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "CVM",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 38,
isSetup: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "云数据库",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 39,
isSetup: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "人脸识别",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 40,
isSetup: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "CVM",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 41,
isSetup: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "T-Sec 云防火墙",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 42,
isSetup: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "T-Sec 云防火墙",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 43,
isSetup: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
name: "SSL证书",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 44,
isSetup: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
name: "SSL证书",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 45,
isSetup: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "T-Sec 云防火墙",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 46,
isSetup: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "SSL证书",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 47,
isSetup: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
name: "SSL证书",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 48,
isSetup: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
name: "T-Sec 云防火墙",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
}
]
},
msg: ""
};
}
}
] as MockMethod[];

12
src/api/list.ts Normal file
View File

@ -0,0 +1,12 @@
import { http } from "../utils/http";
interface postType extends Promise<any> {
data?: object;
code?: number;
msg?: string;
}
// 卡片列表
export const getCardList = (data?: object): postType => {
return http.request("post", "/getCardList", { data });
};

1
src/assets/svg/calendar.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar" data-v-7be81122=""><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fillOpacity="0.9"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

1
src/assets/svg/laptop.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-laptop" data-v-7be81122=""><path fill="currentColor" d="M2.5 12a1 1 0 01-1-1V4a1 1 0 011-1h11a1 1 0 011 1v7a1 1 0 01-1 1h-11zm0-1h11V4h-11v7zM15 13H1v1h14v-1z" fillOpacity="0.9"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

1
src/assets/svg/service.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-service" data-v-7be81122=""><path fill="currentColor" d="M2.52 6.37a5.5 5.5 0 0110.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 019 14.7H8v-1h1a3.5 3.5 0 003.4-2.7h-1.9a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 00-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-4c0-.04 0-.09.02-.13zM12.5 7H11v3h1.5V7zm-9 0v3H5V7H3.5z" fillOpacity="0.9"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 449 B

1
src/assets/svg/shop.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-shop" data-v-7be81122=""><path fill="currentColor" d="M8 1a2.5 2.5 0 00-2.5 2.5V5h-2a.5.5 0 00-.5.5v9c0 .28.22.5.5.5h9a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5h-2V3.5A2.5 2.5 0 008 1zm1.5 5v2h1V6H12v8H4V6h1.5v2h1V6h3zm0-1h-3V3.5a1.5 1.5 0 113 0V5z" fillOpacity="0.9"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B

1
src/assets/svg/user_avatar.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-user-avatar" data-v-7be81122=""><path fill="currentColor" d="M8 10.5c1.24 0 2.42.31 3.5.88v1.12h1v-1.14a.94.94 0 00-.49-.84 8.48 8.48 0 00-8.02 0 .94.94 0 00-.49.84v1.14h1v-1.12A7.47 7.47 0 018 10.5zM10.5 6a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm-1 0a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"></path><path fill="currentColor" d="M2.5 1.5a1 1 0 00-1 1v11a1 1 0 001 1h11a1 1 0 001-1v-11a1 1 0 00-1-1h-11zm11 1v11h-11v-11h11z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 508 B

10
src/components/ReCard/index.ts Normal file
View File

@ -0,0 +1,10 @@
import { App } from "vue";
import reCard from "./src/index.vue";
export const ReCard = Object.assign(reCard, {
install(app: App) {
app.component(reCard.name, reCard);
}
});
export default ReCard;

171
src/components/ReCard/src/index.vue Normal file
View File

@ -0,0 +1,171 @@
<script setup lang="ts">
import { computed, PropType } from "vue";
import shopIcon from "/@/assets/svg/shop.svg?component";
import laptopIcon from "/@/assets/svg/laptop.svg?component";
import serviceIcon from "/@/assets/svg/service.svg?component";
import calendarIcon from "/@/assets/svg/calendar.svg?component";
import userAvatarIcon from "/@/assets/svg/user_avatar.svg?component";
export interface CardProductType {
type: number;
isSetup: boolean;
description: string;
name: string;
}
const props = defineProps({
product: {
type: Object as PropType<CardProductType>
}
});
const emit = defineEmits(["manage-product", "delete-item"]);
const handleClickManage = (product: CardProductType) => {
emit("manage-product", product);
};
const handleClickDelete = (product: CardProductType) => {
emit("delete-item", product);
};
const cardClass = computed(() => [
"list-card-item",
{ "list-card-item__disabled": !props.product.isSetup }
]);
const cardLogoClass = computed(() => [
"list-card-item_detail--logo",
{ "list-card-item_detail--logo__disabled": !props.product.isSetup }
]);
</script>
<template>
<div :class="cardClass">
<div class="list-card-item_detail">
<el-row justify="space-between">
<div :class="cardLogoClass">
<shopIcon v-if="product.type === 1" />
<calendarIcon v-if="product.type === 2" />
<serviceIcon v-if="product.type === 3" />
<userAvatarIcon v-if="product.type === 4" />
<laptopIcon v-if="product.type === 5" />
</div>
<div class="list-card-item_detail--operation">
<el-tag
:color="product.isSetup ? '#00a870' : '#eee'"
effect="dark"
class="mx-1 list-card-item_detail--operation--tag"
>
{{ product.isSetup ? "已启用" : "已停用" }}
</el-tag>
<el-dropdown
trigger="click"
:disabled="!product.isSetup"
max-height="2"
>
<IconifyIconOffline icon="more-2-fill" class="icon-more" />
<template #dropdown>
<el-dropdown-menu :disabled="!product.isSetup">
<el-dropdown-item @click="handleClickManage(product)"
>管理</el-dropdown-item
>
<el-dropdown-item @click="handleClickDelete(product)"
>删除</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-row>
<p class="list-card-item_detail--name">{{ product.name }}</p>
<p class="list-card-item_detail--desc">{{ product.description }}</p>
</div>
</div>
</template>
<style scoped lang="scss">
$text-color-disabled: rgba(0, 0, 0, 0.26);
.list-card-item {
display: flex;
flex-direction: column;
margin-bottom: 12px;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
color: rgba(0, 0, 0, 0.6);
&_detail {
flex: 1;
background: #fff;
padding: 24px 32px;
min-height: 140px;
&--logo {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: #e0ebff;
font-size: 32px;
color: #0052d9;
&__disabled {
color: #a1c4ff;
}
}
&--operation {
display: flex;
height: 100%;
&--tag {
border: 0;
}
}
.icon-more {
font-size: 24px;
color: rgba(36, 36, 36, 1);
}
&--name {
margin: 24px 0 8px 0;
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.9);
}
&--desc {
font-size: 12px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 24px;
height: 40px;
}
}
&__disabled {
color: $text-color-disabled;
.icon-more {
color: $text-color-disabled;
}
.list-card-item_detail--name {
color: $text-color-disabled;
}
.list-card-item_detail--operation--tag {
color: #bababa;
}
}
}
</style>

5
src/components/ReIcon/src/iconifyIconOffline.ts
View File

@ -71,6 +71,9 @@ import arrowUpLine from "@iconify-icons/ri/arrow-up-line";
import arrowDownLine from "@iconify-icons/ri/arrow-down-line";
import bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
import addFill from "@iconify-icons/ri/add-circle-line";
import listCheck from "@iconify-icons/ri/list-check";
import more2Fill from "@iconify-icons/ri/more-2-fill";
addIcon("arrow-right-s-line", arrowRightSLine);
addIcon("arrow-left-s-line", arrowLeftSLine);
addIcon("logout-circle-r-line", logoutCircleRLine);
@ -84,6 +87,8 @@ addIcon("arrow-up-line", arrowUpLine);
addIcon("arrow-down-line", arrowDownLine);
addIcon("bookmark-2-line", bookmark2Line);
addIcon("add", addFill);
addIcon("list-check", listCheck);
addIcon("more-2-fill", more2Fill);
// Font Awesome 4
import faUser from "@iconify-icons/fa/user";

2
src/router/index.ts
View File

@ -30,6 +30,7 @@ import {
import homeRouter from "./modules/home";
import ableRouter from "./modules/able";
import listRouter from "./modules/list";
import aboutRouter from "./modules/about";
import errorRouter from "./modules/error";
import guideRouter from "./modules/guide";
@ -44,6 +45,7 @@ import componentsRouter from "./modules/components";
const routes = [
homeRouter,
ableRouter,
listRouter,
aboutRouter,
errorRouter,
guideRouter,

2
src/router/modules/about.ts
View File

@ -9,7 +9,7 @@ const aboutRouter = {
icon: "question-line",
title: $t("menus.hsAbout"),
i18n: true,
rank: 14
rank: 15
},
children: [
{

2
src/router/modules/guide.ts
View File

@ -9,7 +9,7 @@ const guideRouter = {
icon: "guide",
title: $t("menus.hsguide"),
i18n: true,
rank: 13
rank: 14
},
children: [
{

28
src/router/modules/list.ts Normal file
View File

@ -0,0 +1,28 @@
import { $t } from "/@/plugins/i18n";
const Layout = () => import("/@/layout/index.vue");
const ableRouter = {
path: "/list",
component: Layout,
redirect: "/list/card",
meta: {
icon: "list-check",
title: $t("menus.list"),
i18n: true,
rank: 12
},
children: [
{
path: "/list/card",
name: "listCard",
component: () => import("/@/views/list/card/index.vue"),
meta: {
title: $t("menus.listCard"),
i18n: true,
showParent: true
}
}
]
};
export default ableRouter;

146
src/views/list/card/components/DialogForm.vue Normal file
View File

@ -0,0 +1,146 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { ElMessage, FormInstance } from "element-plus";
const SELECT_OPTIONS = [
{ label: "网关", value: 1 },
{ label: "人工智能", value: 2 },
{ label: "CVM", value: 3 },
{ label: "防火墙", value: 4 },
{ label: "未知", value: 5 }
];
const props = defineProps({
visible: {
type: Boolean,
default: false
},
data: {
type: Object,
default: () => {
return {};
}
}
});
const ruleFormRef = ref<FormInstance>();
const formVisible = ref(false);
const formData = ref(props.data);
const textareaValue = ref("");
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate(valid => {
if (valid) {
ElMessage.success("提交成功");
formVisible.value = false;
resetForm(formEl);
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const closeDialog = () => {
formVisible.value = false;
resetForm(ruleFormRef.value);
};
const emit = defineEmits(["update:visible"]);
watch(
() => formVisible.value,
val => {
emit("update:visible", val);
}
);
watch(
() => props.visible,
val => {
formVisible.value = val;
}
);
watch(
() => props.data,
val => {
formData.value = val;
}
);
const rules = {
name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
};
</script>
<template>
<el-dialog
v-model="formVisible"
title="新建产品"
:width="680"
:before-close="closeDialog"
>
<!-- 表单内容 -->
<el-form
ref="ruleFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="产品名称" prop="name">
<el-input
v-model="formData.name"
:style="{ width: '480px' }"
placeholder="请输入产品名称"
/>
</el-form-item>
<el-form-item label="产品状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio label="0">已停用</el-radio>
<el-radio label="1">已启用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="产品描述" prop="description">
<el-input
v-model="formData.description"
:style="{ width: '480px' }"
placeholder="请输入产品描述"
/>
</el-form-item>
<el-form-item label="产品类型" prop="type">
<el-select
v-model="formData.type"
clearable
:style="{ width: '480px' }"
>
<el-option
v-for="(item, index) in SELECT_OPTIONS"
:key="index"
:value="item.value"
:label="item.label"
>
{{ item.label }}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="mark">
<el-input
v-model="textareaValue"
type="textarea"
:style="{ width: '480px' }"
placeholder="请输入内容"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>确定</el-button
>
</template>
</el-dialog>
</template>

179
src/views/list/card/index.vue Normal file
View File

@ -0,0 +1,179 @@
<script lang="ts">
export default {
name: "ListCard"
};
</script>
<script setup lang="ts">
import { getCardList } from "/@/api/list";
import ReCard from "/@/components/ReCard";
import { ref, onMounted, nextTick } from "vue";
import DialogForm from "./components/DialogForm.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const svg = `
<path class="path" d="
M 30 15
L 28 17
M 25.61 25.61
A 15 15, 0, 0, 1, 15 30
A 15 15, 0, 1, 1, 27.99 7.5
L 15 15
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
`;
const INITIAL_DATA = {
name: "",
status: "",
description: "",
type: "",
mark: ""
};
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
const productList = ref([]);
const dataLoading = ref(true);
const getCardListData = async () => {
try {
const { data } = await getCardList();
productList.value = data.list;
pagination.value = {
...pagination.value,
total: data.list.length
};
} catch (e) {
console.log(e);
} finally {
setTimeout(() => {
dataLoading.value = false;
}, 500);
}
};
onMounted(() => {
getCardListData();
});
const formDialogVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });
const searchValue = ref("");
const onPageSizeChange = (size: number) => {
pagination.value.pageSize = size;
pagination.value.current = 1;
};
const onCurrentChange = (current: number) => {
pagination.value.current = current;
};
const handleDeleteItem = product => {
ElMessageBox.confirm(
product
? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复`
: "",
"提示",
{
type: "warning"
}
)
.then(() => {
ElMessage({
type: "success",
message: "删除成功"
});
})
.catch(() => {});
};
const handleManageProduct = product => {
formDialogVisible.value = true;
nextTick(() => {
formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
});
};
</script>
<template>
<div>
<div class="list-card-operation">
<el-button @click="formDialogVisible = true"> 新建产品 </el-button>
<div class="search-input">
<el-input
v-model="searchValue"
placeholder="请输入你需要搜索的内容"
clearable
>
<template #suffix>
<el-icon class="el-input__icon">
<IconifyIconOffline v-if="searchValue === ''" icon="search" />
</el-icon>
</template>
</el-input>
</div>
</div>
<div
v-loading="dataLoading"
:element-loading-svg="svg"
element-loading-svg-view-box="-10, -10, 50, 50"
>
<template v-if="pagination.total > 0">
<div class="list-card-items">
<el-row :gutter="16">
<el-col
v-for="product in productList.slice(
pagination.pageSize * (pagination.current - 1),
pagination.pageSize * pagination.current
)"
:key="product.index"
:xs="24"
:sm="12"
:md="8"
:lg="6"
:xl="4"
>
<ReCard
class="list-card-item"
:product="product"
@delete-item="handleDeleteItem"
@manage-product="handleManageProduct"
/>
</el-col>
</el-row>
</div>
<div class="list-card-pagination">
<el-pagination
v-model:currentPage="pagination.current"
:page-size="pagination.pageSize"
:total="pagination.total"
:page-sizes="[12, 24, 36]"
layout="total, sizes, prev, pager, next"
@size-change="onPageSizeChange"
@current-change="onCurrentChange"
/>
</div>
</template>
</div>
<DialogForm v-model:visible="formDialogVisible" :data="formData" />
</div>
</template>
<style scoped lang="scss">
.list-card {
&-operation {
display: flex;
justify-content: space-between;
.search-input {
width: 360px;
}
}
&-items {
margin: 14px 0 24px 0;
}
&-pagination {
padding: 16px;
}
}
</style>