hookehuyr

refactor(profile): 移除设置菜单项并优化样式和配置

移除ProfilePage.vue中的设置菜单项,删除UsernameSettingPage.vue中冗余的按钮样式类,并添加vant.config.js文件以集中管理Vant组件主题配置。同时,更新App.vue以应用新的主题配置。
...@@ -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)
......
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>
......