update

examples/App.vue

@@ -1,5 +1,6 @@
 <template>
-    <Index :menus="menus" @updatePwd="pwd => console.log(pwd)"></Index>
+    <Index :menus="menus" @updatePwd="pwd => console.log(pwd)" :checkUser="false" username="超级管理员" :closeAble="true">
+    </Index>
 </template>
 
 <script lang="ts" setup>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "noob-mengyxu",
-    "version": "0.2.4",
+    "version": "0.2.6",
     "main": "index.ts",
     "module": "index.ts",
     "keywords": [

packages/base/data/modify-form.vue

@@ -3,8 +3,9 @@
         <el-form label-position="right" :class="class" :label-width="width ? width + 'px' : ''" :model="param"
             ref="modifyForm" :rules="rules">
             <el-form-item v-for="item in items" :label="item.name || t(item.i18n)" :prop="item.code">
-                <NoobSelect v-if="item.dict" v-model="param[item.code]" :dict="item.dict" full
+                <NoobSelect v-if="item.dict || item.maxValue" v-model="param[item.code]" :dict="item.dict"
-                    :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))" :disabled="item.disabled" />
+                    :max-value="item.maxValue" full :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))"
+                    :disabled="item.disabled" />
                 <NoobDate v-else-if="item.date" v-model="param[item.code]" :formater="item.formater" full
                     :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))" :disabled="item.disabled" />
                 <slot v-else-if="item.slot" :name="item.code" />

packages/base/index.ts

@@ -3,8 +3,9 @@ import NoobButton from './item/button.vue';
 import NoobSelect from './item/select.vue';
 import NoobInput from './item/input.vue';
 import NoobDate from './item/datetime.vue';
+import LightBox from './item/light-box.vue';
 
-export { NoobTag, NoobButton, NoobSelect, NoobInput, NoobDate };
+export { NoobTag, NoobButton, NoobSelect, NoobInput, NoobDate, LightBox };
 
 import SearchRow from './data/search-row.vue';
 import ListTable from './data/list-table.vue';

packages/base/item/light-box.vue

@@ -0,0 +1,73 @@
+<template>
+    <div v-if="data !== null" class="number">{{ data }}</div>
+    <div v-if="data === null && status == 0" class="box green"></div>
+    <div v-if="data === null && status == 1" class="box red"></div>
+    <div v-if="data === null && status == 2" class="box yellow"></div>
+    <div v-if="data === null && status == 3" class="box red"></div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref } from "vue";
+
+const { state, commit, dispatch } = useStore();
+
+const prop = defineProps({
+    status: {
+        type: Number,
+        default: null,
+    },
+    data: {
+        type: Number,
+        default: null,
+    },
+});
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.box {
+    float: left;
+    width: 20px;
+    height: 20px;
+    margin: 3.6px;
+}
+
+.red {
+    background: red;
+    background-size: 5px 5px;
+    border-radius: 50%;
+    animation: 13s red infinite;
+    box-shadow:
+        0 0 20px #c00 inset,
+        0 0 10px red;
+}
+
+.yellow {
+    background: yellow;
+    background-size: 5px 5px;
+    border-radius: 50%;
+    animation: 13s yellow infinite;
+    box-shadow:
+        0 0 20px #cc0 inset,
+        0 0 10px yellow;
+}
+
+.green {
+    background: green;
+    background-size: 5px 5px;
+    border-radius: 50%;
+    animation: 13s green infinite;
+    box-shadow:
+        0 0 20px #0c0 inset,
+        0 0 10px lime;
+}
+
+.number {
+    float: left;
+    width: 15px;
+    height: 20px;
+    padding-top: 4px;
+}
+</style>

packages/base/item/select.vue

@@ -2,7 +2,7 @@
     <el-select :size="state.size.size" :class="['form-item', full && 'full']" v-model="myValue"
         :placeholder="placeholder || t('rule.pleaseSelect')" :filterable="filterable" :disabled="disabled"
         :clearable="clearable" @change="$emit('change', myValue)" :teleported="false">
