From c608b3c03756702194fd3bcfcae2ea39e7e35365 Mon Sep 17 00:00:00 2001 From: nighca Date: Mon, 21 Oct 2024 12:47:34 +0800 Subject: [PATCH] sv --- .../components/community/ProjectsSection.vue | 30 ++++++++------- .../components/community/user/UserHeader.vue | 12 ++++-- .../community/user/content/UserContent.vue | 2 +- .../src/components/community/user/cover.jpg | Bin 180167 -> 0 bytes .../src/components/community/user/cover/1.jpg | Bin 0 -> 296341 bytes .../src/components/community/user/cover/2.jpg | Bin 0 -> 292942 bytes .../src/components/community/user/cover/3.jpg | Bin 0 -> 306005 bytes .../src/components/community/user/cover/4.jpg | Bin 0 -> 413350 bytes .../src/components/community/user/cover/5.jpg | Bin 0 -> 229038 bytes .../src/components/community/user/cover/6.jpg | Bin 0 -> 710669 bytes .../src/components/community/user/cover/7.jpg | Bin 0 -> 181596 bytes .../components/community/user/cover/index.ts | 18 +++++++++ .../src/components/project/ProjectItem.vue | 11 +++--- spx-gui/src/components/ui/index.ts | 1 + spx-gui/src/components/ui/responsive.scss | 5 ++- spx-gui/src/components/ui/responsive.ts | 36 ++++++++++++++++++ spx-gui/src/pages/community/home.vue | 16 +++++--- spx-gui/src/pages/community/project.vue | 21 +++++----- spx-gui/src/pages/community/search.vue | 17 +++++---- .../src/pages/community/user/followers.vue | 2 +- .../src/pages/community/user/following.vue | 2 +- spx-gui/src/pages/community/user/likes.vue | 17 +++++---- spx-gui/src/pages/community/user/overview.vue | 19 +++++---- spx-gui/src/pages/community/user/projects.vue | 19 ++++----- 24 files changed, 150 insertions(+), 78 deletions(-) delete mode 100644 spx-gui/src/components/community/user/cover.jpg create mode 100644 spx-gui/src/components/community/user/cover/1.jpg create mode 100644 spx-gui/src/components/community/user/cover/2.jpg create mode 100644 spx-gui/src/components/community/user/cover/3.jpg create mode 100644 spx-gui/src/components/community/user/cover/4.jpg create mode 100644 spx-gui/src/components/community/user/cover/5.jpg create mode 100644 spx-gui/src/components/community/user/cover/6.jpg create mode 100644 spx-gui/src/components/community/user/cover/7.jpg create mode 100644 spx-gui/src/components/community/user/cover/index.ts create mode 100644 spx-gui/src/components/ui/responsive.ts diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue index b30ab0ff..68f38c67 100644 --- a/spx-gui/src/components/community/ProjectsSection.vue +++ b/spx-gui/src/components/community/ProjectsSection.vue @@ -1,7 +1,7 @@ @@ -36,6 +38,7 @@ defineProps<{ linkTo?: string queryRet: QueryRet context: Context + numInRow: number }>() @@ -71,14 +74,14 @@ defineProps<{ } } -.projects { - padding: 20px 0; - margin-bottom: 12px; +.projects-wrapper { + margin: 8px 0 32px; position: relative; +} - display: flex; - overflow: hidden; - align-items: center; +.projects { + display: grid; + grid-template-columns: repeat(var(--project-num-in-row), 1fr); gap: 20px; } @@ -91,10 +94,11 @@ defineProps<{ font-size: 16px; line-height: 26px; } + .projects-wrapper { + margin: 8px 0 16px; + } .projects { gap: 16px; - padding: 8px 0; - margin-bottom: 24px; } } diff --git a/spx-gui/src/components/community/user/UserHeader.vue b/spx-gui/src/components/community/user/UserHeader.vue index a38b9142..d4659ca6 100644 --- a/spx-gui/src/components/community/user/UserHeader.vue +++ b/spx-gui/src/components/community/user/UserHeader.vue @@ -8,6 +8,7 @@ import FollowButton from './FollowButton.vue' import UserJoinedAt from './UserJoinedAt.vue' import EditProfileModal from './EditProfileModal.vue' import { useMessageHandle } from '@/utils/exception' +import { getCoverImgUrl } from './cover' const props = defineProps<{ user: User @@ -18,6 +19,7 @@ const emit = defineEmits<{ }>() const isCurrentUser = computed(() => props.user.username === useUserStore().userInfo()?.name) +const coverImgUrl = computed(() => getCoverImgUrl(props.user.username)) const invokeEditProfileModal = useModal(EditProfileModal) @@ -32,7 +34,7 @@ const handleEditProfile = useMessageHandle( - +
    @@ -60,7 +60,7 @@ import { } from '@/utils/route' import { useQuery } from '@/utils/exception' import { Visibility, listProject, ownerAll, type ListProjectParams } from '@/apis/project' -import { UISelect, UISelectOption, UIPagination } from '@/components/ui' +import { UISelect, UISelectOption, UIPagination, useResponsive } from '@/components/ui' import ListResultWrapper from '@/components/common/ListResultWrapper.vue' import CenteredWrapper from '@/components/community/CenteredWrapper.vue' import CommunityHeader from '@/components/community/CommunityHeader.vue' @@ -68,7 +68,9 @@ import ProjectItem from '@/components/project/ProjectItem.vue' const keyword = useRouteQueryParamStr('q', '') -const pageSize = 8 // 2 rows, TODO: responsive layout +const isDesktopLarge = useResponsive('desktop-large') +const numInRow = computed(() => (isDesktopLarge.value ? 5 : 4)) +const pageSize = computed(() => numInRow.value * 2) const page = useRouteQueryParamInt('p', 1) enum Order { @@ -81,13 +83,13 @@ const order = useRouteQueryParamStrEnum('o', Order, Order.RecentlyUpdated, (kvs) p: null })) -const pageTotal = computed(() => Math.ceil((queryRet.data.value?.total ?? 0) / pageSize)) +const pageTotal = computed(() => Math.ceil((queryRet.data.value?.total ?? 0) / pageSize.value)) const listParams = computed(() => { const p: ListProjectParams = { visibility: Visibility.Public, owner: ownerAll, - pageSize, + pageSize: pageSize.value, pageIndex: page.value } if (keyword.value !== '') p.keyword = keyword.value @@ -154,9 +156,8 @@ const titleForNoResult = computed(() => ({ } .projects { - display: flex; - flex-wrap: wrap; - align-content: flex-start; + display: grid; + grid-template-columns: repeat(var(--project-num-in-row), 1fr); gap: 20px; } diff --git a/spx-gui/src/pages/community/user/followers.vue b/spx-gui/src/pages/community/user/followers.vue index b51e973c..2d1ae8c2 100644 --- a/spx-gui/src/pages/community/user/followers.vue +++ b/spx-gui/src/pages/community/user/followers.vue @@ -35,7 +35,7 @@ const queryRet = useQuery( - +
    diff --git a/spx-gui/src/pages/community/user/following.vue b/spx-gui/src/pages/community/user/following.vue index ecfd26bf..8fad24ce 100644 --- a/spx-gui/src/pages/community/user/following.vue +++ b/spx-gui/src/pages/community/user/following.vue @@ -35,7 +35,7 @@ const queryRet = useQuery( - +
    diff --git a/spx-gui/src/pages/community/user/likes.vue b/spx-gui/src/pages/community/user/likes.vue index 94fbf008..d1574572 100644 --- a/spx-gui/src/pages/community/user/likes.vue +++ b/spx-gui/src/pages/community/user/likes.vue @@ -3,7 +3,7 @@ import { computed } from 'vue' import { useRouteQueryParamInt } from '@/utils/route' import { useQuery } from '@/utils/exception' import { Visibility, listProject, ownerAll } from '@/apis/project' -import { UIPagination } from '@/components/ui' +import { UIPagination, useResponsive } from '@/components/ui' import ListResultWrapper from '@/components/common/ListResultWrapper.vue' import UserContent from '@/components/community/user/content/UserContent.vue' import ProjectItem from '@/components/project/ProjectItem.vue' @@ -12,9 +12,11 @@ const props = defineProps<{ name: string }>() -const pageSize = 6 // 2 rows, TODO: responsive layout +const isDesktopLarge = useResponsive('desktop-large') +const numInRow = computed(() => (isDesktopLarge.value ? 5 : 4)) +const pageSize = computed(() => numInRow.value * 2) const page = useRouteQueryParamInt('p', 1) -const pageTotal = computed(() => Math.ceil((queryRet.data.value?.total ?? 0) / pageSize)) +const pageTotal = computed(() => Math.ceil((queryRet.data.value?.total ?? 0) / pageSize.value)) const queryRet = useQuery( () => @@ -23,7 +25,7 @@ const queryRet = useQuery( owner: ownerAll, // TODO: check order here liker: props.name, - pageSize, + pageSize: pageSize.value, pageIndex: page.value }), { @@ -34,7 +36,7 @@ const queryRet = useQuery(