diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000000000000000000000000000000000000..d3349ff3addc0aa6d570accacdbf844a705b0302
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,79 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  globals: {
+    $: "readonly",
+    $$: "readonly",
+    $ref: "readonly",
+    $shallowRef: "readonly",
+    $computed: "readonly",
+    Fn: "readonly",
+    PromiseFn: "readonly",
+    RefType: "readonly",
+    LabelValueOptions: "readonly",
+    EmitType: "readonly",
+    TargetContext: "readonly",
+    ComponentElRef: "readonly",
+    ComponentRef: "readonly",
+    ElRef: "readonly",
+    global: "readonly",
+    ForDataType: "readonly",
+    ComponentRoutes: "readonly",
+    defineProps: "readonly",
+    defineEmits: "readonly",
+    defineExpose: "readonly",
+    withDefaults: "readonly"
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/eslint-config-typescript"
+  ],
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: 2020,
+    sourceType: "module",
+    jsxPragma: "React",
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: {
+    "vue/no-v-html": "off",
+    "vue/require-default-prop": "off",
+    "vue/require-explicit-emits": "off",
+    "vue/multi-word-component-names": "off",
+    "@typescript-eslint/no-explicit-any": "off", // any
+    "no-debugger": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off", // setup()
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_"
+      }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_"
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto"
+      }
+    ]
+  }
+};
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..d9c8235783c3800f0b17a57b5f4b5e8af4f27c32
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "singleQuote": false,
+  "arrowParens": "avoid",
+  "trailingComma": "none"
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..a9f95e579f0c81e2c9fe9269237d33bef780c1f2
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,203 @@
+Eclipse Public License - v 1.0
+
+THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC
+LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM
+CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT.
+
+1. DEFINITIONS
+
+"Contribution" means:
+
+a) in the case of the initial Contributor, the initial code and documentation
+   distributed under this Agreement, and
+b) in the case of each subsequent Contributor:
+    i) changes to the Program, and
+   ii) additions to the Program;
+
+   where such changes and/or additions to the Program originate from and are
+   distributed by that particular Contributor. A Contribution 'originates'
+   from a Contributor if it was added to the Program by such Contributor
+   itself or anyone acting on such Contributor's behalf. Contributions do not
+   include additions to the Program which: (i) are separate modules of
+   software distributed in conjunction with the Program under their own
+   license agreement, and (ii) are not derivative works of the Program.
+
+"Contributor" means any person or entity that distributes the Program.
+
+"Licensed Patents" mean patent claims licensable by a Contributor which are
+necessarily infringed by the use or sale of its Contribution alone or when
+combined with the Program.
+
+"Program" means the Contributions distributed in accordance with this
+Agreement.
+
+"Recipient" means anyone who receives the Program under this Agreement,
+including all Contributors.
+
+2. GRANT OF RIGHTS
+  a) Subject to the terms of this Agreement, each Contributor hereby grants
+     Recipient a non-exclusive, worldwide, royalty-free copyright license to
+     reproduce, prepare derivative works of, publicly display, publicly
+     perform, distribute and sublicense the Contribution of such Contributor,
+     if any, and such derivative works, in source code and object code form.
+  b) Subject to the terms of this Agreement, each Contributor hereby grants
+     Recipient a non-exclusive, worldwide, royalty-free patent license under
+     Licensed Patents to make, use, sell, offer to sell, import and otherwise
+     transfer the Contribution of such Contributor, if any, in source code and
+     object code form. This patent license shall apply to the combination of
+     the Contribution and the Program if, at the time the Contribution is
+     added by the Contributor, such addition of the Contribution causes such
+     combination to be covered by the Licensed Patents. The patent license
+     shall not apply to any other combinations which include the Contribution.
+     No hardware per se is licensed hereunder.
+  c) Recipient understands that although each Contributor grants the licenses
+     to its Contributions set forth herein, no assurances are provided by any
+     Contributor that the Program does not infringe the patent or other
+     intellectual property rights of any other entity. Each Contributor
+     disclaims any liability to Recipient for claims brought by any other
+     entity based on infringement of intellectual property rights or
+     otherwise. As a condition to exercising the rights and licenses granted
+     hereunder, each Recipient hereby assumes sole responsibility to secure
+     any other intellectual property rights needed, if any. For example, if a
+     third party patent license is required to allow Recipient to distribute
+     the Program, it is Recipient's responsibility to acquire that license
+     before distributing the Program.
+  d) Each Contributor represents that to its knowledge it has sufficient
+     copyright rights in its Contribution, if any, to grant the copyright
+     license set forth in this Agreement.
+
+3. REQUIREMENTS
+
+A Contributor may choose to distribute the Program in object code form under
+its own license agreement, provided that:
+
+  a) it complies with the terms and conditions of this Agreement; and
+  b) its license agreement:
+      i) effectively disclaims on behalf of all Contributors all warranties
+         and conditions, express and implied, including warranties or
+         conditions of title and non-infringement, and implied warranties or
+         conditions of merchantability and fitness for a particular purpose;
+     ii) effectively excludes on behalf of all Contributors all liability for
+         damages, including direct, indirect, special, incidental and
+         consequential damages, such as lost profits;
+    iii) states that any provisions which differ from this Agreement are
+         offered by that Contributor alone and not by any other party; and
+     iv) states that source code for the Program is available from such
+         Contributor, and informs licensees how to obtain it in a reasonable
+         manner on or through a medium customarily used for software exchange.
+
+When the Program is made available in source code form:
+
+  a) it must be made available under this Agreement; and
+  b) a copy of this Agreement must be included with each copy of the Program.
+     Contributors may not remove or alter any copyright notices contained
+     within the Program.
+
+Each Contributor must identify itself as the originator of its Contribution,
+if
+any, in a manner that reasonably allows subsequent Recipients to identify the
+originator of the Contribution.
+
+4. COMMERCIAL DISTRIBUTION
+
+Commercial distributors of software may accept certain responsibilities with
+respect to end users, business partners and the like. While this license is
+intended to facilitate the commercial use of the Program, the Contributor who
+includes the Program in a commercial product offering should do so in a manner
+which does not create potential liability for other Contributors. Therefore,
+if a Contributor includes the Program in a commercial product offering, such
+Contributor ("Commercial Contributor") hereby agrees to defend and indemnify
+every other Contributor ("Indemnified Contributor") against any losses,
+damages and costs (collectively "Losses") arising from claims, lawsuits and
+other legal actions brought by a third party against the Indemnified
+Contributor to the extent caused by the acts or omissions of such Commercial
+Contributor in connection with its distribution of the Program in a commercial
+product offering. The obligations in this section do not apply to any claims
+or Losses relating to any actual or alleged intellectual property
+infringement. In order to qualify, an Indemnified Contributor must:
+a) promptly notify the Commercial Contributor in writing of such claim, and
+b) allow the Commercial Contributor to control, and cooperate with the
+Commercial Contributor in, the defense and any related settlement
+negotiations. The Indemnified Contributor may participate in any such claim at
+its own expense.
+
+For example, a Contributor might include the Program in a commercial product
+offering, Product X. That Contributor is then a Commercial Contributor. If
+that Commercial Contributor then makes performance claims, or offers
+warranties related to Product X, those performance claims and warranties are
+such Commercial Contributor's responsibility alone. Under this section, the
+Commercial Contributor would have to defend claims against the other
+Contributors related to those performance claims and warranties, and if a
+court requires any other Contributor to pay any damages as a result, the
+Commercial Contributor must pay those damages.
+
+5. NO WARRANTY
+
+EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON AN
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR
+IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE,
+NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Each
+Recipient is solely responsible for determining the appropriateness of using
+and distributing the Program and assumes all risks associated with its
+exercise of rights under this Agreement , including but not limited to the
+risks and costs of program errors, compliance with applicable laws, damage to
+or loss of data, programs or equipment, and unavailability or interruption of
+operations.
+
+6. DISCLAIMER OF LIABILITY
+
+EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY
+CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION
+LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE
+EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY
+OF SUCH DAMAGES.
+
+7. GENERAL
+
+If any provision of this Agreement is invalid or unenforceable under
+applicable law, it shall not affect the validity or enforceability of the
+remainder of the terms of this Agreement, and without further action by the
+parties hereto, such provision shall be reformed to the minimum extent
+necessary to make such provision valid and enforceable.
+
+If Recipient institutes patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Program itself
+(excluding combinations of the Program with other software or hardware)
+infringes such Recipient's patent(s), then such Recipient's rights granted
+under Section 2(b) shall terminate as of the date such litigation is filed.
+
+All Recipient's rights under this Agreement shall terminate if it fails to
+comply with any of the material terms or conditions of this Agreement and does
+not cure such failure in a reasonable period of time after becoming aware of
+such noncompliance. If all Recipient's rights under this Agreement terminate,
+Recipient agrees to cease use and distribution of the Program as soon as
+reasonably practicable. However, Recipient's obligations under this Agreement
+and any licenses granted by Recipient relating to the Program shall continue
+and survive.
+
+Everyone is permitted to copy and distribute copies of this Agreement, but in
+order to avoid inconsistency the Agreement is copyrighted and may only be
+modified in the following manner. The Agreement Steward reserves the right to
+publish new versions (including revisions) of this Agreement from time to
+time. No one other than the Agreement Steward has the right to modify this
+Agreement. The Eclipse Foundation is the initial Agreement Steward. The
+Eclipse Foundation may assign the responsibility to serve as the Agreement
+Steward to a suitable separate entity. Each new version of the Agreement will
+be given a distinguishing version number. The Program (including
+Contributions) may always be distributed subject to the version of the
+Agreement under which it was received. In addition, after a new version of the
+Agreement is published, Contributor may elect to distribute the Program
+(including its Contributions) under the new version. Except as expressly
+stated in Sections 2(a) and 2(b) above, Recipient receives no rights or
+licenses to the intellectual property of any Contributor under this Agreement,
+whether expressly, by implication, estoppel or otherwise. All rights in the
+Program not expressly granted under this Agreement are reserved.
+
+This Agreement is governed by the laws of the State of New York and the
+intellectual property laws of the United States of America. No party to this
+Agreement will bring a legal action under this Agreement more than one year
+after the cause of action arose. Each party waives its rights to a jury trial in
+any resulting litigation.
diff --git a/README.md b/README.md
index ca3a6fbc0983c3b8be02e0100a92a03b7b9d5089..627041c9df7ed0884b4b9f73156c8618b59d63b4 100644
--- a/README.md
+++ b/README.md
@@ -1,39 +1,21 @@
 # vue3+ts+vite+admin
 
 #### 介绍
