From 9e2dca995f520fed2b885ae59e300bc4354fa2e7 Mon Sep 17 00:00:00 2001
From: ShineTomorrow <beheroto@gmail.com>
Date: Sat, 7 Jan 2023 05:36:43 +0800
Subject: [PATCH] :sparkles: feat(project): add Message fuc download fullscreen
 guide

---
 .cz-config.js                                 |  12 +-
 package-lock.json                             |  42 ++++++
 package.json                                  |   3 +
 src/libs/Button/index.vue                     |   6 +-
 src/libs/Message/index.js                     |  22 ++++
 src/libs/Message/index.vue                    | 122 ++++++++++++++++++
 src/libs/Search/index.vue                     |   2 +-
 src/libs/index.js                             |   1 +
 src/store/modules/category.js                 | 115 +----------------
 src/styles/index.scss                         |  10 ++
 .../layout/components/floating/index.vue      |  63 ++++++++-
 src/views/layout/components/floating/steps.js |  51 ++++++++
 src/views/layout/components/header/index.vue  |   8 +-
 src/views/main/components/list/item.vue       |  21 ++-
 src/views/main/index.vue                      |   4 +-
 tailwind.config.cjs                           |  15 ++-
 16 files changed, 364 insertions(+), 133 deletions(-)
 create mode 100644 src/libs/Message/index.js
 create mode 100644 src/libs/Message/index.vue
 create mode 100644 src/views/layout/components/floating/steps.js

diff --git a/.cz-config.js b/.cz-config.js
index 5d63b16..29972dd 100644
--- a/.cz-config.js
+++ b/.cz-config.js
@@ -6,21 +6,21 @@ module.exports = {
         { value: ':zap: perf', name: '⚡ perf:     性能优化' },
         {
             value: ':rocket: chore',
-            name: '🚀 chore:    构建过程或辅助工具的变动'
+            name: '🚀 chore:    构建过程或辅助工具的变动',
         },
         { value: ':tada: init', name: '🎉 init:     初始化' },
         { value: ':memo: docs', name: '📝 docs:     文档变更' },
         {
             value: ':lipstick: style',
-            name: '💄 style:    代码格式(不影响代码运行的变动)'
+            name: '💄 style:    代码格式(不影响代码运行的变动)',
         },
         {
             value: ':recycle: refactor',
-            name: '♻️ refactor: 重构(既不是增加feature，也不是修复bug)'
+            name: '♻️ refactor: 重构(既不是增加feature，也不是修复bug)',
         },
         { value: ':white_check_mark: test', name: '✅ test:     增加测试' },
         { value: ':rewind: revert', name: '⏪️ revert:   回退' },
-        { value: ':package: build', name: '📦️ build:    打包' }
+        { value: ':package: build', name: '📦️ build:    打包' },
     ],
     messages: {
         type: '请选择提交类型:',
@@ -28,10 +28,10 @@ module.exports = {
         subject: '请简要描述提交(必填):',
         body: '请输入详细描述(可选):',
         footer: '请输入要关闭的issue(可选):',
-        confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
+        confirmCommit: '确认使用以上信息提交？(y/n/e/h)',
     },
     // 跳过问题
     skipQuestions: ['body', 'footer'],
     // subject文字长度默认是72
-    subjectLimit: 72
+    subjectLimit: 100,
 };
diff --git a/package-lock.json b/package-lock.json
index 4eb9cab..602297b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@vueuse/core": "^9.10.0",
         "axios": "^1.2.2",
+        "driver.js": "^0.9.8",
+        "file-saver": "^2.0.5",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6",
         "vuex": "^4.1.0",
@@ -31,6 +33,7 @@
         "lint-staged": "^13.1.0",
         "postcss": "^8.4.20",
         "sass": "^1.57.1",
+        "tailwind-scrollbar": "^2.1.0",
         "tailwindcss": "^3.2.4",
         "vite": "^4.0.0",
         "vite-plugin-svg-icons": "^2.0.1"
