diff --git a/src/components/material/PresetSettingDialog.vue b/src/components/material/PresetSettingDialog.vue
new file mode 100644
index 00000000..a2b7ed01
--- /dev/null
+++ b/src/components/material/PresetSettingDialog.vue
@@ -0,0 +1,253 @@
+<template>
+  <mdui-dialog
+    id="preset-setting"
+    class="mdui-card"
+    ref="dialog"
+    :style="{ overflow }"
+    @opened="handleOpened"
+    @closed="handleClosed"
+  >
+    <template v-if="sp">
+      <div class="mdui-card-header mdui-p-b-0">
+        <avatar
+          class="mdui-card-header-avatar mdui-color-grey-400 no-pe"
+          :name="selectedPresetName"
+        />
+        <div class="mdui-card-header-title">{{ $t(`character.${selectedPresetName}`) }}</div>
+      </div>
+      <div class="mdui-card-content preset-list mdui-p-x-3">
+        <!-- 精英化选框 -->
+        <div class="elite-cb-list">
+          <mdui-checkbox
+            v-for="(o, i) in sp.evolve"
+            :key="`elite-${i + 1}`"
+            v-model="pSetting.evolve[i]"
+            >{{ $t('common.promotion') }}{{ i + 1 }}</mdui-checkbox
+          >
+        </div>
+        <!-- 普通技能选框 -->
+        <div class="skill-normal cb-with-num-select" v-if="sp.skills.normal.length >= 2">
+          <mdui-checkbox v-model="pSetting.skills.normal[0]" class="mdui-p-r-2">{{
+            $t('common.skill')
+          }}</mdui-checkbox>
+          <div class="num-select inline-block">
+            <mdui-select-num
+              v-model="pSetting.skills.normal[1]"
+              :options="$_.range(1, sp.skills.normal.length + 1)"
+              @change="
+                $mutationNextTick();
+                pSetting.skills.normal[0] = true;
+                if (pSetting.skills.normal[1] >= pSetting.skills.normal[2])
+                  pSetting.skills.normal[2] = pSetting.skills.normal[1] + 1;
+              "
+            ></mdui-select-num>
+            <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
+            <span :key="`sn-s-${pSetting.skills.normal[1] + 1}`">
+              <mdui-select-num
+                v-model="pSetting.skills.normal[2]"
+                :options="$_.range(pSetting.skills.normal[1] + 1, sp.skills.normal.length + 2)"
+                @change="pSetting.skills.normal[0] = true"
+              ></mdui-select-num>
+            </span>
+          </div>
+        </div>
+        <!-- 精英技能选框 -->
+        <template v-if="sp.skills.elite.length">
+          <div class="preset-hr"></div>
+          <div
+            class="skill-elite cb-with-num-select"
+            v-for="(skill, i) in sp.skills.elite"
+            :key="`se-${skill.name}`"
+            v-show="$parent.isSkillReleased(skill)"
+          >
+            <div class="flex flex-grow mw-100p">
+              <mdui-checkbox
+                v-model="pSetting.skills.elite[i][0]"
+                class="skill-elite-cb mdui-p-r-2"
+                :custom-slot="true"
+                ><div class="mdui-text-truncate">{{
+                  $t(`skill.${skill.name}`)
+                }}</div></mdui-checkbox
+              >
+              <DataImg
+                class="skill-icon no-pe mdui-shadow-4"
+                type="skill"
+                :name="skill.icon || skill.name"
+              />
+            </div>
+            <div class="num-select inline-block mdui-p-l-3">
+              <mdui-select-num
+                v-model="pSetting.skills.elite[i][1]"
+                :options="
+                  $_.range(
+                    sp.skills.normal.length + 1,
+                    sp.skills.normal.length + skill.cost.length + 1,
+                  )
+                "
+                @change="
+                  $mutationNextTick();
+                  pSetting.skills.elite[i][0] = true;
+                  if (pSetting.skills.elite[i][1] >= pSetting.skills.elite[i][2])
+                    pSetting.skills.elite[i][2] = pSetting.skills.elite[i][1] + 1;
+                "
+              ></mdui-select-num>
+              <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
+              <span :key="`se-s-${pSetting.skills.elite[i][1] + 1}`">
+                <mdui-select-num
+                  v-model="pSetting.skills.elite[i][2]"
+                  :options="
+                    $_.range(
+                      pSetting.skills.elite[i][1] + 1,
+                      sp.skills.normal.length + skill.cost.length + 2,
+                    )
+                  "
+                  @change="pSetting.skills.elite[i][0] = true"
+                ></mdui-select-num>
+              </span>
+            </div>
+          </div>
+        </template>
+        <!-- 模组选框 -->
+        <template v-if="presetUniequip.length">
+          <div class="preset-hr"></div>
+          <div
+            v-for="{ id, cost } in presetUniequip"
+            class="uniequip cb-with-num-select"
+            :key="`uniequip-${id}`"
+          >
+            <mdui-checkbox
+              v-model="pSetting.uniequip[id][0]"
+              class="mdui-p-r-2"
+              @change="
+                val =>
+                  !$root.isImplementedUniequip(id) && !val && $nextTick($refs.dialog.handleUpdate)
+              "
+              >{{ $t(`uniequip.${id}`) }}</mdui-checkbox
+            >
+            <div
+              v-show="
+                $root.isImplementedGradedUniequip ||
+                pSetting.uniequip[id][1] !== 0 ||
+                pSetting.uniequip[id][2] !== 1
+              "
+              class="num-select inline-block"
+            >
+              <mdui-select-num
+                v-model="pSetting.uniequip[id][1]"
+                :options="$_.range(cost.length)"
+                @change="
+                  $mutationNextTick();
+                  pSetting.uniequip[id][0] = true;
+                  if (pSetting.uniequip[id][1] >= pSetting.uniequip[id][2])
+                    pSetting.uniequip[id][2] = pSetting.uniequip[id][1] + 1;
+                "
+              ></mdui-select-num>
+              <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
+              <span :key="`se-s-${pSetting.uniequip[id][1] + 1}`">
+                <mdui-select-num
+                  v-model="pSetting.uniequip[id][2]"
+                  :options="$_.range(pSetting.uniequip[id][1] + 1, cost.length + 1)"
+                  @change="pSetting.uniequip[id][0] = true"
+                ></mdui-select-num>
+              </span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+    <div class="mdui-dialog-actions" ref="actions">
+      <a
+        v-if="sp"
+        class="mdui-btn mdui-ripple float-left"
+        v-theme-class="$root.color.dialogTransparentBtn"
+        @click="
+          $root.openWikiHref({ name: selectedPresetName, ...characterTable[selectedPresetName] })
+        "
+        >{{ $t('common.viewOnWiki') }}</a
+      >
+      <button
+        class="mdui-btn mdui-ripple"
+        v-theme-class="$root.color.dialogTransparentBtn"
+        mdui-dialog-cancel
+        >{{ $t('common.cancel') }}</button
+      >
+      <button
+        v-show="this.pSetting?.state == 'add'"
+        class="mdui-btn mdui-ripple"
+        v-theme-class="['mdui-color-pink', 'mdui-color-indigo-a100 mdui-ripple-black']"
+        mdui-dialog-confirm
+        @click="$parent.addPreset"
+        >{{ $t('common.add') }}</button
+      >
+      <button
+        v-show="this.pSetting?.state == 'edit'"
+        class="mdui-btn mdui-ripple"
+        v-theme-class="['mdui-color-teal', 'mdui-color-teal-200 mdui-ripple-black']"
+        mdui-dialog-confirm
+        @click="$parent.editPreset"
+        >{{ $t('common.edit') }}</button
+      >
+    </div>
+  </mdui-dialog>
+</template>
+
+<script>
+import { defineComponent, markRaw } from 'vue';
+import DataImg from '@/components/DataImg.vue';
+import { debounce } from 'lodash';
+
+export default defineComponent({
+  data: () => ({
+    overflow: 'hidden',
+    updateOverflowDebounce: null,
+  }),
+  components: { DataImg },
+  computed: {
+    selectedPresetName() {
+      return this.$parent.selectedPresetName;
+    },
+    sp() {
+      return this.$parent.sp;
+    },
+    pSetting() {
+      return this.$parent.pSetting;
+    },
+    presetUniequip() {
+      return this.$parent.presetUniequip;
+    },
+  },
+  created() {
+    this.updateOverflowDebounce = markRaw(debounce(this.updateOverflow, 300));
+  },
+  beforeDestroy() {
+    this.unbindEvents();
+  },
+  methods: {
+    open() {
+      this.overflow = 'hidden';
+      this.$refs.dialog.open();
+    },
+    updateOverflow() {
+      const dialogRect = this.$refs.dialog.$el.getBoundingClientRect();
+      const actionsRect = this.$refs.actions.getBoundingClientRect();
+      this.overflow = actionsRect.bottom - dialogRect.bottom > 1 ? 'auto' : 'visible';
+    },
+    handleOpened() {
+      this.updateOverflow();
+      this.bindEvents();
+    },
+    handleClosed() {
+      this.$parent.selectedPresetName = '';
+      this.unbindEvents();
+    },
+    bindEvents() {
+      window.addEventListener('resize', this.updateOverflowDebounce);
+      window.addEventListener('orientationchange', this.updateOverflow);
+    },
+    unbindEvents() {
+      window.removeEventListener('resize', this.updateOverflowDebounce);
+      window.removeEventListener('orientationchange', this.updateOverflow);
+    },
+  },
+});
+</script>
diff --git a/src/views/Material/index.js b/src/views/Material/index.js
index ffcea929..faea922f 100644
--- a/src/views/Material/index.js
+++ b/src/views/Material/index.js
@@ -16,6 +16,7 @@ import PlanSettingDialog from '@/components/material/PlanSettingDialog.vue';
 import StageSelectDialog from '@/components/material/StageSelectDialog.vue';
 import ImportConfirmDialog from '@/components/material/ImportConfirmDialog.vue';
 import AccountManageDialog from '@/components/material/AccountManageDialog.vue';
