基于Java spring + vue3 + nuxt构建的内容管理系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

102 lines
2.5 KiB

<!-- 文章详情 -->
<template>
<PageBanner :form="form" />
<div class="page-main md:w-screen-xl m-auto">
<el-row :gutter="24">
<el-col :span="18">
<div class="p-6 leading-7 bg-white rounded-lg text-lg line-height-loose text-gray-600 content" v-html="form?.content">
</div>
</el-col>
<el-col :span="6">
<div class="p-4 leading-7 bg-white rounded-lg">
点击排行
</div>
<div class="p-4 leading-7 bg-white rounded-lg mt-4">
推荐文章
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import type {Navigation} from "~/api/cms/navigation/model";
import {getIdBySpm, getSpmUrl, openSpmUrl} from "~/utils/common";
import type {Article} from "~/api/cms/article/model";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import type {Company} from "~/api/system/company/model";
// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const previousArticle = ref<Article>();
const nextArticle = ref<Article>();
// 配置信息
const { form, assignFields } = useFormData<Company>({
companyId: undefined,
companyName: undefined,
companyLogo: undefined,
shortName: undefined,
domain: undefined,
email: undefined,
tenantId: undefined,
tenantName: '',
comments: '',
nickname: undefined,
version: undefined,
createTime: undefined,
title: '',
parentName: '',
categoryName: ''
});
// 请求数据
const reload = async () => {
// 存在spm(优先级高)
const { data: nav } = await useServerRequest<ApiResult<Company>>('/system/company/profileAll/' + getIdBySpm(5))
if (nav.value?.data) {
assignFields(nav.value.data)
form.nickname = nav.value.data?.companyName;
form.title = nav.value.data?.tenantName;
form.categoryName = '应用详情';
}
// seo
useHead({
title: `${form.title} - ${website.value.websiteName}`,
bodyAttrs: {
class: "page-container",
}
});
// 面包屑
breadcrumb.value = form
}
watch(
() => route.path,
(path) => {
console.log(path,'=>Path')
reload();
},
{ immediate: true }
);
</script>
<style lang="less">
.content {
img {
max-width: 100%;
}
}
</style>