添加主题

src/App.vue

@@ -1,13 +1,20 @@
 <template>
-  <n-message-provider>
-    <router-view></router-view>
-  </n-message-provider>
+  <n-config-provider :theme="apptheme">
+    <n-message-provider>
+      <router-view></router-view>
+    </n-message-provider>
+  </n-config-provider>
 </template>
 <script setup lang="ts">
-// import { useAppStore } from './store/modules/app'
-// const appStore = useAppStore()
+import { title } from 'process';
+import { useAppStore } from './store/modules/app'
 
 
+import { ref, watch } from 'vue'
+import { darkTheme } from 'naive-ui'
+const appStore = useAppStore()
+const apptheme = ref()
+
 // provide('reload', reload)
 // function reload() {
 //   isRouterAlive.value = false
@@ -28,6 +35,21 @@
 //     immediate: true,
 //   }
 // )
+
+watch(
+  () => appStore.theme,
+  () => {
+    const theme: string = appStore.theme
+    if (theme == "dark") {
+      apptheme.value = darkTheme
+    } else {
+      apptheme.value = null
+    }
+  },
+  {
+    immediate: true,
+  }
+)
 </script>
 
 <style>
@@ -37,5 +59,7 @@
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   background-color: var(--color-bg-1);
+  height: 100vh;
+  overflow: hidden;
 }
 </style>

src/components.d.ts

@@ -5,6 +5,8 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AButton: typeof import('@arco-design/web-vue')['Button']
+    ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
     Footer: typeof import('./components/footer/index.vue')['default']
     Header: typeof import('./components/Header/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/Header/index.vue

@@ -1,9 +1,14 @@
+
+
+
 <script setup lang="ts">
 import SvgIcon from '../SvgIcon/index.vue'
 import { ref } from 'vue'
 import { useDark, useToggle } from '@vueuse/core';
 import { useAppStore, useUserStore } from '@/store';
 import { IconMoonFill, IconSunFill } from '@arco-design/web-vue/es/icon';
+
+
 const title = ref('I want to study typescript')
 // 检测浏览器系统主题
 const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
@@ -56,16 +61,41 @@ const ThemeChange = (val: string | number | boolean) => {
                 <ul class="flex space-x-8">
                   <li>
                     <router-link
-                      to="/demo"
+                      to="/"
                       class="hover:text-sky-500 dark:hover:text-sky-400"
-                    >Github</router-link>
+                    >GithubDemo</router-link>
+                  </li>
+                  <li>
+                    <router-link
+                      to="/"
+                      class="hover:text-sky-500 dark:hover:text-sky-400"
+                    >Login</router-link>
                   </li>
                 </ul>
               </nav>
               <div
                 class="flex items-center pl-6 ml-6 border-l border-slate-200 dark:border-slate-800"
               >
-        
+                <a-tooltip
+                  :content="
+                    theme === 'light'
+                      ? '设置暗黑主题'
+                      : '设置明亮主题'
+                  "
+                >
+                  <a-button
+                    size="mini"
+                    class="nav-btn"
+                    type="outline"
+                    :shape="'circle'"
+                    @click="toggleTheme"
+                  >
+                    <template #icon>
+                      <icon-moon-fill v-if="theme === 'dark'" />
+                      <icon-sun-fill v-else />
+                    </template>
+                  </a-button>
+                </a-tooltip>
                 <a
                   href="https://github.com/wmn1525/grasscutterTools"
                   target="_bank"
@@ -105,4 +135,4 @@ const ThemeChange = (val: string | number | boolean) => {
     }
   }
 }
-</style>
+</style>

src/pages/start/commuse.vue

@@ -16,13 +16,7 @@ import commuse from './components/commuse.vue'
   </div>
 
 </template>
-<style lang="less">
-.cont {
-  width: 1366px;
-  margin: auto;
-  display: flex;
-  .selectcom {
-    width: 1000px;
-  }
-}
-</style>
+
+<style lang="less" scoped>
+@import url('./style.less');
+</style>

src/pages/start/components/commuse.vue

@@ -3,6 +3,7 @@
 import { reactive, ref, computed } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { useMessage } from 'naive-ui'
+
 const { text, isSupported, copy } = useClipboard()
 
 
@@ -60,7 +61,6 @@ const options = reactive(
   ]
 )
 const message = useMessage()
