首页

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="wea text-white md:hidden">
+      <wea />
+    </div>
     <div class="right flex items-center">
-      <div class="wea text-white md:hidden">
+
-        <wea />
-      </div>
       <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>
@@ -113,7 +113,7 @@ function toHome() {
   push("/home");
   const i = document.querySelector(".n-menu-item .n-menu-item-content-header");
   i.click();
-  
+
 }
 function handleSelect(k) {
   switch (k) {
@@ -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,25 +90,51 @@ async function getNav() {
 }
 
 function addMenu() {
-  if (!!token && !!userinfo) {}
+  if (!!token && !!userinfo) {
+    showModal.value = true
+  }
   else {
     $dialog.success({
-    title: "该功能能需要登录账号",
+      title: "该功能能需要登录账号",
-    content: "未登录账号，是否去登录？",
+      content: "未登录账号，是否去登录？",
-    positiveText: "登录",
+      positiveText: "登录",
-    negativeText: "返回",
+      negativeText: "返回",
-    onPositiveClick: () => {
+      onPositiveClick: () => {
-      push({
+        push({
-        path: "/login",
+          path: "/login",
-        query: {
+          query: {
-          redirect: fullPath,
+            redirect: fullPath,
-        },
+          },
-      });
+        });
-    },
+      },
-  });
+    });
   }
 }
 
+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")
 }