-        <el-option v-if="dict" v-for="(val, key, i) in state.dict[dict]" :key="key" :value="key" :label="val" />
+        <el-option v-if="dict" v-for="(val, key, i) in state.dict[dict]" :key="key" :value="parse(key)" :label="val" />
         <el-option v-if="stateProp" v-for="item in state[stateProp]" :key="item[valueKey]" :value="item[valueKey]"
             :label="item[labelKey]" />
         <el-option v-if="maxValue" v-for="index in maxValue" :key="index" :value="index" />
@@ -69,6 +69,14 @@ const setWidth = () => {
         width.value = state.size.searchWidth;
     }
 }
+const parse = (str) => {
+    const num = Number(str);
+    if (!isNaN(num)) {
+        return num;
+    } else {
+        return str;
+    }
+}
 watch(() => state.size, (n, o) => {
     setWidth();
 })

packages/manage/common/head.vue

@@ -1,4 +1,6 @@
 <template>
+    <el-button v-if="closeAble" class="close-btn" :icon="isClose ? 'CaretRight' : 'CaretLeft'" circle
+        :size="state.size.size" @click="close"></el-button>
     <div class="head">
         <div class="title">{{ title || t('title') }}</div>
         <div class="menu">
@@ -72,13 +74,14 @@
                     </template>
                 </el-dropdown>
             </el-tooltip>
+            <span class="username" v-if="username">{{ username }}</span>
         </div>
     </div>
 
     <el-dialog :title="t('pwd.changePwd')" v-model="flag.update" :size="state.size.size" :close-on-click-modal="false"
         top="10vh" width="40%">
-        <ModifyForm :width="150" :param="password" @cancel="flag.update = false" @confirm="emit('updatePwd', password)"
+        <ModifyForm :width="150" :param="password" @cancel="flag.update = false"
-            :rules="rules" :items="items">
+            @confirm="emit('updatePwd', password); flag.update = false" :rules="rules" :items="items">
         </ModifyForm>
     </el-dialog>
 </template>
@@ -111,6 +114,10 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    username: {
+        type: String,
+        default: null,
+    },
     styleAble: {
         type: Boolean,
     },
@@ -124,8 +131,24 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    closeAble: {
+        type: Boolean,
+        default: false,
+    },
 });
 
