0.2.0

2 years ago · 9e950b80dd
61 changed files with 1229 additions and 278 deletions
--- a/dist/css/chunk-vendors.6e16aa55.css
+++ b/dist/css/chunk-vendors.6e16aa55.css
--- a/dist/css/index.3ad5135e.css
+++ b/dist/css/index.3ad5135e.css
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1 @@
				@@ -0,0 +1 @@
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title></title><script defer="defer" src="/js/chunk-vendors.2810f37d.js"></script><script defer="defer" src="/js/index.29912fb5.js"></script><link href="/css/chunk-vendors.6e16aa55.css" rel="stylesheet"><link href="/css/index.3ad5135e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but noob-mengyxu doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
--- a/dist/js/chunk-vendors.2810f37d.js
+++ b/dist/js/chunk-vendors.2810f37d.js
--- a/dist/js/chunk-vendors.2810f37d.js.map
+++ b/dist/js/chunk-vendors.2810f37d.js.map
--- a/dist/js/index.29912fb5.js
+++ b/dist/js/index.29912fb5.js
--- a/dist/js/index.29912fb5.js.map
+++ b/dist/js/index.29912fb5.js.map
--- a/examples/App.vue
+++ b/examples/App.vue
@ -1,87 +1,47 @@
				@@ -1,87 +1,47 @@
 <template>
-    <WkbTag>ssss</WkbTag>
-    <el-button type="success" @click="newTerminal()">新终端</el-button>
-    <ListTable :data="data" :height="500" :props="prop"></ListTable>
-
-    <el-dialog class="no-padding" title="实时脚本终端" v-model="flag.termial" size="tiny" :close-on-click-modal="false" top="10vh"
-        width="90%">
-        <Terminal :url="url" :msgFilter="msgFilter"></Terminal>
-        <!-- <TerminalSplit :url="url" :msgFilter="msgFilter" :prmt="prmt"></TerminalSplit> -->
-    </el-dialog>
+    <Index :menus="menus" @updatePwd="pwd => console.log(pwd)"></Index>
 </template>

 <script lang="ts" setup>
 import { reactive, onMounted, ref } from "vue";
 import { useStore } from "vuex";
-import { WkbTag, ListTable, Terminal, TerminalSplit, MenuTree } from "../packages";
+import { Index } from "noob";

 const store = useStore();
-const prefix = "ws://localhost/websocket/";
-let index = 111;
-let url = "";
-const prmt = ref(">");
-const flag = reactive({
-    termial: false
-})
-
-const data = [
-    { caseName: 111, taskName: 111, userId: 'test', content: 'content', createTime: 'createTime' }
-]

 const menus = [
-    { title: "aaa", path: "aaa", icon: "" }
-]
-
-const prop = [
-    {
-        code: "caseName",
-        name: "案件名称",
-        width: 110,
-    },
-    {
-        code: "taskName",
-        name: "任务名称",
-        width: 110,
-    },
    {
-        code: "userId",
-        name: "用户名",
-        width: 100,
+        title: "主页", path: "home", icon: ""
    },
    {
-        code: "content",
-        name: "日志内容",
-        width: 500,
+        title: "通用", path: "base", icon: "", children: [
+            { title: "表格", path: "table", icon: "" },
+            { title: "表单", path: "form", icon: "" },
+        ]
    },
    {
-        code: "createTime",
-        name: "产生时间",
-        width: 170,
-    },
-];
-
-const newTerminal = () => {
-    url = prefix + ++index;
-    flag.termial = true;
-}
-
-const msgFilter = msg => {
-    if (msg.startsWith("TTY_RES|")) {
-        const res = JSON.parse(msg.substring(8));
-        prmt.value = res.prmt;
-        return null;
-    } else {
-        return msg;
+        title: "工具", path: "tool", icon: "", children: [
+            { title: "终端", path: "terminal", icon: "" },
+            { title: "颜色", path: "color", icon: "" },
+        ]
    }
-}
-
-onMounted(() => {
+]

-});
+onMounted(() => { });

 </script>

 <style lang="scss">
+body {
+    font-size: 14px;
+    font-family: "Microsoft YaHei";
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+}
+
 ::v-deep .no-padding .el-dialog__body {
    background-color: black;
 }
--- a/examples/router/index.ts
+++ b/examples/router/index.ts
@ -1,6 +1,40 @@
				@@ -1,6 +1,40 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import Home from '../view/home.vue';
+import Table from '../view/base/table.vue';
+import Form from '../view/base/form.vue';
+import Terminal from '../view/tool/terminal.vue';
+import Color from '../view/tool/color.vue';

 const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'home',
+    component: Home,
+  },
+  {
+    path: '/table',
+    name: 'table',
+    component: Table,
+  },
+  {
+    path: '/form',
+    name: 'form',
+    component: Form,
+  },
+  {
+    path: '/terminal',
+    name: 'terminal',
+    component: Terminal,
+  },
+  {
+    path: '/color',
+    name: 'color',
+    component: Color,
+  },
 ];

 const router = createRouter({
--- a/examples/store/index.ts
+++ b/examples/store/index.ts
@ -1,4 +1,4 @@
				@@ -1,4 +1,4 @@
-import { createStore } from 'vuex';
+import { createStore } from 'plugs';
 import state from './state';
 import mutations from './mutations';
 import actions from './actions';
--- a/examples/store/state.ts
+++ b/examples/store/state.ts
@ -1 +1,14 @@
				@@ -1 +1,14 @@
-export default {};
+export default {
+  dict: {
+    test: {
+      a: 'A',
+      b: 'B',
+      c: 'C',
+    },
+  },
+  test: [
+    { key: 'a', value: 'A' },
+    { key: 'b', value: 'B' },
+    { key: 'c', value: 'C' },
+  ],
+};
--- a/examples/view/base/form.vue
+++ b/examples/view/base/form.vue
@ -0,0 +1,15 @@
				@@ -0,0 +1,15 @@
+<template>
+    <span>待开发</span>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref } from "vue";
+
+const { state, commit, dispatch } = useStore();
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+</style>
--- a/examples/view/base/table.vue
+++ b/examples/view/base/table.vue
@ -0,0 +1,60 @@
				@@ -0,0 +1,60 @@
+<template>
+    <SearchRow title="表格演示">
+        <template #default>
+            <SearchInput v-model="example.aaa" :width="180"></SearchInput>
+            <DictSelect v-model="example.bbb" dict="test"></DictSelect>
+            <DictSelect v-model="example.ccc" stateProp="test" :width="120"></DictSelect>
+        </template>
+    </SearchRow>
+    <ListTable :data="data" :height="800" :props="prop"></ListTable>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref } from "vue";
+import { ListTable, SearchRow, SearchInput, DictSelect } from "noob";
+
+const { state, commit, dispatch } = useStore();
+const example = reactive({
+    aaa: "",
+    bbb: 'b',
+    ccc: 'c',
+});
+
+const data = [
+    { caseName: 111, taskName: 111, userId: 'test', content: 'content', createTime: 'createTime' }
+]
+
+const prop = [
+    {
+        code: "caseName",
+        name: "案件名称",
+        width: 110,
+    },
+    {
+        code: "taskName",
+        name: "任务名称",
+        width: 110,
+    },
+    {
+        code: "userId",
+        name: "用户名",
+        width: 100,
+    },
+    {
+        code: "content",
+        name: "日志内容",
+        width: 500,
+    },
+    {
+        code: "createTime",
+        name: "产生时间",
+        width: 170,
+    },
+];
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+</style>
--- a/examples/view/home.vue
+++ b/examples/view/home.vue
@ -0,0 +1,16 @@
				@@ -0,0 +1,16 @@
