-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
96 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <template> | ||
| <el-card class="cursor-pointer" shadow="hover" @click="handleClick"> | ||
| <div class="flex flex-col gap-3"> | ||
| <div class="flex gap-1 items-center"> | ||
| <el-avatar shape="square" :size="40" fit="cover" :src="websiteInfo.logo" /> | ||
| <div class="flex flex-col gap-0.5"> | ||
| <div class="text-lg">{{ websiteInfo.name }}</div> | ||
| <div class="flex gap-1 items-center text-xs text-slate-400 font-thin"> | ||
| <template v-for="(tag, index) in websiteInfo.tags" :key="index"> | ||
| <span> | ||
| {{ tag }} | ||
| </span> | ||
| <template v-if="index !== websiteInfo.tags.length - 1"> | ||
| <el-divider direction="vertical" /> | ||
| </template> | ||
| </template> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="text-sm text-slate-600 font-medium line-clamp-2">{{ websiteInfo.desc }}</div> | ||
| </div> | ||
| </el-card> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import type { WebsiteList } from '~/types' | ||
| // 父组件传递参数 | ||
| const props = defineProps<{ | ||
| websiteInfo: WebsiteList | ||
| }>() | ||
| // 点击卡片回调 | ||
| const handleClick = () => { | ||
| window.open(props.websiteInfo.url) | ||
| } | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| :deep(.el-avatar) { | ||
| background-color: transparent; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,54 @@ | ||
| <template> | ||
| <div | ||
| class="flex justify-center items-center font-black text-5xl flex-col" | ||
| style="height: calc(100vh - 10rem)" | ||
| class="flex justify-center items-center font-black text-5xl flex-col gap-2" | ||
| style="min-height: calc(100vh - 10rem)" | ||
| > | ||
| Hello World! | ||
| <div class="flex gap-4 mt-4"> | ||
| <el-button v-for="item in data" :key="item.id"> | ||
| {{ item.name }} | ||
| </el-button> | ||
| </div> | ||
| <ClientOnly> | ||
| <el-button-group v-loading="categoryStatus === 'pending'"> | ||
| <el-button text :bg="!category_id" @click="category_id = ''">全部</el-button> | ||
| <el-button | ||
| v-for="item in categoryList?.data?.list || []" | ||
| :key="item.id" | ||
| text | ||
| :bg="category_id === item.id" | ||
| @click="category_id = item.id" | ||
| >{{ item.name }}</el-button> | ||
| </el-button-group> | ||
| <div | ||
| v-loading="websiteStatus === 'pending'" | ||
| class="grid gap-5 w-full px-4 justify-center" | ||
| style="grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr))" | ||
| > | ||
| <template v-if="websiteList?.data?.list?.length"> | ||
| <WebsiteCard | ||
| v-for="item in websiteList?.data?.list || []" | ||
| :key="item.id" | ||
| :website-info="item" | ||
| /> | ||
| </template> | ||
| <el-empty v-else description="此分类暂无站点，请前往后台添加数据!" /> | ||
| </div> | ||
| </ClientOnly> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import type { CategoryList } from '~/types' | ||
| const supabase = useSupabaseClient<CategoryList>() | ||
| import type { PageResponse, CategoryList, Response, WebsiteList } from '~/types' | ||
| const { data } = await supabase.from('ds_categorys').select() | ||
| const category_id = ref('') | ||
| // 请求站点列表 | ||
| const { data: websiteList, status: websiteStatus } = await useFetch< | ||
| Response<PageResponse<WebsiteList>> | ||
| >('/api/websites', { | ||
| query: { current: 1, pageSize: 999, category_id } | ||
| }) | ||
| // 请求分类列表 | ||
| const { data: categoryList, status: categoryStatus } = await useFetch< | ||
| Response<PageResponse<CategoryList>> | ||
| >('/api/categorys', { | ||
| query: { current: 1, pageSize: 999 } | ||
| }) | ||
| </script> |
File renamed without changes.