修改完成

components/AppButton.vue

@@ -1,10 +1,12 @@
 <template>
-  <view
+  <button
     class="app-button"
     :class="[
       `app-button--${type}`,
       { 'app-button--block': block, 'app-button--disabled': disabled },
     ]"
+    :disabled="disabled"
+    :aria-label="label"
     :hover-class="disabled ? 'none' : 'app-button--pressed'"
     @click="handleClick"
   >
@@ -12,7 +14,7 @@
     <text class="app-button__label"
       ><slot>{{ label }}</slot></text
     >
-  </view>
+  </button>
 </template>
 
 <script setup>
@@ -39,28 +41,35 @@ const handleClick = (event) => {
 
 <style scoped lang="scss">
 .app-button {
-  position: relative;
-  display: inline-flex;
+  display: inline-grid;
   width: 420rpx;
   max-width: 100%;
   min-height: 88rpx;
-  align-items: center;
-  justify-content: center;
+  place-items: center;
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  line-height: normal;
+}
+.app-button::after {
+  border: 0;
 }
 .app-button--block {
-  display: flex;
+  display: grid;
   width: 100%;
 }
 .app-button__skin {
-  position: absolute;
-  inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
 }
+.app-button__skin,
+.app-button__label {
+  grid-area: 1 / 1;
+}
 .app-button__label {
-  position: relative;
   z-index: 1;
   padding: 0 38rpx;
   color: #fffaf0;