✨ feat(project): add pins router and as components

src/api/pexel.js

@@ -4,6 +4,7 @@ const request = new Request();
 
 //获取分类列表
 export const getListData = (data) => {
+    data.locale = 'zh-CN';
     return request({
         url: '/search',
         params: data,
@@ -26,3 +27,14 @@ export const getThemes = () => {
         url: '/thems',
     });
 };
+
+//获取推荐主题
+export const getPhotoById = (id) => {
+    const language = 'zh-CN';
+    return request({
+        url: `/photos/${id}`,
+        params: {
+            locale: language,
+        },
+    });
+};

src/libs/NavBar/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div
+        :class="[sticky ? ' sticky top-0 left-0' : 'relative']"
+        class="w-full h-5 border-b flex items-center z-10 bg-white dark:bg-zinc-800 border-b-zinc-200 dark:border-b-zinc-700"
+    >
+        <div
+            class="w-5 h-full absolute left-0 top-0 flex items-center justify-center cursor-pointer"
+            @click="onLeftClick"
+        >
+            <slot name="left">
+                <SvgIcon
+                    name="back"
+                    class="w-2 h-2"
+                    fillClass="fill-zinc-900 dark:fill-zinc-200"
+                />
+            </slot>
+        </div>
+        <div
+            class="h-full flex items-center justify-center m-auto font-bold text-base text-zinc-900 dark:text-zinc-200"
+        >
+            <slot></slot>
+        </div>
+        <div
+            class="w-5 h-full absolute right-0 flex items-center justify-center"
+            @click="onRightClick"
+        >
+            <slot name="right"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+
+const props = defineProps({
+    sticky: {
+        type: Boolean,
+        default: true,
+    },
+    onLeftClick: {
+        type: Function,
+    },
+    onRightClick: {
+        type: Function,
+    },
+});
+
+const router = useRouter();
+const onLeftClick = () => {
+    if (props.onLeftClick) {
+        props.onLeftClick();
+        return;
+    } else {
+        router.back();
+    }
+};
+const onRightClick = () => {
+    props.onRightClick && props.onRightClick();
+};
+</script>
+
+<style lang="scss" scoped></style>

src/router/index.js

@@ -1,11 +1,11 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 import { isMobileTerminal } from '@/utils/flexible';
-import mobileRouter from './modules/mobile-router';
-import pcRouter from './modules/pc-router';
+import mobileRouter from './modules/mobile-routes';
+import pcRouter from './modules/pc-routes';
 
 // 创建vue-router实例
 const router = createRouter({
-    history: createWebHashHistory(),
+    history: createWebHistory(),
     routes: isMobileTerminal.value ? mobileRouter : pcRouter,
 });
 

src/router/modules/mobile-router.js → src/router/modules/mobile-routes.js

@@ -4,4 +4,9 @@ export default [
         name: 'home',
         component: () => import('@/views/main/index.vue'),
     },
+    {
+        path: '/pins/:id',
+        name: 'pins',
+        component: () => import('@/views/pins/index.vue'),
+    },
 ];

src/router/modules/pc-router.js → src/router/modules/pc-routes.js

@@ -11,4 +11,9 @@ export default [
             },
         ],
     },
+    {
+        path: '/pins/:id',
+        name: 'pins',
+        component: () => import('@/views/pins/index.vue'),
+    },
 ];

src/views/main/components/list/index.vue

@@ -25,7 +25,7 @@
             @enter="onEnter"
             @leave="onLeave"
         >
-            <Pins v-show="isPinVisible" :id="currentPin.id" />
+            <Pins v-if="isPinVisible" :currentPin="currentPin" />
         </transition>
     </div>
 </template>
@@ -111,12 +111,13 @@ watch(
 
 const isPinVisible = ref(false);
 const currentPin = ref({});
-const onPinClick = (data) => {
-    console.log('[ data ]', data);
+const currentLocation = ref({});
+const onPinClick = ({ data, location }) => {
     if (!data.id) return;
     // 修改地址 不会刷新
     history.pushState(null, null, `/pins/${data.id}`);
     currentPin.value = data;
+    currentLocation.value = location;
     isPinVisible.value = true;
 };
 // 监听浏览器回退按钮事件
@@ -129,8 +130,8 @@ const onBeforeEnd = (el) => {
         scaleX: 0,
         scaleY: 0,
         transformOrigin: '0 0',
-        translateX: currentPin.value.location?.translateX,
-        translateY: currentPin.value.location?.translateY,
+        translateX: currentLocation.value?.translateX,
+        translateY: currentLocation.value?.translateY,
         opacity: 0,
     });
 };
@@ -150,8 +151,8 @@ const onLeave = (el, done) => {
         duration: 0.3,
         scaleX: 0,
         scaleY: 0,
-        translateX: currentPin.value.location?.translateX,
-        translateY: currentPin.value.location?.translateY,
+        translateX: currentLocation.value?.translateX,
+        translateY: currentLocation.value?.translateY,
         opacity: 1,
         onComplete: done,
     });

src/views/main/components/list/item.vue

@@ -11,7 +11,7 @@
                 ref="imgTarget"
                 v-lazy
                 :data-src="
