feat: multi-language layout

vbenjs · Nov 25, 2020 · e5f8ce3 · e5f8ce3
1 parent cedba37
commit e5f8ce3
Show file tree

Hide file tree

Showing 44 changed files with 504 additions and 386 deletions.
diff --git a/mock/sys/user.ts b/mock/sys/user.ts
@@ -6,7 +6,7 @@ function createFakeUserList() {
     {
       userId: '1',
       username: 'vben',
-      realName: 'Vben',
+      realName: 'Vben Admin',
       desc: 'manager',
       password: '123456',
       token: 'fakeToken1',

diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts
@@ -1,8 +1,8 @@
-import AppLocalPicker from './src/AppLocalPicker.vue';
+import AppLocalePicker from './src/AppLocalePicker.vue';
 import AppPageFooter from './src/AppPageFooter.vue';
 import AppLogo from './src/AppLogo.vue';
 import { withInstall } from '../util';
 
-export { AppLocalPicker, AppPageFooter, AppLogo };
+export { AppLocalePicker, AppPageFooter, AppLogo };
 
-export default withInstall(AppLocalPicker, AppPageFooter, AppLogo);
+export default withInstall(AppLocalePicker, AppPageFooter, AppLogo);
diff --git a/...onents/Application/src/AppLocalPicker.vue → ...nents/Application/src/AppLocalePicker.vue b/...onents/Application/src/AppLocalPicker.vue → ...nents/Application/src/AppLocalePicker.vue
@@ -4,6 +4,7 @@
     :dropMenuList="localeList"
     :selectedKeys="selectedKeys"
     @menuEvent="handleMenuEvent"
+    overlayClassName="app-locale-picker-overlay"
   >
     <span class="app-local-picker">
       <GlobalOutlined class="app-local-picker__icon" />
@@ -30,8 +31,12 @@
         type: Boolean,
         default: true,
       },
+      reload: {
+        type: Boolean,
+        default: false,
+      },
     },
