搜索，历史记录等

README.md

@@ -39,6 +39,15 @@
 - 优化：每个IP和账号限制每天接口保存次数
 - 优化：个别Bug修复
 
+### 2023年8月20日更新
+- 新增：访客统计（博客首页展示总访问量，后台管理系统首页展示IP/地区/用户维度的访问统计）
+- 新增：搜索（标题与内容匹配。标题匹配放在上面，内容匹配放在下面。匹配多个标题或者多个内容时间倒叙排列）
+- 新增：音乐按照列表顺序播放，列表中最后一首歌播放完后停止
+- 新增：聊天室搜索功能（搜索框下的内容筛选）
+- 新增：后台管理系统【欢迎光临】
+- 优化：前端美化
+- 优化：个别Bug修复
+
 ### 首页
 ![首页](首页.jpg)
 
@@ -101,9 +110,13 @@ npm run build
 4. 漏洞反馈：欢迎提交BUG
 5. 迭代升级：欢迎提好的创意
 
-群名片七天有效，如果需要请加作者好友（请务必Star，并注明来源），然后拉进交流群（请按需加群，有问题先看文档再咨询网友，退群后删除好友）
-如果觉得群友对你有所帮助，希望能“发1元5元10元给个人或者拼手气红包”，或者“口头表达感谢”，非强制。
-每个人在遇到困难时都希望得到别人的帮助。同样，热心帮助他人的人也理应获得善待。
+群名片七天有效，如果需要请加作者好友（请务必Star，并注明来源），然后拉进交流群（请按需加群，有问题先看文档再咨询网友，退群后删除好友）。
+
+目前（2023年8月10）群活跃度较高，群友们相互帮助，热心答疑。群友们制作了全流程源码部署教程详细文档、宝塔部署教程、Docker部署教程等，使得项目逐渐完善。
+
+如果觉得群友对你有所帮助，希望能“发1元5元10元给个人或者拼手气红包”，或者“口头表达感谢”，为营造群内良好氛围出一份力，谢谢。
+
+希望大家一起让这个项目越来越好。
 
 ![个人名片](Sara.jpg)
 

src/components/admin/common/myHeader.vue

@@ -11,8 +11,8 @@
           <path
             d="M834.2 851c0 24.8-20.2 45-45 45H234.8c-24.8 0-45-20.2-45-45v-370h1.2l321.2-270 321.2 270h0.6l0.2 370z"
             fill="#FAD996"></path>
-          <path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z" fill="#F7C872"
-                p-id="16219"></path>
+          <path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z"
+                fill="#F7C872"></path>
           <path
             d="M62 548L432.6 166.2s81.2-90.6 171.8 0c79 79 343.6 400 343.6 400s-55.4 41-125.2 14.2c-37.8-14.4-118.2-68-133.4-150.8-11-60.2-45.8 29-60.8-38.2-9.4-42.2-67.2-96.6-67.2-96.6s-48.4-55.4-100.2 0c-13.8 14.8-11.4 134.6-44 128-26.4-5.2-20-105.6-27-81.2-9.6 33-25 61-54.4 47.2-33.2-15.6-42.4 79.6-64.8 112.8-17.2 25.4-23.8-45.8-40.4-29.2-21.2 21-2.4 94-39.4 108s-132.8-2-129.2-32.4z"
             fill="#F9F8F7"></path>

src/components/admin/common/sidebar.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="sidebar">
     <el-menu class="sidebar-el-menu"
-             default-active="/main"
              background-color="#ebf1f6"
              text-color="#606266"
              active-text-color="#20a0ff"

src/components/admin/main.vue

@@ -1,13 +1,190 @@
 <template>
   <div>
+    <div>
+      <el-tag effect="dark" class="my-tag">
+        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
+          <path
+            d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
+            fill="#8C7BFD"></path>
+          <path
+            d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
+            fill="#FFE37B"></path>
+        </svg>
+        统计信息
+      </el-tag>
 
