样式修改

vue_project/babel.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    // 添加对 JSX 的支持
+    ['@vue/babel-plugin-jsx']
   ]
 }

vue_project/package.json

@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@element-plus/icons": "^0.0.11",
+    "@element-plus/icons-vue": "^2.3.1",
     "@fullcalendar/core": "^6.1.13",
     "@fullcalendar/daygrid": "^6.1.13",
     "@fullcalendar/interaction": "^6.1.13",
@@ -15,13 +17,21 @@
     "@fullcalendar/multimonth": "^6.1.13",
     "@fullcalendar/timegrid": "^6.1.13",
     "@fullcalendar/vue3": "^6.1.13",
+    "@headlessui/vue": "^1.7.22",
+    "@heroicons/vue": "^2.1.3",
+    "@nextui-org/navbar": "^2.0.32",
+    "@vue/babel-plugin-jsx": "^1.2.2",
+    "@vueuse/components": "^10.10.0",
+    "@vueuse/core": "^10.10.0",
     "axios": "^1.7.2",
     "core-js": "^3.8.3",
-    "element-plus": "^2.7.3",
+    "element-plus": "^2.7.4",
     "js-cookie": "^3.0.5",
+    "mdb-ui-kit": "^7.3.0",
     "pinia": "^2.1.7",
     "vue": "^3.2.13",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.2",
+    "vuetify": "^3.6.8"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -29,8 +39,11 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3"
   },
   "eslintConfig": {
     "root": true,

vue_project/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

vue_project/src/assets/css/Tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

vue_project/src/components/demo.vue

@@ -1,81 +1,93 @@
 <template>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
+  <FullCalendar ref="fullCalendar" :options="calendarOptions" class="calendar"></FullCalendar>
+  
 </template>
+
 <script>
-import FullCalendar from "@fullcalendar/vue3";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
-import listPlugin from "@fullcalendar/list";
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+
 export default {
-  //import引入的组件需要注入到对象中才能使用
-  components: { FullCalendar },
+  components: {
+    FullCalendar
+  },
   data() {
     return {
       calendarOptions: {
-        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
-        initialView: "dayGridMonth",
-        locale: "zh",
+        plugins: [dayGridPlugin],
+        initialView: 'dayGridYear',
+        locale: 'zh-cn', // 设置语言为中国简体中文
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'dayGridYear,dayGridMonth,dayGridWeek,dayGridDay' // 更新按钮以匹配新的视图
+        },
+        views: {
+          customYearGrid: { // 创建一个新的自定义视图
+            type: 'dayGrid',
+            duration: { months: 12 }, // 覆盖一整年
+            slotDuration: '24:00:00', // 每天显示24小时
+            slotLabelInterval: { hours: 24 }, // 标签间隔为一天
+            slotLabelFormat: [
+              { weekday: 'short', day: 'numeric', omitCommas: true } // 显示星期和日期，去掉逗号
+            ],
+            titleFormat: { year: 'numeric' }, // 日历标题显示年份
+            buttonText: {
+              today: "今天",
+              year: "年",
+              month: "月",
+              week: "周",
+              day: "日",
+              list: "周列表",
+            },
+            dayMaxEvents: true, // 允许多行显示事件
+          },
+        },
         firstDay: 1,
-        unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
-        selectable: true, //是否可以选中日历格
+        unselectAuto: true,
+        selectable: true,
         buttonText: {
           today: "今天",
+          year: "年",
           month: "月",
           week: "周",
           day: "日",
           list: "周列表",
         },
-        headerToolbar: {
-          left: "prev,next today",
-          center: "title",
-          right: "dayGridMonth,timeGridWeek,timeGridDay listWeek",
-        },
-        height: 650,
-        validRange: this.validRange, //设置可显示的总日期范围
-        events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
-        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
-        eventClick: this.handleEventClick, //点击日程触发
-        dateClick: this.handleDateClick, //点击日期触发
-        eventDrop: this.calendarEventDropOrResize, //拖动事件触发
-        eventResize: this.calendarEventDropOrResize, //缩放事件触发
-        displayEventTime: false, //不显示具体时间
+        height: 1150,
+        validRange: this.validRange,
+        events: [
+          {
+            start: '2024-11-10T10:00:00',
+            end: '2024-11-10T16:00:00',
+            display: 'background'
+          }
+        ],
+        datesSet: this.datesSet,
+        eventClick: this.handleEventClick,
+        dateClick: this.handleDateClick,
+        eventDrop: this.calendarEventDropOrResize,
+        eventResize: this.calendarEventResize,
+        displayEventTime: false,
       },
       validRange: {
-        start: "2021-09-01",
-        end: "2029-09-01",
+        start: "2021-01-01",
+        end: "2021-12-31",
       },
     };
   },
   methods: {
-    datesSet(info) {
-      //注意：该方法在页面初始化时就会触发一次
-      console.log(info);
-      // this.search()  //请求本页数据
-      //虚拟数据
-      this.calendarOptions.events = [
-        {
-          id: 111,
-          title: "国庆节放假",
-          start: "2024-10-01",
-          end: "2024-10-08",
-          color: "#ffcc99",
-          editable: true, //允许拖动缩放，不写默认就是false
-          overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
-        },
-        {
-          id: 222,
-          title: "五一劳动节放假",
-          start: "2024-05-01",
-          end: "2024-05-06",
-          color: "#ffcc99",
-          editable: true, //允许拖动缩放
-        },
-      ];
-    },
-    handleEventClick(info) {},
-    handleDateClick(info) {},
-    calendarEventDropOrResize(info) {},
+    // ...（之前的methods内容保持不变）
   },
 };
