From c5cf823b0e29fda5fe3a44e0c6ffc0936594ea95 Mon Sep 17 00:00:00 2001
From: ShineTomorrow <beheroto@gmail.com>
Date: Sat, 7 Jan 2023 03:20:36 +0800
Subject: [PATCH] :sparkles: feat(project): add confirm component function

---
 src/api/pexel.js                              |   7 +
 src/constants/index.js                        |  38 ++++++
 src/directives/modules/lazy.js                |  33 +++--
 src/libs/Button/index.vue                     |   1 +
 src/libs/Confirm/index.js                     |  43 ++++++
 src/libs/Confirm/index.vue                    | 128 ++++++++++++++++++
 src/libs/index.js                             |   2 +
 src/store/getters.js                          |   1 +
 src/store/modules/app.js                      |   6 +
 src/styles/index.scss                         |   8 ++
 .../components/header/search/history.vue      |   9 +-
 .../layout/components/header/search/index.vue |   5 +
 .../layout/components/header/search/theme.vue |  72 ++++++++++
 src/views/main/components/list/index.vue      |  10 +-
 src/views/main/components/list/item.vue       |   5 +-
 15 files changed, 354 insertions(+), 14 deletions(-)
 create mode 100644 src/libs/Confirm/index.js
 create mode 100644 src/libs/Confirm/index.vue
 create mode 100644 src/views/layout/components/header/search/theme.vue

diff --git a/src/api/pexel.js b/src/api/pexel.js
index cb3921d..c48ffa6 100644
--- a/src/api/pexel.js
+++ b/src/api/pexel.js
@@ -19,3 +19,10 @@ export const getHint = (q) => {
         },
     });
 };
+
+//获取推荐主题
+export const getThemes = () => {
+    return request({
+        url: '/thems',
+    });
+};
diff --git a/src/constants/index.js b/src/constants/index.js
index 9c08208..f085c16 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -128,3 +128,41 @@ export const CATEGORY_NOMAR_DATA = [
     { id: 'sports', name: '运动', urlname: 'sports' },
     { id: 'funny', name: '搞笑', urlname: 'funny' },
 ];
+
+export const THEME_NOMAR_DATA = [
+    {
+        id: 'Art',
+        photo: 'https://images.pexels.com/photos/9890370/pexels-photo-9890370.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=250&w=360',
+        title: '艺术',
+    },
+    {
+        id: 'black theme',
+        photo: 'https://images.pexels.com/photos/1356300/pexels-photo-1356300.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=250&w=360',
+        title: '黑色',
+    },
+    {
+        id: 'cute background',
+        photo: 'https://images.pexels.com/photos/7267852/pexels-photo-7267852.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=250&w=360',
+        title: '可爱背景',
+    },
+    {
+        id: 'Like a breath of fresh air',
+        photo: 'https://images.pexels.com/photos/7412111/pexels-photo-7412111.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=250&w=360',
+        title: '小清新',
+    },
+    {
+        id: 'green',
+        photo: 'https://images.pexels.com/photos/8117889/pexels-photo-8117889.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=250&w=360',
+        title: '绿色',
+    },
+    {
+        id: 'Happy Feet',
+        photo: 'https://images.pexels.com/photos/631988/pexels-photo-631988.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=250&w=360',
+        title: '快乐',
+    },
+    {
+        id: 'Botany',
+        photo: 'https://images.pexels.com/photos/212940/pexels-photo-212940.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=250&w=360',
+        title: '植物',
+    },
+];
diff --git a/src/directives/modules/lazy.js b/src/directives/modules/lazy.js
index 455b56c..4f370dc 100644
--- a/src/directives/modules/lazy.js
+++ b/src/directives/modules/lazy.js
@@ -2,18 +2,29 @@
  * 图片懒加载
  */
 import { useIntersectionObserver } from '@vueuse/core';