+      <!-- 总览 -->
+      <div>
+        <div class="history-title">总览</div>
+        <div>
+          <div style="width: 400px;margin: 0 auto;display: flex;justify-content: center">
+            <div class="history-name" style="line-height: 35px">总访问量（每个IP每天记一次）:</div>
+            <div style="color:var(--maxLightRed);font-weight: bold;font-size: 30px;line-height: 35px">
+              {{historyInfo.ip_history_count}}
+            </div>
+          </div>
+          <div class="history-info" style="width: 640px">
+            <div style="margin-right: 40px">
+              <div class="history-name">省份访问TOP10</div>
+              <div>
+                <el-table :data="historyInfo.ip_history_province">
+                  <el-table-column
+                    type="index"
+                    align="center"
+                    width="60">
+                  </el-table-column>
+                  <el-table-column
+                    prop="province"
+                    align="center"
+                    label="省份"
+                    width="140">
+                  </el-table-column>
+                  <el-table-column
+                    prop="num"
+                    align="center"
+                    label="数量"
+                    width="100">
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+            <div>
+              <div class="history-name">IP访问TOP10</div>
+              <div>
+                <el-table :data="historyInfo.ip_history_ip">
+                  <el-table-column
+                    type="index"
+                    align="center"
+                    width="60">
+                  </el-table-column>
+                  <el-table-column
+                    prop="ip"
+                    align="center"
+                    label="IP"
+                    width="140">
+                  </el-table-column>
+                  <el-table-column
+                    prop="num"
+                    align="center"
+                    label="数量"
+                    width="100">
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 今日访问 -->
+      <div>
+        <div class="history-title">今日访问</div>
+        <div>
+          <div style="width: 250px;margin: 0 auto;display: flex;justify-content: center">
+            <div class="history-name" style="line-height: 35px">今日访问量：</div>
+            <div style="color:var(--maxLightRed);font-weight: bold;font-size: 30px;line-height: 35px">
+              {{historyInfo.ip_count_today}}
+            </div>
+          </div>
+          <div class="history-info" style="width: 640px">
+            <div style="margin-right: 40px">
+              <div class="history-name">今日访问省份统计</div>
+              <div>
+                <el-table :data="historyInfo.province_today">
+                  <el-table-column
+                    type="index"
+                    align="center"
+                    width="60">
+                  </el-table-column>
+                  <el-table-column
+                    prop="province"
+                    align="center"
+                    label="省份"
+                    width="140">
+                  </el-table-column>
+                  <el-table-column
+                    prop="num"
+                    align="center"
+                    label="数量"
+                    width="100">
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+            <div>
+              <div class="history-name">今日访问用户</div>
+              <div class="history-avatar">
+                <el-table :data="historyInfo.username_today">
+                  <el-table-column
+                    align="center"
+                    label="头像"
+                    width="100">
+                    <template slot-scope="scope">
+                      <el-avatar class="user-avatar" :size="30"
+                                 :src="scope.row.avatar">
+                      </el-avatar>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="username"
+                    align="center"
+                    label="用户"
+                    width="200">
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 昨日访问 -->
+      <div>
+        <div class="history-title">昨日访问</div>
+        <div>
+          <div style="width: 250px;margin: 0 auto;display: flex;justify-content: center">
+            <div class="history-name" style="line-height: 35px">昨日访问量：</div>
+            <div style="color:var(--maxLightRed);font-weight: bold;font-size: 30px;line-height: 35px">
+              {{historyInfo.ip_count_yest}}
+            </div>
+          </div>
+          <div class="history-info" style="width: 300px">
+            <div>
+              <div class="history-name">昨日访问用户</div>
+              <div class="history-avatar">
+                <el-table :data="historyInfo.username_yest">
+                  <el-table-column
+                    align="center"
+                    label="头像"
+                    width="100">
+                    <template slot-scope="scope">
+                      <el-avatar class="user-avatar" :size="30"
+                                 :src="scope.row.avatar">
+                      </el-avatar>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="username"
+                    align="center"
+                    label="用户"
+                    width="200">
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
   export default {
     data() {
-      return {}
+      return {
+        historyInfo: {}
+      }
     },
 
     computed: {},
@@ -15,17 +192,83 @@
     watch: {},
 
     created() {
-
+      this.getHistoryInfo();
     },
 
     mounted() {
 
     },
 
-    methods: {}
+    methods: {
+      getHistoryInfo() {
+        this.$http.get(this.$constant.baseURL + "/webInfo/getHistoryInfo", {}, true)
+          .then((res) => {
+            if (!this.$common.isEmpty(res.data)) {
+              this.historyInfo = res.data;
+            }
+          })
+          .catch((error) => {
+            this.$message({
+              message: error.message,
+              type: "error"
+            });
+          });
+      }
+    }
   }
 </script>
 
 <style scoped>
 
