gxwebsoft/template-10490
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版本官网优化完成

Browse Source
This commit is contained in:
赵忠林
2025-02-12 16:37:07 +08:00
parent 43a2e17a80
commit 3efdbfc662
547 changed files with 23001 additions and 28169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
pages/item/[id].vue Normal file
View File

@@ -0,0 +1,278 @@
<!-- 文章详情 -->
<template>
<PageBanner :form="page" @done="reload"/>
<div class="page-main md:w-screen-xl m-auto p-3">
<el-row :gutter="24">
<el-col :span="18" :xs="24">
<el-card shadow="hover" class="mb-5">
<el-descriptions title="参数信息" :column="2" border>
<el-descriptions-item :span="2" label="产品名称">{{page.title}}</el-descriptions-item>
<el-descriptions-item v-if="form.isBuy" label="租户ID"><span class="text-orange-500">{{form.title}}</span></el-descriptions-item>
<el-descriptions-item v-if="form.isBuy" label="插件ID"><span class="text-orange-500">{{form.menuId || '-'}}</span></el-descriptions-item>
<el-descriptions-item label="控制台"><a class="cursor-pointer" @click="openUrl(`https://${form.domain}`)">{{form.domain}}</a></el-descriptions-item>
<el-descriptions-item v-for="(item,index) in form.parameters" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
</el-descriptions>
<template v-if="form.accounts && form.accounts.length > 0">
<div class="h-[24px]"></div>
<el-descriptions title="登录账号" :column="1" border>
<template v-for="(item,index) in form.accounts" :key="index">
<el-descriptions-item :label="item.type" v-if="item.account">
还没有账号? <el-button type="text" @click="openSpmUrl(`/passport/regis`)">立即注册</el-button>
</el-descriptions-item>
</template>
</el-descriptions>
</template>
<template v-if="form.gits && form.gits.length > 0">
<div class="h-[24px]"></div>
<el-descriptions title="代码仓库" :column="1" border>
<el-descriptions-item v-for="(item,index) in form.gits" :key="index" :label="item.title">
<el-input v-model="item.domain" readonly />
</el-descriptions-item>
</el-descriptions>
</template>
<template v-if="form.files && form.files.length > 0">
<div class="h-[24px]"></div>
<el-descriptions title="图文详情" />
<div v-for="(item,index) in JSON.parse(form.files)" :key="index" class="text item">
<el-image
:src="item"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="srcList"
:initial-index="4"
fit="contain"
/>
</div>
</template>
<template v-if="form.content">
<p v-html="form.content" class="content"></p>
</template>
</el-card>
<!-- 产品评论 -->
<Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments" />
</el-col>
<el-col :span="6" :xs="24">
<el-card shadow="hover" class="mb-5">
<template #header>
<div class="card-header font-bold text-xl">
<span>推荐产品</span>
</div>
</template>
<!-- <el-space class="flex items-center">-->
<!-- <div class="avatar">-->
<!-- <el-avatar :size="55" :src="form.image"/>-->
<!-- </div>-->
<!-- <div class="flex flex-col">-->
<!-- <span class="font-bold text-lg text-gray-600">{{ form.title }}</span>-->
<!-- <span class="text-gray-400 pb-1 line-clamp-2">{{ form.comments }}</span>-->
<!-- </div>-->
<!-- </el-space>-->
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import {Cpu,Download,Star,Coin,Tickets} from '@element-plus/icons-vue'
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useLayout, usePage, useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import {getIdBySpm, getNavIdByParamsId, openUrl} from "~/utils/common";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import Comments from './components/Comments.vue';
import type {Company} from "~/api/system/company/model";
import type {CompanyComment} from "~/api/system/companyComment/model";
import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";
import {getCmsArticle, pageCmsArticle} from "~/api/cms/cmsArticle";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
// 引入状态管理
const route = useRoute();
const page = usePage();
const layout = useLayout();
const category = ref<CmsNavigation[]>([]);
const i18n = useI18n();
const total = ref(0);
const list = ref<CmsArticle[]>([]);
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const comments = ref<CompanyComment[]>([]);
const commentsTotal = ref(0);
const commentsPage = ref(1);
const navId = ref();
const activeName = ref();
const url =
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = ref<any[]>([]);
// 配置信息
const {form, assignFields} = useFormData<CmsArticle>({
// 文章id
articleId: undefined,
// 文章模型
model: undefined,
// 文章标题
title: undefined,
// 分类类型
type: undefined,
// 展现方式
showType: undefined,
// 文章类型
categoryId: undefined,
// 文章分类
categoryName: undefined,
parentId: undefined,
// 封面图
image: undefined,
// 附件
files: undefined,
// 附件
fileList: [],
// 缩列图
thumbnail: undefined,
// 视频地址
video: undefined,
// 上传的文件类型
accept: undefined,
// 来源
source: undefined,
// 标签
tags: undefined,
// 文章内容
content: undefined,
// 虚拟阅读量
virtualViews: undefined,
// 实际阅读量
actualViews: undefined,
// 访问权限
permission: undefined,
// 访问密码
password: undefined,
password2: undefined,
// 用户ID
userId: undefined,
// 用户昵称
nickname: undefined,
// 账号
username: undefined,
// 用户头像
// userAvatar: undefined,
author: undefined,
// 所属门店ID
shopId: undefined,
//
likes: undefined,
// 排序
sortNumber: undefined,
// 备注
comments: undefined,
// 状态
status: undefined,
// 创建时间
createTime: undefined,
// 更新时间
updateTime: undefined,
// 租户ID
tenantId: undefined,
// 租户名称
tenantName: undefined,
// 租户logo
logo: undefined,
// 详情页路径
detail: undefined
});
// 搜索表单
const where = reactive<CmsArticleParam>({
keywords: '',
page: 1,
limit: 20,
status: 0,
parentId: undefined,
categoryId: undefined,
lang: i18n.locale.value
});
const doComments = async (page: any) => {
commentsPage.value = page;
await reloadComments();
}
// 加载评论
const reloadComments = async () => {
const {data: commentsResponse} = await useServerRequest<ApiResult<PageResult<CompanyComment>>>('/system/company-comment/page', {
params: {
companyId: getIdBySpm(5),
page: commentsPage.value,
// status: 1
}
})
if(commentsResponse.value && commentsResponse.value?.data){
comments.value = commentsResponse.value?.data?.list
commentsTotal.value = commentsResponse.value?.data?.count;
}
}
// 读取导航详情
const reload = async () => {
getCmsArticle(navId.value).then(data => {
// 获取栏目信息
page.value = data
assignFields(data)
layout.value.banner = data.banner;
// 设置页面标题
useSeoMeta({
description: data.comments || data.title,
keywords: data.title,
titleTemplate: `${data?.title}` + ' - %s',
})
// 二级栏目分类
// listCmsNavigation({
// parentId: data.parentId == 0 ? data.navigationId : data.parentId
// }).then(categoryData => {
// category.value = categoryData;
// // 加载文章列表
// if(data.parentId == 0 && category.value.length > 0){
// where.parentId = data.navigationId;
// }else {
// where.categoryId = data.navigationId;
// }
// pageCmsArticle(where).then(response => {
// if(response){
// total.value = response?.count;
// list.value = response?.list;
// }
// })
// })
}).catch(err => {
console.log(err,'加载失败...')
})
}
watch(
() => route.params.id,
(id) => {
navId.value = getNavIdByParamsId(id);
reload();
},
{ immediate: true }
);
</script>
<style lang="less">
.content {
img {
max-width: 100%;
height: auto !important;
}
}
</style>

