[pull] master from sub-store-org:master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.15.60",
+  "version": "2.15.61",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/App.vue

@@ -408,6 +408,7 @@ function checkNeedConfiguration() {
     "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "ST Heiti",
     SimHei, sans-serif;
   display: flex;
+  align-items: center;
   flex-direction: column;
   position: absolute;
   min-height: 100%;
@@ -419,10 +420,10 @@ function checkNeedConfiguration() {
     // overflow: hidden;
     flex: 1;
     display: flex;
-    align-items: center;
     flex-direction: column;
     overflow: auto;
     width: 100%;
+    @include responsive-container-width;
   }
 
   overflow-y: auto;

src/assets/styles/mixins.scss

@@ -0,0 +1,56 @@
+// 响应式容器宽度 mixin
+@mixin responsive-container-width {
+  width: 100%;
+
+  @media screen and (min-width: 600px) {
+    max-width: 85%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 630px;
+  }
+
+  @media screen and (min-width: 900px) {
+    max-width: 700px;
+  }
+
+  @media screen and (min-width: 1200px) {
+    max-width: 900px;
+  }
+}
+
+// 居中固定定位容器 mixin
+@mixin centered-fixed-container {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  @include responsive-container-width;
+}
+
+// 弹窗居中 mixin
+@mixin popup-centered {
+  @media screen and (min-width: 600px) {
+    left: auto !important;
+    right: auto !important;
+    inset-inline: 0 !important;
+    margin-inline: auto !important;
+    @include responsive-container-width;
+  }
+}
+
+@mixin tabbar-responsive {
+  @include centered-fixed-container;
+  border-radius: 20px;
+}
+
+// 响应式断点变量
+$breakpoint-sm: 600px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 900px;
+$breakpoint-xl: 1200px;
+
+// 容器最大宽度变量
+$container-width-sm: 85%;
+$container-width-md: 630px;
+$container-width-lg: 700px;
+$container-width-xl: 900px;

src/assets/styles/overwritten_css_var.scss

@@ -33,6 +33,11 @@
 .nut-popup {
   -webkit-user-select: none;
   user-select: none;
+
+  &.popup-bottom {
+    @include popup-centered;
+  }
+
   .nut-picker-roller {
     @media screen and (min-width: 560px) {
       transition: transform 300ms 0s !important;

src/components/ArtifactPanel.vue

@@ -394,7 +394,6 @@
       }
     }
     .nut-dialog {
-      width: 88vw;
       .nut-dialog__content {
         max-height: 72vh !important;
 

src/components/NavBar.vue

@@ -257,12 +257,10 @@ watchEffect(() => {
   padding-top: v-bind(Pwa_top);
 }
 .nav-bar-wrapper {
-  position: fixed;
-  width: 100%;
   top: 0;
   height: v-bind(navBarHeight);
   z-index: 20;
-
+  @include centered-fixed-container;
   nav {
     .nut-navbar {
       padding-top: v-bind(navBartop);
@@ -273,7 +271,10 @@ watchEffect(() => {
       -webkit-backdrop-filter: blur(var(--nav-bar-blur));
       background: var(--nav-bar-color);
       border-bottom: var(--divider-color) solid 1px;
-
+      @media screen and (min-width: 768px) {
+        border-radius: var(--item-card-radios);
+        overflow: hidden;
+      }
       .nut-navbar__title {
         min-width: 53%;
         margin: 0 auto;

src/components/TabBar.vue

@@ -60,13 +60,20 @@
 <style lang="scss" scoped>
   .tab-bar-wrapper {
     z-index: 101;
+    bottom: 0;
+    @include centered-fixed-container;
+
     .tabbar {
       padding-top: 8px;
       padding-bottom: v-bind('style.paddingBottom');
       box-shadow: none;
       backdrop-filter: blur(var(--tab-bar-blur));
       -webkit-backdrop-filter: blur(var(--tab-bar-blur));
       background: var(--tab-bar-color);
+      @media screen and (min-width: 768px) {
+        border-radius: var(--item-card-radios);
+        overflow: hidden;
+      }
     }
 
     :deep(.tabbar-item) {

src/layout/AppLayout.vue

@@ -41,19 +41,6 @@
     flex: 1;
     padding: 56px 0 v-bind(height) 0;
     overflow: auto;
-    width: 100%;
-    @media screen and (min-width: 600px) {
-      max-width: 85%;
-    }
-    @media screen and (min-width: 768px) {
-      max-width: 630px;
-    }
-    @media screen and (min-width: 900px) {
-      max-width: 700px;
-    }
-    @media screen and (min-width: 1200px) {
-      max-width: 900px;
-    }
   }
 
 </style>

src/views/FileEditor.vue

@@ -940,6 +940,7 @@ const handleEditGlobalClick = () => {
   z-index: 20;
   background: var(--background-color);
   border-top: 1px solid var(--divider-color);
+  @include centered-fixed-container;
 
   .btn {
     border-radius: 8px;

src/views/Sub.vue

@@ -834,6 +834,11 @@ const importTips = () => {
     backdrop-filter: blur(var(--nav-bar-blur));
     -webkit-backdrop-filter: blur(var(--nav-bar-blur));
     background: var(--nav-bar-color);
+    @include centered-fixed-container;
+      @media screen and (min-width: 768px) {
+        border-radius: var(--item-card-radios);
+        overflow: hidden;
+      }
     .tag {
       font-size: 12px;
       color: var(--second-text-color);

src/views/SubEditor.vue

@@ -1404,6 +1404,7 @@ const handleEditGlobalClick = () => {
   z-index: 20;
   background: var(--background-color);
   border-top: 1px solid var(--divider-color);
+  @include centered-fixed-container;
 
   .btn {
     border-radius: 8px;

src/views/share/SharePopup.vue

@@ -5,7 +5,6 @@
     pop-class="share-popup"
     position="center"
     :style="{
-      width:'88vw',
       padding: '20px 12px 0 12px',
       backgroundColor: 'var(--background-color)',
     }"
@@ -595,6 +594,7 @@ defineExpose({ show, hide, close });
     display: flex;
     justify-content: space-between;
     align-items: center;
+    min-width: 300px;
     .share-info-form {
       width: 100%;
       .nut-form {

vite.config.ts

@@ -183,7 +183,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
       preprocessorOptions: {
         scss: {
           // 配置 自定义覆盖主题 和 nutui 全局 scss 变量
-          additionalData: `@import "@/assets/styles/custom_variables.scss";@import "@nutui/nutui/dist/styles/variables-jdt.scss";`,
+          additionalData: `@import "@/assets/styles/custom_variables.scss";@import "@nutui/nutui/dist/styles/variables-jdt.scss";@import '@/assets/styles/mixins.scss';`,
         },
       },
     },