+  .my-tag {
+    width: 100%;
+    text-align: left;
+    background: var(--lightYellow);
+    border: none;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    color: var(--black);
+  }
+
+  .el-tag {
+    margin: 10px;
+  }
+
+  .history-title {
+    margin: 15px auto 15px;
+    width: 120px;
+    text-align: center;
+    padding: 10px 20px;
+    background: var(--lightGreen);
+    color: var(--white);
+    font-weight: bold;
+    border-radius: 5px;
+  }
+
+  .history-name {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 10px 10px 0;
+    text-align: center;
+  }
+
+  .history-info {
+    display: flex;
+    text-align: center;
+    margin: 20px auto 0;
+  }
+
+  .history-info >>> .el-table .cell {
+    line-height: unset;
+  }
+
+  .history-avatar >>> .el-table .el-table__row .el-table__cell {
+    padding: 3.5px 0;
+  }
+
+  .history-info >>> .el-table::before {
+    height: unset;
+  }
+
 </style>

src/components/admin/webEdit.vue

@@ -2,7 +2,7 @@
   <div>
     <div>
       <el-tag effect="dark" class="my-tag">
-        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
           <path
             d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
             fill="#8C7BFD"></path>
@@ -73,7 +73,7 @@
 
     <div>
       <el-tag effect="dark" class="my-tag">
-        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
           <path
             d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
             fill="#8C7BFD"></path>
@@ -108,7 +108,7 @@
 
     <div>
       <el-tag effect="dark" class="my-tag">
-        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
           <path
             d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
             fill="#8C7BFD"></path>
@@ -145,7 +145,7 @@
 
     <div>
       <el-tag effect="dark" class="my-tag">
-        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
           <path
             d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
             fill="#8C7BFD"></path>
@@ -194,7 +194,7 @@
 
     <div>
       <el-tag effect="dark" class="my-tag">
-        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
+        <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
           <path
             d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
             fill="#8C7BFD"></path>

src/components/admin/welcome.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="welcome-title">
+      <h2 class="playful">
+        <span>欢</span>
+        <span>迎</span>
+        <span>光</span>
+        <span>临</span>
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {}
+    },
+
+    computed: {},
+
+    watch: {},
+
+    created() {
+
+    },
+
+    mounted() {
+
+    },
+
+    methods: {}
+  }
+</script>
+
+<style scoped>
+
+  .welcome-title {
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+  }
+
+  .playful span {
+    position: relative;
+    color: #5362f6;
+    text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,
+    1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,
+    2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
+    3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,
+    4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,
+    5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
+    6px 6px #e485f8;
+    animation: scatter 1.75s infinite;
+    font-weight: normal;
+  }
+
+  .playful span:nth-child(2n) {
+    color: #ed625c;
+    text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,
+    1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,
+    2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,
+    3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,
+    4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,
+    5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,
+    6px 6px #f2a063;
+    animation-delay: 0.3s;
+  }
+
+  .playful span:nth-child(3n) {
+    color: #ffd913;
+    text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,
+    1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,
+    2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,
+    3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,
+    4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,
+    5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,
+    6px 6px #6ec0a9;
+    animation-delay: 0.15s;
+  }
+
+  .playful span:nth-child(5n) {
+    color: #555bff;
+    text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,
+    1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,
+    2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
+    3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,
+    4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,
+    5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
+    6px 6px #e485f8;
+    animation-delay: 0.4s;
+  }
+
+  .playful span:nth-child(7n) {
+    color: #ff9c55;
+    text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,
+    1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,
+    2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,
+    3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,
+    4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,
+    5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,
+    6px 6px #ff5555;
+    animation-delay: 0.25s;
+  }
+
+</style>

src/components/common/treeHole.vue

@@ -7,7 +7,7 @@
         <div class="tree-hole-content"
              :class="{ leftTreeHole: index % 2 === 0 && !$common.mobile(), rightTreeHole: index % 2 !== 0 || $common.mobile() }">
           <el-avatar shape="square" class="avatar-img" :size="36"
