diff --git a/package.json b/package.json index 1a12256e..95c9f20b 100644 --- a/package.json +++ b/package.json @@ -114,6 +114,7 @@ "lint-staged": "^15.2.2", "postcss": "^8.4.35", "postcss-html": "^1.6.0", + "postcss-pxtorem": "^6.1.0", "postcss-scss": "^4.0.9", "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac46ccbe..a2312c3b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -270,6 +270,9 @@ importers: postcss-html: specifier: ^1.6.0 version: 1.7.0 + postcss-pxtorem: + specifier: ^6.1.0 + version: 6.1.0(postcss@8.4.49) postcss-scss: specifier: ^4.0.9 version: 4.0.9(postcss@8.4.49) @@ -4249,6 +4252,11 @@ packages: resolution: {integrity: sha512-MfcMpSUIaR/nNgeVS8AyvyDugXlADjN9AcV7e5rDfrF1wduIAGSkL4q2+wgrZgA3sHVAHLDO9FuauHhZYW2nBw==} engines: {node: ^12 || >=14} + postcss-pxtorem@6.1.0: + resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==} + peerDependencies: + postcss: ^8.0.0 + postcss-resolve-nested-selector@0.1.6: resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==} @@ -9569,6 +9577,10 @@ snapshots: postcss: 8.4.49 postcss-safe-parser: 6.0.0(postcss@8.4.49) + postcss-pxtorem@6.1.0(postcss@8.4.49): + dependencies: + postcss: 8.4.49 + postcss-resolve-nested-selector@0.1.6: {} postcss-safe-parser@6.0.0(postcss@8.4.49): diff --git a/postcss.config.js b/postcss.config.js index 961986e2..f3111fc1 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,15 @@ module.exports = { plugins: { - autoprefixer: {} + autoprefixer: {}, + 'postcss-pxtorem': { + rootValue: 16, // 设计稿基准值，1rem = 16px + unitPrecision: 5, // rem 的小数位数 + propList: ['*'], // 需要转换的属性，* 表示所有属性 + selectorBlackList: [], // 忽略的选择器，可以使用正则表达式 + replace: true, // 是否替换而不是添加 + mediaQuery: false, // 是否在媒体查询中转换 px + minPixelValue: 0, // 设置要替换的最小像素值，0 表示所有值都转换 + exclude: /node_modules/i // 排除 node_modules 目录 + } } } diff --git a/src/assets/imgs/dashboard/dashboard-back.jpg b/src/assets/imgs/dashboard/dashboard-back.jpg new file mode 100644 index 00000000..dfce4053 Binary files /dev/null and b/src/assets/imgs/dashboard/dashboard-back.jpg differ diff --git a/src/assets/imgs/dashboard/icon-arrow.svg b/src/assets/imgs/dashboard/icon-arrow.svg new file mode 100644 index 00000000..a8db87c7 --- /dev/null +++ b/src/assets/imgs/dashboard/icon-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/imgs/dashboard/icon-card.svg b/src/assets/imgs/dashboard/icon-card.svg new file mode 100644 index 00000000..82055ad8 --- /dev/null +++ b/src/assets/imgs/dashboard/icon-card.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/imgs/dashboard/icon-location.svg b/src/assets/imgs/dashboard/icon-location.svg new file mode 100644 index 00000000..5350b3e2 --- /dev/null +++ b/src/assets/imgs/dashboard/icon-location.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/imgs/dashboard/icon-person.svg b/src/assets/imgs/dashboard/icon-person.svg new file mode 100644 index 00000000..eeb9d451 --- /dev/null +++ b/src/assets/imgs/dashboard/icon-person.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/imgs/dashboard/icon-person2.svg b/src/assets/imgs/dashboard/icon-person2.svg new file mode 100644 index 00000000..f9dc3d22 --- /dev/null +++ b/src/assets/imgs/dashboard/icon-person2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/imgs/dashboard/icon-require.svg b/src/assets/imgs/dashboard/icon-require.svg new file mode 100644 index 00000000..fac10163 --- /dev/null +++ b/src/assets/imgs/dashboard/icon-require.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/imgs/dashboard/person.svg b/src/assets/imgs/dashboard/person.svg new file mode 100644 index 00000000..990590ff --- /dev/null +++ b/src/assets/imgs/dashboard/person.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/imgs/dashboard/pie.svg b/src/assets/imgs/dashboard/pie.svg new file mode 100644 index 00000000..75f7eef1 --- /dev/null +++ b/src/assets/imgs/dashboard/pie.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index fcfd7809..46e3a545 100644 --- a/src/main.ts +++ b/src/main.ts @@ -25,6 +25,10 @@ import '@/styles/index.scss' // 引入动画 import '@/plugins/animate.css' +// 初始化 rem 移动端适配 +import { initRem } from '@/utils/rem' +initRem() + // 路由 import router, { setupRouter } from '@/router' diff --git a/src/permission.ts b/src/permission.ts index d2e7d31e..f3864b1e 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -53,13 +53,19 @@ const whiteList = [ '/auth-redirect', '/bind', '/register', - '/oauthLogin/gitee' + '/oauthLogin/gitee', + '/dashboard' // Dashboard 页面 ] // 路由加载前 router.beforeEach(async (to, from, next) => { start() loadStart() + // 如果是主页路径或 dashboard 路径，直接放行（跳过权限验证） + if (to.path === '/dashboard') { + next() + return + } if (getAccessToken()) { if (to.path === '/login') { next({ path: '/' }) diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts index 99a994b9..834f8210 100644 --- a/src/router/modules/remaining.ts +++ b/src/router/modules/remaining.ts @@ -174,6 +174,16 @@ const remainingRouter: AppRouteRecordRaw[] = [ } ] }, + { + path: '/dashboard', + component: () => import('@/views/Dashboard/Index.vue'), + name: 'Dashboard', + meta: { + hidden: true, + title: 'Dashboard', + noTagsView: true + } + }, { path: '/login', component: () => import('@/views/Login/Login.vue'), diff --git a/src/utils/index.ts b/src/utils/index.ts index 0bcedb43..2b2713d6 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -535,3 +535,6 @@ export const subString = (str: string, start: number, end: number) => { } return str } + +// rem 移动端适配 +export { initRem, getRem } from './rem' diff --git a/src/utils/rem.ts b/src/utils/rem.ts new file mode 100644 index 00000000..b0a63372 --- /dev/null +++ b/src/utils/rem.ts @@ -0,0 +1,65 @@ +/** + * rem 移动端适配工具 + * 根据屏幕宽度动态设置根元素字体大小 + */ + +// 设计稿基准宽度（根据你的设计稿调整，常见值：375、750） +const DESIGN_WIDTH = 375 +// 基准字体大小（与 postcss.config.js 中的 rootValue 保持一致） +const BASE_FONT_SIZE = 16 + +/** + * 设置 rem 基准值 + */ +function setRem() { + const docEl = document.documentElement + const width = docEl.clientWidth || window.innerWidth + + // 计算根字体大小：屏幕宽度 / 设计稿宽度 * 基准字体大小 + const rem = (width / DESIGN_WIDTH) * BASE_FONT_SIZE + + // 设置根元素字体大小 + docEl.style.fontSize = `${rem}px` + + // 限制最大和最小字体大小（可选） + const maxRem = BASE_FONT_SIZE * 1.5 // 最大 24px + const minRem = BASE_FONT_SIZE * 0.8 // 最小 12.8px + + if (rem > maxRem) { + docEl.style.fontSize = `${maxRem}px` + } else if (rem < minRem) { + docEl.style.fontSize = `${minRem}px` + } +} + +/** + * 初始化 rem 适配 + */ +export function initRem() { + // 初始设置 + setRem() + + // 监听窗口大小变化 + window.addEventListener('resize', setRem) + + // 监听屏幕方向变化（移动端横竖屏切换） + window.addEventListener('orientationchange', () => { + setTimeout(setRem, 100) + }) + + // 监听页面显示（处理浏览器标签页切换） + document.addEventListener('visibilitychange', () => { + if (!document.hidden) { + setRem() + } + }) +} + +/** + * 获取当前 rem 基准值 + */ +export function getRem(): number { + const docEl = document.documentElement + const fontSize = window.getComputedStyle(docEl).fontSize + return parseFloat(fontSize) +} diff --git a/src/views/Dashboard/Index.vue b/src/views/Dashboard/Index.vue new file mode 100644 index 00000000..81e4ee7d --- /dev/null +++ b/src/views/Dashboard/Index.vue @@ -0,0 +1,485 @@ + + + + + diff --git a/src/views/Dashboard/components/BarChart.vue b/src/views/Dashboard/components/BarChart.vue new file mode 100644 index 00000000..1be3b395 --- /dev/null +++ b/src/views/Dashboard/components/BarChart.vue @@ -0,0 +1,250 @@ + + + + + diff --git a/src/views/Dashboard/components/ConsumptionRecords/Index.vue b/src/views/Dashboard/components/ConsumptionRecords/Index.vue new file mode 100644 index 00000000..b28b1727 --- /dev/null +++ b/src/views/Dashboard/components/ConsumptionRecords/Index.vue @@ -0,0 +1,436 @@ + + + + + diff --git a/src/views/Dashboard/components/GaugeChart.vue b/src/views/Dashboard/components/GaugeChart.vue new file mode 100644 index 00000000..a8b7cea5 --- /dev/null +++ b/src/views/Dashboard/components/GaugeChart.vue @@ -0,0 +1,147 @@ + + + + + diff --git a/src/views/Dashboard/components/InfoCard/Index.vue b/src/views/Dashboard/components/InfoCard/Index.vue new file mode 100644 index 00000000..eeceac3e --- /dev/null +++ b/src/views/Dashboard/components/InfoCard/Index.vue @@ -0,0 +1,294 @@ + + + + + diff --git a/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue b/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue new file mode 100644 index 00000000..964588b2 --- /dev/null +++ b/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue @@ -0,0 +1,250 @@ + + + + + diff --git a/src/views/Dashboard/components/ScoreAssessment/Index.vue b/src/views/Dashboard/components/ScoreAssessment/Index.vue new file mode 100644 index 00000000..6e68f273 --- /dev/null +++ b/src/views/Dashboard/components/ScoreAssessment/Index.vue @@ -0,0 +1,321 @@ + + + + + diff --git a/types/env.d.ts b/types/env.d.ts index 17535eaf..4937ca52 100644 --- a/types/env.d.ts +++ b/types/env.d.ts @@ -1,7 +1,7 @@ /// declare module '*.vue' { - import { DefineComponent } from 'vue' + import type { DefineComponent } from 'vue' // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component