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

Refactor code structure and remove redundant changes

Browse Source
This commit is contained in:
wangqiao
2025-08-15 16:45:15 +08:00
commit 99df1d1f81
220 changed files with 33086 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
pages/toolbox/components/search.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div>
<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%">
<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"
@keyup.enter="search"
/>
</div>
</div>
<!-- 按钮区域 -->
<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!"
@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!"
@click="handleUpload"
>
上传工具
</button>
</div>
</div>
</header>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import useUserStore from '@/store/user'
const userStore = useUserStore()
const emits = defineEmits(['search'])
const searchQuery = ref('')
const handleUpload = () => {
// 是否登录
if (!userStore.token) return ElMessage.error('请先登录')
// 新开窗口 用router跳转 新窗口打开
window.open('/toolbox-publish', '_blank')
}
const search = () => {
emits('search', searchQuery.value)
}
</script>
<style scoped>
.no-right-border :deep(.el-input__wrapper) {
border-right: none !important;
/* box-shadow: -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset !important; */
}
/* 如果需要调整右侧圆角，可以添加 */
.no-right-border :deep(.el-input__wrapper) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
</style>

164
pages/toolbox/index.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<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
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>
<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>
<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>
</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 class="text-16px text-[#999999] font-normal">暂无数据</div> -->
<el-empty v-if="!pageRes.list.length" :image="emptyImg"></el-empty>
</div>
<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"
:page-sizes="[10, 20, 30]"
class="justify-center!"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</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>
<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">
<div class="mb-20px flex items-center text-16px text-[#333333] font-normal">
<div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
标签列表
</div>
<div class="flex flex-wrap">
<div
v-for="item in 10"
:key="item"
class="mb-19px mr-26px box-border border border-[#D7D7D7] rounded-4px border-solid px-8px py-12px text-16px text-[#1A65FF] font-normal"
># 标签名称1</div
>
</div>
</div> -->
<!-- -->
<!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
<div class="mb-20px 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 4"
:key="item"
class="mt-16px flex items-center border-b-1px border-b-[#eee] border-b-solid pb-16px text-16px text-[#333333] font-normal"
>
<img src="@/assets/images/aucad.png" alt="" srcset="" class="h-68px w-110px" />
<div class="ml-20px text-16px text-[#333333] font-normal">Stable Diffusion 商业变现与 绘画大模型多场景实战</div>
</div>
</div> -->
</div>
</div>
</template>
<script setup lang="ts">
import KlNavTab from '@/components/kl-nav-tab/index.vue'
import { page } from '@/api/toolbox/index.js'
import { TpageReq, TpageRes } from '@/api/toolbox/types'
import { reactive, ref } from 'vue'
import KlSearch from '@/pages/toolbox/components/search.vue'
import { getRelationRecommend } from '@/api/drawe-detail/index'
import { ProjectDrawPageRespVO } from '@/api/drawe-detail/types'
import emptyImg from '@/assets/images/empty.png'
import dayjs from 'dayjs'
const pageReq = reactive<TpageReq>({
pageNum: 1,
pageSize: 10,
title: '',
})
const pageRes = ref<TpageRes>({
list: [],
total: 0,
})
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
})
}
getPage()
const handleCurrentChange = (page: number) => {
pageReq.pageNum = page
getPage()
}
const handleSizeChange = (size: number) => {
pageReq.pageSize = size
pageReq.pageNum = 1
getPage()
}
const search = (val?: string) => {
pageReq.pageNum = 1
pageReq.title = val || ''
getPage()
}
// 猜你喜欢
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>