-                     :src="!$common.isEmpty($store.state.currentUser)?$store.state.currentUser.avatar:$store.state.webInfo.avatar"></el-avatar>
+                     :src="avatar"></el-avatar>
           <div class="tree-hole-box"
                :style="{background: $constant.tree_hole_color[index % $constant.tree_hole_color.length]}">
             <div class="box-tag" v-if="index % 2 === 0 && !$common.mobile()"
@@ -42,6 +42,9 @@
     props: {
       treeHoleList: {
         type: Array
+      },
+      avatar: {
+        type: String
       }
     },
 

src/components/funny.vue

@@ -54,7 +54,7 @@
                   <div style="width: 150px" v-for="(funny, i) in item.data" :key="i">
                     <el-avatar class="funny-avatar myCenter" :size="110"
                                style="margin: 20px"
-                               @click.native="playSound(funny.url)"
+                               @click.native="playSound(funny.url, item.data, i)"
                                :src="funny.cover">
                     </el-avatar>
                     <div class="funny-item-title">{{funny.title}}</div>
@@ -95,6 +95,8 @@
         },
         activeName: 0,
         audio: null,
+        playList: null,
+        index: null,
         funnys: [{
           classify: "",
           count: null,
@@ -126,6 +128,12 @@
 
     },
 
+    beforeDestroy() {
+      if (this.audio != null && !this.audio.paused) {
+        this.audio.pause();
+      }
+    },
+
     methods: {
       getFunny() {
         this.$http.get(this.$constant.baseURL + "/webInfo/listFunny")
@@ -170,7 +178,9 @@
           }
         });
       },
-      playSound(src) {
+      playSound(src, playList, index) {
+        this.playList = playList;
+        this.index = index;
         if (this.audio != null) {
           if (this.audio.src === src) {
             if (this.audio.paused) {
@@ -187,6 +197,16 @@
         } else {
           this.audio = new Audio(src);
           this.audio.play();
+          this.audio.onended = () => {
+            this.index = this.index + 1;
+            if (this.index < this.playList.length) {
+              this.audio.src = this.playList[this.index].url;
+              this.audio.load();
+              setTimeout(() => {
+                this.audio.play();
+              }, 3000);
+            }
+          };
         }
       }
     }

src/components/index.vue

@@ -40,7 +40,7 @@
         <div class="page-container-wrap">
           <div class="page-container">
             <div class="aside-content" v-if="showAside">
-              <myAside @selectSort="selectSort"></myAside>
+              <myAside @selectSort="selectSort" @selectArticle="selectArticle"></myAside>
             </div>
             <div class="recent-posts">
               <div class="announcement background-opacity">
@@ -99,7 +99,8 @@
           size: 10,
           total: 0,
           searchKey: "",
-          sortId: null
+          sortId: null,
+          articleSearch: ""
         },
         guShi: {
           "content": "",
@@ -128,7 +129,27 @@
           size: 10,
           total: 0,
           searchKey: "",
-          sortId: sort.id
+          sortId: sort.id,
+          articleSearch: ""
+        };
+        this.articles = [];
+        await this.getArticles();
+        this.$nextTick(() => {
+          document.querySelector('.recent-posts').scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+            inline: "nearest"
+          });
+        });
+      },
+      async selectArticle(articleSearch) {
+        this.pagination = {
+          current: 1,
+          size: 10,
+          total: 0,
+          searchKey: "",
+          sortId: null,
+          articleSearch: articleSearch
         };
         this.articles = [];
         await this.getArticles();

src/components/love.vue

@@ -161,7 +161,11 @@
 
         <div class="card-container">
           <div v-show="card === 1 && !$common.isEmpty(treeHoleList)">
-            <treeHole :treeHoleList="treeHoleList" @launch="launch" @deleteTreeHole="deleteTreeHole"></treeHole>
+            <treeHole :treeHoleList="treeHoleList"
+                      :avatar="$store.state.webInfo.avatar"
+                      @launch="launch"
+                      @deleteTreeHole="deleteTreeHole">
+            </treeHole>
           </div>
           <div v-show="card === 2 && !$common.isEmpty(photoTitleList)">
             <!-- 标签 -->

src/components/myAside.vue

@@ -13,12 +13,39 @@
           <span>分类</span>
           <span class="blog-info-num">{{ sortInfo.length }}</span>
         </div>
+        <div class="blog-info-box">
+          <span>访问量</span>
+          <span class="blog-info-num">{{ webInfo.historyAllCount }}</span>
+        </div>
       </div>
       <a class="collection-btn" @click="showTip()">
         <i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
       </a>
     </div>
 
+    <!-- 搜索 -->
+    <div style="padding: 15px;border-radius: 10px;margin-top: 40px;animation: hideToShow 1s ease-in-out"
+         class="shadow-box background-opacity wow">
+      <div style="color: var(--lightGreen);font-size: 20px;font-weight: bold;margin-bottom: 10px">
+        搜索
+      </div>
+      <div style="display: flex">
+        <input class="ais-SearchBox-input" type="text"
+               v-model="articleSearch"
+               placeholder="搜索文章" maxlength="32">
+        <div class="ais-SearchBox-submit" @click="selectArticle()">
+          <svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
+            <path
+              d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z"
+              fill="#51C492"></path>
+            <path
+              d="M772.8 718.4c48-58.4 76.8-132.8 76.8-213.6 0-186.4-151.2-337.6-337.6-337.6-186.4 0-337.6 151.2-337.6 337.6 0 186.4 151.2 337.6 337.6 337.6 81.6 0 156-28.8 213.6-76.8L856 896l47.2-47.2-130.4-130.4zM512 776c-149.6 0-270.4-121.6-270.4-271.2S363.2 233.6 512 233.6c149.6 0 271.2 121.6 271.2 271.2C782.4 654.4 660.8 776 512 776z"
+              fill="#FFFFFF"></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+
     <!-- 推荐文章 -->
     <div v-if="!$common.isEmpty(recommendArticles)"
          style="padding: 25px;border-radius: 10px;margin-top: 40px;animation: hideToShow 1s ease-in-out"
@@ -143,7 +170,8 @@
         },
         recommendArticles: [],
         admires: [],
