ow
This commit is contained in:
owenchen committed
1 parent
f6f3735ab3
commit
95b38a7e4d
34 files changed
+6166
-329
No files matched your search
@@ -1,172 +1,135 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 底部导航「我的」页：主题外观设置（uView Pro 主题系统）+ 后续个人资料入口占位。
|
||||
* 主题列表与默认值在 main.ts 注册（common/uview-pro.theme.ts 的四套配色）；
|
||||
* useTheme 的 setTheme/setDarkMode 自带 Storage 持久化（uview-pro-theme 键），
|
||||
* 冷启动时由插件 initTheme 恢复，这里不需要再接 store。
|
||||
* 权限暂用 UserOperation（见 routes.ts 的 PAGE_PERMISSIONS）；useAuthGuard 兜冷启动直达。
|
||||
* 底部导航「我的」页：概览入口 +「关于」（应用名/当前版本/运行平台）。
|
||||
* 主题配色与深色模式的具体设置已拆到 pages/theme/theme.vue（短地址 /theme），本页只做跳入入口。
|
||||
* 权限沿用 DmsFile（见 routes.ts 的 PAGE_PERMISSIONS）；useAuthGuard 兜冷启动直达。
|
||||
* 版本号取 common/constant 的 APP_INFO（与 manifest/package 对齐）；H5 无 plus.runtime.version。
|
||||
*/
|
||||
import { useLocale, useTheme } from "uview-pro";
|
||||
import { useLocale } from "uview-pro";
|
||||
import { APP_INFO } from "@/common/constant";
|
||||
import { useAuthGuard } from "@/composables";
|
||||
|
||||
/** 与 uview-pro 内部 DarkMode 联合对齐（顶层未导出该类型，本地声明同构字面量） */
|
||||
type DarkModeValue = "auto" | "light" | "dark";
|
||||
import { pageUrl } from "@/router/routes";
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
useAuthGuard();
|
||||
|
||||
// currentTheme/darkMode 是包级单例 ref：任意页切换，本页选中态实时跟随
|
||||
const { themes, currentTheme, setTheme, darkMode, setDarkMode } = useTheme();
|
||||
|
||||
const darkOptions: { value: DarkModeValue; label: string }[] = [
|
||||
{ value: "auto", label: t("MinePage.darkAuto") },
|
||||
{ value: "light", label: t("MinePage.darkLight") },
|
||||
{ value: "dark", label: t("MinePage.darkDark") },
|
||||
];
|
||||
|
||||
function onPickTheme(name: string): void {
|
||||
setTheme(name);
|
||||
/** 进入「我的主题」页：theme 非 tab 页，用 navigateTo 保留历史以便返回 */
|
||||
function goTheme(): void {
|
||||
uni.navigateTo({ url: pageUrl("themePage") });
|
||||
}
|
||||
|
||||
function onPickDarkMode(mode: DarkModeValue): void {
|
||||
setDarkMode(mode);
|
||||
/** 进入「安全管理」枢纽页：权限体系等基础设定的聚合入口 */
|
||||
function goSecurity(): void {
|
||||
uni.navigateTo({ url: pageUrl("securityPage") });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<app-page :nav-title="t('MinePage.title')" :show-nav-back="false" :show-tabbar="true">
|
||||
<view class="mine-page">
|
||||
<!-- 主题配色：色点取自各主题 primary，选中打勾 -->
|
||||
<view class="mine-card">
|
||||
<text class="mine-card__title">
|
||||
{{ t("MinePage.themeTitle") }}
|
||||
</text>
|
||||
<view class="mine-themes">
|
||||
<view v-for="theme in themes" :key="theme.name" class="mine-theme" @tap="onPickTheme(theme.name)">
|
||||
<view class="mine-theme__dot"
|
||||
:class="{ 'mine-theme__dot--active': theme.name === currentTheme?.name }"
|
||||
:style="{ backgroundColor: theme.color.primary }">
|
||||
<u-icon v-if="theme.name === currentTheme?.name" name="checkmark" size="30"
|
||||
color="#ffffff" />
|
||||
</view>
|
||||
<text class="mine-theme__label">
|
||||
{{ theme.label }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="mine-card__hint">
|
||||
{{ t("MinePage.themeHint") }}
|
||||
</text>
|
||||
</view>
|
||||
<!-- 深色模式：跟随系统 / 强制浅色 / 强制暗黑 三段 -->
|
||||
<view class="mine-card">
|
||||
<text class="mine-card__title">
|
||||
{{ t("MinePage.darkTitle") }}
|
||||
</text>
|
||||
<view class="mine-dark">
|
||||
<view v-for="opt in darkOptions" :key="opt.value" class="mine-dark__seg"
|
||||
:class="{ 'mine-dark__seg--active': opt.value === darkMode }" @tap="onPickDarkMode(opt.value)">
|
||||
<text class="mine-dark__text">
|
||||
{{ opt.label }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<app-page :nav-title="t('MinePage.title')" :show-nav-back="false" :show-tabbar="true">
|
||||
<view class="mine-page">
|
||||
<!-- 我的主题：进入主题配色 / 深色模式设置页（/theme） -->
|
||||
<view class="mine-cell" @tap="goTheme">
|
||||
<text class="mine-cell__title">
|
||||
{{ t("MinePage.myTheme") }}
|
||||
</text>
|
||||
<u-icon name="arrow-right" size="32" color="#9aa0a6" />
|
||||
</view>
|
||||
|
||||
<!-- 安全管理：进入权限体系基础设定聚合页（/security） -->
|
||||
<view class="mine-cell" @tap="goSecurity">
|
||||
<text class="mine-cell__title">
|
||||
{{ t("MinePage.mySecurity") }}
|
||||
</text>
|
||||
<u-icon name="arrow-right" size="32" color="#9aa0a6" />
|
||||
</view>
|
||||
|
||||
<!-- 关于：应用名 + 当前版本 + 运行平台 -->
|
||||
<view class="mine-card">
|
||||
<text class="mine-card__title">
|
||||
{{ t("MinePage.aboutTitle") }}
|
||||
</text>
|
||||
<view class="mine-about__row">
|
||||
<text class="mine-about__label">
|
||||
{{ t("MinePage.appName") }}
|
||||
</text>
|
||||
<text class="mine-about__value">
|
||||
{{ APP_INFO.name }}
|
||||
</text>
|
||||
</view>
|
||||
</app-page>
|
||||
<view class="mine-about__row">
|
||||
<text class="mine-about__label">
|
||||
{{ t("MinePage.versionLabel") }}
|
||||
</text>
|
||||
<text class="mine-about__value">
|
||||
v{{ APP_INFO.version }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="mine-about__row">
|
||||
<text class="mine-about__label">
|
||||
{{ t("MinePage.platformLabel") }}
|
||||
</text>
|
||||
<text class="mine-about__value">
|
||||
{{ APP_INFO.platform }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</app-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
/* 白底圆角卡片：与文件页分区卡片同一风格语言 */
|
||||
.mine-card {
|
||||
padding: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ffffff;
|
||||
padding: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.mine-card__title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.mine-card__hint {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #9aa0a6;
|
||||
/* 可点的列表行：标题左、箭头右，整行白底卡片 */
|
||||
.mine-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.mine-themes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40rpx;
|
||||
margin-top: 28rpx;
|
||||
.mine-cell__title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.mine-theme {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
/* 关于页行：标签左灰、值右深，横向两端对齐 */
|
||||
.mine-about__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.mine-theme__dot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 8rpx 16rpx rgba(31, 35, 41, 0.12);
|
||||
|
||||
&--active {
|
||||
border: 6rpx solid #ffffff;
|
||||
outline: 4rpx solid #1f2329;
|
||||
}
|
||||
.mine-about__label {
|
||||
font-size: 26rpx;
|
||||
color: #9aa0a6;
|
||||
}
|
||||
|
||||
.mine-theme__label {
|
||||
font-size: 24rpx;
|
||||
color: #5c626b;
|
||||
}
|
||||
|
||||
/* 三段胶囊：选中段深底白字（跟随 currentTheme primary 的中性替代） */
|
||||
.mine-dark {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
margin-top: 28rpx;
|
||||
padding: 8rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
|
||||
.mine-dark__seg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
border-radius: 999rpx;
|
||||
|
||||
&--active {
|
||||
background-color: #1f2329;
|
||||
}
|
||||
}
|
||||
|
||||
.mine-dark__text {
|
||||
font-size: 26rpx;
|
||||
color: #5c626b;
|
||||
|
||||
.mine-dark__seg--active & {
|
||||
color: #ffffff;
|
||||
}
|
||||
.mine-about__value {
|
||||
font-size: 26rpx;
|
||||
color: #1f2329;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user