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

Refactor API requests and update component structure

Browse Source
This commit is contained in:
wangqiao
2025-08-20 22:58:08 +08:00
parent 1ef219878c
commit 2fe36051f8
8 changed files with 123 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.configPath": "./.prettierrc"
}

7
api/home/index.ts
View File

@ -24,7 +24,7 @@ export const hotTop = (params: ThotTopReq) => {
* @returns
*/
export const recommendTop = (params: ThotTopReq) => {
return useDollarFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/recommend-top', { params })
return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/recommend-top', { params })
}
/**
@ -72,14 +72,13 @@ export const settinngPage = (params: { pageNo?: number; pageSize: number; type:
* 获得首页设置信息分页
*/
export const getSettingPage = (params: { type: number }) => {
return useDollarFetchRequest.get<IResponse<PageResultIndexSettingRespVO[]>>('/prod-api/app-api/system/index-setting/list', { params })
return useFetchRequest.get<IResponse<PageResultIndexSettingRespVO[]>>('/prod-api/app-api/system/index-setting/list', { params })
}
/**
* 首页-标签2
*/
export const tab2 = () => {
return useDollarFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab2', {
server: true
return useFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab2', {
})
}

46
composables/useFetchRequest.ts
View File

@ -35,22 +35,15 @@ const useServerRequest = async <T>(
// return useFetch<T>(url, { ...defaultOptions, ...opts } as any);
// 明确转换返回类型
const response = await useFetch<T>(url, { ...defaultOptions, ...opts, key: 'unique-key-' + Date.now(), } as any);
return response as unknown as T;
return response.data.value as unknown as T;
};
// GET请求
export const get = <T = unknown>(
endpoint: string,
config?: Omit<FetchOptions, 'method'>
): Promise<{
data: T;
pending: boolean;
error: any;
refresh: () => Promise<void>;
execute: () => Promise<void>;
status: number;
}> => {
return useServerRequest(endpoint, { ...config, method: 'GET' })
): Promise<T> => {
return useServerRequest<T>(endpoint, { ...config, method: 'GET' })
}
// POST请求
@ -58,15 +51,8 @@ const useServerRequest = async <T>(
endpoint: string,
body?: any,
config?: Omit<FetchOptions, 'method' | 'body'>
): Promise<{
data: T;
pending: boolean;
error: any;
refresh: () => Promise<void>;
execute: () => Promise<void>;
status: number;
}> => {
return useServerRequest(endpoint, { ...config, method: 'POST', body })
): Promise<T> => {
return useServerRequest<T>(endpoint, { ...config, method: 'POST', body })
}
@ -74,15 +60,8 @@ const useServerRequest = async <T>(
export const del = <T = unknown>(
endpoint: string,
config?: Omit<FetchOptions, 'method'>
): Promise<{
data: T;
pending: boolean;
error: any;
refresh: () => Promise<void>;
execute: () => Promise<void>;
status: number;
}> => {
return useServerRequest(endpoint, { ...config, method: 'DELETE' })
): Promise<T> => {
return useServerRequest<T>(endpoint, { ...config, method: 'DELETE' })
}
// PUT请求
@ -90,13 +69,6 @@ const useServerRequest = async <T>(
endpoint: string,
body?: any,
config?: Omit<FetchOptions, 'method' | 'body'>
): Promise<{
data: T;
pending: boolean;
error: any;
refresh: () => Promise<void>;
execute: () => Promise<void>;
status: number;
}> => {
return useServerRequest(endpoint, { ...config, method: 'PUT', body })
): Promise<T> => {
return useServerRequest<T>(endpoint, { ...config, method: 'PUT', body })
}

1
layout/kl-menus-v2/index.vue
View File

@ -10,7 +10,6 @@
<nuxt-link
v-for="(item, index) in menuItems"
:key="index"
target="_blank"
:to="item.path"
class="parent-links relative rounded-lg px3 py2 text-[#1A65FF]"
>

20
pages/home/components/LearningRecommendations.vue
View File

@ -31,14 +31,20 @@
status: 0,
})
const bannerList = ref<PageResultIndexSettingRespVO[]>([])
const getBanner = async () => {
const { data: bannerList } = useAsyncData('get-setting-Page', async () => {
const res = await getSettingPage(pageReq)
if (res.code === 0) {
bannerList.value = res.data
}
}
getBanner()
return res.data
})
// const bannerList = ref<PageResultIndexSettingRespVO[]>([])
// const getBanner = async () => {
// const res = await getSettingPage(pageReq)
// if (res.code === 0) {
// bannerList.value = res.data
// }
// }
// getBanner()
const handleClick = (url: string) => {
navigateTo(url)

81
pages/home/components/MainContent.vue
View File

@ -1,53 +1,74 @@
`<template>
`
<template>
<div class="main-content">
<div class="flex">
<div class="h-424px w-957px">
<el-carousel height="424px" indicator-position="none">
<el-carousel-item v-for="(item, index) in bannerList" :key="index">
<el-image :src="item.content" class="w-100%" :class="{ 'cursor-pointer': item.url }" fit="cover" @click="handleClick(item.url)" />
<el-image
:src="item.content"
class="w-100%"
:class="{ 'cursor-pointer': item.url }"
fit="cover"
@click="handleClick(item.url)"
/>
</el-carousel-item>
</el-carousel>
</div>
<LoginForm />
</div>
<div class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px">
<img src="~/assets/images/voice.png" alt="" srcset="" class="mr-10px h-15px w-16px" />
<Vue3Marquee :duration="10" direction="normal" pause-on-hover>· 经典来袭，SolidWorks装配经典案例之气动发动机 </Vue3Marquee>
<div
class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px"
>
<img
src="~/assets/images/voice.png"
alt=""
srcset=""
class="mr-10px h-15px w-16px"
/>
<Vue3Marquee :duration="10" direction="normal" pause-on-hover
>· 经典来袭，SolidWorks装配经典案例之气动发动机
</Vue3Marquee>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import LoginForm from './LoginForm.vue'
import { Vue3Marquee } from 'vue3-marquee'
import { reactive, ref } from "vue";
import LoginForm from "./LoginForm.vue";
import { Vue3Marquee } from "vue3-marquee";
import { getSettingPage } from '~/api/home/index'
import type { PageResultIndexSettingRespVO } from '~/api/home/type'
import { getSettingPage } from "~/api/home/index";
import type { PageResultIndexSettingRespVO } from "~/api/home/type";
const pageReq = reactive({
type: 1,
status: 0,
})
const pageReq = reactive({
type: 1,
status: 0,
});
const bannerList = ref<PageResultIndexSettingRespVO[]>([])
const getBanner = async () => {
const res = await getSettingPage(pageReq)
if (res.code === 0) {
bannerList.value = res.data
}
}
getBanner()
const handleClick = (url: string) => {
if (url) {
navigateTo(url)
}
const { data: bannerList } = useAsyncData("get-setting-Page", async () => {
const res = await getSettingPage(pageReq);
return res.data;
});
// const bannerList = ref<PageResultIndexSettingRespVO[]>([])
// const getBanner = async () => {
// const res = await getSettingPage(pageReq)
// if (res.code === 0) {
// bannerList.value = res.data
// }
// }
// getBanner()
const handleClick = (url: string) => {
if (url) {
navigateTo(url);
}
};
</script>
<style scoped lang="scss">
.main-content {
flex: 1;
}
.main-content {
flex: 1;
}
</style>

35
pages/home/components/RecommendedColumns.vue
View File

@ -1,7 +1,8 @@
<template>
<div class="mt-34px w-100%">
<div class="mt-[34px] w-[100%]">
<KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />
<div class="content mt-10px">
<div class="content mt-[10px]">
<el-row :gutter="20">
<el-col v-for="i in recommendTopList" :key="i.id" :span="6">
<CardPicture :item-info="i" />
@ -9,8 +10,8 @@
</el-row>
</div>
<!-- 暂无数据 -->
<el-empty v-if="recommendTopList.length === 0" description="暂无数据"></el-empty>
<div v-if="recommendTopList.length > 0" class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div>
<el-empty v-if="recommendTopList?.length === 0" description="暂无数据"></el-empty>
<!-- <div v-else class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div> -->
</div>
</template>
@ -43,15 +44,22 @@
},
])
const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
const getRecommendTop = () => {
// const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
// const getRecommendTop = () => {
// // @ts-ignore
// recommendTop(query).then((res) => {
// if (Array.isArray(res.data) && res.data.length > 0) {
// recommendTopList.value = res.data
// }
// })
// }
const { data: recommendTopList, refresh: getRecommendTop} = useAsyncData('recommendTop', async () => {
// @ts-ignore
recommendTop(query).then((res) => {
if (Array.isArray(res.data) && res.data.length > 0) {
recommendTopList.value = res.data
}
})
}
const res = await recommendTop(query)
return res.data || []
})
const handleClick = () => {
if (query.type === 1) {
@ -69,9 +77,6 @@
if (val) {
getRecommendTop()
}
},
{
immediate: true,
}
)
</script>

