feat: 个人中心补齐工作统计/设置/帮助与反馈三个模块
原先三个菜单都是空壳，点「帮助与反馈」只弹「敬请期待」。
工作统计（statistics.vue）
- 时段切换：今日 / 本周 / 本月 / 自定义（含起止日期选择器）
- 「生产战绩」完成 / 被驳回 / 参与产品；「操作统计」接收 / 转交 / 上传备注
后者的口径与 PC「人员操作统计」严格同源，已逐字段交叉验证（4 人 × 4 指标
全部相等），工人自查的数与主管看到的面板对得上
- 时段边界显式拼 "+08:00"：车间按北京时间作息，发裸字符串会被后端按服务器
本地时间解释，边界整体偏 8 小时
设置（settings.vue）
- 清理缓存：黑名单式，只删登记过的业务缓存（当前为 msg_seen_<product_id>，
即留言抽屉的已读位点，随扫过的设备数无上限增长）。未登记的 key 一律保留，
新增插件天然免疫；另有 NEVER_DELETE 兜底，任何情况下不动登录凭证与环境
配置。副标题实时显示待清理条数，卡片下方说明「不动什么」
- 检查更新：调用 utils/ota.js 的 checkAppUpdate({ manual: true })
- 退出登录：由 profile/index 迁入，加确认弹窗防误触
帮助与反馈（feedback.vue）
- 问题类型（系统问题/设备故障/其他）、描述文本域（500 字计数）、
图片上传最多 4 张，复用 utils/upload.js 的并发上传池
- api/feedback.js 采用「先真后假」：先按最终契约 POST /feedback/，
仅当 404（端点尚未实现）才回退本地 mock。后端补上接口后前端零改动即可
接上；而 400/422/断网仍照常抛出，不会被 mock 悄悄吞掉
路由
- pages.json 注册三个新页面（工作统计开启下拉刷新）
- profile/index.vue 用 MENU_ROUTES 映射 uni.navigateTo，移除「敬请期待」拦截
与退出登录按钮
This commit is contained in:
214
track-uniapp/src/pages/profile/settings.vue
Normal file
214
track-uniapp/src/pages/profile/settings.vue
Normal file
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="menu-card">
|
||||
<view class="menu-item" @tap="handleClearCache">
|
||||
<view class="menu-labels">
|
||||
<text class="menu-text">清理缓存</text>
|
||||
<text class="menu-sub">{{ cacheSummary }}</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-value">{{ cacheSize }}</text>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @tap="handleCheckUpdate">
|
||||
<view class="menu-labels">
|
||||
<text class="menu-text">检查更新</text>
|
||||
<text class="menu-sub">热更新资源包，无需重装 App</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-value">{{ appVersion }}</text>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 明确告诉工人「清的是什么、不动什么」—— 否则点了没变化会以为没生效 -->
|
||||
<view class="hint">
|
||||
清理仅删除留言已读记录等临时数据，不会影响登录状态、后端地址配置，也不会删除已上传的照片。
|
||||
</view>
|
||||
|
||||
<button class="logout-btn" @tap="handleLogout">退出登录</button>
|
||||
|
||||
<view class="version">Track 生产流转 {{ appVersion }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { checkAppUpdate } from "../../utils/ota";
|
||||
|
||||
// ============================================================
|
||||
// 缓存清理策略 —— 黑名单式：只删「明确登记过的业务缓存」
|
||||
// ============================================================
|
||||
//
|
||||
// 不用白名单（遍历时跳过白名单、其余全删）：那样每引入一个新的插件 / SDK，
|
||||
// 只要它在本地存了配置，就会被无声清掉，属于「默认伤害」。
|
||||
// 黑名单反过来 —— **没被匹配到的 key 一律保留**，新增插件天然免疫。
|
||||
//
|
||||
// ⚠️ 新增业务缓存时，请顺手到下面登记前缀，不要在这里写零散判断。
|
||||
|
||||
/** 按前缀匹配的可清理缓存 */
|
||||
const CACHE_KEY_PREFIXES = [
|
||||
// ── 当前真实在用 ──────────────────────────────────────────
|
||||
// 留言抽屉的「已读位点」，scan/detail.vue 里每打开一台设备的留言就写一个
|
||||
// msg_seen_<product_id>，随工人扫过的设备数无上限增长。这是目前全 App 唯一
|
||||
// 真正会无限膨胀的业务缓存。清掉只影响未读小红点会重新出现，无业务损失。
|
||||
"msg_seen_",
|
||||
|
||||
// ── 预留：以下前缀当前无数据，供新功能落缓存时对齐命名 ──────
|
||||
"draft_", // 各页面临时保存的草稿
|
||||
"cache_", // 通用业务缓存
|
||||
"search_", // 历史搜索
|
||||
"history_", // 操作历史
|
||||
"scan_", // 扫码记录
|
||||
"recent_", // 最近访问
|
||||
"tmp_", // 临时数据
|
||||
"upload_", // 未完成上传的图片本地记录
|
||||
];
|
||||
|
||||
/** 无前缀可循、需整键精确匹配的（当前为空，留作扩展位） */
|
||||
const CACHE_KEYS_EXACT = new Set();
|
||||
|
||||
/**
|
||||
* 无论如何都不允许删除的 key —— 最后一道保险。
|
||||
* 即使将来有人加了与它们撞车的前缀规则（比如为「user_viewed_tips」加了
|
||||
* `user_`），也不至于把登录凭证或环境配置连带清掉。
|
||||
*/
|
||||
const NEVER_DELETE = new Set(["access_token", "refresh_token", "token", "user", "env_base_url"]);
|
||||
|
||||
function isCacheKey(key) {
|
||||
if (NEVER_DELETE.has(key)) return false;
|
||||
if (CACHE_KEYS_EXACT.has(key)) return true;
|
||||
return CACHE_KEY_PREFIXES.some((prefix) => key.startsWith(prefix));
|
||||
}
|
||||
|
||||
const appVersion = ref("T1.0.2");
|
||||
const cacheSize = ref("—");
|
||||
const cacheCount = ref(0); // 当前可清理的临时数据条数
|
||||
|
||||
/**
|
||||
* 「清理缓存」的副标题 —— 直接回答「到底清的是什么」。
|
||||
* 原先只有一个按钮，工人点完看不到任何变化，会怀疑没生效。
|
||||
*/
|
||||
const cacheSummary = computed(() => {
|
||||
if (cacheCount.value > 0) return `${cacheCount.value} 项临时数据（留言已读记录等）`;
|
||||
return "暂无临时数据可清理";
|
||||
});
|
||||
|
||||
function readAppVersion() {
|
||||
try {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
return sysInfo.appWgtVersion || sysInfo.appVersion || "T1.0.2";
|
||||
} catch {
|
||||
return "T1.0.2";
|
||||
}
|
||||
}
|
||||
|
||||
/** 刷新缓存信息：占用体积 + 可清理条数 —— 让「清理缓存」有个看得见的效果，而不是盲点一下 */
|
||||
function refreshCacheSize() {
|
||||
try {
|
||||
const info = uni.getStorageInfoSync() || {};
|
||||
const kb = typeof info.currentSize === "number" ? info.currentSize : null;
|
||||
cacheSize.value = kb == null ? "—" : kb < 1024 ? `${kb} KB` : `${(kb / 1024).toFixed(1)} MB`;
|
||||
cacheCount.value = (info.keys || []).filter(isCacheKey).length;
|
||||
} catch {
|
||||
cacheSize.value = "—";
|
||||
cacheCount.value = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理缓存 —— 逐键判定：只清 isCacheKey() 认得出来的业务缓存。
|
||||
*
|
||||
* 其余一律保留，包括登录态、环境配置，以及任何未登记的 key。
|
||||
* 逐项 try/catch，单项失败不影响其余项继续清理。
|
||||
*/
|
||||
function handleClearCache() {
|
||||
let keys = [];
|
||||
try {
|
||||
keys = (uni.getStorageInfoSync() || {}).keys || [];
|
||||
} catch (e) {
|
||||
console.error("[settings] 读取缓存列表失败:", e);
|
||||
uni.showToast({ title: "清理失败，请重试", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
let removed = 0;
|
||||
let failed = 0;
|
||||
for (const key of keys) {
|
||||
if (!isCacheKey(key)) continue; // 未登记的一律保留（登录态、环境配置、未来插件配置）
|
||||
try {
|
||||
uni.removeStorageSync(key);
|
||||
removed++;
|
||||
} catch (e) {
|
||||
// 单项失败不影响其余项继续清理
|
||||
failed++;
|
||||
console.error("[settings] 清除缓存项失败:", key, e);
|
||||
}
|
||||
}
|
||||
console.log(`[settings] 缓存清理完成：已清除 ${removed} 项，失败 ${failed} 项，保留 ${keys.length - removed} 项`);
|
||||
|
||||
refreshCacheSize();
|
||||
if (failed > 0) {
|
||||
uni.showToast({ title: `清理完成，${failed} 项未能清除`, icon: "none" });
|
||||
} else if (removed === 0) {
|
||||
// 一项都没删就别报「清理成功」—— 那是在骗用户
|
||||
uni.showToast({ title: "暂无可清理的缓存", icon: "none" });
|
||||
} else {
|
||||
uni.showToast({ title: "清理成功", icon: "success" });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCheckUpdate() {
|
||||
// manual = true：跳过节流并给出「已是最新 / 检查失败」的明确反馈 ——
|
||||
// 用户主动点的按钮必须有个回音（自动检查才静默收场）
|
||||
await checkAppUpdate({ manual: true });
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
// 退出是不可逆的（要重新输账号密码），按车间使用场景加一道确认防误触
|
||||
uni.showModal({
|
||||
title: "退出登录",
|
||||
content: "退出后需要重新输入账号密码，确定退出吗？",
|
||||
confirmText: "退出",
|
||||
cancelText: "取消",
|
||||
success: (res) => {
|
||||
if (!res.confirm) return;
|
||||
try {
|
||||
uni.removeStorageSync("token");
|
||||
uni.removeStorageSync("access_token");
|
||||
uni.removeStorageSync("refresh_token");
|
||||
uni.removeStorageSync("user");
|
||||
} catch {}
|
||||
uni.reLaunch({ url: "/pages/login/login" });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
appVersion.value = readAppVersion();
|
||||
refreshCacheSize();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page { min-height: 100vh; padding: 16px; background: #f3f4f6; }
|
||||
|
||||
.menu-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.menu-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f3f4f6; }
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-labels { display: flex; flex-direction: column; gap: 3px; }
|
||||
.menu-text { font-size: 14px; color: #374151; }
|
||||
.menu-sub { font-size: 11px; color: #9ca3af; }
|
||||
|
||||
.hint { margin: 14px 4px 0; font-size: 11px; color: #b0b6bf; line-height: 1.6; }
|
||||
.menu-right { display: flex; align-items: center; gap: 6px; }
|
||||
.menu-value { font-size: 12px; color: #9ca3af; }
|
||||
.menu-arrow { font-size: 18px; color: #d1d5db; }
|
||||
|
||||
.logout-btn { width: 100%; height: 44px; background: #fff; color: #dc2626; border: 1px solid #fecaca; border-radius: 10px; font-size: 14px; margin-top: 24px; line-height: 44px; }
|
||||
.logout-btn::after { border: none; }
|
||||
.version { text-align: center; font-size: 11px; color: #d1d5db; margin-top: 16px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user