12-28

.env.development

@@ -2,6 +2,6 @@
 ENV = 'development'
 VITE_APP_ENV = 'development'
 
-#VITE_APP_BASE_URL = 'http://127.0.0.1:7777'
+VITE_APP_BASE_URL = 'http://127.0.0.1:7777'
-VITE_APP_BASE_URL = 'https://www.hxyouzi.com'
+# VITE_APP_BASE_URL = 'https://www.hxyouzi.com'
 

src/api/nav/index.js

@@ -20,11 +20,8 @@ export function addMenu(data) {
 // deleteMenu
 export function deleteMenu(id) {
   return request({
-    url: '/nav/menu',
+    url: '/nav/menu/'+id,
     method: 'delete',
-    params:{
-      id
-    }
   });
 }
 

src/components/aplayerView.vue

@@ -43,7 +43,7 @@ onMounted(async () => {
     // console.log('>>>>>',data.audio);
 
   });
-  
+
   // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
   const ap = new APlayer({
     container: document.getElementById("aplayer"),
@@ -67,7 +67,10 @@ onMounted(async () => {
       flag = true;
     }
   });
-  // d.click();
+
+  // 获取当前屏幕宽度
+  const width = document.documentElement.clientWidth; // 获取屏幕宽度
+  if (width < 767) d.click();
 });
 </script>
 <style lang="less" scoped>