2
pages/item/components/Comments.vue
View File

@@ -8,7 +8,7 @@
size="large"
status-icon
>
<el-card shadow="hover" v-if="comments" class="hover:border-green-50 hover:border-2 mb-5">
<el-card shadow="hover" v-if="comments" class="mb-5">
<template #header>
<div class="card-header font-bold text-xl flex justify-between">
<span>评分和评价</span>

59
pages/item/components/PageBanner.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="banner m-auto relative sm:flex">
<div class="banner m-auto relative sm:flex mt-15">
<svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg"
class="pointer-events-none absolute w-full top-[-2px] transition-all text-green-5 flex-shrink-0 opacity-100 duration-[400ms] opacity-80 -z-10">
<mask id="path-1-inside-1_414_5526" fill="white">
@@ -20,23 +20,23 @@
</defs>
</svg>
<div class="md:w-screen-xl m-auto">
<Breadcrumb :data="form"/>
<Breadcrumb :data="form" :categoryName="form?.categoryName"/>
<div class="py-8 sm:py-16" _path="/templates" _dir="" _draft="false" _partial="false" _locale=""
_id="content:4.templates.yml" _type="yaml" _source="content" _file="4.templates.yml" _stem="4.templates"
_extension="yml">
<div class="gap-8 sm:gap-y-16 lg:items-center" v-if="form">
<div class="w-full sm:px-0 px-4">
<div class="flex flex-1">
<template v-if="form.companyLogo">
<el-avatar :src="form.companyLogo" shape="square" :size="180"
class="hidden-sm-and-down rounded-avatar shadow-sm hover:shadow mr-4"/>
<el-avatar :src="form.companyLogo" shape="square" :size="80"
class="hidden-sm-and-up rounded-avatar-xs shadow-sm hover:shadow mr-4"/>
<template v-if="form.image">
<el-image :src="form.image" shape="square"
class="hidden-sm-and-down bg-white w-[128px] h-[128px] cursor-pointer rounded-avatar shadow-sm hover:shadow mr-4"/>
<!-- <el-image :src="form.image" shape="square" :size="80"-->
<!-- class="hidden-sm-and-up bg-white rounded-avatar-xs shadow-sm hover:shadow mr-4"/>-->
</template>
<div class="title flex flex-col">
<h1
class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl lg:text-4xl">
<span v-if="form.tenantName">{{ form.tenantName }}</span>
<span v-if="form.title">{{ form.title }}</span>
</h1>
<div class="my-1 text-sm text-gray-500 w-auto sm:max-w-3xl max-w-xs flex-1 dark:text-gray-400">
{{ form?.comments || desc }}
@@ -45,43 +45,10 @@
<!-- {{ form.companyName || 'WebSoft Inc.' }}-->
<!-- </a>-->
<el-rate v-model="form.rate" disabled />
<div class="btn" v-if="form.companyId">
<div class="btn">
<el-space class="mt-4">
<template v-if="form.isBuy">
<el-button v-if="form.installed" type="primary" @click.stop="loginDeveloperCenterByToken(form)">控制台</el-button>
<el-button v-else type="primary" @click.stop="loginDeveloperCenterByToken(form)">控制台</el-button>
</template>
<template v-else>
<el-button v-if="form.chargingMethod == 0" type="primary" @click.stop="loginDeveloperCenterByToken(form)">控制台</el-button>
<el-button v-else type="warning" @click.stop="openSpmUrl(`/product/create`,form,form.companyId,true)">立即开通
</el-button>
</template>
<!-- <el-button @click.stop="openSpmUrl(`https://${form.domain}`,form,form.companyId,true)">产品控制台</el-button>-->
<el-button @click="openSpmUrl(`/ask`,form,form.companyId,true)">帮助文档</el-button>
<!-- <template v-for="(item,index) in form.links" :key="index">-->
<!-- <div v-if="item.qrcode">-->
<!-- <el-popover-->
<!-- placement="top-start"-->
<!-- :width="200"-->
<!-- trigger="hover"-->
<!-- >-->
<!-- <template #default>-->
<!-- <div class=" p-2 flex justify-center">-->
<!-- <el-image :src="item.qrcode" :size="160"/>-->
<!-- </div>-->
<!-- </template>-->
<!-- <template #reference>-->
<!-- <el-button :icon="ElIconFullScreen">{{ item.type }}</el-button>-->
<!-- </template>-->
<!-- </el-popover>-->
<!-- </div>-->
<!-- <el-button-->
<!-- v-else-->
<!-- @click="openSpmUrl(`${item.domain}`,item,item.tenantId,true)"-->
<!-- >-->
<!-- {{ item.type }}-->
<!-- </el-button>-->
<!-- </template>-->
<el-button>产品控制台</el-button>
<el-button>帮助文档</el-button>
</el-space>
</div>
</div>
@@ -98,7 +65,7 @@ import {FullScreen} from '@element-plus/icons-vue'
import Breadcrumb from "~/components/Breadcrumb.vue";
import type {ApiResult} from "~/api";
import type {Company} from "~/api/system/company/model";
import {loginAdminByToken, loginDeveloperCenterByToken, openSpmUrl} from "~/utils/common";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
const token = useToken();
@@ -107,7 +74,7 @@ const props = withDefaults(
title?: string;
desc?: string;
buyUrl?: string;
form?: Company;
form?: CmsArticle;
value?: number;
}>(),
{}

