From 782697d2f5442feed9254b60788a97197b0d707c Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Sun, 26 Feb 2023 20:50:50 +0800
Subject: [PATCH] feat: 2.0

---
 apps/web/components.d.ts            |  8 +++
 apps/web/src/assets/main.less       |  6 ++
 apps/web/src/layout/Layout.vue      | 16 ++++-
 apps/web/src/layout/LeftMenu.vue    | 98 +++++++++++++++++++++++++++++
 apps/web/src/layout/Nav.vue         | 35 ++++++++---
 apps/web/src/router/index.ts        | 13 ++--
 apps/web/src/views/Course/index.vue |  5 ++
 apps/web/src/views/HomeView.vue     | 37 ++++++++++-
 8 files changed, 196 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/src/layout/LeftMenu.vue
 create mode 100644 apps/web/src/views/Course/index.vue

diff --git a/apps/web/components.d.ts b/apps/web/components.d.ts
index 6f82f70..ad7cb40 100644
--- a/apps/web/components.d.ts
+++ b/apps/web/components.d.ts
@@ -10,7 +10,15 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AButton: typeof import('@arco-design/web-vue')['Button']
+    ACol: typeof import('@arco-design/web-vue')['Col']
+    AInput: typeof import('@arco-design/web-vue')['Input']
     AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
+    ALink: typeof import('@arco-design/web-vue')['Link']
+    AMenu: typeof import('@arco-design/web-vue')['Menu']
+    AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
+    ARow: typeof import('@arco-design/web-vue')['Row']
+    ASpace: typeof import('@arco-design/web-vue')['Space']
+    ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
diff --git a/apps/web/src/assets/main.less b/apps/web/src/assets/main.less
index bfa37ec..43fe425 100644
--- a/apps/web/src/assets/main.less
+++ b/apps/web/src/assets/main.less
@@ -1,5 +1,11 @@
 @import 'normalize.css';
 
