Merge pull request #59 from chenjiale123/main

编码echartNav页面，引用echart

package.json

@@ -110,11 +110,6 @@
     "package.json": [
       "prettier --write"
     ],
-    "*.vue": [
-      "eslint --fix",
-      "prettier --write",
-      "stylelint --fix"
-    ],
     "*.{scss,less,styl,html}": [
       "stylelint --fix",
       "prettier --write"

src/App.vue

@@ -4,11 +4,16 @@
 <script setup lang="ts"></script>
 
 <style>
+  html,
+  body {
+    height: 100%;
+  }
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
     background-color: var(--color-bg-1);
+    height: 100%;
   }
 </style>

src/common/echarts.ts

@@ -0,0 +1,31 @@
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core';
+
+/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
+import { BarChart, LineChart } from 'echarts/charts';
+
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent } from 'echarts/components';
+
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  LineChart,
+]);
+
+// 导出
+export default echarts;

src/components/Header/index.vue

@@ -34,6 +34,9 @@
             <div class="relative items-center hidden ml-auto lg:flex">
               <nav class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-200">
                 <ul class="flex space-x-8 tag">
+                  <li>
+                    <router-link to="/contain" class="hover:text-sky-500 dark:hover:text-sky-400">echartsNav</router-link>
+                  </li>
                   <li>
                     <router-link to="/Component-demo" class="hover:text-sky-500 dark:hover:text-sky-400">ComponentDemo</router-link>
                   </li>

src/components/SvgIcon/index.vue

@@ -5,15 +5,24 @@
 </template>
 
 <script lang="ts" setup>
-  const props = withDefaults(
-    defineProps<{
-      prefix: string;
-      name: string;
-      color: string;
-      size: string;
-    }>(),
-    { prefix: '', name: '', color: '', size: '' },
-  );
+  const props = defineProps({
+    prefix: {
+      type: String,
+      default: 'icon',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: '#333',
+    },
+    size: {
+      type: String,
+      default: 'default',
+    },
+  });
   const symbolId = computed(() => `#${props.prefix}-${props.name}`);
   const calsses = computed(() => {
     return {

src/main.ts

@@ -2,17 +2,21 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import piniaStore from './store';
+
 import '/@/styles/index.less';
 import '/@/styles/reset.less';
 import 'uno.css';
 
 // 支持SVG
-import 'virtual:svg-icons-register';
 
-import 'tdesign-vue-next/es/style/index.css';
+import ElementPlus from 'element-plus'; // 引入Element Plus 所需
+import 'element-plus/dist/index.css'; // 引入Element Plus 所需
+import 'virtual:svg-icons-register';
 
+//vue3的挂载方式
 const app = createApp(App);
 
+app.use(ElementPlus);
 app.use(router);
 app.use(piniaStore);
 app.mount('#app');

src/router/index.ts

@@ -9,7 +9,7 @@ routes.push({
 });
 //导入生成的路由数据
 const router = createRouter({
-  history: createWebHashHistory('fast-vue3'),
+  history: createWebHashHistory(),
   routes,
 });
 

src/router/root.ts

@@ -1,10 +1,28 @@
 export default [
   {
     path: '/',
-    component: () => import('@/pages/login/index.vue'),
+    name: 'index',
+    meta: {
+      title: '首页',
+    },
+    component: () => import('../views/login/index.vue'),
   },
+
   {
-    path: 'shi',
-    component: () => import('@/pages/shi/index.vue'),
+    path: '/',
+    name: 'layout',
+    meta: {
+      title: '导航页',
+    },
+    children: [
+      {
+        path: '/contain',
+        name: 'menu',
+        meta: {
+          title: '导航页',
+        },
+        component: () => import('../views/contain/index.vue'),
+      },
+    ],
   },
 ];

src/views/contain/component/layout.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-menu
+    :default-active="$route.path"
+    class="el-menu-vertical-demo"
+    :collapse="isCollapse"
+    @open="handleOpen"
+    @close="handleClose"
+    router
+    background-color="#545c64"
+    text-color="#fff"
+    active-text-color="#ffd04b"
+  >
+    <!-- 将渲染导航每一项传给子组件渲染，item代表要渲染每一项 -->
+    <SubAside :isCollapse="isCollapse" v-for="item in navs" :key="item.path" :menu="item" :index="item.path" />
+  </el-menu>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import * as router from '../../../router/root';
+  import SubAside from './subAside.vue'; // 将子组件引入
+  console.log(router.default);
+  const navs = router.default; // 过滤拿到数据
+  console.log(navs);
+
+  const isCollapse = ref(false); // 是否收起，默认不收起
+
+  const handleOpen = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath);
+  };
+  const handleClose = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath);
+  };
+</script>
+<style lang="less" scoped>
+  .el-menu-vertical-demo {
+    height: 100%;
+  }
+</style>