@@ -3129,6 +3132,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/driver.js": {
+      "version": "0.9.8",
+      "resolved": "https://registry.npmmirror.com/driver.js/-/driver.js-0.9.8.tgz",
+      "integrity": "sha512-bczjyKdX6XmFyCDkwtRmlaORDwfBk1xXmRO0CAe5VwNQTM98aWaG2LAIiIdTe53iV/B7W5lXlIy2xYtf0JRb7Q=="
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3858,6 +3866,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
@@ -7643,6 +7656,18 @@
         "node": ">= 10"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tailwind-scrollbar/-/tailwind-scrollbar-2.1.0.tgz",
+      "integrity": "sha512-zpvY5mDs0130YzYjZKBiDaw32rygxk5RyJ4KmeHjGnwkvbjm/PszON1m4Bbt2DkMRIXlXsfNevykAESgURN4KA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "3.x"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.2.4.tgz",
@@ -10931,6 +10956,11 @@
         "is-obj": "^2.0.0"
       }
     },
+    "driver.js": {
+      "version": "0.9.8",
+      "resolved": "https://registry.npmmirror.com/driver.js/-/driver.js-0.9.8.tgz",
+      "integrity": "sha512-bczjyKdX6XmFyCDkwtRmlaORDwfBk1xXmRO0CAe5VwNQTM98aWaG2LAIiIdTe53iV/B7W5lXlIy2xYtf0JRb7Q=="
+    },
     "eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -11521,6 +11551,11 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
@@ -14493,6 +14528,13 @@
         }
       }
     },
+    "tailwind-scrollbar": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tailwind-scrollbar/-/tailwind-scrollbar-2.1.0.tgz",
+      "integrity": "sha512-zpvY5mDs0130YzYjZKBiDaw32rygxk5RyJ4KmeHjGnwkvbjm/PszON1m4Bbt2DkMRIXlXsfNevykAESgURN4KA==",
+      "dev": true,
+      "requires": {}
+    },
     "tailwindcss": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.2.4.tgz",
