perf: perf component

CHANGELOG.zh_CN.md

@@ -1,16 +1,23 @@
 ## Wip
 
+## (破坏性更新) Breaking changes
+
+- ClickOutSide 组件引入方式由 `import ClickOutSide from '/@/components/ClickOutSide/index.vue'`变更为`import { ClickOutSide } from '/@/components/ClickOutSide'`
+- Button 组件引入方式由 `import ClickOutSide from '/@/components/Button/index.vue'`变更为`import { Button } from '/@/components/Button'`
+- StrengthMeter 组件引入方式由 `import StrengthMeter from '/@/components/StrengthMeter'`变更为`import { StrengthMeter } from '/@/components/StrengthMeter'`
+- 除示例外加入全局国际化功能，支持中文与英文
+
 ### ✨ Refactor
 
 - 重构整体 layout。更改代码实现方式。代码更精简
 - 配置项重构
 - 移除 messageSetting 配置
+- BasicTitle 组件 `showSpan`=> `span`
 
 ### ✨ Features
 
 - 缓存可以配置是否加密,默认生产环境开启 Aes 加密
 - 新增标签页拖拽排序
-- 除示例外加入全局国际化功能，支持中文与英文
 
 ### 🎫 Chores
 

README.md

@@ -69,7 +69,7 @@
 ### 环境要求
 
 - `Node.js`: - 版本最好大于 `12.0.0`
-- `yarn` > `npm` > `cnpm`: - 包管理工具.
+- `yarn` : - 包管理工具.
 
 ### UI 框架
 

package.json

@@ -38,6 +38,7 @@
     "vue": "^3.0.3",
     "vue-i18n": "^9.0.0-beta.8",
     "vue-router": "^4.0.0-rc.5",
+    "vue-types": "^3.0.1",
     "vuex": "^4.0.0-rc.2",
     "vuex-module-decorators": "^1.0.1",
     "xlsx": "^0.16.9",

src/components/Application/index.ts

@@ -1,8 +1,7 @@
 import AppLocalePicker from './src/AppLocalePicker.vue';
-import AppPageFooter from './src/AppPageFooter.vue';
 import AppLogo from './src/AppLogo.vue';
 import { withInstall } from '../util';
 
-export { AppLocalePicker, AppPageFooter, AppLogo };
+export { AppLocalePicker, AppLogo };
 
-export default withInstall(AppLocalePicker, AppPageFooter, AppLogo);
+export default withInstall(AppLocalePicker, AppLogo);

src/components/Application/src/AppLocalePicker.vue