src/views/contain/component/main.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="echart">
+    <div id="myEChartsBar"></div>
+    <div id="myEChartsLine"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import echarts from '../../../common/echarts';
+  const changeBar = (bar) => {
+    const myEChart = echarts.init(bar);
+    const option = {
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      },
+      yAxis: {},
+      series: [
+        {
+          type: 'bar',
+          data: [23, 24, 18, 25, 27, 28, 25],
+        },
+      ],
+    };
+    myEChart.setOption(option);
+    // 根据页面大小自动响应图表大小
+    window.addEventListener('resize', function () {
+      myEChart.resize();
+    });
+  };
+  // 折线图
+  const changeLine = (line) => {
+    // 获取组件实例
+    const myEChart = echarts.init(line);
+    // 设置配置项
+    const option = {
+      xAxis: {
+        data: ['A', 'B', 'C', 'D', 'E'],
+      },
+      yAxis: {},
+      series: [
+        {
+          data: [10, 22, 28, 43, 49],
+          type: 'line',
+          stack: 'x',
+        },
+        {
+          data: [5, 4, 3, 5, 10],
+          type: 'line',
+          stack: 'x',
+        },
+      ],
+    };
+    // 复制
+    myEChart.setOption(option);
+    // 根据页面大小自动响应图表大小
+    window.addEventListener('resize', function () {
+      myEChart.resize();
+    });
+  };
+  onMounted(() => {
+    var bar = document.getElementById('myEChartsBar');
+    var line = document.getElementById('myEChartsLine');
+    changeBar(bar);
+    changeLine(line);
+  });
+</script>
+
+<style scoped>
+  #myEChartsBar {
+    height: 300px;
+  }
+  #myEChartsLine {
+    height: 300px;
+  }
+</style>

src/views/contain/component/subAside.vue

@@ -0,0 +1,28 @@
+<template>
+  <!-- 有子节点渲染这个 -->
+  <el-sub-menu :index="menu.path" v-if="menu?.children">
+    <template #title>
+      <!-- <el-icon v-html="menu?.meta.icon"></el-icon> -->
+      <span>{{ menu?.meta.title }}</span>
+    </template>
+    <!-- 递归调用本身，该组件在index.ts中全局注册了 -->
+    <SubAside v-for="item in menu.children" :key="item" :menu="item" :isCollapse="isCollapse" />
+  </el-sub-menu>
+  <!-- 没有子节点渲染这个 -->
+  <el-menu-item v-else :index="menu?.path">
+    <!-- <el-icon v-html="menu?.meta.icon"></el-icon> -->
+    <span>{{ menu?.meta.title }}</span>
+  </el-menu-item>
+</template>
+
+<script lang="ts" setup>
+  // import { ref } from 'vue';
+  // 拿到父组件传入的值
+  import SubAside from './subAside.vue';
+  defineProps({
+    isCollapse: Boolean,
+    menu: Object,
+  });
+</script>
+
+<style lang="scss" scoped></style>

src/views/contain/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-aside width="180px"> <Layout /> </el-aside>
+      <el-container>
+        <el-header> <Header /></el-header>
+        <el-main> <Main /></el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Header from '/@/components/Header/index.vue';
+  import Layout from './component/layout.vue';
+  import Main from './component/main.vue';
+</script>
+
+<style lang="less" scoped>
+  .common-layout {
+    height: 100%;
+    .el-container {
+      height: 100%;
+    }
+  }
+</style>