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

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>