wangsli/hyb-oa
1
0
派生 0
代码 工单 合并请求 工作流 8 软件包 项目 发布 百科 活动

feat(P21PWA2-1,P21PWA2-2,P21PWA2-3): 深链路由守卫/离线审批队列/SW缓存策略升级

浏览代码
这个提交包含在：
wangsli
2026-03-12 12:34:56 +08:00
父节点 102d3dcc2b
当前提交 9112383d23
共修改 10 个文件，包含 975 行新增和 163 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/auth/AuthContext.tsx
+133 -14
查看文件
@@ -11,6 +11,7 @@ import {
import { configureHttpAuth } from "../api/http";
import type { AuthState, MeResponse } from "../api/types";
import { changePassword as changePasswordApi } from "../api/auth";
import { clearPwaRuntimeCaches } from "../pwa";
import {
fetchCurrentEmployee,
loginWithPassword,
@@ -19,12 +20,20 @@ import {
} from "./authService";
import { resolvePermissionsForRoles } from "./permissions";
type OfflineAuthSnapshot = {
version: 1;
me: MeResponse;
permissions: string[];
savedAt: string;
};
type AuthContextValue = AuthState & {
login: (identifier: string, password: string) => Promise<{ mustChangePassword: boolean }>;
changePassword: (oldPassword: string, newPassword: string) => Promise<void>;
logout: () => Promise<void>;
bootstrapByRefresh: () => Promise<void>;
clearSession: () => void;
offlineAccessMode: boolean;
};
const AuthContext = createContext<AuthContextValue | null>(null);
@@ -38,13 +47,23 @@ const EMPTY_STATE: AuthState = {
};
const MUST_CHANGE_PASSWORD_STORAGE_KEY = "hyb-oa.must_change_password";
const OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY = "hyb-oa.auth_snapshot";
const OFFLINE_AUTH_SNAPSHOT_VERSION = 1;
const OFFLINE_AUTH_SNAPSHOT_TTL_MS = 24 * 60 * 60 * 1000;
function isWindowAvailable() {
return typeof window !== "undefined";
}
function readMustChangePasswordFromStorage() {
return typeof window !== "undefined" && window.localStorage.getItem(MUST_CHANGE_PASSWORD_STORAGE_KEY) === "1";
return isWindowAvailable() && window.localStorage.getItem(MUST_CHANGE_PASSWORD_STORAGE_KEY) === "1";
}
function writeMustChangePasswordToStorage(value: boolean) {
if (typeof window === "undefined") return;
if (!isWindowAvailable()) {
return;
}
if (value) {
window.localStorage.setItem(MUST_CHANGE_PASSWORD_STORAGE_KEY, "1");
} else {
@@ -52,22 +71,77 @@ function writeMustChangePasswordToStorage(value: boolean) {
}
}
function buildStateWithUser(
accessToken: string,
me: MeResponse,
mustChangePassword: boolean,
): AuthState {
return {
accessToken,
function readOfflineAuthSnapshot() {
if (!isWindowAvailable()) {
return null;
}
try {
const rawValue = window.localStorage.getItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
if (!rawValue) {
return null;
}
const parsed = JSON.parse(rawValue) as Partial<OfflineAuthSnapshot> | null;
if (!parsed || parsed.version !== OFFLINE_AUTH_SNAPSHOT_VERSION || !parsed.me || !Array.isArray(parsed.permissions) || typeof parsed.savedAt !== "string") {
window.localStorage.removeItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
return null;
}
const savedAt = new Date(parsed.savedAt);
if (Number.isNaN(savedAt.getTime()) || Date.now() - savedAt.getTime() > OFFLINE_AUTH_SNAPSHOT_TTL_MS) {
window.localStorage.removeItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
return null;
}
return {
version: OFFLINE_AUTH_SNAPSHOT_VERSION,
me: parsed.me,
permissions: parsed.permissions.map((item) => String(item)),
savedAt: savedAt.toISOString(),
} satisfies OfflineAuthSnapshot;
} catch {
window.localStorage.removeItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
return null;
}
}
function writeOfflineAuthSnapshot(me: MeResponse, permissions: string[]) {
if (!isWindowAvailable()) {
return;
}
const snapshot: OfflineAuthSnapshot = {
version: OFFLINE_AUTH_SNAPSHOT_VERSION,
me,
permissions: resolvePermissionsForRoles(me.roleCodes ?? []),
mustChangePassword,
permissions,
savedAt: new Date().toISOString(),
};
window.localStorage.setItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY, JSON.stringify(snapshot));
}
function clearOfflineAuthSnapshot() {
if (!isWindowAvailable()) {
return;
}
window.localStorage.removeItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
}
function buildStateWithOfflineSnapshot(snapshot: OfflineAuthSnapshot): AuthState {
return {
accessToken: null,
me: snapshot.me,
permissions: snapshot.permissions,
mustChangePassword: false,
ready: true,
};
}
export function AuthProvider({ children }: PropsWithChildren) {
const [state, setState] = useState<AuthState>(EMPTY_STATE);
const [offlineAccessMode, setOfflineAccessMode] = useState(false);
const tokenRef = useRef<string | null>(null);
useEffect(() => {
@@ -76,7 +150,10 @@ export function AuthProvider({ children }: PropsWithChildren) {
const clearSession = useCallback(() => {
tokenRef.current = null;
setOfflineAccessMode(false);
writeMustChangePasswordToStorage(false);
clearOfflineAuthSnapshot();
void clearPwaRuntimeCaches();
setState((previous) => ({
...previous,
accessToken: null,
@@ -89,23 +166,48 @@ export function AuthProvider({ children }: PropsWithChildren) {
const commitAuthenticatedUser = useCallback(
(accessToken: string, me: MeResponse, mustChangePassword: boolean) => {
const permissions = resolvePermissionsForRoles(me.roleCodes ?? []);
tokenRef.current = accessToken;
setOfflineAccessMode(false);
writeMustChangePasswordToStorage(mustChangePassword);
setState(buildStateWithUser(accessToken, me, mustChangePassword));
writeOfflineAuthSnapshot(me, permissions);
setState({
accessToken,
me,
permissions,
mustChangePassword,
ready: true,
});
},
[],
);
const activateOfflineSnapshot = useCallback((snapshot: OfflineAuthSnapshot) => {
tokenRef.current = null;
setOfflineAccessMode(true);
setState(buildStateWithOfflineSnapshot(snapshot));
}, []);
const bootstrapByRefresh = useCallback(async () => {
const offlineSnapshot = readOfflineAuthSnapshot();
if (isWindowAvailable() && window.navigator.onLine === false && offlineSnapshot) {
activateOfflineSnapshot(offlineSnapshot);
return;
}
try {
const refreshed = await refreshSession();
const me = await fetchCurrentEmployee(refreshed.accessToken);
const mustChangePassword = readMustChangePasswordFromStorage();
commitAuthenticatedUser(refreshed.accessToken, me, mustChangePassword);
} catch {
if (isWindowAvailable() && window.navigator.onLine === false && offlineSnapshot) {
activateOfflineSnapshot(offlineSnapshot);
return;
}
clearSession();
}
}, [clearSession, commitAuthenticatedUser]);
}, [activateOfflineSnapshot, clearSession, commitAuthenticatedUser]);
const login = useCallback(
async (identifier: string, password: string) => {
@@ -142,6 +244,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
try {
const refreshed = await refreshSession();
tokenRef.current = refreshed.accessToken;
setOfflineAccessMode(false);
setState((previous) => ({
...previous,
accessToken: refreshed.accessToken,
@@ -161,6 +264,21 @@ export function AuthProvider({ children }: PropsWithChildren) {
void bootstrapByRefresh();
}, [bootstrapByRefresh]);
useEffect(() => {
if (!offlineAccessMode) {
return undefined;
}
const handleOnline = () => {
void bootstrapByRefresh();
};
window.addEventListener("online", handleOnline);
return () => {
window.removeEventListener("online", handleOnline);
};
}, [bootstrapByRefresh, offlineAccessMode]);
const value = useMemo<AuthContextValue>(
() => ({
...state,
@@ -169,8 +287,9 @@ export function AuthProvider({ children }: PropsWithChildren) {
logout,
bootstrapByRefresh,
clearSession,
offlineAccessMode,
}),
[bootstrapByRefresh, changePassword, clearSession, login, logout, state],
[bootstrapByRefresh, changePassword, clearSession, login, logout, offlineAccessMode, state],
);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
client/src/mobile/indexedDbStore.ts
+59
查看文件
@@ -0,0 +1,59 @@
export function requestPromise<T>(request: IDBRequest<T>) {
return new Promise<T>((resolve, reject) => {
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error ?? new Error("indexeddb_request_failed"));
});
}
type IndexedDbStoreOptions = {
dbName: string;
dbVersion: number;
upgrade: (db: IDBDatabase, request: IDBOpenDBRequest) => void;
};
export function createIndexedDbStore(options: IndexedDbStoreOptions) {
let dbPromise: Promise<IDBDatabase> | null = null;
function getDatabase() {
if (!dbPromise) {
dbPromise = new Promise((resolve, reject) => {
const request = indexedDB.open(options.dbName, options.dbVersion);
request.onupgradeneeded = () => {
options.upgrade(request.result, request);
};
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error ?? new Error("indexeddb_open_failed"));
});
}
return dbPromise;
}
async function withStore<T>(
storeName: string,
mode: IDBTransactionMode,
executor: (store: IDBObjectStore) => Promise<T> | T,
) {
const db = await getDatabase();
return new Promise<T>((resolve, reject) => {
const tx = db.transaction(storeName, mode);
const store = tx.objectStore(storeName);
Promise.resolve(executor(store))
.then((result) => {
tx.oncomplete = () => resolve(result);
tx.onerror = () => reject(tx.error ?? new Error("indexeddb_tx_failed"));
tx.onabort = () => reject(tx.error ?? new Error("indexeddb_tx_aborted"));
})
.catch((error) => reject(error));
});
}
return {
getDatabase,
withStore,
};
}
client/src/mobile/inventoryScanQueue.ts
+14 -51
查看文件
@@ -1,4 +1,5 @@
import type { InventoryCheckResult } from "../api/inventoryChecks";
import { createIndexedDbStore, requestPromise } from "./indexedDbStore";
export type QueuedInventoryScanItem = {
id: string;
@@ -11,54 +12,16 @@ export type QueuedInventoryScanItem = {
lastError: string | null;
};
const DB_NAME = "hyb-oa-mobile-inventory";
const DB_VERSION = 1;
const STORE_NAME = "inventory_scan_queue";
let dbPromise: Promise<IDBDatabase> | null = null;
function getDatabase() {
if (!dbPromise) {
dbPromise = new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, DB_VERSION);
request.onupgradeneeded = () => {
const db = request.result;
if (!db.objectStoreNames.contains(STORE_NAME)) {
db.createObjectStore(STORE_NAME, { keyPath: "id" });
}
};
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error ?? new Error("indexeddb_open_failed"));
});
}
return dbPromise;
}
function requestPromise<T>(request: IDBRequest<T>) {
return new Promise<T>((resolve, reject) => {
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error ?? new Error("indexeddb_request_failed"));
});
}
async function withStore<T>(mode: IDBTransactionMode, executor: (store: IDBObjectStore) => Promise<T>) {
const db = await getDatabase();
return new Promise<T>((resolve, reject) => {
const tx = db.transaction(STORE_NAME, mode);
const store = tx.objectStore(STORE_NAME);
executor(store)
.then((result) => {
tx.oncomplete = () => resolve(result);
tx.onerror = () => reject(tx.error ?? new Error("indexeddb_tx_failed"));
})
.catch((error) => reject(error));
});
}
const database = createIndexedDbStore({
dbName: "hyb-oa-mobile-inventory",
dbVersion: 1,
upgrade(db) {
if (!db.objectStoreNames.contains(STORE_NAME)) {
db.createObjectStore(STORE_NAME, { keyPath: "id" });
}
},
});
export async function enqueueInventoryScan(input: {
inventoryCheckId: string;
@@ -79,7 +42,7 @@ export async function enqueueInventoryScan(input: {
lastError: null,
};
await withStore("readwrite", async (store) => {
await database.withStore(STORE_NAME, "readwrite", async (store) => {
await requestPromise(store.put(item));
return true;
});
@@ -88,21 +51,21 @@ export async function enqueueInventoryScan(input: {
}
export async function listQueuedInventoryScans() {
return withStore("readonly", async (store) => {
return database.withStore(STORE_NAME, "readonly", async (store) => {
const records = (await requestPromise(store.getAll())) as QueuedInventoryScanItem[];
return records.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
});
}
export async function removeQueuedInventoryScan(id: string) {
await withStore("readwrite", async (store) => {
await database.withStore(STORE_NAME, "readwrite", async (store) => {
await requestPromise(store.delete(id));
return true;
});
}
export async function updateQueuedInventoryScanError(id: string, lastError: string | null) {
await withStore("readwrite", async (store) => {
await database.withStore(STORE_NAME, "readwrite", async (store) => {
const existing = (await requestPromise(store.get(id))) as QueuedInventoryScanItem | undefined;
if (!existing) {
return false;
client/src/mobile/uploadQueue.ts
+14 -50
查看文件
@@ -1,3 +1,5 @@
import { createIndexedDbStore, requestPromise } from "./indexedDbStore";
export type MobileUploadQueueItem = {
id: string;
fileName: string;
@@ -7,31 +9,16 @@ export type MobileUploadQueueItem = {
ownerEmployeeId: string | null;
};
const DB_NAME = "hyb-oa-mobile";
const DB_VERSION = 1;
const STORE_NAME = "invoice_upload_queue";
let dbPromise: Promise<IDBDatabase> | null = null;
function getDatabase() {
if (!dbPromise) {
dbPromise = new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, DB_VERSION);
request.onupgradeneeded = () => {
const db = request.result;
if (!db.objectStoreNames.contains(STORE_NAME)) {
db.createObjectStore(STORE_NAME, { keyPath: "id" });
}
};
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error ?? new Error("indexeddb_open_failed"));
});
}
return dbPromise;
}
const database = createIndexedDbStore({
dbName: "hyb-oa-mobile",
dbVersion: 1,
upgrade(db) {
if (!db.objectStoreNames.contains(STORE_NAME)) {
db.createObjectStore(STORE_NAME, { keyPath: "id" });
}
},
});
function toDataUrl(file: File) {
return new Promise<string>((resolve, reject) => {
@@ -65,29 +52,6 @@ function fromDataUrl(dataUrl: string, fallbackFileName: string, fallbackMimeType
return new File([bytes], fallbackFileName, { type: mimeType });
}
async function withStore<T>(mode: IDBTransactionMode, executor: (store: IDBObjectStore) => Promise<T>) {
const db = await getDatabase();
return new Promise<T>((resolve, reject) => {
const tx = db.transaction(STORE_NAME, mode);
const store = tx.objectStore(STORE_NAME);
executor(store)
.then((result) => {
tx.oncomplete = () => resolve(result);
tx.onerror = () => reject(tx.error ?? new Error("indexeddb_tx_failed"));
})
.catch((error) => reject(error));
});
}
function requestPromise<T>(request: IDBRequest<T>) {
return new Promise<T>((resolve, reject) => {
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error ?? new Error("indexeddb_request_failed"));
});
}
export async function enqueueInvoiceUpload(file: File, ownerEmployeeId: string | null = null) {
const dataUrl = await toDataUrl(file);
const item: MobileUploadQueueItem = {
@@ -99,7 +63,7 @@ export async function enqueueInvoiceUpload(file: File, ownerEmployeeId: string |
ownerEmployeeId,
};
await withStore("readwrite", async (store) => {
await database.withStore(STORE_NAME, "readwrite", async (store) => {
await requestPromise(store.put(item));
return true;
});
@@ -108,14 +72,14 @@ export async function enqueueInvoiceUpload(file: File, ownerEmployeeId: string |
}
export async function listQueuedInvoiceUploads() {
return withStore("readonly", async (store) => {
return database.withStore(STORE_NAME, "readonly", async (store) => {
const records = (await requestPromise(store.getAll())) as MobileUploadQueueItem[];
return records.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
});
}
export async function removeQueuedInvoiceUpload(id: string) {
await withStore("readwrite", async (store) => {
await database.withStore(STORE_NAME, "readwrite", async (store) => {
await requestPromise(store.delete(id));
return true;
});
client/src/mobile/workflowActionQueue.ts
+208
查看文件
@@ -0,0 +1,208 @@
import type { WorkflowTaskDetail } from "../api/workflow";
import { createIndexedDbStore, requestPromise } from "./indexedDbStore";
export type WorkflowDraftAction = "approve" | "reject";
export type WorkflowDraftQueueStatus = "queued" | "failed" | "conflicted";
export type WorkflowTaskReferenceSnapshot = {
stepName: string | null;
entityType: string | null;
entityId: string | null;
reference: string | null;
};
export type WorkflowDraftQueueItem = {
id: string;
taskId: string;
action: WorkflowDraftAction;
comment: string | null;
status: WorkflowDraftQueueStatus;
createdAt: string;
updatedAt: string;
lastError: string | null;
ownerEmployeeId: string | null;
taskSnapshot: WorkflowTaskReferenceSnapshot;
};
type CachedWorkflowTaskDetail = {
id: string;
ownerEmployeeId: string | null;
savedAt: string;
taskSnapshot: WorkflowTaskReferenceSnapshot;
detail: WorkflowTaskDetail;
};
const QUEUE_STORE_NAME = "workflow_action_queue";
const DETAIL_CACHE_STORE_NAME = "workflow_task_cache";
const database = createIndexedDbStore({
dbName: "hyb-oa-mobile-workflow",
dbVersion: 1,
upgrade(db) {
if (!db.objectStoreNames.contains(QUEUE_STORE_NAME)) {
db.createObjectStore(QUEUE_STORE_NAME, { keyPath: "id" });
}
if (!db.objectStoreNames.contains(DETAIL_CACHE_STORE_NAME)) {
db.createObjectStore(DETAIL_CACHE_STORE_NAME, { keyPath: "id" });
}
},
});
function matchesOwner(recordOwnerId: string | null | undefined, ownerEmployeeId: string | null) {
return (recordOwnerId ?? null) === (ownerEmployeeId ?? null);
}
export function resolveWorkflowTaskReferenceSnapshot(detail: WorkflowTaskDetail): WorkflowTaskReferenceSnapshot {
const entityType = detail.workflowInstance?.entityType ?? null;
const entityId =
detail.reimbursement?.id ?? detail.leaveRequest?.id ?? detail.purchaseRequest?.id ?? detail.travelRequest?.id ?? detail.workflowInstance?.id ?? null;
const reference =
detail.reimbursement?.formNumber ??
detail.purchaseRequest?.requestNo ??
detail.travelRequest?.requestNo ??
detail.leaveRequest?.id ??
detail.task.id;
return {
stepName: detail.task.stepName ?? null,
entityType,
entityId,
reference,
};
}
export async function cacheWorkflowTaskDetail(detail: WorkflowTaskDetail, ownerEmployeeId: string | null) {
const item: CachedWorkflowTaskDetail = {
id: detail.task.id,
ownerEmployeeId,
savedAt: new Date().toISOString(),
taskSnapshot: resolveWorkflowTaskReferenceSnapshot(detail),
detail,
};
await database.withStore(DETAIL_CACHE_STORE_NAME, "readwrite", async (store) => {
await requestPromise(store.put(item));
return true;
});
return item;
}
export async function getCachedWorkflowTaskDetail(taskId: string, ownerEmployeeId: string | null) {
return database.withStore(DETAIL_CACHE_STORE_NAME, "readonly", async (store) => {
const item = (await requestPromise(store.get(taskId))) as CachedWorkflowTaskDetail | undefined;
if (!item || !matchesOwner(item.ownerEmployeeId, ownerEmployeeId)) {
return null;
}
return item;
});
}
export async function listCachedWorkflowTaskDetails(ownerEmployeeId: string | null) {
return database.withStore(DETAIL_CACHE_STORE_NAME, "readonly", async (store) => {
const records = (await requestPromise(store.getAll())) as CachedWorkflowTaskDetail[];
return records
.filter((item) => matchesOwner(item.ownerEmployeeId, ownerEmployeeId))
.sort((a, b) => b.savedAt.localeCompare(a.savedAt));
});
}
export async function enqueueWorkflowActionDraft(input: {
taskId: string;
action: WorkflowDraftAction;
comment?: string | null;
ownerEmployeeId: string | null;
detail?: WorkflowTaskDetail | null;
taskSnapshot?: WorkflowTaskReferenceSnapshot | null;
}) {
const id = input.taskId;
const now = new Date().toISOString();
const nextSnapshot = input.detail
? resolveWorkflowTaskReferenceSnapshot(input.detail)
: input.taskSnapshot ?? {
stepName: null,
entityType: null,
entityId: null,
reference: input.taskId,
};
await database.withStore(QUEUE_STORE_NAME, "readwrite", async (store) => {
const existing = (await requestPromise(store.get(id))) as WorkflowDraftQueueItem | undefined;
const item: WorkflowDraftQueueItem = {
id,
taskId: input.taskId,
action: input.action,
comment: input.comment?.trim() ? input.comment.trim() : null,
status: "queued",
createdAt: existing && matchesOwner(existing.ownerEmployeeId, input.ownerEmployeeId) ? existing.createdAt : now,
updatedAt: now,
lastError: null,
ownerEmployeeId: input.ownerEmployeeId,
taskSnapshot: nextSnapshot,
};
await requestPromise(store.put(item));
return true;
});
if (input.detail) {
await cacheWorkflowTaskDetail(input.detail, input.ownerEmployeeId);
}
return getWorkflowActionDraft(input.taskId, input.ownerEmployeeId);
}
export async function listWorkflowActionDrafts(ownerEmployeeId: string | null) {
return database.withStore(QUEUE_STORE_NAME, "readonly", async (store) => {
const records = (await requestPromise(store.getAll())) as WorkflowDraftQueueItem[];
return records
.filter((item) => matchesOwner(item.ownerEmployeeId, ownerEmployeeId))
.sort((a, b) => a.updatedAt.localeCompare(b.updatedAt));
});
}
export async function getWorkflowActionDraft(taskId: string, ownerEmployeeId: string | null) {
return database.withStore(QUEUE_STORE_NAME, "readonly", async (store) => {
const item = (await requestPromise(store.get(taskId))) as WorkflowDraftQueueItem | undefined;
if (!item || !matchesOwner(item.ownerEmployeeId, ownerEmployeeId)) {
return null;
}
return item;
});
}
export async function removeWorkflowActionDraft(taskId: string, ownerEmployeeId: string | null) {
await database.withStore(QUEUE_STORE_NAME, "readwrite", async (store) => {
const existing = (await requestPromise(store.get(taskId))) as WorkflowDraftQueueItem | undefined;
if (!existing || !matchesOwner(existing.ownerEmployeeId, ownerEmployeeId)) {
return false;
}
await requestPromise(store.delete(taskId));
return true;
});
}
export async function updateWorkflowActionDraftStatus(input: {
taskId: string;
ownerEmployeeId: string | null;
status: WorkflowDraftQueueStatus;
lastError: string | null;
}) {
return database.withStore(QUEUE_STORE_NAME, "readwrite", async (store) => {
const existing = (await requestPromise(store.get(input.taskId))) as WorkflowDraftQueueItem | undefined;
if (!existing || !matchesOwner(existing.ownerEmployeeId, input.ownerEmployeeId)) {
return false;
}
await requestPromise(
store.put({
...existing,
status: input.status,
lastError: input.lastError,
updatedAt: new Date().toISOString(),
}),
);
return true;
});
}
client/src/pages/MobileApprovalsPage.tsx
+425 -36
查看文件
@@ -1,5 +1,6 @@
import { useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";
import { toast } from "sonner";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";
@@ -11,14 +12,29 @@ import {
rejectWorkflowTask,
returnWorkflowTask,
transferWorkflowTask,
type WorkflowTaskDetail,
} from "../api/workflow";
import { useAuth } from "../auth/AuthContext";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Spinner } from "../components/ui/spinner";
import { Textarea } from "../components/ui/textarea";
import {
cacheWorkflowTaskDetail,
enqueueWorkflowActionDraft,
getCachedWorkflowTaskDetail,
listCachedWorkflowTaskDetails,
listWorkflowActionDrafts,
removeWorkflowActionDraft,
resolveWorkflowTaskReferenceSnapshot,
updateWorkflowActionDraftStatus,
type WorkflowDraftQueueItem,
} from "../mobile/workflowActionQueue";
type MobileAction = "approve" | "reject" | "return" | "transfer";
type ReplayClassification = "failed" | "conflicted";
function entityLabel(entityType: string | undefined) {
if (entityType === "leave") {
return "请假";
@@ -35,53 +51,203 @@ function entityLabel(entityType: string | undefined) {
return entityType || "未知";
}
function resolveErrorMessage(error: unknown) {
if (isApiError(error)) {
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
}
if (error instanceof Error) {
return error.message;
}
return "动作执行失败";
}
function classifyReplayError(error: unknown): ReplayClassification {
if (!isApiError(error)) {
return "failed";
}
if (
(error.status === 409 && error.details?.task === "already_processed") ||
error.status === 403 ||
error.status === 404
) {
return "conflicted";
}
return "failed";
}
function queueStatusLabel(status: WorkflowDraftQueueItem["status"]) {
if (status === "queued") {
return "待同步";
}
if (status === "failed") {
return "同步失败";
}
return "存在冲突";
}
function formatDateTime(value: string) {
try {
return new Date(value).toLocaleString("zh-CN");
} catch {
return value;
}
}
export function MobileApprovalsPage() {
const queryClient = useQueryClient();
const [selectedTaskId, setSelectedTaskId] = useState("");
const { me, accessToken, offlineAccessMode } = useAuth();
const [searchParams, setSearchParams] = useSearchParams();
const deepLinkTaskId = searchParams.get("taskId")?.trim() ?? "";
const [selectedTaskId, setSelectedTaskId] = useState(deepLinkTaskId);
const [error, setError] = useState("");
const [message, setMessage] = useState("");
const [comment, setComment] = useState("");
const [transferToApproverId, setTransferToApproverId] = useState("");
const [transferReason, setTransferReason] = useState("");
const [isOnline, setIsOnline] = useState<boolean>(typeof navigator === "undefined" ? true : navigator.onLine);
const autoSyncRequestedRef = useRef(false);
const ownerEmployeeId = me?.id ?? null;
const canUseRemote = isOnline && Boolean(accessToken);
useEffect(() => {
setSelectedTaskId(deepLinkTaskId);
}, [deepLinkTaskId]);
function updateTaskSelection(taskId: string) {
setSelectedTaskId(taskId);
const nextParams = new URLSearchParams(searchParams);
if (taskId) {
nextParams.set("taskId", taskId);
} else {
nextParams.delete("taskId");
}
setSearchParams(nextParams, { replace: true });
}
const tasksQuery = useQuery({
enabled: canUseRemote,
queryKey: ["mobile", "workflow", "tasks"],
queryFn: () => fetchWorkflowTasks({ status: "pending", page: 1, pageSize: 30 }),
});
const detailQuery = useQuery({
enabled: Boolean(selectedTaskId),
enabled: Boolean(selectedTaskId) && canUseRemote,
queryKey: ["mobile", "workflow", "task-detail", selectedTaskId],
queryFn: () => fetchWorkflowTaskDetail(selectedTaskId),
});
const cachedTasksQuery = useQuery({
enabled: Boolean(ownerEmployeeId),
queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId],
queryFn: () => listCachedWorkflowTaskDetails(ownerEmployeeId),
});
const cachedDetailQuery = useQuery({
enabled: Boolean(selectedTaskId) && Boolean(ownerEmployeeId),
queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId, selectedTaskId],
queryFn: () => getCachedWorkflowTaskDetail(selectedTaskId, ownerEmployeeId),
});
const queueQuery = useQuery({
enabled: Boolean(ownerEmployeeId),
queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId],
queryFn: () => listWorkflowActionDrafts(ownerEmployeeId),
});
useEffect(() => {
if (!detailQuery.data || !ownerEmployeeId) {
return;
}
void cacheWorkflowTaskDetail(detailQuery.data, ownerEmployeeId).then(async () => {
await Promise.all([
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId] }),
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId, detailQuery.data?.task.id] }),
]);
});
}, [detailQuery.data, ownerEmployeeId, queryClient]);
const selectedTask = useMemo<WorkflowTaskDetail | null>(() => {
if (detailQuery.data) {
return detailQuery.data;
}
if (!canUseRemote) {
return cachedDetailQuery.data?.detail ?? null;
}
return null;
}, [cachedDetailQuery.data?.detail, canUseRemote, detailQuery.data]);
const canTransfer =
canUseRemote &&
selectedTask?.workflowInstance?.entityType === "reimbursement" &&
selectedTask.allowedActions.includes("transfer");
const approversQuery = useQuery({
enabled: detailQuery.data?.allowedActions?.includes("transfer") ?? false,
enabled: Boolean(canTransfer),
queryKey: ["mobile", "workflow", "approvers"],
queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 100 }),
});
const currentQueueItems = queueQuery.data ?? [];
const retryableQueueItems = useMemo(
() => currentQueueItems.filter((item) => item.status !== "conflicted"),
[currentQueueItems],
);
const actionMutation = useMutation({
mutationFn: async (action: MobileAction) => {
if (!selectedTaskId) {
throw new Error("请选择任务");
}
if (!selectedTask) {
throw new Error("当前待办尚未缓存，请联网加载后再操作");
}
if (!selectedTask.allowedActions.includes(action)) {
throw new Error("当前待办不允许该动作");
}
if (!canUseRemote) {
if (action === "return" || action === "transfer") {
throw new Error("离线仅支持通过 / 驳回草稿，退回与转审需联网执行");
}
if (action === "reject" && !comment.trim()) {
throw new Error("驳回必须填写意见");
}
await enqueueWorkflowActionDraft({
taskId: selectedTaskId,
action,
comment: action === "reject" ? comment.trim() : null,
ownerEmployeeId,
detail: selectedTask,
});
return { mode: "queued" as const, action };
}
if (action === "approve") {
return approveWorkflowTask(selectedTaskId);
await approveWorkflowTask(selectedTaskId);
return { mode: "submitted" as const, action };
}
if (action === "reject") {
if (!comment.trim()) {
throw new Error("驳回必须填写意见");
}
return rejectWorkflowTask(selectedTaskId, comment.trim());
await rejectWorkflowTask(selectedTaskId, comment.trim());
return { mode: "submitted" as const, action };
}
if (action === "return") {
if (!comment.trim()) {
throw new Error("退回必须填写意见");
}
return returnWorkflowTask(selectedTaskId, comment.trim());
await returnWorkflowTask(selectedTaskId, comment.trim());
return { mode: "submitted" as const, action };
}
if (!transferToApproverId) {
@@ -91,65 +257,195 @@ export function MobileApprovalsPage() {
throw new Error("转审理由至少 10 个字");
}
return transferWorkflowTask(selectedTaskId, transferToApproverId, transferReason.trim());
await transferWorkflowTask(selectedTaskId, transferToApproverId, transferReason.trim());
return { mode: "submitted" as const, action };
},
onSuccess: async () => {
onSuccess: async (result) => {
if (result.mode === "queued") {
await queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId] });
setError("");
setMessage(result.action === "approve" ? "当前离线，通过草稿已加入待同步队列。" : "当前离线，驳回草稿已加入待同步队列。");
toast.success(result.action === "approve" ? "已加入通过草稿队列" : "已加入驳回草稿队列");
return;
}
await Promise.all([
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "tasks"] }),
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-detail", selectedTaskId] }),
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId] }),
]);
setComment("");
setTransferReason("");
setTransferToApproverId("");
setError("");
setMessage("");
toast.success("操作成功");
},
onError: (err) => {
const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "动作执行失败";
setError(msg);
toast.error(msg);
onError: (actionError) => {
const nextError = resolveErrorMessage(actionError);
setError(nextError);
setMessage("");
toast.error(nextError);
},
});
const syncMutation = useMutation({
mutationFn: async (items: WorkflowDraftQueueItem[]) => {
let succeeded = 0;
let failed = 0;
let conflicted = 0;
for (const item of items.sort((a, b) => a.updatedAt.localeCompare(b.updatedAt))) {
try {
if (item.action === "approve") {
await approveWorkflowTask(item.taskId);
} else {
await rejectWorkflowTask(item.taskId, item.comment ?? "");
}
await removeWorkflowActionDraft(item.taskId, ownerEmployeeId);
succeeded += 1;
} catch (syncError) {
const classification = classifyReplayError(syncError);
const lastError = resolveErrorMessage(syncError);
await updateWorkflowActionDraftStatus({
taskId: item.taskId,
ownerEmployeeId,
status: classification,
lastError,
});
if (classification === "conflicted") {
conflicted += 1;
} else {
failed += 1;
}
}
}
return { succeeded, failed, conflicted };
},
onSuccess: async (result) => {
await Promise.all([
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId] }),
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "tasks"] }),
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-detail", selectedTaskId] }),
]);
setError("");
setMessage(`草稿同步完成：成功 ${result.succeeded}，失败 ${result.failed}，冲突 ${result.conflicted}`);
if (result.succeeded || result.failed || result.conflicted) {
toast.success(`草稿同步完成：成功 ${result.succeeded}，失败 ${result.failed}，冲突 ${result.conflicted}`);
}
},
onError: (syncError) => {
const nextError = resolveErrorMessage(syncError);
setError(nextError);
setMessage("");
toast.error(nextError);
},
});
useEffect(() => {
const onOnline = () => {
setIsOnline(true);
autoSyncRequestedRef.current = true;
};
const onOffline = () => {
setIsOnline(false);
};
window.addEventListener("online", onOnline);
window.addEventListener("offline", onOffline);
return () => {
window.removeEventListener("online", onOnline);
window.removeEventListener("offline", onOffline);
};
}, []);
useEffect(() => {
if (!autoSyncRequestedRef.current || !canUseRemote || syncMutation.isPending) {
return;
}
autoSyncRequestedRef.current = false;
if (retryableQueueItems.length) {
syncMutation.mutate(retryableQueueItems);
}
}, [canUseRemote, retryableQueueItems, syncMutation]);
const pendingTasks = tasksQuery.data?.items ?? [];
const selectedTask = detailQuery.data;
const canTransfer =
selectedTask?.workflowInstance?.entityType === "reimbursement" &&
selectedTask.allowedActions.includes("transfer");
const cachedTasks = cachedTasksQuery.data ?? [];
const visibleTaskCards = canUseRemote
? pendingTasks.map((task) => ({
id: task.id,
title: task.stepName,
subtitle: `业务：${entityLabel(task.workflowInstance?.entityType)}`,
status: task.status,
}))
: cachedTasks.map((item) => ({
id: item.detail.task.id,
title: item.taskSnapshot.stepName ?? item.detail.task.stepName,
subtitle: `业务：${entityLabel(item.taskSnapshot.entityType ?? item.detail.workflowInstance?.entityType)} · 缓存于 ${formatDateTime(item.savedAt)}`,
status: item.detail.task.status,
}));
const selectedReference = selectedTask ? resolveWorkflowTaskReferenceSnapshot(selectedTask) : null;
const isOfflineUncachedDeepLink = Boolean(selectedTaskId) && !selectedTask && !canUseRemote;
return (
<div className="space-y-4">
<PageHeader title="移动审批" subtitle="小屏快速处理待办任务。" />
<PageHeader
title="移动审批"
subtitle={deepLinkTaskId ? `深链待办：${deepLinkTaskId}` : "小屏快速处理待办任务，支持离线草稿与联网重放。"}
/>
{!isOnline ? (
<p className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-2 text-sm text-orange-700">
当前离线{offlineAccessMode ? "，已使用本地会话快照进入移动审批壳。" : "。"}仅支持查看已缓存待办，并起草通过 / 驳回草稿。
</p>
) : null}
{error ? (
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
) : null}
{message ? (
<p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
) : null}
<div className="card-std space-y-3 p-4" data-testid="mobile-approvals-list">
<h3 className="text-base font-semibold text-zinc-900">待办任务</h3>
<div className="flex items-center justify-between gap-3">
<h3 className="text-base font-semibold text-zinc-900">待办任务</h3>
<span className={`text-sm ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>{isOnline ? "在线" : "离线"}</span>
</div>
{tasksQuery.isLoading ? <div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div> : null}
{canUseRemote && tasksQuery.isLoading ? (
<div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div>
) : null}
{!tasksQuery.isLoading && pendingTasks.length === 0 ? (
<p className="text-sm text-zinc-500">暂无待办任务。</p>
{!canUseRemote ? (
<p className="text-sm text-zinc-500">离线状态下展示已缓存待办；若未缓存任务详情，可通过深链任务号联网后重试。</p>
) : null}
{!visibleTaskCards.length ? (
<p className="text-sm text-zinc-500">{canUseRemote ? "暂无待办任务。" : "暂无已缓存待办。"}</p>
) : null}
<div className="space-y-2">
{pendingTasks.map((task) => (
{visibleTaskCards.map((task) => (
<button
key={task.id}
className={`w-full rounded-lg border px-3 py-2 text-left text-sm ${
selectedTaskId === task.id
? "border-primary bg-primary-50 text-primary"
: "border-zinc-200 bg-white text-zinc-800"
selectedTaskId === task.id ? "border-primary bg-primary-50 text-primary" : "border-zinc-200 bg-white text-zinc-800"
}`}
data-testid={`mobile-approvals-task-${task.id}`}
onClick={() => setSelectedTaskId(task.id)}
onClick={() => updateTaskSelection(task.id)}
type="button"
>
<div className="font-medium">{task.stepName}</div>
<div className="font-medium">{task.title}</div>
<div className="text-xs text-zinc-500">任务ID: {task.id}</div>
<div className="text-xs text-zinc-500">业务: {entityLabel(task.workflowInstance?.entityType)}</div>
<div className="text-xs text-zinc-500">{task.subtitle}</div>
<div className="text-xs text-zinc-500">状态：{task.status}</div>
</button>
))}
</div>
@@ -160,16 +456,27 @@ export function MobileApprovalsPage() {
{!selectedTaskId ? <p className="text-sm text-zinc-500">请先选择任务。</p> : null}
{selectedTaskId && detailQuery.isLoading ? (
{selectedTaskId && canUseRemote && detailQuery.isLoading ? (
<p className="text-sm text-zinc-500">加载任务详情中...</p>
) : null}
{selectedTask && (
{selectedTaskId && canUseRemote && detailQuery.isError ? (
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveErrorMessage(detailQuery.error)}</p>
) : null}
{isOfflineUncachedDeepLink ? (
<p className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-2 text-sm text-orange-700">
离线未缓存该待办，请联网后重试。任务号：{selectedTaskId}
</p>
) : null}
{selectedTask ? (
<>
<div className="rounded-lg border border-zinc-200 p-3 text-sm">
<div>任务状态：{selectedTask.task.status}</div>
<div>步骤：{selectedTask.task.stepName}</div>
<div>对象类型：{entityLabel(selectedTask.workflowInstance?.entityType)}</div>
<div>业务参考：{selectedReference?.reference ?? "-"}</div>
{selectedTask.reimbursement ? (
<>
<div>报销单号：{selectedTask.reimbursement.formNumber ?? "-"}</div>
@@ -205,11 +512,15 @@ export function MobileApprovalsPage() {
<Textarea
data-testid="mobile-approvals-comment"
onChange={(event) => setComment(event.target.value)}
placeholder="驳回/退回意见"
placeholder="驳回 / 退回意见；离线仅支持驳回意见入队。"
rows={3}
value={comment}
/>
{!canUseRemote ? (
<p className="text-xs text-zinc-500">离线状态下仅支持通过 / 驳回草稿，退回与转审需联网执行。</p>
) : null}
<div className="flex flex-wrap gap-2">
<Button
data-testid="mobile-approvals-approve"
@@ -217,7 +528,7 @@ export function MobileApprovalsPage() {
onClick={() => actionMutation.mutate("approve")}
type="button"
>
通过
{canUseRemote ? "通过" : "离线加入通过草稿"}
</Button>
<Button
data-testid="mobile-approvals-reject"
@@ -226,11 +537,11 @@ export function MobileApprovalsPage() {
type="button"
variant="secondary"
>
驳回
{canUseRemote ? "驳回" : "离线加入驳回草稿"}
</Button>
<Button
data-testid="mobile-approvals-return"
disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("return")}
disabled={actionMutation.isPending || !canUseRemote || !selectedTask.allowedActions.includes("return")}
onClick={() => actionMutation.mutate("return")}
type="button"
variant="secondary"
@@ -276,7 +587,85 @@ export function MobileApprovalsPage() {
</div>
) : null}
</>
)}
) : null}
</div>
<div className="card-std space-y-3 p-4" data-testid="mobile-approvals-queue">
<div className="flex items-center justify-between gap-3">
<h3 className="text-base font-semibold text-zinc-900">离线审批草稿队列</h3>
<span className="text-sm text-zinc-500">{currentQueueItems.length ? `待处理 ${currentQueueItems.length} 项` : "无待处理项"}</span>
</div>
{currentQueueItems.length ? (
<div className="flex flex-wrap gap-2">
<Button
data-testid="mobile-approvals-sync-queue"
disabled={!canUseRemote || syncMutation.isPending || !retryableQueueItems.length}
onClick={() => syncMutation.mutate(retryableQueueItems)}
type="button"
variant="secondary"
>
{syncMutation.isPending ? "同步中..." : `同步草稿队列 (${retryableQueueItems.length})`}
</Button>
</div>
) : null}
{!currentQueueItems.length ? <p className="text-sm text-zinc-500">暂无待同步审批草稿。</p> : null}
{currentQueueItems.map((item) => (
<div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3 text-sm">
<div className="font-medium text-zinc-900">
{item.taskSnapshot.reference ?? item.taskId} · {item.action === "approve" ? "通过" : "驳回"}
</div>
<div className="text-zinc-500">业务：{entityLabel(item.taskSnapshot.entityType ?? undefined)} · 步骤：{item.taskSnapshot.stepName ?? "-"}</div>
<div className="text-zinc-500">状态：{queueStatusLabel(item.status)} · 更新时间：{formatDateTime(item.updatedAt)}</div>
<div className="text-zinc-500">意见：{item.comment ?? "-"}</div>
<div className="text-zinc-500">最近错误：{item.lastError ?? "-"}</div>
<div className="mt-2 flex flex-wrap gap-2">
<Button
type="button"
size="sm"
variant="secondary"
onClick={() => updateTaskSelection(item.taskId)}
>
查看任务
</Button>
{item.status === "failed" ? (
<Button
type="button"
size="sm"
variant="secondary"
disabled={syncMutation.isPending}
onClick={async () => {
await updateWorkflowActionDraftStatus({
taskId: item.taskId,
ownerEmployeeId,
status: "queued",
lastError: null,
});
await queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId] });
if (canUseRemote) {
syncMutation.mutate([{ ...item, status: "queued", lastError: null }]);
}
}}
>
重试
</Button>
) : null}
<Button
type="button"
size="sm"
variant="secondary"
onClick={async () => {
await removeWorkflowActionDraft(item.taskId, ownerEmployeeId);
await queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId] });
}}
>
丢弃草稿
</Button>
</div>
</div>
))}
</div>
</div>
);
client/src/pages/WorkflowTaskDetailPage.tsx
+6 -1
查看文件
@@ -1,5 +1,5 @@
import { useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { Link, Navigate, useNavigate, useParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
@@ -14,6 +14,7 @@ import {
import { toast } from "sonner";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { buildMobileApprovalsPath, shouldPreferMobileApprovalExperience } from "../pwa";
import { CardSkeleton } from "../components/common/CardSkeleton";
import { PageHeader } from "../components/common/PageHeader";
import { StatusBadge } from "../components/common/StatusBadge";
@@ -119,6 +120,10 @@ export function WorkflowTaskDetailPage() {
);
}
if (shouldPreferMobileApprovalExperience()) {
return <Navigate replace to={buildMobileApprovalsPath(taskId)} />;
}
if (detailQuery.isLoading) {
return <CardSkeleton lines={8} />;
}
client/src/pwa.ts
+64 -1
查看文件
@@ -1,5 +1,17 @@
import { registerSW } from "virtual:pwa-register";
const MOBILE_APPROVAL_TASK_PATH = /^\/workflow\/tasks\/([^/]+)$/i;
const OFFLINE_ALLOWED_PATHS = ["/mobile/approvals"];
const RUNTIME_CACHE_NAMES = ["app-api-runtime"];
function canUseWindow() {
return typeof window !== "undefined";
}
function matchesMedia(query: string) {
return canUseWindow() && typeof window.matchMedia === "function" && window.matchMedia(query).matches;
}
export function registerPwaIfEnabled() {
if (import.meta.env.DEV) {
return;
@@ -12,9 +24,60 @@ export function registerPwaIfEnabled() {
registerSW({
immediate: true,
onOfflineReady() {
if (typeof window !== "undefined") {
if (canUseWindow()) {
window.dispatchEvent(new CustomEvent("hyb-oa:pwa-offline-ready"));
}
},
});
}
export function buildMobileApprovalsPath(taskId?: string | null) {
const normalizedTaskId = String(taskId ?? "").trim();
if (!normalizedTaskId) {
return "/mobile/approvals";
}
const params = new URLSearchParams({ taskId: normalizedTaskId });
return `/mobile/approvals?${params.toString()}`;
}
export function extractWorkflowTaskId(pathname: string) {
const match = pathname.match(MOBILE_APPROVAL_TASK_PATH);
return match?.[1] ?? null;
}
export function isOfflineSnapshotAllowedPath(pathname: string) {
if (OFFLINE_ALLOWED_PATHS.includes(pathname)) {
return true;
}
return Boolean(extractWorkflowTaskId(pathname));
}
export function shouldPreferMobileApprovalExperience() {
if (!canUseWindow()) {
return false;
}
const userAgent = window.navigator.userAgent.toLowerCase();
const isStandalone = matchesMedia("(display-mode: standalone)") || (window.navigator as Navigator & { standalone?: boolean }).standalone === true;
const isImContainer = /(wxwork|wecom|wechatwork|dingtalk|aliapp\(dingtalk\))/i.test(userAgent);
const isTouchSmallScreen = window.navigator.maxTouchPoints > 0 && matchesMedia("(max-width: 1024px)");
return isStandalone || isImContainer || isTouchSmallScreen;
}
export async function clearPwaRuntimeCaches() {
if (!canUseWindow() || !("caches" in window)) {
return;
}
await Promise.all(
RUNTIME_CACHE_NAMES.map(async (cacheName) => {
try {
await window.caches.delete(cacheName);
} catch {
}
}),
);
}
client/src/router/guards.tsx
+12 -8
查看文件
@@ -2,6 +2,7 @@ import type { PropsWithChildren } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { useAuth } from "../auth/AuthContext";
import { hasAnyPermission } from "../auth/permissions";
import { isOfflineSnapshotAllowedPath } from "../pwa";
function FullPageLoading() {
return (
@@ -18,19 +19,22 @@ function toLoginRedirect(pathname: string, search: string, hash: string) {
export function RequireAuth({ children }: PropsWithChildren) {
const location = useLocation();
const { accessToken, me, ready, mustChangePassword } = useAuth();
const { accessToken, me, ready, mustChangePassword, offlineAccessMode } = useAuth();
if (!ready) {
return <FullPageLoading />;
}
if (!accessToken || !me) {
return (
<Navigate
to={toLoginRedirect(location.pathname, location.search, location.hash)}
replace
/>
);
if (!me) {
return <Navigate to={toLoginRedirect(location.pathname, location.search, location.hash)} replace />;
}
if (!accessToken) {
if (offlineAccessMode && isOfflineSnapshotAllowedPath(location.pathname)) {
return <>{children}</>;
}
return <Navigate to={toLoginRedirect(location.pathname, location.search, location.hash)} replace />;
}
if (mustChangePassword && location.pathname !== "/change-password") {
client/vite.config.ts
+40 -2
查看文件
@@ -38,11 +38,49 @@ export default defineConfig({
},
workbox: {
navigateFallback: "/index.html",
navigateFallbackDenylist: [/^\/api\//],
globPatterns: ["**/*.{js,css,html,ico,png,svg,webmanifest}"],
runtimeCaching: [
{
urlPattern: ({ url }) => url.pathname.startsWith("/api/"),
handler: "NetworkOnly",
urlPattern: ({ request, url }) =>
["script", "style", "font", "image"].includes(request.destination) || url.pathname.endsWith(".webmanifest"),
handler: "StaleWhileRevalidate",
options: {
cacheName: "app-static-runtime",
cacheableResponse: {
statuses: [0, 200],
},
expiration: {
maxEntries: 120,
maxAgeSeconds: 7 * 24 * 60 * 60,
},
},
},
{
urlPattern: ({ request, url }) => {
if (request.method !== "GET") {
return false;
}
return (
url.pathname === "/api/me" ||
url.pathname.startsWith("/api/workflow/tasks") ||
url.pathname.startsWith("/api/workflow/approvers") ||
url.pathname.startsWith("/api/notifications")
);
},
handler: "NetworkFirst",
options: {
cacheName: "app-api-runtime",
networkTimeoutSeconds: 3,
cacheableResponse: {
statuses: [200],
},
expiration: {
maxEntries: 80,
maxAgeSeconds: 30 * 60,
},
},
},
],
},