0.4.7

examples/App.vue

@@ -1,13 +1,15 @@
 <template>
-    <Index :menus="menus" @updatePwd="pwd => console.log(pwd)" :checkUser="false" username="超级管理员" :closeAble="true"
+    <!-- <Index :menus="menus" @updatePwd="pwd => console.log(pwd)" :checkUser="false" username="超级管理员"
         mode="horizontal">
-    </Index>
+    </Index> -->
+    <ZhuBeiDong :menus="menus" :checkUser="false" username="超级管理员">
+    </ZhuBeiDong>
 </template>
 
 <script lang="ts" setup>
 import { reactive, onMounted, ref } from "vue";
 import { useStore } from "vuex";
-import { Index, Views } from "noob-mengyxu";
+import { Index, ZhuBeiDong, Views } from "noob-mengyxu";
 
 const store = useStore();
 const { buff, dictionary, config, permission, role, user, status, log } = Views.menus;

examples/view/home.vue

@@ -9,7 +9,8 @@ import { NoobTag, Http, GrafanaIframe } from "noob-mengyxu";
 import { useI18n } from "vue3-i18n";
 const { t } = useI18n();
 const { post } = Http.Axios2
-const src = "http://10.100.0.108:3001";
+// const src = "http://10.100.0.108:808";
+const src = "http://www.baidu.com";
 
 </script>
 <style lang="scss" scoped>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "noob-mengyxu",
-    "version": "0.4.6",
+    "version": "0.4.7",
     "main": "index.ts",
     "module": "index.ts",
     "keywords": [
@@ -72,5 +72,6 @@
         "last 2 versions",
         "not dead",
         "not ie 11"
-    ]
+    ],
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/base/item/datetime.vue

