From 1b7ecf953b30f1b7e4c81e2db9588e87ebbbfa5f Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 18 Jan 2024 20:53:21 +0800
Subject: [PATCH 1/2] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=8F=AF?=
 =?UTF-8?q?=E9=80=89=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/info.ts                         |  8 ++---
 src/views/components/check-button.vue | 50 ++++++++++++++++++++++-----
 2 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/build/info.ts b/build/info.ts
index 20005735d..ae63a7ddb 100644
--- a/build/info.ts
+++ b/build/info.ts
@@ -3,14 +3,14 @@ import { getPackageSize } from "./utils";
 import dayjs, { type Dayjs } from "dayjs";
 import duration from "dayjs/plugin/duration";
 import gradientString from "gradient-string";
-import boxen, { type Options as boxenOptions } from "boxen";
+import boxen, { type Options as BoxenOptions } from "boxen";
 dayjs.extend(duration);
 
 const welcomeMessage = gradientString("cyan", "magenta").multiline(
   `Hello! 欢迎使用 vue-pure-admin\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
 );
 
-const boxenOprions: boxenOptions = {
+const boxenOptions: BoxenOptions = {
   padding: 0.5,
   borderColor: "cyan",
   borderStyle: "round"
@@ -28,7 +28,7 @@ export function viteBuildInfo(): Plugin {
       outDir = resolvedConfig.build?.outDir ?? "dist";
     },
     buildStart() {
-      console.log(boxen(welcomeMessage, boxenOprions));
+      console.log(boxen(welcomeMessage, boxenOptions));
       if (config.command === "build") {
         startTime = dayjs(new Date());
       }
@@ -46,7 +46,7 @@ export function viteBuildInfo(): Plugin {
                     .duration(endTime.diff(startTime))
                     .format("mm分ss秒")}，打包后的大小为${size}）`
                 ),
-                boxenOprions
+                boxenOptions
               )
             );
           }
diff --git a/src/views/components/check-button.vue b/src/views/components/check-button.vue
index b7c52e140..d2801e7dc 100644
--- a/src/views/components/check-button.vue
+++ b/src/views/components/check-button.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { message } from "@/utils/message";
 import { getKeyList } from "@pureadmin/utils";
 
