wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor API requests and update component styles

Browse Source
This commit is contained in:
wangqiao
2025-08-23 22:55:59 +08:00
parent ee8ce32af6
commit b603d9d854
12 changed files with 136 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
api/channel/index.ts
View File

@ -20,7 +20,7 @@ import type {
* @return {Promise}
*/
export const page = (params: TpageReq) => {
return useFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/posts/page', params)
return useDollarFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/posts/page', {query: params})
}
/**
@ -35,7 +35,7 @@ export const create = (params: TcreateReq) => {
* @return {Promise}
*/
export const list = () => {
return useFetchRequest.get<IResponse<TlistRes[]>>('/prod-api/app-api/business/channel/list')
return useDollarFetchRequest.get<IResponse<TlistRes[]>>('/prod-api/app-api/business/channel/list')
}
/**
* 获得论坛频道列表
@ -121,7 +121,7 @@ export const clearUnreadMessage = (params: { id: number }) => {
* 获得论坛频道
*/
export const getChannelLunTanDetail = (params: { id: string }) => {
return useFetchRequest.get<IResponse<ChannelRespVO>>('/prod-api/app-api/business/channel/get', params)
return useDollarFetchRequest.get<IResponse<ChannelRespVO>>('/prod-api/app-api/business/channel/get', {query:params})
}
/**

2
api/drawe-detail/index.ts
View File

@ -31,7 +31,7 @@ export const createComment = (params: { relationId?: number | string; content?:
* @return {Promise}
*/
export const getRelationRecommend = (params: { type?: number | string; projectType?: number | string }) => {
return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/top-list', { params })
return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/top-list', { query:params })
}
/**

2
api/toolbox/index.ts
View File

@ -15,5 +15,5 @@ export const create = (params: TcreateReq) => {
* 获得内容信息分页
*/
export const page = (params: TpageReq) => {
return useFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/app/project-resource/page', params)
return useFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/app/project-resource/page', {query:params})
}

2
components/kl-menus-v2/index.vue
View File

@ -41,7 +41,7 @@
{ name: '模型', path: '/model' },
{ name: '国外专区', path: '/foreign' },
{ name: '工具箱', path: '/toolbox' },
{ name: '交流频道', path: '/communication/channel' },
{ name: '交流频道', path: '/channel' },
// { name: '牛人社区', path: '/community' },
])

2
components/kl-nav-tab/index.vue
View File

@ -164,7 +164,7 @@
navigateTo('/community') // 修改为在新窗口打开
break
case '交流频道':
navigateTo('/communication/channel') // 修改为在新窗口打开
navigateTo('/channel') // 修改为在新窗口打开
break
case '工具箱':
navigateTo('/toolbox') // 修改为在新窗口打开

10
pages/channel/components/HotLlabel.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="box-border w-320px border border-[#EEEEEE] rounded-8px border-solid bg-[#FFFFFF] px-23px py-25px">
<div class="text-16px text-[#333333] font-normal">频道列表</div>
<div class="mt-30px">
<div class="box-border w-[320px] border border-[#EEEEEE] rounded-[8px] border-solid bg-[#FFFFFF] px-[23px] py-[25px]">
<div class="text-[16px] text-[#333333] font-normal">频道列表</div>
<div class="mt-[30px]">
<el-row>
<el-col v-for="(item, index) in channelIdList" :key="index" :span="8" class="mb-10px">
<el-col v-for="(item, index) in channelIdList" :key="index" :span="8" class="mb-[10px]">
<span
class="cursor-pointer text-14px text-[#999999] font-normal"
class="cursor-pointer text-[14px] text-[#999999] font-normal"
:class="{ active: channelId === item.channelId }"
@click="handleClick(item.channelId)"
>{{ item.channelTitle }}</span

30
pages/channel/components/RightContent.vue
View File

