Wed Feb 7 16:21:00 CST 2024 inscode

package.json

@@ -13,11 +13,16 @@
     "echarts": "^5.4.2",
     "guess": "^1.0.2",
     "html2canvas": "^1.4.1",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.0.1",
-    "vite": "^3.0.1"
+    "@types/node": "^18.19.6",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "less": "^4.2.0",
+    "prettier": "^3.2.2",
+    "vite": "^4.0.0"
   },
   "license": "MIT"
 }

src/App.vue

-<script setup>
-import GameChart from './components/GameChart.vue'
-import SearchGrade from './components/SearchGrade.vue'
-import Draw from './components/draw/Draw.vue'
-import Commit from './components/commit/Commit.vue'
-import Drag from './components/drag/Drag.vue'
-import Visual from './components/visual/index.vue'
-import VisualHtml from './components/visualHtml/index.vue'
-import { reactive, onBeforeMount, onMounted } from 'vue';
-import html2canvas from 'html2canvas';
 
-// state
-const state = reactive({
-  current: 'VisualHtml'
-})
 
-/** 下载图片 */
+
+<script setup>
+  import { ref } from "vue";
+  import zhCN from "ant-design-vue/es/locale/zh_CN";
+  import dayjs from "dayjs";
+  import "dayjs/locale/zh-cn";
+  /** 下载图片 */
 const downloadBase64 = (content, fileName) => {
   const base64ToBlob = function (code) {
     let parts = code.split(';base64,');
@@ -53,94 +45,25 @@ const shotAction = () => {
   });
 }
 
