feat: migrate app routes and business modules
This commit is contained in:
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<AppDialog
|
||||
:visible="Boolean(detailRecord)"
|
||||
eyebrow="成长详情"
|
||||
:title="detailRecord?.title || '成长记录'"
|
||||
confirm-text="关闭"
|
||||
:close-on-mask="detailState !== 'loading'"
|
||||
@confirm="close"
|
||||
@cancel="close"
|
||||
>
|
||||
<view class="detail-content">
|
||||
<AppLoading v-if="detailState === 'loading'" text="正在读取完整记录" />
|
||||
<text v-else-if="detailState === 'error'" class="detail-error">{{ detailError }}</text>
|
||||
<template v-else-if="detailRecord?.contentProtected && !detailRecord?.contentUnlocked">
|
||||
<text>这条成长记录已设置内容密码。</text>
|
||||
<input
|
||||
v-model="contentPassword"
|
||||
class="detail-password-input"
|
||||
password
|
||||
maxlength="128"
|
||||
placeholder="请输入8至128位内容密码"
|
||||
/>
|
||||
<AppButton
|
||||
block
|
||||
:disabled="protectionSubmitting"
|
||||
:label="protectionSubmitting ? '正在验证' : '解锁并查看'"
|
||||
@click="unlockContent"
|
||||
/>
|
||||
<text v-if="detailError" class="detail-error">{{ detailError }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<text v-if="detailError" class="detail-error">{{ detailError }}</text>
|
||||
<text>关联人物：{{ detailRecord?.personName || "未关联人物" }}</text>
|
||||
<text>记录类型：{{ detailRecord?.typeLabel || "未填写" }}</text>
|
||||
<text>记录日期：{{ detailRecord?.recordDate || "未填写" }}</text>
|
||||
<text v-if="detailRecord?.remindTime">提醒时间：{{ detailRecord.remindTime }}</text>
|
||||
<text class="detail-content__body">{{ detailRecord?.content || "未填写记录内容" }}</text>
|
||||
<view v-if="detailRecord?.mediaFiles?.length" class="detail-media">
|
||||
<image
|
||||
v-for="file in detailRecord.mediaFiles"
|
||||
:key="file.fileId"
|
||||
:src="file.accessUrl"
|
||||
mode="aspectFill"
|
||||
role="button"
|
||||
aria-label="查看成长记录图片"
|
||||
@click="previewMedia(file)"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="detailRecord?.canManageProtection" class="detail-protection-actions">
|
||||
<AppButton
|
||||
compact
|
||||
type="secondary"
|
||||
:label="detailRecord.contentProtected ? '修改内容密码' : '设置内容密码'"
|
||||
@click="openProtection('set')"
|
||||
/>
|
||||
<AppButton
|
||||
v-if="detailRecord.contentProtected"
|
||||
compact
|
||||
type="secondary"
|
||||
label="关闭内容密码"
|
||||
@click="openProtection('disable')"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</AppDialog>
|
||||
|
||||
<AppDialog
|
||||
:visible="protectionVisible"
|
||||
eyebrow="内容密码"
|
||||
:title="protectionTitle"
|
||||
:message="protectionMessage"
|
||||
:confirm-text="protectionConfirmText"
|
||||
cancel-text="取消"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="saveProtection"
|
||||
@cancel="closeProtection"
|
||||
>
|
||||
<input
|
||||
v-if="protectionMode === 'set'"
|
||||
v-model="contentPassword"
|
||||
class="detail-password-input"
|
||||
password
|
||||
maxlength="128"
|
||||
placeholder="请输入8至128位内容密码"
|
||||
/>
|
||||
<text v-if="detailError" class="detail-error">{{ detailError }}</text>
|
||||
</AppDialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onUnmounted, ref, watch } from "vue";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import {
|
||||
createRequestController,
|
||||
isRequestCancelled
|
||||
} from "@/services/api/request-controller.js";
|
||||
import { lifeRecordApi } from "@/services/api/life-record-service.js";
|
||||
import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
|
||||
|
||||
const props = defineProps({
|
||||
genealogyId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["busy-change", "transient-change"]);
|
||||
|
||||
const detailRecord = ref(null);
|
||||
const detailState = ref("idle");
|
||||
const detailError = ref("");
|
||||
const contentPassword = ref("");
|
||||
const protectionSubmitting = ref(false);
|
||||
const protectionVisible = ref(false);
|
||||
const protectionMode = ref("set");
|
||||
const growthDetailReadRequestController = createRequestController();
|
||||
const growthDetailUnlockRequestController = createRequestController();
|
||||
const growthProtectionMutationRequestController = createRequestController();
|
||||
let componentActive = true;
|
||||
|
||||
const protectionTitle = computed(() => {
|
||||
if (protectionMode.value === "disable") return "关闭内容密码？";
|
||||
return detailRecord.value?.contentProtected ? "修改内容密码" : "设置内容密码";
|
||||
});
|
||||
const protectionMessage = computed(() =>
|
||||
protectionMode.value === "disable"
|
||||
? "关闭后，有权查看记录的成员无需密码即可阅读。"
|
||||
: "设置8至128位密码，之后查看完整内容需要先验证。",
|
||||
);
|
||||
const protectionConfirmText = computed(() => {
|
||||
if (protectionSubmitting.value) return "正在保存";
|
||||
return protectionMode.value === "disable" ? "确认关闭" : "确认保存";
|
||||
});
|
||||
const isBusy = computed(() =>
|
||||
detailState.value === "loading" || protectionSubmitting.value,
|
||||
);
|
||||
const hasTransient = computed(() =>
|
||||
Boolean(detailRecord.value) || protectionVisible.value,
|
||||
);
|
||||
|
||||
watch(isBusy, (busy) => emit("busy-change", busy), { immediate: true });
|
||||
watch(hasTransient, (visible) => emit("transient-change", visible), { immediate: true });
|
||||
|
||||
const shouldIgnoreFailure = (cause) =>
|
||||
!componentActive || isRequestCancelled(cause);
|
||||
const isCurrentRecord = (recordId) =>
|
||||
componentActive && String(detailRecord.value?.id || "") === String(recordId);
|
||||
const clearDetailState = () => {
|
||||
detailRecord.value = null;
|
||||
detailState.value = "idle";
|
||||
detailError.value = "";
|
||||
contentPassword.value = "";
|
||||
protectionVisible.value = false;
|
||||
};
|
||||
const applyRecordDetail = (recordDetail) => {
|
||||
detailRecord.value = {
|
||||
...recordDetail,
|
||||
typeLabel:
|
||||
recordDetail.typeLabel || detailRecord.value?.typeLabel || "",
|
||||
};
|
||||
};
|
||||
|
||||
const open = async (record) => {
|
||||
if (!record?.id || isBusy.value) return;
|
||||
const recordId = String(record.id);
|
||||
growthDetailReadRequestController.abort();
|
||||
detailRecord.value = record;
|
||||
detailState.value = "loading";
|
||||
detailError.value = "";
|
||||
contentPassword.value = "";
|
||||
try {
|
||||
const recordDetail = await lifeRecordApi.getGrowthRecordDetail(
|
||||
props.genealogyId,
|
||||
recordId,
|
||||
"",
|
||||
{ requestController: growthDetailReadRequestController },
|
||||
);
|
||||
if (!isCurrentRecord(recordId)) return;
|
||||
applyRecordDetail(recordDetail);
|
||||
detailState.value = "ready";
|
||||
} catch (cause) {
|
||||
if (shouldIgnoreFailure(cause) || !isCurrentRecord(recordId)) return;
|
||||
detailState.value = "error";
|
||||
detailError.value = getRequestErrorMessage(cause, "完整记录读取失败，请稍后重试。");
|
||||
}
|
||||
};
|
||||
|
||||
const unlockContent = async () => {
|
||||
if (!detailRecord.value?.id || protectionSubmitting.value) return;
|
||||
if (contentPassword.value.length < 8 || contentPassword.value.length > 128) {
|
||||
detailError.value = "请输入8至128位内容密码。";
|
||||
return;
|
||||
}
|
||||
protectionSubmitting.value = true;
|
||||
detailError.value = "";
|
||||
const recordId = String(detailRecord.value.id);
|
||||
let passwordAccepted = false;
|
||||
try {
|
||||
const grant = await lifeRecordApi.unlockGrowthRecord(
|
||||
props.genealogyId,
|
||||
recordId,
|
||||
contentPassword.value,
|
||||
{ requestController: growthDetailUnlockRequestController },
|
||||
);
|
||||
if (!isCurrentRecord(recordId)) return;
|
||||
passwordAccepted = true;
|
||||
contentPassword.value = "";
|
||||
const recordDetail = await lifeRecordApi.getGrowthRecordDetail(
|
||||
props.genealogyId,
|
||||
recordId,
|
||||
grant.accessToken,
|
||||
{ requestController: growthDetailReadRequestController },
|
||||
);
|
||||
if (!isCurrentRecord(recordId)) return;
|
||||
applyRecordDetail(recordDetail);
|
||||
detailState.value = "ready";
|
||||
} catch (cause) {
|
||||
if (!shouldIgnoreFailure(cause) && isCurrentRecord(recordId)) {
|
||||
detailError.value = getRequestErrorMessage(
|
||||
cause,
|
||||
passwordAccepted
|
||||
? "密码已验证，但完整内容暂时无法读取，请稍后重试。"
|
||||
: "密码不正确，请重新输入。",
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
if (isCurrentRecord(recordId)) protectionSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openProtection = (mode) => {
|
||||
if (!detailRecord.value?.canManageProtection || protectionSubmitting.value) return;
|
||||
protectionMode.value = mode;
|
||||
contentPassword.value = "";
|
||||
detailError.value = "";
|
||||
protectionVisible.value = true;
|
||||
};
|
||||
const closeProtection = () => {
|
||||
if (protectionSubmitting.value) return;
|
||||
protectionVisible.value = false;
|
||||
contentPassword.value = "";
|
||||
detailError.value = "";
|
||||
};
|
||||
const saveProtection = async () => {
|
||||
if (!detailRecord.value?.canManageProtection || protectionSubmitting.value) return;
|
||||
if (
|
||||
protectionMode.value === "set" &&
|
||||
(contentPassword.value.length < 8 || contentPassword.value.length > 128)
|
||||
) {
|
||||
detailError.value = "请输入8至128位内容密码。";
|
||||
return;
|
||||
}
|
||||
protectionSubmitting.value = true;
|
||||
detailError.value = "";
|
||||
const recordId = String(detailRecord.value.id);
|
||||
const contentWillBeProtected = protectionMode.value !== "disable";
|
||||
let protectionCommitted = false;
|
||||
try {
|
||||
if (protectionMode.value === "disable") {
|
||||
await lifeRecordApi.disableGrowthRecordPassword(
|
||||
props.genealogyId,
|
||||
recordId,
|
||||
{ requestController: growthProtectionMutationRequestController },
|
||||
);
|
||||
} else {
|
||||
await lifeRecordApi.setGrowthRecordPassword(
|
||||
props.genealogyId,
|
||||
recordId,
|
||||
contentPassword.value,
|
||||
{ requestController: growthProtectionMutationRequestController },
|
||||
);
|
||||
}
|
||||
if (!isCurrentRecord(recordId)) return;
|
||||
protectionCommitted = true;
|
||||
protectionVisible.value = false;
|
||||
contentPassword.value = "";
|
||||
detailRecord.value = {
|
||||
...detailRecord.value,
|
||||
contentProtected: contentWillBeProtected,
|
||||
contentUnlocked: !contentWillBeProtected,
|
||||
};
|
||||
const recordDetail = await lifeRecordApi.getGrowthRecordDetail(
|
||||
props.genealogyId,
|
||||
recordId,
|
||||
"",
|
||||
{ requestController: growthDetailReadRequestController },
|
||||
);
|
||||
if (!isCurrentRecord(recordId)) return;
|
||||
applyRecordDetail(recordDetail);
|
||||
} catch (cause) {
|
||||
if (!shouldIgnoreFailure(cause) && isCurrentRecord(recordId)) {
|
||||
detailError.value = getRequestErrorMessage(
|
||||
cause,
|
||||
protectionCommitted
|
||||
? "内容密码已保存，但详情暂时没有刷新，请稍后重新打开。"
|
||||
: "内容密码设置没有保存，请稍后重试。",
|
||||
);
|
||||
if (protectionCommitted) detailState.value = "ready";
|
||||
}
|
||||
} finally {
|
||||
if (isCurrentRecord(recordId)) protectionSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
if (isBusy.value) return false;
|
||||
growthDetailReadRequestController.abort();
|
||||
growthDetailUnlockRequestController.abort();
|
||||
growthProtectionMutationRequestController.abort();
|
||||
clearDetailState();
|
||||
return true;
|
||||
};
|
||||
const closeTransient = () => {
|
||||
if (protectionVisible.value) {
|
||||
closeProtection();
|
||||
return !protectionSubmitting.value;
|
||||
}
|
||||
return detailRecord.value ? close() : false;
|
||||
};
|
||||
const previewMedia = (file) => {
|
||||
const urls = detailRecord.value?.mediaFiles
|
||||
?.map((mediaFile) => mediaFile.accessUrl)
|
||||
.filter(Boolean) || [];
|
||||
if (!file?.accessUrl || !urls.length || typeof uni?.previewImage !== "function") return;
|
||||
uni.previewImage({ current: file.accessUrl, urls });
|
||||
};
|
||||
|
||||
defineExpose({ closeTransient, open });
|
||||
|
||||
onUnmounted(() => {
|
||||
componentActive = false;
|
||||
growthDetailReadRequestController.abort();
|
||||
growthDetailUnlockRequestController.abort();
|
||||
growthProtectionMutationRequestController.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-content {
|
||||
width: 100%;
|
||||
margin-top: 18rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.detail-content > text {
|
||||
display: block;
|
||||
margin-top: 9rpx;
|
||||
color: $ink-muted;
|
||||
font-size: clamp(14px, 23rpx, 17px);
|
||||
line-height: 1.55;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.detail-content__body {
|
||||
padding-top: 10rpx;
|
||||
border-top: 1rpx solid rgba(142, 95, 41, .2);
|
||||
color: $ink !important;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.detail-media {
|
||||
display: grid;
|
||||
margin-top: 16rpx;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10rpx;
|
||||
}
|
||||
.detail-media image {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(128, 89, 49, .12);
|
||||
}
|
||||
.detail-password-input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 76rpx;
|
||||
margin: 16rpx 0;
|
||||
padding: 14rpx 18rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, .32);
|
||||
border-radius: 8rpx;
|
||||
background: #fffdf8;
|
||||
color: $ink;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
}
|
||||
.detail-protection-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 18rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
.detail-error {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $brand-red !important;
|
||||
font-size: clamp(13px, 21rpx, 16px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user