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

新增：开发者中心功能、md编辑器等。

Browse Source
This commit is contained in:
赵忠林
2025-02-17 15:25:24 +08:00
parent 9081e41188
commit d61e683d41
40 changed files with 5036 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

466
pages/developer/[id].vue Normal file
View File

@@ -0,0 +1,466 @@
<template>
<div class="xl:w-screen-xl m-auto py-4 my-20">
<el-page-header :icon="ArrowLeft" @back="goBack">
<template #content>
<span class="text-large font-600 mr-3"> 插件编辑 </span>
</template>
<div class="login-layout mt-10 sm:w-screen-xl w-full">
<el-form :model="form" label-width="auto" size="large">
<el-tabs
v-model="activeName"
type="border-card"
class="demo-tabs bg-white"
>
<el-tab-pane label="基本信息" name="info">
<el-form-item label="插件ID" class="px-4" label-width="100" label-position="left">
<el-input disabled v-model="form.websiteId"/>
</el-form-item>
<el-form-item label="插件标识" class="px-4" label-width="100" label-position="left">
<el-input v-model="form.websiteCode" :disabled="form.websiteCode != ''"/>
</el-form-item>
<el-form-item label="插件名称" class="px-4" label-width="100" label-position="left">
<el-input v-model="form.websiteName"/>
</el-form-item>
<el-form-item label="域名" class="px-4" label-width="100" label-position="left">
<el-input v-model="form.domain" placeholder="访问域名"/>
</el-form-item>
<!-- <el-form-item label="后台管理" class="px-4" label-width="100" label-position="left">-->
<!-- <el-input v-model="form.adminUrl" placeholder="site.websoft.top"/>-->
<!-- </el-form-item>-->
<el-form-item label="插件描述" class="px-4" label-width="100" label-position="left">
<el-input v-model="form.comments" type="textarea" placeholder="插件描述" :rows="4"/>
</el-form-item>
<el-form-item label="类型" class="px-4" label-width="100" label-position="left">
<el-select
v-model="form.websiteType"
multiple
placeholder="选择类型(多选)"
>
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="交付方式" class="px-4" label-width="100" label-position="left">
<el-input v-model="form.deliveryMethod" placeholder="交付方式"/>
</el-form-item>
<el-form-item label="计费方式" class="px-4" label-width="100" label-position="left">
<el-input v-model="form.chargingMethod" placeholder="计费方式"/>
</el-form-item>
<el-form-item label="插件价格" class="px-4" label-width="100" label-position="left">
<el-input v-model="form.price" placeholder="插件价格"/>
</el-form-item>
<el-form-item label="插件图标" class="px-4" label-width="100" label-position="left">
<el-upload
v-model:file-list="avatar"
action="https://common-api.websoft.top/api/oss/upload"
:headers="{
Authorization: token,
TenantId: 5,
}"
:limit="1"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="avatarRemove"
:on-success="avatarSuccess"
>
<el-icon>
<Plus/>
</el-icon>
</el-upload>
</el-form-item>
<el-form-item class="px-4" label-width="100" label-position="left">
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="插件截屏" name="files">
<el-upload
v-model:file-list="files"
action="https://common-api.websoft.top/api/oss/upload"
:headers="{
Authorization: token,
TenantId: 5,
}"
:limit="8"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="filesRemove"
:on-success="filesSuccess"
>
<el-icon>
<Plus/>
</el-icon>
</el-upload>
<el-form-item class="px-4" label-width="100" label-position="left">
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="详细介绍" name="content">
<!-- 编辑器 -->
<MdEditor v-model="form.content" @onUploadImg="onUploadImg"/>
<div class="flex flex-col">
<el-form-item class="my-4" label-position="left">
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label="评论管理" name="comments">
<Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments"/>
</el-tab-pane>
<el-tab-pane label="插件设置" name="setting">
<el-form-item label="允许展示到插件市场" class="px-4" label-width="200" label-position="left">
<el-switch v-model="form.market" title="允许展示到插件市场" @change="onSubmit"/>
</el-form-item>
<el-form-item label="是否推荐" class="px-4" label-width="200" label-position="left">
<el-switch disabled v-model="form.official" @change="onSubmit"/>
</el-form-item>
<el-form-item label="官方插件" class="px-4" label-width="200" label-position="left">
<el-switch disabled v-model="form.official" @change="onSubmit"/>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="统计信息" name="statistic">
<Statistic :form="form"/>
</el-tab-pane>
<el-tab-pane label="操作日志" name="log">
<el-timeline style="max-width: 600px">
<el-timeline-item
v-for="(activity, index) in logs"
:key="index"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</el-page-header>
</div>
</template>
<script setup lang="ts">
import {ArrowLeft, View, Search, Plus} from '@element-plus/icons-vue'
import type {UploadProps, UploadUserFile} from 'element-plus'
import {useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import {ref} from 'vue'
import {getNavIdByParamsId} from "~/utils/common";
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
import {getCmsWebsiteAll, updateCmsWebsite, updateCmsWebsiteAll} from "~/api/cms/cmsWebsite";
import Comments from "./components/Comments.vue";
import type {CompanyComment} from "~/api/system/companyComment/model";
import {MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {uploadOss} from "~/api/system/file";
import Statistic from "./components/Statistic.vue";
// 配置信息
const runtimeConfig = useRuntimeConfig();
const tenantId = localStorage.getItem('ServerTenantId')
const token = useToken();
const route = useRoute();
const router = useRouter();
const website = useWebsite()
const user = useUser();
const navId = ref();
const activeIndex = ref('');
const avatar = ref<UploadUserFile[]>([])
const files = ref<UploadUserFile[]>([])
const srcList = ref<string[]>([])
const dialogImageUrl = ref('')
const content = ref('');
const dialogVisible = ref(false)
const activeName = ref('info')
const comments = ref<CompanyComment[]>([]);
// 配置信息
const {form, assignFields} = useFormData<CmsWebsite>({
// 站点ID
websiteId: undefined,
// 网站名称
websiteName: undefined,
// 网站标识
websiteCode: undefined,
// 网站LOGO
websiteIcon: undefined,
// 网站LOGO
websiteLogo: undefined,
// 网站LOGO(深色模式)
websiteDarkLogo: undefined,
// 网站类型
websiteType: undefined,
// 评分
rate: undefined,
// 点赞数
likes: undefined,
// 访问量
clicks: undefined,
// 下载量
downloads: undefined,
// 网站截图
files: undefined,
// 网站关键词
keywords: undefined,
// 域名前缀
prefix: undefined,
// 绑定域名
domain: undefined,
// 是否官方
official: undefined,
// 是否显示在插件市场
market: undefined,
// 全局样式
style: undefined,
// 后台管理地址
adminUrl: undefined,
// 插件版本 10免费版 20专业版 30永久授权
version: undefined,
// 应用价格
price: undefined,
// 交付方式
deliveryMethod: undefined,
// 计费方式
chargingMethod: undefined,
// 服务到期时间
expirationTime: undefined,
// 模版ID
templateId: undefined,
// 行业类型(父级)
industryParent: undefined,
// 行业类型(子级)
industryChild: undefined,
// 企业ID
companyId: undefined,
// 所在国家
country: undefined,
// 所在省份
province: undefined,
// 所在城市
city: undefined,
// 所在辖区
region: undefined,
// 经度
longitude: undefined,
// 纬度
latitude: undefined,
// 街道地址
address: undefined,
// 联系电话
phone: undefined,
// 电子邮箱
email: undefined,
// ICP备案号
icpNo: undefined,
// 公安备案
policeNo: undefined,
// 插件介绍
content: undefined,
// 备注
comments: undefined,
// 是否推荐
recommend: undefined,
// 运行状态
running: undefined,
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
status: undefined,
// 维护说明
statusText: undefined,
// 关闭说明
statusClose: undefined,
// 状态图标
statusIcon: undefined,
// 全局样式
styles: undefined,
// 排序号
sortNumber: undefined,
// 用户ID
userId: undefined,
// 是否删除, 0否, 1是
deleted: undefined,
// 租户id
tenantId: undefined,
// 创建时间
createTime: undefined,
// 修改时间
updateTime: undefined,
// 网站配置
config: undefined,
topNavs: undefined,
bottomNavs: undefined,
loginUser: undefined
});
const logs = [
{
content: '发布插件',
timestamp: '2018-04-15',
},
{
content: '更新',
timestamp: '2018-04-13',
},
{
content: '更新',
timestamp: '2018-04-11',
},
]
const types = [
{
value: '网站',
label: '网站',
},
{
value: '小程序',
label: '小程序',
},
{
value: 'MacOS',
label: 'MacOS',
},
{
value: 'Windows',
label: 'Windows',
},
{
value: 'App',
label: 'App',
},
]
useHead({
title: `用户中心`,
meta: [{name: website.value.keywords, content: website.value.comments}]
});
const onDone = (index: string) => {
activeIndex.value = index;
}
const reload = async () => {
getCmsWebsiteAll(navId.value).then(data => {
// 获取栏目信息
assignFields(data)
// 插件头像
avatar.value = []
if (data.websiteLogo) {
avatar.value.push({
uid: form.websiteId,
url: data.websiteLogo,
name: '插件头像',
})
}
// 插件截图
files.value = []
if (data.files) {
const imgArr = JSON.parse(data.files);
imgArr.map((item: any) => {
files.value.push({
uid: form.websiteId,
url: item,
name: '插件截图',
})
srcList.value.push(item)
})
}
if(data.websiteType){
form.websiteType = JSON.parse(data.websiteType)
}
// 设置页面标题
useSeoMeta({
description: data.comments || data.websiteName,
keywords: data.websiteName,
titleTemplate: `${data?.websiteName}` + ' - %s',
})
// 加载评论
}).catch(err => {
console.log(err, '加载失败...')
})
}
const goBack = () => {
router.back(); // 返回上一页
}
const avatarRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
form.websiteLogo = '';
}
const avatarSuccess = (e: any) => {
form.websiteLogo = e.data.downloadUrl
}
const filesRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
form.files = JSON.stringify('');
}
const filesSuccess = (e: any) => {
srcList.value.push(e.data.downloadUrl)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!
dialogVisible.value = true
}
// 图片上传
const onUploadImg = async (files: any, callback: any) => {
const res = await Promise.all(
files.map((file: any) => {
return new Promise((rev, rej) => {
const form = new FormData();
form.append('file', file);
uploadOss(file).then((res: any) => rev(res))
.catch((error: any) => rej(error));
});
})
);
console.log(res, '上次')
callback(res.map((item) => item.url));
};
const onSubmit = () => {
form.files = undefined;
if (srcList.value.length > 0) {
form.files = JSON.stringify(srcList.value)
}
if(form.websiteType){
form.websiteType = JSON.stringify(form.websiteType)
}
updateCmsWebsiteAll(form).then(() => {
ElMessage.success('修改成功');
});
}
watch(
() => route.params.id,
(id) => {
navId.value = getNavIdByParamsId(id);
reload();
},
{immediate: true}
);
</script>
<style lang="scss">
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
</style>