diff --git a/package.json b/package.json
index 4d7246a..e9dcb6b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
   "dependencies": {
     "@vueuse/core": "^9.10.0",
     "axios": "^1.2.2",
+    "driver.js": "^0.9.8",
+    "file-saver": "^2.0.5",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vuex": "^4.1.0",
@@ -32,6 +34,7 @@
     "lint-staged": "^13.1.0",
     "postcss": "^8.4.20",
     "sass": "^1.57.1",
+    "tailwind-scrollbar": "^2.1.0",
     "tailwindcss": "^3.2.4",
     "vite": "^4.0.0",
     "vite-plugin-svg-icons": "^2.0.1"
diff --git a/src/libs/Button/index.vue b/src/libs/Button/index.vue
index 8c54a48..3707787 100644
--- a/src/libs/Button/index.vue
+++ b/src/libs/Button/index.vue
@@ -11,13 +11,13 @@
         @click.stop="onClick"
     >
         <!-- loading -->
-        <SvgIcon
+        <mSvgIcon
             v-if="loading"
             name="loading"
             class="w-2 h-2 animate-spin mr-1"
         />
         <!-- icon 按钮 -->
-        <SvgIcon
+        <mSvgIcon
             v-if="icon"
             :name="icon"
             class="m-auto"
@@ -64,7 +64,7 @@ const sizeEnum = {
 </script>
 
 <script setup>
-import SvgIcon from '../SvgIcon/index.vue';
+import mSvgIcon from '../SvgIcon/index.vue';
 /**
  * 1. 构建type 风格  和 size 大小可选项
  * 2. 通过props 控制按钮
diff --git a/src/libs/Message/index.js b/src/libs/Message/index.js
new file mode 100644
index 0000000..065dc54
--- /dev/null
+++ b/src/libs/Message/index.js
@@ -0,0 +1,22 @@
+import { h, render } from 'vue';
+import messageComponent from './index.vue';
+
+export const Message = (type, content, duration = 3000) => {
+    /**
+     * 动画结束时的回调
+     */
+    const onDestroy = () => {
+        // 3. message 销毁
+        render(null, document.body);
+    };
+
+    // 1. 返回 vnode
+    const vnode = h(messageComponent, {
+        type,
+        content,
+        duration,
+        destroy: onDestroy,
+    });
+    // 2. render
+    render(vnode, document.body);
+};
diff --git a/src/libs/Message/index.vue b/src/libs/Message/index.vue
new file mode 100644
index 0000000..b8aa9c4
--- /dev/null
+++ b/src/libs/Message/index.vue
@@ -0,0 +1,122 @@
+<template>
+    <transition name="down" @after-leave="destroy">
+        <div
+            v-show="isVisable"
+            class="min-w-[420px] fixed top-[20px] left-[50%] translate-x-[-50%] z-50 flex items-center px-3 py-1.5 rounded-sm border cursor-pointer"
+            :class="styles[type].containerClass"
+        >
+            <m-svg-icon
+                :name="styles[type].icon"
+                :fillClass="styles[type].fillClass"
+                class="h-1.5 w-1.5 mr-1.5"
+            />
+            <span class="text-sm" :class="styles[type].textClass">
+                {{ content }}
+            </span>
+        </div>
+    </transition>
+</template>
+
+<script>
+import mSvgIcon from '../SvgIcon/index.vue';
+
+/**
+ * 消息类型可选项
+ */
+const typeEnum = ['success', 'warn', 'error'];
+</script>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const props = defineProps({
+    /**
+     * message 的消息类型
+     */
+    type: {
+        type: String,
+        required: true,
+        validator(val) {
+            const result = typeEnum.includes(val);
+            if (!result) {
+                throw new Error(`type 必须是 ${typeEnum.join('、')} 中的一个`);
+            }
+            return result;
+        },
+    },
+    /**
+     * 描述文本
+     */
+    content: {
+        type: String,
+        required: true,
+    },
+    /**
+     * 展示时长
+     */
+    duration: {
+        type: Number,
+    },
+    /**
+     * 关闭时的回调
+     */
+    destroy: {
+        type: Function,
+    },
+});
+
+// 样式表数据
+const styles = {
+    // 警告
+    warn: {
+        icon: 'warn',
+        fillClass: 'fill-warn-300',
+        textClass: 'text-warn-300',
+        containerClass:
+            'bg-warn-100 border-warn-200  hover:shadow-lg hover:shadow-warn-100',
+    },
+    // 错误
+    error: {
+        icon: 'error',
+        fillClass: 'fill-error-300',
+        textClass: 'text-error-300',
+        containerClass:
+            'bg-error-100 border-error-200  hover:shadow-lg hover:shadow-error-100',
+    },
+    // 成功
+    success: {
+        icon: 'success',
+        fillClass: 'fill-success-300',
+        textClass: 'text-success-300',
+        containerClass:
+            'bg-success-100 border-success-200  hover:shadow-lg hover:shadow-success-100',
+    },
+};
+
+// 控制显示处理
+const isVisable = ref(false);
+/**
+ * 保证动画展示，需要在 mounted 之后进行展示
+ */
+onMounted(() => {
+    isVisable.value = true;
+    /**
+     * 延迟时间关闭
+     */
+    setTimeout(() => {
+        isVisable.value = false;
+    }, props.duration);
+});
+</script>
+
+<style lang="scss" scoped>
+.down-enter-active,
+.down-leave-active {
+    transition: all 0.5s;
+}
+
+.down-enter-from,
+.down-leave-to {
+    opacity: 0;
+    transform: translate3d(-50%, -100px, 0);
+}
+</style>
diff --git a/src/libs/Search/index.vue b/src/libs/Search/index.vue
index 52d8e23..5a0f81c 100644
--- a/src/libs/Search/index.vue
+++ b/src/libs/Search/index.vue
@@ -41,7 +41,7 @@
             <div
                 v-if="$slots.dropdown"
                 v-show="isFocus"
-                class="max-h-[368px] w-full text-base overflow-auto bg-white dark:bg-zinc-800 absolute top-[60px] left-0 z-20 p-2 rounded border border-b-zinc-200 dark:border-zinc-600 duration-200 hover:shadow-2xl"
+                class="max-h-[368px] w-full text-base overflow-auto bg-white dark:bg-zinc-800 absolute top-[60px] left-0 z-20 p-2 rounded border border-b-zinc-200 dark:border-zinc-600 duration-200 hover:shadow-2xl scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent"
             >
                 <slot name="dropdown"></slot>
             </div>
diff --git a/src/libs/index.js b/src/libs/index.js
index e6fed66..c25ca13 100644
--- a/src/libs/index.js
+++ b/src/libs/index.js
@@ -1,6 +1,7 @@
 import { defineAsyncComponent } from 'vue';
 
 export { Confirm } from '@/libs/Confirm/index.js';
+export { Message } from '@/libs/Message/index.js';
 
 export default {
     install(app) {
diff --git a/src/store/modules/category.js b/src/store/modules/category.js
index fff466c..06a3074 100644
--- a/src/store/modules/category.js
+++ b/src/store/modules/category.js
@@ -16,120 +16,7 @@ export default {
                 const { categorys } = await getCategory();
                 context.commit('setCategorys', categorys);
             } catch (error) {
-                const res = {
-                    categorys: [
-                        {
-                            id: 'web_app_icon',
-                            name: 'UI/UX',
-                            col: 1,
-                            urlname: 'web_app_icon',
-                        },
-                        {
-                            id: 'design',
-                            name: '平面',
-                            col: 1,
-                            urlname: 'design',
-                        },
-                        {
-                            id: 'illustration',
-                            name: '插画/漫画',
-                            col: 1,
-                            urlname: 'illustration',
-                        },
-                        {
-                            id: 'photography',
-                            name: '摄影',
-                            col: 2,
-                            urlname: 'photography',
-                        },
-                        { id: 'games', name: '游戏', urlname: 'games' },
-                        { id: 'anime', name: '动漫', urlname: 'anime' },
-                        {
-                            id: 'industrial_design',
-                            name: '工业设计',
-                            col: 2,
-                            urlname: 'industrial_design',
-                        },
-                        {
-                            id: 'architecture',
-                            name: '建筑设计',
-                            urlname: 'architecture',
-                        },
-                        { id: 'art', name: '人文艺术', urlname: 'art' },
-                        {
-                            id: 'home',
-                            name: '家居/家装',
-                            col: 1,
-                            urlname: 'home',
-                        },
-                        {
-                            id: 'apparel',
-                            name: '女装/搭配',
-                            col: 1,
-                            urlname: 'apparel',
-                        },
-                        {
-                            id: 'men',
-                            name: '男士/风尚',
-                            col: 2,
-                            urlname: 'men',
-                        },
-                        {
-                            id: 'modeling_hair',
-                            name: '造型/美妆',
-                            urlname: 'modeling_hair',
-                        },
-                        {
-                            id: 'diy_crafts',
-                            name: '手工/布艺',
-                            urlname: 'diy_crafts',
-                        },
-                        {
-                            id: 'food_drink',
-                            name: '美食',
-                            urlname: 'food_drink',
-                        },
-                        {
-                            id: 'travel_places',
-                            name: '旅行',
-                            urlname: 'travel_places',
-                        },
-                        {
-                            id: 'wedding_events',
-                            name: '婚礼',
-                            col: 2,
-                            urlname: 'wedding_events',
-                        },
-                        { id: 'kids', name: '儿童', urlname: 'kids' },
-                        { id: 'pets', name: '宠物', urlname: 'pets' },
-                        { id: 'quotes', name: '美图', urlname: 'quotes' },
-                        { id: 'people', name: '明星', urlname: 'people' },
-                        { id: 'beauty', name: '美女', urlname: 'beauty' },
-                        { id: 'desire', name: '礼物', urlname: 'desire' },
-                        { id: 'geek', name: '极客', urlname: 'geek' },
-                        {
-                            id: 'data_presentation',
-                            name: '数据图',
-                            urlname: 'data_presentation',
-                        },
-                        {
-                            id: 'cars_motorcycles',
-                            name: '汽车/摩托',
-                            urlname: 'cars_motorcycles',
-                        },
-                        {
-                            id: 'film_music_books',
-                            name: '电影/图书',
-                            urlname: 'film_music_books',
-                        },
-                        { id: 'tips', name: '生活百科', urlname: 'tips' },
-                        { id: 'education', name: '教育', urlname: 'education' },
-                        { id: 'sports', name: '运动', urlname: 'sports' },
-                        { id: 'funny', name: '搞笑', urlname: 'funny' },
-                    ],
-                };
-                const { categorys } = res;
-                context.commit('setCategorys', categorys);
+                // context.commit('setCategorys', CATEGORY_NOMAR_DATA);
             }
         },
     },
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9d70550..5a4da6d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -16,3 +16,13 @@
   bottom: 0;
   margin: auto;
 }
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+}
+// 引导页bug
+div#driver-highlighted-element-stage,
+div#driver-page-overlay {
+  background: transparent !important;
+  outline: 5000px solid rgba(0, 0, 0, 0.75);
+}
diff --git a/src/views/layout/components/floating/index.vue b/src/views/layout/components/floating/index.vue
index 10eef2b..3007ad4 100644
--- a/src/views/layout/components/floating/index.vue
+++ b/src/views/layout/components/floating/index.vue
@@ -1,7 +1,66 @@
 <template>
