feat: migrate app routes and business modules
This commit is contained in:
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<view class="article-detail-page" :class="`article-state--${articleState}`">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="article-detail-header"
|
||||
><PageHeader title="谱文详情" custom-back @back="backToArticles"
|
||||
/></view>
|
||||
|
||||
<view class="article-detail-content">
|
||||
<AppLoading
|
||||
v-if="articleState === 'loading'"
|
||||
text="正在读取谱文"
|
||||
description="请稍候，正在同步谱文正文。"
|
||||
/>
|
||||
<view v-else-if="articleState === 'ready'" class="article-card">
|
||||
<text v-if="article.category" class="article-card__category">{{
|
||||
article.category
|
||||
}}</text>
|
||||
<text class="article-card__title">{{ article.title }}</text>
|
||||
<text class="article-card__meta"
|
||||
>{{ article.author }} · {{ article.time || "未标注时间" }}</text
|
||||
>
|
||||
<text v-if="article.summary" class="article-card__summary">{{
|
||||
article.summary
|
||||
}}</text>
|
||||
<view class="article-card__divider" />
|
||||
<view v-if="article.contentProtected && !article.contentUnlocked" class="article-lock-card">
|
||||
<text>这篇谱文已设置内容密码</text>
|
||||
<input v-model="protectionPassword" password maxlength="128" placeholder="请输入8至128位内容密码" />
|
||||
<AppButton block :disabled="protectionSubmitting" :label="protectionSubmitting ? '正在验证' : '解锁并查看'" @click="unlockArticle" />
|
||||
<text v-if="protectionError">{{ protectionError }}</text>
|
||||
</view>
|
||||
<text class="article-card__content">{{
|
||||
article.contentProtected && !article.contentUnlocked ? "" : article.content || "作者暂未填写正文。"
|
||||
}}</text>
|
||||
<text class="article-card__views">阅读 {{ article.viewCount }} 次</text>
|
||||
<view v-if="article.canEdit || article.canDelete" class="article-card__actions">
|
||||
<AppButton
|
||||
v-if="article.canEdit && article.content"
|
||||
compact
|
||||
type="secondary"
|
||||
label="编辑谱文"
|
||||
@click="editArticle"
|
||||
/>
|
||||
<AppButton
|
||||
v-if="article.canDelete"
|
||||
compact
|
||||
type="secondary"
|
||||
label="删除谱文"
|
||||
@click="requestDeleteArticle"
|
||||
/>
|
||||
<AppButton
|
||||
v-if="article.canManageProtection"
|
||||
compact
|
||||
type="secondary"
|
||||
:label="article.contentProtected ? '修改内容密码' : '设置内容密码'"
|
||||
@click="openProtectionDialog('set')"
|
||||
/>
|
||||
<AppButton
|
||||
v-if="article.canManageProtection && article.contentProtected"
|
||||
compact
|
||||
type="secondary"
|
||||
label="关闭内容密码"
|
||||
@click="openProtectionDialog('disable')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="deleteError" class="article-card__error">{{ deleteError }}</text>
|
||||
</view>
|
||||
<view v-else class="article-state-card">
|
||||
<text>{{ stateCopy.title }}</text>
|
||||
<text>{{ stateCopy.copy }}</text>
|
||||
<AppButton block :label="stateCopy.action" @click="handleStateAction" />
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog
|
||||
:visible="deleteConfirmationVisible"
|
||||
:close-on-mask="false"
|
||||
eyebrow="删除确认"
|
||||
title="删除这篇谱文？"
|
||||
message="删除后无法恢复，请确认当前内容不再需要。"
|
||||
confirm-text="确认删除"
|
||||
cancel-text="保留谱文"
|
||||
show-cancel
|
||||
@confirm="deleteArticle"
|
||||
@cancel="closeDeleteConfirmation"
|
||||
/>
|
||||
<AppDialog
|
||||
:visible="protectionDialogVisible"
|
||||
eyebrow="内容密码"
|
||||
:title="protectionMode === 'disable' ? '关闭内容密码？' : article?.contentProtected ? '修改内容密码' : '设置内容密码'"
|
||||
:message="protectionMode === 'disable' ? '关闭后，有权查看谱文的成员无需密码即可阅读正文。' : '设置8至128位密码，之后阅读正文需要先验证。'"
|
||||
:confirm-text="protectionSubmitting ? '正在保存' : protectionMode === 'disable' ? '确认关闭' : '确认保存'"
|
||||
cancel-text="取消"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="confirmProtectionChange"
|
||||
@cancel="closeProtectionDialog"
|
||||
>
|
||||
<input v-if="protectionMode === 'set'" v-model="protectionPassword" class="protection-dialog-input" password maxlength="128" placeholder="请输入8至128位内容密码" />
|
||||
<text v-if="protectionError" class="article-card__error">{{ protectionError }}</text>
|
||||
</AppDialog>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import {
|
||||
createRequestController,
|
||||
isRequestCancelled
|
||||
} from "@/services/api/request-controller.js";
|
||||
import { familyArticleApi } from "@/services/api/family-article-service.js";
|
||||
import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
|
||||
import { goBack, openPage, returnTo } from "@/utils/navigation/gateway.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const articleId = ref("");
|
||||
const articleState = ref("loading");
|
||||
const article = ref(null);
|
||||
const deleteConfirmationVisible = ref(false);
|
||||
const deleting = ref(false);
|
||||
const deleteError = ref("");
|
||||
const articleAccessToken = ref("");
|
||||
const protectionPassword = ref("");
|
||||
const protectionError = ref("");
|
||||
const protectionDialogVisible = ref(false);
|
||||
const protectionMode = ref("set");
|
||||
const protectionSubmitting = ref(false);
|
||||
const articleReadController = createRequestController();
|
||||
const articleProtectionController = createRequestController();
|
||||
const articleDeleteController = createRequestController();
|
||||
let pageActive = true;
|
||||
let skipInitialShowRefresh = true;
|
||||
|
||||
const hasValidContext = computed(
|
||||
() =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(articleId.value),
|
||||
);
|
||||
const stateCopy = computed(() => {
|
||||
if (!hasValidContext.value) {
|
||||
return {
|
||||
title: "暂时无法打开谱文",
|
||||
copy: "未找到家谱或谱文信息，请返回后重新进入。",
|
||||
action: "返回上一页",
|
||||
};
|
||||
}
|
||||
if (articleState.value === "missing") {
|
||||
return {
|
||||
title: "该谱文已不存在",
|
||||
copy: "它可能已被作者删除，或你暂时无法查看。",
|
||||
action: "返回谱文列表",
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: "谱文暂时无法读取",
|
||||
copy: "请检查网络后重新读取。",
|
||||
action: "重新读取",
|
||||
};
|
||||
});
|
||||
|
||||
const loadArticle = async (accessToken = articleAccessToken.value) => {
|
||||
if (!hasValidContext.value) {
|
||||
articleState.value = "invalid";
|
||||
return;
|
||||
}
|
||||
articleState.value = "loading";
|
||||
try {
|
||||
const current = await familyArticleApi.getArticleDetail(
|
||||
genealogyId.value,
|
||||
articleId.value,
|
||||
accessToken,
|
||||
{ requestController: articleReadController },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
article.value = current;
|
||||
articleState.value = "ready";
|
||||
} catch (error) {
|
||||
if (!pageActive || isRequestCancelled(error)) return;
|
||||
articleState.value =
|
||||
error?.code === "HTTP_ERROR" && error?.httpStatus === 404
|
||||
? "missing"
|
||||
: "error";
|
||||
}
|
||||
};
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
articleId.value = String(query?.articleId || "");
|
||||
void loadArticle();
|
||||
});
|
||||
onShow(() => {
|
||||
if (skipInitialShowRefresh) {
|
||||
skipInitialShowRefresh = false;
|
||||
return;
|
||||
}
|
||||
if (hasValidContext.value) void loadArticle();
|
||||
});
|
||||
onUnload(() => {
|
||||
pageActive = false;
|
||||
articleReadController.abort();
|
||||
articleProtectionController.abort();
|
||||
articleDeleteController.abort();
|
||||
});
|
||||
|
||||
const backToArticles = () =>
|
||||
hasValidContext.value
|
||||
? returnTo("F04", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const handleStateAction = () =>
|
||||
articleState.value === "error" ? loadArticle() : backToArticles();
|
||||
const requestDeleteArticle = () => {
|
||||
if (!article.value?.canDelete || deleting.value) return;
|
||||
deleteError.value = "";
|
||||
deleteConfirmationVisible.value = true;
|
||||
};
|
||||
const unlockArticle = async () => {
|
||||
if (protectionSubmitting.value) return;
|
||||
if (protectionPassword.value.length < 8 || protectionPassword.value.length > 128) {
|
||||
protectionError.value = "请输入8至128位内容密码。";
|
||||
return;
|
||||
}
|
||||
protectionSubmitting.value = true;
|
||||
protectionError.value = "";
|
||||
try {
|
||||
const grant = await familyArticleApi.unlockArticle(
|
||||
genealogyId.value,
|
||||
articleId.value,
|
||||
protectionPassword.value,
|
||||
{ requestController: articleProtectionController },
|
||||
);
|
||||
articleAccessToken.value = grant.accessToken;
|
||||
protectionPassword.value = "";
|
||||
await loadArticle(grant.accessToken);
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) protectionError.value = getRequestErrorMessage(error, "密码不正确，请重新输入。");
|
||||
} finally {
|
||||
protectionSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
const openProtectionDialog = (mode) => {
|
||||
if (!article.value?.canManageProtection || protectionSubmitting.value) return;
|
||||
protectionMode.value = mode;
|
||||
protectionPassword.value = "";
|
||||
protectionError.value = "";
|
||||
protectionDialogVisible.value = true;
|
||||
};
|
||||
const closeProtectionDialog = () => {
|
||||
if (protectionSubmitting.value) return;
|
||||
protectionDialogVisible.value = false;
|
||||
protectionPassword.value = "";
|
||||
protectionError.value = "";
|
||||
};
|
||||
const confirmProtectionChange = async () => {
|
||||
if (!article.value?.canManageProtection || protectionSubmitting.value) return;
|
||||
if (protectionMode.value === "set" && (protectionPassword.value.length < 8 || protectionPassword.value.length > 128)) {
|
||||
protectionError.value = "请输入8至128位内容密码。";
|
||||
return;
|
||||
}
|
||||
protectionSubmitting.value = true;
|
||||
protectionError.value = "";
|
||||
try {
|
||||
if (protectionMode.value === "disable") {
|
||||
await familyArticleApi.disableArticlePassword(genealogyId.value, articleId.value, {
|
||||
requestController: articleProtectionController,
|
||||
});
|
||||
} else {
|
||||
await familyArticleApi.setArticlePassword(
|
||||
genealogyId.value,
|
||||
articleId.value,
|
||||
protectionPassword.value,
|
||||
{ requestController: articleProtectionController },
|
||||
);
|
||||
}
|
||||
if (!pageActive) return;
|
||||
articleAccessToken.value = "";
|
||||
protectionDialogVisible.value = false;
|
||||
protectionPassword.value = "";
|
||||
await loadArticle("");
|
||||
} catch (error) {
|
||||
if (pageActive && !isRequestCancelled(error))
|
||||
protectionError.value = getRequestErrorMessage(
|
||||
error,
|
||||
"内容密码设置没有保存，请稍后重试。",
|
||||
);
|
||||
} finally {
|
||||
if (pageActive) protectionSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
const editArticle = () =>
|
||||
article.value?.canEdit && article.value.content && !deleting.value
|
||||
? openPage(
|
||||
"F06",
|
||||
{
|
||||
genealogyId: genealogyId.value,
|
||||
articleId: articleId.value,
|
||||
mode: "edit",
|
||||
},
|
||||
"F05",
|
||||
)
|
||||
: Promise.resolve(false);
|
||||
const closeDeleteConfirmation = () => {
|
||||
if (!deleting.value) deleteConfirmationVisible.value = false;
|
||||
};
|
||||
const deleteArticle = async () => {
|
||||
if (!article.value?.canDelete || deleting.value) return;
|
||||
deleting.value = true;
|
||||
deleteError.value = "";
|
||||
let deletionCommitted = false;
|
||||
try {
|
||||
await familyArticleApi.deleteArticle(genealogyId.value, articleId.value, {
|
||||
requestController: articleDeleteController,
|
||||
});
|
||||
deletionCommitted = true;
|
||||
if (!pageActive) return;
|
||||
deleteConfirmationVisible.value = false;
|
||||
article.value = null;
|
||||
articleState.value = "missing";
|
||||
await backToArticles();
|
||||
} catch (error) {
|
||||
if (!pageActive) return;
|
||||
if (deletionCommitted) {
|
||||
deleteConfirmationVisible.value = false;
|
||||
article.value = null;
|
||||
articleState.value = "missing";
|
||||
return;
|
||||
}
|
||||
if (isRequestCancelled(error)) return;
|
||||
deleteError.value = getRequestErrorMessage(error, "谱文删除失败，请稍后重试。");
|
||||
deleteConfirmationVisible.value = false;
|
||||
} finally {
|
||||
if (pageActive) deleting.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../styles/adaptive-frame-profiles.scss";
|
||||
|
||||
.article-detail-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.article-detail-header,
|
||||
.article-detail-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.article-detail-content {
|
||||
flex: 1;
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.article-card,
|
||||
.article-state-card {
|
||||
@include adaptive-family-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.article-card {
|
||||
margin-top: 18rpx;
|
||||
padding: 34rpx 30rpx;
|
||||
}
|
||||
.article-card__category,
|
||||
.article-card__title,
|
||||
.article-card__meta,
|
||||
.article-card__summary,
|
||||
.article-card__content,
|
||||
.article-card__views {
|
||||
display: block;
|
||||
}
|
||||
.article-card__category {
|
||||
color: $brand-red;
|
||||
font-size: clamp(14px, 23rpx, 17px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.article-card__title {
|
||||
margin-top: 14rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: clamp(20px, 40rpx, 26px);
|
||||
font-weight: 700;
|
||||
line-height: 1.32;
|
||||
}
|
||||
.article-card__meta {
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
}
|
||||
.article-card__summary {
|
||||
margin-top: 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: clamp(15px, 25rpx, 18px);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.article-card__divider {
|
||||
height: 1rpx;
|
||||
margin: 26rpx 0;
|
||||
background: rgba(128, 89, 49, 0.22);
|
||||
}
|
||||
.article-card__content {
|
||||
color: $ink;
|
||||
font-size: clamp(16px, 28rpx, 20px);
|
||||
line-height: 1.85;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.article-card__views {
|
||||
margin-top: 30rpx;
|
||||
color: $ink-muted;
|
||||
font-size: clamp(13px, 21rpx, 16px);
|
||||
text-align: right;
|
||||
}
|
||||
.article-card__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
justify-content: flex-end;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.article-lock-card { margin: 16rpx 0; padding: 24rpx; border: 1rpx solid rgba(159, 23, 15, 0.3); border-radius: 10rpx; background: rgba(159, 23, 15, 0.05); }
|
||||
.article-lock-card > text { display: block; color: $ink; font-size: clamp(14px, 22rpx, 17px); }
|
||||
.article-lock-card input,
|
||||
.protection-dialog-input { box-sizing: border-box; width: 100%; min-height: 76rpx; margin: 16rpx 0; padding: 14rpx 18rpx; border: 1rpx solid rgba(128, 89, 49, 0.32); border-radius: 8rpx; background: #fffdf8; color: $ink; font-size: clamp(14px, 22rpx, 17px); }
|
||||
.article-card__error {
|
||||
margin-top: 12rpx;
|
||||
color: $brand-red;
|
||||
font-size: clamp(13px, 21rpx, 16px);
|
||||
line-height: 1.5;
|
||||
text-align: right;
|
||||
}
|
||||
.article-state-card {
|
||||
min-height: 350rpx;
|
||||
margin-top: 36rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.article-state-card > text {
|
||||
display: block;
|
||||
}
|
||||
.article-state-card > text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: clamp(19px, 35rpx, 24px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.article-state-card > text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: clamp(15px, 24rpx, 18px);
|
||||
line-height: 1.65;
|
||||
}
|
||||
.article-state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user