-    setup() {
+    setup(props) {
       const { localeList } = useLocaleSetting();
       const selectedKeys = ref<string[]>([]);
 
@@ -50,6 +55,7 @@
       function toggleLocale(lang: LocaleType | string) {
         changeLocale(lang as LocaleType);
         selectedKeys.value = [lang as string];
+        props.reload && location.reload();
       }
 
       function handleMenuEvent(menu: DropMenu) {
@@ -61,7 +67,13 @@
   });
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
+  .app-locale-picker-overlay {
+    .ant-dropdown-menu-item {
+      min-width: 160px;
+    }
+  }
+
   .app-local-picker {
     display: flex;
     align-items: center;

diff --git a/src/components/Dropdown/src/Dropdown.tsx b/src/components/Dropdown/src/Dropdown.tsx
@@ -1,11 +1,12 @@
+import type { Trigger } from './types';
+
 import { defineComponent, computed, unref } from 'vue';
-import { Dropdown, Menu, Divider } from 'ant-design-vue';
+import { Dropdown, Menu } from 'ant-design-vue';
 
 import Icon from '/@/components/Icon/index';
 
 import { basicDropdownProps } from './props';
 import { getSlot } from '/@/utils/helper/tsxHelper';
-import { Trigger } from './types';
 
 export default defineComponent({
   name: 'Dropdown',
@@ -24,7 +25,7 @@ export default defineComponent({
         <Menu onClick={handleClickMenu} selectedKeys={props.selectedKeys}>
           {() => (
             <>
-              {unref(getMenuList).map((item, index) => {
+              {unref(getMenuList).map((item) => {
                 const { disabled, icon, text, divider, event } = item;
                 return [
                   <Menu.Item key={`${event}`} disabled={disabled}>
@@ -35,7 +36,8 @@ export default defineComponent({
                       </>
                     )}
                   </Menu.Item>,
-                  divider && <Divider key={`d-${index}`} />,
+                  // @ts-ignore
+                  divider && <Menu.Divider key={`d-${event}`} />,
                 ];
               })}
             </>

diff --git a/src/design/ant/index.less b/src/design/ant/index.less
@@ -13,20 +13,17 @@
   }
 }
 
-// .ant-form-item-label {
-//   text-align: unset;
-// }
-
 // =================================
 // ==============descriptions=======
 // =================================
-.ant-descriptions-bordered .ant-descriptions-item-label {
-  background-color: @background-color-light;
-}
+// .ant-descriptions-bordered .ant-descriptions-item-label {
+//   background-color: @background-color-light;
+// }
+
+// .ant-descriptions .ant-descriptions-item-content {
+//   color: @text-color-call-out;
+// }
 
-.ant-descriptions .ant-descriptions-item-content {
-  color: @text-color-call-out;
-}
 // =================================
 // ==============modal message======
 // =================================
@@ -46,68 +43,6 @@
   color: @primary-color !important;
 }
 
-.ant-modal-mask {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-// =================================
-// ==============menu===============
-// =================================
-.ant-menu-item {
-  &-selected {
-    a {
-      color: @primary-color;
-
-      &:hover {
-        color: @primary-color;
-      }
-    }
-  }
-}
-// =================================
-// ==============dropdown===========
-// =================================
-.ant-dropdown {
-  .ant-divider {
-    margin: 4px 0;
-  }
-
-  &-menu-item {
-    line-height: 30px;
-    color: @text-color-call-out;
-
-    &:hover {
-      color: inherit;
-      background-color: @border-color-shallow-light;
-    }
-  }
-}
-// =================================
-// ==============back-top===========
-// =================================
-.ant-back-top {
-  right: 50px;
-  bottom: 60px;
-}
-// =================================
-// ==============calendar===========
-// =================================
-.ant-calendar-picker {
-  width: 100%;
-}
-// =================================
-// ==============tooltip============
-// =================================
-
-.ant-tooltip {
-  &-inner {
-    padding: 6px 16px;
-    line-height: 20px;
-    color: @white;
-    background: @text-color-base;
-    border-radius: 4px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-}
 // =================================
 // ==============form===============
 // =================================

diff --git a/src/design/ant/input.less b/src/design/ant/input.less
@@ -5,24 +5,9 @@
 .ant-input {
   &-number {
     min-width: 110px;
-    border-color: @border-color-shallow-dark;
   }
 }
 
-.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
-  border-color: @info-color;
-}
-
-.ant-input-disabled,
-.ant-select-disabled .ant-select-selection,
-.ant-cascader-picker-label {
-  color: @text-color-base !important;
-}
-
-.ant-input-disabled {
-  background-color: @background-color-light;
-}
-
 .ant-input-affix-wrapper .ant-input-suffix {
   right: 9px;
 }

diff --git a/src/design/color.less b/src/design/color.less
@@ -13,6 +13,9 @@
 }
 
 @white: #fff;
+
+@content-bg: #f0f2f5;
+
 @info-color: @primary-color;
 
 @basic-mask-color: fade(@white, 30%);
@@ -24,7 +27,7 @@
 @iconify-bg-color: #5551;
 
 // =================================
-// ==============border-color============
+// ==============border-color=======
 // =================================
 
 // Dark-dark

diff --git a/src/design/index.less b/src/design/index.less
@@ -54,8 +54,7 @@ input::-ms-reveal {
 }
 
 body {
-  // font-family: 'Microsoft YaHei,微软雅黑,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB';
-  font-family: '-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji';
+  font-family: 'BlinkMacSystemFont,segoe ui,Microsoft YaHei,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji';
   font-style: normal;
   font-weight: normal;
   line-height: 1.428571429; // 20/14
@@ -159,17 +158,3 @@ embed,
 object {
   vertical-align: baseline !important;
 }
-
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-.ant-layout {
-  background: #f0f2f5;
-
-  // &-content {
-  //   position: relative;
-  //   overflow: hidden;
-  // }
-}
diff --git a/src/design/mixins.less b/src/design/mixins.less
@@ -16,33 +16,33 @@
     color: @color;
   }
 }
-// 文本截断
+// Text truncation
 .text-truncate() {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* 强制不换行 */
+/* Force no line break */
 .word-nowrap() {
   word-wrap: normal;
   white-space: nowrap;
 }
 
-/* 强制换行 */
+/* Force line break */
 .break-all() {
   word-break: break-all;
   word-wrap: break-word;
   white-space: normal;
 }
 
-// 禁止选中
+// Prohibit selection
 .unselect() {
   cursor: pointer;
   user-select: none;
 }
 
-/* 适用于webkit内核和移动端 */
+/* Suitable for webkit core and mobile */
 .ellipsis-multiple(@num: 1) {
   display: -webkit-box;
   overflow: hidden;

diff --git a/src/design/public.less b/src/design/public.less
@@ -1,8 +1,16 @@
+#app {
+  width: 100%;
+  height: 100%;
+}
+
 .app-svg-loading {
   position: relative;
   width: auto;
 }
 
+// =================================
+// ==============scrollbar==========
+// =================================
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;