feat: 添加多选卡片示例

build/optimize.ts

@@ -37,6 +37,7 @@ const include = [
   "@pureadmin/utils",
   "@wangeditor/editor",
   "responsive-storage",
+  "plus-pro-components",
   "@howdyjs/mouse-menu",
   "@logicflow/extension",
   "vue-virtual-scroller",

locales/en.yaml

@@ -67,6 +67,7 @@ menus:
   hsCollapse: Collapse
   hsProgress: Progress
   hsUpload: File Upload
+  hsCheckCard: CheckCard
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1

locales/zh-CN.yaml

@@ -67,6 +67,7 @@ menus:
   hsCollapse: 折叠面板
   hsProgress: 进度条
   hsUpload: 文件上传
+  hsCheckCard: 多选卡片
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1

package.json

@@ -78,6 +78,7 @@
     "path": "^0.12.7",
     "pinia": "^2.1.7",
     "pinyin-pro": "^3.19.6",
+    "plus-pro-components": "^0.0.1",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "responsive-storage": "^2.2.0",

pnpm-lock.yaml

@@ -95,6 +95,9 @@ dependencies:
   pinyin-pro:
     specifier: ^3.19.6
     version: 3.19.6
+  plus-pro-components:
+    specifier: ^0.0.1
+    version: 0.0.1(element-plus@2.5.6)(vue@3.4.14)
   qrcode:
     specifier: ^1.5.3
     version: 1.5.3
@@ -6709,6 +6712,19 @@ packages:
       mlly: 1.6.1
       pathe: 1.1.2
 
+  /plus-pro-components@0.0.1(element-plus@2.5.6)(vue@3.4.14):
+    resolution: {integrity: sha512-S4qvM6MF12y/G6ueqvgavVw8hVCIjVeO/Qol9uCiMpEJmxH60CfnfMVrx1mmea0jWquPWXFSk5U/Y1I2ua0BEQ==}
+    peerDependencies:
+      element-plus: ^2.3.4
+      vue: ^3.2.0
+    dependencies:
+      '@element-plus/icons-vue': 2.3.1(vue@3.4.14)
+      element-plus: 2.5.6(vue@3.4.14)
+      lodash-es: 4.17.21
+      sortablejs: 1.15.2
+      vue: 3.4.14(typescript@5.3.3)
+    dev: false
+
   /pngjs@5.0.0:
     resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
     engines: {node: '>=10.13.0'}

src/router/modules/components.ts

@@ -31,7 +31,15 @@ export default {
       name: "PureUpload",
       component: () => import("@/views/components/upload/index.vue"),
       meta: {
-        title: $t("menus.hsUpload"),
+        title: $t("menus.hsUpload")
+      }
+    },
+    {
+      path: "/components/check-card",
+      name: "CheckCard",
+      component: () => import("@/views/components/check-card.vue"),
+      meta: {
+        title: $t("menus.hsCheckCard"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
     },

src/views/components/check-card.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+// https://plus-pro-components.com/components/check-card-group.html
+import { PlusCheckCardGroup } from "plus-pro-components";
+import "plus-pro-components/es/components/check-card-group/style/css";
+
+defineOptions({
+  name: "CheckCard"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+const list = ref("0");
+const list1 = ref([]);
+
+const options = [
+  {
+    title: "标题一",
+    value: "0",
+    description: "坚持梦想，成就不凡的自己",
+    avatar:
+      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+  },
+  {
+    title: "标题二",
+    value: "1",
+    description: "每一次努力，都是成长的契机",
+    avatar:
+      "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
+  }
+];
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://plus-pro-components.com/components/check-card-group.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            多选卡片组
+          </el-link>
+          <el-radio-group v-model="size" size="small">
+            <el-radio label="large">大尺寸</el-radio>
+            <el-radio label="default">默认尺寸</el-radio>
+            <el-radio label="small">小尺寸</el-radio>
+            <el-radio label="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+    </template>
+
+    <p class="mb-2 mt-4">单选</p>
+    <PlusCheckCardGroup
+      v-model="list"
+      :options="options"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">多选</p>
+    <PlusCheckCardGroup
+      v-model="list1"
+      :options="options"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      multiple
+    />
+  </el-card>
+</template>