feat: 添加常用按钮示例

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

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: 表格无限滚动

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: {

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",
+      path: "/components/button",
-      name: "Segmented",
+      name: "ButtonPage",
-      component: () => import("@/views/components/segmented.vue"),
+      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;

src/router/modules/flowchart.ts

@@ -2,8 +2,8 @@ import { $t } from "@/plugins/i18n";
 import { flowchart } from "@/router/enums";
 
 export default {
-  path: "/flowChart",
+  path: "/flow-chart",
-  redirect: "/flowChart/index",
+  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: {

src/router/modules/formdesign.ts

@@ -3,8 +3,8 @@ import { formdesign } from "@/router/enums";
 const IFrame = () => import("@/layout/frameView.vue");
 
 export default {
-  path: "/formDesign",
+  path: "/form-design",
-  redirect: "/formDesign/index",
+  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: {

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 label="large">大尺寸</el-radio>
-            <el-radio-button label="default">默认尺寸</el-radio-button>
+            <el-radio label="default">默认尺寸</el-radio>
-            <el-radio-button label="small">小尺寸</el-radio-button>
+            <el-radio label="small">小尺寸</el-radio>
-            <el-radio-button label="disabled">禁用</el-radio-button>
+            <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>
 

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>