diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/lib/form.less b/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/lib/form.less
index 3bbb6c1..2324878 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/lib/form.less
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/lib/form.less
@@ -4,6 +4,13 @@
     width: 660px;
     margin: 0 auto;
   }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    color: darken(@white, 40%);
+  }
   .yo-form-group {
     margin-bottom: @padding-md;
   }
@@ -146,7 +153,11 @@
     padding: 0;
   }
   .yo-form {
-    >h3 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
       margin-top: @padding-sm;
       padding: 0 @padding-md;
     }
@@ -162,3 +173,33 @@
     }
   }
 }
+.yo-drawer-form {
+  .ant-drawer-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 7;
+
+    width: 100%;
+  }
+  .ant-drawer-body {
+    padding: @padding-lg + 56px @padding-lg;
+  }
+  .ant-drawer-footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 7;
+
+    width: 100%;
+    padding: 10px @padding-md;
+
+    text-align: right;
+
+    border-top: @border-width-base @border-style-base @border-color-split;
+    background: @white;
+    button+button {
+      margin-left: @padding-xs;
+    }
+  }
+}
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/theme/README.md b/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/theme/README.md
new file mode 100644
index 0000000..bcd8014
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/theme/README.md
@@ -0,0 +1 @@
+在此文件夹中添加控制主题颜色的less文件
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTable/index.js b/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTable/index.js
index c3264d5..d927f32 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTable/index.js
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTable/index.js
@@ -25,6 +25,8 @@ export default {
     return {
       loading: false,
 
+      type: '',
+
       data: [],
 
       pagination: {
@@ -101,14 +103,23 @@ export default {
         pageSize: this.pagination.pageSize,
         ...this.sorter
       }).then((res) => {
-        this.data = res.rows
-        this.pagination.total = res.totalRows
+        if (res.rows) {
+          // 普通表格
+          this.type = 'table'
+          this.data = res.rows
+          this.pagination.total = res.totalRows
+        } else if (res) {
+          // 树形表格
+          this.type = 'tree'
+          this.data = this.onClearChildren(res)
+          this.pagination = false
+        }
         this.onLoaded()
       })
     },
 
     onReloadData(refresh = false) {
-      if (refresh && refresh.constructor === Boolean) {
+      if (refresh && refresh.constructor === Boolean && this.pagination.constructor === Object) {
         this.pagination.current = this.pageNo
         this.pagination.pageSize = this.pageSize
       }
@@ -119,7 +130,23 @@ export default {
       this.pagination = pagination
       this.sorter = sorter
       this.onLoadData()
-    }
+    },
+
+    /**
+     * 清除没有子节点内容的子节点位置
+     */
+    onClearChildren(data) {
+      data.forEach(p => {
+        if (p.children) {
+          if (p.children.length) {
+            p.children = this.onClearChildren(p.children)
+          } else {
+            delete p.children
+          }
+        }
+      })
+      return data
+    },
   },
 
   render() {
@@ -154,7 +181,9 @@ export default {
           <div class="yo-action-bar--actions">
             <a-button-group>
               <a-button onClick={this.onReloadData}>刷新</a-button>
-              <ColumnSetting {...{ props: { columns: this.columns } }} />
+              {
+                this.type === 'table' && <ColumnSetting {...{ props: { columns: this.columns } }} />
+              }
             </a-button-group>
           </div>
         </div>
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/README.md b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/README.md
new file mode 100644
index 0000000..07b0a32
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/README.md
@@ -0,0 +1,3 @@
+基本上所有列表页都可以通过拷贝此处的种子文件实现增删改查的功能
+所有带 ... 的注释是可以依据当前业务添加内容的地方
+其他所有尽量不要修改
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/addForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/addForm.vue
new file mode 100644
index 0000000..55ed776
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/addForm.vue
@@ -0,0 +1,78 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="新增XX"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.formBody.onInit();
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .testAddApi(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('新增成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/editForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/editForm.vue
new file mode 100644
index 0000000..6660ec9
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/editForm.vue
@@ -0,0 +1,78 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @close="onCancel"
+    class="yo-modal-form"
+    title="编辑XX"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+        this.formBody.onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .testEditApi(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/form.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/form.vue
new file mode 100644
index 0000000..873e6f2
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/form.vue
@@ -0,0 +1,100 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
+      rules: {},
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /** ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /** ...BEGIN */
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /** ... */
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/index.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/index.vue
new file mode 100644
index 0000000..70128a9
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/_seed/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <Auth auth="authCode:page">
+        <div class="yo-query-bar">
+          <a-form-model :model="query" layout="inline">
+            <!-- 此处添加查询表单控件 -->
+            <a-form-model-item>
+              <a-button-group>
+                <a-button @click="onQuery" type="primary">查询</a-button>
+                <a-button @click="onResetQuery">重置</a-button>
+              </a-button-group>
+            </a-form-model-item>
+          </a-form-model>
+        </div>
+      </Auth>
+
+      <yo-table :columns="columns" :load-data="loadData" ref="table">
+        <Auth auth="authCode:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增XX</a-button>
+        </Auth>
+        <!-- 格式化字段内容 -->
+        <!-- 添加操作控件 -->
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="authCode:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="authCode:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </container>
+</template>
+<script>
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+export default {
+  components: {
+    AddForm,
+    EditForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [],
+      codes: {
+        code1: [],
+        code2: [],
+      },
+    };
+  },
+  created() {
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/** ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return (
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .testGetApi({
+            ...params,
+            ...this.query,
+          })
+          .then((res) => {
+            return res.data;
+          })
+      );
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'code1' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'code2' }),
+        ])
+        .then(([code1, code2]) => {
+          this.codes.code1 = code1.data;
+          this.codes.code2 = code2.data;
+        });
+    },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record);
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      }
+      this.$refs.table.onLoaded();
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .testDeleteApi(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/addForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/addForm.vue
new file mode 100644
index 0000000..044f6af
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/addForm.vue
@@ -0,0 +1,84 @@
+<template>
+  <a-drawer
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="800"
+    @close="onClose"
+    @ok="onOk"
+    class="yo-drawer-form"
+    title="新增菜单"
+  >
+    <FormBody ref="form-body" />
+    <div class="ant-drawer-footer">
+      <a-button @click="onClose">取消</a-button>
+      <a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen() {
+      this.visible = true;
+
+      this.$nextTick(() => {
+        this.formBody.onInit();
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          .sysMenuAdd(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('新增成功');
+              this.onClose();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onClose() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/editForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/editForm.vue
new file mode 100644
index 0000000..9fc6d36
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/editForm.vue
@@ -0,0 +1,83 @@
+<template>
+  <a-drawer
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="800"
+    @close="onClose"
+    class="yo-drawer-form"
+    title="编辑应用"
+  >
+    <FormBody ref="form-body" />
+    <div class="ant-drawer-footer">
+      <a-button @click="onClose">取消</a-button>
+      <a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+        this.formBody.onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          .sysMenuEdit(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onClose();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onClose() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/form.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/form.vue
new file mode 100644
index 0000000..c994fd4
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/form.vue
@@ -0,0 +1,297 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <a-alert type="warning">
+        <template slot="message">当前没有写入字段[重定向]</template>
+      </a-alert>
+      <br />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <h3>基本信息</h3>
+        <div class="yo-form-group">
+          <a-form-model-item label="菜单类型" prop="type">
+            <template slot="help">
+              目录：默认添加在顶级
+              <br />菜单：
+              <br />按钮：
+            </template>
+            <a-radio-group @change="onTypeChange" v-model="form.type">
+              <a-radio-button
+                :key="type.code"
+                :value="type.code"
+                v-for="type in codes.menuType"
+              >{{type.value}}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item label="名称" prop="name">
+            <a-input placeholder="请输入名称" v-model="form.name" />
+          </a-form-model-item>
+          <a-form-model-item label="唯一编码" prop="code">
+            <a-input placeholder="请输入唯一编码" v-model="form.code" />
+          </a-form-model-item>
+          <a-form-model-item label="所属应用" prop="application">
+            <a-select
+              @change="onChangeApplication"
+              placeholder="请选择所属应用"
+              v-model="form.application"
+            >
+              <a-select-option
+                :key="item.code"
+                :value="item.code"
+                v-for="item in appList"
+              >{{item.name}}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <!-- 父级菜单只有[目录]不可用 -->
+          <a-form-model-item label="父级菜单" prop="pid" v-if="form.type != 0">
+            <a-tree-select
+              :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
+              :tree-data="parentTreeData"
+              placeholder="请选择父级菜单"
+              v-model="form.pid"
+            />
+          </a-form-model-item>
+        </div>
+
+        <h3>扩展信息</h3>
+        <div class="yo-form-group">
+          <a-form-model-item label="打开方式" prop="openType" v-if="form.type == 1">
+            <a-radio-group @change="onOpenTypeChange" v-model="form.openType">
+              <a-radio-button
+                :key="type.code"
+                :value="type.code"
+                v-for="type in codes.openType"
+              >{{type.value}}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <!-- 前端组件只有[菜单]及[组件]可用 -->
+          <a-form-model-item
+            label="前端组件"
+            prop="component"
+            v-if="form.type == 1 && form.openType == 1"
+            v-show="form.type == 1 && form.openType == 1"
+          >
+            <a-input placeholder="请输入前端组件" v-model="form.component" />
+          </a-form-model-item>
+          <!-- 内链地址只有[菜单]及[内链]可用 -->
+          <a-form-model-item label="内链地址" prop="router" v-if="form.type == 1 && form.openType == 2">
+            <a-input placeholder="请输入内链地址" v-model="form.router" />
+          </a-form-model-item>
+          <!-- 外链地址只有[菜单]及[外链]可用 -->
+          <a-form-model-item label="内外链地址" prop="link" v-if="form.type == 1 && form.openType == 3">
+            <a-input placeholder="请输入内外链地址" v-model="form.link" />
+          </a-form-model-item>
+          <a-form-model-item label="权重" prop="weight">
+            <template slot="help">
+              系统权重：菜单可分配给任何角色
+              <br />业务权重：菜单对超级管理员不可见
+            </template>
+            <a-radio-group v-model="form.weight">
+              <a-radio-button
+                :key="type.code"
+                :value="type.code"
+                v-for="type in codes.menuWerght"
+              >{{type.value}}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item label="可见性">
+            <a-switch checked-children="可见" un-checked-children="隐藏" v-model="form.visible" />
+          </a-form-model-item>
+          <!-- 图标只有[按钮]不可用 -->
+          <a-form-model-item label="图标" v-if="form.type != 2"></a-form-model-item>
+          <a-form-model-item label="排序">
+            <a-input-number
+              :max="1000"
+              :min="0"
+              class="w-100-p"
+              placeholder="请输入排序"
+              v-model="form.sort"
+            />
+          </a-form-model-item>
+          <a-form-model-item label="备注信息">
+            <a-textarea placeholder="请输入备注信息" v-model="form.remark" />
+          </a-form-model-item>
+        </div>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {
+        type: '1',
+        openType: '1',
+        weight: '2',
+        visible: true,
+        sort: 100,
+      },
+      /** 验证格式 */
+      rules: {
+        type: [{ required: true, message: '请选择菜单类型' }],
+        name: [{ required: true, message: '请输入名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+        application: [{ required: true, message: '请选择所属应用' }],
+        pid: [{ required: true, message: '请选择父级' }],
+        component: [{ required: true, message: '请输入前端组件' }],
+        router: [{ required: true, message: '请输入内链地址' }],
+        link: [{ required: true, message: '请输入外链地址' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /** ... */
+      appList: [],
+      codes: {
+        menuType: [],
+        menuWerght: [],
+        openType: [],
+      },
+
+      parentTreeData: [],
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+        visible: record.visible == 'Y',
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+            record.visible = record.visible ? 'Y' : 'N';
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+        this.parentTreeData = [];
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      this.loading = true;
+
+      /** 可以在这里await获取一些异步数据 */
+      /** ...BEGIN */
+      this.codes = await this.onLoadCodes();
+      this.appList = await this.onLoadSysApplist();
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /** ... */
+    onLoadCodes() {
+      return this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'menu_type' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'open_type' }),
+        ])
+        .then(([menuType, menuWerght, openType]) => {
+          return {
+            menuType: menuType.data,
+            menuWerght: menuWerght.data,
+            openType: openType.data,
+          };
+        });
+    },
+
+    onLoadSysApplist() {
+      return this.$api.getAppList().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onTypeChangeGroup() {
+      const { type, openType } = this.form;
+      if (type == 1 && openType == 2) {
+        this.$set(this.form, 'component', 'iframe');
+      } else {
+        this.$set(this.form, 'component', '');
+      }
+    },
+
+    onTypeChange() {
+      this.onTypeChangeGroup();
+
+      if (this.form.type == 0 || this.form.type == 2) {
+        this.form.openType = '0';
+      } else {
+        this.form.openType = '1';
+      }
+    },
+
+    onOpenTypeChange() {
+      this.onTypeChangeGroup();
+    },
+
+    onChangeApplication(value) {
+      this.$api.getMenuTree({ application: value }).then(({ data }) => {
+        this.parentTreeData = [
+          {
+            id: -1,
+            parentId: 0,
+            title: '顶级',
+            value: 0,
+            pid: 0,
+            children: data,
+          },
+        ];
+      });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/index.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/index.vue
new file mode 100644
index 0000000..4bae0f3
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/menu/index.vue
@@ -0,0 +1,194 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <yo-table :columns="columns" :load-data="loadData" ref="table">
+        <Auth auth="sysMenu:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增菜单</a-button>
+        </Auth>
+        <span slot="type" slot-scope="text">{{ bindCodeValue(text, 'menu_type') }}</span>
+        <span slot="icon" slot-scope="text">
+          <div v-if="text">
+            <a-icon :type="text" />
+          </div>
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="sysMenu:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysMenu:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </container>
+</template>
+<script>
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+export default {
+  components: {
+    AddForm,
+    EditForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '菜单名称',
+          width: '220px',
+          dataIndex: 'name',
+        },
+        {
+          title: '菜单类型',
+          width: '100px',
+          dataIndex: 'type',
+          scopedSlots: { customRender: 'type' },
+        },
+        {
+          title: '图标',
+          width: '100px',
+          dataIndex: 'icon',
+          scopedSlots: { customRender: 'icon' },
+        },
+        {
+          title: '前端组件',
+          width: '220px',
+          dataIndex: 'component',
+          ellipsis: true,
+        },
+        {
+          title: '权限标识',
+          width: '220px',
+          dataIndex: 'permission',
+          ellipsis: true,
+        },
+        {
+          title: '排序',
+          width: '100px',
+          dataIndex: 'sort',
+        },
+      ],
+      codes: [
+        {
+          code: 'menu_type',
+          values: [],
+        },
+        {
+          code: 'menu_weight',
+          values: [],
+        },
+        {
+          code: 'open_type',
+          values: [],
+        },
+      ],
+    };
+  },
+  created() {
+    this.onLoadCodes();
+
+    const flag = this.$auth({
+      sysApp: [['edit'], ['delete']],
+    });
+
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getMenuList({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'menu_type' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'open_type' }),
+        ])
+        .then(([menuType, menuWerght, openType]) => {
+          this.codes.find((p) => p.code === 'menu_type').values = menuType.data;
+          this.codes.find((p) => p.code === 'menu_weight').values = menuWerght.data;
+          this.codes.find((p) => p.code === 'open_type').values = openType.data;
+        });
+    },
+    bindCodeValue(code, name) {
+      const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record);
+    },
+
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      }
+      this.$refs.table.onLoaded();
+    },
+
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysMenuDelete(record).then(({ success }) => {
+        this.onResult(success, '删除成功');
+      });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.css b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.css
new file mode 100644
index 0000000..9f3ace0
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.css
@@ -0,0 +1,296 @@
+@-webkit-keyframes noise-anim {
+  0% {
+    clip: rect(32px, 9999px, 16px, 0);
+  }
+  5% {
+    clip: rect(5px, 9999px, 24px, 0);
+  }
+  10% {
+    clip: rect(77px, 9999px, 87px, 0);
+  }
+  15% {
+    clip: rect(91px, 9999px, 95px, 0);
+  }
+  20% {
+    clip: rect(74px, 9999px, 9px, 0);
+  }
+  25% {
+    clip: rect(37px, 9999px, 32px, 0);
+  }
+  30% {
+    clip: rect(56px, 9999px, 27px, 0);
+  }
+  35% {
+    clip: rect(35px, 9999px, 33px, 0);
+  }
+  40% {
+    clip: rect(89px, 9999px, 6px, 0);
+  }
+  45% {
+    clip: rect(81px, 9999px, 77px, 0);
+  }
+  50% {
+    clip: rect(64px, 9999px, 69px, 0);
+  }
+  55% {
+    clip: rect(12px, 9999px, 11px, 0);
+  }
+  60% {
+    clip: rect(59px, 9999px, 11px, 0);
+  }
+  65% {
+    clip: rect(69px, 9999px, 59px, 0);
+  }
+  70% {
+    clip: rect(74px, 9999px, 65px, 0);
+  }
+  75% {
+    clip: rect(56px, 9999px, 79px, 0);
+  }
+  80% {
+    clip: rect(80px, 9999px, 64px, 0);
+  }
+  85% {
+    clip: rect(87px, 9999px, 29px, 0);
+  }
+  90% {
+    clip: rect(16px, 9999px, 21px, 0);
+  }
+  95% {
+    clip: rect(69px, 9999px, 43px, 0);
+  }
+  100% {
+    clip: rect(75px, 9999px, 63px, 0);
+  }
+}
+@keyframes noise-anim {
+  0% {
+    clip: rect(32px, 9999px, 16px, 0);
+  }
+  5% {
+    clip: rect(5px, 9999px, 24px, 0);
+  }
+  10% {
+    clip: rect(77px, 9999px, 87px, 0);
+  }
+  15% {
+    clip: rect(91px, 9999px, 95px, 0);
+  }
+  20% {
+    clip: rect(74px, 9999px, 9px, 0);
+  }
+  25% {
+    clip: rect(37px, 9999px, 32px, 0);
+  }
+  30% {
+    clip: rect(56px, 9999px, 27px, 0);
+  }
+  35% {
+    clip: rect(35px, 9999px, 33px, 0);
+  }
+  40% {
+    clip: rect(89px, 9999px, 6px, 0);
+  }
+  45% {
+    clip: rect(81px, 9999px, 77px, 0);
+  }
+  50% {
+    clip: rect(64px, 9999px, 69px, 0);
+  }
+  55% {
+    clip: rect(12px, 9999px, 11px, 0);
+  }
+  60% {
+    clip: rect(59px, 9999px, 11px, 0);
+  }
+  65% {
+    clip: rect(69px, 9999px, 59px, 0);
+  }
+  70% {
+    clip: rect(74px, 9999px, 65px, 0);
+  }
+  75% {
+    clip: rect(56px, 9999px, 79px, 0);
+  }
+  80% {
+    clip: rect(80px, 9999px, 64px, 0);
+  }
+  85% {
+    clip: rect(87px, 9999px, 29px, 0);
+  }
+  90% {
+    clip: rect(16px, 9999px, 21px, 0);
+  }
+  95% {
+    clip: rect(69px, 9999px, 43px, 0);
+  }
+  100% {
+    clip: rect(75px, 9999px, 63px, 0);
+  }
+}
+@-webkit-keyframes noise-anim-2 {
+  0% {
+    clip: rect(12px, 9999px, 52px, 0);
+  }
+  5% {
+    clip: rect(42px, 9999px, 39px, 0);
+  }
+  10% {
+    clip: rect(64px, 9999px, 36px, 0);
+  }
+  15% {
+    clip: rect(52px, 9999px, 15px, 0);
+  }
+  20% {
+    clip: rect(79px, 9999px, 7px, 0);
+  }
+  25% {
+    clip: rect(17px, 9999px, 41px, 0);
+  }
+  30% {
+    clip: rect(15px, 9999px, 20px, 0);
+  }
+  35% {
+    clip: rect(62px, 9999px, 87px, 0);
+  }
+  40% {
+    clip: rect(94px, 9999px, 11px, 0);
+  }
+  45% {
+    clip: rect(49px, 9999px, 10px, 0);
+  }
+  50% {
+    clip: rect(82px, 9999px, 4px, 0);
+  }
+  55% {
+    clip: rect(70px, 9999px, 100px, 0);
+  }
+  60% {
+    clip: rect(62px, 9999px, 23px, 0);
+  }
+  65% {
+    clip: rect(51px, 9999px, 56px, 0);
+  }
+  70% {
+    clip: rect(41px, 9999px, 24px, 0);
+  }
+  75% {
+    clip: rect(6px, 9999px, 85px, 0);
+  }
+  80% {
+    clip: rect(96px, 9999px, 58px, 0);
+  }
+  85% {
+    clip: rect(16px, 9999px, 24px, 0);
+  }
+  90% {
+    clip: rect(40px, 9999px, 31px, 0);
+  }
+  95% {
+    clip: rect(91px, 9999px, 34px, 0);
+  }
+  100% {
+    clip: rect(87px, 9999px, 26px, 0);
+  }
+}
+@keyframes noise-anim-2 {
+  0% {
+    clip: rect(12px, 9999px, 52px, 0);
+  }
+  5% {
+    clip: rect(42px, 9999px, 39px, 0);
+  }
+  10% {
+    clip: rect(64px, 9999px, 36px, 0);
+  }
+  15% {
+    clip: rect(52px, 9999px, 15px, 0);
+  }
+  20% {
+    clip: rect(79px, 9999px, 7px, 0);
+  }
+  25% {
+    clip: rect(17px, 9999px, 41px, 0);
+  }
+  30% {
+    clip: rect(15px, 9999px, 20px, 0);
+  }
+  35% {
+    clip: rect(62px, 9999px, 87px, 0);
+  }
+  40% {
+    clip: rect(94px, 9999px, 11px, 0);
+  }
+  45% {
+    clip: rect(49px, 9999px, 10px, 0);
+  }
+  50% {
+    clip: rect(82px, 9999px, 4px, 0);
+  }
+  55% {
+    clip: rect(70px, 9999px, 100px, 0);
+  }
+  60% {
+    clip: rect(62px, 9999px, 23px, 0);
+  }
+  65% {
+    clip: rect(51px, 9999px, 56px, 0);
+  }
+  70% {
+    clip: rect(41px, 9999px, 24px, 0);
+  }
+  75% {
+    clip: rect(6px, 9999px, 85px, 0);
+  }
+  80% {
+    clip: rect(96px, 9999px, 58px, 0);
+  }
+  85% {
+    clip: rect(16px, 9999px, 24px, 0);
+  }
+  90% {
+    clip: rect(40px, 9999px, 31px, 0);
+  }
+  95% {
+    clip: rect(91px, 9999px, 34px, 0);
+  }
+  100% {
+    clip: rect(87px, 9999px, 26px, 0);
+  }
+}
+.error-result {
+  padding: 100px;
+  text-transform: uppercase;
+}
+.error-result--text {
+  font-size: 7rem;
+  line-height: 1;
+  position: relative;
+  display: block;
+  width: 12.5rem;
+  color: #5a5c69;
+}
+.error-result--text::after {
+  position: absolute;
+  top: 0;
+  left: 2px;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  content: attr(data-text);
+  animation: noise-anim 2s infinite linear alternate-reverse;
+  color: #5a5c69;
+  background: #f8f9fc;
+  text-shadow: -1px 0 #e74a3b;
+}
+.error-result--text::before {
+  position: absolute;
+  top: 0;
+  left: -2px;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  content: attr(data-text);
+  animation: noise-anim-2 3s infinite linear alternate-reverse;
+  color: #5a5c69;
+  background: #f8f9fc;
+  text-shadow: 1px 0 #4e73df;
+}
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.less b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.less
new file mode 100644
index 0000000..6eb2f93
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.less
@@ -0,0 +1,308 @@
+@import (reference) '~ant-design-vue/dist/antd.less';
+@-webkit-keyframes noise-anim-after {
+  0% {
+    clip: rect(32px, 9999px, 16px, 0);
+  }
+  5% {
+    clip: rect(5px, 9999px, 24px, 0);
+  }
+  10% {
+    clip: rect(77px, 9999px, 87px, 0);
+  }
+  15% {
+    clip: rect(91px, 9999px, 95px, 0);
+  }
+  20% {
+    clip: rect(74px, 9999px, 9px, 0);
+  }
+  25% {
+    clip: rect(37px, 9999px, 32px, 0);
+  }
+  30% {
+    clip: rect(56px, 9999px, 27px, 0);
+  }
+  35% {
+    clip: rect(35px, 9999px, 33px, 0);
+  }
+  40% {
+    clip: rect(89px, 9999px, 6px, 0);
+  }
+  45% {
+    clip: rect(81px, 9999px, 77px, 0);
+  }
+  50% {
+    clip: rect(64px, 9999px, 69px, 0);
+  }
+  55% {
+    clip: rect(12px, 9999px, 11px, 0);
+  }
+  60% {
+    clip: rect(59px, 9999px, 11px, 0);
+  }
+  65% {
+    clip: rect(69px, 9999px, 59px, 0);
+  }
+  70% {
+    clip: rect(74px, 9999px, 65px, 0);
+  }
+  75% {
+    clip: rect(56px, 9999px, 79px, 0);
+  }
+  80% {
+    clip: rect(80px, 9999px, 64px, 0);
+  }
+  85% {
+    clip: rect(87px, 9999px, 29px, 0);
+  }
+  90% {
+    clip: rect(16px, 9999px, 21px, 0);
+  }
+  95% {
+    clip: rect(69px, 9999px, 43px, 0);
+  }
+  100% {
+    clip: rect(75px, 9999px, 63px, 0);
+  }
+}
+@keyframes noise-anim-after {
+  0% {
+    clip: rect(32px, 9999px, 16px, 0);
+  }
+  5% {
+    clip: rect(5px, 9999px, 24px, 0);
+  }
+  10% {
+    clip: rect(77px, 9999px, 87px, 0);
+  }
+  15% {
+    clip: rect(91px, 9999px, 95px, 0);
+  }
+  20% {
+    clip: rect(74px, 9999px, 9px, 0);
+  }
+  25% {
+    clip: rect(37px, 9999px, 32px, 0);
+  }
+  30% {
+    clip: rect(56px, 9999px, 27px, 0);
+  }
+  35% {
+    clip: rect(35px, 9999px, 33px, 0);
+  }
+  40% {
+    clip: rect(89px, 9999px, 6px, 0);
+  }
+  45% {
+    clip: rect(81px, 9999px, 77px, 0);
+  }
+  50% {
+    clip: rect(64px, 9999px, 69px, 0);
+  }
+  55% {
+    clip: rect(12px, 9999px, 11px, 0);
+  }
+  60% {
+    clip: rect(59px, 9999px, 11px, 0);
+  }
+  65% {
+    clip: rect(69px, 9999px, 59px, 0);
+  }
+  70% {
+    clip: rect(74px, 9999px, 65px, 0);
+  }
+  75% {
+    clip: rect(56px, 9999px, 79px, 0);
+  }
+  80% {
+    clip: rect(80px, 9999px, 64px, 0);
+  }
+  85% {
+    clip: rect(87px, 9999px, 29px, 0);
+  }
+  90% {
+    clip: rect(16px, 9999px, 21px, 0);
+  }
+  95% {
+    clip: rect(69px, 9999px, 43px, 0);
+  }
+  100% {
+    clip: rect(75px, 9999px, 63px, 0);
+  }
+}
+@-webkit-keyframes noise-anim-before {
+  0% {
+    clip: rect(12px, 9999px, 52px, 0);
+  }
+  5% {
+    clip: rect(42px, 9999px, 39px, 0);
+  }
+  10% {
+    clip: rect(64px, 9999px, 36px, 0);
+  }
+  15% {
+    clip: rect(52px, 9999px, 15px, 0);
+  }
+  20% {
+    clip: rect(79px, 9999px, 7px, 0);
+  }
+  25% {
+    clip: rect(17px, 9999px, 41px, 0);
+  }
+  30% {
+    clip: rect(15px, 9999px, 20px, 0);
+  }
+  35% {
+    clip: rect(62px, 9999px, 87px, 0);
+  }
+  40% {
+    clip: rect(94px, 9999px, 11px, 0);
+  }
+  45% {
+    clip: rect(49px, 9999px, 10px, 0);
+  }
+  50% {
+    clip: rect(82px, 9999px, 4px, 0);
+  }
+  55% {
+    clip: rect(70px, 9999px, 100px, 0);
+  }
+  60% {
+    clip: rect(62px, 9999px, 23px, 0);
+  }
+  65% {
+    clip: rect(51px, 9999px, 56px, 0);
+  }
+  70% {
+    clip: rect(41px, 9999px, 24px, 0);
+  }
+  75% {
+    clip: rect(6px, 9999px, 85px, 0);
+  }
+  80% {
+    clip: rect(96px, 9999px, 58px, 0);
+  }
+  85% {
+    clip: rect(16px, 9999px, 24px, 0);
+  }
+  90% {
+    clip: rect(40px, 9999px, 31px, 0);
+  }
+  95% {
+    clip: rect(91px, 9999px, 34px, 0);
+  }
+  100% {
+    clip: rect(87px, 9999px, 26px, 0);
+  }
+}
+@keyframes noise-anim-before {
+  0% {
+    clip: rect(12px, 9999px, 52px, 0);
+  }
+  5% {
+    clip: rect(42px, 9999px, 39px, 0);
+  }
+  10% {
+    clip: rect(64px, 9999px, 36px, 0);
+  }
+  15% {
+    clip: rect(52px, 9999px, 15px, 0);
+  }
+  20% {
+    clip: rect(79px, 9999px, 7px, 0);
+  }
+  25% {
+    clip: rect(17px, 9999px, 41px, 0);
+  }
+  30% {
+    clip: rect(15px, 9999px, 20px, 0);
+  }
+  35% {
+    clip: rect(62px, 9999px, 87px, 0);
+  }
+  40% {
+    clip: rect(94px, 9999px, 11px, 0);
+  }
+  45% {
+    clip: rect(49px, 9999px, 10px, 0);
+  }
+  50% {
+    clip: rect(82px, 9999px, 4px, 0);
+  }
+  55% {
+    clip: rect(70px, 9999px, 100px, 0);
+  }
+  60% {
+    clip: rect(62px, 9999px, 23px, 0);
+  }
+  65% {
+    clip: rect(51px, 9999px, 56px, 0);
+  }
+  70% {
+    clip: rect(41px, 9999px, 24px, 0);
+  }
+  75% {
+    clip: rect(6px, 9999px, 85px, 0);
+  }
+  80% {
+    clip: rect(96px, 9999px, 58px, 0);
+  }
+  85% {
+    clip: rect(16px, 9999px, 24px, 0);
+  }
+  90% {
+    clip: rect(40px, 9999px, 31px, 0);
+  }
+  95% {
+    clip: rect(91px, 9999px, 34px, 0);
+  }
+  100% {
+    clip: rect(87px, 9999px, 26px, 0);
+  }
+}
+.error-result {
+  padding: 100px;
+
+  text-transform: uppercase;
+  &--text {
+    font-size: @font-size-base * 8;
+    line-height: 1;
+
+    position: relative;
+
+    display: block;
+
+    width: 12.5rem;
+
+    color: #5a5c69;
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 2px;
+
+      overflow: hidden;
+      clip: rect(0, 900px, 0, 0);
+
+      content: attr(data-text);
+      animation: noise-anim-after 2s infinite linear alternate-reverse;
+
+      color: #5a5c69;
+      background: @layout-body-background;
+      text-shadow: -1px 0 #e74a3b;
+    }
+    &::before {
+      position: absolute;
+      top: 0;
+      left: -2px;
+
+      overflow: hidden;
+      clip: rect(0, 900px, 0, 0);
+
+      content: attr(data-text);
+      animation: noise-anim-before 3s infinite linear alternate-reverse;
+
+      color: #5a5c69;
+      background: @layout-body-background;
+      text-shadow: 1px 0 #4e73df;
+    }
+  }
+}
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.vue
new file mode 100644
index 0000000..45c00f7
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/error/404/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <container>
+    <div class="error-result">
+      <div class="error-result--code">
+        <span class="error-result--text" data-text="404">404</span>
+      </div>
+      <p>not found</p>
+    </div>
+  </container>
+</template>
+<style lang="less" scope>
+@import './index.less';
+
+</style>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/content.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/content.vue
index ebf3306..399872a 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/content.vue
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/content.vue
@@ -74,7 +74,7 @@ export default {
         pane.loaded = true;
         NProgress.done();
       }).catch(() => {
-        pane.component = () => import('@/views/404');
+        pane.component = () => import('@/views/error/404');
         pane.loaded = true;
         NProgress.done();
       });
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/sider/index.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/sider/index.vue
index 36b2734..ec4ccf2 100644
--- a/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/sider/index.vue
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/sider/index.vue
@@ -35,6 +35,8 @@
 import Logo from '../logo';
 import Menu from './menu';
 
+let swiper;
+
 export default {
   components: {
     Logo,
@@ -65,16 +67,13 @@ export default {
       },
     };
   },
-  computed: {
-    swiper() {
-      return this.$refs['sider-swiper'].$swiper;
-    },
-  },
   mounted() {
+    swiper = this.$refs['sider-swiper'].$swiper;
+
     window.addEventListener('resize', () => {
       if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
         setTimeout(() => {
-          this.swiper.update();
+          swiper.update();
         }, 300);
       }
     });