✨ feat(menu): add pc menu and mobile menu

package.json

@@ -13,7 +13,8 @@
     "axios": "^1.2.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vuex": "^4.1.0"
+    "vuex": "^4.1.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",

src/constants/index.js

@@ -6,9 +6,128 @@ export const MC_ICODE = '59cfb50c02d43309f058bb1fe0a8e3fc';
 // pc设备指定宽度
 export const PC_DEVICE_WIDTH = 1280;
 
+export const ALL_CATEGORY_ITEM = {
+    id: 'all',
+    name: '全部',
+    urlname: 'random',
+};
+
 // 极简白
 export const THEME_LIGHT = 'THEME_LIGHT';
 // 极夜黑
 export const THEME_DARK = 'THEME_DARK';
 // 跟随系统
 export const THEME_SYSTEM = 'THEME_SYSTEM';
+
+// 初始 category 数据
+export const CATEGORY_NOMAR_DATA = [
+    ALL_CATEGORY_ITEM,
+    {
+        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' },
+];

src/libs/Popup/index.vue

@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <teleport to="body">
+            <transition name="fade" mode="">
+                <div
+                    v-show="isVisable"
+                    class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
+                    @click="onMaskClick"
+                >
+                    蒙版
+                </div>
+            </transition>
+
+            <transition name="popup-down-up">
+                <div
+                    v-show="isVisable"
+                    v-bind="$attrs"
+                    class="w-screen bg-white z-50 fixed bottom-0 left-0"
+                >
+                    <slot></slot>
+                </div>
+            </transition>
+        </teleport>
+    </div>
+</template>
+
+<script setup>
+import { watch } from 'vue';
+import { useScrollLock, useVModel } from '@vueuse/core';
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        required: true,
+        default: false,
+    },
+});
+defineEmits(['update:modelValue']);
+
+// 通过 useVModel 获取到响应式数据 isVisable，当 isVisable 改变时，会自动触发 update:modelValue
+const isVisable = useVModel(props);
+
+const onMaskClick = () => {
+    isVisable.value = false;
+};
+//滚动锁定
+const isLocked = useScrollLock(document.body);
+watch(
+    isVisable,
+    (value) => {
+        isLocked.value = value;
+    },
+    {
+        immediate: true,
+    }
+);
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: all 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.popup-down-up-enter-active,
+.popup-down-up-leave-active {
+    transition: all 0.3s;
+}
+.popup-down-up-enter-from,
+.popup-down-up-leave-to {
+    transform: translateY(100%);
+}
+</style>

src/main.js

@@ -1,6 +1,8 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
+import store from './store';
+
 import { useRem } from '@/utils/flexible';
 import libs from './libs';
 import './styles/index.scss';
@@ -9,4 +11,4 @@ import 'virtual:svg-icons-register';
 
 useRem();
 
-createApp(App).use(router).use(libs).mount('#app');
+createApp(App).use(router).use(store).use(libs).mount('#app');

src/router/modules/pc-router.js

@@ -3,6 +3,12 @@ export default [
         path: '/',
         name: 'pcHome',
         component: () => import('@/views/layout/index.vue'),
-        children: [],
+        children: [
+            {
+                path: '',
+                name: 'pcMain',
+                component: () => import('@/views/main/index.vue'),
+            },
+        ],
     },
 ];

src/store/getters.js

@@ -0,0 +1,3 @@
+export default {
+    categorys: (state) => state.category.categorys,
+};

src/store/index.js

@@ -0,0 +1,22 @@
+import { createStore } from 'vuex';
+import getters from './getters';
+import category from './modules/category';
+// 强制缓存
+import createPersistedstate from 'vuex-persistedstate';
+
+const store = createStore({
+    modules: {
+        category,
+    },
+    getters,
+    plugins: [
+        createPersistedstate({
+            // 指定保存的 localstorage 中的key
+            key: 'APP_KEYS',
+            // 需要保存的模块
+            paths: ['category'],
+        }),
+    ],
+});
+
+export default store;