Merge remote-tracking branch 'origin/master'

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,13 +8,30 @@
     "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",
+    "@fullcalendar/list": "^6.1.13",
+    "@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",
@@ -22,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,
@@ -44,5 +64,9 @@
     "last 2 versions",
     "not dead",
     "not ie 11"
-  ]
+  ],
+  "description": "```\r npm install\r ```",
+  "main": "babel.config.js",
+  "author": "",
+  "license": "ISC"
 }

vue_project/postcss.config.js

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

vue_project/src/App.vue

@@ -1,26 +1,13 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <!-- 路由占位符    指定组件的出现位置-->
+  <router-view></router-view>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
+
 </style>

vue_project/src/api/index.js

@@ -2,28 +2,26 @@ import request from "@/utils/request"
 
 //登录的接口
 export const login = (data) => {
-  return request.post("user/login", data);
-};
-//获取用户信息的接口
-export const getUserInfo = (info) => {
-  return request.get("user/getUserInfo");
+  return request.post("/login", data);
 };
 
-//注册校验的接口 
-export const registerValidateApi = (username) => {
+// 注册获取验证码的接口 
+export const registerVerify = (account) => {
   return request({
     method: "post",
-    url: "user/checkUserName",
+    url: "register/verify",
     headers: {
-      "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
+      "Content-Type": "application/json",
     },
-    data: `username=${username}`
+    data: `phone:${account}`
   })
 };
 
+
+
 // 注册的接口
 export const registerApi = (userInfo) => {
-  return request.post("user/register", userInfo)
+  return request.post("/register", userInfo)
 }
 
 

vue_project/src/assets/css/Tailwind.css

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

vue_project/src/assets/css/style.css

@@ -0,0 +1,266 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.content {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(82, 84, 97);
+  position: relative;
+}
+.content .wrapper {
+  width: 70%;
+  height: 80%;
+  border-radius: 20px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-image: linear-gradient(to right top, rgb(40, 42, 55) 0%, rgb(40, 42, 55) 20%, rgba(40, 42, 55, 0.9) 60%, rgba(40, 42, 55, 0.4) 100%), url(../images/bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: top;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 80px;
+  box-sizing: border-box;
+}
+.content .wrapper .form-wrapper {
+  width: 100%;
+  height: 50vh;
+  position: relative;
+  top: -10px;
+}
+.content .wrapper .form-wrapper .login-form,
+.content .wrapper .form-wrapper .signup-form {
+  position: absolute;
+  transition: 0.5s;
+}
+.content .wrapper .form-wrapper .login-form .tips,
+.content .wrapper .form-wrapper .signup-form .tips {
+  color: #fff;
+}
+.content .wrapper .form-wrapper .login-form .tips h1,
+.content .wrapper .form-wrapper .signup-form .tips h1 {
+  font-size: 45px;
+  margin: 20px 0;
+  font-family: "Newake", Times, serif;
+  letter-spacing: 2px;
+}
+.content .wrapper .form-wrapper .login-form .tips span,
+.content .wrapper .form-wrapper .signup-form .tips span {
+  margin: 0 0 25px 0;
+  font-family: "Century Gothic", Times, serif;
+}
+.content .wrapper .form-wrapper .login-form .tips span:first-child,
+.content .wrapper .form-wrapper .signup-form .tips span:first-child {
+  color: #d1d1d1;
+}
+.content .wrapper .form-wrapper .login-form .tips span:last-child,
+.content .wrapper .form-wrapper .signup-form .tips span:last-child {
+  color: rgb(29, 144, 245);
+  cursor: pointer;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper {
+  position: relative;
+  margin: 30px 0;
+  transition: 0.5s;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper .inputs,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper .inputs {
+  width: 100%;
+  height: 70px;
+  display: block;
+  border-radius: 18px;
+  border: 0;
+  background-color: rgb(50, 54, 69);
+  color: #fff;
+  padding: 20px 60px 0px 30px;
+  box-sizing: border-box;
+  outline: none;
+  font-size: 15px;
+  font-weight: 600;
+  font-family: "Century Gothic", Times, serif;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper .inputs:focus,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper .inputs:focus {
+  border: 1px solid rgb(21, 139, 243);
+  box-shadow: 0 0 1px 1px rgb(21, 139, 243);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper::before,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper::before {
+  display: inline-block;
+  width: 50px;
+  height: 10px;
+  color: rgb(113, 114, 119);
+  position: absolute;
+  top: 10px;
+  left: 30px;
+  white-space: nowrap;
+  font-family: "Century Gothic", Times, serif;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .input-wrapper::after,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .input-wrapper::after {
+  content: "";
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 36px;
+  right: 10px;
+  background-size: 50%;
+  background-repeat: no-repeat;
+  z-index: 1;
+  white-space: nowrap;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .user::before,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .user::before {
+  content: "Email";
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .user::after,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .user::after {
+  background-image: url(../images/email.png);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .pwd input,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .pwd input {
+  letter-spacing: 2px;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .pwd::before,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .pwd::before {
+  content: "Password";
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .pwd::after,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .pwd::after {
+  background-image: url(../images/password.png);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .veri-code,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .veri-code {
+  opacity: 0;
+  z-index: -1;
+  position: relative;
+  transition: 0.5s;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .veri-code .veri-code-input,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .veri-code .veri-code-input {
+  padding-right: 200px;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .veri-code .veri-code-tips,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .veri-code .veri-code-tips {
+  position: absolute;
+  right: 20px;
+  top: 36px;
+  color: rgb(39, 150, 247);
+  cursor: pointer;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .veri-code::before,
+.content .wrapper .form-wrapper .signup-form .form-wrapper .veri-code::before {
+  content: "Verification Code";
+}
+.content .wrapper .form-wrapper .login-form .form-btn,
+.content .wrapper .form-wrapper .signup-form .form-btn {
+  width: 100%;
+  height: 60px;
+  background-color: rgb(0, 129, 241);
+  color: #fff;
+  border-radius: 50px;
+  border: 0;
+  font-size: 20px;
+  font-weight: 600;
+  margin: 15px auto;
+  cursor: pointer;
+  font-family: "Century Gothic", Times, serif;
+}
+.content .wrapper .form-wrapper .login-form {
+  z-index: 1;
+  opacity: 1;
+  animation: loginAnimation 1s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper {
+  display: flex;
+  transform: translate(0, -90px);
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper .login-btn {
+  flex: 1;
+  margin-left: 10px;
+  transition: 0.5s;
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper .login-btn:hover {
+  background-color: rgb(39, 150, 247);
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper .other-login-btn {
+  flex: 1;
+  margin-right: 10px;
+  transition: 0.5s;
+  background-color: rgb(85, 91, 105);
+}
+.content .wrapper .form-wrapper .login-form .btn-wrapper .other-login-btn:hover {
+  background-color: rgb(101, 109, 126);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login {
+  transform: translate(0, -60%);
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .divider {
+  width: 100%;
+  margin: 20px 0;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .divider .line {
+  display: inline-block;
+  max-width: 45%;
+  width: 45%;
+  flex: 1;
+  height: 1px;
+  background-color: #fff;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .divider .divider-text {
+  vertical-align: middle;
+  margin: 0px 20px;
+  line-height: 0;
+  display: inline-block;
+  width: 50px;
+  color: #fff;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .other-login-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .other-login-wrapper .other-login-item {
+  border: 1px solid #fff;
+  padding: 10px;
+  text-align: center;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 600;
+  color: rgb(51, 49, 116);
+  margin: 0 10px;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .other-login-wrapper .other-login-item img {
+  width: 30px;
+  height: 30px;
+  vertical-align: middle;
+}
+.content .wrapper .form-wrapper .login-form .form-wrapper .other-login .other-login-wrapper .other-login-item span {
+  vertical-align: middle;
+}
+.content .wrapper .form-wrapper .signup-form {
+  opacity: 0;
+}
+
+@keyframes loginAnimation {
+  0% {
+    transform: translate(0, 100px);
+  }
+  100% {
+    transform: translate(0, 0px);
+  }
+}/*# sourceMappingURL=style.css.map */

vue_project/src/assets/css/style.scss

@@ -0,0 +1,268 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+.content {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(82, 84, 97);
+    position: relative;
+    .wrapper {
+        width: 70%;
+        height: 80%;
+        border-radius: 20px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background-image: linear-gradient(
+                to right top,
+                rgba(40, 42, 55, 1) 0%,
+                rgba(40, 42, 55, 1) 20%,
+                rgba(40, 42, 55, 0.9) 60%,
+                rgba(40, 42, 55, 0.4) 100%
+            ),
+            url(../images/bg.jpg);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: top;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 80px;
+        box-sizing: border-box;
+        .form-wrapper {
+            width: 100%;
+            height: 50vh;
+            position: relative;
+            top: -10px;
+            .login-form,
+            .signup-form {
+                position: absolute;
+                transition: 0.5s;
+                .tips {
+                    color: #fff;
+                    h1 {
+                        font-size: 45px;
+                        margin: 20px 0;
+                        font-family: "Newake", Times, serif;
+                        letter-spacing: 2px;
+                    }
+                    span {
+                        margin: 0 0 25px 0;
+                        font-family: "Century Gothic", Times, serif;
+                    }
+                    span:first-child {
+                        color: #d1d1d1;
+                    }
+                    span:last-child {
+                        color: rgb(29, 144, 245);
+                        cursor: pointer;
+                    }
+                }
+                .form-wrapper {
+                    .input-wrapper {
+                        position: relative;
+                        margin: 30px 0;
+                        transition: 0.5s;
+                        .inputs {
+                            width: 100%;
+                            height: 70px;
+                            display: block;
+                            border-radius: 18px;
+                            border: 0;
+                            background-color: rgb(52, 50, 69);
+                            color: #fff;
+                            padding: 20px 60px 0px 30px;
+                            box-sizing: border-box;
+                            outline: none;
+                            font-size: 15px;
+                            font-weight: 600;
+                            font-family: "Century Gothic", Times, serif;
+                            &:focus {
+                                border: 1px solid rgb(21, 139, 243);
+                                box-shadow: 0 0 1px 1px rgb(21, 139, 243);
+                            }
+                        }
+                        &::before {
+                            display: inline-block;
+                            width: 50px;
+                            height: 10px;
+                            color: rgb(113, 114, 119);
+                            position: absolute;
+                            top: 10px;
+                            left: 30px;
+                            white-space: nowrap;
+                            font-family: "Century Gothic", Times, serif;
+                        }
+                        &::after {
+                            content: "";
+                            display: inline-block;
+                            width: 40px;
+                            height: 40px;
+                            position: absolute;
+                            top: 36px;
+                            right: 10px;
+                            background-size: 50%;
+                            background-repeat: no-repeat;
+                            z-index: 1;
+                            white-space: nowrap;
+                        }
+                    }
+                    .user {
+                        &::before {
+                            content: "Email";
+                        }
+                        &::after {
+                            background-image: url(../images/email.png);
+                        }
+                    }
+                    .pwd {
+                        input {
+                            letter-spacing: 2px;
+                        }
+                        &::before {
+                            content: "Password";
+                        }
+                        &::after {
+                            background-image: url(../images/password.png);
+                        }
+                    }
+                    .veri-code {
+                        opacity: 0;
+                        z-index: -1;
+                        position: relative;
+                        transition: 0.5s;
+                        .veri-code-input {
+                            padding-right: 200px;
+                        }
+                        .veri-code-tips {
+                            position: absolute;
+                            right: 20px;
+                            top: 36px;
+                            color: rgb(39, 150, 247);
+                            cursor: pointer;
+                        }
+                        &::before {
+                            content: "Verification Code";
+                        }
+                    }
+                }
+                .form-btn {
+                    width: 100%;
+                    height: 60px;
+                    background-color: rgb(0, 129, 241);
+                    color: #fff;
+                    border-radius: 50px;
+                    border: 0;
+                    font-size: 20px;
+                    font-weight: 600;
+                    margin: 15px auto;
+                    cursor: pointer;
+                    font-family: "Century Gothic", Times, serif;
+                }
+            }
+            .login-form {
+                z-index: 1;
+                opacity: 1;
+                animation: loginAnimation 1s;
+                animation-fill-mode: forwards;
+                animation-timing-function: ease;
+                .btn-wrapper {
+                    display: flex;
+                    transform: translate(0, -90px);
+                    .login-btn {
+                        flex: 1;
+                        margin-left: 10px;
+                        transition: 0.5s;
+                        &:hover {
+                            background-color: rgb(39, 150, 247);
+                        }
+                    }
+                    .other-login-btn {
+                        flex: 1;
+                        margin-right: 10px;
+                        transition: 0.5s;
+                        background-color: rgb(85, 91, 105);
+                        &:hover {
+                            background-color: rgb(101, 109, 126);
+                        }
+                    }
+                }
+                .form-wrapper {
+                    .other-login {
+                        transform: translate(0, -60%);
+                        .divider {
+                            width: 100%;
+                            margin: 20px 0;
+                            text-align: center;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            .line {
+                                display: inline-block;
+                                max-width: 45%;
+                                width: 45%;
+                                flex: 1;
+                                height: 1px;
+                                background-color: #fff;
+                            }
+                            .divider-text {
+                                vertical-align: middle;
+                                margin: 0px 20px;
+                                line-height: 0;
+                                display: inline-block;
+                                width: 50px;
+                                color: #fff;
+                            }
+                        }
+                        .other-login-wrapper {
+                            width: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            .other-login-item {
+                                border: 1px solid #fff;
+                                padding: 10px;
+                                text-align: center;
+                                border-radius: 10px;
+                                cursor: pointer;
+                                font-weight: 600;
+                                color: rgb(51, 49, 116);
+                                margin: 0 10px;
+                                img {
+                                    width: 30px;
+                                    height: 30px;
+                                    vertical-align: middle;
+                                }
+                                span {
+                                    vertical-align: middle;
+                                }
+
+                                &:hover {
+                                    width: 80px;
+                                    height: 50%;
+                                    background-color: #ccc;
+                                    border: 0;
+                                    box-shadow: -20px 10px 32px 1px rgba(182, 183, 185, 0.37);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .signup-form {
+                opacity: 1;
+            }
+        }
+    }
+}
+@keyframes loginAnimation {
+    0% {
+        transform: translate(0, 100px);
+    }
+    100% {
+        transform: translate(0, 0px);
+    }
+}

vue_project/src/components/CalendarTable.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="calendar-table">
+    <table>
+      <thead>
+        <tr>
+          <th>日</th>
+          <th>一</th>
+          <th>二</th>
+          <th>三</th>
+          <th>四</th>
+          <th>五</th>
+          <th>六</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- 填充的月份数据 -->
+        <tr v-for="(week, weekIndex) in formattedCalendar" :key="weekIndex">
+          <td v-for="(day, dayIndex) in week" :key="dayIndex" :class="{ 'event': day.event }">
+            <span v-if="day.date !== null">{{ day.date }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CalendarTable',
+  data() {
+    // 起始和结束日期
+    const startDate = new Date(2023, 7, 26); // 2023年8月26日，注意月份减1
+    const endDate = new Date(2024, 1, 16); // 2024年2月16日，注意结束日期需加一天以包含该日
+
+    // 初始化日期数组并填充起始日期前的空位以对齐星期
+    let currentDate = new Date(startDate);
+    currentDate.setDate(currentDate.getDate() - currentDate.getDay()); // 回退到当周的周一
+    let calendarData = [];
+
+    while (currentDate <= endDate) {
+      calendarData.push(new Date(currentDate));
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+
+    // 将日期分组到每周
+    const weeks = [];
+    for (let i = 0; i < calendarData.length; i += 7) {
+      weeks.push(calendarData.slice(i, i + 7));
+    }
+
+    // 假设的事件数据，这里应根据实际需求添加
+    const events = {
+      '2023-08-26': '示例事件1', // 假定示例事件
+      // ...其他事件
+      '2024-02-16': '示例事件2' // 结束日期的事件
+    };
+
+    // 格式化日期并标记事件
+    const formattedCalendar = weeks.map(week =>
+      week.map(day => {
+        const dateString = day.toISOString().split('T')[0];
+        return {
+          date: day.getDate(),
+          event: events[dateString]
+        };
+      })
+    );
+
+    return {
+      formattedCalendar
+    };
+  }
+};
+</script>
+
+<style scoped>
+.calendar-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.calendar-table th,
+.calendar-table td {
+  border: 1px solid #ddd;
+  padding: 4px;
+  text-align: center;
+}
+
+.calendar-table th {
+  background-color: #ccc;
+  font-weight: bold;
+}
+
+.calendar-table td {
+  height: 50px;
+  width: 50px;
+  padding: 13px;
+}
+
+.calendar-table tr:nth-child(even) td {
+  background-color: #f8f8f8;
+}
+
+.calendar-table .event {
+  font-weight: bold;
+  color: purple;
+}
+
+.calendar-table td span {
+  display: block;
+  text-align: left;
+  margin-left: 5px;
+}
+</style>

vue_project/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

vue_project/src/components/LoginForm.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="content">
+    <div class="wrapper">
+      <div class="form-wrapper">
+        <div class="signup-form">
+          <div class="tips">
+            <h1>注册账号.</h1>
+            <span>已经有账号?</span>
+            <router-link to="/login"
+              ><span class="login-into">登录</span></router-link
+            >
+          </div>
+          <div class="form-wrapper">
+            <!-- 用户名 -->
+            <div class="input-wrapper user">
+              <input
+                type="text"
+                class="inputs"
+                v-model="registerForm.username"
+              />
+            </div>
+            <!-- 密码 -->
+            <div class="input-wrapper pwd">
+              <input
+                type="password"
+                class="inputs"
+                v-model="registerForm.password"
+              />
+            </div>
+            <!-- 电话号码 -->
+            <div class="input-wrapper phone">
+              <input
+                type="text"
+                class="inputs"
+                v-model="registerForm.account"
+              />
+            </div>
+            <!-- 验证码 -->
+            <div class="input-wrapper veri-code" style="opacity: 1; z-index: 1">
+              <input
+                type="text"
+                class="inputs veri-code-input"
+                v-model="registerForm.captcha"
+              />
+              <span class="veri-code-tips" @click="veriCodeTipsClick"
+                >Click To Get</span
+              >
+            </div>
+            <button class="form-btn" @click="">Sign Up</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import { ref } from "vue";
+import { registerVerify } from "../api/index";
+import { ElMessage } from "element-plus";
+
+let reckonTime; //计数器
+let reckonTimeFlag = 5; //倒计时
+const reckonFlag = ref(true); //重复点击判断
+
+const registerForm = ref({
+  username: "", //用户名
+  password: "", //密码
+  account: "", //手机号
+  captcha: "", //验证码
+});
+
+//定时器
+const countDown = () => {
+  // 设置验证码读取效果
+  let veriCodeTips = document.querySelector(".veri-code-tips");
+  veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`;
+  reckonTimeFlag--;
+  if (reckonTimeFlag < 0) {
+    clearInterval(reckonTime);
+    reckonTimeFlag = 5;
+    veriCodeTips.innerHTML = `Click To Get`;
+    veriCodeTips.style.color = "rgb(39, 150, 247)";
+  }
+};
+
+//点击事件触发的方法
+const veriCodeTipsClick = () => {
+  // 防止重复点击  重复触发计数器
+  if (registerForm.value.account == "" || registerForm.value.account == null) {
+    ElMessage.error("手机号不能为空");
+  } else {
+    if (!reckonFlag.value) {
+      return;
+    } else {
+      reckonFlag.value = false;
+      setTimeout(() => {
+        reckonFlag.value = true;
+      }, 5000);
+      let veriCodeTips = document.querySelector(".veri-code-tips");
+      veriCodeTips.style.color = "rgb(153, 151, 151)";
+      reckonTime = setInterval(countDown, 1000);
+      countDown();
+      getRegisterVerify();
+    }
+  }
+};
+
+// 验证码获取
+const getRegisterVerify = async () => {
+  ElMessage.success("手机号是:" + registerForm.value.account);
+  await registerVerify(registerForm.value.account).then(
+    (response) => {
+      ElMessage.success("验证码是：" + response);
+    },
+    (error) => {
+      console.log("注册失败");
+    }
+  );
+};
+
+// 注册校验
+const onRegister = async () => {
+  await registerApi(registerForm.value).then(
+    (response) => {
+      ElMessage.success("验证码是：" + response);
+    },
+    (error) => {
+      console.log("注册失败");
+    }
+  );
+};
+</script>
+
+<style scoped>
+@import url("../assets/css/style.css");
+@import url("../assets/css/style.scss");
+</style>

vue_project/src/components/RegisterForm.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="content">
+    <div class="wrapper">
+      <div class="form-wrapper">
+        <div class="signup-form">
+          <div class="tips">
+            <h1>注册账号.</h1>
+            <span>已经有账号?</span>
+            <router-link to="/login"><span class="login-into">登录</span></router-link>
+          </div>
+          <div class="form-wrapper">
+            <div class="input-wrapper user">
+              <input type="text" class="inputs">
+            </div>
+            <div class="input-wrapper pwd">
+              <input type="password" class="inputs">
+            </div>
+            <button class="form-btn">创建新账号</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+     
+    };
+  },
+  methods: {
+    
+  }
+
+};
+</script>
+
+<style scoped>
+  @import url('../assets/css/style.css');
+  @import url('../assets/css/style.scss');
+
+</style>

vue_project/src/components/demo.vue

@@ -0,0 +1,93 @@
+<template>
+  <FullCalendar ref="fullCalendar" :options="calendarOptions" class="calendar"></FullCalendar>
+  
+</template>
+
+<script>
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+
+export default {
+  components: {
+    FullCalendar
+  },
+  data() {
+    return {
+      calendarOptions: {
+        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,
+        selectable: true,
+        buttonText: {
+          today: "今天",
+          year: "年",
+          month: "月",
+          week: "周",
+          day: "日",
+          list: "周列表",
+        },
+        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-01-01",
+        end: "2021-12-31",
+      },
+    };
+  },
+  methods: {
+    // ...（之前的methods内容保持不变）
+  },
+};
+</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/components/test.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="8">
+        <div class="formBox">
+          <el-date-picker
+            size="small"
+            v-model="yearMonth"
+            type="month"
+            placeholder="选择月"
+            value-format="yyyy-MM"
+            :clearable="false"
+          >
+          </el-date-picker>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div style="text-align: center">
+          <el-button
+            type="primary"
+            size="mini"
+            icon="el-icon-caret-left"
+            circle
+          ></el-button>
+          <span class="dateText">{{ yearMonth }}</span>
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-caret-right"
+            circle
+          ></el-button>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div></div>
+      </el-col>
+    </el-row>
+  </div>
+  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";          //日历格子显示
+import interactionPlugin from "@fullcalendar/interaction";  //拖拽插件
+import timeGridPlugin from "@fullcalendar/timegrid";        //日历时间线视图
+const calendarOptions = reactive({
+  height: "100%",
+  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+  initialView: "timeGridWeek", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
+  weekends: true, // 显示周末
+  firstDay: 0, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推  new Date().getDay()当前天
+  locale: "zh-cn", // 切换语言，当前为中文
+  unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
+  selectable: true, //是否可以选中日历格
+});
+const calendarDate = ref("")
+const yearMonth = ref("")
+</script>
+
+
+<style>
+</style>

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

@@ -1,31 +1,43 @@
 export const staticRoutes = [
     {
       path: "/",
-      redirect: "/index",
+      redirect: "/login",
     },
     {
       // 主页
       path: "/index",
-      component: () => import("../components/HelloWorld.vue"),
+      component: () => import("../components/index.vue"),
       name: "Index",
     },
-    // {
-    //   // 登录
-    //   path: "/login",
-    //   component: () => import("../components/Login.vue"),
-    //   name: "Login",
-    // },
-    // {
-    //   //注册
-    //   path: "/register",
-    //   component: () => import("../components/Register.vue"),
-    //   name: "Register",
-    // },
+    {
+      // 登录
+      path: "/login",
+      component: () => import("../components/LoginForm.vue"),
+      name: "Login",
+    },
+    {
+      //注册
+      path: "/register",
+      component: () => import("../components/RegisterForm.vue"),
+      name: "Register",
+    },
+    {
+      //注册
+      path: "/test",
+      component: () => import("../components/test.vue"),
+      name: "test",
+    },
+    {
+      //注册
+      path: "/demo",
+      component: () => import("../components/demo.vue"),
+      name: "demo",
+    }
     // {
     //   //商品
-    //   path: "/order",
-    //   component: () => import("../components/order.vue"),
-    //   name: "order",
+    //   path: "/calendar",
+    //   component: () => import("../components/CalendarTable.vue"),
+    //   name: "calendar",
     //   meta:{isAuth:true}
     // },
     // {

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: [],
+}
+

vue_project/vue.config.js

@@ -3,4 +3,15 @@ module.exports = defineConfig({
   transpileDependencies: true,
   // 关闭语法检测
   lintOnSave: false,
+
+    // 代理服务器  解决跨域问题
+    devServer:{
+      port: 8080,
+      proxy:{
+        "api":{
+          target:"http://localhost:8888",
+          pathRewrite:{"^/api":""}
+        }
+      }
+    },
 })