首页

src/components/menu.vue

@@ -10,11 +10,11 @@
     <n-icon size="30" class="menuIcon ml-2 hidden md:block text-pp-500" @click="active = true">
       <MdMenu />
     </n-icon>
-
-    <div class="right flex items-center">
     <div class="wea text-white md:hidden">
       <wea />
     </div>
+    <div class="right flex items-center">
+
       <div v-if="!userinfo" class="login mx-8">
         <n-button color="#8a2be2" size="small" @click="goLogin">登录</n-button>
       </div>
@@ -22,10 +22,10 @@
         <n-dropdown :options="userOp" @select="handleSelect" :show-arrow="true">
           <div class="uinfo mx-8 text-white flex items-center">
             <div class="ava flex items-center justify-center">
-              <n-avatar round size="medium" :src="userinfo.avaUrl" />
+              <n-avatar round size="small" :src="userinfo.avaUrl" />
             </div>
             <div class="ml-2"></div>
-            <n-button text class="userinfo">
+            <n-button text class="userinfo text-pp-500">
               {{ userinfo.nickname }}
             </n-button>
           </div>
@@ -162,13 +162,13 @@ function goConsole() {
 .boxxx {
   background: transparent url("../assets/cstyle/花边.png") no-repeat center center/100% 100% !important;
 }
+
 .ava {
   // background-color: red ;
   background: transparent url("../assets/cstyle/中秋节中国风边框3.png") no-repeat center center/100% 100% !important;
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
 }
+
 .login {
   :deep(.n-button) {
     background-color: @purple;
@@ -176,13 +176,8 @@ function goConsole() {
   }
 }
 
-:deep(.orange) {
-  color: #ffa500;
-  font-size: 24px;
-}
-
 :deep(.menu-item) {
-  color: @orange !important;
+  color: rgb(73, 117, 104) !important;
 }
 
 :deep(.router-link-active) {

src/views/HomeView.vue

@@ -34,7 +34,7 @@ function getH() {
 
 <style scoped lang="less">
 .boxx {
-  background: transparent url('../assets/bg/06.jpeg') no-repeat center center !important;
+  background: transparent url('../assets/bg/07.jpeg') no-repeat center center !important;
 }
 
 // :deep(.n-layout-header) {

src/views/home/navMenu.vue

@@ -6,7 +6,7 @@
           <div class="w-[200px]  my-4" v-for="(i, ii) in navList">
             <n-button @click="link(i.menuLink)" class="btn w-full  hover:text-[white]" type="primary" ghost>
               <template #icon>
-                <img v-if="!i.exp" width="20" height="20" class="mr-2" :src="i.menuIcon" alt="" @error="i.exp = true">
+                <img v-if="!i.exp" width="20" height="20" class="mr-2" :src="'https://favicon.im/' + i.menuLink.split('/')[2]" alt="" @error="i.exp = true">
                 <div :style="{ backgroundColor: i.color }"
                   class="w-[20px] h-[20px] text-[12px] text-[white] rounded-full flex justify-center items-center"
                   v-else>{{ i.menuName[0] }}</div>
@@ -15,7 +15,7 @@
             </n-button>
           </div>
           <div class="w-[200px]  my-4">
-            <n-button @click="addMenu" class="btn w-full  hover:text-[white]" type="primary" ghost>
+            <n-button @click="addMenu" class="btn w-full text-2xl hover:text-[white]" type="primary" ghost>
               +
             </n-button>
           </div>
@@ -24,11 +24,36 @@
       </n-scrollbar>
 
     </n-card>
+
+    <n-modal v-model:show="showModal">
+      <n-card class="w-1/4">
+        <div class="title text-3xl text-center my-8 text-pp-700">
+          添加菜单
+        </div>
+        <n-form :model="formData" ref="formRef" label-width="80" label-placement="left">
+          <n-form-item-row class="mt-4" path="menuName">
+            <n-input v-model:value="formData.menuName" placeholder="导航名称" />
+          </n-form-item-row>
+          <n-form-item-row class="mt-4" path="menuLink">
+            <n-input v-model:value="formData.menuLink" placeholder="导航链接" />
+          </n-form-item-row>
+          <n-form-item-row v-if="formData.menuLink" class="mt-4">
+            <img class="mx-auto" width="20" height="20" :src="'https://favicon.im/' + formData.menuLink.split('/')[2]"
+              alt="" />
+          </n-form-item-row>
+          <n-form-item-row class="mt-4">
+            <n-button class="w-2/5 ml-[5%]" @click="onCancel">取消</n-button>
+            <n-button class="w-2/5 ml-[10%]" type="primary" @click="onSubmit">立即创建</n-button>
+          </n-form-item-row>
+        </n-form>
+
+      </n-card>
+    </n-modal>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, reactive } from 'vue';
 import cookie from "vue-cookies";
 import { useRouter } from 'vue-router';
 
@@ -43,6 +68,12 @@ const userinfo = cookie.get("userinfo");
 const router = useRouter()
 const fullPath = router.currentRoute.value.fullPath
 const { push } = router;
+const showModal = ref(false)
+const formData = reactive({
+  menuName: "",
+  menuLink: "",
+  menuIcon:"#"
+})
 //mark method
 async function getNav() {
   let res = {}
@@ -59,7 +90,9 @@ async function getNav() {
 }
 
 function addMenu() {
-  if (!!token && !!userinfo) {}
+  if (!!token && !!userinfo) {
+    showModal.value = true
+  }
   else {
     $dialog.success({
       title: "该功能能需要登录账号",
@@ -78,6 +111,30 @@ function addMenu() {
   }
 }
 
+async function onSubmit() { 
+  if (!formData.menuName) {
+    $msg.error("请输入导航名称");
+    return
+  }
+  if (!formData.menuLink) {
+    $msg.error('请输入导航链接');
+    return
+  }
+  const res = await $http.nav.addMenu(formData)
+  if (res.code == 1) {
+    $msg.success(res.msg);
+    onCancel()
+    getNav()
+  }
+  else {
+    $msg.error(res.msg);
+  }
+}
+function onCancel() {
+  formData.menuName = ""
+  formData.menuLink = ""
+  showModal.value = false
+}
 function link(url) {
   window.open(url, "_blank")
 }