+import PresetSettingDialog from '@/components/material/PresetSettingDialog.vue';
 
 import Ajax from '@/utils/ajax';
 import safelyParseJSON from '@/utils/safelyParseJSON';
@@ -127,6 +128,7 @@ export default defineComponent({
     StageSelectDialog,
     ImportConfirmDialog,
     AccountManageDialog,
+    PresetSettingDialog,
   },
   provide() {
     return {
diff --git a/src/views/Material/index.scss b/src/views/Material/index.scss
index 85dea189..d60ddaf1 100644
--- a/src/views/Material/index.scss
+++ b/src/views/Material/index.scss
@@ -37,7 +37,6 @@ $highlight-colors-dark: #eee, #e6ee9c, #90caf9, #b39ddb, #fff59d;
     transition: all 0.5s;
   }
   #preset-setting {
-    overflow: visible;
     max-width: 500px;
     min-width: 320px;
     .mdui-card-header {
diff --git a/src/views/Material/index.vue b/src/views/Material/index.vue
index a960eaa7..c14a1971 100644
--- a/src/views/Material/index.vue
+++ b/src/views/Material/index.vue
@@ -630,196 +630,7 @@
     </div>
     <!-- /材料 -->
     <!-- 预设设置 -->
-    <mdui-dialog
-      id="preset-setting"
-      class="mdui-card"
-      ref="presetDialog"
-      @closed="selectedPresetName = ''"
-    >
-      <template v-if="sp">
-        <div class="mdui-card-header mdui-p-b-0">
-          <avatar
-            class="mdui-card-header-avatar mdui-color-grey-400 no-pe"
-            :name="selectedPresetName"
-          />
-          <div class="mdui-card-header-title">{{ $t(`character.${selectedPresetName}`) }}</div>
-        </div>
-        <div class="mdui-card-content preset-list mdui-p-x-3">
-          <!-- 精英化选框 -->
-          <div class="elite-cb-list">
-            <mdui-checkbox
-              v-for="(o, i) in sp.evolve"
-              :key="`elite-${i + 1}`"
-              v-model="pSetting.evolve[i]"
-              >{{ $t('common.promotion') }}{{ i + 1 }}</mdui-checkbox
-            >
-          </div>
-          <!-- 普通技能选框 -->
-          <div class="skill-normal cb-with-num-select" v-if="sp.skills.normal.length >= 2">
-            <mdui-checkbox v-model="pSetting.skills.normal[0]" class="mdui-p-r-2">{{
-              $t('common.skill')
-            }}</mdui-checkbox>
-            <div class="num-select inline-block">
-              <mdui-select-num
-                v-model="pSetting.skills.normal[1]"
-                :options="$_.range(1, sp.skills.normal.length + 1)"
-                @change="
-                  $mutationNextTick();
-                  pSetting.skills.normal[0] = true;
-                  if (pSetting.skills.normal[1] >= pSetting.skills.normal[2])
-                    pSetting.skills.normal[2] = pSetting.skills.normal[1] + 1;
-                "
-              ></mdui-select-num>
-              <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
-              <span :key="`sn-s-${pSetting.skills.normal[1] + 1}`">
-                <mdui-select-num
-                  v-model="pSetting.skills.normal[2]"
-                  :options="$_.range(pSetting.skills.normal[1] + 1, sp.skills.normal.length + 2)"
-                  @change="pSetting.skills.normal[0] = true"
-                ></mdui-select-num>
-              </span>
-            </div>
-          </div>
-          <!-- 精英技能选框 -->
-          <template v-if="sp.skills.elite.length">
-            <div class="preset-hr"></div>
-            <div
-              class="skill-elite cb-with-num-select"
-              v-for="(skill, i) in sp.skills.elite"
-              :key="`se-${skill.name}`"
-              v-show="isSkillReleased(skill)"
-            >
-              <div class="flex flex-grow mw-100p">
-                <mdui-checkbox
-                  v-model="pSetting.skills.elite[i][0]"
-                  class="skill-elite-cb mdui-p-r-2"
-                  :custom-slot="true"
-                  ><div class="mdui-text-truncate">{{
-                    $t(`skill.${skill.name}`)
-                  }}</div></mdui-checkbox
-                >
-                <DataImg
-                  class="skill-icon no-pe mdui-shadow-4"
-                  type="skill"
-                  :name="skill.icon || skill.name"
-                />
-              </div>
-              <div class="num-select inline-block mdui-p-l-3">
-                <mdui-select-num
-                  v-model="pSetting.skills.elite[i][1]"
-                  :options="
-                    $_.range(
-                      sp.skills.normal.length + 1,
-                      sp.skills.normal.length + skill.cost.length + 1,
-                    )
-                  "
-                  @change="
-                    $mutationNextTick();
-                    pSetting.skills.elite[i][0] = true;
-                    if (pSetting.skills.elite[i][1] >= pSetting.skills.elite[i][2])
-                      pSetting.skills.elite[i][2] = pSetting.skills.elite[i][1] + 1;
-                  "
-                ></mdui-select-num>
-                <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
-                <span :key="`se-s-${pSetting.skills.elite[i][1] + 1}`">
-                  <mdui-select-num
-                    v-model="pSetting.skills.elite[i][2]"
-                    :options="
-                      $_.range(
-                        pSetting.skills.elite[i][1] + 1,
-                        sp.skills.normal.length + skill.cost.length + 2,
-                      )
-                    "
-                    @change="pSetting.skills.elite[i][0] = true"
-                  ></mdui-select-num>
-                </span>
-              </div>
-            </div>
-          </template>
-          <!-- 模组选框 -->
-          <template v-if="presetUniequip.length">
-            <div class="preset-hr"></div>
-            <div
-              v-for="{ id, cost } in presetUniequip"
-              class="uniequip cb-with-num-select"
-              :key="`uniequip-${id}`"
-            >
-              <mdui-checkbox
-                v-model="pSetting.uniequip[id][0]"
-                class="mdui-p-r-2"
-                @change="
-                  val =>
-                    !$root.isImplementedUniequip(id) &&
-                    !val &&
-                    $nextTick($refs.presetDialog.handleUpdate)
-                "
-                >{{ $t(`uniequip.${id}`) }}</mdui-checkbox
-              >
-              <div
-                v-show="
-                  $root.isImplementedGradedUniequip ||
-                  pSetting.uniequip[id][1] !== 0 ||
-                  pSetting.uniequip[id][2] !== 1
-                "
-                class="num-select inline-block"
-              >
-                <mdui-select-num
-                  v-model="pSetting.uniequip[id][1]"
-                  :options="$_.range(cost.length)"
-                  @change="
-                    $mutationNextTick();
-                    pSetting.uniequip[id][0] = true;
-                    if (pSetting.uniequip[id][1] >= pSetting.uniequip[id][2])
-                      pSetting.uniequip[id][2] = pSetting.uniequip[id][1] + 1;
-                  "
-                ></mdui-select-num>
-                <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
-                <span :key="`se-s-${pSetting.uniequip[id][1] + 1}`">
-                  <mdui-select-num
-                    v-model="pSetting.uniequip[id][2]"
-                    :options="$_.range(pSetting.uniequip[id][1] + 1, cost.length + 1)"
-                    @change="pSetting.uniequip[id][0] = true"
-                  ></mdui-select-num>
-                </span>
-              </div>
-            </div>
-          </template>
-        </div>
-      </template>
-      <div class="mdui-dialog-actions">
-        <a
-          v-if="sp"
-          class="mdui-btn mdui-ripple float-left"
-          v-theme-class="$root.color.dialogTransparentBtn"
-          @click="
-            $root.openWikiHref({ name: selectedPresetName, ...characterTable[selectedPresetName] })
-          "
-          >{{ $t('common.viewOnWiki') }}</a
-        >
-        <button
-          class="mdui-btn mdui-ripple"
-          v-theme-class="$root.color.dialogTransparentBtn"
-          mdui-dialog-cancel
-          >{{ $t('common.cancel') }}</button
-        >
-        <button
-          v-show="this.pSetting?.state == 'add'"
-          class="mdui-btn mdui-ripple"
-          v-theme-class="['mdui-color-pink', 'mdui-color-indigo-a100 mdui-ripple-black']"
-          mdui-dialog-confirm
-          @click="addPreset"
-          >{{ $t('common.add') }}</button
-        >
-        <button
-          v-show="this.pSetting?.state == 'edit'"
-          class="mdui-btn mdui-ripple"
-          v-theme-class="['mdui-color-teal', 'mdui-color-teal-200 mdui-ripple-black']"
-          mdui-dialog-confirm
-          @click="editPreset"
-          >{{ $t('common.edit') }}</button
-        >
-      </div>
-    </mdui-dialog>
+    <PresetSettingDialog ref="presetDialog" />
     <!-- /预设设置 -->
     <!-- Planner -->
     <mdui-dialog