From f57ed5967458fa260b76f22a75e1f7b918260e04 Mon Sep 17 00:00:00 2001 From: hyruleboss Date: Tue, 29 Jul 2025 22:46:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96PC=E7=AB=AF=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=EF=BC=88=E5=B1=80=E4=B8=AD=E6=98=BE=E7=A4=BA=EF=BC=89?= =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F=E7=BB=86=E8=8A=82=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/App.vue | 3 +- src/assets/styles/mixins.scss | 56 ++++++++++++++++++++++ src/assets/styles/overwritten_css_var.scss | 5 ++ src/components/ArtifactPanel.vue | 1 - src/components/NavBar.vue | 9 ++-- src/components/TabBar.vue | 7 +++ src/layout/AppLayout.vue | 13 ----- src/views/FileEditor.vue | 1 + src/views/Sub.vue | 5 ++ src/views/SubEditor.vue | 1 + src/views/share/SharePopup.vue | 2 +- vite.config.ts | 2 +- 13 files changed, 85 insertions(+), 22 deletions(-) create mode 100644 src/assets/styles/mixins.scss diff --git a/package.json b/package.json index 8b81b5e6c..6fc53b6d6 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index 9e86e2964..b25d294ca 100644 --- a/src/App.vue +++ b/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; diff --git a/src/assets/styles/mixins.scss b/src/assets/styles/mixins.scss new file mode 100644 index 000000000..4d17de5a0 --- /dev/null +++ b/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; diff --git a/src/assets/styles/overwritten_css_var.scss b/src/assets/styles/overwritten_css_var.scss index 1d63ee38b..d32bc7759 100644 --- a/src/assets/styles/overwritten_css_var.scss +++ b/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; diff --git a/src/components/ArtifactPanel.vue b/src/components/ArtifactPanel.vue index 3eaf8acb4..cdec7d4b9 100644 --- a/src/components/ArtifactPanel.vue +++ b/src/components/ArtifactPanel.vue @@ -394,7 +394,6 @@ } } .nut-dialog { - width: 88vw; .nut-dialog__content { max-height: 72vh !important; diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 47685cb26..7d8a1356a 100644 --- a/src/components/NavBar.vue +++ b/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; diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue index 4dda8000d..f5b5461b8 100644 --- a/src/components/TabBar.vue +++ b/src/components/TabBar.vue @@ -60,6 +60,9 @@ diff --git a/src/views/FileEditor.vue b/src/views/FileEditor.vue index b5946d84e..751c67894 100644 --- a/src/views/FileEditor.vue +++ b/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; diff --git a/src/views/Sub.vue b/src/views/Sub.vue index 1ba1683ce..f35c097a5 100644 --- a/src/views/Sub.vue +++ b/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); diff --git a/src/views/SubEditor.vue b/src/views/SubEditor.vue index 819a3b09b..2f71d5c7d 100644 --- a/src/views/SubEditor.vue +++ b/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; diff --git a/src/views/share/SharePopup.vue b/src/views/share/SharePopup.vue index 180dafb9f..92efd0b0e 100644 --- a/src/views/share/SharePopup.vue +++ b/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 { diff --git a/vite.config.ts b/vite.config.ts index af86e0bc3..5d505fef7 100644 --- a/vite.config.ts +++ b/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';`, }, }, },