@@ -35,7 +35,7 @@ const prop = defineProps({
     },
     formater: {
         type: String,
-        defaul: 'YYYY-MM-DD HH:mm:ss'
+        default: 'YYYY-MM-DD HH:mm:ss'
     },
     width: {
         type: Number

packages/manage/head/fullscreen.vue

@@ -1,5 +1,6 @@
 <template>
     <el-tooltip effect="dark" :content="t('head.fullScreen')" placement="bottom">
+        <!-- <el-button class="head-icon" @click="fullscreen"  icon="fullscreen" :size="state.size.size" circle></el-button> -->
         <el-icon @click="fullscreen" class="head-icon">
             <FullScreen />
         </el-icon>
@@ -9,8 +10,11 @@
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import { useI18n } from "vue3-i18n";
+import { useStore } from "vuex";
 const { t } = useI18n();
 
+const { state, commit, dispatch } = useStore();
+
 const fullscreen = () => {
     if (!document.fullscreenElement) {
         document.documentElement.requestFullscreen();

packages/manage/head/head.vue

@@ -1,9 +1,9 @@
 <template>
-    <el-button v-if="closeAble" class="close-aside-btn" :icon="isClose ? 'CaretRight' : 'CaretLeft'" circle
-        :size="state.size.size" @click="close"></el-button>
     <div class="head">
         <div class="head-left">
-            <div class="title">
+            <el-button v-if="closeAble" class="close-aside-btn" :icon="isClose ? 'CaretRight' : 'CaretLeft'" circle
+                :size="state.size.size" @click="close"></el-button>
+            <div class="title" v-if="isClose">
                 <el-image class="logo" v-if="logo" :src="logo" fit="fit" />
                 {{ title || t('title') }}
             </div>
@@ -57,8 +57,9 @@ const close = () => {
 
 onMounted(() => { });
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
+
 .close-aside-btn {
     position: absolute;
     z-index: 99;

packages/manage/head/menu-tree.vue

@@ -2,6 +2,10 @@
     <el-menu :default-active="active" router :mode="mode" :class="mode" :text-color="state.style.menuColor"
         :background-color="mode == 'horizontal' ? state.style.headBg : state.style.menuBg"
         :active-text-color="state.style.menuActiveColor" :size="state.size.size">
+        <div class="title" v-if="title">
+            <el-image class="logo" v-if="logo" :src="logo" fit="fit" />
+            {{ title || t('title') }}
+        </div>
         <template v-for="menu in data || state.menus">
             <template v-if="menu.children && menu.children.length > 0">
                 <el-sub-menu :index="getPath(menu)" :key="menu.path">
@@ -44,6 +48,14 @@ const props = defineProps({
         type: Array<any>(),
         default: null
     },
+    logo: {
+        type: String,
+        default: null,
+    },
+    title: {
+        type: String,
+        default: null,
+    },
 });
 
 const style = reactive({ 'margin-right': '10px', width: getters.menuIconSize, height: getters.menuIconSize })
@@ -63,6 +75,16 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.title {
+    height: v-bind('state.size.headHeight');
+    width: v-bind('state.size.asideWidth');
+    text-align: center;
+    font-size: v-bind('state.size.titleSize');
+    line-height: v-bind('state.size.headHeight');
+    font-weight: bold;
+    color: v-bind('state.style.menuColor');
+}
+
 .horizontal {
     padding-top: 1px;
     height: v-bind('state.size.headHeight');
@@ -72,7 +94,8 @@ onMounted(() => {
 
 .vertical {
     padding-top: 1px;
-    height: v-bind('state.size.mainHeight');
+    // height: v-bind('state.size.mainHeight');
+    height: 100%;
     border: none;
 }
 

packages/manage/index.ts

@@ -1,5 +1,6 @@
 import Index from './router/index.vue';
+import ZhuBeiDong from './router/zhuBeiDong.vue';
 import Common from './common';
 import NoobHead from './head';
 import Views from './views';
-export { Index, Common, NoobHead, Views };
+export { Index, ZhuBeiDong, Common, NoobHead, Views };

packages/manage/router/zhuBeiDong.vue

@@ -0,0 +1,239 @@
+<template>
+    <el-container :style="appMain" ref="main" v-show="!flag.loading">
+        <el-aside :width="state.size.asideWidth">
+            <MenuTree :title="title || t('title')" :logo="logo" :data="menus" mode="vertical" />
+        </el-aside>
+        <el-container id="container">
+            <el-header v-show="state.size.headHeight != '0px'" class="app-head" :height="state.size.headHeight">
+
+                <Head :title="title" :logo="logo" :username="username" :closeAble="true">
+                    <template #left>
+                        <MenuTree v-show="state.size.asideWidth == '0px'" :data="menus" mode="horizontal" />
+                    </template>
+                    <HeadPersonal @updatePwd="updatePwd" @logout="onLogout" :center="center" />
+                    <Fullscreen />
+                    <LangChange v-if="langAble" />
+                    <SizeChange v-if="sizeAble" />
+                    <slot></slot>
+                </Head>
+            </el-header>
+            <el-main class="app-main">
+                <router-view />
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted, ref, onBeforeUnmount } from "vue";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
+import { NoobHead, Api, Styles, Size } from "noob-mengyxu"
+const { Head, MenuTree, HeadPersonal, Fullscreen, StyleChange, LangChange, SizeChange } = NoobHead;
+import md5 from "js-md5";
+import { useI18n } from "vue3-i18n";
+const { t } = useI18n();
+
+const { state, commit, dispatch } = useStore();
+const emit = defineEmits(['updatePwd', 'logout']);
+const router = useRouter()
+const appMain = reactive({
+    height: window.innerHeight + 'px',
+    backgroundColor: state.style.bodyBg
+});
+const main = ref();
+const flag = reactive({
+    showHeader: true,
+    showAside: true,
+    loading: false
+})
+let interval = 0;
+state.style = Styles.light;
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: null,
+    },
+    menus: {
+        type: Array<any>(),
+        default: null
+    },
+    styleAble: {
+        type: Boolean,
+        default: true,
+    },
+    sizeAble: {
+        type: Boolean,
+        default: true,
+    },
+    langAble: {
+        type: Boolean,
+        default: true,
+    },
+    center: {
+        type: String,
+        default: 'home',
+    },
+    checkUser: {
+        type: Boolean,
+        default: true,
+    },
+    username: {
+        type: String,
+        default: null,
+    },
+    logo: {
+        type: String,
+        default: null,
+    },
+});
+
+const onResize = () => {
+    const height = window.innerHeight;
+    appMain.height = height + 'px';
+    commit('initSize', [height, window.innerWidth]);
+}
+
+const getUser = (first?) => {
+    if (!props.checkUser) {
+        return;
+    }
+    first && (flag.loading = true);
+    Api.pub.getInfo().then((rsp) => {
+        first && (flag.loading = false);
+        if (rsp) {
+            commit('updateState', ['user', rsp]);
+        } else {
+            router.push('/login');
+        }
+    });
+};
+
+const onLogout = () => {
+    Api.pub.logout().then(rsp => {
+        getUser();
+    });
+}
+
+const updatePwd = pwd => {
+    pwd.old = md5(pwd.old);
+    pwd.new = md5(pwd.new);
+    pwd.reNew = md5(pwd.reNew);
+    emit('updatePwd', pwd);
+    Api.user.updatePwd(pwd);
+}
+
+onMounted(() => {
+    router.push("/")
+    dispatch("getMenus");
+    getUser(true);
+    interval = setInterval(getUser, 5000);
+    window.onresize = onResize;
+    onResize();
+    commit('updateState', ['style', Styles.plain]);
+});
+
+onBeforeUnmount(() => {
+    clearInterval(interval);
+})
+
+</script>
+
+<style lang='scss'>
+@charset "UTF-8";
+
+body {
+    font-size: v-bind('state.size.fontSize') !important;
+    font-family: "Microsoft YaHei";
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+}
+
+.app-main {
+    box-shadow: 2px 2px 5px 3px #e5e6eb;
+    border-radius: 4px;
+    margin: 0px 0px 0px 3px !important;
+    padding: 0 !important;
+    height: v-bind('state.size.mainHeight');
+}
+
+.el-header,
+.main-head,
+.main-table {
+    padding: 0;
+}
+
+#app,
+#container,
+.app-main {
+    background-color: v-bind('state.style.bodyBg');
+    color: v-bind('state.style.color');
+    font-size: v-bind('state.size.fontSize');
+}
+
+.app-head {
+    padding: 0px !important;
+    background-color: v-bind('state.style.headBg');
+    height: v-bind('state.size.headHeight');
+}
+
+.head-icon {
+    float: right;
+    cursor: pointer;
+    height: v-bind('state.size.headHeight') !important;
+    margin-right: 20px !important;
+    font-size: v-bind('state.size.headIconSize') !important;
+    align-items: center !important;
+    color: v-bind('state.style.color') !important;
+}
+
+.form-item {
+    margin-right: v-bind('state.size.searchMargin');
+
+    &.full {
+        width: 100%;
+        margin-right: 0px;
+    }
+}
+
+#app {
+
+    .el-input,
+    .el-textarea,
+    .el-date-editor,
+    .el-input__wrapper {
+        --el-input-bg-color: v-bind('state.style.itemBg') !important;
+        --el-fill-color-blank: v-bind('state.style.itemBg') !important;
+        --el-input-text-color: v-bind('state.style.color') !important;
+    }
+
+    .el-popper {
+        --el-bg-color-overlay: v-bind('state.style.itemBg') !important;
+        --el-fill-color-light: v-bind('state.style.bodyBg') !important;
+        text-align: left;
+    }
+
+    .el-dialog {
+        --el-dialog-bg-color: v-bind('state.style.bodyBg') !important;
+    }
+
+    .el-drawer {
+        --el-drawer-bg-color: v-bind('state.style.bodyBg') !important;
+    }
+
+    * {
+        --el-text-color-regular: : v-bind('state.style.color') !important;
+        --el-text-color-primary: v-bind('state.style.color') !important;
+        --el-disabled-bg-color: v-bind('state.style.itemBg') !important;
+    }
+
+    *::selection {
+        background-color: v-bind('state.style.selectionBg');
+        color: v-bind('state.style.selectionColor');
+    }
+}
+</style>

plugs/config/size/normal.ts

@@ -6,7 +6,7 @@ export default class Normal {
   titleSize = '18px'; //标题字体尺寸
   headIconSize = '20px'; //头部图标尺寸
   headHeight = '50px'; //头部高度
-  closeTop = '40px'; //展开收起菜单按钮
+  closeTop = '10px'; //展开收起菜单按钮
   headRightWidth = '400px'; //头部右侧菜单宽度
   headLeftWidth = ''; //头部左侧剩余宽度
   asideWidth = '180px'; //左侧菜单宽度

plugs/config/styles/index.ts

@@ -2,7 +2,9 @@ import Plain from './plain';
 import Plainb from './plainb';
 import Light from './light';
 import Dark from './dark';
+import ZhuBeidong from './zhuBeiDong';
 export const plain = new Plain();
 export const plainb = new Plainb();
 export const light = new Light();
 export const dark = new Dark();
+export const zhuBeiDong = new ZhuBeidong();

plugs/config/styles/zhuBeiDong.ts

@@ -0,0 +1,21 @@
+import Plain from './plain';
+import { light, dark, grey } from './color';
+
+export default class ZhuBeiDong extends Plain {
+  name = 'zhuBeiDong'; //总体样式名称
+  i18n = 'styles.4'; //样式提示i18n配置
+  bodyBg = light[0]; //全局背景颜色
+  titleColor = dark[0]; //标题颜色
+  subTitleColor = dark[3];//二级标题颜色
+
+  headBg = light[0]; //头部背景颜色
+
+  searchRowBg = light[0];
+  itemBg = light[1];
+
+  tableBg = light[0]; //表格背景颜色
+  tableHeadBg = light[0]; //表头行背景颜色
+  tableCurBg = light[2]; //当前行背景颜色
+  tableColor = dark[0]; //表格字体颜色
+  tableBorderColor = light[9]; //行底部边框颜色
+}

plugs/http/axios.ts

@@ -172,7 +172,7 @@ function handResponse(response, resolve, noMsg, noLoading) {
     if (response.message?.indexOf('no permission for ') == 0) {
       response.message = t('http.noPermission');
     }
-    if (!noMsg) {
+    if (!noMsg && response.message) {
       showMessage('error', response.message);
     }
     response.error && console.log(response.error);

plugs/i18n/en.ts

@@ -36,7 +36,7 @@ export default class English {
     required: 'The password contains at least uppercase and lowercase letters and numbers',
   };
 
-  styles = ['Default', 'Lignt', 'Dark', 'DefaultB'];
+  styles = ['Default', 'Lignt', 'Dark', 'DefaultB', 'zhuBeiDong'];
 
   head = {
     center: 'Personal center',

plugs/i18n/index.ts

@@ -10,8 +10,16 @@ const i18n = createI18n({
   locale: 'zh',
   messages,
 });
+
 const registerLang = (name, data) => {
   messages[name] = data;
 };
 
 export { i18n, Zh, En, registerLang };
+
+export const createt = (sufix: string) => {
+  return (key: string): string => {
+    key = sufix + key;
+    return i18n.t(key);
+  };
+};

plugs/i18n/zh.ts

@@ -35,7 +35,7 @@ export default class Zh {
     noSpace: '密码不能包含空格',
     required: '密码至少包含大小写字母和数字',
   };
-  styles = ['青', '明亮', '黑夜', '蓝'];
+  styles = ['青', '明亮', '黑夜', '蓝', '主被动'];
 
   head = {
     center: '个人中心',

plugs/store/index.ts

@@ -63,8 +63,8 @@ export class Actions {
     const { state, commit } = store;
     state.size.headHeight = state.size.head + 'px';
     state.size.asideWidth = state.size.aside + 'px';
-    commit("initSize");
+    commit('initSize');
-    this.getMenus(store)
+    this.getMenus(store);
   };
 }
 
@@ -74,6 +74,7 @@ export class Mutations {
   };
   initSize = (state, param) => {
     const size = state.size;
+    const aside = parseInt(size.asideWidth);
     const head = parseInt(size.headHeight);
     const mainPad = parseInt(size.mainPad);
     const searchRow = parseInt(size.searchRowHeight);
@@ -87,7 +88,7 @@ export class Mutations {
     size.tableHeight = size.height - 2 * (mainPad + searchRowPad) - 3 - searchRow - head;
     size.pTableHeight = size.tableHeight - size.pageHeight;
 
-    size.headLeftWidth = size.width - headRightWidth - 20 + 'px';
+    size.headLeftWidth = size.width - aside - headRightWidth - 20 + 'px';
   };
   updateDict = (state, param) => {
     state.dict[param[0]] = param[1];