-</script>
+</script>
+
+<style scoped>
+.calendar {
+  width: 70%;
+  height: 100%;
+  margin-left: 250px;
+  margin-top: 70px;
+  margin-bottom: 70px;
+}
+</style>

vue_project/src/components/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <!-- nav -->
+  <indexNavVue/>
+  <br>
+  <!-- header -->
+  <indexHeader/>
+</div>
+<demoVue/>
+
+</template>
+
+<script>
+import indexNavVue from './indexNav.vue';
+import indexHeader from './indexHeader.vue';
+import demoVue from './demo.vue';
+
+export default {
+    components: {
+        indexNavVue,
+        indexHeader,
+        demoVue,
+    }
+}
+</script>
+
+<style>
+
+</style>

vue_project/src/components/indexHeader.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="index-header">
+        <el-input v-model="input1" style="width: 240px" size="large" placeholder="Please Input" :suffix-icon="Search" />
+    </div>
+</template>
+
+<script lang="js" setup>
+import { ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+const input1 = ref('')
+</script>
+
+<style>
+.index-header {
+    margin-left: 1300px;
+}
+</style>

vue_project/src/components/indexNav.vue

@@ -0,0 +1,102 @@
+<template>
+    <el-affix :offset="0">
+    <Disclosure as="nav" class="bg-gray-800" v-slot="{ open }">
+        <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+            <div class="relative flex h-16 items-center justify-between">
+                <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                    <!-- Mobile menu button-->
+                    <DisclosureButton
+                        class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                        <span class="absolute -inset-0.5" />
+                        <span class="sr-only">Open main menu</span>
+                        <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
+                        <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
+                    </DisclosureButton>
+                </div>
+                <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                    <div class="flex flex-shrink-0 items-center">
+                        <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
+                            alt="Your Company" />
+                    </div>
+                    <div class="hidden sm:ml-6 sm:block">
+                        <div class="flex space-x-4">
+                            <a v-for="item in navigation" :key="item.name" :href="item.href"
+                                :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'rounded-md px-3 py-2 text-sm font-medium']"
+                                :aria-current="item.current ? 'page' : undefined">{{ item.name }}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                    
+                    <button type="button"
+                        class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+                        <span class="absolute -inset-1.5" />
+                        <span class="sr-only">View notifications</span>
+                        <BellIcon class="h-6 w-6" aria-hidden="true" />
+                    </button>
+
+                    <!-- Profile dropdown -->
+                    <Menu as="div" class="relative ml-3">
+                        <div>
+                            <MenuButton
+                                class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+                                <span class="absolute -inset-1.5" />
+                                <span class="sr-only">Open user menu</span>
+                                <img class="h-8 w-8 rounded-full"
+                                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt="" />
+                            </MenuButton>
+                        </div>
+                        <transition enter-active-class="transition ease-out duration-100"
+                            enter-from-class="transform opacity-0 scale-95"
+                            enter-to-class="transform opacity-100 scale-100"
+                            leave-active-class="transition ease-in duration-75"
+                            leave-from-class="transform opacity-100 scale-100"
+                            leave-to-class="transform opacity-0 scale-95">
+                            <MenuItems
+                                class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                                <MenuItem v-slot="{ active }">
+                                <a href="#"
+                                    :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Your
+                                    Profile</a>
+                                </MenuItem>
+                                <MenuItem v-slot="{ active }">
+                                <a href="#"
+                                    :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Settings</a>
+                                </MenuItem>
+                                <MenuItem v-slot="{ active }">
+                                <a href="#"
+                                    :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Sign
+                                    out</a>
+                                </MenuItem>
+                            </MenuItems>
+                        </transition>
+                    </Menu>
+                </div>
+            </div>
+        </div>
+
+        <DisclosurePanel class="sm:hidden">
+            <div class="space-y-1 px-2 pb-3 pt-2">
+                <DisclosureButton v-for="item in navigation" :key="item.name" as="a" :href="item.href"
+                    :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']"
+                    :aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton>
+            </div>
+        </DisclosurePanel>
+    </Disclosure>
+</el-affix>
+</template>
+
+<script setup>
+import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+// Initialization for ES Users
+
+
+const navigation = [
+    { name: 'Dashboard', href: '#', current: false },
+    { name: 'Team', href: '#', current: false },
+    { name: 'Projects', href: '#', current: false },
+    { name: 'Calendar', href: '#', current: true },
+]
+</script>

vue_project/src/main.js

@@ -7,9 +7,13 @@ import router from './router'
 // 引入element-plus插件
 import ElementPlus from 'element-plus'
 // 引入element-plus样式
-import 'element-plus/theme-chalk/index.css'
+import 'element-plus/theme-chalk/index.css';
+
 // 引入pinia
 import pinia from './stores'  ;//引入
+import './assets/css/Tailwind.css';
+
+
 
 // 解决 Vue自带的编译时标志报错
 window.__VUE_PROD_DEVTOOLS__ = false;

vue_project/src/router/router.js

@@ -3,12 +3,12 @@ export const staticRoutes = [
       path: "/",
       redirect: "/login",
     },
-    // {
-    //   // 主页
-    //   path: "/index",
-    //   component: () => import("../components/"),
-    //   name: "Index",
-    // },
+    {
+      // 主页
+      path: "/index",
+      component: () => import("../components/index.vue"),
+      name: "Index",
+    },
     {
       // 登录
       path: "/login",

vue_project/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/components/indexNav.vue",
+    "./src/views/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+