-                    isMobileTerminal ? data?.src?.medium : data?.src?.large
+                    isMobileTerminal ? data?.src?.large : data?.src?.large2
                 "
                 class="w-full bg-transparent"
                 :style="{
@@ -115,7 +115,7 @@ const imgContainerCenter = computed(() => {
 // 进入详情
 const onPinClick = () => {
     emits('click', {
-        id: props.data.id,
+        data: props.data,
         location: imgContainerCenter.value,
     });
 };

src/views/pins/components/pins.vue

@@ -1,16 +1,113 @@
 <template>
-    <div class="fixed top-0 left-0 w-screen h-screen text-xl bg-slate-200 z-20">
-        {{ id }}
+    <div
+        class="fixed top-0 left-0 w-screen h-screen text-xl z-20 backdrop-blur-4xl bg-transparent pb-2 overflow-y-auto xl:p-2 scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent"
+    >
+        <NavBar v-if="isMobileTerminal">
+            {{ photo.alt }}
+
+            <template #right>
+                <SvgIcon
+                    name="share"
+                    class="w-3 h-3"
+                    fillClass="fill-zinc-900 dark:fill-zinc-200"
+                />
+            </template>
+        </NavBar>
+        <!-- pc端 -->
+        <div
+            v-else
+            class="w-3.5 h-3.5 cursor-pointer duration-300 flex justify-center items-center bg-white hover:bg-main/70 absolute right-2 top-2 rounded-full shadow-sm group"
+        >
+            <SvgIcon
+                name="close"
+                class="w-1.5 h-1.5"
+                fillClass="fill-zinc-400 group-hover:fill-zinc-100 dark:fill-zinc-200"
+                @click="onClose"
+            />
+        </div>
+
+        <!-- 内容 -->
+        <div
+            v-if="photo.alt"
+            class="xl:w-[80%] xl:h-full xl:m-auto xl:rounded-lg xl:flex xl:justify-center xl:items-center"
+        >
+            <img
+                v-lazy
+                :data-src="
+                    isMobileTerminal ? photo.src?.large : photo.src?.large2
+                "
+                class="w-screen mb-2 xl:w-3/5 xl:h-full xl:rounded-tl-lg xl:rounded-bl-lg xl:mb-0 xl:object-cover"
+            />
+            <div
+                class="xl:w-2/5 xl:h-full xl:bg-white xl:dark:bg-zinc-900 xl:rounded-tr-lg xl:rounded-br-lg xl:p-3"
+            >
+                <!-- pc下分享 收藏 -->
+                <div v-if="!isMobileTerminal" class="flex justify-between mb-2">
+                    <SvgIcon
+                        name="share"
+                        class="w-4 h-4 p-1 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 duration-300 rounded"
+                    />
+                    <HButton
+                        type="info"
+                        icon="heart"
+                        iconClass="fill-zinc-900 dark:fill-zinc-200"
+                    />
+                </div>
+                <!-- 标题 -->
+                <p
+                    class="text-base text-zinc-900 dark:text-zinc-200 ml-1 font-bold xl:text-xl xl:mb-5"
+                >
+                    {{ photo.alt }}
+                </p>
+                <!-- 作者 -->
+                <div class="flex items-center mt-1 px-1">
+                    <img
+                        v-lazy
+                        :data-src="
+                            isMobileTerminal
+                                ? photo.src?.medium
+                                : photo.src?.large
+                        "
+                        class="h-3 w-3 rounded-full"
+                    />
+                    <span
+                        class="text-base text-zinc-900 dark:text-zinc-200 ml-1"
+                        >{{ photo.photographer }}</span
+                    >
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup>
-defineProps({
-    id: {
-        type: [String, Number],
+import { isMobileTerminal } from '@/utils/flexible.js';
+import { ref } from 'vue';
+import { getPhotoById } from '@/api/pexel.js';
+import { useRouter } from 'vue-router';
+const props = defineProps({
+    currentPin: {
+        type: Object,
         required: true,
     },
 });
+
+const photo = ref(props.currentPin);
+const getPhotoData = async () => {
+    try {
+        const res = await getPhotoById(photo.value.id);
+        photo.value = res;
+    } catch (error) {
+        console.log('[ error ]', error);
+    }
+};
+getPhotoData();
+
+const router = useRouter();
+const onClose = () => {
+    photo.value = {};
+    router.back();
+};
 </script>
 
 <style lang="scss" scoped></style>

src/views/pins/index.vue

@@ -1,13 +1,11 @@
 <template>
-    <div>
-        p
+    <div class="w-full h-full bg-zinc-200 dark:bg-zinc-800">
+        <Pins :currentPin="{ id: $route.params.id }" />
     </div>
 </template>
 
 <script setup>
-
+import Pins from './components/pins.vue';
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

tailwind.config.cjs

@@ -48,6 +48,9 @@ module.exports = {
             variants: {
                 scrollbar: ['dark'],
             },
+            backdropBlur: {
+                '4xl': '240px',
+            },
         },
     },
     plugins: [require('tailwind-scrollbar')],