补充提交

locales/en-US.json

@@ -7,7 +7,8 @@
   "LayoutHeaderTooltipOptions": {
     "Reload": "Reload Current Page",
     "Lock": "Lock",
-    "Setting": "Setting"
+    "Setting": "Setting",
+    "Github": "Github"
   },
   "LayoutHeaderSettingOptions": {
     "Title": "Configuration",

locales/zh-CN.json

@@ -7,7 +7,8 @@
   "LayoutHeaderTooltipOptions": {
     "Reload": "刷新当前页面",
     "Lock": "锁屏",
-    "Setting": "设置"
+    "Setting": "设置",
+    "Github": "Github"
   },
   "LayoutHeaderSettingOptions": {
     "Title": "项目配置",

src/icons/github.svg

@@ -0,0 +1,3 @@
+<svg t="1669111756887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26207" width="200" height="200">
+  <path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="26208"></path>
+</svg>

src/layout/SiderBar/index.tsx

@@ -38,11 +38,11 @@ const SiderBar = defineComponent({
           handleSelect: (key: string | number) => updateLocale(String(key)),
         },
       },
-      // {
-      //   name: 'lock',
-      //   size: 18,
-      //   tooltip: 'LayoutHeaderTooltipOptions.Lock',
-      // },
+      {
+        name: 'github',
+        size: 18,
+        tooltip: 'LayoutHeaderTooltipOptions.Github',
+      },
       {
         name: 'setting',
         size: 18,
@@ -55,10 +55,12 @@ const SiderBar = defineComponent({
 
         setTimeout(() => changeReloadLog(true))
       },
-      // lock: () => {},
       setting: () => {
         showSettings.value = true
       },
+      github: () => {
+        window.open('https://github.com/XiaoDaiGua-Ray/ray-template')
+      },
     }
 
     const handleIconClick = (key: IconEventMap) => {

src/views/dashboard/index.scss

@@ -0,0 +1,13 @@
+.dashboard-layout {
+  & .n-card {
+    margin-top: 18px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  & .dashboard-link {
+    text-decoration: none;
+  }
+}

src/views/dashboard/index.tsx

@@ -1,12 +1,99 @@
-import { defineComponent } from 'vue'
+import './index.scss'
+import {
+  NCard,
+  NLayout,
+  NDescriptions,
+  NDescriptionsItem,
+  NTag,
+  NSpace,
+} from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
 
 const Dashboard = defineComponent({
   name: 'Dashboard',
   setup() {
-    return {}
+    const coverLetterOptions = [
+      {
+        label: '掌握搬砖框架',
+        des: () => (
+          <NSpace>
+            <NTag type="success">Vue3.x</NTag>
+            <NTag type="info">React</NTag>
+          </NSpace>
+        ),
+      },
+      {
+        label: '从事搬砖时长',
+        des: () => (
+          <NSpace>
+            <NTag type="success">练习时长两年半</NTag>
+          </NSpace>
+        ),
+      },
+      {
+        label: '个人',
+        des: () => (
+          <NSpace align="center">
+            <RayIcon name="ray" size="22" />
+            努力搬砖、努力摸鱼, 建设美丽家园
+          </NSpace>
+        ),
+        span: 2,
+      },
+      {
+        label: '补充说明',
+        des: () => (
+          <NSpace align="center">
+            如果有希望补充的功能可以在
+            <a
+              class="dashboard-link"
+              href="https://github.com/XiaoDaiGua-Ray/ray-template"
+            >
+              GitHub
+            </a>
+            提一个 Issues
+          </NSpace>
+        ),
+        span: 2,
+      },
+    ]
+
+    return {
+      coverLetterOptions,
+    }
   },
   render() {
-    return <div>Dashboard</div>
+    return (
+      <NLayout class="dashboard-layout layout-full">
+        <NCard>
+          {{
+            header: () =>
+              h(
+                RayIcon,
+                {
+                  name: 'ray',
+                  size: '64',
+                },
+                {},
+              ),
+            default: () => '当你看见这个页面后, 就说明项目已经启动成功了~',
+          }}
+        </NCard>
+        <NCard title="个人介绍">
+          <NDescriptions bordered labelPlacement="left" column={2}>
+            {this.coverLetterOptions.map((curr) => (
+              <NDescriptionsItem
+                key={curr.label}
+                label={curr.label}
+                span={curr?.span}
+              >
+                {curr.des()}
+              </NDescriptionsItem>
+            ))}
+          </NDescriptions>
+        </NCard>
+      </NLayout>
+    )
   },
 })