+
+const handleLazy = (el) => {
+    const imgSrc = el.dataset.src ? el.dataset.src : el.src;
+    if (el.src) {
+        el.src = '';
+    }
+    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
+        if (isIntersecting) {
+            el.src = imgSrc;
+            // 停止监听
+            stop();
+        }
+    });
+};
 export default {
     mounted(el) {
-        const imgSrc = el.dataset.src ? el.dataset.src : el.src;
-        if (el.src) {
-            el.src = '';
-        }
-        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
-            if (isIntersecting) {
-                el.src = imgSrc;
-                // 停止监听
-                stop();
-            }
-        });
+        handleLazy(el);
+    },
+    updated(el, binding, vnode, prevVnode) {
+        if (!(vnode.props.src || vnode.props['data-src'])) return;
+        const newSrc = vnode.props['data-src'] || vnode.props.src;
+        const preSrc = prevVnode.props['data-src'] || prevVnode.props.src;
+        if (newSrc === preSrc) return;
+        handleLazy(el);
     },
 };
diff --git a/src/libs/Button/index.vue b/src/libs/Button/index.vue
index adc4b15..8c54a48 100644
--- a/src/libs/Button/index.vue
+++ b/src/libs/Button/index.vue
@@ -64,6 +64,7 @@ const sizeEnum = {
 </script>
 
 <script setup>
+import SvgIcon from '../SvgIcon/index.vue';
 /**
  * 1. 构建type 风格  和 size 大小可选项
  * 2. 通过props 控制按钮
diff --git a/src/libs/Confirm/index.js b/src/libs/Confirm/index.js
new file mode 100644
index 0000000..bd9b886
--- /dev/null
+++ b/src/libs/Confirm/index.js
@@ -0,0 +1,43 @@
+import { h, render } from 'vue';
+import confirmComponent from './index.vue';
+
+/**
+ * 展示confirm
+ * @param {*} title 标题
+ * @param {*} content 内容
+ * @param {*} cancelText 取消按钮文本
+ * @param {*} confirmText 确定按钮文本
+ */
+export const Confirm = (title, content, cancleText, confirmText) => {
+    return new Promise((resolve, reject) => {
+        if (title && !content) {
+            content = title;
+            title = '';
+        }
+
+        const cancleHandle = () => {
+            reject(new Error('取消按钮点击'));
+        };
+        const confirmHandle = () => {
+            resolve();
+        };
+        // 3. 取消渲染
+        const close = () => {
+            // 把渲染的vnode去掉
+            render(null, document.body);
+        };
+
+        // 1.生成vnode
+        const vnode = h(confirmComponent, {
+            title,
+            content,
+            cancleText,
+            confirmText,
+            cancleHandle,
+            confirmHandle,
+            close,
+        });
+        // 2.渲染
+        render(vnode, document.body);
+    });
+};
diff --git a/src/libs/Confirm/index.vue b/src/libs/Confirm/index.vue
new file mode 100644
index 0000000..ee2d80f
--- /dev/null
+++ b/src/libs/Confirm/index.vue
@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <transition name="fade">
+            <div
+                v-if="isVisible"
+                class="w-screen h-screen bg-zinc-900/80 z-40 fixed left-0 top-0"
+                @click="close"
+            ></div>
+        </transition>
+        <transition name="up" mode="">
+            <div
+                v-if="isVisible"
+                class="w-[80%] fixed left-0 right-0 m-auto top-1/3 z-50 px-2 py-1.5 rounded-sm border dark:border-zinc-600 cursor-pointer bg-white dark:bg-zinc-800 xl:w-[35%]"
+            >
+                <div
+                    class="text-lg font-bold text-zinc-900 dark:text-zinc-200 mb-2"
+                >
+                    {{ title }}
+                </div>
+                <div class="text-base text-zinc-900 dark:text-zinc-200 mb-2">
+                    {{ content }}
+                </div>
+                <div class="flex justify-end">
+                    <HButton type="info" class="mr-2" @click="onCancelClick">
+                        {{ cancleText }}
+                    </HButton>
+                    <HButton type="primary" @click="onConfirmClick">
+                        {{ confirmText }}
+                    </HButton>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script setup>
+// 在方法调用的组件中，需要主动导入组件
+import { ref, onMounted } from 'vue';
+import HButton from '../button/index.vue';
+
+const props = defineProps({
+    // 标题
+    title: {
+        type: String,
+    },
+    // 描述
+    content: {
+        type: String,
+        required: true,
+    },
+    // 取消按钮的文本
+    cancleText: {
+        type: String,
+        default: '取消',
+    },
+    // 确定按钮的文本
+    confirmText: {
+        type: String,
+        default: '确定',
+    },
+    // 取消按钮的事件
+    cancleHandle: {
+        type: Function,
+    },
+    // 确定按钮的事件
+    confirmHandle: {
+        type: Function,
+    },
+    // 关闭的回调
+    close: {
+        type: Function,
+    },
+});
+
+const isVisible = ref(false);
+// 状态驱动样式
+const duration = '0.5s';
+const show = () => {
+    isVisible.value = true;
+};
+/**
+ * confirm 关闭，保留动画执行时长
+ */
+const close = () => {
+    isVisible.value = false;
+    setTimeout(() => {
+        props.close && props.close();
+    }, parseInt(duration.replace('0.', '').replace('s', '')) * 100);
+};
+const onCancelClick = () => {
+    props.cancleHandle && props.cancleHandle();
+    close();
+};
+const onConfirmClick = () => {
+    props.confirmHandle && props.confirmHandle();
+    close();
+};
+
+/**
+ * 页面构建完成之后，执行。保留动画
+ */
+onMounted(() => {
+    show();
+});
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: all v-bind(duration);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.up-enter-active,
+.up-leave-active {
+    transition: all v-bind(duration);
+}
+
+.up-enter-from,
+.up-leave-to {
+    opacity: 0;
+    transform: translate3d(0, 20px, 0);
+}
+</style>
diff --git a/src/libs/index.js b/src/libs/index.js
index 78c7da8..e6fed66 100644
--- a/src/libs/index.js
+++ b/src/libs/index.js
@@ -1,5 +1,7 @@
 import { defineAsyncComponent } from 'vue';
 
+export { Confirm } from '@/libs/Confirm/index.js';
+
 export default {
     install(app) {
         // 获取当前路径任意文件夹下的 组件
diff --git a/src/store/getters.js b/src/store/getters.js
index ecd729d..78b3ec7 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -9,4 +9,5 @@ export default {
         return index;
     },
     historys: (state) => state.search.historys,
+    searchText: (state) => state.app.searchText,
 };
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 534b225..7f6bf5e 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -5,11 +5,17 @@ export default {
     state: {
         // 当前选中的分类
         currentCategory: ALL_CATEGORY_ITEM,
+
+        // 搜索文本
+        searchText: '',
     },
     mutations: {
         changeCurrentCategory(state, newCategory) {
             state.currentCategory = newCategory;
         },
+        changeSearchText(state, newText) {
+            state.searchText = newText;
+        },
     },
     actions: {},
 };
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2b75b09..9d70550 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -8,3 +8,11 @@
   transform: translateY(-50%);
   top: 50%;
 }
+.pcenterXY {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
diff --git a/src/views/layout/components/header/search/history.vue b/src/views/layout/components/header/search/history.vue
index 4da4cb2..cea03d9 100644
--- a/src/views/layout/components/header/search/history.vue
+++ b/src/views/layout/components/header/search/history.vue
@@ -29,11 +29,18 @@
 
 <script setup>
 import { useStore } from 'vuex';
+import { Confirm } from '@/libs';
 
 const emits = defineEmits(['onItemClick']);
 const store = useStore();
 const onDeleteAllClick = () => {
-    store.commit('search/deleteAllHistory');
+    Confirm('你要删除所有记录吗')
+        .then(() => {
+            store.commit('search/deleteAllHistory');
+        })
+        .catch(() => {
+            console.log('[ 前取消 ]');
+        });
 };
 const onDeleteClick = (index) => {
     store.commit('search/deleteHistory', index);
diff --git a/src/views/layout/components/header/search/index.vue b/src/views/layout/components/header/search/index.vue
index 919d260..38a429a 100644
--- a/src/views/layout/components/header/search/index.vue
+++ b/src/views/layout/components/header/search/index.vue
@@ -12,6 +12,8 @@
                         v-show="!inputValue"
                         @on-item-click="onSearchHandle"
                     />
+                    <!-- 主题推荐 -->
+                    <Theme v-show="!inputValue" />
                 </div>
             </template>
         </Search>
@@ -21,6 +23,7 @@
 <script setup>
 import Hint from './hint.vue';
 import History from './history.vue';
+import Theme from './theme.vue';
 import { watch } from 'vue';
 
 import { ref } from 'vue';
@@ -32,6 +35,8 @@ const onSearchHandle = (value) => {
     inputValue.value = value;
     if (value) {
         store.commit('search/addHistory', value);
+        // 触发 searchText 的值变化
+        store.commit('app/changeSearchText', value);
     }
 };
 
diff --git a/src/views/layout/components/header/search/theme.vue b/src/views/layout/components/header/search/theme.vue
new file mode 100644
index 0000000..1c5ca6d
--- /dev/null
+++ b/src/views/layout/components/header/search/theme.vue
@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <div class="text-xs mb-1 text-zinc-400">热门精选</div>
+        <div class="flex h-[140px] w-full" v-if="themeData.list.length">
+            <div
+                class="relative rounded w-[260px] cursor-pointer mr-1.5"
+                :style="{
+                    backgroundColor: randomRGB(),
+                }"
+            >
+                <img
+                    v-lazy
+                    class="w-full h-full object-cover rounded"
+                    :data-src="themeData.big.photo"
+                />
+                <p
+                    class="absolute bottom-0 left-0 w-full h-[45%] flex items-center backdrop-blur rounded px-1 text-white text-xs duration-300 hover:backdrop-blur-0"
+                >
+                    # {{ themeData.big.title }}
+                </p>
+            </div>
+            <div class="flex flex-wrap justify-between max-w-[830px]">
+                <div
+                    v-for="item in themeData.list"
+                    :key="item.id"
+                    class="h-[45%] w-[260px] text-white text-sm relative ml-1.5 mb-1.5 rounded overflow-hidden"
+                >
+                    <img
+                        v-lazy
+                        class="w-full h-full object-cover rounded"
+                        :data-src="item.photo"
+                    />
+                    <p
+                        class="backdrop-blur absolute top-0 bottom-0 rounded w-full h-full flex items-center px-1 cursor-pointer duration-300 hover:backdrop-blur-0"
+                    >
+                        # {{ item.title }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { getThemes } from '@/api/pexel.js';
+import { ref } from 'vue';
+import { THEME_NOMAR_DATA } from '@/constants';
+import { randomRGB } from '@/utils/color.js';
+
+const themeData = ref({
+    big: {},
+    list: [],
+});
+const getThemeData = async () => {
+    try {
+        const { themes } = await getThemes();
+        themeData.value = {
+            big: themes.length > 1 ? themes[0] : THEME_NOMAR_DATA[0],
+            list:
+                themes.length > 1 ? themes.slice(1) : THEME_NOMAR_DATA.slice(1),
+        };
+    } catch (error) {
+        themeData.value = {
+            big: THEME_NOMAR_DATA[0],
+            list: THEME_NOMAR_DATA.slice(1),
+        };
+    }
+};
+getThemeData();
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/main/components/list/index.vue b/src/views/main/components/list/index.vue
index 36f2a7b..716b390 100644
--- a/src/views/main/components/list/index.vue
+++ b/src/views/main/components/list/index.vue
@@ -79,13 +79,21 @@ const restQuery = (newQuery) => {
 watch(
     () => store.getters.currentCategory,
     (currentCategory) => {
-        console.log('[ currentCategory ]', currentCategory);
         restQuery({
             page: 1,
             query: currentCategory.urlname,
         });
     }
 );
+watch(
+    () => store.getters.searchText,
+    (value) => {
+        restQuery({
+            page: 1,
+            query: value,
+        });
+    }
+);
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/main/components/list/item.vue b/src/views/main/components/list/item.vue
index dfada80..3a8b580 100644
--- a/src/views/main/components/list/item.vue
+++ b/src/views/main/components/list/item.vue
@@ -8,7 +8,9 @@
         >
             <img
                 v-lazy
-                :data-src="data?.src?.medium"
+                :data-src="
+                    isMobileTerminal ? data?.src?.medium : data?.src?.large
+                "
                 class="w-full bg-transparent"
                 :style="{
                     height: `${(width / data.width) * data.height}px`,
@@ -62,6 +64,7 @@
 
 <script setup>
 import { randomRGB } from '@/utils/color';
+import { isMobileTerminal } from '@/utils/flexible.js';
 defineProps({
     data: {
         type: Object,