perf(i18n): merge common lang

package.json

@@ -96,7 +96,7 @@
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.0",
     "typescript": "^4.1.3",
-    "vite": "^2.0.0-beta.22",
+    "vite": "^2.0.0-beta.23",
     "vite-plugin-html": "^2.0.0-beta.5",
     "vite-plugin-mock": "^2.0.0-beta.3",
     "vite-plugin-purge-icons": "^0.5.0",

src/components/Application/src/search/AppSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="prefixCls" v-if="getShowSearch" @click.stop="handleSearch">
     <Tooltip>
-      <template #title> {{ t('component.app.search') }} </template>
+      <template #title> {{ t('common.searchText') }} </template>
       <SearchOutlined />
     </Tooltip>
 

src/components/Application/src/search/AppSearchFooter.vue

@@ -15,7 +15,7 @@
     <span :class="`${prefixCls}__item`">
       <g-icon icon="mdi:keyboard-esc" />
     </span>
-    <span>{{ t('component.app.toClose') }}</span>
+    <span>{{ t('common.closeText') }}</span>
   </div>
 </template>
 <script lang="ts">
@@ -47,7 +47,7 @@
     font-size: 12px;
     color: #666;
     background: rgb(255 255 255);
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 16px 16px;
     box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
     align-items: center;
     flex-shrink: 0;

src/components/Application/src/search/AppSearchModal.vue

@@ -7,7 +7,7 @@
             <div :class="`${prefixCls}-input__wrapper`">
               <a-input
                 :class="`${prefixCls}-input`"
-                :placeholder="t('component.app.search')"
+                :placeholder="t('common.searchText')"
                 allow-clear
                 @change="handleSearch"
               >
@@ -16,7 +16,7 @@
                 </template>
               </a-input>
               <span :class="`${prefixCls}-cancel`" @click="handleClose">{{
-                t('component.app.cancel')
+                t('common.cancelText')
               }}</span>
             </div>
 
@@ -116,6 +116,7 @@
         scrollWrap,
         handleMouseenter,
         handleClose: () => {
+          searchResult.value = [];
           emit('close');
         },
       };
@@ -135,7 +136,7 @@
     height: 100%;
     padding-top: 50px;
     // background: #656c85cc;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.25);
     justify-content: center;
     // backdrop-filter: blur(2px);
 
@@ -178,12 +179,13 @@
 
     &-content {
       position: relative;
-      width: 532px;
+      width: 632px;
       // padding: 14px;
       margin: 0 auto auto auto;
       background: #f5f6f7;
-      border-radius: 6px;
-      box-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;
+      border-radius: 16px;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      // box-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;
       flex-direction: column;
     }
 
