initial commit

src/components/HelloWorld.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/components/layout/Layout.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <el-container>
+      <el-aside width="150px">
+        <SideBar></SideBar>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <NavBar></NavBar>
+        </el-header>
+        <el-main>
+          <MainApp></MainApp>
+        </el-main>
+        <el-footer>
+          <span>
+            小管设计
+            <br />一个执着于小提琴学习的垃圾程序员
+          </span>
+        </el-footer>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import MainApp from '../layout/MainApp.vue';
+import NavBar from "../layout/NavBar.vue";
+import SideBar from "../layout/SideBar.vue";
+</script>
+
+<style>
+/* .el-header,
+.el-footer {
+  background-color: #b8d1b3;
+  color: rgb(51, 51, 51);
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-aside {
+  background-color: #e9eef3;
+  color: #333;
+  text-align: left;
+  line-height: 200px;
+}
+
+.el-main {
+  background-color: #e9eef3;
+  color: #333;
+  /* line-height: 450px; */
+/* vertical-align: top;
+  padding: 5px;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+} */
+</style>

src/components/layout/MainApp.vue

@@ -0,0 +1,12 @@
+<template>
+  <section class="section-main"
+           style="height:100%;">
+    <router-view style="height:100%;" />
+  </section>
+</template>
+
+<script setup lang='ts'>
+</script>
+
+<style>
+</style>

src/components/layout/NavBar.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="nav-main">
+    当前时间：{{ time }}
+    <span>论一个程序员的寂寞与忧伤</span>
+
+    <el-button icon="open_side" circle></el-button>
+    <el-dropdown>
+      <i class="el-icon-setting" style="margin-right: 15px"></i>
+      <!-- <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>查看</el-dropdown-item>
+        <el-dropdown-item>新增</el-dropdown-item>
+        <el-dropdown-item>删除</el-dropdown-item>
+      </el-dropdown-menu>-->
+    </el-dropdown>
+    <span>小管</span>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import $moment from "moment";
+import { ref } from "vue";
+
+const getTime = () => {
+  return $moment().format("YYYY年MM月DD日　HH:mm:ss");
+};
+
+let time = ref<String>(getTime());
+
+const timeChange = () => {
+  time.value = getTime();
+};
+setInterval(timeChange, 1000);
+</script>
+
+<style>
+.open_side {
+  background: url("../../assets/logo.png") center no-repeat;
+  background-size: cover;
+}
+.nav-main {
+  float: right;
+}
+</style>

src/components/layout/SideBar.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <el-menu router>
+      <el-menu-item
+        v-for="(route, index) in current_routes"
+        v-bind:key="index"
+        v-bind:index="route.path"
+        v-bind:title="route.meta?.name"
+      >{{ route.meta?.name }}</el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { RouteRecordRaw } from "vue-router";
+import { store } from "../../store/index";
+import router from "../../router/index";
+import { reactive } from "vue";
+let current_routes = router.options.routes[0].children;
+console.log(router.options.routes[0].children);
+// let current_routes = reactive<Array<RouteRecordRaw>>(
+
+// );
+
+// console.log(so);
+</script>
+
+<style>
+closeStyle {
+  width: 100px;
+}
+.side-main {
+  width: 200px;
+}
+.el-menu-item {
+  background-color: #01dfd7;
+}
+</style>

src/components/login/login.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="login">
+    login
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+.login {
+  background-color: beige;
+}
+</style>