Browse Source

add news

master
sunfree 9 months ago
parent
commit
99dc94dc05
  1. 20
      src/components/blogs/HomePage.vue
  2. 31
      src/stores/index.ts
  3. 63
      src/views/admin/classticmanage/ClassticManageView.vue

20
src/components/blogs/HomePage.vue

@ -44,18 +44,18 @@
<template #expandIcon="{ isActive }"> <template #expandIcon="{ isActive }">
<caret-right-outlined :rotate="isActive ? 90 : 0" /> <caret-right-outlined :rotate="isActive ? 90 : 0" />
</template> </template>
<a-collapse-panel v-for="panel in panelList.panels" :key=panel.id :header=panel.header
<a-collapse-panel v-for="classtic in classticContent.classticlist" :key=classtic.id :header=classtic.header
:style="customStyle"> :style="customStyle">
<p>{{ panel.text }}</p>
<p>{{ classtic.text }}</p>
</a-collapse-panel> </a-collapse-panel>
</a-collapse> </a-collapse>
</div> </div>
</a-card> </a-card>
<a-card hoverable title="常用链接"> <a-card hoverable title="常用链接">
<div class="button-group"> <div class="button-group">
<a-button type="dashed" v-for="linkbutton in comLinkList.linkbuttons" :key="linkbutton.id"
@click="comLinkList.comLinkClick(linkbutton.linkurl)">{{
linkbutton.linktext
<a-button type="dashed" v-for="comlink in comLinkContent.comlinklist" :key="comlink.id"
@click="comLinkContent.comLinkClick(comlink.linkurl)">{{
comlink.linktext
}}</a-button> }}</a-button>
</div> </div>
</a-card> </a-card>
@ -117,12 +117,12 @@ import APlayer from 'APlayer';
import { createEcharts } from "@/hooks/intex" import { createEcharts } from "@/hooks/intex"
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import iconComponents from "@/assets/index"; import iconComponents from "@/assets/index";
import { panelContentStore,comLinkContentStore } from '@/stores';
import { classticContentStore,comLinkContentStore } from '@/stores';
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const panelList=panelContentStore()
const comLinkList=comLinkContentStore()
const classticContent=classticContentStore()
const comLinkContent=comLinkContentStore()
/** /**
* 导航菜单 * 导航菜单
@ -400,8 +400,8 @@ const random = ref();
onMounted(() => { onMounted(() => {
scrollbar.value = document.querySelector('.simplebar-content-wrapper'); scrollbar.value = document.querySelector('.simplebar-content-wrapper');
panelList.panelData()
comLinkList.comLinkData()
classticContent.classticList()
comLinkContent.comLinkList()
nextTick(() => { nextTick(() => {
const authorElement = document.querySelector('.author'); const authorElement = document.querySelector('.author');
if (authorElement) { if (authorElement) {

31
src/stores/index.ts

@ -20,21 +20,23 @@ export const useAuthStore = defineStore("auth", () => {
}) })
// 语录列表接口 // 语录列表接口
export const panelContentStore = defineStore("panel", () => {
interface panelList {
export const classticContentStore = defineStore("classtic", () => {
interface classticInterface {
id: number, id: number,
header: string, header: string,
text: string
text: string,
descr: string
} }
const panels = ref<panelList[]>([])
const panelData = async () => {
const classticlist = ref<classticInterface[]>([])
const classticList = async () => {
try { try {
const response = await get("/classtics/list"); const response = await get("/classtics/list");
if (response) { if (response) {
panels.value = response.data.data.map((item: any) => ({
classticlist.value = response.data.data.map((item: any) => ({
id: item.id, id: item.id,
header: item.header, header: item.header,
text: item.text, text: item.text,
descr: item.descr
})); }));
} else { } else {
console.error("Response data structure is not as expected:"); console.error("Response data structure is not as expected:");
@ -43,22 +45,22 @@ export const panelContentStore = defineStore("panel", () => {
console.error("Failed to fetch data", error); console.error("Failed to fetch data", error);
} }
} }
return { panels, panelData }
return { classticlist, classticList }
}) })
// 链接接口 // 链接接口
export const comLinkContentStore = defineStore("comlink", () => { export const comLinkContentStore = defineStore("comlink", () => {
interface comlinkList {
interface comlinkInterface {
id: number, id: number,
linktext: string, linktext: string,
linkurl: string linkurl: string
} }
const linkbuttons = ref<comlinkList[]>([])
const comLinkData = async () => {
const comlinklist = ref<comlinkInterface[]>([])
const comLinkList = async () => {
try { try {
const response = await get("/comlink/list"); const response = await get("/comlink/list");
if (response) { if (response) {
linkbuttons.value = response.data.data.map((items: any) => ({
comlinklist.value = response.data.data.map((items: any) => ({
id: items.id, id: items.id,
linktext: items.linktext, linktext: items.linktext,
linkurl: items.linkurl linkurl: items.linkurl
@ -78,13 +80,12 @@ export const comLinkContentStore = defineStore("comlink", () => {
router.push(url); // 否则使用 Vue Router 的 push 方法导航 router.push(url); // 否则使用 Vue Router 的 push 方法导航
} }
} }
return {linkbuttons,comLinkData,comLinkClick}
return { comlinklist, comLinkList, comLinkClick }
}) })
// 博客列表接口 // 博客列表接口
export const blogContentStore = defineStore("blog", () => { export const blogContentStore = defineStore("blog", () => {
async function blogList() {
const blogList = async () => {
try { try {
const response = await get("/blogs/list"); const response = await get("/blogs/list");
if (response) { if (response) {
@ -121,8 +122,6 @@ export const blogSearchStore = defineStore('blogsearch', () => {
end_date: '' end_date: ''
}); });
const onChange = (date: string, dateString: string[]) => { const onChange = (date: string, dateString: string[]) => {
if (date && dateString.length === 2) { if (date && dateString.length === 2) {
searchValue.start_date = dateString[0]; searchValue.start_date = dateString[0];

63
src/views/admin/classticmanage/ClassticManageView.vue

@ -5,8 +5,13 @@
<a-input v-model:value="searchList.classtictitle" placeholder="语录标题" /> <a-input v-model:value="searchList.classtictitle" placeholder="语录标题" />
</a-space> </a-space>
<a-space style="margin-left: 16px;"> <a-space style="margin-left: 16px;">
<a-button >查询</a-button>
<a-button type="primary" ghost >新增</a-button>
<a-button>查询</a-button>
<a-button type="primary" ghost @click="modal('add')">新增</a-button>
<a-modal v-model:open="addModal.addOpen" ok-text="确认" cancel-text="取消" :title="addModal.addTitle" @ok="handleOk">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</a-space> </a-space>
</div> </div>
<div class="table"> <div class="table">
@ -16,11 +21,12 @@
<a-space> <a-space>
<div> <div>
<a-button size="small" danger @click="showModal(record.key, record.id)">删除</a-button> <a-button size="small" danger @click="showModal(record.key, record.id)">删除</a-button>
<a-modal v-model:open="open" title="提示" ok-text="确认" cancel-text="取消" @cancel="unDelete">
<a-modal v-model:open="deleteOpen" title="提示" ok-text="确认" cancel-text="取消"
@cancel="unDelete">
<p>确认删除吗</p> <p>确认删除吗</p>
</a-modal> </a-modal>
</div> </div>
<a-button size="small" type="primary" ghost>编辑</a-button>
<a-button size="small" type="primary" ghost @click="modal('edit')">编辑</a-button>
<a-button size="small" type="primary" ghost>预览</a-button> <a-button size="small" type="primary" ghost>预览</a-button>
</a-space> </a-space>
</template> </template>
@ -35,23 +41,62 @@ import { ref, reactive, onMounted } from 'vue';
import type { searchValue } from "@/api/admin" import type { searchValue } from "@/api/admin"
import { useRouter } from "vue-router" import { useRouter } from "vue-router"
const router = useRouter() const router = useRouter()
import {classticContentStore} from "@/stores"
import { classticContentStore } from "@/stores"
const addModal=reactive({
addOpen:false,
addTitle:"",
modalMode:""
})
const modal=(mode:string)=>{
addModal.modalMode=mode
if (mode === 'add') {
addModal.addTitle = '新增';
} else if (mode === 'edit') {
addModal.addTitle = '编辑';
}
addModal.addOpen = true;
}
const addhandleOk = () => {
addOpen.value = true;
addOpen.value = false;
};
const edithandleOk=()=> {
// Logic for editing
console.log('Edit logic here');
}
const handleOk=()=> {
if (addModal.modalMode === 'add') {
// Handle add action
addhandleOk();
} else if (addModal.modalMode === 'edit') {
// Handle edit action
edithandleOk();
}
addModal.addOpen = false;
}
const searchList = reactive<searchValue>({ const searchList = reactive<searchValue>({
classtictitle:""
classtictitle: ""
}) })
const classticContent=classticContentStore()
const open = ref<boolean>(false);
const classticContent = classticContentStore()
const deleteOpen = ref<boolean>(false);
const toDelete = reactive<{ key: string, id: number }>({ const toDelete = reactive<{ key: string, id: number }>({
key: '', key: '',
id: 0 id: 0
}); });
const showModal = (key: string, id: number) => { const showModal = (key: string, id: number) => {
open.value = true;
deleteOpen.value = true;
// key id ref 便使 // key id ref 便使
toDelete.key = key; toDelete.key = key;
toDelete.id = id; toDelete.id = id;
}; };
const addOpen = ref<boolean>(false);
// //
const blogAdd = function () { const blogAdd = function () {
router.push('/admin/blogmanage/add') router.push('/admin/blogmanage/add')

Loading…
Cancel
Save