feat:图标库

src/layouts/components/view.vue

@@ -1,13 +1,16 @@
 <template>
-    <router-view v-slot="{ Component }">
+    <router-view v-slot="{ route, Component }">
         <transition mode="out-in" name="fade-transform">
-            <keep-alive>
-                <component :is="Component" />
+            <keep-alive :exclude="exclude" :max="30">
+                <component :is="Component" :key="route.name" />
             </keep-alive>
         </transition>
     </router-view>
 </template>
 
-<script setup></script>
+<script setup>
+    const store = useStore();
+    const exclude = computed(() => store.state.layout.notKeepAliveList);
+</script>
 
 <style lang="less" scoped></style>

src/plugins/global-api.js

@@ -0,0 +1,16 @@
+import { ElMessage } from './element-plus';
+
+export const copy = (content) => {
+    const el = document.createElement('textarea');
+    el.style.position = 'absolute';
+    el.style.zIndex = '-9999';
+    el.value = content;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    el.remove();
+    ElMessage.success('复制成功');
+};
+export default (app) => {
+    app.config.globalProperties.$copy = copy;
+};

src/router/demo.js

@@ -5,17 +5,27 @@ export default [
         component: () => import('@/layouts/default.vue'),
         meta: {
             title: '组件示例',
-            icon: 'home-fill',
+            icon: 'test-tube-fill',
             layout: true,
         },
         children: [
+            {
+                path: 'icon',
+                name: 'IconDemo',
+                component: () => import('@/views/demo/iconDemo.vue'),
+                meta: {
+                    title: '图标库',
+                    icon: 'aliens-fill',
+                    keepAlive: false,
+                },
+            },
             {
                 path: 'sortable',
                 name: 'SortableTableDemo',
                 component: () => import('@/views/demo/sortableTableDemo.vue'),
                 meta: {
                     title: '拖拽排序',
-                    icon: 'home-fill',
+                    icon: 'table-2',
                 },
             },
         ],

src/router/index.js

@@ -22,7 +22,7 @@ export const globalRoutes = [
 
 // 示例模块
 import demoModule from './demo';
-export const demoRoutes = import.meta.env.DEV ? demoModule : [];
+export const demoRoutes = import.meta.env.MODE === 'development' ? demoModule : [];
 
 // 动态模块
 export const dynamicRoutes = [];
@@ -120,7 +120,7 @@ router.beforeEach(async (to, from, next) => {
 export default router;
 /**
  * 多级嵌套路由时，由于父级路由页面中没有router-view组件所以子级路由页面无法显示
- * 所以需要将路由规则展平处理让所有页面路由规则都是平级
+ * 所以需要将路由规则展平处理
  * @param {*} routes
  * @param {*} parent
  */
@@ -169,5 +169,12 @@ export const reset = (routes) => {
         ];
     }
     flatRoutes(routes).forEach(router.addRoute);
+    store.commit(
+        'layout/setNotKeepAliveList',
+        router
+            .getRoutes()
+            .filter((item) => item.meta.keepAlive === false)
+            .map((item) => item.name)
+    );
     console.info('[router] reset', router.getRoutes());
 };

src/store/modules/layout.js

@@ -8,6 +8,7 @@ const state = () => ({
     activeTab: null,
     breakcrumbList: [],
     autoRouter: false,
+    notKeepAliveList: [],
 });
 const getters = {
     asideList: (state, getters, rootState) => {
@@ -52,6 +53,7 @@ const mutations = {
     setActiveTab: (state, data) => (state.activeTab = data),
     setBreakcrumbList: (state, data) => (state.breakcrumbList = data),
     setAutoRouter: (state, data) => (state.autoRouter = data),
+    setNotKeepAliveList: (state, data) => (state.notKeepAliveList = data),
 };
 const actions = {};
 export default {

src/views/demo/iconDemo.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="icon-container">
+        <el-form inline label-width="100px">
+            <el-form-item>
+                <el-radio-group
+                    v-model="copy"
+                    button
+                    :opts="[
+                        { label: '复制代码', value: 0 },
+                        { label: '复制名称', value: 1 },
+                    ]"
+                />
+            </el-form-item>
+            <el-form-item>
+                <el-radio-group
+                    v-model="type"
+                    button
+                    :opts="[
+                        { label: 'element-plus', value: 0 },
+                        { label: 'remix-icon', value: 1 },
+                    ]"
+                />
+            </el-form-item>
+            <el-form-item label="图标名称">
+                <el-input v-model="query" />
+            </el-form-item>
+            <el-form-item label="图标尺寸">
+                <el-input-number v-model="size" :max="64" :min="16" />
+            </el-form-item>
+        </el-form>
+        <el-scrollbar>
+            <ul>
+                <li v-for="(item, index) in filterIcons" :key="index" @click="handleIcon(item)">
+                    <div class="icon">
+                        <el-icon :name="item" :size="size" />
+                    </div>
+                    <div class="name">{{ item }}</div>
+                </li>
+            </ul>
+        </el-scrollbar>
+    </div>
+</template>
+
+<script>
+    import remixIcons from '@/icons/index.json';
+    import * as icons from '@element-plus/icons';
+    export default defineComponent({
+        name: 'IconDemo',
+        setup() {
+            const { proxy } = getCurrentInstance();
+            const elementIcons = Object.entries(icons).map((item) => item[0]);
+            const state = reactive({
+                type: 0,
+                copy: 1,
+                size: 32,
+                remixIcons,
+                elementIcons,
+                query: null,
+            });
+            const filterIcons = computed(() =>
+                (state.type ? state.remixIcons : state.elementIcons).filter(
+                    (item) => !state.query || item.indexOf(state.query) !== -1
+                )
+            );
+            const handleIcon = (item) => {
+                if (state.copy) {
+                    proxy.$copy(item);
+                } else {
+                    proxy.$copy(`<el-icon name="${item}" :size="${state.size}" />`);
+                }
+            };
+            return {
+                ...toRefs(state),
+                filterIcons,
+                handleIcon,
+            };
+        },
+    });
+</script>
+
+<style lang="less">
+    .icon-container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        ul {
+            flex: 1;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, 160px);
+            justify-content: space-evenly;
+            gap: 0;
+            list-style: none;
+            li {
+                cursor: pointer;
+                border-radius: 10px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+                &:hover {
+                    background: rgba(0, 0, 0, 0.1);
+                }
+                .icon {
+                    padding: 20px;
+                }
+                .name {
+                    font-size: 16px;
+                    padding: 10px;
+                    word-break: keep-all;
+                }
+            }
+        }
+    }
+</style>