feat: unify project responsive layouts

components/AppButton.vue

@@ -3,7 +3,11 @@
     class="app-button"
     :class="[
       `app-button--${type}`,
-      { 'app-button--block': block, 'app-button--disabled': disabled },
+      {
+        'app-button--block': block,
+        'app-button--compact': compact,
+        'app-button--disabled': disabled,
+      },
     ]"
     :disabled="disabled"
     :aria-label="label"
@@ -24,6 +28,7 @@ const props = defineProps({
   label: { type: String, default: "" },
   type: { type: String, default: "primary" },
   block: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
 });
 const emit = defineEmits(["click"]);
@@ -40,6 +45,8 @@ const handleClick = (event) => {
 </script>
 
 <style scoped lang="scss">
+@use "../styles/adaptive-frame-profiles.scss" as adaptive;
+
 .app-button {
   display: inline-grid;
   width: 420rpx;
@@ -60,6 +67,23 @@ const handleClick = (event) => {
   display: grid;
   width: 100%;
 }
+.app-button--compact {
+}
+.app-button--compact.app-button--primary {
+  @include adaptive.adaptive-scroll-button(primary);
+}
+.app-button--compact.app-button--secondary {
+  @include adaptive.adaptive-scroll-button(secondary);
+}
+.app-button--compact .app-button__skin {
+  display: none;
+}
+.app-button--compact .app-button__label {
+  padding: 0;
+  font-size: 23rpx;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
 .app-button__skin {
   width: 100%;
   height: 100%;