-        showAdmireDialog: false
+        showAdmireDialog: false,
+        articleSearch: ""
       }
     },
     computed: {
@@ -162,6 +190,9 @@
       selectSort(sort) {
         this.$emit("selectSort", sort);
       },
+      selectArticle() {
+        this.$emit("selectArticle", this.articleSearch);
+      },
       showAdmire() {
         if (this.$common.isEmpty(this.$store.state.currentUser)) {
           this.$message({
@@ -405,4 +436,27 @@
     line-height: 1.5;
     margin: 5px;
   }
+
+  .ais-SearchBox-input {
+    padding: 0 14px;
+    height: 30px;
+    width: calc(100% - 50px);
+    outline: 0;
+    border: 2px solid var(--lightGreen);
+    border-right: 0;
+    border-radius: 40px 0 0 40px;
+    color: var(--maxGreyFont);
+    background: var(--white);
+  }
+
+  .ais-SearchBox-submit {
+    height: 30px;
+    width: 50px;
+    border: 2px solid var(--lightGreen);
+    border-left: 0;
+    border-radius: 0 40px 40px 0;
+    background: var(--white);
+    cursor: pointer;
+  }
+
 </style>

src/components/weiYan.vue

@@ -7,7 +7,11 @@
 
     <div style="background: var(--background);animation: hideToShow 2.5s">
       <div>
-        <treeHole :treeHoleList="treeHoleList" @launch="launch" @deleteTreeHole="deleteTreeHole"></treeHole>
+        <treeHole :treeHoleList="treeHoleList"
+                  :avatar="!$common.isEmpty($store.state.currentUser)?$store.state.currentUser.avatar:$store.state.webInfo.avatar"
+                  @launch="launch"
+                  @deleteTreeHole="deleteTreeHole">
+        </treeHole>
         <proPage :current="pagination.current"
                  :size="pagination.size"
                  :total="pagination.total"

src/router/index.js

@@ -68,10 +68,14 @@ const routes = [
   },
   {
     path: '/admin',
-    redirect: '/main',
+    redirect: '/welcome',
     meta: {requiresAuth: true},
     component: () => import('../components/admin/admin'),
     children: [{
+      path: '/welcome',
+      name: 'welcome',
+      component: () => import('../components/admin/welcome')
+    }, {
       path: '/main',
       name: 'main',
       component: () => import('../components/admin/main')