-{**以下是 Gitee 平台说明，您可以替换此简介**
-Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
-无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
+本项目前端用来实践和学习Vue3、Vite、qiankun等技术栈，帮助你快速搭建后台管理系统。可拆分为1个主应用项目、2个微前端应用、1个iframe应用。
 
-#### 软件架构
-软件架构说明
+#### 项目预览
+https://www.xkxk.tech
 
+#### 软件架构
+Vue3、TypeScript、Vite、qiankun
 
 #### 安装教程
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
+npm install
 
 #### 使用说明
+npm run dev
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 参与贡献
-
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
-
+#### 最后
+如果你觉得本项目不错或者对自己工作有帮助，欢迎点个star！
 
-#### 特技
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
diff --git a/package.json b/package.json
index 9d3f48eed69cb22366eed4ea371ce81b4e69ec32..433d7b2f2702fdb0a19dfd9955b16567d8b68ce8 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit --skipLibCheck && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.4",
@@ -25,7 +26,14 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.25",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "eslint": "^8.16.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^9.0.1",
+    "prettier": "^2.6.2",
     "sass": "^1.50.0",
     "sass-loader": "^8.0.2",
     "typescript": "^4.5.4",
diff --git a/src/assets/png/logo.png b/src/assets/png/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5980873355b115d945ace8c7d25166105a89677
Binary files /dev/null and b/src/assets/png/logo.png differ
diff --git a/src/components/navbar/navbar.vue b/src/components/navbar/navbar.vue
index 311505cc4118b24d26405e046996601246ddf458..9bcdd73a5bff690327323ab7db97bafdd4dad8f9 100644
--- a/src/components/navbar/navbar.vue
+++ b/src/components/navbar/navbar.vue
@@ -27,7 +27,7 @@
         <div class="user-section">
           <el-dropdown @command="handleCommand">
             <img class="header-img"
-              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-a8a6c2a721e25040f94cefb6facb4741_hd.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653315444&t=8053495416847e53c140620a973eabc4"
+              src="../../assets/png/logo.png"
               alt="" />
             <span class="username">{{$t("nickName")}}</span>
             <el-icon>
diff --git a/src/micro-app.ts b/src/micro-app.ts
index 86ca2fadb5d9b4599e5a3403516a9a61144720bf..04afaf7f86d2b2710f88a677ba2323f1895fcaca 100644
--- a/src/micro-app.ts
+++ b/src/micro-app.ts
@@ -2,11 +2,11 @@ const microApps = [
   {
     name: 'micro1',
     entry: import.meta.env.VITE_APP_MICRO_ONE as string,
-    activeRule: '/micro/app-one'
+    activeRule: '/main/micro/app-one'
   }, {
     name: 'micro2',
     entry: import.meta.env.VITE_APP_MICRO_TWO as string,
-    activeRule: '/micro/app-two'
+    activeRule: '/main/micro/app-two'
   }
 ]
 
diff --git a/src/pages/contact/contact.vue b/src/pages/contact/contact.vue
index 07f70595cd243704ab44b3c520b9e2c572c91ac7..d7dd3d21ad8d51037932f8bdc8fc00079636962f 100644
--- a/src/pages/contact/contact.vue
+++ b/src/pages/contact/contact.vue
@@ -2,11 +2,10 @@
   <div class="contact-container">
     <div class="remark-section">
       <div class="remark-content">
-        <p class="remark-title">说明</p>
-        <p class="reamrk-desc">1、如果你有好的想法或建议，欢迎添加作者微信。</p>
-        <p class="reamrk-desc">2、如果有好的工作推荐，欢迎添加作者微信。</p>
-        <p class="reamrk-desc">3、如果有不懂的地方或者项目配置，欢迎添加作者微信。</p>
-        <p class="reamrk-desc">4、如果通过该项目学到了新的知识或者对工作有帮助，欢迎打赏作者一杯咖啡。</p>
+        <p class="remark-title">关于作者</p>
+        <p class="reamrk-desc">1、如果你有好的想法或建议、好的工作推荐或者不懂的地方，欢迎添加作者微信。</p>
+        <p class="reamrk-desc">2、如果通过该项目学到了新的知识或者对工作有帮助，欢迎打赏作者一杯咖啡。</p>
+        <p class="reamrk-desc">3、如果你对于项目构建、部署遇到难题或疑问，可以联系作者免费答疑。</p>
       </div>
     </div>
     <div class="qrode-content">
diff --git a/src/pages/container/container.vue b/src/pages/container/container.vue
index c82094166247ec55f2e78dbe555d1d38f358941d..66953aae501e85a1e2e9ed28a7a58a55b2f093f6 100644
--- a/src/pages/container/container.vue
+++ b/src/pages/container/container.vue
@@ -16,7 +16,7 @@ export default defineComponent({
   setup() {
     const store = useStore();
     let state = reactive({
-      sidebarMenu: computed(() => store.getters.GET_MENU)
+      sidebarMenu: computed(() => store.getters.getMenu)
     })
     const router = useRouter();
     onMounted(() => {
diff --git a/src/pages/form/form.vue b/src/pages/form/form.vue
index ffc2c34125f8beb104e3fa3457007b61a5097163..93dbaf339fe78fe810a83741039f3ce879e7a89d 100644
--- a/src/pages/form/form.vue
+++ b/src/pages/form/form.vue
@@ -1,128 +1,246 @@
 <template>
   <div class="form-container">
-    <el-radio-group v-model="labelPosition" label="label position">
-      <el-radio-button label="left">左对齐</el-radio-button>
-      <el-radio-button label="right">右对齐</el-radio-button>
-      <el-radio-button label="top">顶部对齐</el-radio-button>
-    </el-radio-group>
-    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"
-      class="demo-ruleForm" :size="formSize" :label-position="labelPosition">
-      <el-form-item label="活动名称" prop="name">
-        <el-input v-model="ruleForm.name"></el-input>
-      </el-form-item>
-      <el-form-item label="活动区域" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="活动时间" required>
-        <el-col :span="11">
-          <el-form-item prop="date1">
-            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
-              style="width: 100%;"></el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col class="text-center" :span="2">
-          <span class="text-gray-500">-</span>
-        </el-col>
-        <el-col :span="11">
-          <el-form-item prop="date2">
-            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">
-            </el-time-picker>
-          </el-form-item>
-        </el-col>
-      </el-form-item>
-      <el-form-item label="即时配送" prop="delivery">
-        <el-switch v-model="ruleForm.delivery"></el-switch>
-      </el-form-item>
-      <el-form-item label="活动性质" prop="type">
-        <el-checkbox-group v-model="ruleForm.type">
-          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
-          <el-checkbox label="地推活动" name="type"></el-checkbox>
-          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
-          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="特殊资源" prop="resource">
-        <el-radio-group v-model="ruleForm.resource">
-          <el-radio label="线上品牌商赞助"></el-radio>
-          <el-radio label="线下场地免费"></el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="活动形式" prop="desc">
-        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm(ruleFormRef)">立即创建</el-button>
-        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <div class="form-content">
+      <el-row>
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">优惠券名称：</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <el-input class="text-input" v-model="form.name" placeholder="请输入优惠券名称" />
+            <span class="desc">优惠券名称不能超过10个字</span>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">优惠券数量：</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <el-input-number v-model="form.num" :min="1" :max="999" @change="numChangeHandler" />
+            <span class="desc">优惠券数量不能超过999</span>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">每人限领数量：</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <el-input-number v-model="form.limit" :min="1" :max="999" @change="limitChangeHandler" />
+            <span class="desc">每人限领数量不能超过优惠券数量</span>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">优惠券类型：</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <el-radio-group v-model="form.type" class="ml-4">
+              <el-radio label="discount" size="large">折扣券</el-radio>
+              <el-radio label="reduce" size="large">满减券</el-radio>
+            </el-radio-group>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row v-if="currentType == 'discount'">
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">优惠券折扣：</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <el-input class="text-input" v-model="form.name" placeholder="请输入折扣" />
+            <span class="desc">优惠券折扣为0.1-9.9之间</span>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row v-if="currentType == 'reduce'">
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">优惠券减免：</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <el-input class="text-input" v-model="form.name" placeholder="请输入减免金额" />
+            <span class="desc">减免金额不能超过原价</span>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">优惠日期时间：</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <el-date-picker v-model="form.duration" type="datetimerange" range-separator="至" start-placeholder="开始日期时间"
+              end-placeholder="截止日期时间" />
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">优惠券说明：</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <el-input type="textarea" class="text-input" v-model="form.remark" placeholder="请输入优惠券说明" />
+            <span class="desc">优惠券说明不能超过100个字</span>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="3">
+          <div class="title-section">
+            <span class="require">*</span>
+            <span class="title">优惠商品</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="content-section">
+            <div class="checkbox-section">
+              <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="productAllSelectChangeHandler">
+                全选
+              </el-checkbox>
+              <el-checkbox-group v-model="form.checkedProducts" @change="productSelectChangeHandler">
+                <el-checkbox v-for="product in productList" :key="product" :label="product">{{
+                    product
+                }}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="btn-section">
+        <el-button type="primary">保存</el-button>
+        <el-button>重置</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { reactive, ref } from "vue";
-import type { FormInstance, FormRules } from "element-plus";
-
-const labelPosition = ref("right");
-const formSize = ref("default");
-const ruleFormRef = ref<FormInstance>();
-const ruleForm = reactive({
-  name: "",
-  region: "",
-  date1: "",
-  date2: "",
-  delivery: false,
-  type: [],
-  resource: "",
-  desc: "",
-});
-
-const rules = reactive<FormRules>({
-  name: [
-    { required: true, message: "请输入活动名称", trigger: "blur" }
-  ],
-  region: [{ required: true, message: "请选择活动区域", trigger: "change" }],
-  date1: [
-    { type: "date", required: true, message: "请选择日期", trigger: "change" },
-  ],
-  date2: [
-    { type: "date", required: true, message: "请选择时间", trigger: "change" },
-  ],
-  type: [
-    { type: "array", required: true, message: "请至少选择一个活动性质", trigger: "change" },
-  ],
-  resource: [{ required: true, message: "请选择活动资源", trigger: "change" }],
-  desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
-});
-
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log("submit!");
-    } else {
-      console.log("error submit!", fields);
-    }
-  });
-};
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+
+const form = reactive({
+  name: '',
+  num: 1,
+  limit: 1,
+  type: 'discount',
+  duration: [],
+  remark: '',
+  checkedProducts: ['Vivo', 'ThinkPad']
+})
+
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const productList = ['华为Mate50 pro', '苹果13', 'Mac pro', 'Vivo', 'OPPO', 'ThinkPad', 'Mini', 'Haval']
 
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-};
+const productAllSelectChangeHandler = (val: boolean) => {
+  form.checkedProducts = val ? productList : []
+  isIndeterminate.value = false
+}
+const productSelectChangeHandler = (value: string[]) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === productList.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < productList.length
+}
+const currentType = ref('discount');
+
+const numChangeHandler = (value: number) => {
+}
+
+const limitChangeHandler = (value: number) => {
+}
+
+watch(() => form.type,
+  (newvalue, oldvalue) => {
+    console.log(newvalue);
+    currentType.value = newvalue;
+  }, {
+  deep: true
+}
+);
 </script>
 
 <style lang="scss">
 .form-container {
   height: 100%;
-  .demo-ruleForm{
-    width: 50%;
+  padding-left: 5%;
+
+  .form-content {
     margin-top: 20px;
-    box-sizing: border-box;
-    .text-center{
-      text-align: center;
+
+    .el-row {
+      margin-top: 20px;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    .title-section {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      height: 100%;
+      line-height: 100%;
+
+      .require {
+        color: red;
+        margin-right: 5px;
+      }
+
+      .title {
+        font-size: 15px;
+        font-weight: 550;
+      }
+    }
+
+    .content-section {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      .text-input {
+        width: 250px;
+      }
+
+      .desc {
+        font-size: 13px;
+        color: gray;
+        margin-left: 10px;
+      }
+    }
+
+    .btn-section {
+      margin-top: 40px;
     }
   }
 }
diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index 0adfbaee43f66775c225c56572e45edb7e9c6b5c..edc7282bb69745ec584b87bf24df277891b85272 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -1,9 +1,22 @@
 <template>
-  <div class="home-container">部署测试</div>
+  <div class="home-container">
+    <div class="remark-section">
+      <div class="remark-content">
+        <p class="remark-title">项目说明</p>
+        <p class="reamrk-desc">1、本项目分为1个主项目、2个微前端项目和1个iframe项目，共4个项目。</p>
+        <p class="reamrk-desc">2、本项目前端用来实践和学习Vue3、Vite、qiankun等技术栈。</p>
+        <p class="reamrk-desc">3、本项目的CI/CD采用Jenkins结合Gitee。</p>
+        <p class="reamrk-desc">4、本项目的服务端采用Windows Server 2012、宝塔面板结合Nginx。</p>
+        <p class="reamrk-desc">5、本项目Gitee下载地址：<a target="_blank" href="https://gitee.com/xiaoxiang_reincarnation/vue3-ts-vite-admin">主应用</a>、<a target="_blank" href="https://gitee.com/xiaoxiang_reincarnation/vue3-ts-vite-admin-micro1">微前端应用1</a>、<a target="_blank" href="https://gitee.com/xiaoxiang_reincarnation/vue3-ts-vite-admin-micro2">微前端应用2</a>、<a target="_blank" href="https://gitee.com/xiaoxiang_reincarnation/vue3-ts-vite-admin-iframe">iframe项目</a></p>
+        <p class="reamrk-desc">6、本项目Github下载地址：<a target="_blank" href="https://github.com/dddggg123/vue3-ts-vite-admin">主应用</a>、<a target="_blank" href="https://github.com/dddggg123/vue3-ts-vite-admin-micro1">微前端应用1</a>、<a target="_blank" href="https://github.com/dddggg123/vue3-ts-vite-admin-micro2">微前端应用2</a>、<a target="_blank" href="https://github.com/dddggg123/vue3-ts-vite-admin-iframe">iframe项目</a></p>
+        <p class="reamrk-desc">7、如果你觉得本项目不错或者对自己工作有帮助，欢迎点个star！</p>
+     </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, onMounted, ref} from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 export default defineComponent({
   setup() {
     let count = ref(0);
@@ -28,5 +41,24 @@ export default defineComponent({
 <style lang="scss">
 .home-container {
   width: 100%;
+
+  .remark-section {
+    margin-top: 20px;
+    padding: 0 5%;
+
+    .remark-content {
+      text-align: left;
+
+      .remark-title {
+        font-size: 25px;
+        font-weight: 600;
+      }
+
+      .remark-desc {
+        font-size: 22px;
+        font-weight: 500;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/iframe/iframe.vue b/src/pages/iframe/iframe.vue
index 684f89f9fa8e75b40b24cf54fdef9130824b89f0..7213b62c36d14397eaf3b27e9739c324f8497ded 100644
--- a/src/pages/iframe/iframe.vue
+++ b/src/pages/iframe/iframe.vue
@@ -1,53 +1,96 @@
 <template>
   <div class="iframe-container">
-    <iframe id="iframeApp" ref="iframeApp" class="iframe-section" :src="iframeSrc"  frameborder="0"></iframe>
-    <div class="btn-section">
-      <p>这里是操作界面</p>
-      <el-input v-model="msg" class="w-50 m-2" :placeholder="$t('请输入普通账号')"/>
-      <el-button type="primary" @click="postMsgHandler" class="post-btn">向iframe传值</el-button>
+    <div class="remark-section">
+      <div class="remark-content">
+        <p class="remark-title">使用说明</p>
+        <p class="reamrk-desc">1、父应用中引入iframe组件；</p>
+        <p class="reamrk-desc">2、父应用向iframe传值：iframe的引用.value.contentWindow.postMessage(值, 地址)；</p>
+        <p class="reamrk-desc">3、iframe向父应用传值：window.parent.postMessage(值, 地址)；</p>
+        <p class="reamrk-desc">4、本地开发调试地址使用*；</p>
+      </div>
+    </div>
+    <div class="iframe-content">
+      <iframe id="iframeApp" ref="iframeApp" class="iframe-section" :src="iframeSrc" frameborder="0"></iframe>
+      <div class="btn-section">
+        <p>这里是父应用</p>
+        <p>iframe传递的信息:{{ param }}</p>
+        <el-input width="150px;" v-model="msg" class="w-50 m-2" placeholder="输入传递信息" />
+        <el-button type="primary" @click="postMsgHandler" class="post-btn">向iframe传值</el-button>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted} from 'vue'
-// 'http://localhost:7000/'
-const iframeSrc = ref('http://www.xkxk.tech/micro/iframe');
-// const iframeSrc = ref('http://localhost:7000/');
+import { ref, onMounted } from 'vue'
+
+// 生产环境域名地址
+const iframeSrc = 'https://www.xkxk.tech/micro/iframe';
+
+// 本地调试域名地址
+// const iframeSrc = 'http://localhost:7000/';
 const msg = ref('');
 const iframeApp: any = ref(null);
-// const $iframeApp: any = ref<InstanceType<typeof iframeApp>>();
+const param = ref('');
 
 const postMsgHandler = () => {
+  // 本地调试
   // iframeApp.value.contentWindow.postMessage(msg.value, '*');
+  // 生产环境
   iframeApp.value.contentWindow.postMessage(msg.value, iframeSrc);
 }
-onMounted (() => {
+onMounted(() => {
+  window.addEventListener('message', (event) => {
+    param.value = '';
+    param.value = event.data;
+  })
 })
 </script>
 
 <style lang="scss">
 .iframe-container {
   height: 100%;
-  padding: 0 5%;
-  display: flex;
-  
-  .iframe-section {
-    width: 400px;
-    height: 600px;
-    margin-top: 50px;
-    background-color: #f4f4f4;
+
+  .remark-section {
+    margin-top: 20px;
+    padding: 0 5%;
+
+    .remark-content {
+      text-align: left;
+
+      .remark-title {
+        font-size: 25px;
+        font-weight: 600;
+      }
+
+      .remark-desc {
+        font-size: 22px;
+        font-weight: 500;
+      }
+    }
   }
 
-  .btn-section {
-    width: 400px;
-    height: 600px;
-    margin-top: 50px;
-    margin-left: 20px;
-    background-color: #f4f4f4;
+  .iframe-content {
+    display: flex;
+    padding-left: 5%;
+
+    .iframe-section {
+      width: 400px;
+      height: 300px;
+      margin-top: 50px;
+      background-color: #f4f4f4;
+    }
+
+    .btn-section {
+      width: 400px;
+      height: 300px;
+      margin-top: 50px;
+      margin-left: 20px;
+      background-color: #f4f4f4;
 
-    .post-btn {
-      margin-top: 20px;
+      .post-btn {
+        margin-top: 20px;
+      }
     }
   }
 }
diff --git a/src/pages/login/login.vue b/src/pages/login/login.vue
index 0bfb519b3e386af5aefbec25aa951c065534730b..20ef1efb083490b4676f97a3eb615a9357849ef6 100644
--- a/src/pages/login/login.vue
+++ b/src/pages/login/login.vue
@@ -6,75 +6,129 @@
     <div class="login-section">
       <el-tabs v-model="currentTab" class="demo-tabs" @tab-click="tabChangeHandler">
         <el-tab-pane :label="$t('普通账号登录')" name="account">
-          <div class="account-section">
-            <div class="input-section">
-              <el-input v-model="account" class="w-50 m-2" :placeholder="$t('请输入普通账号')">
-                <template #prefix>
-                  <el-icon>
-                    <user />
-                  </el-icon>
-                </template>
-              </el-input>
-              <el-input style="margin-top: 20px;" v-model="password" class="w-50 m-2" :placeholder="$t('请输入密码')">
-                <template #prefix>
-                  <el-icon>
-                    <connection />
-                  </el-icon>
-                </template>
-              </el-input>
+          <el-form ref="ruleFormRef1" :model="form1" :rules="rule1">
+            <div class="account-section">
+              <div class="input-section">
+                <el-form-item prop="account1">
+                  <el-input v-model="form1.account1" class="w-50 m-2" :placeholder="$t('请输入普通账号')">
+                    <template #prefix>
+                      <el-icon>
+                        <user />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="password1">
+                  <el-input type="password" style="margin-top: 20px;" v-model="form1.password1" class="w-50 m-2"
+                    :placeholder="$t('请输入密码')">
+                    <template #prefix>
+                      <el-icon>
+                        <connection />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+              </div>
+              <div @click="loginHandler('user', ruleFormRef1)" class="login-btn">{{ $t('登录') }}</div>
             </div>
-            <div @click="loginHandler('user')" class="login-btn">{{$t('登录')}}</div>
-          </div>
+          </el-form>
         </el-tab-pane>
         <el-tab-pane :label="$t('管理员账号登录')" name="qrcode">
-          <div class="account-section">
-            <div class="input-section">
-              <el-input v-model="account" class="w-50 m-2" :placeholder="$t('请输入管理员账号')">
-                <template #prefix>
-                  <el-icon>
-                    <user />
-                  </el-icon>
-                </template>
-              </el-input>
-              <el-input style="margin-top: 20px;" v-model="password" class="w-50 m-2" :placeholder="$t('请输入密码')">
-                <template #prefix>
-                  <el-icon>
-                    <connection />
-                  </el-icon>
-                </template>
-              </el-input>
+          <el-form ref="ruleFormRef2" :model="form2" :rules="rule2">
+            <div class="account-section">
+              <div class="input-section">
+                <el-form-item prop="account2">
+                  <el-input v-model="form2.account2" class="w-50 m-2" :placeholder="$t('请输入管理员账号')">
+                    <template #prefix>
+                      <el-icon>
+                        <user />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="password2">
+                  <el-input type="password" style="margin-top: 20px;" v-model="form2.password2" class="w-50 m-2"
+                    :placeholder="$t('请输入密码')">
+                    <template #prefix>
+                      <el-icon>
+                        <connection />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+              </div>
+              <div @click="loginHandler('adminer', ruleFormRef2)" class="login-btn">{{ $t('登录') }}</div>
             </div>
-            <div @click="loginHandler('adminer')" class="login-btn">{{$t('登录')}}</div>
-          </div>
+          </el-form>
         </el-tab-pane>
       </el-tabs>
       <div class="footer-section">
-        <span class="version">{{$t('版本号')}}：1.0.22052401</span>
+        <span class="version">{{ $t('版本号') }}：1.0.22053101</span>
       </div>
     </div>
+    <div class="record-section">
+      <span class="record">鄂ICP备2022008464号-1</span>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, Ref } from 'vue';
+import { defineComponent, ref, Ref, reactive } from 'vue';
 import type { TabsPaneContext } from 'element-plus';
 import { useRouter } from 'vue-router';
+import type { FormInstance } from 'element-plus'
 
 export default defineComponent({
   setup() {
+    const ruleFormRef1 = ref<FormInstance>()
+    const ruleFormRef2 = ref<FormInstance>()
+    const accountRule = (rule: any, value: any, callback: any) => {
+      if (value === '') {
+        callback(new Error('账号不能为空，可以随意填'))
+      } else {
+        callback();
+      }
+    }
+    const passwordRule = (rule: any, value: any, callback: any) => {
+      if (value === '') {
+        callback(new Error('密码不能为空，可以随意填'))
+      } else {
+        callback();
+      }
+    }
+    const form1 = reactive({
+      account1: 'user',
+      password1: '12345678'
+    })
+    const rule1 = reactive({
+      account1: [{ validator: accountRule, trigger: 'blur', require: true }],
+      password1: [{ validator: passwordRule, trigger: 'blur', require: true }]
+    })
+    const form2 = reactive({
+      account2: 'admin',
+      password2: '12345678'
+    })
+    const rule2 = reactive({
+      account2: [{ validator: accountRule, trigger: 'blur', require: true }],
+      password2: [{ validator: passwordRule, trigger: 'blur', require: true }]
+    })
+    
     const currentTab = ref('account');
     const tabChangeHandler = (tab: TabsPaneContext, event: Event) => {
       console.log(tab, event);
     }
     const router = useRouter();
-    const loginHandler = (type: string) => {
-      // console.log('账号:' + account.value);
-      // console.log('密码:' + password.value);
-      window.localStorage.setItem('permission', type);
-      window.localStorage.setItem('token', 'vue3-ts-vite-admin');
-      setTimeout(() => {
-        router.push('/');
-      }, 500);
+    const loginHandler = (type: string, form: FormInstance | undefined) => {
+      if (!form) return;
+      form.validate((valid) => {
+        if (valid) {
+          window.localStorage.setItem('permission', type);
+          window.localStorage.setItem('token', 'vue3-ts-vite-admin');
+          setTimeout(() => {
+            router.push('/home');
+          }, 500);
+        } else { }
+      })
     }
     const account: Ref<String> = ref('');
     const password: Ref<String> = ref('');
@@ -84,7 +138,13 @@ export default defineComponent({
       tabChangeHandler,
       loginHandler,
       account,
-      password
+      password,
+      form1,
+      form2,
+      rule1,
+      rule2,
+      ruleFormRef1,
+      ruleFormRef2
     }
   }
 })
@@ -92,19 +152,33 @@ export default defineComponent({
 
 <style lang="scss">
 .login-container {
-  flex: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  text-align: center;
   position: relative;
   height: 100%;
   width: 100%;
   overflow: hidden;
   background-image: linear-gradient(calc(160deg), rgba(163, 163, 163, 0.09) 0%, rgba(163, 163, 163, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 99%), linear-gradient(calc(366deg), rgba(193, 193, 193, 0.06) 0%, rgba(193, 193, 193, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 99%), linear-gradient(calc(237deg), rgba(45, 45, 45, 0.03) 0%, rgba(45, 45, 45, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 99%), linear-gradient(calc(388deg), rgba(226, 226, 226, 0.06) 0%, rgba(226, 226, 226, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 99%), linear-gradient(calc(193deg), rgba(225, 225, 225, 0.04) 0%, rgba(225, 225, 225, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 99%), linear-gradient(calc(236deg), rgba(184, 184, 184, 0.06) 0%, rgba(184, 184, 184, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 99.9%), linear-gradient(calc(431deg), rgba(40, 40, 40, 0.07) 0%, rgba(40, 40, 40, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 99.9%), linear-gradient(calc(169deg), rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 0) 33.3%, rgba(241, 241, 241, 0) 33.3%, rgba(241, 241, 241, 0) 66.6%, rgba(55, 55, 55, 0) 66.6%, rgba(55, 55, 55, 0) 99%), linear-gradient(calc(108deg), rgb(38, 38, 227), rgb(11, 186, 239));
 
+  .record-section {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 0;
+
+    .record {
+      color: #fff;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      font-size: 12px;
+    }
+  }
   .title-section {
-    margin-top: -50px;
+    margin-top: 150px;
 
     .title {
       color: #fff;
@@ -125,9 +199,10 @@ export default defineComponent({
 
   .login-section {
     width: 500px;
-    height: 300px;
+    padding-bottom: 20px;
     background-color: #fff;
     border-radius: 20px;
+    margin: 0 auto;
     margin-top: 10px;
 
     .login-btn {
diff --git a/src/pages/micro/micro-app-one.vue b/src/pages/micro/micro-app-one.vue
index 1e84a6d5ea4f3726b7aa8d50b77f3e30a049ab31..350357f35107c15dde1701bd3609f17ce87361ba 100644
--- a/src/pages/micro/micro-app-one.vue
+++ b/src/pages/micro/micro-app-one.vue
@@ -1,11 +1,22 @@
 <template>
   <div class="micro-one-container">
-    <div id="micro-content"></div>
-    <div class="main-content">
-      <h1>主应用操作界面</h1>
-      <!-- <el-button class="btn" @click="mainBtnHandler" type="primary">主应用控制子应用跳转</el-button> -->
-      <el-button class="btn" @click="mainBtnHandlerWithParam1" type="primary">主应用控制子应用跳转并传参: Hello 采用localStorage</el-button>
-      <el-button class="btn" @click="mainBtnHandlerWithParam2" type="primary">主应用控制子应用跳转并传参: World! 采用sessionStorage</el-button>
+    <div class="remark-section">
+      <div class="remark-content">
+        <p class="remark-title">使用说明</p>
+        <p class="reamrk-desc">1、微应用可以单独开发、单独部署、单独运行。<a target="_blank" href="http://www.xkxk.tech/micro/app-one#/">子应用1</a><a target="_blank" href="http://www.xkxk.tech/micro/app-two#/">子应用2</a></p>
+        <p class="reamrk-desc">2、本项目微前端框架采用的是qiankun。<a target="_blank" href="https://qiankun.umijs.org/zh/guide">相关文档</a></p>
+      </div>
+    </div>
+    <div class="micro-one-content">
+      <div id="micro-content"></div>
+      <div class="main-content">
+        <h1>主应用操作界面</h1>
+        <!-- <el-button class="btn" @click="mainBtnHandler" type="primary">主应用控制子应用跳转</el-button> -->
+        <el-button class="btn" @click="mainBtnHandlerWithParam1" type="primary">主应用控制子应用跳转并传参: Hello 采用localStorage
+        </el-button>
+        <el-button class="btn" @click="mainBtnHandlerWithParam2" type="primary">主应用控制子应用跳转并传参: World! 采用sessionStorage
+        </el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -17,11 +28,11 @@ import { onMounted } from 'vue';
 const router = useRouter()
 onMounted(() => {
 })
-function mainBtnHandler () {
+function mainBtnHandler() {
   // window.history.pushState({}, '', '/micro/app-one#/about')
   router.push('/micro/app-one#/about');
 }
-function mainBtnHandlerWithParam1 () {
+function mainBtnHandlerWithParam1() {
   // window.history.pushState({
   //   msg: 'hello'
   // }, '', '/micro/app-one#/about')
@@ -29,47 +40,70 @@ function mainBtnHandlerWithParam1 () {
   localStorage.setItem('msg', 'Hello');
   router.push('/micro/app-one#/about');
 }
-function mainBtnHandlerWithParam2 () {
+function mainBtnHandlerWithParam2() {
   // window.history.pushState({
   //   msg: 'hello'
   // }, '', '/micro/app-one#/about')
   // router.push({path: '/micro/app-one#/about', query: {msg: 'hello'}});
   sessionStorage.setItem('desc', 'World!');
   router.push('/micro/app-one#/about');
-  
+
 }
 </script>
 
 <style lang="scss">
 .micro-one-container {
-  padding: 0 5%;
-  display: flex;
-  padding-top: 40px;
+  height: 100%;
 
-  #micro-content {
-    width: 500px;
-    height: 600px;
+  .remark-section {
+    margin-top: 20px;
+    padding: 0 5%;
 
-    #__qiankun_microapp_wrapper_for_micro_1__ {
-      width: 500px;
-      height: 600px;
-      background-color: #f0f0f0;
+    .remark-content {
+      text-align: left;
+
+      .remark-title {
+        font-size: 25px;
+        font-weight: 600;
+      }
+
+      .remark-desc {
+        font-size: 22px;
+        font-weight: 500;
+      }
     }
   }
 
-  .main-content {
-    width: 480px;
-    height: 600px;
-    background-color: #a4a4a4;
-    margin-left: 20px;
-    padding-left: 20px;
-    
-    .btn {
-      padding: 0 10px;
-      height: 40px;
-      border-radius: 10px;
-      margin-top: 20px;
-      margin-left: 0;
+  .micro-one-content {
+    display: flex;
+    margin-top: 20px;
+    padding-left: 5%;
+
+    #micro-content {
+      width: 500px;
+      height: 300px;
+
+      #__qiankun_microapp_wrapper_for_micro_1__ {
+        width: 500px;
+        height: 300px;
+        background-color: #f0f0f0;
+      }
+    }
+
+    .main-content {
+      width: 480px;
+      height: 300px;
+      background-color: #a4a4a4;
+      margin-left: 20px;
+      padding-left: 20px;
+
+      .btn {
+        padding: 0 10px;
+        height: 40px;
+        border-radius: 10px;
+        margin-top: 20px;
+        margin-left: 0;
+      }
     }
   }
 }
diff --git a/src/pages/screen/screen.vue b/src/pages/screen/screen.vue
index 2377f93a9160778598a33edeebbf1e5384fb73ed..e5d775dd63dd5776351616244bbb012ed133336a 100644
--- a/src/pages/screen/screen.vue
+++ b/src/pages/screen/screen.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="other-container">
-    <div ref="line" class="screen-item"></div>
-    <div ref="pie" class="screen-item"></div>
-    <div ref="heatmap" class="screen-item"></div>
     <div ref="radar" class="screen-item"></div>
-    <div ref="funnel" class="screen-item"></div>
     <div ref="gauge" class="screen-item"></div>
+    <div ref="pie" class="screen-item"></div>
+    <div ref="funnel" class="screen-item"></div>
+    <div ref="heatmap" class="screen-item"></div>
+    <div ref="line" class="screen-item"></div>
   </div>
 </template>
 
@@ -34,28 +34,100 @@ function initGaugeChart() {
   let myChart = echarts.init(gauge.value);
   // 指定图表的配置项和数据
   let option = {
+    title: {
+      text: 'Area'
+    },
     tooltip: {
-    formatter: '{a} <br/>{b} : {c}%'
-  },
-  series: [
-    {
-      name: 'Pressure',
-      type: 'gauge',
-      progress: {
-        show: true
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [120, 132, 101, 134, 90, 230, 210]
       },
-      detail: {
-        valueAnimation: true,
-        formatter: '{value}'
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [220, 182, 191, 234, 290, 330, 310]
       },
-      data: [
-        {
-          value: 50,
-          name: 'SCORE'
-        }
-      ]
-    }
-  ]
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [150, 232, 201, 154, 190, 330, 410]
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [320, 332, 301, 334, 390, 330, 320]
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        label: {
+          show: true,
+          position: 'top'
+        },
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [820, 932, 901, 934, 1290, 1330, 1320]
+      }
+    ]
   };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
@@ -65,83 +137,184 @@ function initFunnelChart() {
   let myChart = echarts.init(funnel.value);
   // 指定图表的配置项和数据
   let option = {
+    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
     title: {
-      text: 'Funnel'
+      text: 'Gradient'
     },
     tooltip: {
-      trigger: 'item',
-      formatter: '{a} <br/>{b} : {c}%'
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
     },
     toolbox: {
       feature: {
-        dataView: { readOnly: false },
-        restore: {},
         saveAsImage: {}
       }
     },
-    legend: {
-      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
     },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
     series: [
       {
-        name: 'Expected',
-        type: 'funnel',
-        left: '10%',
-        width: '80%',
-        label: {
-          formatter: '{b}Expected'
+        name: 'Line 1',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(128, 255, 165)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(1, 191, 236)'
+            }
+          ])
         },
-        labelLine: {
-          show: false
+        emphasis: {
+          focus: 'series'
         },
-        itemStyle: {
-          opacity: 0.7
+        data: [140, 232, 101, 264, 90, 340, 250]
+      },
+      {
+        name: 'Line 2',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(0, 221, 255)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(77, 119, 255)'
+            }
+          ])
         },
         emphasis: {
-          label: {
-            position: 'inside',
-            formatter: '{b}Expected: {c}%'
-          }
+          focus: 'series'
         },
-        data: [
-          { value: 60, name: 'Visit' },
-          { value: 40, name: 'Inquiry' },
-          { value: 20, name: 'Order' },
-          { value: 80, name: 'Click' },
-          { value: 100, name: 'Show' }
-        ]
+        data: [120, 282, 111, 234, 220, 340, 310]
       },
       {
-        name: 'Actual',
-        type: 'funnel',
-        left: '10%',
-        width: '80%',
-        maxSize: '80%',
+        name: 'Line 3',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(55, 162, 255)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(116, 21, 219)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [320, 132, 201, 334, 190, 130, 220]
+      },
+      {
+        name: 'Line 4',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(255, 0, 135)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(135, 0, 157)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [220, 402, 231, 134, 190, 230, 120]
+      },
+      {
+        name: 'Line 5',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
         label: {
-          position: 'inside',
-          formatter: '{c}%',
-          color: '#fff'
+          show: true,
+          position: 'top'
         },
-        itemStyle: {
-          opacity: 0.5,
-          borderColor: '#fff',
-          borderWidth: 2
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(255, 191, 0)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(224, 62, 76)'
+            }
+          ])
         },
         emphasis: {
-          label: {
-            position: 'inside',
-            formatter: '{b}Actual: {c}%'
-          }
+          focus: 'series'
         },
-        data: [
-          { value: 30, name: 'Visit' },
-          { value: 10, name: 'Inquiry' },
-          { value: 5, name: 'Order' },
-          { value: 50, name: 'Click' },
-          { value: 80, name: 'Show' }
-        ],
-        // Ensure outer shape will not be over inner shape when hover.
-        z: 100
+        data: [220, 302, 181, 234, 210, 290, 150]
       }
     ]
   };
@@ -153,35 +326,122 @@ function initRadarChart() {
   let myChart = echarts.init(radar.value);
   // 指定图表的配置项和数据
   let option = {
+    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
     title: {
-      text: 'Radar Chart'
-    },
-    legend: {
-      data: ['Allocated Budget', 'Actual Spending']
-    },
-    radar: {
-      // shape: 'circle',
-      indicator: [
-        { name: 'Sales', max: 6500 },
-        { name: 'Administration', max: 16000 },
-        { name: 'Information Technology', max: 30000 },
-        { name: 'Customer Support', max: 38000 },
-        { name: 'Development', max: 52000 },
-        { name: 'Marketing', max: 25000 }
-      ]
+      text: 'Radar'
     },
+    legend: {},
+    radar: [
+      {
+        indicator: [
+          { text: 'Indicator1' },
+          { text: 'Indicator2' },
+          { text: 'Indicator3' },
+          { text: 'Indicator4' },
+          { text: 'Indicator5' }
+        ],
+        center: ['25%', '50%'],
+        radius: 120,
+        startAngle: 90,
+        splitNumber: 4,
+        shape: 'circle',
+        axisName: {
+          formatter: '【{value}】',
+          color: '#428BD4'
+        },
+        splitArea: {
+          areaStyle: {
+            color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
+            shadowColor: 'rgba(0, 0, 0, 0.2)',
+            shadowBlur: 10
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(211, 253, 250, 0.8)'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(211, 253, 250, 0.8)'
+          }
+        }
+      },
+      {
+        indicator: [
+          { text: 'Indicator1', max: 150 },
+          { text: 'Indicator2', max: 150 },
+          { text: 'Indicator3', max: 150 },
+          { text: 'Indicator4', max: 120 },
+          { text: 'Indicator5', max: 108 },
+          { text: 'Indicator6', max: 72 }
+        ],
+        center: ['75%', '50%'],
+        radius: 120,
+        axisName: {
+          color: '#fff',
+          backgroundColor: '#666',
+          borderRadius: 3,
+          padding: [3, 5]
+        }
+      }
+    ],
     series: [
       {
-        name: 'Budget vs spending',
         type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 4
+          }
+        },
+        data: [
+          {
+            value: [100, 8, 0.4, -80, 2000],
+            name: 'Data A'
+          },
+          {
+            value: [60, 5, 0.3, -100, 1500],
+            name: 'Data B',
+            areaStyle: {
+              color: 'rgba(255, 228, 52, 0.6)'
+            }
+          }
+        ]
+      },
+      {
+        type: 'radar',
+        radarIndex: 1,
         data: [
           {
-            value: [4200, 3000, 20000, 35000, 50000, 18000],
-            name: 'Allocated Budget'
+            value: [120, 118, 130, 100, 99, 70],
+            name: 'Data C',
+            symbol: 'rect',
+            symbolSize: 12,
+            lineStyle: {
+              type: 'dashed'
+            },
+            label: {
+              show: true,
+              formatter: function (params: any) {
+                return params.value;
+              }
+            }
           },
           {
-            value: [5000, 14000, 28000, 26000, 42000, 21000],
-            name: 'Actual Spending'
+            value: [100, 93, 50, 90, 70, 60],
+            name: 'Data D',
+            areaStyle: {
+              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
+                {
+                  color: 'rgba(255, 145, 124, 0.1)',
+                  offset: 0
+                },
+                {
+                  color: 'rgba(255, 145, 124, 0.9)',
+                  offset: 1
+                }
+              ])
+            }
           }
         ]
       }
@@ -195,24 +455,48 @@ function initLineChart() {
   let myChart = echarts.init(line.value);
   // 指定图表的配置项和数据
   let option = {
-    title: {
-      text: 'ECharts 入门示例'
-    },
-    tooltip: {},
-    legend: {
-      data: ['销量']
-    },
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+    angleAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
-    yAxis: {},
+    radiusAxis: {},
+    polar: {},
     series: [
       {
-        name: '销量',
         type: 'bar',
-        data: [5, 20, 36, 10, 10, 20]
+        data: [1, 2, 3, 4, 3, 5, 1],
+        coordinateSystem: 'polar',
+        name: 'A',
+        stack: 'a',
+        emphasis: {
+          focus: 'series'
+        }
+      },
+      {
+        type: 'bar',
+        data: [2, 4, 6, 1, 3, 2, 1],
+        coordinateSystem: 'polar',
+        name: 'B',
+        stack: 'a',
+        emphasis: {
+          focus: 'series'
+        }
+      },
+      {
+        type: 'bar',
+        data: [1, 2, 3, 4, 1, 2, 5],
+        coordinateSystem: 'polar',
+        name: 'C',
+        stack: 'a',
+        emphasis: {
+          focus: 'series'
+        }
       }
-    ]
+    ],
+    legend: {
+      show: true,
+      data: ['A', 'B', 'C']
+    }
   };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
@@ -262,64 +546,44 @@ function initPieChart() {
 function initHeatmapChart() {
   // 基于准备好的dom，初始化echarts实例
   let myChart = echarts.init(heatmap.value);
-  const hours = [
-    '12a', '1a', '2a', '3a', '4a', '5a', '6a',
-    '7a', '8a', '9a', '10a', '11a',
-    '12p', '1p', '2p', '3p', '4p', '5p',
-    '6p', '7p', '8p', '9p', '10p', '11p'
-  ];
-  // prettier-ignore
-  const days = [
-    'Saturday', 'Friday', 'Thursday',
-    'Wednesday', 'Tuesday', 'Monday', 'Sunday'
-  ];
-  // prettier-ignore
-  const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]].map(function (item) {
-    return [item[1], item[0], item[2] || '-'];
-  });
   let option = {
-    tooltip: {
-      position: 'top'
-    },
-    grid: {
-      height: '50%',
-      top: '10%'
-    },
-    xAxis: {
-      type: 'category',
-      data: hours,
-      splitArea: {
-        show: true
-      }
-    },
-    yAxis: {
-      type: 'category',
-      data: days,
-      splitArea: {
-        show: true
-      }
+    dataset: {
+      source: [
+        ['score', 'amount', 'product'],
+        [89.3, 58212, 'Matcha Latte'],
+        [57.1, 78254, 'Milk Tea'],
+        [74.4, 41032, 'Cheese Cocoa'],
+        [50.1, 12755, 'Cheese Brownie'],
+        [89.7, 20145, 'Matcha Cocoa'],
+        [68.1, 79146, 'Tea'],
+        [19.6, 91852, 'Orange Juice'],
+        [10.6, 101852, 'Lemon Juice'],
+        [32.7, 20112, 'Walnut Brownie']
+      ]
     },
+    grid: { containLabel: true },
+    xAxis: { name: 'amount' },
+    yAxis: { type: 'category' },
     visualMap: {
-      min: 0,
-      max: 10,
-      calculable: true,
       orient: 'horizontal',
       left: 'center',
-      bottom: '15%'
+      min: 10,
+      max: 100,
+      text: ['High Score', 'Low Score'],
+      // Map the score column to color
+      dimension: 0,
+      inRange: {
+        color: ['#65B581', '#FFCE34', '#FD665F']
+      }
     },
     series: [
       {
-        name: 'Punch Card',
-        type: 'heatmap',
-        data: data,
-        label: {
-          show: true
-        },
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
+        type: 'bar',
+        encode: {
+          // Map the "amount" column to X axis.
+          x: 'amount',
+          // Map the "product" column to Y axis
+          y: 'product'
         }
       }
     ]
diff --git a/src/pages/table/table.vue b/src/pages/table/table.vue
index b4ad354a77126c746ba71832ae4848fa1d1a8017..92df51b6dbe65803be0d994d201ea6d79025b818 100644
--- a/src/pages/table/table.vue
+++ b/src/pages/table/table.vue
@@ -34,7 +34,7 @@
       </el-table-column>
     </el-table>
     <div class="page-row">
-      <el-pagination small background layout="prev, pager, next" :total="15" class="mt-4" />
+      <el-pagination small background layout="prev, pager, next" :total="5" class="mt-4" />
     </div>
   </div>
 </template>
@@ -94,96 +94,6 @@ export default defineComponent({
         isbn: '9787544788984',
         price: '78元',
         page: '583'
-      }, {
-        img: 'https://img9.doubanio.com/view/subject/s/public/s8865866.jpg',
-        title: '平凡的世界',
-        author: '路遥',
-        publish: '北京十月文艺出版社',
-        pubdate: '2012-3-1',
-        isbn: '9787530212004',
-        price: '79.8元',
-        page: '1251'
-      }, {
-        img: 'https://img2.doubanio.com/view/subject/s/public/s33974633.jpg',
-        title: '活着',
-        author: '余华',
-        publish: '北京十月文艺出版社',
-        pubdate: '2021-7',
-        isbn: '9787530221532',
-        price: '45元',
-        page: '216'
-      }, {
-        img: 'https://img2.doubanio.com/view/subject/s/public/s32266692.jpg',
-        title: '人生海海',
-        author: '麦家',
-        publish: '北京十月文艺出版社',
-        pubdate: '2019-4',
-        isbn: '9787530219218',
-        price: '55元',
-        page: '345'
-      }, {
-        img: 'https://img1.doubanio.com/view/subject/s/public/s34086258.jpg',
-        title: '生死疲劳',
-        author: '莫言',
-        publish: '浙江文艺出版社',
-        pubdate: '2022-1',
-        isbn: '9787533966102',
-        price: '69.9元',
-        page: '584'
-      }, {
-        img: 'https://img9.doubanio.com/view/subject/s/public/s34185404.jpg',
-        title: '金色河流',
-        author: '鲁敏',
-        publish: '译林出版社',
-        pubdate: '2022-3',
-        isbn: '9787544788984',
-        price: '78元',
-        page: '583'
-      }, {
-        img: 'https://img9.doubanio.com/view/subject/s/public/s8865866.jpg',
-        title: '平凡的世界',
-        author: '路遥',
-        publish: '北京十月文艺出版社',
-        pubdate: '2012-3-1',
-        isbn: '9787530212004',
-        price: '79.8元',
-        page: '1251'
-      }, {
-        img: 'https://img2.doubanio.com/view/subject/s/public/s33974633.jpg',
-        title: '活着',
-        author: '余华',
-        publish: '北京十月文艺出版社',
-        pubdate: '2021-7',
-        isbn: '9787530221532',
-        price: '45元',
-        page: '216'
-      }, {
-        img: 'https://img2.doubanio.com/view/subject/s/public/s32266692.jpg',
-        title: '人生海海',
-        author: '麦家',
-        publish: '北京十月文艺出版社',
-        pubdate: '2019-4',
-        isbn: '9787530219218',
-        price: '55元',
-        page: '345'
-      }, {
-        img: 'https://img1.doubanio.com/view/subject/s/public/s34086258.jpg',
-        title: '生死疲劳',
-        author: '莫言',
-        publish: '浙江文艺出版社',
-        pubdate: '2022-1',
-        isbn: '9787533966102',
-        price: '69.9元',
-        page: '584'
-      }, {
-        img: 'https://img9.doubanio.com/view/subject/s/public/s34185404.jpg',
-        title: '金色河流',
-        author: '鲁敏',
-        publish: '译林出版社',
-        pubdate: '2022-3',
-        isbn: '9787544788984',
-        price: '78元',
-        page: '583'
       }
     ]
     const importExcelHandler = () => {
diff --git a/src/router/index.ts b/src/router/index.ts
index 1cbb51672acae0a71d102320e9baf0c90d42422b..1cda52827a5d77297626d5598cc0313e54c44192 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -34,12 +34,6 @@ router.beforeEach((to: any, from: any, next: any) => {
             next({ ...to, replace: true });
         });
     } else {
-        // 手动修改history的state
-        // if (!history.state.current) {
-        //     Object.assign(history.state, {
-        //         current: from.fullPath
-        //     })
-        // }
         next();
     }
 })
@@ -111,7 +105,7 @@ export const DynamicRoutes = [
                     icon: 'help'
                 }
             }, {
-                path: 'micro',
+                path: 'main/micro',
                 name: 'micro',
                 component: () => import('@/pages/micro/micro.vue'),
                 meta: {
@@ -178,14 +172,6 @@ export const DynamicRoutes = [
                     name: '表单',
                     icon: 'tickets'
                 }
-            }, {
-                path: 'other',
-                name: 'other',
-                component: () => import('@/pages/other/other.vue'),
-                meta: {
-                    name: '其他模块',
-                    icon: 'link'
-                }
             }, {
                 path: 'contact',
                 name: 'contact',
diff --git a/src/store/getters.ts b/src/store/getters.ts
index 8d9569c4d70b72a8556f251f88b656a8f605abed..ea8e1d15e654e431f0d49b50c92a510b085e8814 100644
--- a/src/store/getters.ts
+++ b/src/store/getters.ts
@@ -1,6 +1,6 @@
 const getters = {
     getCrumbList: (state: any) => state.crumbList,
-    GET_MENU:(state:any)=>state.sidebarMenu,
+    getMenu:(state:any)=>state.sidebarMenu,
     getCurrentMenu:(state:any)=>state.currentMenu,
     getIsSidebarNavCollapse:(state:any)=>state.isSidebarNavCollapse
 }