@@ -9,6 +9,7 @@ defineOptions({
 
 const spaceSize = ref(20);
 const size = ref("default");
+const dynamicSize = ref();
 
 const radio = ref("wait");
 const radioBox = ref("complete");
@@ -35,6 +36,7 @@ const checkTag = ref([
 ]);
 const curTagMap = ref({});
 function onChecked(tag, index) {
+  if (size.value === "disabled") return;
   curTagMap.value[index] = Object.assign({
     ...tag,
     checked: !tag.checked
@@ -64,12 +66,19 @@ const checkGroupTag = ref([
 ]);
 const curTagGroupMap = ref({});
 function onGroupChecked(tag, index) {
+  if (size.value === "disabled") return;
   curTagGroupMap.value[index] = Object.assign({
     ...tag,
     checked: !tag.checked
   });
   checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked;
 }
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
 </script>
 
 <template>
@@ -91,7 +100,7 @@ function onGroupChecked(tag, index) {
     <p class="mb-2">单选（紧凑风格的按钮样式）</p>
     <el-radio-group
       v-model="radio"
-      :size="size as any"
+      :size="dynamicSize"
       :disabled="size === 'disabled'"
     >
       <el-radio-button label="wait">等待中</el-radio-button>
@@ -103,7 +112,7 @@ function onGroupChecked(tag, index) {
     <p class="mb-2">单选（带有边框）</p>
     <el-radio-group
       v-model="radioBox"
-      :size="size as any"
+      :size="dynamicSize"
       :disabled="size === 'disabled'"
     >
       <el-radio label="wait" border>等待中</el-radio>
@@ -115,7 +124,7 @@ function onGroupChecked(tag, index) {
     <p class="mb-2">单选（自定义内容）</p>
     <el-radio-group
       v-model="radioCustom"
-      :size="size as any"
+      :size="dynamicSize"
       :disabled="size === 'disabled'"
     >
       <el-radio-button label="wait">
@@ -142,7 +151,7 @@ function onGroupChecked(tag, index) {
     <p class="mb-2">多选（紧凑风格的按钮样式）</p>
     <el-checkbox-group
       v-model="checkboxGroup"
-      :size="size as any"
+      :size="dynamicSize"
       :disabled="size === 'disabled'"
     >
       <el-checkbox-button label="apple">苹果</el-checkbox-button>
@@ -154,7 +163,7 @@ function onGroupChecked(tag, index) {
     <p class="mb-2">多选（带有边框）</p>
     <el-checkbox-group
       v-model="checkboxGroupBox"
-      :size="size as any"
+      :size="dynamicSize"
       :disabled="size === 'disabled'"
     >
       <el-checkbox label="cucumber" border>黄瓜</el-checkbox>
@@ -167,7 +176,7 @@ function onGroupChecked(tag, index) {
     <el-checkbox-group
       v-model="checkboxGroupCustom"
       class="pure-checkbox"
-      :size="size as any"
+      :size="dynamicSize"
       :disabled="size === 'disabled'"
     >
       <el-checkbox-button label="tomato">
@@ -209,7 +218,11 @@ function onGroupChecked(tag, index) {
       <el-check-tag
         v-for="(tag, index) in checkTag"
         :key="index"
-        class="select-none"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
         :checked="tag.checked"
         @change="onChecked(tag, index)"
       >
@@ -229,7 +242,11 @@ function onGroupChecked(tag, index) {
       <el-check-tag
         v-for="(tag, index) in checkGroupTag"
         :key="index"
-        class="select-none"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
         :checked="tag.checked"
         @change="onGroupChecked(tag, index)"
       >
@@ -272,4 +289,19 @@ function onGroupChecked(tag, index) {
     }
   }
 }
+
+/** 可控制间距的按钮禁用样式 */
+.tag-disabled {
+  color: var(--el-disabled-text-color);
+  cursor: not-allowed;
+  background-color: var(--el-color-info-light-9);
+
+  &:hover {
+    background-color: var(--el-color-info-light-9);
+  }
+
+  &.is-active {
+    background-color: var(--el-color-primary-light-9);
+  }
+}
 </style>

From 3eaf520a37aa56df9cca0d3ed9a1e481401d07ee Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 18 Jan 2024 23:37:03 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B8=B8?=
 =?UTF-8?q?=E7=94=A8=E6=8C=89=E9=92=AE=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                       |   5 +-
 locales/zh-CN.yaml                    |   5 +-
 src/router/modules/able.ts            |   8 +-
 src/router/modules/components.ts      |  44 +++--
 src/router/modules/flowchart.ts       |   6 +-
 src/router/modules/formdesign.ts      |   6 +-
 src/views/components/check-button.vue |  28 +++-
 src/views/components/el-button.vue    | 233 ++++++++++++++++++++++++++
 8 files changed, 299 insertions(+), 36 deletions(-)
 create mode 100644 src/views/components/el-button.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index 993c33efb..9b8d9174d 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -44,7 +44,9 @@ menus:
   hsmap: Map
   hsdraggable: Draggable
   hssplitPane: Split Pane
-  hsbutton: Button
+  hsElButton: Button
+  hsbutton: Button Animation
+  hsCheckButton: Check Button
   hscropping: Picture Cropping
   hsanimatecss: AnimateCss Selector
   hscountTo: Digital Animation
@@ -102,7 +104,6 @@ menus:
   hsCascader: Area Cascader
   hsSwiper: Swiper Plugin
   hsVirtualList: Virtual List
-  hsCheckButton: Check Button
   hsPdf: PDF Preview
   hsExcel: Export Excel
   hsInfiniteScroll: Table Infinite Scroll
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 6fa2ea75f..dc4f2ec8d 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -44,7 +44,9 @@ menus:
   hsmap: 地图
   hsdraggable: 拖拽
   hssplitPane: 切割面板
-  hsbutton: 按钮
+  hsElButton: 按钮
+  hsCheckButton: 可选按钮
+  hsbutton: 按钮动效
   hscropping: 图片裁剪
   hsanimatecss: animate.css选择器
   hscountTo: 数字动画
@@ -102,7 +104,6 @@ menus:
   hsCascader: 区域级联选择器
   hsSwiper: Swiper插件
   hsVirtualList: 虚拟列表
-  hsCheckButton: 可选按钮
   hsPdf: PDF预览
   hsExcel: 导出Excel
   hsInfiniteScroll: 表格无限滚动
diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts
index ad5164ad0..488b9e62c 100644
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -123,7 +123,7 @@ export default {
       }
     },
     {
-      path: "/able/videoFrame",
+      path: "/able/video-frame",
       name: "VideoFrame",
       component: () => import("@/views/able/video-frame/index.vue"),
       meta: {
@@ -139,7 +139,7 @@ export default {
       }
     },
     {
-      path: "/able/infiniteScroll",
+      path: "/able/infinite-scroll",
       name: "InfiniteScroll",
       component: () => import("@/views/able/infinite-scroll.vue"),
       meta: {
@@ -147,7 +147,7 @@ export default {
       }
     },
     {
-      path: "/able/menuTree",
+      path: "/able/menu-tree",
       name: "MenuTree",
       component: () => import("@/views/able/menu-tree.vue"),
       meta: {
@@ -155,7 +155,7 @@ export default {
       }
     },
     {
-      path: "/able/lineTree",
+      path: "/able/line-tree",
       name: "LineTree",
       component: () => import("@/views/able/line-tree.vue"),
       meta: {
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 994c36eba..a8e1b326b 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -27,7 +27,7 @@ export default {
       }
     },
     {
-      path: "/components/iconSelect",
+      path: "/components/icon-select",
       name: "IconSelect",
       component: () => import("@/views/components/icon-select.vue"),
       meta: {
@@ -51,7 +51,23 @@ export default {
       }
     },
     {
-      path: "/components/checkButton",
+      path: "/components/segmented",
+      name: "Segmented",
+      component: () => import("@/views/components/segmented.vue"),
+      meta: {
+        title: $t("menus.hssegmented")
+      }
+    },
+    {
+      path: "/components/el-button",
+      name: "PureButton",
+      component: () => import("@/views/components/el-button.vue"),
+      meta: {
+        title: $t("menus.hsElButton")
+      }
+    },
+    {
+      path: "/components/check-button",
       name: "CheckButton",
       component: () => import("@/views/components/check-button.vue"),
       meta: {
@@ -60,11 +76,11 @@ export default {
       }
     },
     {
-      path: "/components/segmented",
-      name: "Segmented",
-      component: () => import("@/views/components/segmented.vue"),
+      path: "/components/button",
+      name: "ButtonPage",
+      component: () => import("@/views/components/button.vue"),
       meta: {
-        title: $t("menus.hssegmented")
+        title: $t("menus.hsbutton")
       }
     },
     {
@@ -92,7 +108,7 @@ export default {
       }
     },
     {
-      path: "/components/splitPane",
+      path: "/components/split-pane",
       name: "SplitPane",
       component: () => import("@/views/components/split-pane.vue"),
       meta: {
@@ -116,7 +132,7 @@ export default {
       }
     },
     {
-      path: "/components/countTo",
+      path: "/components/count-to",
       name: "CountTo",
       component: () => import("@/views/components/count-to.vue"),
       meta: {
@@ -140,7 +156,7 @@ export default {
       }
     },
     {
-      path: "/components/seamlessScroll",
+      path: "/components/seamless-scroll",
       name: "SeamlessScroll",
       component: () => import("@/views/components/seamless-scroll.vue"),
       meta: {
@@ -148,20 +164,12 @@ export default {
       }
     },
     {
-      path: "/components/virtualList",
+      path: "/components/virtual-list",
       name: "VirtualList",
       component: () => import("@/views/components/virtual-list/index.vue"),
       meta: {
         title: $t("menus.hsVirtualList")
       }
-    },
-    {
-      path: "/components/button",
-      name: "ButtonPage",
-      component: () => import("@/views/components/button.vue"),
-      meta: {
-        title: $t("menus.hsbutton")
-      }
     }
   ]
 } satisfies RouteConfigsTable;
diff --git a/src/router/modules/flowchart.ts b/src/router/modules/flowchart.ts
index c69a5a6d7..db83ad1a0 100644
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -2,8 +2,8 @@ import { $t } from "@/plugins/i18n";
 import { flowchart } from "@/router/enums";
 
 export default {
-  path: "/flowChart",
-  redirect: "/flowChart/index",
+  path: "/flow-chart",
+  redirect: "/flow-chart/index",
   meta: {
     icon: "setUp",
     title: $t("menus.hsflowChart"),
@@ -11,7 +11,7 @@ export default {
   },
   children: [
     {
-      path: "/flowChart/index",
+      path: "/flow-chart/index",
       name: "FlowChart",
       component: () => import("@/views/flow-chart/index.vue"),
       meta: {
diff --git a/src/router/modules/formdesign.ts b/src/router/modules/formdesign.ts
index 1aaf7f90b..64a204440 100644
--- a/src/router/modules/formdesign.ts
+++ b/src/router/modules/formdesign.ts
@@ -3,8 +3,8 @@ import { formdesign } from "@/router/enums";
 const IFrame = () => import("@/layout/frameView.vue");
 
 export default {
-  path: "/formDesign",
-  redirect: "/formDesign/index",
+  path: "/form-design",
+  redirect: "/form-design/index",
   meta: {
     icon: "terminalWindowLine",
     title: $t("menus.hsFormDesign"),
@@ -12,7 +12,7 @@ export default {
   },
   children: [
     {
-      path: "/formDesign/index",
+      path: "/form-design/index",
       name: "FormDesign",
       component: IFrame,
       meta: {
diff --git a/src/views/components/check-button.vue b/src/views/components/check-button.vue
index d2801e7dc..127420780 100644
--- a/src/views/components/check-button.vue
+++ b/src/views/components/check-button.vue
@@ -10,6 +10,7 @@ defineOptions({
 const spaceSize = ref(20);
 const size = ref("default");
 const dynamicSize = ref();
+const checked = ref(true);
 
 const radio = ref("wait");
 const radioBox = ref("complete");
@@ -74,6 +75,11 @@ function onGroupChecked(tag, index) {
   checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked;
 }
 
+function onSingleChecked() {
+  if (size.value === "disabled") return;
+  checked.value = !checked.value;
+}
+
 watch(size, val =>
   val === "disabled"
     ? (dynamicSize.value = "default")
@@ -89,10 +95,10 @@ watch(size, val =>
           可选按钮
           <br />
           <el-radio-group v-model="size" size="small">
-            <el-radio-button label="large">大尺寸</el-radio-button>
-            <el-radio-button label="default">默认尺寸</el-radio-button>
-            <el-radio-button label="small">小尺寸</el-radio-button>
-            <el-radio-button label="disabled">禁用</el-radio-button>
+            <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>
         </span>
       </div>
@@ -253,6 +259,20 @@ watch(size, val =>
         {{ tag.title }}
       </el-check-tag>
     </el-space>
+    <el-divider />
+
+    <p class="mb-2">单个可选按钮</p>
+    <el-check-tag
+      :class="[
+        'select-none',
+        size === 'disabled' && 'tag-disabled',
+        checked && 'is-active'
+      ]"
+      :checked="checked"
+      @change="onSingleChecked"
+    >
+      一个人也要努力 😊
+    </el-check-tag>
   </el-card>
 </template>
 
diff --git a/src/views/components/el-button.vue b/src/views/components/el-button.vue
new file mode 100644
index 000000000..bee4a8c02
--- /dev/null
+++ b/src/views/components/el-button.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useDark } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "PureButton"
+});
+
+const { isDark } = useDark();
+const size = ref("default");
+const dynamicSize = ref();
+
+const baseRadio = ref("default");
+const buttonList = [
+  {
+    type: "",
+    text: "Default",
+    icon: "ep:search"
+  },
+  {
+    type: "primary",
+    text: "Primary",
+    icon: "ep:edit"
+  },
+  {
+    type: "success",
+    text: "Success",
+    icon: "ep:check"
+  },
+  {
+    type: "info",
+    text: "Info",
+    icon: "ep:message"
+  },
+  {
+    type: "warning",
+    text: "Warning",
+    icon: "ep:star"
+  },
+  {
+    type: "danger",
+    text: "Danger",
+    icon: "ep:delete"
+  }
+];
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          <el-link
+            href="https://element-plus.org/zh-CN/component/button.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Button 按钮
+          </el-link>
+          <br />
+          <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>
+        </span>
+      </div>
+    </template>
+
+    <p class="mb-2">基础按钮</p>
+    <el-radio-group v-model="baseRadio" class="mb-3">
+      <el-radio label="default" />
+      <el-radio label="plain" />
+      <el-radio label="round" />
+      <el-radio label="circle" />
+      <el-radio label="link" />
+      <el-radio label="text" />
+      <el-radio label="text-bg" />
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-button
+        v-for="(button, index) in buttonList"
+        :key="index"
+        :type="button.type"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :plain="baseRadio === 'plain'"
+        :round="baseRadio === 'round'"
+        :circle="baseRadio === 'circle'"
+        :link="baseRadio === 'link'"
+        :text="baseRadio === 'text' || baseRadio === 'text-bg'"
+        :bg="baseRadio === 'text-bg'"
+        :icon="useRenderIcon(button.icon)"
+      >
+        <template v-if="baseRadio !== 'circle'" #default>
+          <p>{{ button.text }}</p>
+        </template>
+      </el-button>
+    </el-space>
+    <el-divider />
+
+    <p class="mb-4">加载状态按钮</p>
+    <el-button
+      text
+      bg
+      type="primary"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading="size !== 'disabled'"
+    >
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-button
+      type="primary"
+      plain
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading-icon="useRenderIcon('ep:eleme')"
+      :loading="size !== 'disabled'"
+    >
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-button
+      type="primary"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading="size !== 'disabled'"
+    >
+      <template #loading>
+        <div class="custom-loading">
+          <svg class="circular" viewBox="-10, -10, 50, 50">
+            <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="fill: rgb(0 0 0 / 0%); stroke-width: 4px"
+            />
+          </svg>
+        </div>
+      </template>
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-divider />
+
+    <p class="mb-4">自定义元素标签。例如：按钮、div、链接</p>
+    <el-button :size="dynamicSize" :disabled="size === 'disabled'">
+      button 标签
+    </el-button>
+    <el-button
+      tag="div"
+      role="button"
+      tabindex="0"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      div 标签
+    </el-button>
+    <el-button
+      type="primary"
+      tag="a"
+      :href="
+        size === 'disabled'
+          ? 'javascript:void(0);'
+          : 'https://element-plus.org/zh-CN/component/button.html#tag'
+      "
+      :target="size === 'disabled' ? '_self' : '_blank'"
+      rel="noopener noreferrer"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      a 链接
+    </el-button>
+    <el-divider />
+
+    <p class="mb-4">自定义颜色</p>
+    <el-space wrap>
+      <el-button
+        color="#626aef"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :dark="isDark"
+      >
+        Default
+      </el-button>
+      <el-button
+        color="#626aef"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :dark="isDark"
+        plain
+      >
+        Plain
+      </el-button>
+    </el-space>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+
+.el-button .custom-loading .circular {
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+  animation: loading-rotate 2s linear infinite;
+}
+
+.el-button .custom-loading .circular .path {
+  stroke: var(--el-button-text-color);
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-width: 2;
+  animation: loading-dash 1.5s ease-in-out infinite;
+}
+</style>