feat: 新增 v-btn.vue 组件。

调整 v-signin.vue 组件中的按钮。

packages/app/src/assets/theme/lib/_all.scss

@@ -89,6 +89,10 @@ body,
     &-menu-extensions[data-v-role=true] {
         min-width: auto !important;
     }
+
+    &-button[data-v-role--block=true] {
+        width: percentage($number: 1);
+    }
 }
 
 @include v-app.generate-cls;

packages/app/src/components/index.ts

@@ -15,4 +15,5 @@ export { vContainer, vContentContainer } from "./v-container";
 export { vSignin } from "./v-signin";
 export { vToolbar, vToolbarItem } from "./v-toolbar";
 export { vSidebar } from "./v-sidebar";
-export { vMenu, vMenuItem } from "./v-menu";
+export { vMenu, vMenuItem } from "./v-menu";
+export { vBtn } from "./v-btn";

packages/app/src/components/v-btn/btn-props.ts

@@ -0,0 +1,76 @@
+// **************************************************************************************************************************
+// COPYRIGHT © 2006 - 2022 WANG YUCAI. ALL RIGHTS RESERVED.
+// LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.
+// **************************************************************************************************************************
+
+import { PropType } from "vue";
+import { DnvueComponentProps } from "../component-props";
+
+/**
+ * 提供了按钮相关的通用属性。
+ */
+export const BtnCommonProps = Object.assign({}, DnvueComponentProps, {
+    /**
+     * 设置或获取一个字符串，用于表示按钮文本资源名称。
+     * 
+     * @type {string}
+     */
+    text: {
+        type: String,
+        default: "BUTTON"
+    },
+    /**
+     * 设置或获取一个字符串，用于表示 @mdi/font 图标名称。
+     * 
+     * @type {string}
+     */
+    iconName: {
+        type: String,
+        default: ""
+    },
+    /**
+     * 设置或获取一个字符串，用于表示类型。
+     * 
+     * @type {string}
+     */
+    elType: {
+        type: String as PropType<"primary" | "success" | "warning" | "danger" | "info">,
+        default: "primary"
+    },
+    /**
+     * 设置或获取一个值，用于表示是否为朴素按钮。
+     * 
+     * @type {string}
+     */
+    elPlain: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 设置或获取一个字符串，用于表示按钮模式。
+     * 
+     * @type {string}
+     */
+    mode: {
+        type: String as PropType<"button" | "text" | "link">,
+        default: "button"
+    },
+    /**
+     * 设置或获取一个字符串，用于表示按钮边框。
+     * 
+     * @type {string}
+     */
+    border: {
+        type: String as PropType<"normal" | "round" | "circle">,
+        default: "normal"
+    },
+    /**
+     * 设置或获取一个值，用于表示是否为块状元素。
+     * 
+     * @type {boolean}
+     */
+    block: {
+        type: Boolean,
+        default: false
+    }
+});

packages/app/src/components/v-btn/index.ts

@@ -0,0 +1,8 @@
+// **************************************************************************************************************************
+// COPYRIGHT © 2006 - 2022 WANG YUCAI. ALL RIGHTS RESERVED.
+// LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.
+// **************************************************************************************************************************
+
+import vBtn from "./v-btn.vue";
+
+export { vBtn };

packages/app/src/components/v-btn/v-btn.vue

@@ -0,0 +1,41 @@
+<!-- 
+  **************************************************************************************************************************
+  COPYRIGHT © 2006 - 2022 WANG YUCAI. ALL RIGHTS RESERVED.
+  LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.
+  **************************************************************************************************************************
+-->
+
+<template>
+  <el-button :class="readonlyIconClassName" :type="elType" :plain="elPlain" :text="mode === 'text'" :link="mode === 'link'" :round="border === 'round'" :circle="border === 'circle'" :loading="inProcessing" :disabled="isDisabled" :data-v-role--block="block" @click="onClick">
+    <slot />
+    <template v-if="!readonlyDefaultSlotVisible">
+      {{ $t(text) }}
+    </template>
+  </el-button>
+</template>
+
+<script lang="ts" setup>
+import { BtnCommonProps } from "./btn-props";
+import { DnvueComponentEvents } from "../component-events";
+import { computed, useSlots } from "vue";
+import { paramCase } from "change-case";
+
+const slots = useSlots();
+
+const props = defineProps(BtnCommonProps);
+
+const events = defineEmits(DnvueComponentEvents);
+
+const readonlyDefaultSlotVisible = computed<boolean>(() => {
+  return slots["default"] !== null && slots["default"] !== undefined;
+});
+
+const readonlyIconClassName = computed<string[] | null>(() => {
+  if (String.isNullOrWhitespace(props.iconName)) return null;
+  return ["mdi", paramCase(props.iconName)];
+});
+
+function onClick(): void {
+  events("click");
+}
+</script>

packages/app/src/components/v-signin/v-signin.vue

@@ -21,7 +21,7 @@
         <el-checkbox v-model="observableTyped.remember" :label="$t('REMEMBER_ME')" :indeterminate="false" />
       </v-flexbox>
       <v-flexbox justify-content="flex-end">
-        <el-button type="primary" class="mdi mdi-account-key-outline" @click="onSignInButtonClick">{{ $t("SIGN_IN") }}</el-button>
+        <v-btn text="SIGN_IN" @click="onSignInButtonClick" />
       </v-flexbox>
     </div>
   </div>
@@ -31,6 +31,7 @@
 /// <reference path="../../global.d.ts" />
 
 import { vFlexbox } from "../v-flexbox";
+import { vBtn } from "../v-btn";
 import { DnvueComponentProps } from "../component-props";
 import { DnvueComponentEvents } from "../component-events";
 import { reactive } from "vue";

packages/app/src/lib/locale/en-us.ts

@@ -120,4 +120,5 @@ export const enUS: Record<string, string> = {
     HOME_PAGE: "Home",
     DATA_TABLE: "Data Table",
     IN_PROCESSING: "The transaction is processing, please wait a few minutes...",
+    BUTTON: "Button",
 };

packages/app/src/lib/locale/zh-cn.ts

@@ -120,4 +120,5 @@ export const zhCN: Record<string, string> = {
     HOME_PAGE: "首页",
     DATA_TABLE: "数据列表",
     IN_PROCESSING: "事务正在处理中，请稍候.....",
+    BUTTON: "按钮",
 };