37
pages/home/components/SideMenu.vue
View File

@ -58,7 +58,26 @@ const submenuTop = ref(0);
const sideMenu = ref();
const menuItemRefs = ref<HTMLElement[]>([]);
const menuItems = ref<ProjectDictNodeVO[]>([]);
// const menuItems = ref<ProjectDictNodeVO[]>([]);
// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
const { data: menuItems, pending, error } = useAsyncData(
'tab2-list',
async () => {
const res = await tab2()
const arr = [];
for (let i = 0; i < res.data?.length; i += 2) {
arr.push({
children: res.data.slice(i, i + 2),
name: getName(res.data.slice(i, i + 2)),
});
}
return arr
}
)
const showSubMenu = (index: number) => {
// if (menuItems.value.length === index + 1) {
@ -108,18 +127,6 @@ const setMenuItemRef = (
menuItemRefs.value[index] = el as HTMLElement;
}
};
const getLabel = () => {
tab2().then((res) => {
const arr = [];
for (let i = 0; i < res.data.length; i += 2) {
arr.push({
children: res.data.slice(i, i + 2),
name: getName(res.data.slice(i, i + 2)),
});
}
menuItems.value = arr;
});
};
const getName = (arr: any[]) => {
if (arr.length === 1) {
@ -131,11 +138,11 @@ const getName = (arr: any[]) => {
const init = () => {
// 获取标签
getLabel()
// getLabel()
};
onMounted(() => {
init();
// init();
});
</script>