-
-
-onMounted(() => {
-  console.log('html2canvas', html2canvas)
-  // 计算DOMContentLoaded
-  const observer = new PerformanceObserver((list) => {
-    list.getEntries().forEach((entry) => {
-      const domContentLoadedTime =
-        entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
-      console.log(
-        `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
-      );
-    });
-  });
-
-  observer.observe({ type: "navigation", buffered: true });
-})
-
-// 之前
-onBeforeMount(() => {
-  const href = window.location.href
-  const data = {}
-  const urlArray = href.split('?')
-  const urlLength = urlArray.length
-  if (urlLength > 1) {
-    urlArray[urlLength - 1].split('&').forEach(item => {
-      const itemArray = item.split('=')
-      const key = itemArray[0]
-      const value = itemArray[1]
-      data[key] = value
-    })
-    console.log('urlArray', urlArray)
-    if (data['type'] = 'csdn_game') {
-      state.current = '新星赛道选手信息可视化'
-    }
-    else if (data['type'] = 'csdn_grade') {
-      state.current = 'grade查询分数'
-    }
-    else if (data['type'] = 'draw') {
-      state.current = '抽奖'
-    }
-    else if (data['type'] = 'commit') {
-      state.current = '评论'
-    }
-    else if (data['type'] = 'grag') {
-      state.current = '拖拽'
-    }
-    else if (data['type'] = 'Visual') {
-      state.current = 'Visual'
-    }
-  }
-})
+  dayjs.locale("zh-cn");
+  const locale = ref(zhCN);
 </script>
 
+
 <template>
-  <div class="container-main">
-    <div style="text-align: center;padding: 20px;">
-      <a-radio-group v-model:value="state.current" name="radioGroup">
-        <a-radio value="grade查询分数">csdn查询分数</a-radio>
-        <a-radio value="新星赛道选手信息可视化">csdn新星赛道可视化</a-radio>
-        <a-radio value="抽奖">随机抽奖</a-radio>
-        <a-radio value="评论">csdn分析评论</a-radio>
-        <a-radio value="拖拽">拼图</a-radio>
-        <a-radio value="Visual">可视化 2023 编码之旅</a-radio>
-        <a-radio value="VisualHtml">可视化 html</a-radio>
-      </a-radio-group>
-      <a-button type="primary" @click="shotAction">
-        截图
-      </a-button>
-    </div>
-    <div id="render-id">
-      <SearchGrade v-if="state.current === 'grade查询分数'" />
-      <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
-      <Commit v-else-if="state.current === '评论'" />
-      <Drag v-else-if="state.current === '拖拽'" />
-      <Visual v-else-if="state.current === 'Visual'" />
-      <VisualHtml v-else-if="state.current === 'VisualHtml'" />
-      <Draw v-else />
+  <!--  国际化配置-->
+  <a-config-provider :locale="locale">
+    <div id="app">
+      <router-view/>
     </div>
-  </div>
+  </a-config-provider>
 </template>
 
 <style scoped>
-.container-main {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  padding: 10px;
-  margin: 0;
-}
+  #app{
+    width: 100vw;
+    height: 100vh;
+    background-size: 100%;
+    background: linear-gradient(rgba(38, 38, 38, 0.5), rgba(40,140,234, 0.6)), url("/static/img/previewFix.jpg") no-repeat center;
+  }
 </style>

src/layout/index.vue

+<script setup>
+import {
+    MenuUnfoldOutlined,
+    MenuFoldOutlined,
+} from "@ant-design/icons-vue";
+
+import { reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+//router
+const router = useRouter();
+const state = reactive({
+    title: "vue3平台",
+    openKeys: [],
+    selectedKeys: [],
+    collapsed: false,
+    menuList: []
+});
+
+
+const collapeAction = () => {
+    state.collapsed = !state.collapsed
+}
+
+const clickMenu = (menu, item) => {
+    console.log('item', item)
+    state.openKeys = [menu.key]
+    state.selectedKeys = [menu.key]
+    router.push({
+        name: item.name
+    })
+}
+//{ item, key, selectedKeys }
+const selectMenu = (e) => {
+    console.log(e)
+};
+
+const renderIcon = (icon) => {
+    // return h(icon)
+    return ''
+}
+
+onMounted(() => {
+    console.log('router.current.value', router)
+
+    const { routes } = router.options
+    state.menuList = routes.reduce((pre, item) => {
+        const isHiddenInLayout = item.meta.isHiddenInLayout
+        if (!isHiddenInLayout) {
+            const menuItem = {
+                title: item.meta.title,
+                path: item.path,
+                key: item.name,
+                name: item.name,
+                icon: item.meta.icon,
+                children: item.children.map(children => {
+                    return {
+                        title: children.meta.title,
+                        path: children.path,
+                        key: children.name,
+                        name: children.name,
+                    }
+                })
+            }
+            pre.push(menuItem)
+        }
+        return pre
+    }, [])
+});
+</script>
+
+<template>
+    <a-layout class="layout-container">
+        <a-layout-sider v-model:collapsed="state.collapsed" :trigger="null" collapsible>
+            <div class="logo" />
+            <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" theme="dark" mode="inline"
+                @select="selectMenu">
+                <a-sub-menu v-for="menu in state.menuList" :key="menu.key">
+                    <template #icon> {{ renderIcon(menu.icon) }}</template>
+                    <template #title> <span>{{ menu.title }}</span></template>
+                    <a-menu-item v-for="menuChild in menu.children" :key="menuChild.key" @click="clickMenu(menu, menuChild)">
+                        {{ menuChild.title }}
+                    </a-menu-item>
+                </a-sub-menu>
+            </a-menu>
+        </a-layout-sider>
+        <a-layout>
+            <a-layout-header style="background: #ffffff; padding-left: 20px">
+                <div style="display: flex">
+                    <div style="width: 50%">
+                        <menu-unfold-outlined v-if="state.collapsed" class="trigger" @click="collapeAction" />
+                        <menu-fold-outlined v-else class="trigger" @click="collapeAction" />
+                        {{ state.title }}
+                    </div>
+                </div>
+            </a-layout-header>
+            <a-layout-content class="content-box">
+                <!--                    渲染子路由-->
+                <router-view />
+            </a-layout-content>
+        </a-layout>
+    </a-layout>
+</template>
+
+<style lang="less">
+.layout-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.content-box {
+    overflow: auto;
+    max-height: calc(100vh - 64px);
+    padding: 24px;
+    background: #fff;
+}
+
+#components-layout-demo-custom-trigger .trigger {
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+#components-layout-demo-custom-trigger .trigger:hover {
+    color: #1890ff;
+}
+
+#components-layout-demo-custom-trigger .logo {
+    height: 32px;
+    background: rgba(255, 255, 255, 0.3);
+    margin: 16px;
+}
+
+.site-layout .site-layout-background {
+    background: #fff;
+}
+
+.main-container {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/main.js

@@ -3,5 +3,9 @@ import App from './App.vue'
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
 import './assets/main.css'
+import Router from "./router/index.js";
 
-createApp(App).use(Antd).mount('#app')
+createApp(App)
+.use(Antd)
+.use(Router)
+.mount('#app')

src/router/index.js

+import * as VueRouter from "vue-router";
+
+
+// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
+const modules = import.meta.glob('./modules/*.js', { eager: true });
+
+const routeModuleList=[]
+
+console.log('modules',modules)
+// 加入到路由集合中
+Object.keys(modules).forEach((key) => {
+    
+    const mod = modules[key].default || {};
+    const modList = Array.isArray(mod) ? [...mod] : [mod];
+    console.log('modList',modList)
+    routeModuleList.push(...modList);
+});
+
+
+
+console.log('routeModuleList',routeModuleList)
+const router = VueRouter.createRouter({
+    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
+    history: VueRouter.createWebHashHistory(),
+    routes: routeModuleList,
+});
+// 路由权限  beforeResolve
+
+router.beforeResolve(async (to, from, next) => {
+    next()
+});
+export default router;

src/router/modules/layout.js

+// 基础路由
+// @ts-ignore
+import LAYOUT from '@/layout/index.vue'
+
+export default {
+    path: '/',
+    name: 'Layout',
+    component: LAYOUT,
+    redirect: '/SearchGrade',
+    meta: {
+        orderNo: 1,
+        icon: 'ion:grid-outline',
+        title: 'vue3 平台',
+    },
+    children: [
+        {
+            path: 'SearchGrade',
+            name: 'SearchGrade',
+            component: () => import('@/components/SearchGrade.vue'),
+            meta: {
+                // affix: true,
+                icon: 'ion:grid-outline',
+                title:'csdn查分',
+            },
+        }
+    ],
+};

vite.config.js

 import { defineConfig } from 'vite'
+import { resolve } from "path";
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
@@ -22,5 +23,10 @@ export default defineConfig({
       },
     },
   },
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
   plugins: [vue()]
 })