增加登陆，适配登陆页面

src/App.vue

@@ -3,12 +3,15 @@
   <n-config-provider
     preflight-style-disabled
     inline-theme-disabled
-    :theme-overrides="themeOverrides"
+    :theme="theme"
     :locale="zhCN"
     :date-locale="dateZhCN"
+    abstract
   >
     <n-notification-provider>
-      <router-view />
+      <n-layout>
+        <router-view />
+      </n-layout>
     </n-notification-provider>
   </n-config-provider>
 </template>
@@ -16,25 +19,15 @@
 import loading from '@/components/loading.vue'
 import useStore from '@/store/index'
 import { computed } from 'vue'
-import { zhCN, dateZhCN } from 'naive-ui'
-import Theme from '@/assets/naive-theme'
+import {
+  zhCN, dateZhCN, darkTheme, lightTheme, useOsTheme
+} from 'naive-ui'
 
+const osTheme = useOsTheme()
 const store = useStore()
 const show = computed(() => store.loading)
-const themeOverrides = Theme
+const theme = computed(() => (osTheme.value !== 'dark' ? darkTheme : lightTheme))
 </script>
 <style>
-#app,
-#app>div,
-html,
-body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-
-* {
-  box-sizing: border-box;
-}
+@import './assets/global.css';
 </style>

src/assets/global.css

@@ -0,0 +1,22 @@
+#app,
+#app>div,
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+/* 隐藏滚动条 */
+&::-webkit-scrollbar {
+  width: 0 !important;
+  display: none;
+}
+.n-layout {
+  height: 100%;
+}

src/assets/naive-theme.ts

@@ -1,46 +0,0 @@
-import { GlobalThemeOverrides } from 'naive-ui'
-const themeOverrides: GlobalThemeOverrides = {
-  common: {
-    primaryColor: '#2791FEFF',
-    primaryColorHover: '#67B2FEFF',
-    primaryColorPressed: '#1F74CBFF',
-    primaryColorSuppl: '#93C8FEFF',
-    errorColorHover: '#EC787BFF',
-    errorColor: '#E8575AFF',
-    errorColorPressed: '#B94548FF',
-    errorColorSuppl: '#EE898BFF',
-    warningColor: '#FAAD38FF',
-    warningColorPressed: '#C88A2CFF',
-    textColorBase: '#17233EFF',
-    textColor1: 'rgba(80, 90, 110, 1)',
-    textColor2: 'rgba(128, 134, 148, 1)',
-    textColor3: 'rgba(196, 200, 206, 1)',
-    placeholderColor: 'rgba(196, 200, 206, 1)',
-    iconColor: 'rgba(196, 200, 206, 1)',
-    iconColorHover: 'rgba(103, 178, 254, 1)',
-    iconColorPressed: 'rgba(31, 116, 203, 1)',
-    iconColorDisabled: 'rgba(196, 200, 206, 1)',
-    dividerColor: 'rgba(220, 222, 226, 1)',
-    borderColor: 'rgba(196, 200, 206, 1)',
-    closeIconColor: 'rgba(80, 90, 110, 1)',
-    closeIconColorHover: 'rgba(103, 178, 254, 1)',
-    closeIconColorPressed: 'rgba(31, 116, 203, 1)',
-    closeColorHover: 'rgba(0, 0, 0, 0.1)',
-    closeColorPressed: 'rgba(0, 0, 0, 0.15)',
-    scrollbarColor: 'rgba(126, 133, 160, 1)',
-    scrollbarColorHover: 'rgba(103, 178, 254, 1)',
-    tagColor: '#F5F5F5FF',
-    inputColorDisabled: 'rgba(233, 234, 236, 1)',
-    fontSize: '14px',
-    fontSizeMini: '12px',
-    fontSizeTiny: '12px',
-    fontSizeSmall: '14px',
-    fontSizeMedium: '14px',
-    fontSizeLarge: '15px',
-    fontSizeHuge: '16px'
-  },
-  Icon: {
-    color: 'white'
-  }
-}
-export default themeOverrides