-    <div class="fixed bottom-10 right-2">floating</div>
+    <div class="fixed bottom-10 right-2">
+        <div
+            class="guide-start w-4 h-4 mb-1 bg-white dark:bg-zinc-900 border dark:border-0 border-zinc-200 rounded-full flex justify-center items-center cursor-pointer duration-200 hover:shadow-lg group"
+            @click="onGuideClick"
+        >
+            <SvgIcon
+                name="guide"
+                class="w-2 h-2"
+                fillClass="fill-zinc-900 dark:fill-zinc-200 group-hover:fill-main"
+            />
+        </div>
+
+        <Popover class="flex items-center" placement="top-left">
+            <template #reference>
+                <div
+                    class="guide-blog w-4 h-4 mb-1 bg-white dark:bg-zinc-900 border dark:border-0 border-zinc-200 rounded-full flex justify-center items-center cursor-pointer duration-200 hover:shadow-lg group"
+                >
+                    <SvgIcon
+                        name="feedback"
+                        class="w-2 h-2"
+                        fillClass="fill-zinc-900 dark:fill-zinc-200 group-hover:fill-main"
+                    />
+                </div>
+            </template>
+            <div
+                class="flex items-center py-1 px-1.5 cursor-pointer rounded hover:bg-zinc-100/60 dark:hover:bg-zinc-800"
+            >
+                <SvgIcon
+                    name="feedback"
+                    class="w-1.5 h-1.5 mr-1"
+                    fillClass="fill-zinc-900 dark:fill-zinc-300"
+                />
+                <span class="text-zinc-800 dark:text-zinc-300 text-sm"
+                    >前往博客</span
+                >
+            </div>
+        </Popover>
+    </div>
 </template>
 
