From 680108f4993e1c9c5a850c0f3419a9b509af57d4 Mon Sep 17 00:00:00 2001 From: jiangrui Date: Tue, 4 Mar 2025 23:37:16 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components.d.ts | 5 + frontend/postcss.config.cjs | 4 +- frontend/src/App.vue | 26 + .../src/components/mobile/FolderSelect.vue | 71 +- .../src/components/mobile/ResourceCard.vue | 288 +- .../src/components/mobile/ResourceSelect.vue | 64 +- frontend/src/main.ts | 1 + frontend/src/styles/mobile.scss | 46 + frontend/src/styles/responsive.scss | 47 + frontend/src/utils/device.ts | 10 + frontend/src/views/mobile/Douban.vue | 265 +- frontend/src/views/mobile/Home.vue | 299 +- frontend/src/views/mobile/Login.vue | 311 +- frontend/src/views/mobile/ResourceList.vue | 347 +- frontend/src/views/mobile/Setting.vue | 260 +- frontend/vite.config.ts | 3 +- package-lock.json | 10519 ++++++++++++++++ pnpm-lock.yaml | 7077 +++++------ 18 files changed, 14977 insertions(+), 4666 deletions(-) create mode 100644 frontend/src/styles/mobile.scss create mode 100644 frontend/src/styles/responsive.scss create mode 100644 frontend/src/utils/device.ts create mode 100644 package-lock.json diff --git a/frontend/components.d.ts b/frontend/components.d.ts index e21c01d..1e790f5 100644 --- a/frontend/components.d.ts +++ b/frontend/components.d.ts @@ -46,16 +46,21 @@ declare module 'vue' { SearchBar: typeof import('./src/components/SearchBar.vue')['default'] VanBackTop: typeof import('vant/es')['BackTop'] VanButton: typeof import('vant/es')['Button'] + VanCell: typeof import('vant/es')['Cell'] VanCellGroup: typeof import('vant/es')['CellGroup'] VanCheckbox: typeof import('vant/es')['Checkbox'] VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup'] + VanEmpty: typeof import('vant/es')['Empty'] VanField: typeof import('vant/es')['Field'] VanForm: typeof import('vant/es')['Form'] VanIcon: typeof import('vant/es')['Icon'] VanImage: typeof import('vant/es')['Image'] VanLoading: typeof import('vant/es')['Loading'] + VanOverlay: typeof import('vant/es')['Overlay'] + VanPopover: typeof import('vant/es')['Popover'] VanPopup: typeof import('vant/es')['Popup'] VanSearch: typeof import('vant/es')['Search'] + VanSwitch: typeof import('vant/es')['Switch'] VanTab: typeof import('vant/es')['Tab'] VanTabbar: typeof import('vant/es')['Tabbar'] VanTabbarItem: typeof import('vant/es')['TabbarItem'] diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs index 2080a27..b6fb2cb 100644 --- a/frontend/postcss.config.cjs +++ b/frontend/postcss.config.cjs @@ -2,12 +2,14 @@ module.exports = { plugins: { "postcss-pxtorem": { rootValue({ file }) { - return file.indexOf("vant") !== -1 ? 37.5 : 75; + return file.indexOf("mobile") !== -1 || file.indexOf("vant") !== -1 ? 37.5 : 75; }, propList: ["*"], exclude: (file) => { return !file.includes("mobile") && !file.includes("vant"); }, + minPixelValue: 2, + mediaQuery: false, }, }, }; diff --git a/frontend/src/App.vue b/frontend/src/App.vue index c343623..67e44bc 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -33,4 +33,30 @@ body { background-color: var(--theme-background); word-wrap: break-word; } + +/* 移动端全局样式 */ +@media screen and (max-width: 768px) { + #app { + max-width: 100vw; + overflow-x: hidden; + } + + /* 统一按钮样式 */ + .van-button { + height: 40px; + font-size: var(--font-size-base); + border-radius: var(--border-radius-base); + } + + /* 统一输入框样式 */ + .van-field { + font-size: var(--font-size-base); + } + + /* 统一卡片样式 */ + .van-card { + border-radius: var(--border-radius-base); + margin: var(--spacing-base) 0; + } +} diff --git a/frontend/src/components/mobile/FolderSelect.vue b/frontend/src/components/mobile/FolderSelect.vue index 9814214..063b56b 100644 --- a/frontend/src/components/mobile/FolderSelect.vue +++ b/frontend/src/components/mobile/FolderSelect.vue @@ -5,10 +5,11 @@ {{ path.name }} - > + >
@@ -99,43 +100,51 @@ const getList = async (data?: Folder) => { getList(); - diff --git a/frontend/src/components/mobile/ResourceCard.vue b/frontend/src/components/mobile/ResourceCard.vue index 94f8266..d97b185 100644 --- a/frontend/src/components/mobile/ResourceCard.vue +++ b/frontend/src/components/mobile/ResourceCard.vue @@ -1,65 +1,99 @@ - diff --git a/frontend/src/components/mobile/ResourceSelect.vue b/frontend/src/components/mobile/ResourceSelect.vue index cfde8ed..0c6f94f 100644 --- a/frontend/src/components/mobile/ResourceSelect.vue +++ b/frontend/src/components/mobile/ResourceSelect.vue @@ -1,19 +1,19 @@