@ -1,37 +1,37 @@
<template>
<div class="ml-19px w-100%">
<div class="ml-[19px] w-[100%]">
<ChannelHeader v-if="Object.keys(lunTanRes).length" v-model="lunTanRes"></ChannelHeader>
<div class="mb-13px box-border flex flex-1 flex-col cursor-pointer gap-12px border border-[#EEEEEE] rounded-8px border-solid bg-[#FFFFFF] px-20px py-16px">
<div class="mb-[13px] box-border flex flex-1 flex-col cursor-pointer gap-[12px] border border-[#EEEEEE] rounded-[8px] border-solid bg-[#FFFFFF] px-[20px] py-[16px]">
<div
v-for="(item, index) in pageRes.list"
v-for="(item, index) in pageRes?.list"
:key="index"
class="flex justify-between border-b-1px border-b-[#eee] border-b-solid pb-8px"
:class="{ 'border-b-0! pb-0px!': index === pageRes.list.length - 1 }"
class="flex justify-between border-b-[1px] border-b-[#eee] border-b-solid pb-[8px]"
:class="{ 'border-b-0! pb-[0px]!': index === pageRes!.list!.length - 1 }"
@click="handleClick(item.postsId)"
>
<div class="flex flex-1 items-center">
<div class="ellipsis max-w-70% text-15px text-[#2d3137] font-normal">{{ item.postsTitle }}</div>
<span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ item.likeNum || 0 }}人赞过</span>
<span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ item.commentNum || 0 }}评论</span>
<span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}发布</span>
<div class="ellipsis max-w-[70%] text-[15px] text-[#2d3137] font-normal">{{ item.postsTitle }}</div>
<span class="ml-[10px] flex-shrink-0 text-[13px] color-[#96999f]">{{ item.likeNum || 0 }}人赞过</span>
<span class="ml-[10px] flex-shrink-0 text-[13px] color-[#96999f]">{{ item.commentNum || 0 }}评论</span>
<span class="ml-[10px] flex-shrink-0 text-[13px] color-[#96999f]">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}发布</span>
</div>
<div class="w-100px flex flex-shrink-0 items-center justify-end">
<span class="ellipsis text-13px color-#96999f">{{ item.creatorName }}</span>
<div class="w-[100px] flex flex-shrink-0 items-center justify-end">
<span class="ellipsis text-[13px] color-[#96999f]">{{ item.creatorName }}</span>
<!-- 删除 -->
<el-button v-if="false" type="danger" size="small" @click="handleDelete(item.postsId)">删除</el-button>
</div>
</div>
</div>
<el-pagination
v-if="pageRes.list.length > 0"
v-if="pageRes?.list.length"
v-model:current-page="pageNo"
:page-size="10"
layout="prev, pager, next"
:total="pageRes.total"
:total="pageRes?.total"
@current-change="handleCurrentChange"
/>
<!-- 暂无数据 -->
<el-empty v-if="!pageRes.list.length" description="暂无数据"></el-empty>
<el-empty v-if="!pageRes?.list.length" description="暂无数据"></el-empty>
</div>
</template>
@ -43,7 +43,7 @@
const emit = defineEmits(['updatePageNo'])
const pageRes = defineModel<TpageRes>('modelValue', {
const pageRes = defineModel<TpageRes | null>('modelValue', {
required: true,
})
const lunTanRes = defineModel<ChannelRespVO>('lunTanRes', {

9
pages/channel/index.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- 导航 -->
<KlNavTab active="交流频道" />
<div class="ma-auto mt-30px w-1440px flex">
<div class="ma-auto mt-[30px] w-[1440px] flex">
<LeftContent v-model="pageReq.channelId"></LeftContent>
<RightContent v-model="pageRes" v-model:lun-tan-res="lunTanRes" v-model:page-no="pageReq.pageNo" @update-page-no="handleUpdatePageNo"></RightContent>
</div>
@ -24,6 +24,11 @@
list: [],
total: 0,
})
// const {data:pageRes, refresh:getPage} = await useAsyncData(`prod-api/app-api/business/posts/page-${Date.now()}`, async () => {
// const res = await page(pageReq)
// return res.data as TpageRes
// })
// 获得频道帖子分页
const getPage = () => {
page(pageReq).then((res) => {
@ -52,6 +57,8 @@
() => pageReq.channelId,
(val) => {
if (val) {
console.log(val);
getPage()
getLunTanDetaiil(val)
}

14
pages/foreign/components/RecommendedColumnsV2.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="relative mt-34px w-100%">
<div class="relative mt-[34px] w-[100%]">
<KlTabBar v-model="tabIndex" :data="tabBar" />
<KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
<div class="absolute right-0px top-10px text-16px text-[#999999] font-normal"
>共<span class="color-#1A65FF">{{ result.total }}</span
<div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
>共<span class="color-[#1A65FF]">{{ result?.total }}</span
>个筛选结果</div
>
<div class="content mt-10px">
<div class="content mt-[10px]">
<el-row :gutter="20">
<el-col v-for="(item, index) in result.list" :key="index" :span="6">
<el-col v-for="(item, index) in result?.list" :key="index" :span="6">
<CardPicture :item-info="item" />
</el-col>
</el-row>
<el-empty v-if="!result.list.length" description="暂无数据"></el-empty>
<el-empty v-if="!result?.list.length" description="暂无数据"></el-empty>
</div>
</div>
</template>
@ -31,7 +31,7 @@
},
])
const result = defineModel<pageRes>('modelValue', {
const result = defineModel<pageRes| null>('modelValue', {
required: true,
})
const query = defineModel<any>('query', {

36
pages/foreign/index.vue
View File

@ -3,7 +3,7 @@
<KlNavTab active="国外专区" />
<!-- banneer提示 -->
<BannerTips />
<div class="ma-auto w-1440px">
<div class="ma-auto w-[1440px]">
<!-- 图片展示鼠标移上去展示提示语 -->
<!-- <ImageTips /> -->
<!-- 推荐栏目 -->
@ -11,12 +11,12 @@
<!-- 精选专题 -->
<!-- <FeaturedSpecials></FeaturedSpecials> -->
<!-- 分页 -->
<div class="mt-10px flex justify-center">
<div class="mt-[10px] flex justify-center">
<el-pagination
v-model:current-page="query.pageNo"
v-model:page-size="query.pageSize"
:page-sizes="[10, 20, 30]"
:total="result.total"
:total="result?.total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleChangeSize"
@current-change="handleChangeCurrent"
@ -43,22 +43,26 @@
source: '',
type: 1,
})
const result = reactive<pageRes>({
list: [],
total: 0,
})
// const result = reactive<pageRes>({
// list: [],
// total: 0,
// })
const getPage = () => {
page(query).then((res) => {
const { data, code } = res
if (code === 0) {
result.list = data.list
result.total = data.total
}
const {data:result, refresh:getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
const res = await page(query)
return res.data
})
}
// const getPage = () => {
// page(query).then((res) => {
// const { data, code } = res
// if (code === 0) {
// result.list = data.list
// result.total = data.total
// }
// })
// }
getPage()
// getPage()
const handleChangeSize = (val: number) => {
query.pageSize = val

12
pages/toolbox/components/search.vue
View File

@ -1,16 +1,16 @@
<template>
<div>
<header class="h-90px">
<header class="h-[90px]">
<div class="mx-a h-full flex items-center justify-center">
<!-- 搜索区域 -->
<div class="relative w-647px px4 p-r-0px!">
<div class="search-input relative w-100%">
<div class="relative w-[647px] px-4 p-r-[0px]!">
<div class="search-input relative w-[100%]">
<el-input
v-model="searchQuery"
type="text"
placeholder="搜一搜"
:prefix-icon="Search"
class="no-right-border box-border h40 w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
class="no-right-border box-border h-[40px] w-[100%] rounded-bl-[4px] rounded-br-[0px] rounded-tl-[4px] rounded-tr-[0px] bg-[#F8F8F8] text-[14px] outline-[#999]"
@keyup.enter="search"
/>
</div>
@ -18,13 +18,13 @@
<!-- 按钮区域 -->
<div class="flex items-center">
<button
class="h-40px w-111px cursor-pointer border-width-1px border-color-#1A65FF rounded-bl-0px rounded-br-4px rounded-tl-0px rounded-tr-4px border-none border-solid text-center text-14px color-#fff bg-#1A65FF!"
class="h-[40px] w-[111px] cursor-pointer border-width-[1px] border-color-[#1A65FF] rounded-bl-[0px] rounded-br-[4px] rounded-tl-[0px] rounded-tr-[4px] border-none border-solid text-center text-[14px] color-[#fff] !bg-[#1A65FF]"
@click="search"
>
搜索
</button>
<button
class="m-l-16px h-40px w-111px cursor-pointer border-width-1px border-color-#E7B03B rounded-bl-6px rounded-br-6px rounded-tl-4px rounded-tr-6px border-none border-solid text-14px color-#fff bg-#E7B03B!"
class="m-l-[16px] h-[40px] w-[111px] cursor-pointer border-width-[1px] border-color-[#E7B03B] rounded-bl-[6px] rounded-br-[6px] rounded-tl-[4px] rounded-tr-[6px] border-none border-solid text-[14px] color-[#fff] !bg-[#E7B03B]"
@click="handleUpload"
>
上传工具

119
pages/toolbox/index.vue
View File

@ -2,47 +2,47 @@
<KlNavTab active="工具箱" />
<!-- 搜索 -->
<KlSearch @search="search"></KlSearch>
<div v-loading="loading" class="ml-auto mr-auto mt-20px w1440 flex justify-center gap-60px">
<div class="left w-821px">
<img src="~/assets/images/banner2.png" alt="" srcset="" class="h-284px w-100%" />
<div v-loading="loading" class="ma-auto mt-[20px] w-[1440px] flex justify-center gap-[60px]">
<div class="left w-[821px]">
<img src="~/assets/images/banner2.png" alt="" srcset="" class="h-[284px] w-[100%]" />
<div
class="box-border border border-t-0px border-t-0px border-[#EEEEEE] rounded-12px border-solid border-t-none bg-[#FFFFFF] px-28px py-17px"
class="box-border border border-t-[0px] border-t-[0px] border-[#EEEEEE] rounded-[12px] border-solid border-t-none bg-[#FFFFFF] px-[28px] py-[17px]"
style="border-top-left-radius: 0px; border-top-right-radius: 0px"
>
<div v-for="item in pageRes.list" :key="item.id" class="mt-20px flex border-b-1px border-b-[#eee] border-b-solid pb-20px">
<div class="h-142px w-200px text-center">
<el-image :src="item.iconUrl" alt="" srcset="" class="max-w-100% rd-4px" fit="cover" />
<div v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px]">
<div class="h-[142px] w-[200px] text-center">
<el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
</div>
<div class="ml-25px flex-1">
<div class="text-16px text-[#333333] font-normal">{{ item.title }}</div>
<div class="mt-8px text-14px text-[#999999] font-normal">{{ item.description }}</div>
<div class="mt-10px flex items-center justify-between">
<div class="ml-[25px] flex-1">
<div class="text-[16px] text-[#333333] font-normal">{{ item.title }}</div>
<div class="mt-[8px] text-[14px] text-[#999999] font-normal">{{ item.description }}</div>
<div class="mt-[10px] flex items-center justify-between">
<div class="flex items-center">
<div class="flex items-center text-14px text-[#666666] font-normal">
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-4px h-17px w-23px" />{{ item.previewPoint }}
<div class="flex items-center text-[14px] text-[#666666] font-normal">
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-[4px] h-[17px] w-[23px]" />{{ item.previewPoint }}
</div>
<div class="ml-26px flex items-center text-14px text-[#666666] font-normal">
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-4px h-17px w-19px" /> {{ item.commentsPoint }}
<div class="ml-[26px] flex items-center text-[14px] text-[#666666] font-normal">
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px] w-[19px]" /> {{ item.commentsPoint }}
</div>
<div class="ml-20px">
<div v-for="(v, index) in item.labels" :key="index" class="mr-10px inline-block text-14px text-[#1A65FF] font-normal">#{{ v }}</div>
<div class="ml-[20px]">
<div v-for="(v, index) in item.labels" :key="index" class="mr-[10px] inline-block text-[14px] text-[#1A65FF] font-normal">#{{ v }}</div>
</div>
</div>
<div class="text-14px text-[#999999] font-normal">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<div class="text-[14px] text-[#999999] font-normal">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
</div>
</div>
</div>
<!-- 暂无数据 -->
<div v-if="pageRes.list.length === 0" class="mt-10px flex items-center justify-center">
<div v-if="pageRes?.list.length === 0" class="mt-[10px] flex items-center justify-center">
<!-- <div class="text-16px text-[#999999] font-normal">暂无数据</div> -->
<el-empty v-if="!pageRes.list.length" :image="emptyImg"></el-empty>
</div>
<div class="mt-20px">
<div class="mt-[20px]">
<el-pagination
v-model:current-page="pageReq.pageNum"
:page-size="pageReq.pageSize"
layout="total, sizes, prev, pager, next"
:total="pageRes.total"
:total="pageRes?.total"
:page-sizes="[10, 20, 30]"
class="justify-center!"
@current-change="handleCurrentChange"
@ -51,13 +51,13 @@
</div>
</div>
</div>
<div class="right w-398px">
<div class="box-border border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
<div class="flex items-center text-16px text-[#333333] font-normal">
<div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
<div class="right w-[398px]">
<div class="box-border border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF] pa-[20px]">
<div class="flex items-center text-[16px] text-[#333333] font-normal">
<div class="mr-[14px] h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
热门排行
</div>
<div v-for="item in recommendList" :key="item.id" class="mt-20px text-14px text-[#666] font-normal">{{ item.title }}</div>
<div v-for="item in recommendList" :key="item.id" class="mt-[20px] text-[14px] text-[#666] font-normal">{{ item.title }}</div>
</div>
<!-- -->
<!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
@ -110,26 +110,32 @@
title: '',
})
const pageRes = ref<TpageRes>({
list: [],
total: 0,
// const pageRes = ref<TpageRes>({
// list: [],
// total: 0,
// })
const {data: pageRes, refresh: getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
const res = await page(pageReq)
return res.data
})
const loading = ref(false)
const getPage = () => {
loading.value = true
page(pageReq)
.then((res) => {
if (res.code === 0) {
pageRes.value = res.data
}
})
.finally(() => {
loading.value = false
})
}
// const getPage = () => {
// loading.value = true
// page(pageReq)
// .then((res) => {
// if (res.code === 0) {
// pageRes.value = res.data
// }
// })
// .finally(() => {
// loading.value = false
// })
// }
getPage()
// getPage()
const handleCurrentChange = (page: number) => {
pageReq.pageNum = page
@ -148,17 +154,24 @@
getPage()
}
// 猜你喜欢
const recommendList = ref<ProjectDrawPageRespVO[]>([]) // 猜你喜欢数据
const getRelationRecommendList = () => {
getRelationRecommend({
const {data: recommendList} = await useAsyncData(`draw-recommend-list-${Date.now()}`, async () => {
const res = await getRelationRecommend({
type: 4,
}).then((res) => {
if (res.code === 0) {
console.log(res.data)
recommendList.value = res.data
}
})
}
getRelationRecommendList()
return res.data
})
// 猜你喜欢
// const recommendList = ref<ProjectDrawPageRespVO[]>([]) // 猜你喜欢数据
// const getRelationRecommendList = () => {
// getRelationRecommend({
// type: 4,
// }).then((res) => {
// if (res.code === 0) {
// console.log(res.data)
// recommendList.value = res.data
// }
// })
// }
// getRelationRecommendList()
</script>