src/assets/native-plugin.ts

@@ -8,7 +8,9 @@ import {
   NLayoutHeader,
   NLayoutFooter,
   NLayoutSider,
-  NMenu
+  NMenu,
+  NInput,
+  NCheckbox
 } from 'naive-ui'
 
 const naive = create({
@@ -21,7 +23,9 @@ const naive = create({
     NLayoutHeader,
     NLayoutSider,
     NLayoutFooter,
-    NMenu
+    NMenu,
+    NInput,
+    NCheckbox
 
   ]
 })

src/pages/home/index.vue

@@ -1,28 +1,26 @@
 <template>
-  <n-layout>
-    <n-layout has-sider>
-      <n-layout-sider
-        bordered
-        show-trigger
-        collapse-mode="width"
+  <n-layout has-sider>
+    <n-layout-sider
+      bordered
+      show-trigger
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="240"
+      :native-scrollbar="false"
+    >
+      <n-menu
         :collapsed-width="64"
-        :width="240"
-        :native-scrollbar="false"
-      >
-        <n-menu
-          :collapsed-width="64"
-          :collapsed-icon-size="22"
-          :options="menuOptions"
-        />
-      </n-layout-sider>
-      <n-layout>
-        123
-      </n-layout>
+        :collapsed-icon-size="22"
+        :options="menuOptions"
+      />
+    </n-layout-sider>
+    <n-layout>
+      123
     </n-layout>
   </n-layout>
 </template>
 <script setup lang="ts">
-import NetService from '@/services/net.service.ts'
+import NetService from '@/services/net.service'
 const menuOptions = [
   {
     label: '且听风吟',
@@ -97,7 +95,5 @@ netService.get('/sQuoteCenter/realTime.htm?code=JO_71&_=1744857439593').then((re
 })
 </script>
 <style lang="scss" scoped>
-.n-layout {
-  height: 100%;
-}
+
 </style>

src/pages/home/route.ts

@@ -2,7 +2,7 @@ import { RouteRecordRaw } from 'vue-router'
 import home from './index.vue'
 
 export default {
-  path: '/',
+  path: '/home',
   meta: {
     authorize: true
   },

src/pages/login/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="login">
+    <div class="login-content">
+      <p>登录</p>
+      <p> "欢迎回来！请输入您的登陆信息。</p>
+      <n-input
+        v-model:value="userData.userName"
+        type="text"
+        placeholder="请输入账号"
+      />
+      <n-input
+        v-model:value="userData.passWord"
+        type="password"
+        show-password-on="click"
+        placeholder="请输入账号"
+      />
+      <n-checkbox
+        v-model:checked="userData.remenber"
+        label="记住密码"
+      />
+      <n-button
+        type="warning"
+        block
+        strong
+        size="large"
+      >
+        登陆
+      </n-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const userData = reactive({
+  userName: '',
+  passWord: '',
+  remenber: false
+})
+</script>
+<style lang="scss" scoped>
+.login {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &-content {
+    padding: 0 15px;
+    &>p {
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+      margin: 0;
+
+      &:first-child {
+        font-family: Arial, Arial;
+        font-weight: bold;
+        font-size: 34px;
+        line-height: 42px;
+      }
+
+      &:nth-child(2) {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        margin: 14px 0 25px 0;
+      }
+    }
+    :deep(.n-input){
+      --n-border-radius:5px;
+    }
+    &>div:nth-child(4){
+      margin: 25px 0 10px 0;
+    }
+    :deep(.n-button){
+      --n-font-size: 20px;
+      --n-border-radius: 10px;
+      margin-top: 20px;
+    }
+  }
+}
+</style>

src/pages/login/route.ts

@@ -0,0 +1,10 @@
+import { RouteRecordRaw } from 'vue-router'
+import login from './index.vue'
+
+export default {
+  path: '/',
+  meta: {
+    authorize: true
+  },
+  component: login
+} as RouteRecordRaw