293
pages/item/index.vue
View File

@@ -1,293 +0,0 @@
<!-- 文章详情 -->
<template>
<PageBanner :form="form" @done="reload"/>
<div class="page-main md:w-screen-xl m-auto p-3">
<el-row :gutter="24">
<el-col :span="18" :xs="24">
<el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
<template #header>
<div class="card-header font-bold text-xl">
<span>应用介绍</span>
</div>
</template>
<el-descriptions title="应用参数" :column="2" border>
<el-descriptions-item :span="2" label="应用名称">{{form.tenantName}}</el-descriptions-item>
<el-descriptions-item v-if="form.isBuy" label="租户ID"><span class="text-orange-500">{{form.tenantId}}</span></el-descriptions-item>
<el-descriptions-item v-if="form.isBuy" label="插件ID"><span class="text-orange-500">{{form.menuId || '-'}}</span></el-descriptions-item>
<el-descriptions-item label="控制台"><a class="cursor-pointer" @click="openUrl(`https://${form.domain}`)">{{form.domain}}</a></el-descriptions-item>
<el-descriptions-item v-for="(item,index) in form.parameters" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
</el-descriptions>
<template v-if="form.accounts && form.accounts.length > 0">
<div class="h-[24px]"></div>
<el-descriptions title="登录账号" :column="1" border>
<template v-for="(item,index) in form.accounts" :key="index">
<el-descriptions-item :label="item.type" v-if="item.account">
还没有账号? <el-button type="text" @click="openSpmUrl(`/passport/regis`)">立即注册</el-button>
</el-descriptions-item>
</template>
</el-descriptions>
</template>
<template v-if="form.gits && form.gits.length > 0">
<div class="h-[24px]"></div>
<el-descriptions title="代码仓库" :column="1" border>
<el-descriptions-item v-for="(item,index) in form.gits" :key="index" :label="item.title">
<el-input v-model="item.domain" readonly />
</el-descriptions-item>
</el-descriptions>
</template>
<template v-if="form.content">
<div class="h-[24px]"></div>
<el-descriptions title="详细说明" />
<p v-html="form.content" class="content"></p>
</template>
<template v-if="form.files && form.files.length > 0">
<div class="h-[24px]"></div>
<el-descriptions title="应用截图" />
<div v-for="(item,index) in form.files" :key="index" class="text item">
<el-image
:src="item.url"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="srcList"
:initial-index="4"
fit="contain"
/>
</div>
</template>
</el-card>
<!-- <el-card shadow="hover" v-if="form.files?.length" class="hover:border-green-50 hover:border-2 mb-5">-->
<!-- <template #header>-->
<!-- <div class="card-header font-bold text-xl">-->
<!-- <span>应用截图</span>-->
<!-- </div>-->
<!-- </template>-->
<!-- <div class="flex gap-xl">-->
<!-- <template v-for="(item,index) in form.files" :key="index" class="text item">-->
<!-- <el-image-->
<!-- :src="item.url"-->
<!-- :zoom-rate="1.2"-->
<!-- :max-scale="7"-->
<!-- :min-scale="0.2"-->
<!-- :preview-src-list="srcList"-->
<!-- :initial-index="4"-->
<!-- fit="contain"-->
<!-- />-->
<!-- </template>-->
<!-- </div>-->
<!-- </el-card>-->
<!-- 产品评论 -->
<Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments" />
</el-col>
<el-col :span="6" :xs="24">
<el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
<template #header>
<div class="card-header font-bold text-xl">
<span>开发者信息</span>
</div>
</template>
<el-space class="flex items-center">
<div class="avatar">
<el-avatar :size="55" :src="form.companyLogo"/>
</div>
<div class="flex flex-col">
<span class="font-bold text-lg text-gray-600">{{ form.companyName }}</span>
<span class="text-gray-400 pb-1 line-clamp-2">{{ form.comments }}</span>
</div>
</el-space>
<div class="flex flex-col text-gray-500 justify-between leading-7 mt-3">
<el-space class="flex items-center"><el-icon><Download /></el-icon>下载：6</el-space>
<el-space class="flex items-center"><el-icon><Star /></el-icon>收藏：0</el-space>
<el-space class="flex items-center"><el-icon><Coin /></el-icon>赞赏：0</el-space>
<el-space class="flex items-center"><el-icon><Tickets /></el-icon>文档：0</el-space>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import {Cpu,Download,Star,Coin,Tickets} from '@element-plus/icons-vue'
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import {getIdBySpm, openUrl} from "~/utils/common";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import Comments from './components/Comments.vue';
import type {Company} from "~/api/system/company/model";
import type {CompanyComment} from "~/api/system/companyComment/model";
// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const comments = ref<CompanyComment[]>([]);
const commentsTotal = ref(0);
const commentsPage = ref(1);
const activeName = ref();
const url =
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = ref<any[]>([]);
// 配置信息
const {form, assignFields} = useFormData<Company>({
companyId: undefined,
type: undefined,
shortName: undefined,
companyName: undefined,
companyType: undefined,
companyTypeMultiple: undefined,
appType: undefined,
companyLogo: undefined,
image: undefined,
files: undefined,
content: undefined,
companyCode: undefined,
domain: undefined,
phone: undefined,
tel: undefined,
email: undefined,
InvoiceHeader: undefined,
startTime: undefined,
expirationTime: undefined,
version: undefined,
versionName: undefined,
versionCode: undefined,
members: undefined,
storage: undefined,
storageMax: undefined,
buys: undefined,
clicks: undefined,
users: undefined,
departments: undefined,
industryParent: undefined,
industryChild: undefined,
country: undefined,
province: undefined,
city: undefined,
region: undefined,
address: undefined,
latitude: undefined,
longitude: undefined,
businessEntity: undefined,
comments: undefined,
authentication: undefined,
industryId: undefined,
industryName: undefined,
status: undefined,
userId: undefined,
official: undefined,
price: undefined,
planId: undefined,
sortNumber: undefined,
authoritative: undefined,
menuId: undefined,
merchantId: undefined,
tenantId: undefined,
tenantName: undefined,
tenantCode: undefined,
modules: undefined,
requestUrl: undefined,
socketUrl: undefined,
serverUrl: undefined,
modulesUrl: undefined,
merchantUrl: undefined,
websiteUrl: undefined,
mpWeixinCode: undefined,
mpAlipayCode: undefined,
h5Code: undefined,
androidUrl: undefined,
iosUrl: undefined,
avatar: undefined,
nickname: undefined,
code: undefined,
createTime: undefined,
updateTime: undefined,
password: undefined,
password2: undefined,
collection: undefined,
recommend: undefined,
title: undefined,
parentName: undefined,
categoryName: undefined,
parameters: undefined,
links: undefined,
accounts: undefined,
gits: undefined,
isBuy: undefined,
installed: undefined
});
const doComments = async (page: any) => {
commentsPage.value = page;
await reloadComments();
}
// 加载评论
const reloadComments = async () => {
const {data: commentsResponse} = await useServerRequest<ApiResult<PageResult<CompanyComment>>>('/system/company-comment/page', {
params: {
companyId: getIdBySpm(5),
page: commentsPage.value,
// status: 1
}
})
if(commentsResponse.value && commentsResponse.value?.data){
comments.value = commentsResponse.value?.data?.list
commentsTotal.value = commentsResponse.value?.data?.count;
}
}
// 请求数据
const reload = async () => {
// 存在spm(优先级高)
const {data: item} = await useServerRequest<ApiResult<Company>>('/system/company/' + getIdBySpm(5))
if (item.value?.data) {
assignFields(item.value.data)
form.title = item.value?.data?.title;
form.parentName = '产品';
form.categoryName = '产品详情';
if (item.value.data.files) {
form.files = JSON.parse(item.value?.data?.files)
srcList.value = form.files?.map(d => d.url)
}
form.comments = item.value?.data?.comments;
}
await reloadComments();
// seo
useHead({
title: `${form.tenantName} - ${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%;
height: auto !important;
}
}
</style>