-
 function copyvalue() {
   copy(value.value)
   if (isSupported) {
@@ -78,24 +78,24 @@ function copyvalue() {
 
   <div class="commuse">
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         UID:
       </div>
       <n-input v-model:value="uid" type="text" placeholder="" />
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         物品:
       </div>
       <n-select filterable v-model:value="value2" :options="options" />
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         数量:
       </div>
-      <n-input-number  v-model:value="num" clearable />
+      <n-input-number v-model:value="num" clearable />
     </div>
     <div class="generate">
       <n-input id="input" v-model:value="value" type="text" placeholder="" />
@@ -104,11 +104,11 @@ function copyvalue() {
       </n-button>
     </div>
 
-    
+
   </div>
 
   <div>
-    
+
   </div>
 
 </template>

src/pages/start/components/holyrelic.vue

@@ -72,47 +72,49 @@ function copyvalue() {
 
   <div class="commuse">
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         UID:
       </div>
       <n-input v-model:value="uid" type="text" placeholder="" />
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         圣遗物:
       </div>
       <n-select v-model:value="holyrelicnamevalue" filterable placeholder="选择圣遗物" :options="options" />
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         主属性:
       </div>
       <n-select v-model:value="holyrelicnmainvalue" filterable placeholder="选择圣遗物主属性" :options="options2" />
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         属性小词条:
       </div>
-      <div class="smallho">
-        <div v-for="(item, index) in options3" :key="index">
-          <n-checkbox v-model:checked="item.isCheck" style="margin-right: 12px" />
-          <div>{{ item.label }} </div>
+
+      <n-scrollbar class="smallho" style="height: 300px;">
+        <div class="smallho-item" v-for="(item, index) in options3" :key="index">
+          <n-checkbox v-model:checked="item.isCheck" style="margin-right: 12px"
+            class="text-slate-900 dark:text-slate-100" />
+          <div class="text-slate-900 dark:text-slate-100">{{ item.label }} </div>
           <div>
-            <n-input-number v-model:value="item.num" :min="1" placeholder="" :show-button="false"/>
+            <n-input-number v-model:value="item.num" :min="1" placeholder="" :show-button="false" />
           </div>
         </div>
-
-      </div>
+      </n-scrollbar>
+    
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         强化等级:
       </div>
-      <n-input-number v-model:value="grade" placeholder="" :min="0" :max="20" :show-button="false"/>
+      <n-input-number v-model:value="grade" placeholder="" :min="0" :max="20" :show-button="false" />
     </div>
 
     <div class="generate">
@@ -152,14 +154,11 @@ function copyvalue() {
 }
 
 .smallho {
-  height: 300px;
-  width: 100%;
-  overflow: auto;
 
-  >div {
+  .smallho-item {
     display: flex;
     justify-content: space-between;
-
+    width: 90%;
     >div {
       &:nth-child(3) {
         width: 80px;

src/pages/start/components/monster.vue

@@ -40,19 +40,19 @@ function copyvalue() {
  
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         怪物:
       </div>
       <n-select v-model:value="value2" filterable :options="options" />
     </div>
    <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         等级:
       </div>
       <n-input v-model:value="grade" type="text" placeholder="" />
     </div>
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         数量:
       </div>
       <n-input-number v-model:value="num" clearable />

src/pages/start/components/other.vue

@@ -29,12 +29,12 @@ const options = reactive(
     {
       title: "重载服务器配置",
       isuse: '均可使用',
-      value: "/position"
+      value: "/reload"
     },
     {
       title: "重启服务端",
       isuse: '均可使用',
-      value: "/position"
+      value: "/restart"
     },
     {
       title: "停止服务器",
@@ -67,7 +67,7 @@ function copyvalue(value: string) {
 
   <div class="commuse">
     <div v-for="(item, index) in options">
-      <div>{{ item.title }}</div>
+      <div class="text-slate-900 dark:text-slate-100">{{ item.title }}</div>
       <div>
         <n-input v-model:value="item.value" type="text" disabled />
       </div>

src/pages/start/components/role.vue

@@ -42,14 +42,14 @@ function copyvalue() {
       直接修改当前角色的面板
     </div>
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         属性:
       </div>
       <n-select v-model:value="value2" :options="options" placeholder=""/>
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         数值:
       </div>
        <n-input v-model:value="num" type="text" placeholder="" />

src/pages/start/components/startnav.vue

@@ -13,9 +13,9 @@ const datav = reactive([
 
 </script>
 <template>
-  <div class="nav">
+  <div class="nav ">
     <div v-for="(item, index) in datav" :key="index">
-      <router-link :to="item.path">
+      <router-link :to="item.path" class="mr-3 flex-none w-[2.0625rem] md:w-auto leading-6 dark:text-slate-200">
         {{ item.name }}
       </router-link>
     </div>

src/pages/start/components/thing.vue

@@ -52,27 +52,27 @@ function copyvalue() {
 
   <div class="commuse">
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         UID:
       </div>
       <n-input v-model:value="uid" type="text" placeholder="" />
     </div>
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         获取方式:
       </div>
       <n-select filterable v-model:value="value3" :options="options2" />
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         物品:
       </div>
       <n-select filterable v-model:value="value2" :options="options" />
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         数量:
       </div>
       <n-input-number v-model:value="num" clearable />

src/pages/start/components/weapon.vue

@@ -40,32 +40,32 @@ function copyvalue() {
 
   <div class="commuse">
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         UID:
       </div>
       <n-input v-model:value="uid" type="text" placeholder="" />
     </div>
 
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         武器:
       </div>
       <n-select v-model:value="value2" filterable :options="options" />
-    </div>
+    </div >
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         数量:
       </div>
       <n-input v-model:value="grade" type="text" placeholder="" />
     </div>
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         等级:
       </div>
       <n-input-number v-model:value="num" clearable />
     </div>
     <div class="commuse-item">
-      <div>
+      <div class="text-slate-900 dark:text-slate-100">
         精炼等级:
       </div>
       <n-input-number v-model:value="refined" clearable />

src/pages/start/holyrelic.vue

@@ -16,13 +16,7 @@ import holyrelic from './components/holyrelic.vue'
   </div>
 
 </template>
-<style lang="less">
-.cont {
-  width: 1366px;
-  margin: auto;
-  display: flex;
-  .selectcom {
-    width: 1000px;
-  }
-}
-</style>
+
+<style lang="less" scoped>
+@import url('./style.less');
+</style>

src/pages/start/index.vue

@@ -16,30 +16,6 @@ import commuse from './components/commuse.vue'
   </div>
 
 </template>
-<style lang="less">
-.cont {
-  width: 1366px;
-  margin: auto;
-  display: flex;
-
-  .nav {
-    height: 600px;
-    width: 120px;
-    border-right: 1px solid #d1d1cb;
-    padding-right: 30px;
-
-    >div {
-      margin: 10px 0;
-      cursor: pointer;
-      font-size: 18px;
-      color: #000;
-    }
-
-  }
-
-  .selectcom {
-    width: 1000px;
-  }
-
-}
-</style>
+<style lang="less" scoped>
+@import url('./style.less');
+</style>

src/pages/start/monster.vue

@@ -16,14 +16,7 @@ import monster from './components/monster.vue'
   </div>
 
 </template>
-<style lang="less">
-.cont {
-  width: 1366px;
-  margin: auto;
-  display: flex;
 
-  .selectcom {
-    width: 1000px;
-  }
-}
-</style>
+<style lang="less" scoped>
+@import url('./style.less');
+</style>

src/pages/start/other.vue

@@ -16,14 +16,7 @@ import other from './components/other.vue'
   </div>
 
 </template>
-<style lang="less">
-.cont {
-  width: 1366px;
-  margin: auto;
-  display: flex;
 
-  .selectcom {
-    width: 1000px;
-  }
-}
-</style>
+<style lang="less" scoped>
+@import url('./style.less');
+</style>

src/pages/start/role.vue

@@ -17,13 +17,7 @@ import role from './components/role.vue'
   </div>
 
 </template>
-<style lang="less">
-.cont {
-  width: 1366px;
-  margin: auto;
-  display: flex;
-  .selectcom {
-    width: 1000px;
-  }
-}
-</style>
+
+<style lang="less" scoped>
+@import url('./style.less');
+</style>

src/pages/start/style.less

@@ -0,0 +1,25 @@
+.cont {
+  width: 800px;
+  margin: auto;
+  display: flex;
+
+  .nav {
+    height: 600px;
+    width: 120px;
+    border-right: 1px solid #777777;
+    padding-right: 30px;
+
+    >div {
+      margin: 10px 0;
+      cursor: pointer;
+      font-size: 18px;
+      color: #000;
+    }
+
+  }
+
+  .selectcom {
+    width: 660px;
+  }
+
+}

src/pages/start/thing.vue

@@ -17,14 +17,7 @@ import thing from './components/thing.vue'
   </div>
 
 </template>
-<style lang="less">
-.cont {
-  width: 1366px;
-  margin: auto;
-  display: flex;
 
-  .selectcom {
-    width: 1000px;
-  }
-}
-</style>
+<style lang="less" scoped>
+@import url('./style.less');
+</style>

src/pages/start/weapon.vue

@@ -16,14 +16,7 @@ import weapon from './components/weapon.vue'
   </div>
 
 </template>
-<style lang="less">
-.cont {
-  width: 1366px;
-  margin: auto;
-  display: flex;
 
-  .selectcom {
-    width: 1000px;
-  }
-}
-</style>
+<style lang="less" scoped>
+@import url('./style.less');
+</style>

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import routes from 'virtual:generated-pages'
-console.log(routes,'打印生成自动生成的路由')
+// console.log(routes,'打印生成自动生成的路由')
 
 routes.push({
   path: '/',