-<script setup></script>
+<script setup>
+// 引导处理
+import Driver from 'driver.js';
+import 'driver.js/dist/driver.min.css';
+import { onMounted } from 'vue';
+import steps from './steps';
+let driver = null;
+onMounted(() => {
+    driver = new Driver({
+        allowClose: false,
+        closeBtnText: '关闭',
+        nextBtnText: '下一步',
+        prevBtnText: '上一步',
+    });
+});
+
+const onGuideClick = () => {
+    // 指定步骤
+    driver.defineSteps(steps);
+    // 开始
+    driver.start();
+};
+</script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/layout/components/floating/steps.js b/src/views/layout/components/floating/steps.js
new file mode 100644
index 0000000..3f06858
--- /dev/null
+++ b/src/views/layout/components/floating/steps.js
@@ -0,0 +1,51 @@
+export default [
+    {
+        // 在哪个元素高亮
+        element: '.guide-home',
+        // 配置对象
+        popover: {
+            title: 'logo',
+            description: '点击返回首页',
+        },
+    },
+    {
+        element: '.guide-search',
+        popover: {
+            title: '搜索',
+            description: '搜索您期望的图片',
+        },
+    },
+    {
+        element: '.guide-theme',
+        popover: {
+            title: '风格',
+            description: '选择一个您喜欢的风格',
+            // 弹出的位置
+            position: 'left',
+        },
+    },
+    {
+        element: '.guide-profile',
+        popover: {
+            title: '账户',
+            description: '这里标记了您的账户信息',
+            position: 'left',
+        },
+    },
+    {
+        element: '.guide-start',
+        popover: {
+            title: '引导',
+            description: '这里可再次查看引导信息',
+            position: 'left',
+        },
+    },
+    {
+        element: '.guide-blog',
+        popover: {
+            title: '博客',
+            description: '这个我的个人博客，欢迎光临',
+            position: 'left',
+        },
+    },
+];
diff --git a/src/views/layout/components/header/index.vue b/src/views/layout/components/header/index.vue
index 3cb7f0b..7ed5d09 100644
--- a/src/views/layout/components/header/index.vue
+++ b/src/views/layout/components/header/index.vue
@@ -5,13 +5,13 @@
         <div class="flex items-center">
             <img
                 v-lazy