@@ -196,9 +198,10 @@
 
     &-input {
       width: 100%;
-      height: 56px;
+      height: 48px;
       font-size: 1.5em;
       color: #1c1e21;
+      border-radius: 6px;
 
       span[role='img'] {
         color: #999;

src/components/Application/src/search/useMenuSearch.ts

@@ -1,5 +1,5 @@
 import { cloneDeep } from 'lodash-es';
-import { ref, onBeforeMount, unref, Ref } from 'vue';
+import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { getMenus } from '/@/router/menus';
 import type { Menu } from '/@/router/types';
@@ -130,7 +130,7 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
     start();
   }
 
-  function handleEnter() {
+  async function handleEnter() {
     if (!searchResult.value.length) return;
     const result = unref(searchResult);
     const index = unref(activeIndex);
@@ -139,10 +139,12 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
     }
     const to = result[index];
     handleClose();
+    await nextTick();
     go(to.path);
   }
 
   function handleClose() {
+    searchResult.value = [];
     emit('close');
   }
 

src/components/Button/src/PopConfirmButton.vue

@@ -1,33 +1,42 @@
 <script lang="ts">
-  import { defineComponent, h, unref } from 'vue';
+  import { defineComponent, h, unref, computed } from 'vue';
 
   import { Popconfirm } from 'ant-design-vue';
   import BasicButton from './BasicButton.vue';
   import { propTypes } from '/@/utils/propTypes';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { extendSlots } from '/@/utils/helper/tsxHelper';
   import { omit } from 'lodash-es';
-  const { t } = useI18n();
 
   export default defineComponent({
     name: 'PopButton',
     inheritAttrs: false,
     components: { Popconfirm, BasicButton },
     props: {
       enable: propTypes.bool.def(true),
-      okText: propTypes.string.def(t('component.drawer.okText')),
-      cancelText: propTypes.string.def(t('component.drawer.cancelText')),
+      okText: propTypes.string,
+      cancelText: propTypes.string,
     },
     setup(props, { slots, attrs }) {
-      return () => {
-        const popValues = { ...props, ...unref(attrs) };
+      const { t } = useI18n();
 
+      const getBindValues = computed(() => {
+        const popValues = Object.assign(
+          {
+            okText: t('common.okText'),
+            cancelText: t('common.cancelText'),
+          },
+          { ...props, ...unref(attrs) }
+        );
+        return popValues;
+      });
+      return () => {
         const Button = h(BasicButton, omit(unref(attrs), 'icon'), extendSlots(slots));
         if (!props.enable) {
           return Button;
         }
 
-        return h(Popconfirm, omit(popValues, 'icon'), { default: () => Button });
+        return h(Popconfirm, omit(unref(getBindValues), 'icon'), { default: () => Button });
       };
     },
   });

src/components/Drawer/src/BasicDrawer.vue

@@ -16,7 +16,7 @@
     <ScrollContainer
       :style="getScrollContentStyle"
       v-loading="getLoading"
-      :loading-tip="loadingText || t('component.drawer.loadingText')"
+      :loading-tip="loadingText || t('common.loadingText')"
     >
       <slot />
     </ScrollContainer>

src/components/Drawer/src/props.ts

@@ -11,13 +11,13 @@ export const footerProps = {
    */
   showCancelBtn: propTypes.bool.def(true),
   cancelButtonProps: Object as PropType<Recordable>,
-  cancelText: propTypes.string.def(t('component.drawer.cancelText')),
+  cancelText: propTypes.string.def(t('common.cancelText')),
   /**
    * @description: Show confirmation button
    */
   showOkBtn: propTypes.bool.def(true),
   okButtonProps: Object as PropType<Recordable>,
-  okText: propTypes.string.def(t('component.drawer.okText')),
+  okText: propTypes.string.def(t('common.okText')),
   okType: propTypes.string.def('primary'),
   showFooter: propTypes.bool,
   footerHeight: {

src/components/Form/src/components/FormAction.vue

@@ -101,7 +101,7 @@
         (): ButtonOptions => {
           return Object.assign(
             {
-              text: t('component.form.resetButton'),
+              text: t('common.resetText'),
             },
             props.resetButtonOptions
           );
@@ -111,7 +111,7 @@
       const getSubmitBtnOptions = computed(() => {
         return Object.assign(
           {
-            text: t('component.form.submitButton'),
+            text: t('common.queryText'),
           },
           props.submitButtonOptions
         );

src/components/Form/src/helper.ts

@@ -10,10 +10,10 @@ const { t } = useI18n();
  */
 export function createPlaceholderMessage(component: ComponentType) {
   if (component.includes('Input') || component.includes('Complete')) {
-    return t('component.form.input');
+    return t('common.inputText');
   }
   if (component.includes('Picker')) {
-    return t('component.form.choose');
+    return t('common.chooseText');
   }
   if (
     component.includes('Select') ||
@@ -23,7 +23,7 @@ export function createPlaceholderMessage(component: ComponentType) {
     component.includes('Switch')
   ) {
     // return `请选择${label}`;
-    return t('component.form.choose');
+    return t('common.chooseText');
   }
   return '';
 }

src/components/MenuPlus/index.ts

@@ -0,0 +1 @@
+export { default as Menu } from './src/index.vue';

src/components/MenuPlus/src/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <ul :class="getClass" :style="getStyle">
+    <slot></slot>
+  </ul>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, computed, CSSProperties, unref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+  export default defineComponent({
+    props: {
+      mode: propTypes.oneOf(['horizontal', 'vertical']).def('vertical'),
+      theme: propTypes.oneOf(['light', 'dark', 'primary']).def('light'),
+      activeName: propTypes.oneOfType([propTypes.string, propTypes.number]),
+      openNames: propTypes.array.def([]),
+      accordion: propTypes.bool,
+      width: propTypes.string.def('210px'),
+    },
+    setup(props) {
+      const currentActiveName = ref(props.activeName);
+      const openedNames = ref<string[]>();
+
+      const { prefixCls } = useDesign('menu');
+
+      const getClass = computed(() => {
+        const { theme, mode } = props;
+        let curTheme = theme;
+        if (mode === 'vertical' && theme === 'primary') {
+          curTheme = 'light';
+        }
+        return [
+          prefixCls,
+          `${prefixCls}-${curTheme}`,
+          {
+            [`${prefixCls}-${mode}`]: mode,
+          },
+        ];
+      });
+
+      const getStyle = computed(
+        (): CSSProperties => {
+          const { mode, width } = props;
+          if (mode === 'vertical') {
+            return {
+              width: width,
+            };
+          }
+          return {};
+        }
+      );
+
+      function updateActiveName() {
+        if (unref(currentActiveName) === undefined) {
+          currentActiveName.value = -1;
+        }
+      }
+
+      function updateOpened() {}
+
+      return { getClass, getStyle };
+    },
+  });
+</script>

src/components/Modal/src/BasicModal.vue

@@ -127,6 +127,7 @@
 
       watchEffect(() => {
         visibleRef.value = !!props.visible;
+        fullScreenRef.value = !!props.defaultFullscreen;
       });
 
       watch(

src/components/Modal/src/props.ts

@@ -13,13 +13,14 @@ export const modalProps = {
   // open drag
   draggable: propTypes.bool.def(true),
   centered: propTypes.bool,
-  cancelText: propTypes.string.def(t('component.modal.cancelText')),
-  okText: propTypes.string.def(t('component.modal.okText')),
+  cancelText: propTypes.string.def(t('common.cancelText')),
+  okText: propTypes.string.def(t('common.okText')),
 
   closeFunc: Function as PropType<() => Promise<boolean>>,
 };
 
 export const basicProps = Object.assign({}, modalProps, {
+  defaultFullscreen: propTypes.bool,
   // Can it be full screen
   canFullscreen: propTypes.bool.def(true),
   // After enabling the wrapper, the bottom can be increased in height

src/components/Preview/src/index.vue

@@ -21,9 +21,26 @@
   import { Image } from 'ant-design-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { propTypes } from '/@/utils/propTypes';
-  import { ImageItem } from './types';
   import { isString } from '/@/utils/is';
 
+  interface ImageProps {
+    alt?: string;
+    fallback?: string;
+    src: string;
+    width: string | number;
+    height?: string | number;
+    placeholder?: string | boolean;
+    preview?:
+      | boolean
+      | {
+          visible?: boolean;
+          onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
+          getContainer: string | HTMLElement | (() => HTMLElement);
+        };
+  }
+
+  type ImageItem = string | ImageProps;
+
   export default defineComponent({
     name: 'ImagePreview',
     components: {

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -33,7 +33,7 @@
           </Checkbox>
 
           <a-button size="small" type="link" @click="reset">
-            {{ t('component.table.settingReset') }}
+            {{ t('common.resetText') }}
           </a-button>
         </div>
       </template>

src/components/Table/src/components/settings/RedoSetting.vue

@@ -1,7 +1,7 @@
 <template>
   <Tooltip placement="top">
     <template #title>
-      <span>{{ t('component.table.settingRedo') }}</span>
+      <span>{{ t('common.redo') }}</span>
     </template>
     <RedoOutlined @click="redo" />
   </Tooltip>

src/layouts/default/setting/components/SettingFooter.vue

@@ -7,7 +7,7 @@
 
     <a-button color="warning" block @click="handleResetSetting" class="my-3">
       <RedoOutlined class="mr-2" />
-      {{ t('layout.setting.resetBtn') }}
+      {{ t('common.resetText') }}
     </a-button>
 
     <a-button color="error" block @click="handleClearAndRedo">

src/layouts/default/tabs/components/TabRedo.vue

@@ -1,5 +1,5 @@
 <template>
-  <Tooltip :title="t('layout.multipleTab.tooltipRedo')" placement="bottom" :mouseEnterDelay="0.5">
+  <Tooltip :title="t('common.redo')" placement="bottom" :mouseEnterDelay="0.5">
     <span :class="`${prefixCls}__extra-redo`" @click="handleRedo">
       <RedoOutlined :spin="loading" />
     </span>