+html,
+body {
+  position: relative;
+  background: var(--color-neutral-2);
+}
+
 @font-face {
   font-family: 'bs';
   src: url('./backset.woff');
diff --git a/apps/web/src/layout/Layout.vue b/apps/web/src/layout/Layout.vue
index 31bb154..1c28376 100644
--- a/apps/web/src/layout/Layout.vue
+++ b/apps/web/src/layout/Layout.vue
@@ -1,10 +1,20 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
 import Nav from './Nav.vue';
 </script>
 
 
 <template>
   <Nav />
-  <RouterView />
-</template>
\ No newline at end of file
+  <main>
+    <RouterView />
+  </main>
+</template>
+
+<style lang="less" scoped>
+main {
+  position: absolute;
+  left: calc((100% - 1120px) / 2);
+  right: calc((100% - 1120px) / 2);
+  padding: 100px 0 40px 0;
+}
+</style>
\ No newline at end of file
diff --git a/apps/web/src/layout/LeftMenu.vue b/apps/web/src/layout/LeftMenu.vue
new file mode 100644
index 0000000..5534e3d
--- /dev/null
+++ b/apps/web/src/layout/LeftMenu.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import {
+  IconNotification,
+  IconBook,
+  IconMessage,
+} from '@arco-design/web-vue/es/icon';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+
+const onMenuItemClick = (key: string) => {
+  console.log(key)
+  router.push(key)
+}
+
+</script> 
+
+<template>
+  <aside class="left-menu">
+    <a-menu auto-open showCollapseButton @menu-item-click="onMenuItemClick">
+      <a-menu-item key="/">
+        <template #icon><icon-notification /></template>
+        公告
+      </a-menu-item>
+      <a-menu-item key="course">
+        <template #icon><icon-book /></template>
+        课程
+      </a-menu-item>
+      <a-menu-item key="topic">
+        <template #icon><icon-message /></template>
+        讨论
+      </a-menu-item>
+      <!-- <a-sub-menu key="3">
+                  <template #icon><icon-bulb></icon-bulb></template>
+                  <template #title>讨论</template>
+                  <a-menu-item key="3_0">宏观经济</a-menu-item>
+                  <a-menu-item key="3_1">指标编写</a-menu-item>
+                </a-sub-menu> -->
+    </a-menu>
+  </aside>
+</template>
+
+<style lang="less" scoped>
+.left-menu {
+  position: fixed;
+  left: calc((100% - 1120px) / 2);
+  top: 100px;
+  bottom: 40px;
+  box-sizing: border-box;
+  background-color: var(--color-neutral-2);
+}
+
+.left-menu .arco-menu {
+  width: 200px;
+  height: 100%;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
+}
+
+.left-menu .arco-menu :deep(.arco-menu-collapse-button) {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.left-menu .arco-menu:not(.arco-menu-collapsed) :deep(.arco-menu-collapse-button) {
+  right: 0;
+  bottom: 8px;
+  transform: translateX(50%);
+}
+
+.left-menu .arco-menu:not(.arco-menu-collapsed)::before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 48px;
+  height: 48px;
+  background-color: inherit;
+  border-radius: 50%;
+  box-shadow: -4px 0 2px var(--color-bg-2), 0 0 1px rgba(0, 0, 0, 0.3);
+  transform: translateX(50%);
+}
+
+.left-menu .arco-menu.arco-menu-collapsed {
+  width: 48px;
+  height: auto;
+  padding-top: 24px;
+  padding-bottom: 138px;
+  border-radius: 22px;
+}
+
+.left-menu .arco-menu.arco-menu-collapsed :deep(.arco-menu-collapse-button) {
+  right: 8px;
+  bottom: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/apps/web/src/layout/Nav.vue b/apps/web/src/layout/Nav.vue
index 02aeb6f..f0704ab 100644
--- a/apps/web/src/layout/Nav.vue
+++ b/apps/web/src/layout/Nav.vue
@@ -15,9 +15,10 @@ import Search from '@vicons/carbon/Search'
         <span>Backset</span>
       </div>
       <div class="middle">
-        <div class="search">
-          <a-input-search :style="{ width: '320px' }" placeholder="搜索" />
-        </div>
+        <router-link to="course">学习</router-link>
+        <router-link to="topic">讨论</router-link>
+        <router-link to="blog">博客</router-link>
+        <a-input-search :style="{ width: '160px' }" placeholder="搜索" />
       </div>
       <div class="end">
         <span>注册</span>
@@ -29,6 +30,10 @@ import Search from '@vicons/carbon/Search'
 
 <style lang="less" scoped>
 header {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1994;
   height: 60px;
   background: #24292f;
   color: #d7d7d7;
@@ -42,13 +47,14 @@ header {
     .start {
       display: flex;
       align-items: center;
-      cursor: pointer;
 
       svg {
+        cursor: pointer;
         width: 28px;
       }
 
       span {
+        cursor: pointer;
         padding-left: 10px;
         font-size: 20px;
         font-family: 'bs';
@@ -56,9 +62,22 @@ header {
     }
 
     .middle {
-      text-align: right;
-      .arco-input-search{
-        border: 0;
+      display: flex;
+      align-items: center;
+
+      a {
+        color: #d7d7d7;
+        text-decoration: none;
+        cursor: pointer;
+        margin-right: 30px;
+
+        &:hover {
+          color: #fff;
+        }
+
+        &.arco-input-search {
+          border: 0;
+        }
       }
     }
 
@@ -67,7 +86,7 @@ header {
 
       span {
         cursor: pointer;
-        margin-left: 30px;
+        margin-left: 32px;
 
         &:hover {
           color: #fff;
diff --git a/apps/web/src/router/index.ts b/apps/web/src/router/index.ts
index 52ddce3..506b3f3 100644
--- a/apps/web/src/router/index.ts
+++ b/apps/web/src/router/index.ts
@@ -9,14 +9,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
-    // {
-    //   path: '/about',
-    //   name: 'about',
-    //   // route level code-splitting
-    //   // this generates a separate chunk (About.[hash].js) for this route
-    //   // which is lazy-loaded when the route is visited.
-    //   component: () => import('../views/AboutView.vue')
-    // }
+    {
+      path: '/course',
+      name: 'course',
+      component: () => import('../views/Course/index.vue')
+    }
   ]
 })
 
diff --git a/apps/web/src/views/Course/index.vue b/apps/web/src/views/Course/index.vue
new file mode 100644
index 0000000..3a77378
--- /dev/null
+++ b/apps/web/src/views/Course/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    course
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index b8c7a12..b3dcd6d 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -2,7 +2,38 @@
 </script>
 
 <template>
-  <main>
-    home
-  </main>
+  <div>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+    <h1>home</h1>
+  </div>
 </template>
+
+<style lang="less" scoped></style>
\ No newline at end of file