diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 9ae6dc709..99f21c9ab 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -3,6 +3,7 @@
     "christian-kohler.path-intellisense",
     "vscode-icons-team.vscode-icons",
     "davidanson.vscode-markdownlint",
+    "ms-azuretools.vscode-docker",
     "stylelint.vscode-stylelint",
     "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index 7d3ee76a6..3a3772099 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -22,19 +22,31 @@ notices.value.map(v => (noticesNum.value += v.list.length));
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
-          <template v-for="item in notices" :key="item.key">
-            <el-tab-pane
-              :label="`${item.name}(${item.list.length})`"
-              :name="`${item.key}`"
-            >
-              <el-scrollbar max-height="330px">
-                <div class="noticeList-container">
-                  <NoticeList :list="item.list" />
-                </div>
-              </el-scrollbar>
-            </el-tab-pane>
-          </template>
+        <el-tabs
+          :stretch="true"
+          v-model="activeKey"
+          class="dropdown-tabs"
+          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
+        >
+          <el-empty
+            v-if="notices.length === 0"
+            description="暂无消息"
+            :image-size="60"
+          />
+          <span v-else>
+            <template v-for="item in notices" :key="item.key">
+              <el-tab-pane
+                :label="`${item.name}(${item.list.length})`"
+                :name="`${item.key}`"
+              >
+                <el-scrollbar max-height="330px">
+                  <div class="noticeList-container">
+                    <NoticeList :list="item.list" />
+                  </div>
+                </el-scrollbar>
+              </el-tab-pane>
+            </template>
+          </span>
         </el-tabs>
       </el-dropdown-menu>
     </template>
@@ -57,8 +69,6 @@ notices.value.map(v => (noticesNum.value += v.list.length));
 }
 
 .dropdown-tabs {
-  width: 330px;
-
   .noticeList-container {
     padding: 15px 24px 0;
   }
diff --git a/src/layout/components/search/components/SearchModal.vue b/src/layout/components/search/components/SearchModal.vue
index f37838181..1af85e6eb 100644
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -145,6 +145,7 @@ onKeyStroke("ArrowDown", handleDown);
     :style="{
       borderRadius: '6px'
     }"
+    append-to-body
     @opened="inputRef.focus()"
     @closed="inputRef.blur()"
   >
diff --git a/src/views/login/utils/rule.ts b/src/views/login/utils/rule.ts
index 070534a9e..274ab8a70 100644
--- a/src/views/login/utils/rule.ts
+++ b/src/views/login/utils/rule.ts
@@ -12,7 +12,7 @@ export const REGEXP_PWD =
   /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
 
 /** 登录校验 */
-const loginRules = reactive(<FormRules>{
+const loginRules = reactive<FormRules>({
   password: [
     {
       validator: (rule, value, callback) => {
@@ -44,7 +44,7 @@ const loginRules = reactive(<FormRules>{
 });
 
 /** 手机登录校验 */
-const phoneRules = reactive(<FormRules>{
+const phoneRules = reactive<FormRules>({
   phone: [
     {
       validator: (rule, value, callback) => {
@@ -76,7 +76,7 @@ const phoneRules = reactive(<FormRules>{
 });
 
 /** 忘记密码校验 */
-const updateRules = reactive(<FormRules>{
+const updateRules = reactive<FormRules>({
   phone: [
     {
       validator: (rule, value, callback) => {