feat: 2.0

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']

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');

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 />
+  <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>

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>

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">
+        <router-link to="course">学习</router-link>
-          <a-input-search :style="{ width: '320px' }" placeholder="搜索" />
+        <router-link to="topic">讨论</router-link>
-        </div>
+        <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;
+      display: flex;
-      .arco-input-search{
+      align-items: center;
-        border: 0;
+
+      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;

apps/web/src/router/index.ts

@@ -9,14 +9,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
-    // {
+    {
-    //   path: '/about',
+      path: '/course',
-    //   name: 'about',
+      name: 'course',
-    //   // route level code-splitting
+      component: () => import('../views/Course/index.vue')
-    //   // 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')
-    // }
   ]
 })
 

apps/web/src/views/Course/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    course
+  </div>
+</template>

apps/web/src/views/HomeView.vue

@@ -2,7 +2,38 @@
 </script>
 
 <template>
-  <main>
+  <div>
-    home
+    <h1>home</h1>
-  </main>
+    <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>