+const isClose = ref(false)
+const close = () => {
+    isClose.value = !isClose.value;
+    if (isClose.value) {
+        state.size.asideWidth = '0px';
+        commit("initSize");
+    } else {
+        state.size.asideWidth = state.size.aside + 'px';
+        commit("initSize");
+    }
+}
+
 const rules = {
     old: [new SimpleRequired('pwd.oldPwd')],
     new: [new SimpleRequired('pwd.newPwd'), new SimplePassword()],
@@ -184,6 +207,15 @@ const changeSize = type => {
 onMounted(() => { });
 </script>
 <style lang="scss" scoped>
+.close-btn {
+    position: absolute;
+    z-index: 99;
+    top: v-bind('state.size.closeTop');
+    left: -5px;
+    color: red;
+    background: transparent;
+}
+
 .head {
     background-color: v-bind('state.style.headBg');
     height: v-bind('state.size.headHeight');
@@ -219,6 +251,15 @@ onMounted(() => { });
         color: v-bind('state.style.color');
     }
 
+    .username {
+        float: right;
+        height: v-bind('state.size.headHeight');
+        margin-right: 20px;
+        font-size: v-bind('state.size.titleSize');
+        font-weight: bold;
+        color: v-bind('state.style.color');
+    }
+
 }
 
 .dropdown-icon {

packages/manage/common/menu-tree.vue

@@ -30,7 +30,7 @@ import { ref, onMounted } from "vue"
 import { useI18n } from "vue3-i18n";
 const { t } = useI18n();
 
-const { state } = useStore()
+const { state, commit } = useStore()
 const props = defineProps({
     data: {
         type: Array<any>(),
@@ -39,7 +39,7 @@ const props = defineProps({
     type: {
         type: String,
         default: 'def',
-    }
+    },
 });
 
 const router = useRouter();
@@ -47,9 +47,6 @@ const clickMenu = (menu) => {
     router.push(menu.path);
 };
 const active = ref("");
-
-const defTitle = "";
-
 onMounted(() => {
     setTimeout(() => {
         active.value = router.currentRoute.value.path.substring(1);

packages/manage/router/index.vue

@@ -2,8 +2,8 @@
     <el-container :style="appMain" ref="main">
         <el-header v-show="state.size.headHeight != '0px'" class="app-head" :height="state.size.headHeight">
 
-            <Head :title="title" @updatePwd="pwd => emit('updatePwd', pwd)" @logout="onLogout" :styleAble="styleAble"
+            <Head :title="title" @updatePwd="pwd => emit('updatePwd', pwd)" @logout="emit('logout')" :styleAble="styleAble"
-                :sizeAble="sizeAble" :langAble="langAble" :center="center" />
+                :sizeAble="sizeAble" :langAble="langAble" :center="center" :username="username" :closeAble="closeAble" />
         </el-header>
         <el-container id="container">
             <el-aside v-show="state.size.asideWidth != '0px'" :width="state.size.asideWidth">
@@ -64,6 +64,18 @@ const props = defineProps({
         type: String,
         default: 'home',
     },
+    checkUser: {
+        type: Boolean,
+        default: true,
+    },
+    username: {
+        type: String,
+        default: null,
+    },
+    closeAble: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const onResize = () => {
@@ -90,7 +102,7 @@ const onLogout = () => {
 
 onMounted(() => {
     router.push("/")
-    getUser();
+    props.checkUser && getUser();
     window.onresize = onResize;
     onResize();
 });
@@ -165,6 +177,12 @@ body {
     * {
         --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/large.ts

@@ -7,7 +7,8 @@ export default class Small extends Normal {
   titleSize = '20px'; //标题字体尺寸
   headIconSize = '24px'; //头部图标尺寸
   headHeight = '60px'; //头部高度
-  headMenuWidth = '350px'; //头部右侧菜单宽度
+  closeTop = '45px'; //展开收起菜单按钮
+  headMenuWidth = '450px'; //头部右侧菜单宽度
   asideWidth = '200px'; //左侧菜单宽度
   mainPad = '8px';
 

plugs/config/size/normal.ts

@@ -6,7 +6,8 @@ export default class Normal {
   titleSize = '18px'; //标题字体尺寸
   headIconSize = '20px'; //头部图标尺寸
   headHeight = '50px'; //头部高度
-  headMenuWidth = '300px'; //头部右侧菜单宽度
+  closeTop = '40px'; //展开收起菜单按钮
+  headMenuWidth = '400px'; //头部右侧菜单宽度
   asideWidth = '180px'; //左侧菜单宽度
   mainHeight = ''; //通用页面组件高度
   mainPad = '5px'; //通用页面组件内边距

plugs/config/size/small.ts

@@ -7,7 +7,8 @@ export default class Small extends Normal {
   titleSize = '16px'; //标题字体尺寸
   headIconSize = '16px'; //头部图标尺寸
   headHeight = '45px'; //头部高度
-  headMenuWidth = '250px'; //头部右侧菜单宽度
+  closeTop = '35px'; //展开收起菜单按钮
+  headMenuWidth = '350px'; //头部右侧菜单宽度
   asideWidth = '160px'; //左侧菜单宽度
 
   menuIconSize = '16px';

plugs/config/styles/dark.ts

@@ -6,6 +6,7 @@ export default class Dark extends Plain {
   bodyBg = dark[3]; //全局背景颜色
   titleColor = light[0]; //标题颜色
   color = grey[5]; //全局字体颜色
+  selectionBg = '#0438a2'; //全局文字选中后背景
 
   headBg = dark[2]; //头部背景颜色
   menuBg = dark[2]; //菜单背景颜色

plugs/config/styles/plain.ts

@@ -6,6 +6,8 @@ export default class Plain {
   bodyBg = light[7]; //全局背景颜色
   titleColor = light[0]; //标题颜色
   color = '#4e5969'; //全局字体颜色
+  selectionBg = '#3367d1'; //全局文字选中后背景
+  selectionColor = '#fff'; //全局文字选中后背景
 
   //   headBg = '#2e8ae3'; //头部背景颜色
   headBg = '#40c9c6'; //头部背景颜色

plugs/element/message.ts

@@ -1,10 +1,4 @@
-import {
+import { ElLoading, ElMessage, ElNotification, ElMessageBox, Action } from 'element-plus';
-  ElLoading,
-  ElMessage,
-  ElNotification,
-  ElMessageBox,
-  Action,
-} from 'element-plus';
 let curMsg;
 let count = 0;
 let instance;
@@ -82,16 +76,15 @@ export const confirm = (msg: string, title: string) => {
       type: 'warning',
     })
       .then(resolve)
-      .catch(reject);
+      .catch((error) => {
+        if (reject != null) {
+          reject(error);
+        }
+      });
   });
 };
 
-export const prompt = (
+export const prompt = (msg: string, title: string, pattern: RegExp, errorMsg: string) => {
-  msg: string,
-  title: string,
-  pattern: RegExp,
-  errorMsg: string
-) => {
   return new Promise((resolve, reject) => {
     ElMessageBox.confirm(msg, title, {
       confirmButtonText: t('base.confirm'),
@@ -102,6 +95,10 @@ export const prompt = (
       inputErrorMessage: errorMsg,
     })
       .then(resolve)
-      .catch(reject);
+      .catch((error) => {
+        if (reject != null) {
+          reject(error);
+        }
+      });
   });
 };

plugs/http/axios2.ts

@@ -13,8 +13,7 @@ const config = {
 const _axios = axios.create(config);
 _axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
 _axios.defaults.headers.put['Content-Type'] = 'application/json;charset=UTF-8';
-_axios.defaults.headers.delete['Content-Type'] =
+_axios.defaults.headers.delete['Content-Type'] = 'application/json;charset=UTF-8';
-  'application/json;charset=UTF-8';
 
 export const registerBaseUrl = (url) => {
   _axios.defaults.baseURL = url;
@@ -174,6 +173,27 @@ export function upload(file, url, data) {
   });
 }
 
+export function getFile(url, data?, noMsg?, noLoading?) {
+  return new Promise((resolve, reject) => {
+    if (!noLoading) {
+      loading();
+    }
+    _axios({
+      method: 'get',
+      url: url, // 请求地址
+      params: data, // 参数
+      responseType: 'blob', // 表明返回服务器返回的数据类型
+    }).then(
+      (response: any) => {
+        handResponse(response, resolve, noMsg, noLoading);
+      },
+      (err) => {
+        handError(err, reject, noMsg, noLoading);
+      }
+    );
+  });
+}
+
 export function download(fileName, url, data = {}, callBack?) {
   loading();
   _axios({

plugs/store/index.ts

@@ -8,11 +8,6 @@ export class State {
       A: '启用',
       B: '禁用',
     },
-    test: {
-      a: 'A',
-      b: 'B',
-      c: 'C',
-    },
   };
   style = Styles.plain;
   size = Size.normal;
@@ -64,8 +59,7 @@ export class Mutations {
       height = size.height;
     }
     size.mainHeight = Math.floor(height - head) + 'px';
-    size.tableHeight =
+    size.tableHeight = height - 2 * (mainPad + searchRowPad) - 3 - searchRow - head;
-      height - 2 * (mainPad + searchRowPad) - 3 - searchRow - head;
     size.pTableHeight = size.tableHeight - size.pageHeight;
   };
   updateDict = (state, param) => {