diff --git a/components.d.ts b/components.d.ts
index aeed6a3..d5a61d2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,8 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ADivider: typeof import('ant-design-vue/es')['Divider']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASlider: typeof import('ant-design-vue/es')['Slider']
     BoxAnimate: typeof import('./src/components/boxAnimate.vue')['default']
     EnemyOne: typeof import('./src/components/enemyOne.vue')['default']
diff --git a/public/libs/actions.js b/public/libs/actions.js
index e04b46d..fe3cfce 100644
--- a/public/libs/actions.js
+++ b/public/libs/actions.js
@@ -388,9 +388,6 @@ actions.prototype._sys_keyDown_lockControl = function (keyCode) {
         case 'viewMaps':
             this._keyDownViewMaps(keyCode);
             break;
-        case 'equipbox':
-            this._keyDownEquipbox(keyCode);
-            break;
         case 'toolbox':
             this._keyDownToolbox(keyCode);
             break;
@@ -490,9 +487,6 @@ actions.prototype._sys_keyUp_lockControl = function (keyCode, altKey) {
         case 'selectShop':
             this._keyUpQuickShop(keyCode);
             break;
-        case 'equipbox':
-            this._keyUpEquipbox(keyCode, altKey);
-            break;
         case 'save':
         case 'load':
         case 'replayLoad':
@@ -599,9 +593,6 @@ actions.prototype._sys_ondown_lockControl = function (x, y, px, py) {
         case 'selectShop':
             this._clickQuickShop(x, y, px, py);
             break;
-        case 'equipbox':
-            this._clickEquipbox(x, y, px, py);
-            break;
         case 'toolbox':
             this._clickToolbox(x, y, px, py);
             break;
@@ -1816,402 +1807,6 @@ actions.prototype._keyUpQuickShop = function (keycode) {
     return;
 };
 
-////// 工具栏界面时的点击操作 //////
-actions.prototype._clickToolbox = function (x, y) {
-    var tools = core.getToolboxItems('tools'),
-        constants = core.getToolboxItems('constants');
-
-    // 装备栏
-    if (x >= this.LAST - 2 && y == 0) {
-        core.ui.closePanel();
-        if (core.isReplaying()) core.control._replay_equipbox();
-        else core.openEquipbox();
-        return;
-    }
-    if (x >= this.LAST - 2 && y === core._HEIGHT_ - 1) {
-        core.playSound('取消');
-        core.ui.closePanel();
-        var last = core.status.route[core.status.route.length - 1] || '';
-        if (last.startsWith('equip:') || last.startsWith('unEquip:')) {
-            core.status.route.push('no');
-        }
-        core.checkAutoEvents();
-        return;
-    }
-
-    var toolsPage = core.status.event.data.toolsPage;
-    var constantsPage = core.status.event.data.constantsPage;
-    // 上一页
-    if (x == this._HX_ - 2 || x == this._HX_ - 3) {
-        if (y === core._HEIGHT_ - 1 - 5 && toolsPage > 1) {
-            core.status.event.data.toolsPage--;
-            core.playSound('光标移动');
-            core.ui._drawToolbox(core.status.event.selection);
-        }
-        if (y === core._HEIGHT_ - 1 && constantsPage > 1) {
-            core.status.event.data.constantsPage--;
-            core.playSound('光标移动');
-            core.ui._drawToolbox(core.status.event.selection);
-        }
-    }
-    // 下一页
-    if (x == this._HX_ + 2 || x == this._HX_ + 3) {
-        if (
-            y === core._HEIGHT_ - 1 - 5 &&
-            toolsPage < Math.ceil(tools.length / this.LAST)
-        ) {
-            core.status.event.data.toolsPage++;
-            core.playSound('光标移动');
-            core.ui._drawToolbox(core.status.event.selection);
-        }
-        if (
-            y === core._HEIGHT_ - 1 &&
-            constantsPage < Math.ceil(constants.length / this.LAST)
-        ) {
-            core.status.event.data.constantsPage++;
-            core.playSound('光标移动');
-            core.ui._drawToolbox(core.status.event.selection);
-        }
-    }
-
-    var index = parseInt(x / 2);
-    if (y === core._HEIGHT_ - 1 - 8) index += 0;
-    else if (y === core._HEIGHT_ - 1 - 6) index += this._HX_;
-    else if (y === core._HEIGHT_ - 1 - 3) index += this.LAST;
-    else if (y === core._HEIGHT_ - 1 - 1) index += this.LAST + this._HX_;
-    else index = -1;
-    if (index >= 0) this._clickToolboxIndex(index);
-};
-
-////// 选择工具栏界面中某个Index后的操作 //////
-actions.prototype._clickToolboxIndex = function (index) {
-    var tools = core.getToolboxItems('tools'),
-        constants = core.getToolboxItems('constants');
-
-    var items = null;
-    var select;
-    if (index < this.LAST) {
-        select = index + this.LAST * (core.status.event.data.toolsPage - 1);
-        items = tools;
-    } else {
-        select =
-            (index % this.LAST) +
-            this.LAST * (core.status.event.data.constantsPage - 1);
-        items = constants;
-    }
-    if (items == null) return;
-    if (select >= items.length) return;
-    var itemId = items[select];
-    if (itemId == core.status.event.data.selectId) {
-        if (core.isReplaying()) return;
-        core.events.tryUseItem(itemId);
-    } else {
-        core.playSound('光标移动');
-        core.ui._drawToolbox(index);
-    }
-};
-
-////// 工具栏界面时，按下某个键的操作 //////
-actions.prototype._keyDownToolbox = function (keycode) {
-    if (core.status.event.data == null) return;
-
-    var last_index = this.LAST - 1;
-
-    var tools = core.getToolboxItems('tools'),
-        constants = core.getToolboxItems('constants');
-    var index = core.status.event.selection;
-    var toolsPage = core.status.event.data.toolsPage;
-    var constantsPage = core.status.event.data.constantsPage;
-    var toolsTotalPage = Math.ceil(tools.length / this.LAST);
-    var constantsTotalPage = Math.ceil(constants.length / this.LAST);
-    var toolsLastIndex =
-        toolsPage < toolsTotalPage
-            ? last_index
-            : (tools.length + last_index) % this.LAST;
-    var constantsLastIndex =
-        this.LAST +
-        (constantsPage < constantsTotalPage
-            ? last_index
-            : (constants.length + last_index) % this.LAST);
-
-    if (keycode == 37) {
-        // left
-        if (index == 0) {
-            // 处理向前翻页
-            if (toolsPage > 1) {
-                core.status.event.data.toolsPage--;
-                index = last_index;
-            } else return; // 第一页不向前翻
-        } else if (index == this.LAST) {
-            if (constantsPage == 1) {
-                if (toolsTotalPage == 0) return;
-                core.status.event.data.toolsPage = toolsTotalPage;
-                index = (tools.length + last_index) % this.LAST;
-            } else {
-                core.status.event.data.constantsPage--;
-                index = 2 * this.LAST - 1;
-            }
-        } else index -= 1;
-        this._clickToolboxIndex(index);
-        return;
-    }
-    if (keycode == 38) {
-        // up
-        if (index >= this.LAST && index < this.LAST + this._HX_) {
-            // 进入tools
-            if (toolsTotalPage == 0) return;
-            if (toolsLastIndex >= this._HX_)
-                index = Math.min(toolsLastIndex, index - this._HX_);
-            else index = Math.min(toolsLastIndex, index - this.LAST);
-        } else if (index < this._HX_) return; // 第一行没有向上
-        else index -= this._HX_;
-        this._clickToolboxIndex(index);
-        return;
-    }
-    if (keycode == 39) {
-        // right
-        if (toolsPage < toolsTotalPage && index == last_index) {
-            core.status.event.data.toolsPage++;
-            index = 0;
-        } else if (
-            constantsPage < constantsTotalPage &&
-            index == 2 * this.LAST - 1
-        ) {
-            core.status.event.data.constantsPage++;
-            index = this.LAST;
-        } else if (index == toolsLastIndex) {
-            if (constantsTotalPage == 0) return;
-            core.status.event.data.constantsPage = 1;
-            index = this.LAST;
-        } else if (index == constantsLastIndex)
-            // 一个物品无操作
-            return;
-        else index++;
-        this._clickToolboxIndex(index);
-        return;
-    }
-    if (keycode == 40) {
-        // down
-        var nextIndex = null;
-        if (index < this._HX_) {
-            if (toolsLastIndex >= this._HX_)
-                nextIndex = Math.min(toolsLastIndex, index + this._HX_);
-            else index += this._HX_;
-        }
-        if (nextIndex == null && index < this.LAST) {
-            if (constantsTotalPage == 0) return;
-            nextIndex = Math.min(index + this._HX_, constantsLastIndex);
-        }
-        if (nextIndex == null && index < this.LAST + this._HX_) {
-            if (constantsLastIndex >= this.LAST + this._HX_)
-                nextIndex = Math.min(constantsLastIndex, index + this._HX_);
-        }
-        if (nextIndex != null) {
-            this._clickToolboxIndex(nextIndex);
-        }
-        return;
-    }
-};
-
-////// 装备栏界面时的点击操作 //////
-actions.prototype._clickEquipbox = function (x, y, px, py) {
-    if (x >= this.LAST - 2 && y == 0) {
-        core.playSound('确定');
-        core.ui.closePanel();
-        if (core.isReplaying()) core.control._replay_toolbox();
-        else core.openToolbox();
-        return;
-    }
-    if (x >= this.LAST - 2 && y === core._HEIGHT_ - 1) {
-        core.playSound('取消');
-        core.ui.closePanel();
-        var last = core.status.route[core.status.route.length - 1] || '';
-        if (last.startsWith('equip:') || last.startsWith('unEquip:')) {
-            core.status.route.push('no');
-        }
-        core.checkAutoEvents();
-        return;
-    }
-    if ((x == this._HX_ - 2 || x == this._HX_ - 3) && y === core._HEIGHT_ - 1) {
-        if (core.status.event.data.page > 1) {
-            core.status.event.data.page--;
-            core.playSound('光标移动');
-            core.ui._drawEquipbox(core.status.event.selection);
-        }
-        return;
-    }
-    if ((x == this._HX_ + 2 || x == this._HX_ + 3) && y === core._HEIGHT_ - 1) {
-        var lastPage = Math.ceil(
-            core.getToolboxItems('equips').length / this.LAST
-        );
-        if (core.status.event.data.page < lastPage) {
-            core.status.event.data.page++;
-            core.playSound('光标移动');
-            core.ui._drawEquipbox(core.status.event.selection);
-        }
-        return;
-    }
-    var per_page = this._HX_ - 3,
-        v = core._WIDTH_ / per_page;
-    if (y === core._HEIGHT_ - 9) {
-        for (var i = 0; i < per_page; ++i)
-            if (x >= i * v && x <= (i + 1) * v)
-                return this._clickEquipboxIndex(i);
-    } else if (y === core._HEIGHT_ - 7) {
-        for (var i = 0; i < per_page; ++i)
-            if (x >= i * v && x <= (i + 1) * v)
-                return this._clickEquipboxIndex(per_page + i);
-    } else if (Math.abs(core._HEIGHT_ - 5 - py / 32) < 0.5) {
-        for (var i = 0; i < per_page; ++i)
-            if (x >= i * v && x <= (i + 1) * v)
-                return this._clickEquipboxIndex(2 * per_page + i);
-    } else if (y === core._HEIGHT_ - 4)
-        this._clickEquipboxIndex(this.LAST + parseInt(x / 2));
-    else if (y === core._HEIGHT_ - 2)
-        this._clickEquipboxIndex(this.LAST + this._HX_ + parseInt(x / 2));
-};
-
-////// 选择装备栏界面中某个Index后的操作 //////
-actions.prototype._clickEquipboxIndex = function (index) {
-    if (index < this.LAST) {
-        if (index >= core.status.globalAttribute.equipName.length) return;
-        if (
-            index == core.status.event.selection &&
-            core.status.hero.equipment[index]
-        ) {
-            if (core.isReplaying()) return;
-            core.unloadEquip(index);
-            core.status.route.push('unEquip:' + index);
-        } else core.playSound('光标移动');
-    } else {
-        var equips = core.getToolboxItems('equips');
-        if (index == core.status.event.selection) {
-            if (core.isReplaying()) return;
-            var equipId =
-                equips[
-                    index -
-                        this.LAST +
-                        (core.status.event.data.page - 1) * this.LAST
-                ];
-            core.loadEquip(equipId);
-            core.status.route.push('equip:' + equipId);
-        } else core.playSound('光标移动');
-    }
-    core.ui._drawEquipbox(index);
-};
-
-////// 装备栏界面时，按下某个键的操作 //////
-actions.prototype._keyDownEquipbox = function (keycode) {
-    if (core.status.event.data == null) return;
-
-    var last_index = this.LAST - 1;
-    var per_line = this._HX_ - 3;
-    var equipCapacity = core.status.globalAttribute.equipName.length;
-    var ownEquipment = core.getToolboxItems('equips');
-    var index = core.status.event.selection;
-    var page = core.status.event.data.page;
-    var totalPage = Math.ceil(ownEquipment.length / this.LAST);
-    var totalLastIndex =
-        this.LAST +
-        (page < totalPage
-            ? last_index
-            : (ownEquipment.length + last_index) % this.LAST);
-
-    if (keycode == 37) {
-        // left
-        if (index == 0) return;
-        if (index == this.LAST) {
-            if (page > 1) {
-                core.status.event.data.page--;
-                core.playSound('光标移动');
-                index = this.LAST + last_index;
-            } else if (page == 1) index = equipCapacity - 1;
-            else return;
-        } else index -= 1;
-        this._clickEquipboxIndex(index);
-        return;
-    }
-    if (keycode == 38) {
-        // up
-        if (index < per_line) return;
-        else if (index < 2 * per_line) index -= per_line;
-        else if (index < this.LAST + this._HX_) {
-            index = parseInt((index - this.LAST) / 2);
-            if (equipCapacity > per_line)
-                index = Math.min(equipCapacity - 1, index + per_line);
-            else index = Math.min(equipCapacity - 1, index);
-        } else index -= this._HX_;
-        this._clickEquipboxIndex(index);
-        return;
-    }
-    if (keycode == 39) {
-        // right
-        if (page < totalPage && index == this.LAST + last_index) {
-            core.status.event.data.page++;
-            core.playSound('光标移动');
-            index = this.LAST;
-        } else if (index == equipCapacity - 1) {
-            if (totalPage == 0) return;
-            index = this.LAST;
-        } else if (index == totalLastIndex) return;
-        else index++;
-        this._clickEquipboxIndex(index);
-        return;
-    }
-    if (keycode == 40) {
-        // down
-        if (index < per_line) {
-            if (equipCapacity > per_line)
-                index = Math.min(index + per_line, equipCapacity - 1);
-            else {
-                if (totalPage == 0) return;
-                index = Math.min(2 * index + 1 + this.LAST, totalLastIndex);
-            }
-        } else if (index < 2 * per_line) {
-            if (totalPage == 0) return;
-            index = Math.min(
-                2 * (index - per_line) + 1 + this.LAST,
-                totalLastIndex
-            );
-        } else if (index < this.LAST + this._HX_)
-            index = Math.min(index + this._HX_, totalLastIndex);
-        else return;
-        this._clickEquipboxIndex(index);
-        return;
-    }
-};
-
-////// 装备栏界面时，放开某个键的操作 //////
-actions.prototype._keyUpEquipbox = function (keycode, altKey) {
-    if (altKey && keycode >= 48 && keycode <= 57) {
-        core.items.quickSaveEquip(keycode - 48);
-        return;
-    }
-    if (keycode == 84) {
-        core.playSound('确定');
-        core.ui.closePanel();
-        if (core.isReplaying()) core.control._replay_toolbox();
-        else core.openToolbox();
-        return;
-    }
-    if (keycode == 81 || keycode == 27 || keycode == 88) {
-        core.playSound('取消');
-        core.ui.closePanel();
-        var last = core.status.route[core.status.route.length - 1] || '';
-        if (last.startsWith('equip:') || last.startsWith('unEquip:')) {
-            core.status.route.push('no');
-        }
-        core.checkAutoEvents();
-        return;
-    }
-    if (!core.status.event.data.selectId) return;
-
-    if (keycode == 13 || keycode == 32 || keycode == 67) {
-        this._clickEquipboxIndex(core.status.event.selection);
-        return;
-    }
-};
-
 ////// 存读档界面时的点击操作 //////
 actions.prototype._clickSL = function (x, y) {
     var page = core.status.event.data.page,
diff --git a/public/libs/control.js b/public/libs/control.js
index e3bbc9f..d1c6b9d 100644
--- a/public/libs/control.js
+++ b/public/libs/control.js
@@ -4163,7 +4163,7 @@ control.prototype.resize = function () {
         clientHeight = main.dom.body.clientHeight;
     var BORDER = 3;
     var extendToolbar = core.flags.extendToolbar;
-    var BAR_WIDTH = extendToolbar ? 0 : Math.round(core._PY_ * 0.3);
+    var BAR_WIDTH = extendToolbar ? 0 : Math.round(core._PY_ * 0.31);
 
     var horizontalMaxRatio =
         (clientHeight - 2 * BORDER - (extendToolbar ? BORDER : 0)) /
@@ -4321,6 +4321,7 @@ control.prototype._resize_canvas = function (obj) {
     core.dom.gameDraw.style.top = obj.statusBarHeightInVertical + 'px';
     core.dom.gameDraw.style.right = 0;
     core.dom.gameDraw.style.border = obj.border;
+    core.dom.gameDraw.style.boxSizing = 'content-box';
     // resize bigmap
     core.bigmap.canvas.forEach(function (cn) {
         var ratio = core.canvas[cn].canvas.hasAttribute('isHD')
diff --git a/public/libs/ui.js b/public/libs/ui.js
index 16b8740..3ee4947 100644
--- a/public/libs/ui.js
+++ b/public/libs/ui.js
@@ -3529,267 +3529,7 @@ ui.prototype._drawViewMaps_buildData = function (index, x, y) {
 ui.prototype._drawToolbox = function (index) {};
 
 ////// 绘制装备界面 //////
-ui.prototype._drawEquipbox = function (index) {
-    var info = this._drawEquipbox_getInfo(index);
-    this._drawToolbox_drawBackground();
-
-    core.setAlpha('ui', 1);
-    core.setStrokeStyle('ui', '#DDDDDD');
-    core.canvas.ui.lineWidth = 2;
-    core.canvas.ui.strokeWidth = 2;
-    core.setTextAlign('ui', 'right');
-    var line1 = core._PY_ - 306;
-    this._drawToolbox_drawLine(line1, '当前装备');
-    var line2 = core._PY_ - 146;
-    this._drawToolbox_drawLine(line2 + 9, '拥有装备');
-
-    this._drawEquipbox_description(info, line1);
-
-    this._drawEquipbox_drawEquiped(info, line1);
-    this._drawToolbox_drawContent(
-        info,
-        line2,
-        info.ownEquipment,
-        info.page,
-        true
-    );
-    this.drawPagination(info.page, info.totalPage);
-
-    core.setTextAlign('ui', 'center');
-    core.fillText(
-        'ui',
-        '[道具栏]',
-        core._PX_ - 46,
-        25,
-        '#DDDDDD',
-        this._buildFont(15, true)
-    );
-    core.fillText('ui', '返回游戏', core._PX_ - 46, core._PY_ - 13);
-};
-
-ui.prototype._drawEquipbox_getInfo = function (index) {
-    if (!core.status.event.data || core.status.event.data.page == null)
-        core.status.event.data = { page: 1, selectId: null };
-    var allEquips = core.status.globalAttribute.equipName;
-    var equipLength = allEquips.length;
-    if (!core.status.hero.equipment) core.status.hero.equipment = [];
-    var n = core._WIDTH_ - 1;
-    var equipEquipment = core.status.hero.equipment;
-    var ownEquipment = core.getToolboxItems('equips');
-    var page = core.status.event.data.page;
-    var totalPage = Math.ceil(ownEquipment.length / n);
-    // 处理index
-    if (index == null) {
-        if (equipLength > 0 && equipEquipment[0]) index = 0;
-        else if (ownEquipment.length > 0) index = n;
-        else index = 0;
-    }
-    if (index >= n && ownEquipment.length == 0) index = 0;
-    var selectId = null;
-    if (index < n) {
-        if (index >= equipLength) index = Math.max(0, equipLength - 1);
-        selectId = equipEquipment[index] || null;
-    } else {
-        if (page == totalPage)
-            index = Math.min(index, ((ownEquipment.length + n - 1) % n) + n);
-        selectId = ownEquipment[index - n + (page - 1) * n];
-        if (!core.hasItem(selectId)) selectId = null;
-    }
-    core.status.event.selection = index;
-    core.status.event.data.selectId = selectId;
-    return {
-        index: index,
-        selectId: selectId,
-        page: page,
-        totalPage: totalPage,
-        allEquips: allEquips,
-        equipLength: equipLength,
-        equipEquipment: equipEquipment,
-        ownEquipment: ownEquipment
-    };
-};
-
-ui.prototype._drawEquipbox_description = function (info, max_height) {
-    core.setTextAlign('ui', 'left');
-    if (!info.selectId) return;
-    var equip = core.material.items[info.selectId];
-    // --- 标题
-    if (!equip.equip) equip.equip = { type: 0 };
-    var equipType = equip.equip.type,
-        equipString;
-    if (typeof equipType === 'string') {
-        equipString = equipType || '未知部位';
-        equipType = core.items.getEquipTypeByName(equipType);
-    } else equipString = info.allEquips[equipType] || '未知部位';
-    core.fillText(
-        'ui',
-        equip.name + '（' + equipString + '）',
-        10,
-        32,
-        core.status.globalAttribute.selectColor,
-        this._buildFont(20, true)
-    );
-    // --- 描述
-    var text = equip.text || '该装备暂无描述。';
-    try {
-        text = core.replaceText(text);
-    } catch (e) {}
-
-    var height = null;
-    for (var fontSize = 17; fontSize >= 9; fontSize -= 2) {
-        var config = {
-            left: 10,
-            top: 46,
-            fontSize: fontSize,
-            maxWidth: core._PX_ - 15,
-            bold: false,
-            color: 'white'
-        };
-        height = 42 + core.getTextContentHeight(text, config);
-        if (height < max_height - 30 || fontSize == 9) {
-            core.drawTextContent('ui', text, config);
-            break;
-        }
-    }
-    // --- 变化值
-    this._drawEquipbox_drawStatusChanged(
-        info,
-        max_height - 15,
-        equip,
-        equipType
-    );
-};
-
-ui.prototype._drawEquipbox_getStatusChanged = function (
-    info,
-    equip,
-    equipType,
-    y
-) {
-    if (info.index < core._WIDTH_ - 1) {
-        // 光标在装备栏上：查询卸下装备属性
-        return core.compareEquipment(null, info.selectId);
-    }
-    if (equipType < 0) {
-        // 没有空位
-        core.fillText(
-            'ui',
-            '<当前没有该装备的空位，请先卸下装备>',
-            10,
-            y,
-            '#CCCCCC',
-            this._buildFont(14, false)
-        );
-        return null;
-    }
-    // 光标在装备上：查询装上后的属性变化
-    return core.compareEquipment(info.selectId, info.equipEquipment[equipType]);
-};
-
-ui.prototype._drawEquipbox_drawStatusChanged = function (
-    info,
-    y,
-    equip,
-    equipType
-) {
-    var compare = this._drawEquipbox_getStatusChanged(
-        info,
-        equip,
-        equipType,
-        y
-    );
-    if (compare == null) return;
-    var obj = { drawOffset: 10, y: y };
-
-    // --- 变化值...
-    core.setFont('ui', this._buildFont(14, true));
-    for (var name in core.status.hero) {
-        if (typeof core.status.hero[name] != 'number') continue;
-        var nowValue = core.getRealStatus(name);
-        // 查询新值
-        var newValue = Math.floor(
-            ((core.getStatus(name) + (compare.value[name] || 0)) *
-                (core.getBuff(name) * 100 + (compare.percentage[name] || 0))) /
-                100
-        );
-        if (nowValue == newValue) continue;
-        var text = core.getStatusLabel(name);
-        this._drawEquipbox_drawStatusChanged_draw(text + ' ', '#CCCCCC', obj);
-        var color = newValue > nowValue ? '#00FF00' : '#FF0000';
-        nowValue = core.formatBigNumber(nowValue);
-        newValue = core.formatBigNumber(newValue);
-        this._drawEquipbox_drawStatusChanged_draw(
-            nowValue + '->',
-            '#CCCCCC',
-            obj
-        );
-        this._drawEquipbox_drawStatusChanged_draw(newValue, color, obj);
-        obj.drawOffset += 8;
-    }
-};
-
-ui.prototype._drawEquipbox_drawStatusChanged_draw = function (
-    text,
-    color,
-    obj
-) {
-    var len = core.calWidth('ui', text);
-    if (obj.drawOffset + len >= core._PX_) {
-        // 换行
-        obj.y += 19;
-        obj.drawOffset = 10;
-    }
-    core.fillText('ui', text, obj.drawOffset, obj.y, color);
-    obj.drawOffset += len;
-};
-
-ui.prototype._drawEquipbox_drawEquiped = function (info, line) {
-    core.setTextAlign('ui', 'center');
-    var per_line = core._HALF_WIDTH_ - 3,
-        width = Math.floor(core._PX_ / (per_line + 0.25));
-    // 当前装备
-    for (var i = 0; i < info.equipLength; i++) {
-        var equipId = info.equipEquipment[i] || null;
-        // var offset_text = width * (i % per_line) + 56;
-        var offset_image = width * (i % per_line) + (width * 2) / 3;
-        var offset_text = offset_image - (width - 32) / 2;
-        var y = line + 54 * Math.floor(i / per_line) + 19;
-        if (equipId) {
-            var icon = core.material.icons.items[equipId];
-            core.drawImage(
-                'ui',
-                core.material.images.items,
-                0,
-                32 * icon,
-                32,
-                32,
-                offset_image,
-                y,
-                32,
-                32
-            );
-        }
-        core.fillText(
-            'ui',
-            info.allEquips[i] || '未知',
-            offset_text,
-            y + 27,
-            '#FFFFFF',
-            this._buildFont(16, true)
-        );
-        core.strokeRoundRect(
-            'ui',
-            offset_image - 4,
-            y - 4,
-            40,
-            40,
-            6,
-            info.index == i
-                ? core.status.globalAttribute.selectColor
-                : '#FFFFFF'
-        );
-    }
-};
+ui.prototype._drawEquipbox = function (index) {};
 
 ////// 绘制存档/读档界面 //////
 ui.prototype._drawSLPanel = function (index, refresh) {
diff --git a/public/project/floors/MT1.js b/public/project/floors/MT1.js
index 8557c43..4866aff 100644
--- a/public/project/floors/MT1.js
+++ b/public/project/floors/MT1.js
@@ -79,7 +79,7 @@ main.floors.MT1=
     [20042,  0,  0,201,  0,  0,141,  0,141,202, 17,  0,  0,  0,20040],
     [20042,202, 17, 17,  0,  0,205, 31,  0, 28, 17, 28,  0, 32,20040],
     [20042,  0, 27, 17, 31,141,141,141,141,201, 17, 17, 17, 17,20040],
-    [20042, 32,  0, 17,  0,201, 47,  0,201, 31,202,  0, 32,  0,20040],
+    [20042, 32,  0, 17,  0,201, 36, 35,201, 31,202,  0, 32,  0,20040],
     [20036,20033,20033,20033,20033,20033,20034, 93,20032,20033,20033,20033,20033,20033,20035]
 ],
     "bgmap": [
diff --git a/public/project/functions.js b/public/project/functions.js
index d9e1d71..0f1d997 100644
--- a/public/project/functions.js
+++ b/public/project/functions.js
@@ -1389,7 +1389,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
                 floorId: core.status.floorId,
                 hero: core.clone(core.status.hero),
                 hard: core.status.hard,
-                maps: core.maps.saveMap(),
+                maps: core.clone(core.maps.saveMap()),
                 route: core.encodeRoute(core.status.route),
                 values: values,
                 version: core.firstData.version,
@@ -1484,7 +1484,9 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
                     money: '金币',
                     exp: '经验',
                     point: '加点',
-                    steps: '步数'
+                    steps: '步数',
+                    up: '升级',
+                    none: '无'
                 }[name] || name
             );
         },
diff --git a/public/project/items.js b/public/project/items.js
index 92c474c..fcccbbc 100644
--- a/public/project/items.js
+++ b/public/project/items.js
@@ -151,8 +151,8 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a =
 			"type": "武器",
 			"animate": "jianji",
 			"value": {
-				"mana": 10,
-				"atk": 15
+				"atk": 15,
+				"mana": 10
 			},
 			"percentage": {}
 		},
diff --git a/public/project/plugins.js b/public/project/plugins.js
index 0f18c40..02bc1d1 100644
--- a/public/project/plugins.js
+++ b/public/project/plugins.js
@@ -3361,12 +3361,29 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
         }
     },
     itemDetail: function () {
+        /* 宝石血瓶左下角显示数值
+         * 需要将 变量：itemDetail改为true才可正常运行
+         * 请尽量减少勇士的属性数量，否则可能会出现严重卡顿
+         * 注意：这里的属性必须是core.status.hero里面的，flag无法显示
+         * 如果不想显示，可以core.setFlag("itemDetail", false);
+         * 然后再core.getItemDetail();
+         * 如有bug在大群或造塔群@古祠
+         */
+
+        // 谁tm在即捡即用效果里面调用带有含刷新状态栏的函数
+        var origin = core.control.updateStatusBar;
+        core.updateStatusBar = core.control.updateStatusBar = function () {
+            if (core.getFlag('__statistics__')) return;
+            else return origin.apply(core.control, arguments);
+        };
+
         core.bigmap.threshold = 256;
 
         core.control.updateDamage = function (floorId, ctx) {
             floorId = floorId || core.status.floorId;
             if (!floorId || core.status.gameOver || main.mode != 'play') return;
             var onMap = ctx == null;
+
             // 没有怪物手册
             if (!core.hasItem('book')) return;
             core.status.damage.posX = core.bigmap.posX;
@@ -3385,9 +3402,11 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
         // 绘制地图显示
         control.prototype._drawDamage_draw = function (ctx, onMap) {
             if (!core.hasItem('book')) return;
-            core.setFont(ctx, '15px normal');
+            // *** 下一句话可以更改你想要的显示字体
+            core.setFont(ctx, '14px normal');
+            // ***
             core.setTextAlign(ctx, 'left');
-            core.status.damage.data.forEach(one => {
+            core.status.damage.data.forEach(function (one) {
                 var px = one.px,
                     py = one.py;
                 if (onMap && core.bigmap.v2) {
@@ -3395,16 +3414,16 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
                     py -= core.bigmap.posY * 32;
                     if (
                         px < -32 * 2 ||
-                        px > core.__PIXELS__ + 32 ||
+                        px > core.__PX__ + 32 ||
                         py < -32 ||
-                        py > core.__PIXELS__ + 32
+                        py > core.__PY__ + 32
                     )
                         return;
                 }
                 core.fillBoldText(ctx, one.text, px, py, one.color);
             });
             core.setTextAlign(ctx, 'center');
-            core.status.damage.extraData.forEach(one => {
+            core.status.damage.extraData.forEach(function (one) {
                 var px = one.px,
                     py = one.py;
                 if (onMap && core.bigmap.v2) {
@@ -3412,69 +3431,25 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
                     py -= core.bigmap.posY * 32;
                     if (
                         px < -32 ||
-                        px > core.__PIXELS__ + 32 ||
+                        px > core.__PX__ + 32 ||
                         py < -32 ||
-                        py > core.__PIXELS__ + 32
+                        py > core.__PY__ + 32
                     )
                         return;
                 }
                 core.fillBoldText(ctx, one.text, px, py, one.color);
             });
         };
-        core.formatBigNumber = function (x, onMap, onCritical) {
-            x = Math.floor(parseFloat(x));
-            if (!core.isset(x) || !Number.isFinite(x)) return '???';
-            if (x > 1e24 || x < -1e24) return x.toExponential(2);
-            var c = x < 0 ? '-' : '';
-            if (onCritical) c = '-> ';
-            x = Math.abs(x);
-            if (x <= 9999 || (!onMap && x <= 999999)) return c + x;
-            var all = [
-                { val: 1e20, c: 'g' },
-                { val: 1e16, c: 'j' },
-                { val: 1e12, c: 'z' },
-                { val: 1e8, c: 'e' },
-                { val: 1e4, c: 'w' }
-            ];
-            for (var i = 0; i < all.length; i++) {
-                var one = all[i];
-                if (onMap) {
-                    if (x >= one.val) {
-                        var v = x / one.val;
-                        return (
-                            c +
-                            v.toFixed(
-                                Math.max(
-                                    0,
-                                    Math.floor(
-                                        (c == '-' ? 2 : 3) - Math.log10(v + 1)
-                                    )
-                                )
-                            ) +
-                            one.c
-                        );
-                    }
-                } else {
-                    if (x >= 10 * one.val) {
-                        var v = x / one.val;
-                        return (
-                            c +
-                            v.toFixed(
-                                Math.max(0, Math.floor(4 - Math.log10(v + 1)))
-                            ) +
-                            one.c
-                        );
-                    }
-                }
-            }
-            return c + x;
-        };
         // 获取宝石信息 并绘制
         this.getItemDetail = function (floorId) {
             if (!core.getFlag('itemDetail')) return;
             floorId = floorId || core.status.thisMap.floorId;
-            core.status.maps[floorId].blocks.forEach(block => {
-                if (block.event.cls !== 'items') return;
+            core.status.maps[floorId].blocks.forEach(function (block) {
+                if (
+                    block.event.cls !== 'items' ||
+                    block.event.id === 'superPotion'
+                )
+                    return;
                 var x = block.x,
                     y = block.y;
                 // v2优化，只绘制范围内的部分
@@ -3498,7 +3473,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
                 var item = core.material.items[id];
                 if (item.cls === 'equips') {
                     // 装备也显示
-                    var diff = item.equip.value || {};
+                    var diff = core.clone(item.equip.value || {});
                     var per = item.equip.percentage;
                     for (var name in per) {
                         diff[name + 'per'] = per[name].toString() + '%';
@@ -3531,7 +3506,6 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
         }
         // 绘制
         function drawItemDetail(diff, x, y) {
-            if (core.same(diff, {}) || !diff) return;
             var px = 32 * x + 2,
                 py = 32 * y + 30;
             var content = '';
@@ -9291,14 +9265,17 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
     },
     uiChange: function () {
         if (main.replayChecking) return;
+
         ui.prototype.drawBook = function () {
-            if (main.replayChecking) return;
             return (core.plugin.bookOpened.value = true);
         };
 
         ui.prototype._drawToolbox = function () {
-            if (main.replayChecking) return;
             return (core.plugin.toolOpened.value = true);
         };
+
+        ui.prototype._drawEquipbox = function () {
+            return (core.plugin.equipOpened.value = true);
+        };
     }
 };
diff --git a/src/App.vue b/src/App.vue
index 09c8985..7644a4c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,7 @@ import { uiStack } from './plugin/uiController';
     overflow: hidden;
 }
 
-@media screen and(max-width:600px) {
+@media screen and (max-width: 600px) {
     #ui {
         width: 100%;
         height: 100%;
diff --git a/src/components/boxAnimate.vue b/src/components/boxAnimate.vue
index 65bfee6..f3c1e66 100644
--- a/src/components/boxAnimate.vue
+++ b/src/components/boxAnimate.vue
@@ -26,6 +26,7 @@ let ctx: CanvasRenderingContext2D;
 let drawFn: () => void;
 
 function draw() {
+    if (id === 'none') return;
     if (has(drawFn)) removeAnimate(drawFn);
 
     const cls = core.getClsFromId(props.id);
@@ -46,7 +47,10 @@ function draw() {
     c.height = scale * h;
     ctx.scale(scale, scale);
 
-    if (frames === 1) {
+    if (props.id === 'hero') {
+        const img = core.material.images.hero;
+        ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4, 0, 0, w, h);
+    } else if (frames === 1) {
         core.drawIcon(ctx, props.id, 0, 0, props.width, props.height);
     } else {
         drawFn = () => {
diff --git a/src/components/scroll.vue b/src/components/scroll.vue
index 38d27e0..c2323e7 100644
--- a/src/components/scroll.vue
+++ b/src/components/scroll.vue
@@ -39,8 +39,8 @@ let ctx: CanvasRenderingContext2D;
 let content: HTMLDivElement;
 let fromSelf = false;
 
-const resize = () => {
-    calHeight();
+const resize = async () => {
+    await calHeight();
     draw();
 };
 
@@ -80,9 +80,14 @@ function draw() {
 /**
  * 计算元素总长度
  */
-function calHeight() {
-    const style = getComputedStyle(content);
-    total = parseFloat(style[canvasAttr]);
+async function calHeight() {
+    await new Promise(res => {
+        requestAnimationFrame(() => {
+            const style = getComputedStyle(content);
+            total = parseFloat(style[canvasAttr]);
+            res('');
+        });
+    });
 }
 
 function scroll() {
@@ -90,11 +95,11 @@ function scroll() {
     content.style[cssTarget] = `${-now}px`;
 }
 
-onUpdated(() => {
+onUpdated(async () => {
     if (fromSelf) return;
     now = props.now ?? now;
     content.style.transition = `${cssTarget} 0.2s ease-out`;
-    calHeight();
+    await calHeight();
     scroll();
 });
 
@@ -120,15 +125,12 @@ function contentDrag(x: number, y: number) {
     scroll();
 }
 
-onMounted(() => {
+onMounted(async () => {
     const div = document.getElementById(`scroll-div-${id}`) as HTMLDivElement;
     const canvas = document.getElementById(`scroll-${id}`) as HTMLCanvasElement;
     const d = document.getElementById(`content-${id}`) as HTMLDivElement;
     ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
     content = d;
-    calHeight();
-
-    content.addEventListener('resize', resize);
 
     const style = getComputedStyle(canvas);
     canvas.style.width = `${width}px`;
@@ -144,8 +146,6 @@ onMounted(() => {
         canvas.height = width * scale;
     }
 
-    draw();
-
     // 绑定滚动条拖拽事件
     useDrag(
         canvas,
@@ -190,10 +190,14 @@ onMounted(() => {
         scroll();
         fromSelf = false;
     });
+
+    window.addEventListener('resize', resize);
+    await calHeight();
+    draw();
 });
 
 onUnmounted(() => {
-    content.removeEventListener('resize', resize);
+    window.removeEventListener('resize', resize);
     cancelGlobalDrag(canvasDrag);
     cancelGlobalDrag(contentDrag);
 });
diff --git a/src/plugin/ui/equipbox.tsx b/src/plugin/ui/equipbox.tsx
new file mode 100644
index 0000000..44fa8bf
--- /dev/null
+++ b/src/plugin/ui/equipbox.tsx
@@ -0,0 +1,92 @@
+import { has } from '../utils';
+
+/**
+ * 获取所有装备
+ */
+export function getEquips() {
+    return Object.entries(core.status.hero.items.equips);
+}
+
+/**
+ * 获取装备增加的属性
+ * @param equip 装备
+ */
+export function getAddStatus(equip: Equip) {
+    const toGet = Object.assign({}, equip.value, equip.percentage);
+    const keys = Object.keys(toGet);
+
+    return (
+        <div class="equip-add-detail">
+            {keys.map(v => {
+                const value =
+                    (equip.value[v] ?? 0) +
+                    core.status.hero[v] * (equip.percentage[v] ?? 0);
+
+                return (
+                    <span style="display: flex">
+                        <span style="flex-basis: 50%">
+                            {core.getStatusLabel(v)}
+                        </span>
+                        &nbsp;&nbsp;&nbsp;&nbsp;
+                        <span
+                            style={{
+                                color: value > 0 ? 'lightgreen' : 'lightsalmon'
+                            }}
+                        >
+                            {value > 0 ? `+${value}` : value}
+                        </span>
+                    </span>
+                );
+            })}
+        </div>
+    );
+}
+
+/**
+ * 获取当前勇士属性，如果有选中的装备，会在后面追加显示增加量
+ * @param nowEquip 当前选中的装备
+ */
+export function getNowStatus(nowEquip?: Equip) {
+    const toShow = ['hp', 'lv', 'atk', 'def', 'mdef', 'mana', 'hpmax', 'money'];
+
+    return (
+        <div id="hero-status">
+            {toShow.map(v => {
+                let status: string;
+                if (v === 'up') status = core.getNextLvUpNeed()?.toString();
+                else if (v === 'lv') status = core.getLvName() ?? '';
+                else status = core.getRealStatus(v)?.toString();
+
+                let add = 0;
+                if (has(nowEquip)) {
+                    add += nowEquip.value[v] ?? 0;
+                    const per = nowEquip.percentage[v] * core.getStatus(v);
+                    add += isNaN(per) ? 0 : per;
+                }
+
+                return (
+                    <div class="hero-status-one">
+                        <span class="hero-status-label">
+                            {core.getStatusLabel(v)}
+                        </span>
+                        <div class="hero-status-value">
+                            <span style="margin-right: 20%">{status}</span>
+                            {add !== 0 && (
+                                <span
+                                    style={{
+                                        color:
+                                            add > 0
+                                                ? 'lightgreen'
+                                                : 'lightsalmon'
+                                    }}
+                                >
+                                    {add > 0 ? '+' + add : '-' + -add}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
diff --git a/src/plugin/uiController.ts b/src/plugin/uiController.ts
index 48e4e74..cb54593 100644
--- a/src/plugin/uiController.ts
+++ b/src/plugin/uiController.ts
@@ -2,9 +2,11 @@ import { sleep } from 'mutate-animate';
 import { Component, markRaw, ref, Ref, watch } from 'vue';
 import Book from '../ui/book.vue';
 import Toolbox from '../ui/toolbox.vue';
+import Equipbox from '../ui/equipbox.vue';
 
 export const bookOpened = ref(false);
 export const toolOpened = ref(false);
+export const equipOpened = ref(false);
 
 export const transition = ref(true);
 
@@ -13,7 +15,8 @@ let app: HTMLDivElement;
 /** ui声明列表 */
 const UI_LIST: [Ref<boolean>, Component][] = [
     [bookOpened, Book],
-    [toolOpened, Toolbox]
+    [toolOpened, Toolbox],
+    [equipOpened, Equipbox]
 ];
 
 /** ui栈 */
@@ -36,7 +39,7 @@ export default function init() {
             }
         });
     });
-    return { uiStack, bookOpened, toolOpened, transition };
+    return { uiStack, transition, bookOpened, toolOpened, equipOpened };
 }
 
 async function showApp() {
diff --git a/src/plugin/use.ts b/src/plugin/use.ts
index ed6b936..0654438 100644
--- a/src/plugin/use.ts
+++ b/src/plugin/use.ts
@@ -20,27 +20,38 @@ export const isMobile = matchMedia('(max-width: 600px)').matches;
 
 /**
  * 向一个元素添加拖拽事件
- * @param ele 目标元素
+ * @param ele 目标元素，当为全局拖拽时，传入数组表示所有元素共用一个全局拖拽函数
  * @param fn 推拽时触发的函数，传入x y和鼠标事件或点击事件
  * @param ondown 鼠标按下时执行的函数
  * @param global 是否全局拖拽，即拖拽后鼠标或手指离开元素后是否依然视为正在拖拽
  */
 export function useDrag(
-    ele: HTMLElement,
+    ele: HTMLElement | HTMLElement[],
     fn: DragFn,
     ondown?: DragFn,
-    onUp?: (e: MouseEvent | TouchEvent) => void,
+    onup?: (e: MouseEvent | TouchEvent) => void,
     global: boolean = false
 ) {
     let down = false;
-    ele.addEventListener('mousedown', e => {
+
+    const md = (e: MouseEvent) => {
         down = true;
         if (ondown) ondown(e.clientX, e.clientY, e);
-    });
-    ele.addEventListener('touchstart', e => {
+    };
+    const td = (e: TouchEvent) => {
         down = true;
         if (ondown) ondown(e.touches[0].clientX, e.touches[0].clientY, e);
-    });
+    };
+
+    if (ele instanceof Array) {
+        ele.forEach(v => {
+            v.addEventListener('mousedown', md);
+            v.addEventListener('touchstart', td);
+        });
+    } else {
+        ele.addEventListener('mousedown', md);
+        ele.addEventListener('touchstart', td);
+    }
 
     const target = global ? document : ele;
 
@@ -56,35 +67,30 @@ export function useDrag(
 
     const mouseUp = (e: MouseEvent) => {
         if (!down) return;
-        onUp && onUp(e);
+        onup && onup(e);
         down = false;
     };
 
     const touchUp = (e: TouchEvent) => {
         if (!down) return;
-        onUp && onUp(e);
+        onup && onup(e);
         down = false;
     };
 
-    target.addEventListener(
-        'mouseup',
-        mouseUp as EventListenerOrEventListenerObject
-    );
-    target.addEventListener(
-        'touchend',
-        touchUp as EventListenerOrEventListenerObject
-    );
-
+    if (target instanceof Array) {
+        target.forEach(v => {
+            v.addEventListener('mouseup', mouseUp);
+            v.addEventListener('touchend', touchUp);
+            v.addEventListener('mousemove', mouseFn);
+            v.addEventListener('touchmove', touchFn);
+        });
+    } else {
+        target.addEventListener('mouseup', mouseUp as EventListener);
+        target.addEventListener('touchend', touchUp as EventListener);
+        target.addEventListener('mousemove', mouseFn as EventListener);
+        target.addEventListener('touchmove', touchFn as EventListener);
+    }
     dragFnMap.set(fn, [mouseFn, touchFn, mouseUp, touchUp]);
-
-    target.addEventListener(
-        'mousemove',
-        mouseFn as EventListenerOrEventListenerObject
-    );
-    target.addEventListener(
-        'touchmove',
-        touchFn as EventListenerOrEventListenerObject
-    );
 }
 
 /**
@@ -131,3 +137,17 @@ export function useUp(ele: HTMLElement, fn: DragFn): void {
         fn(e.touches[0].clientX, e.touches[0].clientY, e);
     });
 }
+
+/**
+ * 当鼠标或手指按下时执行函数
+ * @param ele 目标元素
+ * @param fn 当鼠标或手指按下时执行的函数
+ */
+export function useDown(ele: HTMLElement, fn: DragFn): void {
+    ele.addEventListener('mousedown', e => {
+        fn(e.clientX, e.clientY, e);
+    });
+    ele.addEventListener('touchstart', e => {
+        fn(e.touches[0].clientX, e.touches[0].clientY, e);
+    });
+}
diff --git a/src/plugin/utils.ts b/src/plugin/utils.ts
index 66d531e..7132d72 100644
--- a/src/plugin/utils.ts
+++ b/src/plugin/utils.ts
@@ -73,7 +73,7 @@ export function parseCss(css: string): Partial<Record<CanParseCss, string>> {
 
     for (const one of styles) {
         const [key, data] = one.split(':');
-        const cssKey = key.replace(/\-([a-z])/g, $1 =>
+        const cssKey = key.replace(/\-([a-z])/g, (str, $1) =>
             $1.toUpperCase()
         ) as CanParseCss;
         res[cssKey] = data;
@@ -84,16 +84,22 @@ export function parseCss(css: string): Partial<Record<CanParseCss, string>> {
 /**
  * 使用打字机效果显示一段文字
  * @param str 要打出的字符串
- * @param time 打出总用时，默认1秒
+ * @param time 打出总用时，默认1秒，当第四个参数是true时，该项为每个字的平均时间
  * @param timing 打出时的速率曲线，默认为线性变化
+ * @param avr 是否将第二个参数视为每个字的平均时间
  * @returns 文字的响应式变量
  */
 export function type(
     str: string,
     time: number = 1000,
-    timing: TimingFn = n => n
+    timing: TimingFn = n => n,
+    avr: boolean = false
 ): Ref<string> {
     const toShow = eval('`' + str + '`') as string;
+    if (typeof toShow !== 'string') {
+        throw new TypeError('Error str type in typing!');
+    }
+    if (avr) time *= toShow.length;
     const ani = new Animation();
     const content = ref('');
     const all = toShow.length;
@@ -104,6 +110,7 @@ export function type(
         content.value = toShow.slice(0, Math.floor(now));
         if (Math.floor(now) === all) {
             ani.ticker.destroy();
+            content.value = toShow;
         }
     };
 
diff --git a/src/styles.less b/src/styles.less
index 82c437d..0f781d4 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -1,3 +1,5 @@
+// 部分全局css特效
+
 #root {
     position: absolute;
     display: none;
@@ -16,3 +18,35 @@
     font-family: 'normal';
     font-size: 1.6em;
 }
+
+.button-text {
+    cursor: pointer;
+    transition: color 0.2s linear;
+}
+
+.button-text:hover {
+    color: aqua;
+}
+
+.button-text:active {
+    color: aquamarine;
+}
+
+.selectable[selected='true'] {
+    animation: selected alternate 5s infinite ease-in-out;
+}
+
+@keyframes selected {
+    0% {
+        border: #0ff7 0.5px solid;
+        background-color: rgba(39, 251, 209, 0.143);
+    }
+    50% {
+        border: #0ffa 0.5px solid;
+        background-color: rgba(39, 251, 209, 0.284);
+    }
+    100% {
+        border: #0ff7 0.5px solid;
+        background-color: rgba(39, 251, 209, 0.143);
+    }
+}
diff --git a/src/types/control.d.ts b/src/types/control.d.ts
index 389cdd1..a688650 100644
--- a/src/types/control.d.ts
+++ b/src/types/control.d.ts
@@ -274,7 +274,7 @@ declare class control {
      * @param lv 级别的数字，不填则视为主角当前的级别
      * @returns 级别的名称，如果不存在就还是返回数字
      */
-    getLvName(lv?: number): string | number;
+    getLvName(lv?: number): string;
 
     /**
      * 获得下次升级需要的经验值。
diff --git a/src/types/core.d.ts b/src/types/core.d.ts
index 0f5e584..52ab6a5 100644
--- a/src/types/core.d.ts
+++ b/src/types/core.d.ts
@@ -42,6 +42,7 @@ type Core = {
             npcs: HTMLImageElement;
             npc48: HTMLImageElement;
             terrains: HTMLImageElement;
+            hero: HTMLImageElement;
             autotile: { [x: string]: HTMLImageElement };
             images: { [x: string]: HTMLImageElement };
             tilesets: { [x: string]: HTMLImageElement };
diff --git a/src/types/plugin.d.ts b/src/types/plugin.d.ts
index e1c9eb5..973cf8e 100644
--- a/src/types/plugin.d.ts
+++ b/src/types/plugin.d.ts
@@ -41,6 +41,9 @@ interface PluginDeclaration extends PluginUtils {
     /** 道具栏是否打开 */
     readonly toolOpened: Ref<boolean>;
 
+    /** 装备栏是否打开 */
+    readonly equipOpened: Ref<boolean>;
+
     /** ui栈 */
     readonly uiStack: Ref<Component[]>;
 
diff --git a/src/types/util.d.ts b/src/types/util.d.ts
index e69ab23..783dec9 100644
--- a/src/types/util.d.ts
+++ b/src/types/util.d.ts
@@ -552,6 +552,13 @@ type DetailedEnemy = {
     damageColor?: string;
 };
 
+type Equip = {
+    type: number | string;
+    animate: string;
+    value: Record<string, number>;
+    percentage: Record<string, number>;
+};
+
 type Item = {
     name: string;
     cls: 'items' | 'constants' | 'tools' | 'equips';
@@ -559,6 +566,7 @@ type Item = {
     hideInToolbox?: boolean;
     color?: string;
     css?: string;
+    equip?: Equip;
     [key: string]: any;
 };
 
diff --git a/src/ui/book.vue b/src/ui/book.vue
index 6b37976..080eada 100644
--- a/src/ui/book.vue
+++ b/src/ui/book.vue
@@ -2,7 +2,7 @@
 <template>
     <div id="book">
         <div id="tools">
-            <span id="back" class="tools" @click="exit"
+            <span id="back" class="button-text tools" @click="exit"
                 ><left-outlined />返回游戏</span
             >
         </div>
@@ -11,7 +11,7 @@
         </div>
         <Scroll
             v-else
-            style="width: 100%; height: 95%; font-family: normal"
+            style="width: 100%; height: 94%; font-family: normal"
             v-model:now="scroll"
             v-model:drag="drag"
         >
@@ -214,21 +214,11 @@ onUnmounted(async () => {
 }
 
 #tools {
-    height: 5%;
+    height: 6%;
 }
 
 .tools {
     border-bottom: 1px solid #ddd4;
-    cursor: pointer;
-    transition: color 0.2s linear;
-}
-
-.tools:hover {
-    color: aqua;
-}
-
-.tools:active {
-    color: aquamarine;
 }
 
 #none {
diff --git a/src/ui/bookDetail.vue b/src/ui/bookDetail.vue
index c3cac77..0a9a7be 100644
--- a/src/ui/bookDetail.vue
+++ b/src/ui/bookDetail.vue
@@ -22,7 +22,7 @@
                     <span></span>
                     <span
                         id="critical-more"
-                        class="more"
+                        class="button-text more"
                         @click="changePanel($event, 'critical')"
                         >详细临界信息 <right-outlined
                     /></span>
@@ -34,7 +34,7 @@
                 >
                     <span
                         id="enemy-pos"
-                        class="more"
+                        class="button-text more"
                         @click="changePanel($event, 'special')"
                         ><left-outlined /> 怪物特殊属性</span
                     >
@@ -163,16 +163,6 @@ onUnmounted(() => {
 
 .more {
     user-select: none;
-    cursor: pointer;
-    transition: color 0.2s linear;
-}
-
-.more:hover {
-    color: aqua;
-}
-
-.more:active {
-    color: aquamarine;
 }
 
 .detail-enter-active,
diff --git a/src/ui/equipbox.vue b/src/ui/equipbox.vue
new file mode 100644
index 0000000..6b8d463
--- /dev/null
+++ b/src/ui/equipbox.vue
@@ -0,0 +1,537 @@
+<template>
+    <div id="equipbox">
+        <div id="tools">
+            <span class="button-text tools" @click="exit"
+                ><left-outlined /> 返回游戏</span
+            >
+            <span class="button-text tools">道具栏 <right-outlined /></span>
+        </div>
+        <div id="equipbox-main">
+            <div id="equip-list">
+                <div id="filter">
+                    <a-select v-model:value="norm" class="select">
+                        <a-select-option v-for="t of normList" :value="t">{{
+                            t === 'none' ? '所有' : label(t)
+                        }}</a-select-option>
+                    </a-select>
+                    <a-divider type="vertical" class="divider"></a-divider>
+                    <a-select v-model:value="sType" class="select">
+                        <a-select-option value="value">数值</a-select-option>
+                        <a-select-option value="percentage"
+                            >百分比</a-select-option
+                        >
+                    </a-select>
+                    <a-divider type="vertical" class="divider"></a-divider>
+                    <span
+                        @click="changeSort()"
+                        class="button-text"
+                        id="sort-type"
+                    >
+                        <span v-if="sort === 'down'">
+                            <sort-ascending-outlined />
+                        </span>
+                        <span v-else><sort-descending-outlined /></span>
+                    </span>
+                </div>
+                <a-divider
+                    dashed
+                    style="border-color: #ddd4; margin: 1vh 0 1vh 0"
+                ></a-divider>
+                <Scroll :width="10" id="equip-scroll"
+                    ><div
+                        class="equip selectable"
+                        v-for="([id, num], i) of toShow"
+                        :selected="selected === i"
+                        @mousedown="selected = i"
+                        @touchstart="selected = i"
+                    >
+                        <div class="equip-icon">
+                            <BoxAnimate
+                                :id="id ?? 'none'"
+                                :width="32"
+                                :height="32"
+                                :noborder="true"
+                            ></BoxAnimate>
+                            <span class="equip-name">{{ all[id].name }}</span>
+                        </div>
+                        <span>×&nbsp;{{ num }}</span>
+                    </div></Scroll
+                >
+            </div>
+            <div id="equip-status">
+                <a-divider
+                    class="divider"
+                    :type="isMobile ? 'horizontal' : 'vertical'"
+                    dashed
+                    style="border-color: #ddd4"
+                ></a-divider>
+                <div id="equip-status-main">
+                    <div id="equip-now">
+                        <Scroll
+                            style="width: 100%; height: 30vh"
+                            :type="isMobile ? 'horizontal' : 'vertical'"
+                        >
+                            <div id="equip-now-div">
+                                <div
+                                    v-for="(name, i) of equipCol"
+                                    class="equip-now-one"
+                                >
+                                    <BoxAnimate
+                                        :id="equiped[i] ?? 'none'"
+                                    ></BoxAnimate>
+                                    <span>{{ name }}</span>
+                                </div>
+                            </div>
+                        </Scroll>
+                    </div>
+                    <a-divider
+                        dashed
+                        style="border-color: #ddd4; margin: 1vh 0 1vh 0"
+                    ></a-divider>
+                    <div id="equip-hero" v-if="!isMobile">
+                        <div id="hero-icon">
+                            <BoxAnimate
+                                id="hero"
+                                :width="48"
+                                :height="64"
+                                noborder
+                            ></BoxAnimate>
+                        </div>
+                        <div id="hero-status">
+                            <component :is="nowStatus"></component>
+                        </div>
+                    </div>
+                </div>
+                <a-divider
+                    v-if="!isMobile"
+                    class="divider"
+                    type="vertical"
+                    dashed
+                    style="border-color: #ddd4"
+                ></a-divider>
+            </div>
+            <div id="equip-desc">
+                <div id="equip-icon">
+                    <BoxAnimate :id="toShow[selected]?.[0]"></BoxAnimate>
+                    <span>{{ equip.name }}</span>
+                </div>
+                <div id="equip-type">
+                    <span>装备孔：{{ equip.equip?.type }}</span>
+                </div>
+                <a-divider
+                    dashed
+                    style="border-color: #ddd4; margin: 1vh 0 1vh 0"
+                ></a-divider>
+                <div id="equip-add">
+                    <span style="font-size: 3vh" id="title">增减属性</span>
+                    <Scroll style="width: 100%; height: 100%">
+                        <component :is="addStatus"></component>
+                    </Scroll>
+                </div>
+                <a-divider
+                    dashed
+                    style="border-color: #ddd4; margin: 1vh 0 1vh 0"
+                ></a-divider>
+                <div id="equip-desc-text">
+                    <span style="font-size: 3vh" id="title">装备介绍</span>
+                    <Scroll id="desc-text" style="height: 100%; width: 100%">
+                        <div v-if="!descText.value.startsWith('!!html')">
+                            {{ descText.value }}
+                        </div>
+                        <div v-else v-html="descText.value.slice(6)"></div>
+                    </Scroll>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {
+    LeftOutlined,
+    RightOutlined,
+    SortAscendingOutlined,
+    SortDescendingOutlined
+} from '@ant-design/icons-vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import Scroll from '../components/scroll.vue';
+import { getAddStatus, getEquips, getNowStatus } from '../plugin/ui/equipbox';
+import BoxAnimate from '../components/boxAnimate.vue';
+import { has, type } from '../plugin/utils';
+import { cancelGlobalDrag, isMobile, useDrag } from '../plugin/use';
+import { hyper } from 'mutate-animate';
+
+const equips = getEquips();
+const col = ref('all');
+const all = core.material.items;
+const selected = ref(0);
+const equipCol = core.status.globalAttribute.equipName;
+const equiped = core.status.hero.equipment;
+
+const draged = ref(false);
+
+/** 排序方式，down表示下面大上面小 */
+const sort = ref<'up' | 'down'>('down');
+const norm = ref('none');
+const sType = ref<'value' | 'percentage'>('value');
+
+// 攻击 防御 回血 额外攻击
+const normList = ['none', 'atk', 'def', 'hpmax', 'mana'];
+
+const label = core.getStatusLabel;
+
+watch(sort, n => {
+    selected.value = toShow.value.length - selected.value - 1;
+});
+
+watch(norm, n => {
+    selected.value = 0;
+});
+
+watch(sType, n => {
+    selected.value = 0;
+});
+
+/**
+ * 当前装备
+ */
+const equip = computed(() => {
+    const index = toShow.value[selected.value];
+    if (!has(index))
+        return {
+            name: '没有选择装备',
+            cls: 'equip',
+            text: '没有选择装备',
+            equip: { type: '无', value: {}, percentage: {}, animate: '' }
+        };
+    return all[index[0]];
+});
+
+const addStatus = computed(() => {
+    return getAddStatus(equip.value.equip!);
+});
+
+const descText = computed(() => {
+    if (equip.value.text.startsWith('!!html')) return ref(equip.value.text);
+    return type(equip.value.text, 25, hyper('sin', 'out'), true);
+});
+
+const nowStatus = computed(() => {
+    return getNowStatus(equip.value.equip);
+});
+
+/**
+ * 需要展示的装备，需要排序等操作
+ */
+const toShow = computed(() => {
+    const sortType = sort.value;
+    const sortNorm = norm.value;
+    const sortBy = sType.value;
+
+    const res = equips.filter(v => {
+        const e = all[v[0]].equip!;
+        const t = e.type;
+        if (sortNorm !== 'none') {
+            if (!has(e[sortBy][sortNorm])) return false;
+        }
+        if (col.value === 'all') return true;
+        if (typeof t === 'string') return t === col.value;
+        else return core.status.globalAttribute.equipName[t] === col.value;
+    });
+    if (sortNorm === 'none') return res;
+    else {
+        if (sortType === 'down') {
+            return res.sort((a, b) => {
+                const ea = all[a[0]].equip!;
+                const eb = all[b[0]].equip!;
+                return ea[sortBy][sortNorm] - eb[sortBy][sortNorm];
+            });
+        } else {
+            return res.sort((a, b) => {
+                const ea = all[a[0]].equip!;
+                const eb = all[b[0]].equip!;
+                return eb[sortBy][sortNorm] - ea[sortBy][sortNorm];
+            });
+        }
+    }
+});
+
+function changeSort() {
+    if (sort.value === 'down') {
+        sort.value = 'up';
+    } else {
+        sort.value = 'down';
+    }
+}
+
+function exit() {
+    core.plugin.equipOpened.value = false;
+}
+
+// ----- 交互函数
+let [fx, fy] = [0, 0];
+function dragEquip(x: number, y: number) {
+    if ((x - fx) ** 2 + (y - fy) ** 2 > 10 ** 2) {
+        draged.value = true;
+    }
+}
+
+onMounted(() => {
+    const equips = Array.from(
+        document.querySelectorAll('.equip')
+    ) as HTMLDivElement[];
+
+    // 绑定武器拖拽事件，使武器可以拖拽穿脱
+    useDrag(
+        equips,
+        dragEquip,
+        (x, y) => {
+            fx = x;
+            fy = y;
+        },
+        void 0,
+        true
+    );
+});
+
+onUnmounted(() => {
+    cancelGlobalDrag(dragEquip);
+});
+</script>
+
+<style lang="less" scoped>
+#equipbox {
+    width: 100%;
+    height: 100%;
+    user-select: none;
+}
+
+#tools {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    font-size: 2em;
+    height: 5vh;
+    justify-content: space-between;
+    font-family: 'normal';
+
+    .tools {
+        white-space: nowrap;
+    }
+}
+
+#equipbox-main {
+    height: 85vh;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    font-family: 'normal';
+    font-size: 2.5vh;
+}
+
+.divider {
+    height: 100%;
+}
+
+#equip-list {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 25%;
+
+    #filter {
+        margin-top: 2vh;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+
+        .select {
+            width: 100%;
+            font-family: 'normal';
+            font-size: 1.9vh;
+        }
+
+        #sort-type {
+            font-size: 1.9vh;
+            white-space: nowrap;
+        }
+    }
+
+    #equip-scroll {
+        height: 100%;
+    }
+}
+
+#equip-status {
+    display: flex;
+    flex-basis: 50%;
+    flex-direction: row;
+    justify-content: space-between;
+
+    #equip-status-main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+#equip-desc {
+    display: flex;
+    flex-basis: 25%;
+    flex-direction: column;
+    padding-top: 2vh;
+    align-items: center;
+
+    #equip-icon {
+        width: 80%;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        border-bottom: 1px solid #ddd4;
+        padding-bottom: 1%;
+
+        span {
+            margin-left: 5%;
+        }
+    }
+
+    #equip-add {
+        height: 50%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        #title {
+            width: 100%;
+            text-align: center;
+        }
+
+        .equip-add-detail {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+
+    #equip-desc-text {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        #title {
+            width: 100%;
+            text-align: center;
+        }
+    }
+}
+
+#equip-now {
+    width: 100%;
+
+    #equip-now-div {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        padding-left: 5%;
+
+        .equip-now-one {
+            flex-basis: 33.3%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin: 3% 0 3% 0;
+
+            span {
+                margin-left: 10%;
+            }
+        }
+    }
+}
+
+#equip-hero {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#hero-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10% 0 10% 0;
+}
+
+#hero-status {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+
+    .hero-status-one {
+        display: flex;
+        flex-direction: row;
+        flex-basis: 50%;
+        width: 100%;
+        text-align: right;
+        font-size: 2.9vh;
+        white-space: nowrap;
+
+        .hero-status-label {
+            width: 100%;
+            margin-right: 5%;
+        }
+
+        .hero-status-value {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+        }
+    }
+}
+
+.equip {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1vh 1vw 0 0.5vw;
+    padding: 0.5vh 0.5vw 0.5vh 0.5vw;
+    border: #0000 0.5px solid;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    .equip-icon {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .equip-name {
+            margin-left: 5%;
+        }
+    }
+}
+
+@media screen and (max-width: 600px) {
+    #equipbox {
+        padding: 5%;
+    }
+
+    #equipbox-main {
+        height: 100%;
+        flex-direction: column-reverse;
+    }
+
+    #equip-now-div {
+        flex-wrap: nowrap;
+    }
+}
+</style>
diff --git a/src/ui/toolbox.vue b/src/ui/toolbox.vue
index dd65498..ad96933 100644
--- a/src/ui/toolbox.vue
+++ b/src/ui/toolbox.vue
@@ -1,10 +1,10 @@
 <template>
     <div id="toolbox">
         <div id="tools">
-            <span class="item-type-mobile tools" @click="exit"
+            <span class="button-text tools" @click="exit"
                 ><left-outlined /> 返回游戏</span
             >
-            <span class="item-type-mobile tools" @click="exit"
+            <span class="button-text tools" @click="exit"
                 >装备栏 <right-outlined
             /></span>
         </div>
@@ -16,7 +16,7 @@
                     </div>
                     <div v-else id="item-type-mobile">
                         <span
-                            class="item-type-mobile"
+                            class="button-text"
                             @click="mode = 'tools'"
                             :selected="mode === 'tools'"
                             >消耗道具</span
@@ -27,7 +27,7 @@
                             type="vertical"
                         ></a-divider>
                         <span
-                            class="item-type-mobile"
+                            class="button-text"
                             @click="mode = 'constants'"
                             :selected="mode === 'constants'"
                             >永久道具</span
@@ -39,7 +39,7 @@
                     ></a-divider>
                     <Scroll class="item-list" :width="10">
                         <div
-                            class="item"
+                            class="item selectable"
                             v-for="[id, num] of items[cls]"
                             :selected="selected === id"
                             @click="
@@ -145,7 +145,7 @@ const descText = computed(() => {
     const s = selected.value;
     if (s === 'none') return ref('没有选择道具');
     if (all[s].text.startsWith('!!html')) return ref(all[s].text);
-    return type(all[s].text, 600, hyper('sin', 'out'));
+    return type(all[s].text, 25, hyper('sin', 'out'), true);
 });
 
 /**
@@ -302,20 +302,10 @@ onUnmounted(() => {
     align-items: center;
 }
 
-.item-type-mobile {
-    cursor: pointer;
-    transition: color 0.2s linear;
-}
-
-.item-type-mobile:hover,
-.item-type-mobile[selected='true'] {
+.button-text[selected='true'] {
     color: aqua;
 }
 
-.item-type-mobile:active {
-    color: aquamarine;
-}
-
 .item {
     display: flex;
     flex-direction: row;
@@ -339,10 +329,6 @@ onUnmounted(() => {
     }
 }
 
-.item[selected='true'] {
-    animation: selected alternate 5s infinite ease-in-out;
-}
-
 .divider {
     height: 100%;
 }
@@ -387,21 +373,6 @@ onUnmounted(() => {
     }
 }
 
-@keyframes selected {
-    0% {
-        border: #0ff7 0.5px solid;
-        background-color: rgba(39, 251, 209, 0.143);
-    }
-    50% {
-        border: #0ffa 0.5px solid;
-        background-color: rgba(39, 251, 209, 0.284);
-    }
-    100% {
-        border: #0ff7 0.5px solid;
-        background-color: rgba(39, 251, 209, 0.143);
-    }
-}
-
 @media screen and (max-width: 600px) {
     #toolbox {
         padding: 5%;