From b4c36923ead324c0ccac2414fe20c3f4ad3145f3 Mon Sep 17 00:00:00 2001 From: MSuMshk <2039814060@qq.com> Date: Wed, 11 Mar 2026 14:27:01 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=BF=81=E7=A7=BB=20sass=20?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E8=AF=AD=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 2 +- src/app.scss | 3 +-- src/app.ts | 1 + src/components/cart-drawer/index.vue | 2 +- src/components/cart-drawer/styles/base.scss | 2 +- src/components/cart-drawer/styles/empty.scss | 2 +- src/components/cart-drawer/styles/footer.scss | 2 +- src/components/cart-drawer/styles/index.scss | 8 ++++---- src/components/cart-drawer/styles/list.scss | 2 +- src/components/page-hero/index.vue | 2 +- src/components/product-card/index.vue | 2 +- src/components/product-card/styles.scss | 2 +- src/components/scene-switcher/index.vue | 2 +- src/components/spec-popup/index.vue | 2 +- src/components/spec-popup/styles/base.scss | 2 +- src/components/spec-popup/styles/footer.scss | 2 +- src/components/spec-popup/styles/header.scss | 2 +- src/components/spec-popup/styles/index.scss | 10 +++++----- src/components/spec-popup/styles/options.scss | 2 +- src/components/spec-popup/styles/stepper.scss | 2 +- src/pages/address/index.vue | 2 +- src/pages/dinein/confirm/index.vue | 2 +- src/pages/home/index.vue | 2 +- src/pages/home/styles/base.scss | 2 +- src/pages/home/styles/category.scss | 2 +- src/pages/home/styles/fab.scss | 2 +- src/pages/home/styles/index.scss | 10 +++++----- src/pages/home/styles/trust.scss | 2 +- src/pages/menu/index.vue | 2 +- src/pages/menu/styles/base.scss | 2 +- src/pages/menu/styles/cart.scss | 2 +- src/pages/menu/styles/index.scss | 6 +++--- src/pages/menu/styles/sections.scss | 2 +- src/pages/order/detail/index.vue | 2 +- src/pages/order/detail/styles/base.scss | 2 +- src/pages/order/detail/styles/bottom.scss | 2 +- src/pages/order/detail/styles/goods.scss | 2 +- src/pages/order/detail/styles/index.scss | 8 ++++---- src/pages/order/detail/styles/timeline.scss | 2 +- src/pages/orders/index.vue | 2 +- src/pages/profile/index.vue | 2 +- src/pages/store/select/index.vue | 2 +- src/pages/trade/checkout/index.vue | 2 +- src/pages/trade/checkout/styles/base.scss | 2 +- src/pages/trade/checkout/styles/cards.scss | 2 +- src/pages/trade/checkout/styles/fees.scss | 2 +- src/pages/trade/checkout/styles/index.scss | 8 ++++---- src/pages/trade/checkout/styles/submit.scss | 2 +- src/pages/trade/success/index.vue | 2 +- src/styles/_mixins.scss | 5 +++-- 50 files changed, 71 insertions(+), 70 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index a216c1f..2b792d1 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -35,7 +35,7 @@ - 静态样式禁止直接写在模板的 `style=""` 上；改成语义类名并落到 `scss` 文件。 ## Vue 文件拆分规范 -- 页面入口固定为 `src/pages/**/index.vue`，只保留模板、薄胶水脚本和 `@import './styles/index.scss'`；业务加载、计算、提交流程统一下沉到 `composables/useXxxPage.ts`。 +- 页面入口固定为 `src/pages/**/index.vue`，只保留模板、薄胶水脚本和 `@use './styles/index.scss'`；业务加载、计算、提交流程统一下沉到 `composables/useXxxPage.ts`。 - 复杂页面必须继续二级拆分到 `src/pages/**/composables//`，至少按 `helpers.ts`、`*actions.ts`、`constants.ts` 这类职责拆开，不要把大段流程重新塞回 `useXxxPage.ts`。 - 页面样式固定放在 `src/pages/**/styles/`，`styles/index.scss` 只负责聚合；当样式超过 150 行或已经出现多个视觉域时，必须拆成 `base.scss`、`card.scss`、`submit.scss` 这类分片。 - 根组件固定使用目录入口：`src/components//index.vue`，并通过 `@/components//index.vue` 引用，不再新增平铺的 `src/components/*.vue`。 diff --git a/src/app.scss b/src/app.scss index ff3cb19..e4cdd93 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,5 +1,4 @@ -@import '@nutui/nutui-taro/dist/style.css'; -@import './styles/variables'; +@use './styles/variables' as *; page { min-height: 100%; diff --git a/src/app.ts b/src/app.ts index 1dead71..c68813c 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,4 +1,5 @@ import { createApp } from 'vue' +import '@nutui/nutui-taro/dist/style.css' import './app.scss' import { setRequestHeaderProvider } from '@/services' import { pinia, useAppStore, useCustomerStore } from '@/stores' diff --git a/src/components/cart-drawer/index.vue b/src/components/cart-drawer/index.vue index eaa8a2e..2a01d47 100644 --- a/src/components/cart-drawer/index.vue +++ b/src/components/cart-drawer/index.vue @@ -112,5 +112,5 @@ const emit = defineEmits<{ diff --git a/src/components/cart-drawer/styles/base.scss b/src/components/cart-drawer/styles/base.scss index 599e491..d3aa777 100644 --- a/src/components/cart-drawer/styles/base.scss +++ b/src/components/cart-drawer/styles/base.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .cart-drawer { position: fixed; diff --git a/src/components/cart-drawer/styles/empty.scss b/src/components/cart-drawer/styles/empty.scss index 541f13d..02e5554 100644 --- a/src/components/cart-drawer/styles/empty.scss +++ b/src/components/cart-drawer/styles/empty.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .cart-drawer__empty { display: flex; diff --git a/src/components/cart-drawer/styles/footer.scss b/src/components/cart-drawer/styles/footer.scss index 3eaad5d..d16a2ae 100644 --- a/src/components/cart-drawer/styles/footer.scss +++ b/src/components/cart-drawer/styles/footer.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .cart-drawer__footer { flex-shrink: 0; diff --git a/src/components/cart-drawer/styles/index.scss b/src/components/cart-drawer/styles/index.scss index c70033e..a0cd4f9 100644 --- a/src/components/cart-drawer/styles/index.scss +++ b/src/components/cart-drawer/styles/index.scss @@ -1,4 +1,4 @@ -@import './base.scss'; -@import './list.scss'; -@import './footer.scss'; -@import './empty.scss'; +@forward './base.scss'; +@forward './list.scss'; +@forward './footer.scss'; +@forward './empty.scss'; diff --git a/src/components/cart-drawer/styles/list.scss b/src/components/cart-drawer/styles/list.scss index 968bc08..ec9ead7 100644 --- a/src/components/cart-drawer/styles/list.scss +++ b/src/components/cart-drawer/styles/list.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .cart-drawer__list { padding: 0 20px; diff --git a/src/components/page-hero/index.vue b/src/components/page-hero/index.vue index 4c72984..437aea2 100644 --- a/src/components/page-hero/index.vue +++ b/src/components/page-hero/index.vue @@ -26,5 +26,5 @@ const { hasExtra } = usePageHero() diff --git a/src/components/product-card/index.vue b/src/components/product-card/index.vue index 6d0b71f..96565e5 100644 --- a/src/components/product-card/index.vue +++ b/src/components/product-card/index.vue @@ -62,5 +62,5 @@ const { tagClass } = useProductCard(props) diff --git a/src/components/product-card/styles.scss b/src/components/product-card/styles.scss index e067441..438b39a 100644 --- a/src/components/product-card/styles.scss +++ b/src/components/product-card/styles.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables'; +@use '../../styles/variables' as *; .product-card { background: $card; diff --git a/src/components/scene-switcher/index.vue b/src/components/scene-switcher/index.vue index 04ea08a..51742f4 100644 --- a/src/components/scene-switcher/index.vue +++ b/src/components/scene-switcher/index.vue @@ -42,5 +42,5 @@ const { handleSelect } = useSceneSwitcher(emit) diff --git a/src/components/spec-popup/index.vue b/src/components/spec-popup/index.vue index 5bed546..a8f1395 100644 --- a/src/components/spec-popup/index.vue +++ b/src/components/spec-popup/index.vue @@ -149,5 +149,5 @@ const { tagClass } = useSpecPopup() diff --git a/src/components/spec-popup/styles/base.scss b/src/components/spec-popup/styles/base.scss index e348854..3235cc8 100644 --- a/src/components/spec-popup/styles/base.scss +++ b/src/components/spec-popup/styles/base.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .spec-popup { position: fixed; diff --git a/src/components/spec-popup/styles/footer.scss b/src/components/spec-popup/styles/footer.scss index d2e26b2..f3aefe4 100644 --- a/src/components/spec-popup/styles/footer.scss +++ b/src/components/spec-popup/styles/footer.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .spec-popup__footer { padding: 14px 20px; diff --git a/src/components/spec-popup/styles/header.scss b/src/components/spec-popup/styles/header.scss index f9b3d1f..92991c8 100644 --- a/src/components/spec-popup/styles/header.scss +++ b/src/components/spec-popup/styles/header.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .spec-popup__header { display: flex; diff --git a/src/components/spec-popup/styles/index.scss b/src/components/spec-popup/styles/index.scss index 984fec8..fc09f8b 100644 --- a/src/components/spec-popup/styles/index.scss +++ b/src/components/spec-popup/styles/index.scss @@ -1,5 +1,5 @@ -@import './base.scss'; -@import './header.scss'; -@import './options.scss'; -@import './stepper.scss'; -@import './footer.scss'; +@forward './base.scss'; +@forward './header.scss'; +@forward './options.scss'; +@forward './stepper.scss'; +@forward './footer.scss'; diff --git a/src/components/spec-popup/styles/options.scss b/src/components/spec-popup/styles/options.scss index e4800c7..4412feb 100644 --- a/src/components/spec-popup/styles/options.scss +++ b/src/components/spec-popup/styles/options.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .spec-popup__group { padding: 16px 20px; diff --git a/src/components/spec-popup/styles/stepper.scss b/src/components/spec-popup/styles/stepper.scss index 66c6999..640bc98 100644 --- a/src/components/spec-popup/styles/stepper.scss +++ b/src/components/spec-popup/styles/stepper.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .spec-popup__stepper-row { display: flex; diff --git a/src/pages/address/index.vue b/src/pages/address/index.vue index 73a12af..a35f6f3 100644 --- a/src/pages/address/index.vue +++ b/src/pages/address/index.vue @@ -37,6 +37,6 @@ const { diff --git a/src/pages/dinein/confirm/index.vue b/src/pages/dinein/confirm/index.vue index 0a4ca42..8903a7a 100644 --- a/src/pages/dinein/confirm/index.vue +++ b/src/pages/dinein/confirm/index.vue @@ -21,6 +21,6 @@ const { handleInput, handleSave, tableNo } = useDineInConfirmPage() diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 5771a6b..a05f1d5 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -130,5 +130,5 @@ const { diff --git a/src/pages/home/styles/base.scss b/src/pages/home/styles/base.scss index ae376c9..eddc118 100644 --- a/src/pages/home/styles/base.scss +++ b/src/pages/home/styles/base.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .home-page { min-height: 100vh; diff --git a/src/pages/home/styles/category.scss b/src/pages/home/styles/category.scss index 6d26aab..fe7587e 100644 --- a/src/pages/home/styles/category.scss +++ b/src/pages/home/styles/category.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .home-page__categories { display: grid; diff --git a/src/pages/home/styles/fab.scss b/src/pages/home/styles/fab.scss index 0c16116..aa1843d 100644 --- a/src/pages/home/styles/fab.scss +++ b/src/pages/home/styles/fab.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .home-page__fab { position: fixed; diff --git a/src/pages/home/styles/index.scss b/src/pages/home/styles/index.scss index 4461c65..4fa2d89 100644 --- a/src/pages/home/styles/index.scss +++ b/src/pages/home/styles/index.scss @@ -1,5 +1,5 @@ -@import './base.scss'; -@import './banner.scss'; -@import './category.scss'; -@import './trust.scss'; -@import './fab.scss'; +@forward './base.scss'; +@forward './banner.scss'; +@forward './category.scss'; +@forward './trust.scss'; +@forward './fab.scss'; diff --git a/src/pages/home/styles/trust.scss b/src/pages/home/styles/trust.scss index 5691471..50abb4f 100644 --- a/src/pages/home/styles/trust.scss +++ b/src/pages/home/styles/trust.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .home-page__trust { background: $card; diff --git a/src/pages/menu/index.vue b/src/pages/menu/index.vue index 5d15e03..a64c2b4 100644 --- a/src/pages/menu/index.vue +++ b/src/pages/menu/index.vue @@ -162,5 +162,5 @@ const { diff --git a/src/pages/menu/styles/base.scss b/src/pages/menu/styles/base.scss index e361964..3045ce7 100644 --- a/src/pages/menu/styles/base.scss +++ b/src/pages/menu/styles/base.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .menu-page { min-height: 100vh; diff --git a/src/pages/menu/styles/cart.scss b/src/pages/menu/styles/cart.scss index d4e8e28..9e2ffe1 100644 --- a/src/pages/menu/styles/cart.scss +++ b/src/pages/menu/styles/cart.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .menu-page__cart-bar { position: fixed; diff --git a/src/pages/menu/styles/index.scss b/src/pages/menu/styles/index.scss index 63057eb..1de82b9 100644 --- a/src/pages/menu/styles/index.scss +++ b/src/pages/menu/styles/index.scss @@ -1,3 +1,3 @@ -@import './base.scss'; -@import './sections.scss'; -@import './cart.scss'; +@forward './base.scss'; +@forward './sections.scss'; +@forward './cart.scss'; diff --git a/src/pages/menu/styles/sections.scss b/src/pages/menu/styles/sections.scss index 8547a92..2a2f308 100644 --- a/src/pages/menu/styles/sections.scss +++ b/src/pages/menu/styles/sections.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables'; +@use '../../../styles/variables' as *; .menu-page__section { margin-top: 4px; diff --git a/src/pages/order/detail/index.vue b/src/pages/order/detail/index.vue index 6b57c08..33ab8ce 100644 --- a/src/pages/order/detail/index.vue +++ b/src/pages/order/detail/index.vue @@ -208,5 +208,5 @@ const { diff --git a/src/pages/order/detail/styles/base.scss b/src/pages/order/detail/styles/base.scss index d61c510..550850f 100644 --- a/src/pages/order/detail/styles/base.scss +++ b/src/pages/order/detail/styles/base.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/variables'; +@use '../../../../styles/variables' as *; .od-page { min-height: 100vh; diff --git a/src/pages/order/detail/styles/bottom.scss b/src/pages/order/detail/styles/bottom.scss index 8e47fa9..e01ca58 100644 --- a/src/pages/order/detail/styles/bottom.scss +++ b/src/pages/order/detail/styles/bottom.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/variables'; +@use '../../../../styles/variables' as *; .od-page__bottom-bar { position: fixed; diff --git a/src/pages/order/detail/styles/goods.scss b/src/pages/order/detail/styles/goods.scss index dc4a4b3..5f14c4e 100644 --- a/src/pages/order/detail/styles/goods.scss +++ b/src/pages/order/detail/styles/goods.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/variables'; +@use '../../../../styles/variables' as *; .od-page__goods-section { padding: 18px 20px; diff --git a/src/pages/order/detail/styles/index.scss b/src/pages/order/detail/styles/index.scss index e7ae01a..8195040 100644 --- a/src/pages/order/detail/styles/index.scss +++ b/src/pages/order/detail/styles/index.scss @@ -1,4 +1,4 @@ -@import './base.scss'; -@import './timeline.scss'; -@import './goods.scss'; -@import './bottom.scss'; +@forward './base.scss'; +@forward './timeline.scss'; +@forward './goods.scss'; +@forward './bottom.scss'; diff --git a/src/pages/order/detail/styles/timeline.scss b/src/pages/order/detail/styles/timeline.scss index f23f541..7056cd6 100644 --- a/src/pages/order/detail/styles/timeline.scss +++ b/src/pages/order/detail/styles/timeline.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/variables'; +@use '../../../../styles/variables' as *; .od-page__timeline-section, .od-page__info-section { diff --git a/src/pages/orders/index.vue b/src/pages/orders/index.vue index da3492b..b047935 100644 --- a/src/pages/orders/index.vue +++ b/src/pages/orders/index.vue @@ -83,6 +83,6 @@ const { diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue index a5587fb..5c35577 100644 --- a/src/pages/profile/index.vue +++ b/src/pages/profile/index.vue @@ -66,5 +66,5 @@ const { diff --git a/src/pages/store/select/index.vue b/src/pages/store/select/index.vue index 81252a3..bd43d40 100644 --- a/src/pages/store/select/index.vue +++ b/src/pages/store/select/index.vue @@ -56,5 +56,5 @@ const { appStore, filteredStores, handleInput, keyword, selectStore } = useStore diff --git a/src/pages/trade/checkout/index.vue b/src/pages/trade/checkout/index.vue index aec1758..656403d 100644 --- a/src/pages/trade/checkout/index.vue +++ b/src/pages/trade/checkout/index.vue @@ -226,5 +226,5 @@ const { diff --git a/src/pages/trade/checkout/styles/base.scss b/src/pages/trade/checkout/styles/base.scss index a9d04e4..9f5e4c8 100644 --- a/src/pages/trade/checkout/styles/base.scss +++ b/src/pages/trade/checkout/styles/base.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/variables'; +@use '../../../../styles/variables' as *; .checkout-page { min-height: 100vh; diff --git a/src/pages/trade/checkout/styles/cards.scss b/src/pages/trade/checkout/styles/cards.scss index 34d83fe..d79669b 100644 --- a/src/pages/trade/checkout/styles/cards.scss +++ b/src/pages/trade/checkout/styles/cards.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/variables'; +@use '../../../../styles/variables' as *; .checkout-page__dash-divider { height: 3px; diff --git a/src/pages/trade/checkout/styles/fees.scss b/src/pages/trade/checkout/styles/fees.scss index a8aeb61..bcebf4b 100644 --- a/src/pages/trade/checkout/styles/fees.scss +++ b/src/pages/trade/checkout/styles/fees.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/variables'; +@use '../../../../styles/variables' as *; .checkout-page__fees { padding: 14px 18px; diff --git a/src/pages/trade/checkout/styles/index.scss b/src/pages/trade/checkout/styles/index.scss index 7876e7f..0f10dea 100644 --- a/src/pages/trade/checkout/styles/index.scss +++ b/src/pages/trade/checkout/styles/index.scss @@ -1,4 +1,4 @@ -@import './base.scss'; -@import './cards.scss'; -@import './fees.scss'; -@import './submit.scss'; +@forward './base.scss'; +@forward './cards.scss'; +@forward './fees.scss'; +@forward './submit.scss'; diff --git a/src/pages/trade/checkout/styles/submit.scss b/src/pages/trade/checkout/styles/submit.scss index a11da9f..70a249d 100644 --- a/src/pages/trade/checkout/styles/submit.scss +++ b/src/pages/trade/checkout/styles/submit.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/variables'; +@use '../../../../styles/variables' as *; .checkout-page__submit-bar { position: fixed; diff --git a/src/pages/trade/success/index.vue b/src/pages/trade/success/index.vue index 91b4d24..8e55f8f 100644 --- a/src/pages/trade/success/index.vue +++ b/src/pages/trade/success/index.vue @@ -24,6 +24,6 @@ const { goMenu, goOrderDetail, goOrders, orderNo } = useTradeSuccessPage() diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 1d0de62..711b964 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,4 +1,5 @@ -@import './variables'; +@use 'sass:math'; +@use './variables' as *; @mixin card($radius: $r-lg) { background: $card; @@ -10,7 +11,7 @@ @mixin green-gradient-btn($height: 48px) { height: $height; border: none; - border-radius: $height / 2; + border-radius: math.div($height, 2); font-weight: 700; color: #fff; background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);