Release (#15)

* chore: release v1.0.0

* docs: 加上文档地址 (#13)

Co-authored-by: HOMEDO\zhangjiayun <zhangjiayun@homedo.com>

* docs: 文档名称修改

* feat: 登录输入框加一键清空和密码框显示隐藏

* feat: 登录框加上验证码

* fix: 去除VueI18nPlugin以让Vue18n其支持内联 JavaScript 字符串的模板

* refactor: 样式规范化

全局样式文件规范化
font-size改为自动换算rem
 不同size下的elment base font-size变更

* fix: 修复文档链接样式错误，修复刷新不自动关闭菜单错误

* feat: 加上切换动画

* chore: template-release v1.0.1

* chore: release v1.0.1

Co-authored-by: HOMEDO\zhangjiayun <zhangjiayun@homedo.com>

CHANGELOG.md

@@ -1,5 +1,36 @@
 
 
+## [1.0.1](https://github.com/meadmin-cn/meadmin-template/compare/main-1.0.0...main-1.0.1) (2022-08-28)
+
+
+### 文档更改[docs]
+
+* 加上文档地址 ([#13](https://github.com/meadmin-cn/meadmin-template/issues/13)) ([0ee505d](https://github.com/meadmin-cn/meadmin-template/commit/0ee505d4c4a7b4260ad52ae03fc4d6755c57dcc4))
+* 文档名称修改 ([9ceeb9b](https://github.com/meadmin-cn/meadmin-template/commit/9ceeb9bd87bd2dcb5a2f3671973889d8f0018ab8))
+
+
+### 重构[refactor]
+
+* 样式规范化 ([d45ff53](https://github.com/meadmin-cn/meadmin-template/commit/d45ff5355dffd36c00f3bc7944764c25ea2ea1a5))
+
+
+### Bug 修复[fix]
+
+* 去除VueI18nPlugin以让Vue18n其支持内联 JavaScript 字符串的模板 ([e76411f](https://github.com/meadmin-cn/meadmin-template/commit/e76411fc7c3ed8e3cdb37ad79a88309951ba49e8))
+* 修复文档链接样式错误，修复刷新不自动关闭菜单错误 ([2de62c5](https://github.com/meadmin-cn/meadmin-template/commit/2de62c52559b712b4b43aa5305292b5795020125))
+
+
+### 新功能[feat]
+
+* 登录框加上验证码 ([5526274](https://github.com/meadmin-cn/meadmin-template/commit/5526274e52c0819a0281345215186ebd29a9a401))
+* 登录输入框加一键清空和密码框显示隐藏 ([f6c1c65](https://github.com/meadmin-cn/meadmin-template/commit/f6c1c65b41e87d740b15d0c4acae7fffaff64158))
+* 加上切换动画 ([2be4f31](https://github.com/meadmin-cn/meadmin-template/commit/2be4f3134d703c3b6fa3f65596541f1da16c25dc))
+
+
+### 其他[chore]
+
+* template-release v1.0.1 ([424eaee](https://github.com/meadmin-cn/meadmin-template/commit/424eaeef8498b8e3dccea3da38c82b1e7abdf3a9))
+
 ## 1.0.0 (2022-08-22)
 
 

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 .",
@@ -40,7 +40,6 @@
     "@babel/eslint-parser": "^7.18.9",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
-    "@intlify/unplugin-vue-i18n": "^0.5.0",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jquery": "^3.5.14",
     "@types/js-cookie": "^3.0.2",
@@ -52,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/api/user.ts

@@ -9,6 +9,7 @@ const enum Api {
 export class LoginParams {
   username = '';
   password = '';
+  captcha = '';
 }
 export interface LoginResult {
   token: string;

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/locales/lang/en/default.json

@@ -4,7 +4,9 @@
   "请填写": "Please input",
   "用户名": "Username",
   "密码": "Password",
+  "验证码": "Captcha",
   "长度必须在 {0} 到 {1}个字符之间": "Length should be {0} to {1}",
+  "长度必须为 {0} 个字符": "Length should be {0}",
   "项目配置": "Theme Config",
   "主题色": "Theme Color",
   "侧边栏背景色": "Sidebar Background",

src/main.ts

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