Merge branch 'template' into template-dev

TEMPLATE-CHANGELOG.md

@@ -1,5 +1,37 @@
 
 
+## [1.0.1](https://github.com/meadmin-cn/meadmin-template/compare/template-1.0.0...template-1.0.1) (2022-08-28)
+
+
+### CI发版[ci]
+
+* 改为各自独立发版命令 ([ae3bcf7](https://github.com/meadmin-cn/meadmin-template/commit/ae3bcf77b67375e8b35253a3dd7838c9fd8666c5))
+* 忽略部署文件 ([37d7068](https://github.com/meadmin-cn/meadmin-template/commit/37d7068cb090070d94484f3c047f19deeb04b22b))
+
+
+### 文档更改[docs]
+
+* 加上文档地址 ([534d870](https://github.com/meadmin-cn/meadmin-template/commit/534d8700a397f65a2934fa0ffe199355bba75fed))
+* 文档名称修改 ([2484986](https://github.com/meadmin-cn/meadmin-template/commit/2484986058c3f1c85c692d770871006309a43f56))
+
+
+### 重构[refactor]
+
+* 样式规范化 ([d7ee0dd](https://github.com/meadmin-cn/meadmin-template/commit/d7ee0ddeb46de0cb9db2b0882df43ac261d43bfa))
+
+
+### Bug 修复[fix]
+
+* 去除VueI18nPlugin以让Vue18n其支持内联 JavaScript 字符串的模板 ([8c78f47](https://github.com/meadmin-cn/meadmin-template/commit/8c78f474bf01e60fe930d8457fb6986a13b9f663))
+* 修复文档链接样式错误，修复刷新不自动关闭菜单错误 ([6dda967](https://github.com/meadmin-cn/meadmin-template/commit/6dda967e3960625c64041d686972630503af0d72))
+
+
+### 新功能[feat]
+
+* 登录框加上验证码 ([3273dfb](https://github.com/meadmin-cn/meadmin-template/commit/3273dfb9092f4e7dadd466953fb9e3d970b49270))
+* 登录输入框加一键清空和密码框显示隐藏 ([7905fb8](https://github.com/meadmin-cn/meadmin-template/commit/7905fb83ff6daa35422877cd741d9d6d99241239))
+* 加上切换动画 ([303195a](https://github.com/meadmin-cn/meadmin-template/commit/303195a986900a751244ae5f22e1d79efcb5ed67))
+
 ## 1.0.0 (2022-08-22)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "meadmin-template",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "format": "prettier --write --cache .",
@@ -51,11 +51,13 @@
     "@typescript-eslint/parser": "^5.33.1",
     "@vitejs/plugin-vue": "^3.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
+    "autoprefixer": "^10.4.8",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
+    "postcss-plugin-px2rem": "^0.8.1",
     "prettier": "2.7.1",
     "release-it": "^15.1.1",
     "rollup-plugin-visualizer": "^5.7.1",

src/app.ts

@@ -2,9 +2,11 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import { event, mitter } from './event';
 import layoutMenuItem from '@/layout/components/menu/components/menuItem.vue';
+import KeepAlive from '@/components/meKeepAlive';
 export const app = createApp(App);
 export async function bootscrapt() {
   app.component('LayoutMenuItem', layoutMenuItem);
+  app.component('KeepAlive', KeepAlive);
   await Promise.allSettled(mitter.emit(event.START, app));
   mitter.emit(event.READY, app);
   app.mount('#app');

src/components/meComponent.ts

@@ -0,0 +1,56 @@
+import { PropType, Ref, Transition, TransitionProps, VNode } from 'vue';
+import { MeKeepAliveProps, default as MeKeepAlive } from './meKeepAlive';
+import { useLoadMessages } from '@/locales/i18n';
+import { done } from '@/utils/nProgress';
+import { localeConfig } from '@/config';
+export default defineComponent({
+  props: {
+    is: {
+      type: [String, Object],
+    },
+    keepAlive: Object as PropType<MeKeepAliveProps>,
+    componentKey: [Number, String, Symbol],
+    doneProgress: Boolean,
+    transition: Object as PropType<TransitionProps>,
+  },
+  setup(props, { attrs }) {
+    const loadMessages = useLoadMessages();
+    const componentIs: Ref<any> = ref(undefined);
+    const key = ref(props.componentKey);
+    const _attrs = ref(attrs);
+    watch(
+      () => props.is,
+      async (is) => {
+        if (is) {
+          localeConfig.loadMessageConfig.componentLoad && (await Promise.allSettled(loadMessages(is as any, false))); // 自动加载语言包
+          componentIs.value = is;
+          key.value = props.componentKey;
+          _attrs.value = attrs;
+          if (props.doneProgress) {
+            done();
+          }
+        }
+      },
+      { immediate: true },
+    );
+
+    return () => {
+      const components = [] as VNode[];
+      components.push(
+        h(componentIs.value || 'div', {
+          key: key.value,
+          ..._attrs.value,
+        }),
+      );
+      if (props.keepAlive) {
+        const index = components.length - 1;
+        components.push(h(MeKeepAlive, props.keepAlive, [components[index]]));
+      }
+      if (props.transition) {
+        const index = components.length - 1;
+        components.push(h(Transition, props.transition, { default: () => components[index] }));
+      }
+      return components[components.length - 1];
+    };
+  },
+});

src/components/meKeepAlive/index.ts

@@ -51,7 +51,7 @@ export interface KeepAliveContext extends ComponentRenderContext {
 }
 
 const KeepAliveImpl: ComponentOptions = {
-  name: `meKeepAlive`,
+  name: `MeKeepAlive`,
 
   // Marker for special handling inside the renderer. We are not using a ===
   // check directly on KeepAlive in the renderer, because importing it directly

src/layout/components/header/components/tagBar/components/contextmenu.vue

@@ -103,6 +103,7 @@ let canCloseFirst = computed(() => {
 const reload = () => {
   // 刷新
   router.replace('/redirect/' + encodeURIComponent(props.current.fullPath));
+  closeMenu();
 };
 const closeCurrent = async () => {
   // 关闭当前

src/layout/components/header/components/tagBar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="footer">
+  <div class="tag-bar">
     <a class="icon pointer" :class="{ 'is-disabled': scrollLeft <= 0 }" @click="back">
       <mel-icon-d-arrow-left></mel-icon-d-arrow-left>
     </a>
@@ -185,9 +185,9 @@ watch(route, () => {
 });
 </script>
 <style lang="scss" scoped>
-.footer {
+.tag-bar {
   border-bottom: 1px solid var(--el-border-color);
-  height: 35px;
+  height: $header-tag-height;
   display: flex;
   align-items: center;
 

src/layout/components/header/components/topBar/components/left.vue

@@ -12,7 +12,7 @@
       <el-breadcrumb separator="/">
         <el-breadcrumb-item
           v-for="(item, index) in breadcrumbList"
-          :key="index"
+          :key="item.path"
           :to="index === breadcrumbList.length - 1 || !item.redirect ? undefined : item"
           >{{ $t(item.meta!.title!) }}</el-breadcrumb-item
         >
@@ -42,7 +42,7 @@ mitter.on(event.BEFORE_ROUTE_CHANGE, ({ to }) => setBreadcrumbList(to), true);
   height: 100%;
 
   .fold-expand {
-    font-size: 1.55rem;
+    font-size: 20px;
   }
 
   &:deep(.el-breadcrumb__inner.is-link) {

src/layout/components/header/components/topBar/components/right/components/messageBox.vue

@@ -54,7 +54,7 @@ const isDot = ref(true);
 .message-tabs {
   padding: 15px 10px;
   height: 300px;
-  font-size: 1rem;
+  font-size: 14px;
 
   .message-header {
     display: flex;

src/layout/components/header/components/topBar/components/right/components/user.vue

@@ -22,7 +22,7 @@
           </el-dropdown-item>
         </a>
         <a href="https://meadmin-cn.github.io/meadmin-template-doc/">
-          <el-dropdown-item disabled>
+          <el-dropdown-item>
             {{ $t('文档') }}
           </el-dropdown-item>
         </a>

src/layout/components/header/components/topBar/components/right/index.vue

@@ -21,7 +21,7 @@ const { themeConfig } = useSettingStore();
 </script>
 <style lang="scss" scoped>
 .right {
-  font-size: 1rem;
+  font-size: 14px;
   height: 100%;
   display: flex;
 

src/layout/components/header/components/topBar/index.vue

@@ -11,7 +11,7 @@ import Right from './components/right/index.vue';
 </script>
 <style lang="scss" scoped>
 .top-bar {
-  height: 48px;
+  height: $header-top-height;
   display: flex;
   align-items: center;
   justify-content: space-between;

src/layout/components/page.vue

@@ -1,6 +1,12 @@
 <template>
   <router-view v-slot="{ Component, route }">
-    <me-component :is="Component" :keep-alive="keepAliveProps" :component-key="route.fullPath" done-progress>
+    <me-component
+      :transition="{ name: 'fade-transform', mode: 'out-in' }"
+      :is="Component"
+      :keep-alive="keepAliveProps"
+      :component-key="route.fullPath"
+      done-progress
+    >
     </me-component>
   </router-view>
 </template>

src/layout/index.vue

@@ -60,9 +60,6 @@ const globalStore = useGlobalStore();
 }
 
 .main {
-  padding: 1rem;
-}
-:global(.me-sidebar-drawer .el-drawer__body) {
-  padding: 0;
+  padding: $page-padding;
 }
 </style>

src/main.ts

@@ -1,4 +1,4 @@
 import '@/event/module';
-import '@/styles/common.scss';
+import '@/styles/index.scss';
 import { bootscrapt } from './app';
 bootscrapt();

src/styles/element-plus.scss

@@ -0,0 +1,21 @@
+//自定义 element-ui 样式
+.me-large {
+  //这里强制将font-size-base设置为large
+  --el-font-size-base: var(--el-font-size-large);
+}
+.me-small {
+  //这里强制将font-size-base设置为small
+  --el-font-size-base: var(--el-font-size-small);
+}
+//颜色选择器预定义样式加上border
+.el-color-predefine__color-selector > div {
+  border: 1px solid var(--el-border-color);
+}
+.me-sidebar-drawer {
+  .el-drawer__body {
+    padding: 0;
+  }
+}
+.el-breadcrumb {
+  font-size: var(--el-font-size-base);
+}