fix: 根据IDE的建议，调整definePage 宏导入顺序，放在import后面
This commit is contained in:
Mickey wu
@@ -20,10 +20,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
name: "theme",
|
||||
style: { navigationBarTitleText: "用户协议" },
|
||||
});
|
||||
|
||||
|
||||
const activeNames = ref(["0"]); // 默认展开第一项
|
||||
|
||||
@@ -60,6 +57,11 @@ const agreementContent = [
|
||||
},
|
||||
];
|
||||
|
||||
definePage({
|
||||
name: "theme",
|
||||
style: { navigationBarTitleText: "用户协议" },
|
||||
});
|
||||
|
||||
// 同意协议
|
||||
const handleAgree = () => {
|
||||
uni.showToast({
|
||||
|
||||
@@ -11,13 +11,7 @@
|
||||
<view class="settings-group-wrap">
|
||||
<wd-cell-group custom-style="margin-top:24rpx">
|
||||
<wd-cell title="网络测试" icon="wifi" is-link @click="navigateToNetworkTest" />
|
||||
<wd-cell
|
||||
title="清空缓存"
|
||||
icon="delete"
|
||||
:value="cacheSize"
|
||||
clickable
|
||||
@click="handleClearCache"
|
||||
/>
|
||||
<wd-cell title="清空缓存" icon="delete" :value="cacheSize" clickable @click="handleClearCache" />
|
||||
</wd-cell-group>
|
||||
</view>
|
||||
|
||||
@@ -27,207 +21,202 @@
|
||||
</wd-button>
|
||||
</view>
|
||||
|
||||
<wd-loading
|
||||
v-if="isClearing"
|
||||
v-model="isClearing"
|
||||
text="正在清理..."
|
||||
mask
|
||||
custom-class="loading-center"
|
||||
/>
|
||||
<wd-loading v-if="isClearing" v-model="isClearing" text="正在清理..." mask custom-class="loading-center" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
name: "settings",
|
||||
style: { navigationBarTitleText: "设置" },
|
||||
});
|
||||
|
||||
import { useUserStore } from "@/store";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { useToast } from "@wot-ui/ui";
|
||||
import { useUserStore } from "@/store";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { useToast } from "@wot-ui/ui";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const toast = useToast();
|
||||
const isLogin = computed(() => !!userStore.userInfo);
|
||||
|
||||
// 主题设置
|
||||
const navigateToTheme = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/settings/theme/index",
|
||||
definePage({
|
||||
name: "settings",
|
||||
style: { navigationBarTitleText: "设置" },
|
||||
});
|
||||
};
|
||||
|
||||
// 用户协议
|
||||
const navigateToUserAgreement = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/settings/agreement/index",
|
||||
});
|
||||
};
|
||||
const userStore = useUserStore();
|
||||
const toast = useToast();
|
||||
const isLogin = computed(() => !!userStore.userInfo);
|
||||
|
||||
// 关于我们
|
||||
const navigateToAbout = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/about/index",
|
||||
});
|
||||
};
|
||||
|
||||
// 网络测试
|
||||
const navigateToNetworkTest = () => {
|
||||
uni.navigateTo({ url: "/pages/mine/settings/network/index" });
|
||||
};
|
||||
|
||||
// 是否正在清理
|
||||
const isClearing = ref(false);
|
||||
// 缓存大小
|
||||
const cacheSize = ref<string>("计算中...");
|
||||
// 获取缓存大小
|
||||
const getCacheSize = async () => {
|
||||
try {
|
||||
// #ifdef MP-WEIXIN
|
||||
const res = await uni.getStorageInfo();
|
||||
cacheSize.value = formatSize(res.currentSize);
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
cacheSize.value = formatSize(
|
||||
Object.keys(localStorage).reduce((size, key) => size + localStorage[key].length, 0)
|
||||
);
|
||||
// #endif
|
||||
if (!cacheSize.value) {
|
||||
cacheSize.value = "0B";
|
||||
}
|
||||
} catch {
|
||||
cacheSize.value = "获取失败";
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化存储大小
|
||||
const formatSize = (size: number) => {
|
||||
if (size < 1024) {
|
||||
return size + "B";
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(2) + "KB";
|
||||
} else {
|
||||
return (size / 1024 / 1024).toFixed(2) + "MB";
|
||||
}
|
||||
};
|
||||
|
||||
// 处理清除缓存
|
||||
const handleClearCache = async () => {
|
||||
if (cacheSize.value === "获取失败") {
|
||||
uni.showToast({
|
||||
title: "获取缓存信息失败，请稍后重试",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
// 主题设置
|
||||
const navigateToTheme = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/settings/theme/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (cacheSize.value === "0B") {
|
||||
uni.showToast({
|
||||
title: "暂无缓存需要清理",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (isClearing.value) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
isClearing.value = true;
|
||||
// 模拟清理过程
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
// 清除缓存
|
||||
await uni.clearStorage();
|
||||
// 更新缓存大小显示
|
||||
await getCacheSize();
|
||||
// 提示清理成功
|
||||
uni.showToast({
|
||||
title: "清理成功",
|
||||
icon: "success",
|
||||
// 用户协议
|
||||
const navigateToUserAgreement = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/settings/agreement/index",
|
||||
});
|
||||
} catch {
|
||||
uni.showToast({
|
||||
title: "清理失败",
|
||||
icon: "error",
|
||||
});
|
||||
} finally {
|
||||
isClearing.value = false;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定要退出登录吗？",
|
||||
confirmColor: "#ff4757",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
userStore.logout();
|
||||
toast.success("已退出登录");
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({ url: "/pages/mine/index" });
|
||||
}, 800);
|
||||
// 关于我们
|
||||
const navigateToAbout = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/about/index",
|
||||
});
|
||||
};
|
||||
|
||||
// 网络测试
|
||||
const navigateToNetworkTest = () => {
|
||||
uni.navigateTo({ url: "/pages/mine/settings/network/index" });
|
||||
};
|
||||
|
||||
// 是否正在清理
|
||||
const isClearing = ref(false);
|
||||
// 缓存大小
|
||||
const cacheSize = ref<string>("计算中...");
|
||||
// 获取缓存大小
|
||||
const getCacheSize = async () => {
|
||||
try {
|
||||
// #ifdef MP-WEIXIN
|
||||
const res = await uni.getStorageInfo();
|
||||
cacheSize.value = formatSize(res.currentSize);
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
cacheSize.value = formatSize(
|
||||
Object.keys(localStorage).reduce((size, key) => size + localStorage[key].length, 0)
|
||||
);
|
||||
// #endif
|
||||
if (!cacheSize.value) {
|
||||
cacheSize.value = "0B";
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
} catch {
|
||||
cacheSize.value = "获取失败";
|
||||
}
|
||||
};
|
||||
|
||||
// 检查登录状态
|
||||
onLoad(() => {
|
||||
getCacheSize();
|
||||
});
|
||||
// 格式化存储大小
|
||||
const formatSize = (size: number) => {
|
||||
if (size < 1024) {
|
||||
return size + "B";
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(2) + "KB";
|
||||
} else {
|
||||
return (size / 1024 / 1024).toFixed(2) + "MB";
|
||||
}
|
||||
};
|
||||
|
||||
// 处理清除缓存
|
||||
const handleClearCache = async () => {
|
||||
if (cacheSize.value === "获取失败") {
|
||||
uni.showToast({
|
||||
title: "获取缓存信息失败，请稍后重试",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (cacheSize.value === "0B") {
|
||||
uni.showToast({
|
||||
title: "暂无缓存需要清理",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (isClearing.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
isClearing.value = true;
|
||||
// 模拟清理过程
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
// 清除缓存
|
||||
await uni.clearStorage();
|
||||
// 更新缓存大小显示
|
||||
await getCacheSize();
|
||||
// 提示清理成功
|
||||
uni.showToast({
|
||||
title: "清理成功",
|
||||
icon: "success",
|
||||
});
|
||||
} catch {
|
||||
uni.showToast({
|
||||
title: "清理失败",
|
||||
icon: "error",
|
||||
});
|
||||
} finally {
|
||||
isClearing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定要退出登录吗？",
|
||||
confirmColor: "#ff4757",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
userStore.logout();
|
||||
toast.success("已退出登录");
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({ url: "/pages/mine/index" });
|
||||
}, 800);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 检查登录状态
|
||||
onLoad(() => {
|
||||
getCacheSize();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logout-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
.logout-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
.settings-page {
|
||||
padding: 24rpx;
|
||||
}
|
||||
.settings-page {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.settings-group-wrap {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.settings-group-wrap {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.logout-section {
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
.logout-section {
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
|
||||
:deep(.wd-cell:active) {
|
||||
background-color: var(--color-bg-tertiary) !important;
|
||||
}
|
||||
:deep(.wd-cell:active) {
|
||||
background-color: var(--color-bg-tertiary) !important;
|
||||
}
|
||||
|
||||
:deep(.logout-btn) {
|
||||
height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
:deep(.logout-btn) {
|
||||
height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.loading-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.loading-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.loading-center :deep(.wd-loading__spinner) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.loading-center :deep(.wd-loading__spinner) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.loading-center :deep(.wd-loading__text) {
|
||||
margin-top: 20rpx;
|
||||
color: var(--color-text-inverse);
|
||||
text-align: center;
|
||||
}
|
||||
.loading-center :deep(.wd-loading__text) {
|
||||
margin-top: 20rpx;
|
||||
color: var(--color-text-inverse);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,12 +32,14 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
|
||||
definePage({
|
||||
name: "network",
|
||||
style: { navigationBarTitleText: "网络测试" },
|
||||
});
|
||||
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
|
||||
const result = ref<number | null>(null);
|
||||
const isTesting = ref(false);
|
||||
|
||||
@@ -20,10 +20,6 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
name: "privacy",
|
||||
style: { navigationBarTitleText: "隐私政策" },
|
||||
});
|
||||
|
||||
const activeNames = ref(["0"]); // 默认展开第一项
|
||||
|
||||
@@ -75,6 +71,12 @@ const privacyContent = [
|
||||
},
|
||||
];
|
||||
|
||||
definePage({
|
||||
name: "privacy",
|
||||
style: { navigationBarTitleText: "隐私政策" },
|
||||
});
|
||||
|
||||
|
||||
// 同意隐私政策
|
||||
const handleAgree = () => {
|
||||
uni.showToast({
|
||||
|
||||
@@ -13,20 +13,10 @@
|
||||
<wd-cell title="预设主题色">
|
||||
<template #default>
|
||||
<view class="flex flex-wrap gap-12rpx">
|
||||
<view
|
||||
v-for="(color, index) in themeColorOptions"
|
||||
:key="index"
|
||||
class="color-option"
|
||||
:class="{ 'color-option--active': currentThemeColor === color.primary }"
|
||||
:style="{ backgroundColor: color.primary }"
|
||||
@click="handleSelectColor(color)"
|
||||
>
|
||||
<wd-icon
|
||||
v-if="currentThemeColor === color.primary"
|
||||
name="check"
|
||||
size="14"
|
||||
color="var(--color-text-inverse)"
|
||||
/>
|
||||
<view v-for="(color, index) in themeColorOptions" :key="index" class="color-option"
|
||||
:class="{ 'color-option--active': currentThemeColor === color.primary }" :style="{ backgroundColor: color.primary }"
|
||||
@click="handleSelectColor(color)">
|
||||
<wd-icon v-if="currentThemeColor === color.primary" name="check" size="14" color="var(--color-text-inverse)" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -77,11 +67,8 @@
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">自定义主题色</text>
|
||||
<view
|
||||
class="w-64rpx h-64rpx flex-center rounded-full"
|
||||
hover-class="bg-[var(--color-text-placeholder)]/16"
|
||||
@click="showCustomColorInput = false"
|
||||
>
|
||||
<view class="w-64rpx h-64rpx flex-center rounded-full" hover-class="bg-[var(--color-text-placeholder)]/16"
|
||||
@click="showCustomColorInput = false">
|
||||
<wd-icon name="close" size="18" class="color-text-secondary" />
|
||||
</view>
|
||||
</view>
|
||||
@@ -90,12 +77,7 @@
|
||||
<text class="text-28rpx color-text-secondary">请输入十六进制颜色值</text>
|
||||
<view class="flex items-center gap-16rpx mt-16rpx">
|
||||
<view class="color-dot-lg" :style="{ backgroundColor: customColor || '#FF4757' }" />
|
||||
<wd-input
|
||||
v-model="customColor"
|
||||
placeholder="例如: #FF4757"
|
||||
:maxlength="7"
|
||||
custom-class="theme-input"
|
||||
/>
|
||||
<wd-input v-model="customColor" placeholder="例如: #FF4757" :maxlength="7" custom-class="theme-input" />
|
||||
</view>
|
||||
<text class="text-24rpx color-text-placeholder mt-12rpx">支持格式：#RGB 或 #RRGGBB</text>
|
||||
</view>
|
||||
@@ -110,184 +92,184 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
name: "theme",
|
||||
style: { navigationBarTitleText: "主题设置" },
|
||||
});
|
||||
import { useTheme } from "@/composables/useTheme";
|
||||
import { useToast, useDialog } from "@wot-ui/ui";
|
||||
|
||||
import { useTheme } from "@/composables/useTheme";
|
||||
import { useToast, useDialog } from "@wot-ui/ui";
|
||||
definePage({
|
||||
name: "theme",
|
||||
style: { navigationBarTitleText: "主题设置" },
|
||||
});
|
||||
|
||||
// 使用主题组合函数
|
||||
const { isDark, themeVars, themeColorOptions, toggleTheme, setThemeColor } = useTheme();
|
||||
// 使用主题组合函数
|
||||
const { isDark, themeVars, themeColorOptions, toggleTheme, setThemeColor } = useTheme();
|
||||
|
||||
const toast = useToast();
|
||||
const toast = useToast();
|
||||
const { confirm } = useDialog();
|
||||
|
||||
// 创建响应式的计算属性
|
||||
const isDarkMode = computed(() => isDark.value);
|
||||
// 创建响应式的计算属性
|
||||
const isDarkMode = computed(() => isDark.value);
|
||||
|
||||
// 自定义颜色输入
|
||||
const customColor = ref("");
|
||||
const showCustomColorInput = ref(false);
|
||||
// 自定义颜色输入
|
||||
const customColor = ref("");
|
||||
const showCustomColorInput = ref(false);
|
||||
|
||||
// 当前选中的主题色
|
||||
const currentThemeColor = computed(() => {
|
||||
return themeVars.colorTheme || themeColorOptions[0].primary;
|
||||
});
|
||||
|
||||
// 选择预设颜色
|
||||
const handleSelectColor = (color: (typeof themeColorOptions)[0]) => {
|
||||
setThemeColor(color);
|
||||
customColor.value = color.primary;
|
||||
|
||||
// 提示
|
||||
uni.showToast({
|
||||
title: "主题色已更新",
|
||||
icon: "success",
|
||||
duration: 1500,
|
||||
// 当前选中的主题色
|
||||
const currentThemeColor = computed(() => {
|
||||
return themeVars.colorTheme || themeColorOptions[0].primary;
|
||||
});
|
||||
};
|
||||
|
||||
// 显示自定义颜色输入
|
||||
const showCustomInput = () => {
|
||||
showCustomColorInput.value = true;
|
||||
customColor.value = currentThemeColor.value;
|
||||
};
|
||||
// 选择预设颜色
|
||||
const handleSelectColor = (color: (typeof themeColorOptions)[0]) => {
|
||||
setThemeColor(color);
|
||||
customColor.value = color.primary;
|
||||
|
||||
// 应用自定义颜色
|
||||
const applyCustomColor = () => {
|
||||
// 验证颜色格式
|
||||
const colorRegex = /^#([0-9A-F]{6}|[0-9A-F]{3})$/i;
|
||||
if (!colorRegex.test(customColor.value)) {
|
||||
// 提示
|
||||
uni.showToast({
|
||||
title: "请输入有效的颜色值",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 转换3位颜色值为6位
|
||||
let color = customColor.value;
|
||||
if (color.length === 4) {
|
||||
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
|
||||
}
|
||||
|
||||
// 创建自定义主题色选项
|
||||
const customColorOption = {
|
||||
name: "自定义",
|
||||
value: "custom",
|
||||
primary: color,
|
||||
};
|
||||
|
||||
setThemeColor(customColorOption);
|
||||
showCustomColorInput.value = false;
|
||||
|
||||
// 提示
|
||||
uni.showToast({
|
||||
title: "自定义主题色已应用",
|
||||
icon: "success",
|
||||
duration: 1500,
|
||||
});
|
||||
};
|
||||
|
||||
// 重置为默认主题
|
||||
const handleResetTheme = async () => {
|
||||
try {
|
||||
await confirm({ title: "确认重置", msg: "确定要重置为默认主题吗？", headerImage: "warning" });
|
||||
setThemeColor(themeColorOptions[0]);
|
||||
customColor.value = themeColorOptions[0].primary;
|
||||
toast.success("已重置为默认主题");
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
};
|
||||
|
||||
// 切换暗黑模式
|
||||
const handleToggleDarkMode = () => {
|
||||
toggleTheme();
|
||||
nextTick(() => {
|
||||
uni.showToast({
|
||||
title: `已切换到${isDarkMode.value ? "暗黑" : "浅色"}模式`,
|
||||
title: "主题色已更新",
|
||||
icon: "success",
|
||||
duration: 1500,
|
||||
});
|
||||
};
|
||||
|
||||
// 显示自定义颜色输入
|
||||
const showCustomInput = () => {
|
||||
showCustomColorInput.value = true;
|
||||
customColor.value = currentThemeColor.value;
|
||||
};
|
||||
|
||||
// 应用自定义颜色
|
||||
const applyCustomColor = () => {
|
||||
// 验证颜色格式
|
||||
const colorRegex = /^#([0-9A-F]{6}|[0-9A-F]{3})$/i;
|
||||
if (!colorRegex.test(customColor.value)) {
|
||||
uni.showToast({
|
||||
title: "请输入有效的颜色值",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 转换3位颜色值为6位
|
||||
let color = customColor.value;
|
||||
if (color.length === 4) {
|
||||
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
|
||||
}
|
||||
|
||||
// 创建自定义主题色选项
|
||||
const customColorOption = {
|
||||
name: "自定义",
|
||||
value: "custom",
|
||||
primary: color,
|
||||
};
|
||||
|
||||
setThemeColor(customColorOption);
|
||||
showCustomColorInput.value = false;
|
||||
|
||||
// 提示
|
||||
uni.showToast({
|
||||
title: "自定义主题色已应用",
|
||||
icon: "success",
|
||||
duration: 1500,
|
||||
});
|
||||
};
|
||||
|
||||
// 重置为默认主题
|
||||
const handleResetTheme = async () => {
|
||||
try {
|
||||
await confirm({ title: "确认重置", msg: "确定要重置为默认主题吗？", headerImage: "warning" });
|
||||
setThemeColor(themeColorOptions[0]);
|
||||
customColor.value = themeColorOptions[0].primary;
|
||||
toast.success("已重置为默认主题");
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
};
|
||||
|
||||
// 切换暗黑模式
|
||||
const handleToggleDarkMode = () => {
|
||||
toggleTheme();
|
||||
nextTick(() => {
|
||||
uni.showToast({
|
||||
title: `已切换到${isDarkMode.value ? "暗黑" : "浅色"}模式`,
|
||||
icon: "success",
|
||||
duration: 1500,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onLoad(() => {
|
||||
customColor.value = currentThemeColor.value;
|
||||
});
|
||||
};
|
||||
|
||||
onLoad(() => {
|
||||
customColor.value = currentThemeColor.value;
|
||||
});
|
||||
onMounted(() => {
|
||||
customColor.value = currentThemeColor.value;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
customColor.value = currentThemeColor.value;
|
||||
});
|
||||
|
||||
// 页面显示时确保主题色同步
|
||||
onShow(() => {
|
||||
customColor.value = currentThemeColor.value;
|
||||
});
|
||||
// 页面显示时确保主题色同步
|
||||
onShow(() => {
|
||||
customColor.value = currentThemeColor.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.color-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
.color-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
|
||||
&--active {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.1);
|
||||
&--active {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.color-dot {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.color-dot-lg {
|
||||
flex-shrink: 0;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.color-dot-lg {
|
||||
flex-shrink: 0;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.popup-content {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 32rpx;
|
||||
border-bottom: 1rpx solid var(--color-border);
|
||||
}
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 32rpx;
|
||||
border-bottom: 1rpx solid var(--color-border);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.popup-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid var(--color-border);
|
||||
}
|
||||
.popup-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid var(--color-border);
|
||||
}
|
||||
|
||||
:deep(.theme-input) {
|
||||
background-color: var(--color-bg-secondary) !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
:deep(.theme-input) {
|
||||
background-color: var(--color-bg-secondary) !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user