feat: add article and production modules
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="article-category-page art-full-height">
|
||||
<BasicCrud />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { useCrud } from '@/components/crud'
|
||||
import { crudSchema } from './schemas'
|
||||
|
||||
defineOptions({ name: 'ArticleCategoryList' })
|
||||
|
||||
const [BasicCrud] = useCrud({
|
||||
...crudSchema(),
|
||||
toolbarActions: [],
|
||||
dropDownToolbarActions: [],
|
||||
tableActions: [],
|
||||
dropDownActions: [],
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.article-category-page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
+189
@@ -0,0 +1,189 @@
|
||||
import { CrudSchema } from '@/components/crud'
|
||||
import { DictEnum } from '@/enums'
|
||||
import { $t } from '@/locales'
|
||||
import { ArticleCategoryService } from '../../../../api/index'
|
||||
|
||||
export const crudSchema = (): CrudSchema => {
|
||||
return {
|
||||
api: ArticleCategoryService.list,
|
||||
dialogTitle: $t('article.modules.category.title'),
|
||||
crudApi: {
|
||||
add: ArticleCategoryService.create,
|
||||
edit: ArticleCategoryService.update,
|
||||
remove: ArticleCategoryService.delete,
|
||||
view: ArticleCategoryService.get,
|
||||
},
|
||||
useCrud: true,
|
||||
hasAdd: true,
|
||||
hasEdit: true,
|
||||
hasRemove: true,
|
||||
hasView: true,
|
||||
addAuth: 'article:category:create',
|
||||
editAuth: 'article:category:update',
|
||||
removeAuth: 'article:category:delete',
|
||||
viewAuth: 'article:category:read',
|
||||
rowKey: 'id',
|
||||
searchFormSchema: {
|
||||
labelWidth: '100px',
|
||||
schema: [
|
||||
{
|
||||
prop: 'LIKE_name',
|
||||
label: $t('article.modules.category.search.keywords'),
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: $t('article.modules.category.search.keywords_placeholder'),
|
||||
},
|
||||
colSpan: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
},
|
||||
{
|
||||
type: 'index',
|
||||
label: $t('article.common.columns.index'),
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: $t('article.modules.category.columns.name'),
|
||||
minWidth: 220,
|
||||
},
|
||||
{
|
||||
prop: 'slug',
|
||||
label: $t('article.modules.category.columns.slug'),
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
prop: 'article_count',
|
||||
label: $t('article.modules.category.columns.article_count'),
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: $t('article.modules.category.columns.enabled'),
|
||||
width: 120,
|
||||
component: 'ApiDict',
|
||||
componentProps: {
|
||||
code: DictEnum.SYS_ENABLED_STATUS,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'sort',
|
||||
label: $t('article.modules.category.columns.sort'),
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
prop: 'updated_date',
|
||||
label: $t('article.modules.category.columns.updated_at'),
|
||||
minWidth: 180,
|
||||
},
|
||||
],
|
||||
dialogProps: {
|
||||
width: '600px',
|
||||
},
|
||||
formSchema: {
|
||||
showDefaultActions: false,
|
||||
labelWidth: '100px',
|
||||
schema: [
|
||||
{
|
||||
component: 'Input',
|
||||
show: false,
|
||||
ifDetail: true,
|
||||
colSpan: 24,
|
||||
prop: 'id',
|
||||
label: 'ID',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'name',
|
||||
label: $t('article.modules.category.columns.name'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.category.form.name_placeholder'),
|
||||
maxlength: 100,
|
||||
},
|
||||
rules: [{ required: true, message: $t('article.modules.category.form.name_placeholder') }],
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'slug',
|
||||
label: $t('article.modules.category.columns.slug'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.category.form.slug_placeholder'),
|
||||
maxlength: 100,
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
prop: 'parent_id',
|
||||
label: $t('article.modules.category.form.parent_id'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
api: '/article/category',
|
||||
requestMethod: 'get',
|
||||
params: {
|
||||
format: 'tree',
|
||||
},
|
||||
afterFetch: async (res: any) => {
|
||||
if (!Array.isArray(res)) {
|
||||
return res
|
||||
}
|
||||
return [
|
||||
{
|
||||
id: 0,
|
||||
name: $t('article.modules.category.form.parent_top'),
|
||||
},
|
||||
...res,
|
||||
]
|
||||
},
|
||||
clearable: true,
|
||||
checkStrictly: true,
|
||||
class: 'w-full',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
prop: 'sort',
|
||||
label: $t('article.modules.category.columns.sort'),
|
||||
defaultValue: 100,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'ApiDict',
|
||||
prop: 'enabled',
|
||||
label: $t('article.modules.category.columns.enabled'),
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
code: DictEnum.SYS_ENABLED_STATUS,
|
||||
isBtn: true,
|
||||
renderType: 'RadioGroup',
|
||||
},
|
||||
colSpan: 24,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'description',
|
||||
label: $t('article.modules.category.form.description'),
|
||||
componentProps: {
|
||||
type: 'textarea',
|
||||
rows: 4,
|
||||
placeholder: $t('article.modules.category.form.description_placeholder'),
|
||||
},
|
||||
colSpan: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="article-content-page art-full-height">
|
||||
<BasicCrud />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { useCrud } from '@/components/crud'
|
||||
import { crudSchema } from './schemas'
|
||||
|
||||
defineOptions({ name: 'ArticleContentList' })
|
||||
|
||||
const [BasicCrud] = useCrud({
|
||||
...crudSchema(),
|
||||
toolbarActions: [],
|
||||
dropDownToolbarActions: [],
|
||||
tableActions: [],
|
||||
dropDownActions: [],
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.article-content-page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
+544
@@ -0,0 +1,544 @@
|
||||
import { CrudSchema } from '@/components/crud'
|
||||
import { DictEnum } from '@/enums'
|
||||
import { $t } from '@/locales'
|
||||
import { ArticleContentService } from '../../../../api/index'
|
||||
import { h } from 'vue'
|
||||
|
||||
const contentTypeOptions = [
|
||||
{ label: '文章', value: 'article' },
|
||||
{ label: '图文', value: 'news' },
|
||||
{ label: '公告', value: 'notice' },
|
||||
]
|
||||
|
||||
const channelOptions = [
|
||||
{ label: '官网内容', value: 'official' },
|
||||
{ label: '专题内容', value: 'topic' },
|
||||
{ label: '活动内容', value: 'activity' },
|
||||
]
|
||||
|
||||
const visibilityOptions = [
|
||||
{ label: '公开', value: 1 },
|
||||
{ label: '登录可见', value: 2 },
|
||||
{ label: '私密', value: 3 },
|
||||
]
|
||||
|
||||
const sourceOptions = [
|
||||
{ label: '原创', value: 'original' },
|
||||
{ label: '转载', value: 'repost' },
|
||||
{ label: '投稿', value: 'contribution' },
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '草稿', value: 0 },
|
||||
{ label: '发布', value: 1 },
|
||||
{ label: '下线', value: 2 },
|
||||
]
|
||||
|
||||
const getOptionLabel = (options: Array<{ label: string; value: string | number }>, value: string | number) => {
|
||||
return options.find((item) => item.value === value)?.label || '-'
|
||||
}
|
||||
|
||||
const getStatusTagClass = (status: number) => {
|
||||
if (status === 1) {
|
||||
return 'inline-flex rounded-full bg-[#ecfdf5] px-2 py-[2px] text-xs text-[#10b981]'
|
||||
}
|
||||
if (status === 2) {
|
||||
return 'inline-flex rounded-full bg-[#fef2f2] px-2 py-[2px] text-xs text-[#ef4444]'
|
||||
}
|
||||
return 'inline-flex rounded-full bg-[#f4f4f5] px-2 py-[2px] text-xs text-[#909399]'
|
||||
}
|
||||
|
||||
export const crudSchema = (): CrudSchema => {
|
||||
return {
|
||||
api: ArticleContentService.list,
|
||||
dialogTitle: $t('article.modules.content.title'),
|
||||
exportFileName: '内容中心',
|
||||
exportFields: [
|
||||
{ field: 'title', title: '标题' },
|
||||
{ field: 'content_type', title: '内容类型' },
|
||||
{ field: 'category_name', title: '分类' },
|
||||
{ field: 'tag_names', title: '标签' },
|
||||
{ field: 'author', title: '作者' },
|
||||
{ field: 'channel', title: '频道' },
|
||||
{ field: 'visibility', title: '可见范围' },
|
||||
{ field: 'source', title: '来源' },
|
||||
{ field: 'status', title: '状态' },
|
||||
{ field: 'is_top', title: '置顶' },
|
||||
{ field: 'is_recommend', title: '推荐' },
|
||||
{ field: 'view_count', title: '浏览数' },
|
||||
{ field: 'like_count', title: '点赞数' },
|
||||
{ field: 'comment_count', title: '评论数' },
|
||||
{ field: 'favorite_count', title: '收藏数' },
|
||||
{ field: 'published_at', title: '发布时间' },
|
||||
{ field: 'updated_date', title: '更新时间' },
|
||||
{ field: 'summary', title: '摘要' }
|
||||
],
|
||||
crudApi: {
|
||||
add: ArticleContentService.create,
|
||||
edit: ArticleContentService.update,
|
||||
remove: ArticleContentService.remove,
|
||||
view: ArticleContentService.get,
|
||||
},
|
||||
useCrud: true,
|
||||
hasAdd: true,
|
||||
hasEdit: true,
|
||||
hasRemove: true,
|
||||
hasView: true,
|
||||
addAuth: 'article:create',
|
||||
editAuth: 'article:update',
|
||||
removeAuth: 'article:delete',
|
||||
viewAuth: 'article:read',
|
||||
rowKey: 'id',
|
||||
searchFormSchema: {
|
||||
labelWidth: '100px',
|
||||
schema: [
|
||||
{
|
||||
prop: 'LIKE_title',
|
||||
label: $t('article.modules.content.search.keywords'),
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: $t('article.modules.content.search.keywords_placeholder'),
|
||||
},
|
||||
colSpan: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
type: 'index',
|
||||
label: $t('article.common.columns.index'),
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
prop: 'content_info',
|
||||
label: $t('article.modules.content.columns.content_info'),
|
||||
minWidth: 380,
|
||||
formatter: (row: any) => {
|
||||
const metaItems = [
|
||||
getOptionLabel(contentTypeOptions, row.content_type),
|
||||
row.author || '管理员',
|
||||
row.category_name,
|
||||
row.tag_names,
|
||||
].filter(Boolean)
|
||||
|
||||
const badgeNodes = [
|
||||
Number(row.is_top) === 1
|
||||
? h('span', { class: 'inline-flex items-center rounded bg-[#fff7e6] px-1.5 py-[1px] text-[10px] text-[#fa8c16]' }, '置顶')
|
||||
: null,
|
||||
Number(row.is_recommend) === 1
|
||||
? h('span', { class: 'inline-flex items-center rounded bg-[#ecfdf5] px-1.5 py-[1px] text-[10px] text-[#10b981]' }, '推荐')
|
||||
: null,
|
||||
].filter(Boolean)
|
||||
|
||||
return h('div', { class: 'flex gap-3 py-2' }, [
|
||||
row.cover
|
||||
? h('img', {
|
||||
src: row.cover,
|
||||
class: 'mt-1 h-14 w-20 flex-none rounded bg-[#f5f7fa] object-cover border border-[#f0f0f0]'
|
||||
})
|
||||
: h(
|
||||
'div',
|
||||
{
|
||||
class: 'mt-1 h-14 w-20 flex-none rounded border border-[#f0f0f0] bg-[#fafafa] text-[10px] text-[#c0c4cc] flex items-center justify-center'
|
||||
},
|
||||
'无上传封面'
|
||||
),
|
||||
h('div', { class: 'min-w-0 flex-1 leading-6' }, [
|
||||
h('div', { class: 'flex items-center gap-2 text-sm font-medium text-[#1f2937]' }, [
|
||||
h('span', { class: 'line-clamp-1' }, row.title || '-'),
|
||||
...badgeNodes
|
||||
]),
|
||||
h(
|
||||
'div',
|
||||
{ class: 'mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-[#909399]' },
|
||||
metaItems.length > 0 ? metaItems.map((item) => h('span', item)) : [h('span', '-')]
|
||||
),
|
||||
h('div', { class: 'mt-1 line-clamp-2 text-xs text-[#606266]' }, row.summary || row.slug || '-')
|
||||
])
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'status_info',
|
||||
label: $t('article.modules.content.columns.status'),
|
||||
width: 140,
|
||||
align: 'center',
|
||||
formatter: (row: any) => {
|
||||
const statusText = getOptionLabel(statusOptions, row.status)
|
||||
const visibilityText = getOptionLabel(visibilityOptions, row.visibility)
|
||||
const sourceText = getOptionLabel(sourceOptions, row.source)
|
||||
return h('div', { class: 'flex flex-col items-center py-2 text-sm leading-6' }, [
|
||||
h('div', [
|
||||
h('span', { class: getStatusTagClass(Number(row.status)) }, statusText)
|
||||
]),
|
||||
h('div', { class: 'mt-1 text-xs text-[#606266]' }, visibilityText),
|
||||
h('div', { class: 'mt-1 text-xs text-[#909399]' }, sourceText)
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'business_data',
|
||||
label: $t('article.modules.content.columns.business_data'),
|
||||
minWidth: 250,
|
||||
formatter: (row: any) => {
|
||||
const metricItems = [
|
||||
{ label: '浏览', value: row.view_count ?? 0 },
|
||||
{ label: '点赞', value: row.like_count ?? 0 },
|
||||
{ label: '评论', value: row.comment_count ?? 0 },
|
||||
{ label: '收藏', value: row.favorite_count ?? 0 },
|
||||
]
|
||||
|
||||
return h('div', { class: 'grid grid-cols-2 gap-2 py-2 text-xs text-[#606266]' }, [
|
||||
...metricItems.map((item) =>
|
||||
h('div', { class: 'flex items-center justify-between rounded border border-[#e5e7eb] bg-[#eef2f6] px-3 py-1.5 transition-colors hover:bg-[#e5e7eb]' }, [
|
||||
h('span', { class: 'text-[#909399]' }, item.label),
|
||||
h('span', item.value)
|
||||
])
|
||||
)
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'time_info',
|
||||
label: $t('article.modules.content.columns.time_info'),
|
||||
minWidth: 190,
|
||||
formatter: (row: any) => {
|
||||
return h('div', { class: 'py-2 text-xs leading-6 text-[#606266]' }, [
|
||||
h('div', [
|
||||
h('span', { class: 'text-[#909399]' }, '更新 '),
|
||||
h('span', row.updated_date || '-')
|
||||
]),
|
||||
h('div', { class: 'mt-1' }, [
|
||||
h('span', { class: 'text-[#909399]' }, '发布 '),
|
||||
h('span', row.created_date || '-')
|
||||
])
|
||||
])
|
||||
}
|
||||
},
|
||||
],
|
||||
tableActionColumn: {
|
||||
width: 170,
|
||||
},
|
||||
dialogProps: {
|
||||
width: '70%',
|
||||
},
|
||||
formSchema: {
|
||||
showDefaultActions: false,
|
||||
labelWidth: '100px',
|
||||
schema: [
|
||||
{
|
||||
component: 'Input',
|
||||
show: false,
|
||||
ifDetail: true,
|
||||
colSpan: 24,
|
||||
prop: 'id',
|
||||
label: 'ID',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'title',
|
||||
label: $t('article.modules.content.columns.title'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.content.form.title_placeholder'),
|
||||
maxlength: 200,
|
||||
},
|
||||
rules: [{ required: true, message: $t('article.modules.content.form.title_placeholder') }],
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'slug',
|
||||
label: $t('article.modules.content.form.slug'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.content.form.slug_placeholder'),
|
||||
maxlength: 200,
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
prop: 'content_type',
|
||||
label: $t('article.modules.content.form.content_type'),
|
||||
defaultValue: 'article',
|
||||
componentProps: {
|
||||
options: contentTypeOptions,
|
||||
class: 'w-full',
|
||||
},
|
||||
rules: [{ required: true, message: $t('article.modules.content.form.content_type') }],
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
prop: 'category_id',
|
||||
label: $t('article.modules.content.form.category_id'),
|
||||
componentProps: {
|
||||
api: '/article/category',
|
||||
requestMethod: 'get',
|
||||
params: {
|
||||
format: 'tree',
|
||||
},
|
||||
teleported: true,
|
||||
clearable: true,
|
||||
checkStrictly: true,
|
||||
class: 'w-full',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
placeholder: $t('article.modules.content.form.category_id_placeholder'),
|
||||
},
|
||||
rules: [{ required: true, message: $t('article.modules.content.form.category_id') }],
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
prop: 'channel',
|
||||
label: $t('article.modules.content.form.channel'),
|
||||
defaultValue: 'official',
|
||||
componentProps: {
|
||||
options: channelOptions,
|
||||
class: 'w-full',
|
||||
},
|
||||
rules: [{ required: true, message: $t('article.modules.content.form.channel') }],
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'author',
|
||||
label: $t('article.modules.content.form.author'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.content.form.author_placeholder'),
|
||||
maxlength: 100,
|
||||
},
|
||||
rules: [{ required: true, message: $t('article.modules.content.form.author_placeholder') }],
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
prop: 'visibility',
|
||||
label: $t('article.modules.content.form.visibility'),
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
options: visibilityOptions,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
prop: 'status',
|
||||
label: $t('article.modules.content.form.status'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
options: statusOptions,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
prop: 'source',
|
||||
label: $t('article.modules.content.form.source'),
|
||||
defaultValue: 'original',
|
||||
componentProps: {
|
||||
options: sourceOptions,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Avatar',
|
||||
prop: 'cover',
|
||||
label: $t('article.modules.content.form.cover'),
|
||||
componentProps: {
|
||||
shape: 'square',
|
||||
},
|
||||
colSpan: 24,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'summary',
|
||||
label: $t('article.modules.content.form.summary'),
|
||||
componentProps: {
|
||||
type: 'textarea',
|
||||
rows: 4,
|
||||
maxlength: 500,
|
||||
placeholder: $t('article.modules.content.form.summary_placeholder'),
|
||||
},
|
||||
colSpan: 24,
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
prop: 'tag_ids',
|
||||
label: $t('article.modules.content.form.tag_ids'),
|
||||
componentProps: {
|
||||
api: '/article/tag',
|
||||
requestMethod: 'get',
|
||||
params: {
|
||||
format: 'select',
|
||||
},
|
||||
labelField: 'label',
|
||||
valueField: 'value',
|
||||
multiple: true,
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
class: 'w-full',
|
||||
placeholder: $t('article.modules.content.form.tag_ids_placeholder'),
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'seo_keywords',
|
||||
label: $t('article.modules.content.form.seo_keywords'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.content.form.seo_keywords_placeholder'),
|
||||
maxlength: 255,
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'seo_title',
|
||||
label: $t('article.modules.content.form.seo_title'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.content.form.seo_title_placeholder'),
|
||||
maxlength: 200,
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'seo_description',
|
||||
label: $t('article.modules.content.form.seo_description'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.content.form.seo_description_placeholder'),
|
||||
maxlength: 500,
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
prop: 'sort',
|
||||
label: $t('article.modules.content.form.sort'),
|
||||
defaultValue: 100,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 8,
|
||||
},
|
||||
{
|
||||
component: 'DatePicker',
|
||||
prop: 'published_at',
|
||||
label: $t('article.modules.content.form.published_at'),
|
||||
componentProps: {
|
||||
type: 'datetime',
|
||||
valueFormat: 'X',
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 8,
|
||||
},
|
||||
{
|
||||
component: 'DatePicker',
|
||||
prop: 'offline_at',
|
||||
label: $t('article.modules.content.form.offline_at'),
|
||||
componentProps: {
|
||||
type: 'datetime',
|
||||
valueFormat: 'X',
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 8,
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
prop: 'view_count',
|
||||
label: $t('article.modules.content.form.view_count'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 6,
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
prop: 'like_count',
|
||||
label: $t('article.modules.content.form.like_count'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 6,
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
prop: 'comment_count',
|
||||
label: $t('article.modules.content.form.comment_count'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 6,
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
prop: 'favorite_count',
|
||||
label: $t('article.modules.content.form.favorite_count'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 6,
|
||||
},
|
||||
{
|
||||
component: 'ApiDict',
|
||||
prop: 'is_top',
|
||||
label: $t('article.modules.content.form.is_top'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
code: DictEnum.SYS_YES_NO,
|
||||
isBtn: true,
|
||||
renderType: 'RadioGroup',
|
||||
},
|
||||
colSpan: 8,
|
||||
},
|
||||
{
|
||||
component: 'ApiDict',
|
||||
prop: 'is_recommend',
|
||||
label: $t('article.modules.content.form.is_recommend'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
code: DictEnum.SYS_YES_NO,
|
||||
isBtn: true,
|
||||
renderType: 'RadioGroup',
|
||||
},
|
||||
colSpan: 8,
|
||||
},
|
||||
{
|
||||
component: 'ApiDict',
|
||||
prop: 'allow_comment',
|
||||
label: $t('article.modules.content.form.allow_comment'),
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
code: DictEnum.SYS_YES_NO,
|
||||
isBtn: true,
|
||||
renderType: 'RadioGroup',
|
||||
},
|
||||
colSpan: 8,
|
||||
},
|
||||
{
|
||||
component: 'Editor',
|
||||
prop: 'content',
|
||||
label: $t('article.modules.content.form.content'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.content.form.content_placeholder'),
|
||||
},
|
||||
colSpan: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="article-container">
|
||||
<div class="plugin-header">
|
||||
<h1>{{ $t('article.title') }}</h1>
|
||||
<p>{{ $t('article.description') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="plugin-content">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('article.card_title') }}</span>
|
||||
<el-button type="primary" @click="fetchTestData">
|
||||
{{ $t('article.refresh_btn') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-loading="loading" class="card-body">
|
||||
<div v-if="error" class="error-message">
|
||||
<el-alert
|
||||
:title="error"
|
||||
type="error"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="testData" class="plugin-data">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="测试消息">
|
||||
{{ testData.msg }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="数据">
|
||||
{{ testData.data }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import pluginApi from '../../../api/index';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ArticleView',
|
||||
setup() {
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const testData = ref<{ msg?: string; data?: unknown } | null>(null);
|
||||
|
||||
const fetchTestData = async () => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const response = await pluginApi.test();
|
||||
testData.value = response;
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : '网络错误';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始加载数据
|
||||
fetchTestData();
|
||||
|
||||
return {
|
||||
loading,
|
||||
error,
|
||||
testData,
|
||||
fetchTestData
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.article-container {
|
||||
padding: 20px;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.plugin-header {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.plugin-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.plugin-header p {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.plugin-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.plugin-data {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.plugin-data pre {
|
||||
background-color: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="article-recycle-page art-full-height">
|
||||
<BasicCrud />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { useCrud } from '@/components/crud'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { $t } from '@/locales'
|
||||
import pluginApi from '../../../api/index'
|
||||
import { crudSchema } from './schemas'
|
||||
|
||||
defineOptions({ name: 'ArticleRecycleList' })
|
||||
|
||||
const [BasicCrud, crudApi] = useCrud({
|
||||
...crudSchema(),
|
||||
toolbarActions: [],
|
||||
dropDownToolbarActions: [],
|
||||
tableActions: [
|
||||
{
|
||||
label: '恢复',
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: 'ant-design:swap-outlined',
|
||||
auth: 'article:recycle:restore',
|
||||
onClick: async (e: Event, row: any) => {
|
||||
await pluginApi.recycleRestore(row.id)
|
||||
ElMessage.success($t('common.operation_success'))
|
||||
crudApi.reload()
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '彻底删除',
|
||||
type: 'danger',
|
||||
link: true,
|
||||
icon: 'ant-design:delete-outlined',
|
||||
auth: 'article:recycle:delete',
|
||||
onClick: async (e: Event, row: any) => {
|
||||
await ElMessageBox.confirm('确定彻底删除该内容吗？删除后不可恢复。', '二次确认', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消'
|
||||
})
|
||||
await pluginApi.recycleDelete(row.id)
|
||||
ElMessage.success($t('common.operation_success'))
|
||||
crudApi.reload()
|
||||
}
|
||||
}
|
||||
],
|
||||
dropDownActions: [],
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.article-recycle-page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
import { CrudSchema } from '@/components/crud'
|
||||
import { $t } from '@/locales'
|
||||
import pluginApi from '../../../../api/index'
|
||||
|
||||
export const crudSchema = (): CrudSchema => {
|
||||
return {
|
||||
api: async (params: any) => {
|
||||
const response = await pluginApi.recycleList(params)
|
||||
const rows = Array.isArray(response) ? response : []
|
||||
return {
|
||||
recordCount: rows.length,
|
||||
totalPage: 1,
|
||||
rows,
|
||||
}
|
||||
},
|
||||
useCrud: false,
|
||||
searchFormSchema: {
|
||||
labelWidth: '100px',
|
||||
schema: [
|
||||
{
|
||||
prop: 'LIKE_title',
|
||||
label: $t('article.modules.recycle.search.keywords'),
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: $t('article.modules.recycle.search.keywords_placeholder'),
|
||||
},
|
||||
colSpan: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
type: 'index',
|
||||
label: $t('article.common.columns.index'),
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
prop: 'title',
|
||||
label: $t('article.modules.recycle.columns.title'),
|
||||
minWidth: 220,
|
||||
},
|
||||
{
|
||||
prop: 'category',
|
||||
label: $t('article.modules.recycle.columns.category'),
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
prop: 'deleted_by',
|
||||
label: $t('article.modules.recycle.columns.deleted_by'),
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
prop: 'deleted_at',
|
||||
label: $t('article.modules.recycle.columns.deleted_at'),
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
prop: 'expire_at',
|
||||
label: $t('article.modules.recycle.columns.expire_at'),
|
||||
minWidth: 180,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="article-tag-page art-full-height">
|
||||
<BasicCrud />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { useCrud } from '@/components/crud'
|
||||
import { crudSchema } from './schemas'
|
||||
|
||||
defineOptions({ name: 'ArticleTagList' })
|
||||
|
||||
const [BasicCrud] = useCrud({
|
||||
...crudSchema(),
|
||||
toolbarActions: [],
|
||||
dropDownToolbarActions: [],
|
||||
tableActions: [],
|
||||
dropDownActions: [],
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.article-tag-page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
import { CrudSchema } from '@/components/crud'
|
||||
import { DictEnum } from '@/enums'
|
||||
import { $t } from '@/locales'
|
||||
import { ArticleTagService } from '../../../../api/index'
|
||||
|
||||
export const crudSchema = (): CrudSchema => {
|
||||
return {
|
||||
api: ArticleTagService.list,
|
||||
dialogTitle: $t('article.modules.tag.title'),
|
||||
crudApi: {
|
||||
add: ArticleTagService.create,
|
||||
edit: ArticleTagService.update,
|
||||
remove: ArticleTagService.delete,
|
||||
view: ArticleTagService.get,
|
||||
},
|
||||
useCrud: true,
|
||||
hasAdd: true,
|
||||
hasEdit: true,
|
||||
hasRemove: true,
|
||||
hasView: true,
|
||||
addAuth: 'article:tag:create',
|
||||
editAuth: 'article:tag:update',
|
||||
removeAuth: 'article:tag:delete',
|
||||
viewAuth: 'article:tag:read',
|
||||
rowKey: 'id',
|
||||
searchFormSchema: {
|
||||
labelWidth: '100px',
|
||||
schema: [
|
||||
{
|
||||
prop: 'LIKE_name',
|
||||
label: $t('article.modules.tag.search.keywords'),
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: $t('article.modules.tag.search.keywords_placeholder'),
|
||||
},
|
||||
colSpan: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
},
|
||||
{
|
||||
type: 'index',
|
||||
label: $t('article.common.columns.index'),
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: $t('article.modules.tag.columns.name'),
|
||||
minWidth: 220,
|
||||
},
|
||||
{
|
||||
prop: 'slug',
|
||||
label: $t('article.modules.tag.columns.slug'),
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
prop: 'article_count',
|
||||
label: $t('article.modules.tag.columns.article_count'),
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: $t('article.modules.tag.columns.enabled'),
|
||||
width: 120,
|
||||
component: 'ApiDict',
|
||||
componentProps: {
|
||||
code: DictEnum.SYS_ENABLED_STATUS,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'heat',
|
||||
label: $t('article.modules.tag.columns.heat'),
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
prop: 'updated_date',
|
||||
label: $t('article.modules.tag.columns.updated_at'),
|
||||
minWidth: 180,
|
||||
},
|
||||
],
|
||||
dialogProps: {
|
||||
width: '600px',
|
||||
},
|
||||
formSchema: {
|
||||
showDefaultActions: false,
|
||||
labelWidth: '100px',
|
||||
schema: [
|
||||
{
|
||||
component: 'Input',
|
||||
show: false,
|
||||
ifDetail: true,
|
||||
colSpan: 24,
|
||||
prop: 'id',
|
||||
label: 'ID',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'name',
|
||||
label: $t('article.modules.tag.columns.name'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.tag.form.name_placeholder'),
|
||||
maxlength: 100,
|
||||
},
|
||||
rules: [{ required: true, message: $t('article.modules.tag.form.name_placeholder') }],
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'slug',
|
||||
label: $t('article.modules.tag.columns.slug'),
|
||||
componentProps: {
|
||||
placeholder: $t('article.modules.tag.form.slug_placeholder'),
|
||||
maxlength: 100,
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
prop: 'sort',
|
||||
label: $t('article.modules.tag.columns.heat'),
|
||||
defaultValue: 100,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
prop: 'heat',
|
||||
label: $t('article.modules.tag.columns.heat'),
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
class: 'w-full',
|
||||
},
|
||||
colSpan: 12,
|
||||
},
|
||||
{
|
||||
component: 'ApiDict',
|
||||
prop: 'enabled',
|
||||
label: $t('article.modules.tag.columns.enabled'),
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
code: DictEnum.SYS_ENABLED_STATUS,
|
||||
isBtn: true,
|
||||
renderType: 'RadioGroup',
|
||||
},
|
||||
colSpan: 24,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
prop: 'description',
|
||||
label: $t('article.modules.tag.form.description'),
|
||||
componentProps: {
|
||||
type: 'textarea',
|
||||
rows: 4,
|
||||
placeholder: $t('article.modules.tag.form.description_placeholder'),
|
||||
},
|
||||
colSpan: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="article-container">
|
||||
<div class="plugin-header">
|
||||
<h1>{{ $t('article.title') }}</h1>
|
||||
<p>{{ $t('article.description') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="plugin-content">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('article.card_title') }}</span>
|
||||
<el-button type="primary" @click="fetchTestData">
|
||||
{{ $t('article.refresh_btn') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-loading="loading" class="card-body">
|
||||
<div v-if="error" class="error-message">
|
||||
<el-alert
|
||||
:title="error"
|
||||
type="error"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="testData" class="plugin-data">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="测试消息">
|
||||
{{ testData.msg }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="数据">
|
||||
{{ testData.data }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import pluginApi from '../../api/index';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ArticleView',
|
||||
setup() {
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const testData = ref<{ msg?: string; data?: unknown } | null>(null);
|
||||
|
||||
const fetchTestData = async () => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const response = await pluginApi.test();
|
||||
testData.value = response;
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : '网络错误';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始加载数据
|
||||
fetchTestData();
|
||||
|
||||
return {
|
||||
loading,
|
||||
error,
|
||||
testData,
|
||||
fetchTestData
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.article-container {
|
||||
padding: 20px;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.plugin-header {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.plugin-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.plugin-header p {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.plugin-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.plugin-data {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.plugin-data pre {
|
||||
background-color: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user