+<template>
+    <WkbTag>ssss</WkbTag>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref } from "vue";
+import { WkbTag } from "noob";
+
+const { state, commit, dispatch } = useStore();
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+</style>
--- a/examples/view/tool/color.vue
+++ b/examples/view/tool/color.vue
@ -0,0 +1,16 @@
				@@ -0,0 +1,16 @@
+<template>
+    <Color></Color>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref } from "vue";
+import { Color } from 'noob'
+
+const { state, commit, dispatch } = useStore();
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+</style>
--- a/examples/view/tool/terminal.vue
+++ b/examples/view/tool/terminal.vue
@ -0,0 +1,52 @@
				@@ -0,0 +1,52 @@
+<template>
+    <el-button type="success" @click="newTerminal()">新终端</el-button>
+    <el-button type="success" @click="newTerminal1()">新终端(分屏)</el-button>
+
+    <el-dialog class="no-padding" title="实时脚本终端" v-model="flag.termial" size="tiny" :close-on-click-modal="false" top="10vh"
+        width="90%">
+        <Terminal :url="url" :msgFilter="msgFilter"></Terminal>
+    </el-dialog>
+    <el-dialog class="no-padding" title="实时脚本终端" v-model="flag.terminalSplit" size="tiny" :close-on-click-modal="false"
+        top="10vh" width="90%">
+        <TerminalSplit :url="url" :msgFilter="msgFilter" :prmt="prmt"></TerminalSplit>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted, ref } from "vue";
+import { Terminal, TerminalSplit } from "noob";
+
+let index = 111;
+const prefix = "ws://localhost/websocket/";
+let url = "";
+const prmt = ref(">");
+const flag = reactive({
+    termial: false,
+    terminalSplit: false,
+})
+
+const newTerminal = () => {
+    url = prefix + ++index;
+    flag.termial = true;
+}
+
+const newTerminal1 = () => {
+    url = prefix + ++index;
+    flag.terminalSplit = true;
+}
+
+const msgFilter = msg => {
+    if (msg.startsWith("TTY_RES|")) {
+        const res = JSON.parse(msg.substring(8));
+        prmt.value = res.prmt;
+        return null;
+    } else {
+        return msg;
+    }
+}
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+</style>
--- a/index.ts
+++ b/index.ts
@ -1 +1,2 @@
				@@ -1 +1,2 @@
 export * from "./packages"
+export * from "./plugs"
--- a/package.json
+++ b/package.json
@ -1,7 +1,11 @@
				@@ -1,7 +1,11 @@
 {
    "name": "noob-mengyxu",
-    "version": "0.1.1",
+    "version": "0.2.0",
    "main": "index.ts",
+    "file": [
+        "packages/",
+        "plugs/"
+    ],
    "scripts": {
        "dev": "vue-cli-service serve",
        "build": "vue-cli-service build",
@ -49,4 +53,4 @@
				@@ -49,4 +53,4 @@
        "not dead",
        "not ie 11"
    ]
-}
+}
--- a/packages/base/form/dict-select.vue
+++ b/packages/base/form/dict-select.vue
@ -0,0 +1,89 @@
				@@ -0,0 +1,89 @@