@@ -23,18 +23,16 @@
 
   import { LocaleType } from '/@/locales/types';
 
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'AppLocalPicker',
     components: { GlobalOutlined, Dropdown },
     props: {
-      showText: {
-        type: Boolean,
-        default: true,
-      },
-      reload: {
-        type: Boolean,
-        default: false,
-      },
+      // Whether to display text
+      showText: propTypes.bool.def(true),
+      // Whether to refresh the interface when changing
+      reload: propTypes.bool,
     },
     setup(props) {
       const { localeList } = useLocaleSetting();

src/components/Application/src/AppLogo.vue

@@ -9,7 +9,6 @@
   </div>
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue';
   import { defineComponent } from 'vue';
 
   import { useGlobSetting } from '/@/hooks/setting';
@@ -18,23 +17,23 @@
 
   import { PageEnum } from '/@/enums/pageEnum';
 
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'AppLogo',
     props: {
       /**
        * The theme of the current parent component
        */
-      theme: {
-        type: String as PropType<string>,
-      },
-      showTitle: {
-        type: Boolean,
-        default: true,
-      },
+      theme: propTypes.oneOf(['light', 'dark']),
+      // Whether to show title
+      showTitle: propTypes.bool.def(true),
     },
     setup() {
       const { getCollapsedShowTitle } = useMenuSetting();
+
       const globSetting = useGlobSetting();
+
       const go = useGo();
 
       function handleGoHome(): void {

src/components/Basic/index.ts

@@ -1,3 +1,9 @@
-export { default as BasicArrow } from './src/BasicArrow.vue';
-export { default as BasicHelp } from './src/BasicHelp.vue';
-export { default as BasicTitle } from './src/BasicTitle.vue';
+import BasicArrow from './src/BasicArrow.vue';
+import BasicHelp from './src/BasicHelp.vue';
+import BasicTitle from './src/BasicTitle.vue';
+
+import { withInstall } from '../util';
+
+export { BasicArrow, BasicHelp, BasicTitle };
+
+export default withInstall(BasicArrow, BasicHelp, BasicTitle);

src/components/Basic/src/BasicArrow.vue

@@ -8,27 +8,30 @@
   </span>
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue';
-
   import { defineComponent, computed } from 'vue';
   import { RightOutlined } from '@ant-design/icons-vue';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'BasicArrow',
     components: { RightOutlined },
     props: {
       // Expand contract, expand by default
-      expand: {
-        type: Boolean as PropType<boolean>,
-        default: true,
-      },
+      expand: propTypes.bool,
+      top: propTypes.bool,
+      bottom: propTypes.bool,
     },
     setup(props) {
       const getClass = computed(() => {
-        const preCls = 'base-arrow';
-        const cls = [preCls];
-        props.expand && cls.push(`${preCls}__active`);
-        return cls;
+        const { expand, top, bottom } = props;
+        return [
+          'base-arrow',
+          {
+            'base-arrow__active': expand,
+            top,
+            bottom,
+          },
+        ];
       });
 
       return {
@@ -39,26 +42,29 @@
 </script>
 <style lang="less" scoped>
   .base-arrow {
-    transform: rotate(-90deg);
+    display: inline-block;
+    transform: rotate(0deg);
     transition: all 0.3s ease 0.1s;
     transform-origin: center center;
 
-    &.right {
-      transform: rotate(0deg);
+    &__active {
+      transform: rotate(90deg);
+    }
+
+    &.top {
+      transform: rotate(-90deg);
+    }
 
-      > span {
-        transition: all 0.3s ease 0.1s !important;
-      }
+    &.bottom {
+      transform: rotate(90deg);
     }
 
-    &__active {
+    &.top.base-arrow__active {
       transform: rotate(90deg);
     }
 
-    &.right.base-arrow__active {
-      span {
-        transform: rotate(90deg);
-      }
+    &.bottom.base-arrow__active {
+      transform: rotate(-90deg);
     }
   }
 </style>

src/components/Basic/src/BasicHelp.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PropType } from 'vue';
+  import type { CSSProperties, PropType } from 'vue';
   import { defineComponent, computed, unref, h } from 'vue';
 
   import { Tooltip } from 'ant-design-vue';
@@ -8,37 +8,24 @@
   import { getPopupContainer } from '/@/utils';
   import { isString, isArray } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
     name: 'BasicHelp',
     components: { Tooltip },
     props: {
       // max-width
-      maxWidth: {
-        type: String as PropType<string>,
-        default: '600px',
-      },
+      maxWidth: propTypes.string.def('600px'),
       // Whether to display the serial number
-      showIndex: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
+      showIndex: propTypes.bool,
+      // color
+      color: propTypes.string.def('#ffffff'),
+      fontSize: propTypes.string.def('14px'),
+      placement: propTypes.string.def('right'),
+      absolute: propTypes.bool,
       // Text list
       text: {
         type: [Array, String] as PropType<string[] | string>,
       },
-      // color
-      color: {
-        type: String as PropType<string>,
-        default: '#ffffff',
-      },
-      fontSize: {
-        type: String as PropType<string>,
-        default: '14px',
-      },
-      absolute: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
       // 定位
       position: {
         type: [Object] as PropType<any>,
@@ -48,39 +35,42 @@
           bottom: 0,
         }),
       },
-      placement: {
-        type: String as PropType<string>,
-        defualt: 'right',
-      },
     },
     setup(props, { slots }) {
-      const getOverlayStyleRef = computed(() => {
-        return {
-          maxWidth: props.maxWidth,
-        };
-      });
+      const getOverlayStyleRef = computed(
+        (): CSSProperties => {
+          return {
+            maxWidth: props.maxWidth,
+          };
+        }
+      );
 
-      const getWrapStyleRef = computed(() => {
-        return {
-          color: props.color,
-          fontSize: props.fontSize,
-        };
-      });
+      const getWrapStyleRef = computed(
+        (): CSSProperties => {
+          return {
+            color: props.color,
+            fontSize: props.fontSize,
+          };
+        }
+      );
 
       const getMainStyleRef = computed(() => {
         return props.absolute ? props.position : {};
       });
 
       const renderTitle = () => {
         const list = props.text;
+
         if (isString(list)) {
           return h('p', list);
         }
+
         if (isArray(list)) {
           return list.map((item, index) => {
             return h('p', { key: item }, [props.showIndex ? `${index + 1}. ` : '', item]);
           });
         }
+
         return null;
       };
 
@@ -95,7 +85,7 @@
                 style: unref(getWrapStyleRef),
               },
               [renderTitle()]
-            ) as any,
+            ),
             overlayClassName: 'base-help__wrap',
             autoAdjustOverflow: true,
             overlayStyle: unref(getOverlayStyleRef),

src/components/Basic/src/BasicTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="base-title" :class="{ 'show-span': showSpan && $slots.default }">
+  <span class="base-title" :class="{ 'show-span': span && $slots.default }">
     <slot />
     <BasicHelp class="base-title__help" v-if="helpMessage" :text="helpMessage" />
   </span>
@@ -10,6 +10,7 @@
   import { defineComponent } from 'vue';
 
   import BasicHelp from './BasicHelp.vue';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'BasicTitle',
@@ -19,13 +20,7 @@
         type: [String, Array] as PropType<string | string[]>,
         default: '',
       },
-      showSpan: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
-    },
-    setup() {
-      return {};
+      span: propTypes.bool,
     },
   });
 </script>

src/components/Breadcrumb/index.ts

@@ -0,0 +1,7 @@
+import Breadcrumb from './src/Breadcrumb.vue';
+import BreadcrumbItem from './src/BreadcrumbItem.vue';
+import { withInstall } from '../util';
+
+export { Breadcrumb, BreadcrumbItem };
+
+export default withInstall(Breadcrumb, BreadcrumbItem);