-                class="h-4 cursor-pointer mr-2"
+                class="guide-home h-4 cursor-pointer mr-2"
                 src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"
                 @click="onToHome"
             />
-            <HeaderSearch class="mr-1" />
-            <HeaderTheme class="mr-1" />
-            <HeaderProfile />
+            <HeaderSearch class="guide-search mr-1" />
+            <HeaderTheme class="guide-theme mr-1" />
+            <HeaderProfile class="guide-profile" />
         </div>
     </div>
 </template>
diff --git a/src/views/main/components/list/item.vue b/src/views/main/components/list/item.vue
index 3a8b580..9e25c27 100644
--- a/src/views/main/components/list/item.vue
+++ b/src/views/main/components/list/item.vue
@@ -7,6 +7,7 @@
             }"
         >
             <img
+                ref="imgTarget"
                 v-lazy
                 :data-src="
                     isMobileTerminal ? data?.src?.medium : data?.src?.large
@@ -35,6 +36,7 @@
                     icon="download"
                     size="small"
                     iconClass="fill-zinc-900 dark:fill-zinc-200"
+                    @click="onDownload"
                 />
                 <!-- 全屏 -->
                 <HButton
@@ -43,6 +45,7 @@
                     icon="full"
                     size="small"
                     iconClass="fill-zinc-900 dark:fill-zinc-200"
+                    @click="onImgFullscreen"
                 />
             </div>
         </div>
@@ -65,7 +68,11 @@
 <script setup>
 import { randomRGB } from '@/utils/color';
 import { isMobileTerminal } from '@/utils/flexible.js';
-defineProps({
+import { saveAs } from 'file-saver';
+import { Message } from '@/libs';
+import { useFullscreen } from '@vueuse/core';
+import { ref } from 'vue';
+const props = defineProps({
     data: {
         type: Object,
         required: true,
@@ -74,6 +81,18 @@ defineProps({
         type: Number,
     },
 });
+
+const onDownload = () => {
+    /**
+     * 下载的图片链接
+     */
+    Message('success', '图片开始下载');
+    saveAs(props.data?.src?.original);
+};
+
+const imgTarget = ref(null);
+const { enter: onImgFullscreen } = useFullscreen(imgTarget);
+useFullscreen();
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/main/index.vue b/src/views/main/index.vue
index 681afb9..78dfaf6 100644
--- a/src/views/main/index.vue
+++ b/src/views/main/index.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="h-full overflow-auto bg-white dark:bg-zinc-800 duration-500">
+    <div
+        class="h-full overflow-auto bg-white dark:bg-zinc-800 duration-500 scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent"
+    >
         <Navigation />
         <div class="max-w-xl mx-auto relative m-1 xl:mt-4">
             <List />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f6a316f..b878b90 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -34,8 +34,21 @@ module.exports = {
             colors: {
                 main: '#f44c48',
                 'hover-main': '#f32836',
+                'success-100': '#F2F9EC',
+                'success-200': '#E4F2DB',
+                'success-300': '#7EC050',
+                'warn-100': '#FCF6ED',
+                'warn-200': '#F8ECDA',
+                'warn-300': '#DCA550',
+                'error-100': '#ED7456',
+                'error-200': '#f3471c',
+                'error-300': '#ffffff',
+            },
+
+            variants: {
+                scrollbar: ['dark'],
             },
         },
     },
-    plugins: [],
+    plugins: [require('tailwind-scrollbar')],
 };