refactor(profile): 移除设置菜单项并优化样式和配置
移除ProfilePage.vue中的设置菜单项,删除UsernameSettingPage.vue中冗余的按钮样式类,并添加vant.config.js文件以集中管理Vant组件主题配置。同时,更新App.vue以应用新的主题配置。
Showing
5 changed files
with
70 additions
and
20 deletions
| ... | @@ -9,6 +9,8 @@ | ... | @@ -9,6 +9,8 @@ |
| 9 | import { RouterView } from "vue-router"; | 9 | import { RouterView } from "vue-router"; |
| 10 | import { provideAuth } from "@/contexts/auth"; | 10 | import { provideAuth } from "@/contexts/auth"; |
| 11 | import { provideCart } from "@/contexts/cart"; | 11 | import { provideCart } from "@/contexts/cart"; |
| 12 | +import { ConfigProvider as VanConfigProvider } from 'vant'; | ||
| 13 | +import { themeVars } from './vant.config'; | ||
| 12 | // 会根据配置判断是否显示调试控件 | 14 | // 会根据配置判断是否显示调试控件 |
| 13 | // eslint-disable-next-line no-unused-vars | 15 | // eslint-disable-next-line no-unused-vars |
| 14 | import vConsole from "@/utils/vconsole"; | 16 | import vConsole from "@/utils/vconsole"; |
| ... | @@ -18,23 +20,26 @@ import { wxJsAPI } from "@/api/wx/config"; | ... | @@ -18,23 +20,26 @@ import { wxJsAPI } from "@/api/wx/config"; |
| 18 | import { apiList } from "@/api/wx/jsApiList.js"; | 20 | import { apiList } from "@/api/wx/jsApiList.js"; |
| 19 | import { wxInfo, getUrlParams, stringifyQuery } from "@/utils/tools"; | 21 | import { wxInfo, getUrlParams, stringifyQuery } from "@/utils/tools"; |
| 20 | 22 | ||
| 23 | + | ||
| 21 | provideAuth(); // 提供全局认证状态 | 24 | provideAuth(); // 提供全局认证状态 |
| 22 | provideCart('single'); // 提供全局购物车状态,单一商品模式 | 25 | provideCart('single'); // 提供全局购物车状态,单一商品模式 |
| 23 | </script> | 26 | </script> |
| 24 | 27 | ||
| 25 | <template> | 28 | <template> |
| 26 | - <!-- 通过v-slot获取当前路由组件。使用component是为了实现动态组件渲染和加载状态的控制:当Component存在时渲染路由组件,不存在时显示加载动画。直接使用 --> | 29 | + <van-config-provider :theme-vars="themeVars"> |
| 27 | - <router-view v-slot="{ Component }"> | 30 | + <!-- 通过v-slot获取当前路由组件。使用component是为了实现动态组件渲染和加载状态的控制:当Component存在时渲染路由组件,不存在时显示加载动画。直接使用 --> |
| 28 | - <div v-if="Component"> | 31 | + <router-view v-slot="{ Component }"> |
| 29 | - <component :is="Component" /> | 32 | + <div v-if="Component"> |
| 30 | - </div> | 33 | + <component :is="Component" /> |
| 31 | - <div v-else class="flex items-center justify-center h-screen bg-gradient-to-br from-green-50 via-teal-50 to-blue-50"> | 34 | + </div> |
| 32 | - <div class="bg-white/20 backdrop-blur-md rounded-xl p-6 shadow-lg"> | 35 | + <div v-else class="flex items-center justify-center h-screen bg-gradient-to-br from-green-50 via-teal-50 to-blue-50"> |
| 33 | - <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto"></div> | 36 | + <div class="bg-white/20 backdrop-blur-md rounded-xl p-6 shadow-lg"> |
| 34 | - <p class="mt-4 text-gray-700">加载中...</p> | 37 | + <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto"></div> |
| 38 | + <p class="mt-4 text-gray-700">加载中...</p> | ||
| 39 | + </div> | ||
| 35 | </div> | 40 | </div> |
| 36 | - </div> | 41 | + </router-view> |
| 37 | - </router-view> | 42 | + </van-config-provider> |
| 38 | </template> | 43 | </template> |
| 39 | 44 | ||
| 40 | <style> | 45 | <style> | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2025-03-20 20:36:36 | 2 | * @Date: 2025-03-20 20:36:36 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-03-20 23:51:13 | 4 | + * @LastEditTime: 2025-03-24 13:52:52 |
| 5 | * @FilePath: /mlaj/src/main.js | 5 | * @FilePath: /mlaj/src/main.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -10,7 +10,6 @@ import './style.css' | ... | @@ -10,7 +10,6 @@ import './style.css' |
| 10 | import App from './App.vue' | 10 | import App from './App.vue' |
| 11 | import router from './router' | 11 | import router from './router' |
| 12 | import axios from '@/utils/axios'; | 12 | import axios from '@/utils/axios'; |
| 13 | - | ||
| 14 | import 'vant/lib/index.css' | 13 | import 'vant/lib/index.css' |
| 15 | 14 | ||
| 16 | const app = createApp(App) | 15 | const app = createApp(App) | ... | ... |
src/vant.config.js
0 → 100644
| 1 | +/* | ||
| 2 | + * @Date: 2025-03-24 13:44:27 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2025-03-24 13:54:49 | ||
| 5 | + * @FilePath: /mlaj/src/vant.config.js | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | + */ | ||
| 8 | +// vant.config.js | ||
| 9 | +export const themeVars = { | ||
| 10 | + // 主题色 | ||
| 11 | + primaryColor: '#22c55e', | ||
| 12 | + successColor: '#22c55e', | ||
| 13 | + warningColor: '#f59e0b', | ||
| 14 | + dangerColor: '#ef4444', | ||
| 15 | + infoColor: '#3b82f6', | ||
| 16 | + | ||
| 17 | + // 圆角 | ||
| 18 | + borderRadiusSm: '2px', | ||
| 19 | + borderRadiusMd: '4px', | ||
| 20 | + borderRadiusLg: '8px', | ||
| 21 | + borderRadiusMax: '999px', | ||
| 22 | + | ||
| 23 | + // 字体 | ||
| 24 | + fontSizeXs: '10px', | ||
| 25 | + fontSizeSm: '12px', | ||
| 26 | + fontSizeMd: '14px', | ||
| 27 | + fontSizeLg: '16px', | ||
| 28 | + | ||
| 29 | + // 按钮 | ||
| 30 | + buttonPrimaryBackground: '#22c55e', | ||
| 31 | + buttonPrimaryBorderColor: '#22c55e', | ||
| 32 | + buttonBorderRadius: 'var(--van-border-radius-lg)', | ||
| 33 | + | ||
| 34 | + // 输入框 | ||
| 35 | + fieldLabelColor: '#374151', | ||
| 36 | + fieldInputTextColor: '#111827', | ||
| 37 | + fieldPlaceholderTextColor: '#9ca3af', | ||
| 38 | + fieldErrorMessageColor: '#ef4444', | ||
| 39 | + | ||
| 40 | + // Cell | ||
| 41 | + cellBackgroundColor: 'transparent', | ||
| 42 | + cellBorderColor: '#e5e7eb', | ||
| 43 | + cellActiveColor: '#f3f4f6', | ||
| 44 | + cellRequiredColor: '#ef4444', | ||
| 45 | + cellLabelColor: '#374151', | ||
| 46 | + cellValueColor: '#111827', | ||
| 47 | + | ||
| 48 | + // 弹出层 | ||
| 49 | + popupBackgroundColor: '#ffffff', | ||
| 50 | + popupCloseIconColor: '#9ca3af', | ||
| 51 | + popupCloseIconActiveColor: '#6b7280' | ||
| 52 | +}; |
| ... | @@ -328,11 +328,6 @@ const menuItems3 = [ | ... | @@ -328,11 +328,6 @@ const menuItems3 = [ |
| 328 | badge: "3", | 328 | badge: "3", |
| 329 | }, | 329 | }, |
| 330 | { | 330 | { |
| 331 | - icon: "settings", | ||
| 332 | - title: "设置", | ||
| 333 | - path: "/profile/settings", | ||
| 334 | - }, | ||
| 335 | - { | ||
| 336 | icon: "question", | 331 | icon: "question", |
| 337 | title: "帮助中心", | 332 | title: "帮助中心", |
| 338 | path: "/profile/help", | 333 | path: "/profile/help", | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-03-24 13:04:21 | 2 | * @Date: 2025-03-24 13:04:21 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-03-24 13:33:27 | 4 | + * @LastEditTime: 2025-03-24 13:46:15 |
| 5 | * @FilePath: /mlaj/src/views/profile/settings/UsernameSettingPage.vue | 5 | * @FilePath: /mlaj/src/views/profile/settings/UsernameSettingPage.vue |
| 6 | * @Description: 修改用户名页面 | 6 | * @Description: 修改用户名页面 |
| 7 | --> | 7 | --> |
| ... | @@ -27,7 +27,6 @@ | ... | @@ -27,7 +27,6 @@ |
| 27 | type="primary" | 27 | type="primary" |
| 28 | block | 28 | block |
| 29 | round | 29 | round |
| 30 | - class="bg-green-500 hover:bg-green-600 transition-colors" | ||
| 31 | > | 30 | > |
| 32 | 保存修改 | 31 | 保存修改 |
| 33 | </van-button> | 32 | </van-button> | ... | ... |
-
Please register or login to post a comment