@@ -75,59 +78,74 @@ onMounted(async () => {
   width: 480px; // 定个宽度
   color: var(--n-text-color); // 设置颜色
   background-color: #f5f5f8; // 设置背景色
+
   :deep(.aplayer-body) {
     color: var(--n-text-color); // 设置颜色
     background-color: #f5f5f8; // 设置背景色
+
     // bottom: 10px; // 设置底部距离
     .aplayer-icon-lrc {
       display: none;
     }
   }
+
   :deep(.aplayer-icon):hover svg path {
     fill: @blue; // 设置颜色
   }
+
   :deep(.aplayer-list) {
     width: 418px !important;
     background-color: #f5f5f8;
     border: none;
   }
+
   :deep(.aplayer-list-light) {
     background: inherit;
     color: @orange;
   }
+
   :deep(.aplayer-list) ol {
     max-height: 160px !important;
+
     // margin-bottom: 12px;
     .aplayer-list-light .aplayer-list-author {
       color: @orange !important;
     }
   }
+
   :deep(.aplayer-list) ol li {
     border: none;
   }
+
   :deep(.aplayer-list) ol li:hover {
     background: inherit;
     color: @blue;
     border: none;
+
     .aplayer-list-author {
       color: @blue !important;
     }
   }
+
   :deep(.aplayer-info) {
     padding: 0 !important;
     border-top: none;
   }
+
   :deep(.aplayer-icon) svg {
     color: var(--n-text-color); // 设置颜色
     background-color: var(--v-bgc); // 设置背景色
   }
+
   :deep(.aplayer-icon):hover svg {
     color: @blue; // 设置颜色
   }
+
   :deep(.aplayer-miniswitcher) {
     color: var(--n-text-color); // 设置颜色
     background-color: var(--v-bgc); // 设置背景色
   }
+
   :deep(.aplayer-lrc) {
     // text-align: right !important;
     width: 368px !important;
@@ -137,14 +155,17 @@ onMounted(async () => {
     z-index: 999;
     text-shadow: none !important;
   }
+
   :deep(.aplayer-lrc-contents) {
     transition: all 0.5s ease !important;
+
     p {
       font-size: 12px !important;
       color: @purple !important;
       opacity: 0.8;
     }
   }
+
   :deep(.aplayer-lrc-contents) {
     .aplayer-lrc-current {
       opacity: 1;
@@ -153,6 +174,7 @@ onMounted(async () => {
     }
   }
 }
+
 @media screen and (max-width: 800px) {
   #aplayer {
     width: 100vw !important;

src/components/menu.vue

@@ -40,13 +40,12 @@
     <n-drawer-content>
       <template #header>
         <div class="flex items-center" :style="{ height: menuH.clientHeight + 'px' }">
-          <n-icon size="24" class="orange mx-2">
+          <img v-if="route.path=='/home'" class="rounded-full mx-4" src="@/assets/logo/柚子娘.png" width="25" alt="">
-            <orange />
+          <img v-else class="rounded-full mx-4" src="@/assets/logo/柚子娘-绿.png" width="22" alt="">
-          </n-icon>
           菜单
         </div>
       </template>
-      <n-menu v-model:value="activeKey" mode="vertical" :options="menuInfo.options.slice(1)"
+      <n-menu v-model:value="activeKey" mode="vertical" :options="menuInfo.options"
         @click="active = false"></n-menu>
     </n-drawer-content>
   </n-drawer>
@@ -54,7 +53,6 @@
 
 <script setup>
 import wea from "@/components/wea.vue";
-import orange from "@/icon/orange.svg";
 import { usesizeStore } from "@/stores/size.js";
 import { renderIcon } from "@/util/h.js";
 import menuInfo from "@/util/menu.js";

src/views/home/navMenu.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="box flex flex-wrap px-8">
+  <div class="box flex flex-wrap px-8 sm:px-0">
     <n-card :style="{ height: boxH + 'px' }">
       <n-scrollbar :class="`h-[${boxH}px]`" :style="{ height: boxH - 40 + 'px' }">
-        <div class="grid gridSpace gap-4 items-center justify-center">
+        <div class="grid gridSpace gap-4 items-center justify-items-center">
-          <div class="w-[200px]  my-4" v-for="(i, ii) in navList">
+          <div class="w-[200px]  my-4 sm:w-[150px] sm:my-1" v-for="(i, ii) in navList">
-            <n-button @click="link(i.menuLink)" class="btn w-full  hover:text-[white]" type="primary" ghost>
+            <n-button @click="link(i.menuLink)" @contextmenu="handdlemenutext($event, i)"
+              class="btn w-full  hover:text-[white]" type="primary" ghost>
               <template #icon>
-                <img class="rounded mr-2" v-if="!i.exp" width="20" height="20" :src="'https://favicon.im/' + i.menuLink.split('/')[2]" alt="" @error="i.exp = true">
+                <img class="rounded-full mr-2" v-if="!i.exp" width="20" height="20"
+                  :src="'https://favicon.im/' + i.menuLink.split('/')[2]" alt="" @error="i.exp = true">
                 <div :style="{ backgroundColor: '#50C4D3' }"
-                  class="w-[20px] h-[20px] text-[14px] text-[white] rounded-full"
+                  class="w-[20px] h-[20px] text-[14px] text-[white] rounded-full" v-else>{{ i.menuName[0] }}</div>
-                  v-else>{{ i.menuName[0] }}</div>
               </template>
-              {{ i.menuName }}
+              <span class="truncate">{{ i.menuName }}</span>
             </n-button>
           </div>
-          <div class="w-[200px]  my-4">
+          <div class="w-[200px]  my-4 sm:w-[150px] sm:my-1">
             <n-button @click="addMenu" class="btn w-full text-2xl hover:text-[white]" type="primary" ghost>
               +
             </n-button>
           </div>
         </div>
-
       </n-scrollbar>
 
     </n-card>
@@ -49,6 +49,17 @@
 
       </n-card>
     </n-modal>
+
+    <div class="munur bg-pp-900 py-2 px-1" v-if="menuShow"
+      :style="{ position: 'fixed', top: y + 'px', left: x + 'px' }">
+      <template v-for="i in menuList">
+        <n-button v-if="i.show" class="text-[white]" type="primary" :tertiary="!i.active"
+          @click="handdleclickmenu(i.id)" @mouseenter="handdleentermenu(i.id)" @mouseleave="handdleleavemenu(i.id)">{{
+            i.name
+          }}</n-button>
+      </template>
+    </div>
+
   </div>
 </template>
 
@@ -72,8 +83,23 @@ const showModal = ref(false)
 const formData = reactive({
   menuName: "",
   menuLink: "",
-  menuIcon:"#"
+  menuIcon: "#"
 })
+const menuList = ref([
+  {
+    id: 1,
+    name: "删除导航",
+    active: false,
+    show: true,
+  },
+])
+const menuShow = ref(false)
+const x = ref(0)
+const y = ref(0)
+const menuSelect = ref(0)
+let imgTimer = null
+
+
 //mark method
 async function getNav() {
   let res = {}
@@ -85,6 +111,8 @@ async function getNav() {
   }
   navList.value = res.data.map((item) => {
     item.exp = false
+    item.active = false
+    item.show = true
     return item
   })
 }
@@ -111,7 +139,7 @@ function addMenu() {
   }
 }
 
-async function onSubmit() { 
+async function onSubmit() {
   if (!formData.menuName) {
     $msg.error("请输入导航名称");
     return
@@ -138,6 +166,73 @@ function onCancel() {
 function link(url) {
   window.open(url, "_blank")
 }
+
+function handdleclickmenu(id) {
+  switch (id) {
+    case 1:
+      deleteMenu()
+      break;
+  }
+  menuShow.value = false
+  resetMenuList()
+}
+function deleteMenu() {
+  $dialog.warning({
+    title: '删除',
+    content: '你确定删除此导航？',
+    positiveText: '确定',
+    negativeText: '取消',
+    maskClosable: true,
+    onPositiveClick: () => {
+      $http.nav.deleteMenu(menuSelect.value).then(res => {
+        if (res.code == 1) {
+          $msg.success(res.msg);
+          getNav()
+        }
+        else {
+          $msg.error(res.msg);
+        }
+      })
+    }
+  })
+}
+function handdleentermenu(id) {
+  menuList.value[id - 1].active = true;
+  imgTimer && clearTimeout(imgTimer)
+}
+function handdleleavemenu(id) {
+  menuList.value[id - 1].active = false;
+  imgTimer = setTimeout(() => {
+    menuShow.value = false
+    resetMenuList()
+  }, 2000);
+}
+function handdlemenutext(e, i) {
+  // console.log(e, i);
+  menuShow.value = false
+  const { clientX, clientY } = e;
+  x.value = clientX;
+  y.value = clientY;
+  menuShow.value = true;
+  menuSelect.value = i.id
+  console.log(i.id);
+  imgTimer && clearTimeout(imgTimer)
+  imgTimer = setTimeout(() => {
+    menuShow.value = false
+    resetMenuList()
+  }, 2000);
+}
+function resetMenuList() {
+  menuList.value = ([
+    {
+      id: 1,
+      name: "删除导航",
+      active: false,
+      show: true,
+    },
+  ])
+}
+
 //mark 周期、内置函数等
 onMounted(() => {
   getNav()
@@ -214,4 +309,30 @@ onMounted(() => {
   padding: 30px;
   background: #f1f2f370;
 }
+
+@media screen and (max-width: 767px) {
+  :deep(.n-card) {
+    padding: 10px;
+    background: #f1f2f320;
+    border: none;
+  }
+
+  :deep(.n-card__content, ) {
+    padding: 0;
+  }
+
+  .gridSpace {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  }
+}
+
+
+.munur {
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
 </style>

src/views/home/side.vue

@@ -62,8 +62,7 @@
       </div>
       <!-- <template v-if="isBaidu"> -->
       <div class="list">
-        <div class=" hover:text-[#FF9003]" @click="gotonews(item.url)" v-for="(item, index) in baidu" :key="index"
+        <div class=" hover:text-[#FF9003]" @click="gotonews(item.url)" v-for="(item, index) in baidu" :key="index">
-          v-show="index < 10">
           <div v-if="index < 3" class="flex my-2 justify-between">
             <div class="hot flex items-center">
               <n-icon size="16" class=" orange mr-2">
@@ -74,23 +73,11 @@
             <div class="text-pp-500">{{ item.hotValue }}</div>
           </div>
 
-          <div v-if="index > 2 && isBaidu" class="flex my-2 justify-between">
+          <div v-if="index > 2" class="flex my-2 justify-between">
             <div>{{ item.keyword }}</div>
             <div class="text-pp-500">{{ item.hotValue }}</div>
           </div>
         </div>
-        <n-divider v-if="!isBaidu">
-          <div class="flex items-center" @click="isBaidu = !isBaidu">
-            更多<n-icon size="20" class="tiao mx-2">
-              <more />
-            </n-icon>
-          </div>
-        </n-divider>
-        <n-divider v-else>
-          <div class="flex items-center" @click="isBaidu = !isBaidu">
-            收起
-          </div>
-        </n-divider>
       </div>
       <!-- </template> -->
     </div>
@@ -102,7 +89,6 @@
 import offwork from '@/assets/offwork.webp';
 import onwork from '@/assets/onwork.webp';
 import hot from "@/icon/hot.svg";
-import more from "@/icon/more.svg";
 import { formatTime } from '@/util/index.js';
 import ww from 'chinese-workday';
 import { onMounted, ref } from 'vue';
@@ -127,7 +113,7 @@ const jq = await $http.wea.getJq()
 const j = jq.data.solarTerms.slice(0, 2)
 const jNum = jqs.indexOf(j) + 1
 jqImg.value = 'https://www.hxyouzi.com/img/jieqi/' + jNum + '.jpg'
-const isBaidu = ref(true);
+// const isBaidu = ref(true);
 const baidu = ref({})
 
 // const holi = await $http.wea.getNextHoliday()