+<template>
+    <el-select :size="state.size.size" class="dict-select" v-model="myValue" :placeholder="placeholder"
+        :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="stateProp" v-for="item in state[stateProp]" :key="item[valueKey]" :value="item[valueKey]"
+            :label="item[labelKey]" />
+    </el-select>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, watch } from "vue";
+
+const { state } = useStore();
+const prop = defineProps({
+    modelValue: null,
+    placeholder: {
+        type: String
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    clearable: {
+        type: Boolean,
+        default: true,
+    },
+    filterable: {
+        type: Boolean,
+        default: true,
+    },
+    width: {
+        type: Number,
+        default: 150,
+    },
+    dict: {
+        type: String
+    },
+    stateProp: {
+        type: String
+    },
+    valueKey: {
+        type: String,
+        default: 'key'
+    },
+    labelKey: {
+        type: String,
+        default: 'value'
+    },
+});
+const emit = defineEmits(["update:modelValue"]);
+const myValue = ref(null);
+const width = ref('150px');
+watch(myValue, (n, o) => {
+    emit('update:modelValue', n);
+})
+onMounted(() => {
+    myValue.value = prop.modelValue;
+    width.value = prop.width + 'px';
+});
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.dict-select {
+    width: v-bind('width');
+    margin-right: v-bind('state.size.searchMargin');
+
+    ::v-deep .el-input__wrapper,
+    ::v-deep .el-select-dropdown {
+        background-color: v-bind('state.style.itemBg');
+
+        .el-input__inner,
+        .el-select-dropdown__item {
+            color: v-bind('state.style.color');
+            &.selected{
+                color: v-bind('state.style.itemSelectColor') !important;
+            }
+        }
+
+        .el-select-dropdown__item.hover,
+        .el-select-dropdown__item:hover {
+            background-color: v-bind('state.style.bodyBg');
+        }
+    }
+}
+</style>
--- a/packages/base/modify-form/src/modifyForm.vue
+++ b/packages/base/modify-form/src/modifyForm.vue
@ -4,7 +4,7 @@
				@@ -4,7 +4,7 @@
            ref="modifyForm" :rules="rules">
            <slot></slot>
            <el-form-item class="form-btns">
-                <el-button type="info" @click="formConfirm">确定</el-button>
+                <el-button type="primary" @click="formConfirm">确定</el-button>
                <el-button type="info" @click="emit('cancel')">取消</el-button>
            </el-form-item>
        </el-form>
--- a/packages/base/index.ts
+++ b/packages/base/index.ts
@ -1,4 +1,12 @@
				@@ -1,4 +1,12 @@
-export * from './tag';
-export * from './list-table';
-export * from './search-row';
-export * from './modify-form';
+import WkbTag from './tag.vue';
+
+export { WkbTag };
+
+import SearchRow from './table/search-row.vue';
+import SearchInput from './table/search-input.vue';
+import ListTable from './table/list-table.vue';
+export { SearchRow, ListTable, SearchInput };
+
+import ModifyForm from './form/modify-form.vue';
+import DictSelect from './form/dict-select.vue';
+export { ModifyForm, DictSelect };
--- a/packages/base/list-table/index.ts
+++ b/packages/base/list-table/index.ts
@ -1,2 +0,0 @@
				@@ -1,2 +0,0 @@
-import ListTable from './src/listTable.vue';
-export { ListTable };
--- a/packages/base/modify-form/index.ts
+++ b/packages/base/modify-form/index.ts
@ -1,2 +0,0 @@
				@@ -1,2 +0,0 @@
-import ModifyForm from './src/modifyForm.vue';
-export { ModifyForm };
--- a/packages/base/search-row/index.ts
+++ b/packages/base/search-row/index.ts
@ -1,2 +0,0 @@
				@@ -1,2 +0,0 @@
-import SearchRow from './src/searchRow.vue';
-export { SearchRow };
--- a/packages/base/list-table/src/listTable.vue
+++ b/packages/base/list-table/src/listTable.vue
@ -1,7 +1,8 @@
				@@ -1,7 +1,8 @@
 <template>
    <div class="my-table">
-        <el-table :data="page ? data.data : data" @selection-change="selectionChange"
-            :height="height ? height : (page ? state.sizes.pTableHei : state.sizes.tableHei)" highlight-current-row>
+        <el-table :size="state.size.size" :data="page ? data.data : data" @selection-change="selectionChange"
+            :height="height ? height : (page ? state.sizes.pTableHei : state.sizes.tableHei)" highlight-current-row
+            header-row-class-name="table-head" row-class-name="table-row">
            <el-table-column v-for="item in props" :key="item.code" :prop="item.code" :label="item.name" :type="item.type"
                :min-width="item.width" :width="item.type ? item.width : ''" :align="item.align ? item.align : 'center'"
                show-overflow-tooltip :formatter="formatter">
@ -23,10 +24,7 @@
				@@ -23,10 +24,7 @@
 import { useStore } from "vuex";
 import { reactive, onMounted, ref } from "vue";

-const {
-    state: { dict },
-} = useStore();
-
+const { state } = useStore();
 const prop = defineProps({
    data: {
        type: Object,
@ -49,7 +47,7 @@ const prop = defineProps({
				@@ -49,7 +47,7 @@ const prop = defineProps({
        default: null,
    },
 });
-const { state } = useStore();
+

 const emit = defineEmits(["query", "selection-change"]);

@ -89,7 +87,7 @@ const formatterByDist = (dictKey, value) => {
				@@ -89,7 +87,7 @@ const formatterByDist = (dictKey, value) => {
    if (!dictKey) {
        return getValue(null, '', value);
    }
-    const mapping = dict[dictKey];
+    const mapping = state.dict[dictKey];
    if (mapping == null) {
        return getValue(null, '', value);
    }
@ -100,4 +98,19 @@ onMounted(() => { });
				@@ -100,4 +98,19 @@ onMounted(() => { });
 </script>
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
+.my-table ::v-deep .el-table__header .el-table__cell {
+    background-color: v-bind('state.style.tableHeadBg') !important;
+    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
+}
+
+.my-table ::v-deep .el-table {
+    background-color: v-bind('state.style.bodyBg') !important;
+    color: v-bind('state.style.tableColor');
+    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
+}
+
+.my-table ::v-deep .el-table__body .el-table__cell {
+    background-color: v-bind('state.style.tableBg') !important;
+    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
+}
 </style>
--- a/packages/base/table/search-input.vue
+++ b/packages/base/table/search-input.vue
@ -0,0 +1,51 @@
				@@ -0,0 +1,51 @@
+<template>
+    <el-input :size="state.size.size" class="search-input" v-model="myValue" :placeholder="placeholder || state.lang.pleaseEnter"
+        :disabled="disabled" :clearable="clearable"></el-input>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, watch } from "vue";
+
+const { state, commit, dispatch } = useStore();
+
+const prop = defineProps({
+    modelValue: null,
+    placeholder: {
+        type: String,
+        default: null
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    clearable: {
+        type: Boolean,
+        default: true,
+    },
+    width: {
+        type: Number,
+        default: 150,
+    }
+});
+const emit = defineEmits(["update:modelValue"]);
+const myValue = ref(null);
+const width = ref('150px');
+watch(myValue, (n, o) => {
+    emit('update:modelValue', n);
+})
+onMounted(() => {
+    myValue.value = prop.modelValue;
+    width.value = prop.width + 'px';
+});
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.search-input {
+    width: v-bind('width');
+    margin-right: v-bind('state.size.searchMargin');
+    ::v-deep .el-input__wrapper{
+        background-color: v-bind('state.style.itemBg');
+    }
+}
+</style>
--- a/packages/base/search-row/src/searchRow.vue
+++ b/packages/base/search-row/src/searchRow.vue
@ -2,20 +2,24 @@
				@@ -2,20 +2,24 @@
    <div class="search-row">
        <div class="left">
            <span class="title" v-if="title">{{ title }}</span>
-            <el-button v-if="fresh" type="info" icon="Refresh" @click="emit('query')"> </el-button>
-            <el-button v-if="add" type="primary" icon="Plus" @click="emit('add')"> 添加 </el-button>
-            <el-button v-if="del" type="danger" icon="Delete" @click="emit('delete')"> 删除 </el-button>
+            <el-button :size="state.size.size" v-if="fresh" type="info" icon="Refresh" @click="emit('query')"> </el-button>
+            <el-button :size="state.size.size" v-if="add" type="primary" icon="Plus" @click="emit('add')"> 添加 </el-button>
+            <el-button :size="state.size.size" v-if="del" type="danger" icon="Delete" @click="emit('delete')"> 删除
+            </el-button>
            <slot name="left"></slot>
        </div>
        <div class="query">
            <slot></slot>
-            <el-button v-if="query" type="primary" icon="Search" @click="emit('query')"> 查询 </el-button>
+            <el-button :size="state.size.size" v-if="query" type="primary" icon="Search" @click="emit('query')"> 查询
+            </el-button>
        </div>
    </div>
 </template>

 <script lang="ts" setup>
-import { onMounted, defineProps, defineEmits } from "vue";
+import { onMounted } from "vue";
+import { useStore } from "vuex";
+const { state } = useStore();
 const prop = defineProps({
    title: {
        type: String,
@ -45,19 +49,32 @@ onMounted(() => { });
				@@ -45,19 +49,32 @@ onMounted(() => { });
 </script>
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
+.search-row {
+    padding: v-bind('state.size.searchRowPad');
+    background-color: v-bind('state.style.searchRowBg');
+}
+
 .query {
    text-align: right;
    float: right;
+    width: 50%;
 }

 .left {
    float: left;
+    width: 50%;
+}
+
+.search-row,
+.query,
+.left {
+    height: v-bind('state.size.searchRowHeight');
 }

 .title {
    font-weight: bold;
    padding-right: 15px;
-    font-size: 20px;
+    font-size: v-bind('state.size.titleSize');
    min-width: 20px;
 }
 </style>
--- a/packages/base/tag/src/tag.vue
+++ b/packages/base/tag/src/tag.vue
@ -6,7 +6,7 @@
				@@ -6,7 +6,7 @@

 <script lang="ts" setup>
 import { useStore } from "vuex";
-import { reactive, onMounted, ref, defineProps } from "vue";
+import { reactive, onMounted, ref } from "vue";

 const { state, commit, dispatch } = useStore();
 const prop = defineProps({
--- a/packages/base/tag/index.ts
+++ b/packages/base/tag/index.ts
@ -1,17 +0,0 @@
				@@ -1,17 +0,0 @@
-// import { PluginObject } from 'vue'
-import WkbTag from './src/tag.vue';
-
-// const injectInstallObject: PluginObject<null> = {
-//   install(Vue) {
-//     Vue.component('wkb-tag', WkbTag)
-//   },
-//   pluginName: 'wkb-tag'
-// }
-
-// const WkbComponent = Object.assign(WkbTag, injectInstallObject)
-
-// if (typeof window !== 'undefined' && window.Vue) {
-//   injectInstallObject.install(window.Vue as any)
-// }
-
-export { WkbTag };
--- a/packages/index.ts
+++ b/packages/index.ts
@ -1,3 +1,3 @@
				@@ -1,3 +1,3 @@
-export * from "./base";
-export * from "./tool";
-export * from "./manage";
+export * from './base';
+export * from './tool';
+export * from './manage';
--- a/packages/manage/components/head.vue
+++ b/packages/manage/components/head.vue
@ -0,0 +1,222 @@
				@@ -0,0 +1,222 @@
+<template>
+    <div class="head">
+        <div class="title">{{ title || state.lang.title }}</div>
+        <div class="menu">
+            <el-dropdown class="icon" :size="state.size.size">
+                <el-button :size="state.size.size" icon="Avatar" circle></el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item @click="updatePass">{{ state.lang.changePwd }}</el-dropdown-item>
+                        <el-dropdown-item @click="emit('logout')">{{ state.lang.logout }}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+            <el-tooltip class="box-item" effect="dark" :content="state.lang.fullScreen" placement="bottom">
+                <el-icon @click="fullscreen" class="icon">
+                    <FullScreen />
+                </el-icon>
+            </el-tooltip>
+            <el-tooltip class="box-item" effect="dark" :content="state.lang.changeStyle" placement="left">
+                <el-dropdown class="icon" :size="state.size.size" trigger="click">
+                    <el-button :size="state.size.size" icon="Opportunity" circle></el-button>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="changeStyle('noobStyle')">
+                                <el-tooltip class="box-item" effect="dark" :content="state.lang.default" placement="left">
+                                    <el-icon class="dropdown-icon">
+                                        <Sunset />
+                                    </el-icon>
+                                </el-tooltip>
+                            </el-dropdown-item>
+                            <el-dropdown-item @click="changeStyle('light')">
+                                <el-tooltip class="box-item" effect="dark" :content="state.lang.light" placement="left">
+                                    <el-icon class="dropdown-icon">
+                                        <Sunny />
+                                    </el-icon>
+                                </el-tooltip>
+                            </el-dropdown-item>
+                            <el-dropdown-item @click="changeStyle('dark')">
+                                <el-tooltip class="box-item" effect="dark" :content="state.lang.dark" placement="left">
+                                    <el-icon class="dropdown-icon">
+                                        <MoonNight />
+                                    </el-icon>
+                                </el-tooltip>
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </el-tooltip>
+            <el-tooltip class="box-item" effect="dark" :content="state.lang.language" placement="left">
+                <el-dropdown class="icon" :size="state.size.size" trigger="click">
+                    <el-button icon="Flag" :size="state.size.size" circle></el-button>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="changeLang('chinese')">简体中文</el-dropdown-item>
+                            <el-dropdown-item @click="changeLang('english')">English</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </el-tooltip>
+            <el-tooltip class="box-item" effect="dark" :content="state.lang.size" placement="left">
+                <el-dropdown class="icon" :size="state.size.size" trigger="click">
+                    <el-button icon="Switch" :size="state.size.size" circle></el-button>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="changeSize('normal')">{{ state.lang.normal }}</el-dropdown-item>
+                            <el-dropdown-item @click="changeSize('small')">{{ state.lang.small }}</el-dropdown-item>
+                            <el-dropdown-item @click="changeSize('large')">{{ state.lang.large }}</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </el-tooltip>
+        </div>
+    </div>
+
+    <el-dialog :title="state.lang.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)"
+            :rules="rules">
+            <el-form-item :label="state.lang.oldPwd" prop="old">
+                <el-input v-model="password.old"></el-input>
+            </el-form-item>
+            <el-form-item :label="state.lang.newPwd" prop="new">
+                <el-input v-model="password.new"></el-input>
+            </el-form-item>
+            <el-form-item :label="state.lang.rePwd" prop="reNew">
+                <el-input v-model="password.reNew"></el-input>
+            </el-form-item>
+        </ModifyForm>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref } from "vue";
+import { ModifyForm } from "noob";
+
+import { setLang } from "plugs";
+import { SimpleRequired, SimplePassword } from 'plugs/element'
+import { lang, styles, size } from 'plugs/config'
+
+const { state, commit, dispatch } = useStore();
+const emit = defineEmits(["updatePwd", "logout"]);
+const flag = reactive({
+    update: false
+})
+const password = ref({
+    new: '',
+    reNew: '',
+    old: ''
+})
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: null,
+    }
+});
+
+const rules = {
+    old: [{
+        required: true,
+        trigger: 'blur',
+        validator: (rule: any, value: any, callback: any) => {
+            if (value == null || value === '') {
+                callback(new Error(state.lang.pleaseEnter + state.lang.oldPwd.toLowerCase()));
+            }
+            callback();
+        }
+    }],
+    new: [new SimplePassword()],
+    reNew: [{
+        required: true,
+        trigger: 'blur',
+        validator: (rule: any, value: any, callback: any) => {
+            if (value == null || value === '') {
+                callback(new Error(state.lang.plsRePwd));
+            } else if (value != password.value.new) {
+                callback(new Error(state.lang.rePwdError));
+            }
+            callback();
+        }
+    }]
+}
+
+const updatePass = () => {
+    password.value = {
+        new: '',
+        reNew: '',
+        old: ''
+    };
+    flag.update = true;
+}
+
+const fullscreen = () => {
+    if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+    }
+}
+
+const changeStyle = type => {
+    commit('updateState', { prop: 'style', value: styles[type] })
+}
+
+const changeLang = type => {
+    const newLang = lang[type];
+    setLang(newLang);
+    commit('updateState', { prop: 'lang', value: newLang })
+}
+
+const changeSize = type => {
+    commit('updateState', { prop: 'size', value: size[type] })
+}
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+.head {
+    background-color: v-bind('state.style.headBg');
+    height: v-bind('state.size.headHeight');
+}
+
+.title {
+    height: v-bind('state.size.headHeight');
+    width: v-bind('state.size.asideWidth');
+    text-align: center;
+    float: left;
+    font-size: v-bind('state.size.titleSize');
+    line-height: v-bind('state.size.headHeight');
+    font-weight: bold;
+    color: v-bind('state.style.titleColor');
+}
+
+.menu {
+    float: right;
+    line-height: v-bind('state.size.headHeight');
+    width: v-bind('state.size.headMenuWidth');
+    padding-right: 10px;
+
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+        float: right;
+        cursor: pointer;
+        height: v-bind('state.size.headHeight');
+        margin-right: 20px;
+        font-size: v-bind('state.size.headIconSize');
+        align-items: center;
+        color: v-bind('state.style.color');
+    }
+
+}
+
+.dropdown-icon {
+    font-size: 20px;
+    margin: 5px 3px;
+}
+</style>
--- a/packages/manage/menu-tree/src/menuTree.vue
+++ b/packages/manage/menu-tree/src/menuTree.vue
@ -1,18 +1,18 @@
				@@ -1,18 +1,18 @@
 <template>
-    <el-menu :default-active="active" class="menu-tree">
+    <el-menu :default-active="active" router class="menu-tree" :text-color="state.style.menuColor"
+        :background-color="state.style.menuBg" :active-text-color="state.style.menuActiveColor" :size="state.size.size">
        <template v-for="menu in data">
            <template v-if="menu.children && menu.children.length > 0">
                <el-sub-menu :index="menu.path" :key="menu.path">
                    <template #title>
-                        <Icon :color="style[type].menuColor" :name="menu.icon ? menu.icon : style[type].menuDefaultIcon" />
                        <span>{{ menu.title ? menu.title : defTitle }}</span>
                    </template>
-                    <menu-tree :menus="menu.children"></menu-tree>
+                    <el-menu-item v-for="child in menu.children" :index="child.path" :router="router">{{ child.title
+                    }}</el-menu-item>
                </el-sub-menu>
            </template>
            <template v-else>
-                <el-menu-item :index="menu.path" :key="menu.path" @click="clickMenu(menu)">
-                    <Icon :color="style[type].menuColor" :name="menu.icon ? menu.icon : style[type].menuDefaultIcon" />
+                <el-menu-item :index="menu.path" :key="menu.path" :router="router">
                    <span>{{ menu.title ? menu.title : defTitle }}</span>
                </el-menu-item>
            </template>
@ -23,9 +23,8 @@
				@@ -23,9 +23,8 @@
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import { ref, onMounted } from "vue"
-import * as style from "./style";

-const store = useStore()
+const { state } = useStore()
 const props = defineProps({
    data: {
        type: Array<any>(),
@ -35,6 +34,10 @@ const props = defineProps({
				@@ -35,6 +34,10 @@ const props = defineProps({
        type: String,
        default: 'def',
    },
+    active: {
+        type: String,
+        default: 'home',
+    }
 });

 const router = useRouter();
@ -46,25 +49,25 @@ const active = ref("");
				@@ -46,25 +49,25 @@ const active = ref("");
 const defTitle = "";

 onMounted(() => {
-    active.value = props.data[0].path;
+    active.value = props.active;
+    router.push(active.value);
 })

 </script>

 <style scoped lang="scss">
-.el-sub-menu .icon,
-.el-menu-item .icon {
-    vertical-align: middle;
-    margin-right: 5px;
-    width: 24px;
-    text-align: center;
+.menu-tree {
+    padding-top: 1px;
+    height: 100%;
+    border: none;
 }

-.is-active>.icon {
-    color: var(--el-menu-active-color) !important;
+.el-menu-item.is-active {
+    background-color: v-bind('state.style.menuActiveBg');
 }

-.el-menu-item.is-active {
-    background-color: v-bind('style[type].menuActiveBackground');
+.el-sub-menu .el-menu-item {
+    min-width: v-bind('state.size.asideWidth') !important;
+    font-size: v-bind('state.size.fontSize') !important;
 }
 </style>
--- a/packages/manage/home/index.ts
+++ b/packages/manage/home/index.ts
@ -1,2 +0,0 @@
				@@ -1,2 +0,0 @@
-import Home from './src/home.vue';
-export { Home };
--- a/packages/manage/home/src/home.vue
+++ b/packages/manage/home/src/home.vue
@ -1,102 +0,0 @@
				@@ -1,102 +0,0 @@
-<template>
-    <el-container :style="appMain">
-        <el-aside :width="sizes.asideWidth">
-            <MenuTree v-show="state.showAside" :data="data" :type="type"></MenuTree>
-        </el-aside>
-        <el-container>
-            <el-header class="app-head" :height="state.sizes.headHeight">
-                <Header v-show="state.showHeader" ref="header" />
-            </el-header>
-            <el-main class="app-main">
-                <router-view />
-            </el-main>
-        </el-container>
-    </el-container>
-</template>
-
-<script lang="ts" setup>
-import { reactive, onMounted, ref } from "vue";
-import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import { MenuTree } from "../../menu-tree"
-
-const { commit, dispatch, state } = useStore();
-const router = useRouter()
-dispatch("getWebConfig");
-const appMain = reactive({
-    height: "",
-    // backgroundImage: "url(" + publik.background + ")",
-});
-
-const flag = reactive({
-    showHeader: true,
-    showAside: true
-})
-const sizes = reactive({
-    fullHeight: '',
-    headHeight: '',
-    asideWidth: '',
-    mainHeight: ''
-
-})
-
-const props = defineProps({
-    data: {
-        type: Array<any>(),
-        default: null
-    },
-    type: {
-        type: String,
-        default: 'def',
-    },
-});
-
-
-onMounted(() => {
-    router.push("/")
-    commit("updateState", { prop: "showHeader", value: false });
-    commit("updateState", { prop: "showAside", value: false });
-    commit("initSizes");
-    appMain.height = state.sizes.fullHeight;
-});
-
-const initSizes = () => {
-    const height = window.innerHeight;
-    const navHead = flag.showHeader ? 60 : 0;
-    const aside = flag.showAside ? 200 : 0;
-    sizes.headHeight = navHead + 'px';
-    sizes.asideWidth = aside + 'px';
-    appMain.height = height + 'px';
-};
-
-</script>
-
-<style lang='scss'>
-@charset "UTF-8";
-// @import "./assets/style/element.scss";
-// @import "./assets/style/base.scss";
-
-.app-main {
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.el-header,
-.main-head,
-.main-table {
-    padding: 0;
-}
-
-#app {
-    background-color: #edf2f7;
-}
-
-.app-head {
-    padding: 0px !important;
-}
-
-.app-main {
-    padding: 0px !important;
-}
-</style>
--- a/packages/manage/index.ts
+++ b/packages/manage/index.ts
@ -1,2 +1,4 @@
				@@ -1,2 +1,4 @@
-export * from './menu-tree';
-export * from "./home"
+import Index from './router/index.vue';
+import MenuTree from './components/menuTree.vue';
+import Head from './components/head.vue';
+export { Index, MenuTree, Head };
--- a/packages/manage/menu-tree/index.ts
+++ b/packages/manage/menu-tree/index.ts
@ -1,2 +0,0 @@
				@@ -1,2 +0,0 @@
-import MenuTree from './src/menuTree.vue';
-export { MenuTree };
--- a/packages/manage/menu-tree/src/style.ts
+++ b/packages/manage/menu-tree/src/style.ts
@ -1,23 +0,0 @@
				@@ -1,23 +0,0 @@
-export const def = {
-  /* 侧边菜单 */
-  // 侧边菜单背景色
-  menuBackground: '#ffffff',
-  // 侧边菜单文字颜色
-  menuColor: '#303133',
-  // 侧边菜单激活项背景色
-  menuActiveBackground: '#ffffff',
-  // 侧边菜单激活项文字色
-  menuActiveColor: '#409eff',
-  // 侧边菜单顶栏背景色
-  menuTopBarBackground: '#fcfcfc',
-  // 侧边菜单宽度(展开时)，单位px
-  menuWidth: 260,
-  // 侧边菜单项默认图标
-  menuDefaultIcon: 'el-icon-Minus',
-  // 是否水平折叠收起菜单
-  menuCollapse: false,
-  // 是否只保持一个子菜单的展开(手风琴)
-  menuUniqueOpened: false,
-  // 显示菜单栏顶栏(LOGO)
-  menuShowTopBar: true,
-};
--- a/packages/manage/router/index.vue
+++ b/packages/manage/router/index.vue
@ -0,0 +1,91 @@
				@@ -0,0 +1,91 @@
+<template>
+    <el-container :style="appMain" ref="main">
+        <el-header v-show="flag.showHeader" class="app-head" :height="state.size.headHeight">
+
+            <Head :title="title || state.lang.title" @updatePwd="pwd => emit('updatePwd', pwd)" @logout="emit('logout')" />
+        </el-header>
+        <el-container id="container">
+            <el-aside v-show="flag.showAside" :width="state.size.asideWidth">
+                <MenuTree :data="menus" :type="type" />
+            </el-aside>
+            <el-main class="app-main">
+                <router-view />
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted, ref } from "vue";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
+import { MenuTree, Head } from "noob"
+
+const { state, commit } = useStore();
+const emit = defineEmits(['updatePwd', 'logout']);
+const router = useRouter()
+const appMain = reactive({
+    height: window.innerHeight + 'px',
+    backgroundColor: state.style.bodyBg
+    // backgroundImage: "url(" + publik.background + ")",
+});
+const main = ref();
+const flag = reactive({
+    showHeader: true,
+    showAside: true
+})
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: null,
+    },
+    menus: {
+        type: Array<any>(),
+        default: null
+    },
+    type: {
+        type: String,
+        default: 'def',
+    }
+});
+
+const onResize = () => {
+    appMain.height = window.innerHeight + 'px';
+}
+
+onMounted(() => {
+    router.push("/")
+    window.onresize = onResize;
+});
+
+</script>
+
+<style lang='scss'>
+@charset "UTF-8";
+
+.app-main {
+    box-shadow: 2px 2px 5px 3px #e5e6eb;
+    border-radius: 4px;
+    margin: 3px 0px 0px 3px !important;
+    padding: 5px !important;
+}
+
+.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;
+}
+</style>
--- a/packages/tool/color.vue
+++ b/packages/tool/color.vue
@ -0,0 +1,71 @@
				@@ -0,0 +1,71 @@
+<template>
+    <h2>颜色对比器</h2>
+    <div class="color-item" v-for="(item, i) in colors" :key="i">
+        <div>{{ state.lang.color + (i + 1) }}</div>
+        <SearchInput :width="120" v-model="colors[i]" />
+        <div :class="['color-view', 'c' + i]"></div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref } from "vue";
+import { SearchInput } from 'noob';
+
+const { state, commit, dispatch } = useStore();
+const colors = reactive(new Array(10));
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+
+.color-item {
+    width: 150px;
+    height: 150px;
+    float: left;
+    align-items: center;
+    text-align: center;
+    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
+}
+
+.color-view {
+    width: 100%;
+    height: 100px;
+
+    &.c0 {
+        background-color: v-bind('"#" + colors[0]');
+    }
+
+    &.c1 {
+        background-color: v-bind('"#" + colors[1]');
+    }
+
+    &.c2 {
+        background-color: v-bind('"#" + colors[2]');
+    }
+
+    &.c3 {
+        background-color: v-bind('"#" + colors[3]');
+    }
+
+    &.c4 {
+        background-color: v-bind('"#" + colors[4]');
+    }
+
+    &.c5 {
+        background-color: v-bind('"#" + colors[5]');
+    }
+    &.c6 {
+        background-color: v-bind('"#" + colors[6]');
+    }
+    &.c7 {
+        background-color: v-bind('"#" + colors[7]');
+    }
+    &.c8 {
+        background-color: v-bind('"#" + colors[8]');
+    }
+    &.c9 {
+        background-color: v-bind('"#" + colors[9]');
+    }
+}</style>
--- a/packages/tool/index.ts
+++ b/packages/tool/index.ts
@ -1,2 +1,5 @@
				@@ -1,2 +1,5 @@
-export * from './termimal';
-export * from './termimal-split';
+import Terminal from './terminal.vue';
+import TerminalSplit from './terminal-split.vue';
+import Color from './color.vue';
+
+export { TerminalSplit, Terminal, Color };
--- a/packages/tool/termimal-split/index.ts
+++ b/packages/tool/termimal-split/index.ts
@ -1,3 +0,0 @@
				@@ -1,3 +0,0 @@
-import TerminalSplit from './src/terminal.vue';
-
-export { TerminalSplit };
--- a/packages/tool/termimal/index.ts
+++ b/packages/tool/termimal/index.ts
@ -1,3 +0,0 @@
				@@ -1,3 +0,0 @@
-import Terminal from './src/terminal.vue';
-
-export { Terminal };
--- a/packages/tool/termimal-split/src/terminal.vue
+++ b/packages/tool/termimal-split/src/terminal.vue
@ -1,18 +1,20 @@
				@@ -1,18 +1,20 @@
 <template>
    <el-row>
        <el-col :span="12">
-            <div id="terminal" v-loading="flag.loading" ref="terminal" element-loading-text="拼命连接中"
+            <div id="terminal" v-loading="flag.loading" ref="terminal" :element-loading-text="state.lang.connect"
                @click.right.native="showClear($event)"></div>
        </el-col>
        <el-col :span="12">
-            <div id="response" v-loading="flag.loading" ref="response" element-loading-text="拼命连接中"></div>
+            <div id="response" v-loading="flag.loading" ref="response" :element-loading-text="state.lang.connect"></div>
        </el-col>
    </el-row>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount, watch, reactive } from "vue";
+import { useStore } from "vuex";
 import { Terminal } from "xterm";
 import "xterm/css/xterm.css";
+const { state } = useStore();
 const prop = defineProps({
    url: {
        type: String,
@ -173,6 +175,7 @@ const showClear = e => {
				@@ -173,6 +175,7 @@ const showClear = e => {
 //监听类型变化，重置term
 watch(() => prop.url, () => {
    term.value.reset();
+    rsp.value.reset();
    flag.loading = true;
    flag.lock = false;
    terminalSocket.value && terminalSocket.value.close();
--- a/packages/tool/termimal/src/terminal.vue
+++ b/packages/tool/termimal/src/terminal.vue
@ -1,11 +1,15 @@
				@@ -1,11 +1,15 @@
 <template>
-    <div id="terminal" v-loading="flag.loading" ref="terminal" element-loading-text="拼命连接中"
+    <div id="terminal" v-loading="flag.loading" ref="terminal" :element-loading-text="state.lang.connect"
        @click.right.native="showClear($event)"></div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount, watch, reactive } from "vue";
+import { useStore } from "vuex";
 import { Terminal } from "xterm";
 import "xterm/css/xterm.css";
+
+const { state } = useStore();
+
 const prop = defineProps({
    url: {
        type: String,
--- a/plugs/config/index.ts
+++ b/plugs/config/index.ts
@ -0,0 +1,3 @@
				@@ -0,0 +1,3 @@
+export * as styles from './styles';
+export * as size from './size';
+export * as lang from './language';
--- a/plugs/config/language/chinese.ts
+++ b/plugs/config/language/chinese.ts
@ -0,0 +1,32 @@
				@@ -0,0 +1,32 @@
+export default class Chinese {
+  title = 'XXX管理系统';
+  language = '语言';
+  confirm = '确认';
+  cancel = '取消';
+  pleaseEnter = '请输入';
+  notBeNull = '这里不能为空';
+  pleaseSelect = '请选择';
+
+  changePwd = '修改密码';
+  pwd = '密码';
+  oldPwd = '旧密码';
+  newPwd = '新密码';
+  rePwd = '确认密码';
+  plsRePwd = '请再次输入新密码';
+  rePwdError = '两次输入密码不一致';
+
+  logout = '退出登录';
+  fullScreen = '切换全屏';
+  changeStyle = '切换主题';
+  default = '默认';
+  light = '明亮';
+  dark = '黑夜';
+
+  color = '颜色';
+  size = '尺寸';
+  normal = '正常';
+  small = '小';
+  large = '大';
+
+  connect = '拼命连接中';
+}
--- a/plugs/config/language/english.ts
+++ b/plugs/config/language/english.ts
@ -0,0 +1,31 @@
				@@ -0,0 +1,31 @@
+export default class English {
+  title = 'XXX System';
+  language = 'Language';
+  confirm = 'Confirm';
+  cancel = 'Cancel';
+  pleaseEnter = 'Please enter ';
+  notBeNull = 'There cannot be empty';
+  pleaseSelect = 'Please select';
+
+  changePwd = 'Change password';
+  pwd = 'Password';
+  oldPwd = 'Old password';
+  newPwd = 'New password';
+  rePwd = 'Repeat password';
+  plsRePwd = 'Please enter the new password again';
+  rePwdError = 'The password is entered twice inconsistently';
+
+  logout = 'Logout';
+  fullScreen = 'Toggle full screen';
+  changeStyle = 'Switch themes';
+  default = 'Default';
+  light = 'Lignt';
+  dark = 'Dark';
+  color = 'Color';
+  size = 'Size';
+  normal = 'Normal';
+  small = 'Small';
+  large = 'Large';
+
+  connect = 'Desperately connected';
+}
--- a/plugs/config/language/index.ts
+++ b/plugs/config/language/index.ts
@ -0,0 +1,8 @@
				@@ -0,0 +1,8 @@
+import Chinese from './chinese';
+import English from './english';
+
+const chinese = new Chinese();
+const english = new English();
+
+export { chinese, english };
+
--- a/plugs/config/size/index.ts
+++ b/plugs/config/size/index.ts
@ -0,0 +1,7 @@
				@@ -0,0 +1,7 @@
+import Normal from './normal';
+import Small from './small';
+import Large from './large';
+const normal = new Normal();
+const small = new Small();
+const large = new Large();
+export { normal, small, large };
--- a/plugs/config/size/large.ts
+++ b/plugs/config/size/large.ts
@ -0,0 +1,16 @@
				@@ -0,0 +1,16 @@
+export default class Small {
+  size = 'large'; //总体尺寸
+  head: Number = 60;
+  aside: Number = 200;
+
+  fontSize = '18px';
+  titleSize = '20px';
+  headIconSize = '24px';
+  headHeight = '60px'; //头部高度
+  headMenuWidth = '350px'; //头部右侧菜单宽度
+  asideWidth = '200px'; //左侧菜单宽度
+
+  searchRowHeight = '45px';
+  searchRowPad = '12px';
+  searchMargin = '15px';
+}
--- a/plugs/config/size/normal.ts
+++ b/plugs/config/size/normal.ts
@ -0,0 +1,16 @@
				@@ -0,0 +1,16 @@
+export default class Normal {
+  size = 'default'; //总体尺寸
+  head: Number = 50;
+  aside: Number = 180;
+
+  fontSize = '16px';
+  titleSize = '18px';
+  headIconSize = '20px';
+  headHeight = '50px'; //头部高度
+  headMenuWidth = '300px'; //头部右侧菜单宽度
+  asideWidth = '180px'; //左侧菜单宽度
+
+  searchRowHeight = '40px';
+  searchRowPad = '10px';
+  searchMargin = '15px';
+}
--- a/plugs/config/size/small.ts
+++ b/plugs/config/size/small.ts
@ -0,0 +1,16 @@
				@@ -0,0 +1,16 @@
+export default class Small {
+  size = 'small'; //总体尺寸
+  head: Number = 45;
+  aside: Number = 160;
+
+  fontSize = '14px';
+  titleSize = '16px';
+  headIconSize = '16px';
+  headHeight = '45px'; //头部高度
+  headMenuWidth = '250px'; //头部右侧菜单宽度
+  asideWidth = '160px'; //左侧菜单宽度
+
+  searchRowHeight = '35px';
+  searchRowPad = '7px';
+  searchMargin = '10px';
+}
--- a/plugs/config/styles/color.ts
+++ b/plugs/config/styles/color.ts
@ -0,0 +1,38 @@
				@@ -0,0 +1,38 @@
+export const light = [
+  '#ffffff',
+  '#F2F6FC',
+  '#F5F7FA',
+  '#F2F3F5',
+  '#F0F2F5',
+  '#EBEDF0',
+  '#efefef',
+  '#E5EAF3',
+  '#E6E8EB',
+  '#e5e6eb',
+];
+
+export const dark = [
+  '#000000',
+  '#121213',
+  '#232324',
+  '#2a2a2b',
+  '#303133',
+  '#373739',
+  '#414142',
+  '#484849',
+  '#585860',
+  '#606266',
+];
+
+export const grey = [
+  '#909399',
+  '#9b9b9d',
+  '#A0A0A0',
+  '#A8ABB2',
+  '#b6b6b6',
+  '#bdbdbe',
+  '#C0C4CC',
+  '#CDD0D6',
+  '#D4D7DE',
+  '#DCDFE6',
+];
--- a/plugs/config/styles/dark.ts
+++ b/plugs/config/styles/dark.ts
@ -0,0 +1,25 @@
				@@ -0,0 +1,25 @@
+import NoobStyle from './noob';
+import { light, dark, grey } from './color';
+
+export default class Dark extends NoobStyle {
+  bodyBg = dark[3]; //全局背景颜色
+  titleColor = light[0]; //标题颜色
+  color = grey[5]; //全局字体颜色
+
+  headBg = dark[2]; //头部背景颜色
+  menuBg = dark[2]; //菜单背景颜色
+  menuActiveBg = dark[6]; //菜单激活背景颜色
+  menuColor = light[0]; //菜单文字颜色
+  menuActiveColor = '#328ae3'; //激活菜单文字颜色
+
+  mainShadowColor = light[8]; //主窗口阴影颜色
+
+  searchRowBg = dark[3];
+  itemBg = dark[7];
+
+  tableBg = dark[2]; //表格背景颜色
+  tableHeadBg = dark[4]; //表头行背景颜色
+  tableCurBg = dark[5]; //当前行背景颜色
+  tableColor = light[0]; //表格字体颜色
+  tableBorderColor = dark[7]; //行底部边框颜色
+}
--- a/plugs/config/styles/index.ts
+++ b/plugs/config/styles/index.ts
@ -0,0 +1,7 @@
				@@ -0,0 +1,7 @@
+import NoobStyle from './noob';
+import Light from './light';
+import Dark from './dark';
+const noobStyle = new NoobStyle();
+const light = new Light();
+const dark = new Dark();
+export { noobStyle, light, dark };
--- a/plugs/config/styles/light.ts
+++ b/plugs/config/styles/light.ts
@ -0,0 +1,16 @@
				@@ -0,0 +1,16 @@
+import NoobStyle from './noob';
+import {light, dark, grey} from './color';
+
+export default class Light extends NoobStyle {
+  bodyBg = light[0]; //全局背景颜色
+  titleColor = dark[0]; //标题颜色
+
+  headBg = light[0]; //头部背景颜色
+  menuBg = light[0]; //菜单背景颜色
+  menuActiveBg = light[1]; //菜单激活背景颜色
+  menuColor = dark[0]; //菜单文字颜色
+  menuActiveColor = '#4f5dfd'; //激活菜单文字颜色
+
+  searchRowBg = light[0];
+  itemBg = light[1];
+}
--- a/plugs/config/styles/noob.ts
+++ b/plugs/config/styles/noob.ts
@ -0,0 +1,30 @@
				@@ -0,0 +1,30 @@
+import { light, dark } from './color';
+
+export default class NoobStyle {
+  size = 'small'; //总体尺寸
+  //   bodyBg = light[0]; //全局背景颜色
+  bodyBg = light[7]; //全局背景颜色
+  titleColor = light[0]; //标题颜色
+  color = '#4e5969'; //全局字体颜色
+
+  //   headBg = '#2e8ae3'; //头部背景颜色
+  headBg = '#40c9c6'; //头部背景颜色
+
+  menuBg = '#323e4d'; //菜单背景颜色
+  menuActiveBg = '#28323e'; //菜单激活背景颜色
+  menuColor = light[7]; //菜单文字颜色
+  menuActiveColor = '#409eff'; //激活菜单文字颜色
+  menuDefaultIcon = 'Minus'; //菜单默认图标
+
+  mainShadowColor = light[4]; //主窗口阴影颜色
+  
+  searchRowBg = light[8];
+  itemBg = light[2];
+  itemSelectColor = '#409eff';
+
+  tableBg = light[0]; //表格背景颜色
+  tableHeadBg = light[0]; //表头行背景颜色
+  tableCurBg = light[0]; //当前行背景颜色
+  tableColor = dark[0]; //表格字体颜色
+  tableBorderColor = light[9]; //行底部边框颜色
+}
--- a/plugs/element/rule.ts
+++ b/plugs/element/rule.ts
@ -1,3 +1,7 @@
				@@ -1,3 +1,7 @@
+let lang;
+
+export const setLang = (language) => (lang = language);
+
 export class SimpleRequired {
  required = true;
  message: string;
@ -5,9 +9,9 @@ export class SimpleRequired {
				@@ -5,9 +9,9 @@ export class SimpleRequired {

  constructor(name?: string) {
    if (name) {
-      this.message = '请输入' + name;
+      this.message = lang.pleaseEnter + name;
    } else {
-      this.message = '此处不能为空';
+      this.message = lang.notBeNull;
    }
  }
 }
@ -35,7 +39,7 @@ export class SimpleCharacter {
				@@ -35,7 +39,7 @@ export class SimpleCharacter {
        this.message = name + '最长不超过' + max + '字符';
      }
    } else {
-      this.message = '此处不能为空';
+      this.message = lang.notBeNull;
    }
  }
 }
@ -59,9 +63,9 @@ export class SimpleSelection {
				@@ -59,9 +63,9 @@ export class SimpleSelection {
    this.required = true;
    this.trigger = 'change';
    if (name) {
-      this.message = '请选择' + name;
+      this.message = lang.pleaseSelect + name;
    } else {
-      this.message = '此处不能为空';
+      this.message = lang.notBeNull;
    }
  }
 }
@ -246,3 +250,41 @@ export class IdCard {
				@@ -246,3 +250,41 @@ export class IdCard {
    callback();
  };
 }
+
+export class SimplePassword {
+  required: boolean = true;
+  trigger = 'blur';
+  min?: Number = 8;
+  max?: Number = 16;
+  validator = (rule: any, value: any, callback: any) => {
+    if (value == null || value === '') {
+      callback(new Error(lang.pleaseEnter + lang.pwd.toLowerCase()));
+    } else if (value.length < 6 || value.length > 18) {
+      callback(new Error('密码长度为：6~18位'));
+    } else if (!new RegExp('^[^ ]+$').test(value)) {
+      callback(new Error('密码不能包含空格'));
+    }
+    callback();
+  };
+}
+
+export class Password {
+  required: boolean = true;
+  trigger = 'blur';
+  min?: Number = 8;
+  max?: Number = 16;
+  validator = (rule: any, value: any, callback: any) => {
+    if (value == null || value === '') {
+      callback(new Error('请输入密码'));
+    } else if (value.length < 8 || value.length > 20) {
+      callback(new Error('密码长度为：8~20位'));
+    } else if (
+      !new RegExp('^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*$').test(value)
+    ) {
+      callback(new Error('密码至少包含大小写字母和数字'));
+    } else if (!new RegExp('^[^ ]+$').test(value)) {
+      callback(new Error('密码不能包含空格'));
+    }
+    callback();
+  };
+}
--- a/plugs/index.ts
+++ b/plugs/index.ts
@ -0,0 +1,4 @@
				@@ -0,0 +1,4 @@
+export * from './element';
+export * from './store';
+export * from './axios';
+export * from './config';
--- a/plugs/store/index.ts
+++ b/plugs/store/index.ts
@ -0,0 +1,21 @@
				@@ -0,0 +1,21 @@
+import { createStore as create } from 'vuex';
+import { styles, lang, size } from '../config';
+import { setLang } from '../element';
+
+const state = {
+  style: styles.noobStyle,
+  lang: lang.chinese,
+  size: size.small,
+};
+setLang(lang.chinese);
+
+const mutations = {
+  updateState(state, param) {
+    state[param.prop] = param.value;
+  },
+};
+export const createStore = (options) => {
+  Object.assign(options.state, state);
+  Object.assign(options.mutations, mutations);
+  return create(options);
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -20,6 +20,12 @@
				@@ -20,6 +20,12 @@
    "paths": {
      "@/": [
        "./"
+      ],
+      "noob": [
+        "./packages"
+      ],
+      "plugs": [
+        "./plugs"
      ]
    },
    "lib": [
				`@ -0,0 +1 @@` @@ -0,0 +1 @@
				<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title></title><script defer="defer" src="/js/chunk-vendors.2810f37d.js"></script><script defer="defer" src="/js/index.29912fb5.js"></script><link href="/css/chunk-vendors.6e16aa55.css" rel="stylesheet"><link href="/css/index.3ad5135e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but noob-mengyxu doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>