eta1.7.8 init 顺便去掉Header的警告

package.json

@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.0-beta.0",
+    "@fullcalendar/core": "^5.10.1",
+    "@fullcalendar/daygrid": "^5.10.1",
+    "@fullcalendar/interaction": "^5.10.1",
+    "@fullcalendar/vue3": "^5.10.1",
     "@vueuse/core": "^9.0.0",
     "axios": "^0.26.0",
     "element-plus": "^2.0.2",

src/layout/component/Aside.vue

@@ -73,12 +73,19 @@ let menuList = reactive([
     icon_path: new URL('../../assets/leftNav/positionAnalysis-s.png', import.meta.url).href,
     children: null,
   },
-  {
+  /* {
     MenuId: 3,
     name: "活动",
     path: "/activity/list",
     icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
     children: null,
+  }, */
+  {
+    MenuId: 3,
+    name: "日历表",
+    path: "/forexCalendar/index",
+    icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
+    children: null,
   },
   {
     MenuId: 4,

src/layout/component/Header.vue

@@ -202,18 +202,18 @@ const goYBPCEN=()=>{
     <div class="flex-col-center userinfo-wrap">
       <img src="@/assets/icon-yben.png" class="yben-icon" @click="goYBPCEN" v-if="!isInMini"/>
       <!-- 我的收藏 -->
-      <el-popover trigger="click" @show="showCollect=true" @hide="showCollect=false" :width="460" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
+      <el-popover v-if="userInfo" trigger="click" @show="showCollect=true" @hide="showCollect=false" :width="460" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
         <template #reference>
-          <img v-if="userInfo" style="width:26px;height:25px;margin-right:21px;position: relative;top:-2px" src="@/assets/icon-start.png" alt="">
+          <img style="width:26px;height:25px;margin-right:21px;position: relative;top:-2px" src="@/assets/icon-start.png" alt="">
         </template>
         <template #default>
           <MyCollect :show="showCollect"/>
         </template>
       </el-popover>
       <!-- 消息 -->
-      <el-popover trigger="click" :width="439" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
+      <el-popover v-if="userInfo" trigger="click" :width="439" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
         <template #reference>
-          <el-badge v-if="userInfo" :value="$store.state.userInfo.un_read" :hidden="$store.state.userInfo.un_read==0">
+          <el-badge :value="$store.state.userInfo.un_read" :hidden="$store.state.userInfo.un_read==0">
             <img style="width:28px;height:28px" src="@/assets/icon-notice.png" alt="">
           </el-badge>
         </template>
@@ -240,12 +240,12 @@ const goYBPCEN=()=>{
         </template>
       </el-popover>
       <!-- 个人信息 -->
-      <el-popover :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
+      <el-popover v-if="userInfo" :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
         <template #reference>
-          <el-avatar shape="square" :size="40" v-if="userInfo" :src="$store.state.userInfo.head_img_url||$store.state.globalImgUrls.defaultAvatar"></el-avatar>
+          <el-avatar shape="square" :size="40" :src="$store.state.userInfo.head_img_url||$store.state.globalImgUrls.defaultAvatar"></el-avatar>
         </template>
         <template #default>
-          <div class="userinfo-box" v-if="userInfo">
+          <div class="userinfo-box">
             <div class="top" @click="handleSetUserInfo">
               <el-avatar shape="square" :size="50" :src="$store.state.userInfo.head_img_url||$store.state.globalImgUrls.defaultAvatar"></el-avatar>
               <p style="font-size: 20px">{{ userInfo.real_name || "--" }}</p>

src/router/index.js

@@ -515,6 +515,38 @@ const routes=[
       },
     ]
   },
+  //外汇日历表模块
+  {
+    path:"/forexCalendar",
+    name:"ForexCalendar",
+    component: () => import("@/layout/Index.vue"),
+    meta: {
+      title:"外汇日历表"
+    },
+    children:[
+      {
+        path:"index",
+        name:"ForexCalendarIndex",
+        component:()=>import('@/views/forexCalendar/Index.vue'),
+        meta: {
+          title: "日历表",
+          keepAlive:false,
+          isRoot:true
+        }
+      },
+      {
+        path:"detail",
+        name:"ForexCalendarDetail",
+        component:()=>import('@/views/forexCalendar/EdbDetail.vue'),
+        meta: {
+          title: "事项详情",
+          keepAlive:false,
+          isRoot:false,
+          hasBack:true
+        }
+      },
+    ]
+  },
 
   {
     path: '/:pathMatch(.*)',

src/views/forexCalendar/EdbDetail.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, reactive } from 'vue'
+</script>
+
+<template>
+    <div>
+        指标详情页
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/forexCalendar/Index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref, reactive } from 'vue'
+import BaseCalendar from './components/BaseCalendar.vue'
+
+let variety = ref('')
+let monthValue = ref('')
+
+</script>
+
+<template>
+    <div class="forex-calendar-wrap">
+        <div class="calendar-header">
+            <el-select v-model="variety">
+                <el-option label="1" value="1"></el-option>
+            </el-select>
+            外汇日历表
+            <el-date-picker v-model="monthValue"></el-date-picker>
+        </div>
+        <BaseCalendar></BaseCalendar>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.forex-calendar-wrap{
+    min-height: 600px;
+    display: flex;
+    flex-direction: column;
+    .calendar-header{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+}
+</style>

src/views/forexCalendar/components/BaseCalendar.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { ref, reactive } from 'vue'
+
+import '@fullcalendar/core/vdom'; // solve problem with Vite
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+
+const props = defineProps({
+    showMark:{
+        type:Boolean,
+        default:true
+    },
+    markText:{
+        type:Object,
+        default:{
+            date:'当前日期',
+            type:'当前品种'
+        }
+    },
+
+})
+
+let FullCalendarRef = ref(null)
+let calendarOptions = ref({
+    height:'100%',
+    locale: "zh-cn",
+    plugins: [ dayGridPlugin, interactionPlugin ],
+    initialView:'dayGridMonth',
+    headerToolbar:false,//不显示头部信息
+    weekNumberCalculation:'ISO',//从周一开始
+    dayHeaderFormat:{ //https://fullcalendar.io/docs/v5/date-formatting
+        weekday:'narrow', //头部星期显示为一 二 三...
+    },
+    dayCellContent:function(arg){ //单元格日期显示为 1 2 3...
+        return arg.date.getDate()
+    },
+})
+</script>
+
+<template>
+    <div class="base-calendar-wrap">
+        <FullCalendar :options="calendarOptions" ref="FullCalendarRef" class="full-calendar-wrap">
+        </FullCalendar>
+        <div class="water-mark" v-if="showMark">
+            <p>{{ markText.date }}</p>
+            <p>{{ markText.type }}</p>
+        </div>
+    </div>
+    
+</template>
+
+<style scoped lang="scss">
+.base-calendar-wrap{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position:relative;
+    .full-calendar-wrap{
+        flex:1;
+        .popper-content{
+            cursor: pointer;
+        }
+        :deep(.fc-daygrid-day-top){ //日期偏左显示
+            flex-direction: row;
+        }
+        :deep(.fc-daygrid-event){
+            border-radius: 0;
+            margin:0 !important;
+        }
+    }
+    .water-mark{
+        position: absolute;
+        top:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 64px;
+        opacity: 0.3;
+        p{
+            margin:0;
+            padding:0;
+        }
+    }
+}
+</style>

src/views/forexCalendar/components/EventListDialog.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, reactive } from 'vue'
+</script>
+
+<template>
+    <div>
+        事项列表弹窗
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>