first commit

2024-05-22 14:45:45 +08:00 · 2024-05-22 14:45:45 +08:00 · f69367d3f4
commit f69367d3f4
116 changed files with 8594 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,7 @@
 # 开发环境配置
 ENV = 'development'
 VITE_APP_ENV = 'development'
 #VITE_APP_BASE_URL = 'http://127.0.0.1:7777'
 VITE_APP_BASE_URL = 'https://www.hxyouzi.com'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,5 @@
 # 生产环境配置
 ENV = 'production'
 VITE_APP_ENV = 'production'
 VITE_APP_BASE_URL = 'https://www.hxyouzi.com'
--- a/.gitea/workflows/youzi.yml
+++ b/.gitea/workflows/youzi.yml
@ -0,0 +1,46 @@
 name: Build and Deploy
 on:
  push:
    branches:
      - master
 jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    env:
      RUNNER_TOOL_CACHE: /toolcache
    steps:
      - name: Checkout
        uses: https://gitea.cn/actions/checkout@v3
      - id: tool-cache
        name: 安装node
        uses: https://gitea.com/kongxiangyiren/gitea-tool-cache@v4
        with:
          # 只有node支持版本号别名
          node-version: 18
      - uses: https://gitea.cn/actions/setup-node@v3
        with:
          # gitea-tool-cache导出 node 具体版本
          node-version: ${{ steps.tool-cache.outputs.node-version }}
          registry-url: 'https://registry.npmmirror.com'
      - name: 缓存
        uses: https://gitea.cn/actions/cache@v3
        id: cache
        with:
          path: node_modules
          key: ${{ runner.os }}-4
      - name: Install and Build # 下载依赖 打包项目
        run: |
          yarn install
          yarn build          
      - name: Appleboy
        uses: https://gitcode.net/weixin_44697517/scp-action@v0.1.4
        with:
          host: ${{ secrets.USER_HOST }} # 服务器地址: xxx.xxx.xxx.xxx
          username: ${{ secrets.USER_NAME }} # 服务器名字 一般是root
          key: ${{ secrets.SERVER_SSH_KEY }} # 服务器连接密钥
          source: './dist/' # 拷贝文件目录
          target: ${{ secrets.USER_TARGET }} # 服务器目标目录
          strip_components: 2
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,28 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 .DS_Store
 dist
 dist-ssr
 coverage
 *.local
 /cypress/videos/
 /cypress/screenshots/
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
 {
  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,14 @@
 # 个人练手
 ## 主要功能
 ### √ 1.登录注册功能
 ### √ 2.首页展示共享文章列表
 ### √ 3.画廊页面展示共享图片
 ### × 4.控制台功能 --目前已完成：画廊上传共享
 ### √ 5.文章编辑功能
 ### 其余功能正在考虑中
--- a/index.html
+++ b/index.html
@ -0,0 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>黑心柚子</title>
 </head>
 <body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
 </body>
 <!-- 网页鼠标点击特效（爱心） -->
 <script type="text/javascript">
  ! function (e, t, a) {
    function r() {
      for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
        e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
        "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
          .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
      requestAnimationFrame(r)
    }
    function n() {
      var t = "function" == typeof e.onclick && e.onclick;
      e.onclick = function (e) {
        t && t(), o(e)
      }
    }
    function o(e) {
      var a = t.createElement("div");
      a.className = "heart", s.push({
        el: a,
        x: e.clientX - 5,
        y: e.clientY - 5,
        scale: 1,
        alpha: 1,
        color: c()
      }), t.body.appendChild(a)
    }
    function i(e) {
      var a = t.createElement("style");
      a.type = "text/css";
      try {
        a.appendChild(t.createTextNode(e))
      } catch (t) {
        a.styleSheet.cssText = e
      }
      t.getElementsByTagName("head")[0].appendChild(a)
    }
    function c() {
      return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
        .random()) + ")"
    }
    var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
      .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
        setTimeout(e, 1e3 / 60)
      }, i(
        ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
      ), n(), r()
  }(window, document);
 </script>
 </html>
--- a/niva.json
+++ b/niva.json
@ -0,0 +1,11 @@
 {
  "name": "blog",
  "uuid": "3056dae6-4b74-4e53-b77a-d8fe1f09c04d",
  "debug": {
    "entry": "http://localhost:5173",
    "resource": "public"
  },
  "build": {
    "resource": "dist"
  }
 }
--- a/package.json
+++ b/package.json
@ -0,0 +1,45 @@
 {
  "name": "blog",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
    "@vant/auto-import-resolver": "^1.1.0",
    "@vant/touch-emulator": "^1.4.0",
    "@vicons/ionicons5": "^0.12.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "aplayer": "^1.10.1",
    "axios": "^1.4.0",
    "chinese-workday": "^1.10.0",
    "colorofchina": "^1.0.6",
    "gsap": "^3.12.2",
    "less": "^4.1.3",
    "naive-ui": "^2.38.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.17",
    "qs": "^6.11.2",
    "qweather-icons": "^1.3.3",
    "rapidoc": "^9.3.4",
    "unplugin-auto-import": "^0.15.2",
    "unplugin-vue-components": "^0.24.1",
    "vant": "^4.8.7",
    "vfonts": "^0.0.3",
    "vite-svg-loader": "^4.0.0",
    "vue": "^3.2.37",
    "vue-cookies": "^1.8.3",
    "vue-router": "^4.1.3",
    "vue-wechat-title": "^2.0.7"
  },
  "devDependencies": {
    "@vicons/ionicons4": "^0.12.0",
    "@vitejs/plugin-vue": "^3.0.1",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.22",
    "tailwindcss": "^3.3.1",
    "vite": "^3.0.4"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/public/bg/bg-d.webp
+++ b/public/bg/bg-d.webp
--- a/public/bg/bg-l.webp
+++ b/public/bg/bg-l.webp
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,20 @@
 <script setup>
 import themeOverrides from "@/util/theme.js"; // 主题色等配置
 import { dateZhCN, zhCN } from "naive-ui";
 import idx from "./index.vue"; // 具体配置，以及全局组件挂载
 </script>
 <template>
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="null" class="config" :theme-overrides="themeOverrides.lightOverrides">
    <n-message-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <idx />
        </n-notification-provider>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
 </template>
 <style scoped></style>
--- a/src/api/addr/index.js
+++ b/src/api/addr/index.js
@ -0,0 +1,26 @@
 import request from "@/util/request";
 //getAddressByIP
 export function getAddressByIP(params) {
  return request({
    url: "/addr/ip",
    method: "get",
    params,
  });
 }
 //SendMail
 export function sendMail(data) {
  return request({
    url: "/addr/mail",
    method: "post",
    data,
  });
 }
 //SendMailinpass
 export function sendMailinpass(data) {
  return request({
    url: "/addr/mailinpass",
    method: "post",
    data,
  });
 }
--- a/src/api/art/index.js
+++ b/src/api/art/index.js
@ -0,0 +1,49 @@
 import request from "@/util/request";
 //queryArt
 export function queryArt() {
  return request({
    url: "/art/q",
    method: "get",
  });
 }
 //addArt
 export function addArt(data) {
  return request({
    url: "/art/add",
    method: "post",
    data,
  });
 }
 // queryArtInfo
 export function queryArtInfo(id) {
  return request({
    url: "/art/getInfoById?id=" + id,
    method: "get",
  });
 }
 // myArti
 export function myArti() {
  return request({
    url: "/art/myArticle",
    method: "get",
  });
 }
 // deleteArti
 export function deleteArti(id) {
  return request({
    url: "/art/article?id=" + id,
    method: "delete",
  });
 }
 // updArt
 export function updArt(data) {
  return request({
    url: "/art/article",
    method: "put",
    data,
  });
 }
--- a/src/api/file/index.js
+++ b/src/api/file/index.js
@ -0,0 +1,48 @@
 import request from "@/util/request";
 //MyFile
 export function MyFile() {
  return request({
    url: "/file/myfile",
    method: "get",
  });
 }
 //ShareFile
 export function ShareFile(params) {
  return request({
    url: "/f/sharefile",
    method: "get",
    params,
  });
 }
 export function updateFile(id) {
  return request({
    url: "/file/" + id,
    method: "put",
  });
 }
 export function unUpdateFile(id) {
  return request({
    url: "/file/un/" + id,
    method: "put",
  });
 }
 export function delFile(id) {
  return request({
    url: "/file/" + id,
    method: "delete",
  });
 }
 export function updateName(data) {
  return request({
    url: "/file/updatename",
    method: "post",
    data,
  });
 }
 export function listMusic() {
  return request({
    url: "/f/music",
    method: "get",
  });
 }
--- a/src/api/index.js
+++ b/src/api/index.js
@ -0,0 +1,14 @@
 const files = import.meta.glob('./*/index.js', {
  eager: true,
 })
 const http = {}
 // console.log(files);
 for (const i in files) {
  const t = i.split("/")
  const name = t[1]
  http[name] = files[i]
 }
 export default http
--- a/src/api/mix/index.js
+++ b/src/api/mix/index.js
@ -0,0 +1,9 @@
 import request from '@/util/request';
 //poetry
 export function poetry() {
  return request({
    url: '/mix/poetry',
    method: 'get'
  });
 }
--- a/src/api/nav/index.js
+++ b/src/api/nav/index.js
@ -0,0 +1,9 @@
 import request from '@/util/request';
 // listNav
 export function listNav() {
  return request({
    url: '/nav/menu',
    method: 'get'
  });
 }
--- a/src/api/news/index.js
+++ b/src/api/news/index.js
@ -0,0 +1,9 @@
 import request from '@/util/request';
 //listBaiduNews
 export function listBaiduNews() {
  return request({
    url: '/news/baidu',
    method: 'get'
  });
 }
--- a/src/api/plink/index.js
+++ b/src/api/plink/index.js
@ -0,0 +1,24 @@
 import request from '@/util/request';
 //listPlink
 export function listPlink() {
  return request({
    url: '/plink/all',
    method: 'get'
  });
 }
 // tagList
 export function tagList() {
  return request({
    url: '/plink/tag',
    method: 'get'
  });
 }
 export function addPlink(){
  return request({
    url: '/plink/add',
    method: 'post'
  });
 }
--- a/src/api/user/index.js
+++ b/src/api/user/index.js
@ -0,0 +1,50 @@
 import request from "@/util/request";
 //login
 export function login(data) {
  return request({
    url: "/user/login",
    method: "post",
    data,
  });
 }
 //register
 export function regis(data) {
  return request({
    url: "/user/register",
    method: "post",
    data,
  });
 }
 //autologin
 export function alogin() {
  return request({
    url: "/info/autologin",
    method: "post",
  });
 }
 //rexpass
 export function rexpass(data) {
  return request({
    url: "/user/respass",
    method: "post",
    data,
  });
 }
 //updatepass
 export function updatepass(data) {
  return request({
    url: "/user/updatepass",
    method: "put",
    data,
  });
 }
 //updatetel
 export function updatetel(data) {
  return request({
    url: "/info/update/tel",
    method: "put",
    data,
  });
 }
--- a/src/api/wea/index.js
+++ b/src/api/wea/index.js
@ -0,0 +1,32 @@
 import request from '@/util/request';
 //getWeather
 export function getWeather(params) {
  return request({
    url: '/wea/now',
    method: 'get',
    params
  });
 }
 //getJq
 export function getJq() {
  return request({
    url: '/wea/getJq',
    method: 'get'
  });
 }
 //getNextHoliday
 export function getNextHoliday() {
  return request({
    url: '/wea/getNextHoliday',
    method: 'get'
  });
 }
 //iswork
 export function iswork() {
  return request({
    url: '/wea/iswork',
    method: 'get'
  });
 }
--- a/src/assets/bg.jpg
+++ b/src/assets/bg.jpg
--- a/src/assets/bro/baidu.png
+++ b/src/assets/bro/baidu.png
--- a/src/assets/bro/bing.png
+++ b/src/assets/bro/bing.png
--- a/src/assets/bro/google.png
+++ b/src/assets/bro/google.png
--- a/src/assets/font/LCDML.woff2
+++ b/src/assets/font/LCDML.woff2
--- a/src/assets/offwork.webp
+++ b/src/assets/offwork.webp
--- a/src/assets/onwork.webp
+++ b/src/assets/onwork.webp
--- a/src/assets/style/base.css
+++ b/src/assets/style/base.css
--- a/src/assets/style/index.less
+++ b/src/assets/style/index.less
@ -0,0 +1,12 @@
@purple: #8a2be2;
@orange: #ffa500;
@blue: #409eff;
@dp: #f2e8fc;
@ps:0 2px 12px 0 #5C169F10;
 //#BE8AEF #B172EC #A45BE9 #9744E5 #8A2BE2 #7B1DD3 #6C19B9 #5C169F
 :root:root {
  --van-primary-color: #8a2be2;
 }
--- a/src/assets/style/main.css
+++ b/src/assets/style/main.css
@ -0,0 +1,65 @@
 /* @import "./base.css"; */
 /* .n-scrollbar-rail.n-scrollbar-rail--vertical {
  right: 0 !important;
 }
 .n-scrollbar-rail__scrollbar {
  background-color: #409eff !important;
 } */
 .n-button {
  background-color: var(--n-color) !important;
 }
 .n-scrollbar-rail--vertical {
  right: 0 !important;
 }
 body {
  overflow: hidden;
 }
 /* .a1111111111 {
  cursor: url("@/cursor/help_26x26.png"), help;
  cursor: url("@/cursor/link_26x26.png"), pointer;
  cursor: url("@/cursor/working.png"), progress;
  cursor: url("@/cursor/busy.png"), wait;
  cursor: url("@/cursor/cross.png"), crosshair;
  cursor: url("@/cursor/text_26x26.png"), text;
  cursor: url("@/cursor/move_26x26.png"), move;
  cursor: url("@/cursor/unavailable.png"), not-allowed;
  cursor: url("@/cursor/unavailable.png"), no-drop;
  cursor: url("@/cursor/cross") all-scroll;
  cursor: url("@/cursor/horiz_26x26.png"), col-resize;
  cursor: url("@/cursor/horiz_26x26.png"), w-resize;
  cursor: url("@/cursor/horiz_26x26.png"), e-resize;
  cursor: url("@/cursor/horiz_26x26.png"), ew-resize;
  cursor: url("@/cursor/vert.png"), row-resize;
  cursor: url("@/cursor/vert.png"), n-resize;
  cursor: url("@/cursor/vert.png"), s-resize;
  cursor: url("@/cursor/vert.png"), ns-resize;
  cursor: url("@/cursor/diag1.png"), nw-resize;
  cursor: url("@/cursor/diag1.png"), se-resize;
  cursor: url("@/cursor/diag1.png"), nwse-resize;
  cursor: url("@/cursor/diag2_26x26.png"), ne-resize;
  cursor: url("@/cursor/diag2_26x26.png"), sw-resize;
  cursor: url("@/cursor/diag2_26x26.png"), nesw-resize;
  cursor: url("@/cursor/handwriting_26x26.png"), copy;
  cursor: url("@/cursor/alt.png"), grab;
 } */
 div {
  cursor: url("@/cursor/normal.png"), default !important;
 }
 a,
 button,
 li,
 .aplayer-list-author,
 .aplayer-icon,
 .n-back-top,
 .n-tabs-tab,
 .n-input__eye,
 .n-image:not(.n-image--preview-disabled) {
  cursor: url("@/cursor/link_26x26.png"), pointer !important;
 }
 input {
  cursor: url("@/cursor/text_26x26.png"), text !important;
 }
 #plink .v-binder-follower-content {
  width: 20vw;
 }
--- a/src/components/aplayerView.vue
+++ b/src/components/aplayerView.vue
@ -0,0 +1,170 @@
 <template>
  <!-- 准备一个容器用来存放音乐播放器 -->
  <div id="aplayer"></div>
 </template>
 <script setup>
 // https://aplayer.js.org/#/zh-Hans/
 // import Hls from 'hls.js/dist/hls.min.js';
 import APlayer from "aplayer"; // 引入音乐插件
 import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
 import { onMounted, reactive } from "vue";
 // window.Hls = Hls;
 const data = reactive({
  audio: [],
  info: {
    fixed: true, // 开启吸底模式
    // mini: false, // 开启迷你模式
    // autoplay: true, // 自动播放(已经没用了)
    // theme: '#000', // 主题色
    loop: "all", // 	音频循环播放, 可选值: 'all', 'one', 'none'
    order: "list", // 音频循环顺序, 可选值: 'list', 'random'
    preload: "metadata", //预加载，可选值: 'none', 'metadata', 'auto'
    volume: 0.5, // 默认音量，可选值: 0-1
    mutex: true, // 互斥，默认为true，即不允许多个音频同时播放，当前播放的音频会暂停其他音频
    lrcType: 3, // 歌词类型，可选值:  1, 2, 3
  },
 });
 onMounted(async () => {
  // if (import.meta.env.VITE_APP_ENV != "development") {
  const res = await $http.file.listMusic();
  data.audio = [];
  res.data.forEach(i => {
    let name = i.split(".")[0];
    let t = name.split("-");
    let mid = name + "/"+ name 
    data.audio.push({
      title: t[1],
      author: t[0],
      url: res.baseUrl + mid +'.mp3',
      pic: res.baseUrl + mid + ".jpg",
      lrc: res.baseUrl + mid + ".lrc",
    });
    console.log('>>>>>',data.audio);
  });
  // } else {
  //   const d = {
  //     title: "南屏晚钟",
  //     author: "黄龄",
  //     url: "https://www.hxyouzi.com/music/黄龄 - 南屏晚钟.mp3",
  //     pic: "https://www.hxyouzi.com/img/cover/黄龄 - 南屏晚钟.jpg",
  //     lrc: "/黄龄 - 南屏晚钟.lrc",
  //   };
  //   data.audio.push(d, d, d, d, d, d, d, d, d, d, d);
  // }
  // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
  const ap = new APlayer({
    container: document.getElementById("aplayer"),
    audio: data.audio, // 音乐信息
    ...data.info, // 其他配置信息
  });
  const d = document.querySelector("#aplayer > div.aplayer-body > div.aplayer-miniswitcher > button");
  let flag = true;
  const app = document.querySelector("#aplayer > div.aplayer-lrc");
  app.style.display = "block";
  app.style.transform = "translateY(50px)";
  d.addEventListener("click", () => {
    if (flag) {
      app.style.transform = "translateY(0)";
      ap.lrc.show();
      flag = false;
    } else {
      app.style.transform = "translateY(50px)";
      ap.lrc.hide();
      ap.list.hide();
      flag = true;
    }
  });
  // d.click();
 });
 </script>
 <style lang="less" scoped>
 #aplayer {
  width: 480px; // 定个宽度
  color: var(--n-text-color); // 设置颜色
  background-color: #f5f5f8; // 设置背景色
  :deep(.aplayer-body) {
    color: var(--n-text-color); // 设置颜色
    background-color: #f5f5f8; // 设置背景色
    // bottom: 10px; // 设置底部距离
    .aplayer-icon-lrc {
      display: none;
    }
  }
  :deep(.aplayer-icon):hover svg path {
    fill: @blue; // 设置颜色
  }
  :deep(.aplayer-list) {
    width: 418px !important;
    background-color: #f5f5f8;
    border: none;
  }
  :deep(.aplayer-list-light) {
    background: inherit;
    color: @orange;
  }
  :deep(.aplayer-list) ol {
    max-height: 160px !important;
    // margin-bottom: 12px;
    .aplayer-list-light .aplayer-list-author {
      color: @orange !important;
    }
  }
  :deep(.aplayer-list) ol li {
    border: none;
  }
  :deep(.aplayer-list) ol li:hover {
    background: inherit;
    color: @blue;
    border: none;
    .aplayer-list-author {
      color: @blue !important;
    }
  }
  :deep(.aplayer-info) {
    padding: 0 !important;
    border-top: none;
  }
  :deep(.aplayer-icon) svg {
    color: var(--n-text-color); // 设置颜色
    background-color: var(--v-bgc); // 设置背景色
  }
  :deep(.aplayer-icon):hover svg {
    color: @blue; // 设置颜色
  }
  :deep(.aplayer-miniswitcher) {
    color: var(--n-text-color); // 设置颜色
    background-color: var(--v-bgc); // 设置背景色
  }
  :deep(.aplayer-lrc) {
    // text-align: right !important;
    width: 368px !important;
    transition: all 0.3s ease;
    // left: unset;
    bottom: 12px;
    z-index: 999;
    text-shadow: none !important;
  }
  :deep(.aplayer-lrc-contents) {
    transition: all 0.5s ease !important;
    p {
      font-size: 12px !important;
      color: @purple !important;
      opacity: 0.8;
    }
  }
  :deep(.aplayer-lrc-contents) {
    .aplayer-lrc-current {
      opacity: 1;
      font-size: 13px !important;
      color: @orange !important;
    }
  }
 }
@media screen and (max-width: 800px) {
  #aplayer {
    width: 100vw !important;
  }
 }
 </style>
--- a/src/components/arti.vue
+++ b/src/components/arti.vue
@ -0,0 +1,80 @@
 <template>
  <TransitionGroup name="list" tag="div" @enter="onEnter" @before-enter="onBeforeEnter">
    <n-card v-for="(item, index) in list" size="small" :key="item.id" :bordered="false"
      @click="handdleClickArti(item.id)" :data-index="index">
      <div class="titel mt-2">
        <n-h6 prefix="bar">
          <n-text type="primary">
            {{ item.title }}
          </n-text>
        </n-h6>
      </div>
      <div class="cont">
        <div class="pro">{{ item.pro }}</div>
        <div class="author mb-2 mr-4">{{ item.nickname }}</div>
      </div>
    </n-card>
  </TransitionGroup>
 </template>
 <script setup>
 //mark import
 import gsap from 'gsap';
 //mark data
 const router = useRouter()
 const props = defineProps({ 
  list: {
    type: Array,
    default: () => []
  }
 })
 //mark method
 function handdleClickArti(id) {
  router.push('/mini/' + id)
 }
 function onBeforeEnter(el) {
  el.style.opacity = 0
  if (el.dataset.index % 2 == 0)
    el.style.transform = 'translateX(-500px)'
  else
    el.style.transform = 'translateX(500px)'
 }
 function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    x: 0,
    ease: 'slow',
    delay: el.dataset.index * 0.4,
    onComplete: done
  })
 }
 </script>
 <style scoped lang="less">
 :deep(.n-card) {
  width: 90%;
  margin: 0 0 20px 5%;
  box-shadow: @ps;
  background-color: #fafbfc;
 }
 :deep(.n-card__content) {
  padding: 0 !important;
 }
 .pro {
  text-indent: 20px;
 }
 .author {
  text-align: right;
 }
 </style>
--- a/src/components/consoleMenu.vue
+++ b/src/components/consoleMenu.vue
@ -0,0 +1,30 @@
 <template>
  <div>
    <n-menu v-model:value="activeKey" :collapsed="collapsed" inverted :collapsed-width="64" :icon-size="20" :collapsed-icon-size="26" :options="menuOptions" />
  </div>
 </template>
 <script setup>
 import menuInfo from "@/util/consoleMenu.js";
 const props = defineProps({
  collapsed: Boolean,
 });
 const activeKey = ref("0");
 const route = useRoute()
 const { path } = route;
 menuInfo.menuList.forEach((i, idx) => {
  if (path == i) {
    activeKey.value = idx  + "";
  }
 });
 let menuOptions = ref([]);
 menuOptions.value = menuInfo.options;
 </script>
 <style scoped lang="less">
 :deep(.orange) {
  svg {
    color: #fff;
  }
 }
 </style>
--- a/src/components/edition.vue
+++ b/src/components/edition.vue
@ -0,0 +1,152 @@
 <template>
  <div class="w-[100%] h-[100%] relative">
    <div class=" mb-6">
      <n-input v-model:value="info.title" type="text" placeholder="请输入标题..." size="medium" clearable>
        <template #prefix>
          <n-button type="primary" size="mini" text>标题</n-button>
        </template>
      </n-input>
    </div>
    <div class=" mb-6">
      <n-input v-model:value="info.pro" type="text" placeholder="请输入简介..." size="medium" clearable>
        <template #prefix>
          <n-button type="primary" size="mini" text>简介</n-button>
        </template>
      </n-input>
    </div>
    <div class="" style="border:1px solid #ccc;border-radius: 4px;overflow: hidden;">
      <Toolbar style="border-bottom: 1px solid #ccc;font-size: 12px;" :editor="editorRef" :defaultConfig="toolbarConfig"
        :mode="mode" />
      <Editor style="height: 500px; overflow-y: hidden;" v-model="info.cont" :defaultConfig="editorConfig" :mode="mode"
        @onCreated="handleCreated" />
    </div>
    <div class="btns absolute bottom-0 w-[100%]">
      <n-button type="primary" @click="handleSubmit">提交</n-button>
    </div>
  </div>
 </template>
 <script setup>
 //mark import
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import { onMounted, watchEffect } from "vue";
 import cookie from "vue-cookies";
 //mark data
 const props = defineProps({
  id: {
    type: [String, Number],
    default: -1
  }
 })
 const info = reactive({
  cont: "",
  title: "",
  pro: ""
 })
 const mode = 'simple' // 或 'simple','default'
 const toolbarConfig = {}
 const editorRef = shallowRef()
 const editorConfig = ref({ MENU_CONF: {} })
 const emit = defineEmits(['close'])
 //mark method
 const handleCreated = (editor) => {
  editorRef.value = editor
 }
 //mark 周期、内置函数等
 editorConfig.value.placeholder = '请输入内容...'
 toolbarConfig.excludeKeys = ['fullScreen', 'header1','header2','header3', 'emoji',  'line-height', 'headings', 'list-ul', 'list-ol',  'line', 'hr', 'link', '|', 'image', 'code', 'code-theme',  'insertVideo']
 editorConfig.value.MENU_CONF['uploadImage'] = {
  server: "https://www.hxyouzi.com/api/art/upimg",
  fieldName: 'file',
  headers: {
    Authorization: cookie.get("token"),
  },
  maxNumberOfFiles: 1,
  // 单个文件上传成功之后
  customInsert(res, insertFn) {
    console.log(res);
    if (res.code == 1) {
      const url = res.completePath
      const alt = ""
      const href = res.completePath
      insertFn(url, alt, href)
    }
  },
 }
 watchEffect(async () => {
  console.log(props.id);
  if (props.id != -1) {
    const res = await $http.art.queryArtInfo(props.id)
    console.log(res);
    info.cont = res.data[0].cont
    info.title = res.data[0].title
    info.pro = res.data[0].pro
  } else {
    info.cont = ''
    info.title = ''
    info.pro = ''
  }
 })
 async function handleSubmit() {
  if (info.title == '') {
    $msg.error("标题不能为空");
    return
  }
  if (info.pro == '') {
    $msg.error("简介不能为空");
    return
  }
  console.log(info.cont);
  if (info.cont == '' || info.cont == '<p><br></p>') {
    $msg.error("内容不能为空");
    return
  }
  if (parseInt(props.id) < 0) {
    const res = await $http.art.addArt(info)
    if (res.code == 1) {
      $msg.success(res.msg)
      emit('close')
    }
    else $msg.error(res.msg)
  } else {
    const res = await $http.art.updArt({
      id: props.id,
      ...info
    })
    if (res.code == 1) {
      $msg.success(res.msg)
      emit('close')
    }
    else $msg.error(res.msg)
  }
 }
 onMounted(() => {
  // console.log(editorRef.value);
 })
 onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
 })
 </script>
 <style scoped lang="less">
 :deep(.w-e-bar-item button) {
  padding: 0 3px;
  font-size: 12px;
 }
 :deep(.n-button) {
  width: 100%;
 }
 </style>
--- a/src/components/falls.vue
+++ b/src/components/falls.vue
@ -0,0 +1,141 @@
 <template>
  <div class="box flex" ref="curcomp">
    <div class="col" v-for="item in fileArr">
      <div v-for="i in item">
        <slot :file="i"></slot>
      </div>
    </div>
  </div>
 </template>
 <script setup>
 import { reactive, watch } from "vue";
 const prop = defineProps({
  fileList: {
    type: Array,
    default: () => [],
  },
  count: [String, Number],
  pathname: String,
  bot: {
    type: [String, Number],
    default: 20
  },
  imgW: {
    type: [String, Number],
    default: 200
  },
 });
 const { fileList, count, pathname, bot, imgW } = toRefs(prop);
 const list = reactive({})
 const lh = ref([])
 const fileArr = ref([])
 const originList = ref([])
 initList(count.value)
 watch(() => count.value, init)
 watch(() => fileList.value, initPart, { immediate: true })
 function initPart() {
  console.log("initPart", fileList.value);
  if (fileList.value.length < 1) {
    // console.log("query");
    const c = count.value
    initList(c)
  }
  fileArr.value = []
  originList.value = originList.value.concat(fileList.value)
  const c = count.value
  getlist(fileList.value)
  for (let i = 0; i < c; i++) {
    fileArr.value.push(list["file" + i])
  }
 }
 function init() {
  fileArr.value = []
  // console.log("init",fileList.value);
  const c = count.value
  // console.log("列数--->", c);
  initList(c)
  getlist(originList.value)
  // console.log("list分组情况", list);
  for (let i = 0; i < c; i++) {
    fileArr.value.push(list["file" + i])
  }
 }
 function initList(c) {
  lh.value = []
  for (let i = 0; i < c; i++) {
    list["file" + i] = []
    lh.value.push(0)
  }
 }
 function getlist(fl) {
  if (lh.value.length != count.value) return
  fl.forEach(async i => {
    const { height, width } = await getImageSizeByCheck(i[pathname.value])
    const index = getlhmIndex()
    const h = imgW.value * height / width
    list["file" + index].push(i)
    // console.log("^^^",index,h,list["file" + index]);
    lh.value[index] += (h + Number(bot.value))
  })
 }
 function getImageSize(url) {
  return new Promise(function (resolve, reject) {
    let image = new Image();
    image.onload = function () {
      resolve(image.height);
    };
    image.onerror = function () {
      reject(new Error('error'));
    };
    image.src = url;
  });
 }
 function getImageSizeByCheck(url) {
  return new Promise(function (resolve, reject) {
    let image = new Image();
    image.src = url;
    let height = 0
    let width = 0
    let timer = setInterval(() => {
      if (image.width > 0 && image.height > 0) {
        height = image.height
        width = image.width
        resolve({ height, width })
        clearInterval(timer)
      }
    }, 40)
  });
 }
 function getlhmIndex() {
  const min = Math.min(...lh.value)
  // console.log(">>>>>>",lh.value,min,lh.value.findIndex(i => i == min));
  return lh.value.findIndex(i => i == min)
 }
 </script>
 <style lang="less" scoped>
 .col:not(:last-child) {
  margin-right: 20px;
 }
@media screen and (max-width:1000px) {
  .col:not(:last-child) {
  margin-right: 10px;
 }
 }
 </style>
--- a/src/components/foot.vue
+++ b/src/components/foot.vue
@ -0,0 +1,36 @@
 <template>
  <div class="beian" ref="footer">
    <a href="https://beian.miit.gov.cn" target="_blank">皖ICP备2021017362号-1</a>
    <a class="swag" target="_blank" href="https://www.hxyouzi.com/swag">api文档</a>
  </div>
 </template>
 <script setup>
 import { usesizeStore } from '@/stores/size.js';
 import { onMounted } from 'vue';
 const footer = ref(null);
 const size = usesizeStore();
 onMounted(()=>{
  size.setFootH(footer.value.clientHeight)
 })
 </script>
 <style scoped lang="less">
 .beian {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  background-color: @mozi;
 }
 .beian a {
  font-size: 12px;
  text-decoration: none;
  color: @blue;
 }
 .beian .swag {
  margin-left: 20px;
 }
 </style>
--- a/src/components/menu.vue
+++ b/src/components/menu.vue
@ -0,0 +1,189 @@
 <template>
  <div class="box flex justify-between items-center md:py-1" ref="menuH">
    <div class="md:hidden">
      <n-menu v-model:value="activeKey" :options="menuInfo.options" mode="horizontal" />
    </div>
    <n-icon size="30" class="menuIcon ml-2 hidden md:block text-pp-500" @click="active = true">
      <MdMenu />
    </n-icon>
    <div class="right flex items-center">
      <div class="wea text-white md:hidden">
        <wea />
      </div>
      <div v-if="!userinfo" class="login mx-8">
        <n-button color="#8a2be2" size="small" @click="goLogin">登录</n-button>
      </div>
      <div v-else class="uinfo flex items-center">
        <n-dropdown :options="userOp" @select="handleSelect" :show-arrow="true">
          <div class="uinfo mx-8 text-white flex items-center">
            <n-avatar round size="small" :src="userinfo.avaUrl" />
            <div class="ml-2"></div>
            <n-button text class="userinfo">
              {{ userinfo.nickname }}
            </n-button>
          </div>
        </n-dropdown>
      </div>
    </div>
  </div>
  <n-drawer v-model:show="active" width="40%" :auto-focus="false" placement="left" show-mask="transparent">
    <n-drawer-content>
      <template #header>
        <div class="flex items-center" :style="{ height: menuH.clientHeight + 'px' }">
          <n-icon size="24" class="orange mx-2">
            <orange />
          </n-icon>
          菜单
        </div>
      </template>
      <n-menu v-model:value="activeKey" mode="vertical" :options="menuInfo.options.slice(1)"
        @click="active = false"></n-menu>
    </n-drawer-content>
  </n-drawer>
 </template>
 <script setup>
 import wea from "@/components/wea.vue";
 import orange from "@/icon/orange.svg";
 import { usesizeStore } from "@/stores/size.js";
 import { renderIcon } from "@/util/h.js";
 import menuInfo from "@/util/menu.js";
 import { IosLogOut, IosSettings, MdHome, MdMenu } from "@vicons/ionicons4";
 import cookie from "vue-cookies";
 import { useRoute, useRouter } from "vue-router";
 let activeKey = ref("1");
 const active = ref(false);
 const menuH = ref(null);
 const sizeStore = usesizeStore();
 let { setMenuH } = sizeStore
 const route = useRoute()
 const { path, fullPath } = route;
 const router = useRouter()
 const { push } = router;
 let userinfo = ref(cookie.get("userinfo"));
 let userOp = [
  {
    label: "控制台",
    key: "profile",
    icon: renderIcon(MdHome),
  },
  {
    label: "退出登录",
    key: "logout",
    icon: renderIcon(IosLogOut),
  },
  {
    label: "设置",
    key: "2",
    icon: renderIcon(IosSettings),
  },
 ];
 menuInfo.menuList.forEach((i, idx) => {
  if (path == i) {
    activeKey.value = idx + 1 + "";
  }
 });
 onMounted(() => {
  // console.log(5555, setMenu);
  setMenuH(menuH.value.clientHeight);
 });
 function goLogin() {
  push("/login");
 }
 function handleSelect(k) {
  switch (k) {
    case "logout":
      logout();
      break;
    case "profile":
      goConsole();
      break;
  }
 }
 function logout() {
  cookie.remove("token");
  cookie.remove("userinfo");
  userinfo.value = "";
  // log.setLoginStatus(false);
  $dialog.success({
    title: "登出",
    content: "已退出登录，是否重新登录？",
    positiveText: "登录",
    negativeText: "回首页",
    onPositiveClick: () => {
      push({
        path: "/login",
        query: {
          redirect: fullPath,
        },
      });
    },
    onNegativeClick: () => {
      push("/");
    },
  });
 }
 function goConsole() {
  if (document.documentElement.clientWidth < 1000) {
    push("/m");
    return
  }
  push("/console");
 }
 </script>
 <style scoped lang="less">
 .login {
  :deep(.n-button) {
    background-color: @purple;
    width: 80px;
  }
 }
 :deep(.orange) {
  color: #ffa500;
 }
 :deep(.menu-item) {
  color: @orange !important;
 }
 :deep(.router-link-active) {
  color: @purple !important;
 }
 :deep(.n-drawer-header),
 :deep(.n-drawer-body-content-wrapper) {
  padding: 0 !important;
 }
 :deep(.n-menu-item-content--disabled) {
  opacity: unset !important;
 }
@media screen and (min-width: 1023px) {
  :deep(.n-menu-item-content--selected::after) {
    content: "";
    display: inline-block;
    height: 3px;
    width: 70%;
    background-color: @purple;
    position: absolute;
    left: 15%;
    bottom: 1px;
  }
 }
 </style>
--- a/src/components/pass.vue
+++ b/src/components/pass.vue
@ -0,0 +1,153 @@
 <template>
  <div>
    <n-steps :current="current">
      <n-step title="邮箱" description=""></n-step>
      <n-step title="修改密码"></n-step>
    </n-steps>
    <div class="step1 mt-5" v-if="current == 1">
      <n-form-item-row label="邮箱">
        <n-input v-model:value="form1.username" placeholder="请填写邮箱" @keyup.enter="getCode" />
      </n-form-item-row>
      <n-form-item-row label="验证码">
        <n-input-group>
          <n-input v-model:value="form1.code" placeholder="请填写验证码" />
          <n-button type="info" @click="getCode">获取验证码</n-button>
        </n-input-group>
      </n-form-item-row>
    </div>
    <n-form ref="pass" :model="form2" class="step2 mt-5" v-if="current == 2" :rules="rules">
      <n-form-item label="密码" path="password">
        <n-input v-model:value="form2.password" type="password" show-password-on="mousedown" placeholder="请输入密码"
          @keydown.enter.prevent />
      </n-form-item>
      <n-form-item label="重复密码" path="repassword">
        <n-input ref="reInput" type="password" show-password-on="mousedown" v-model:value="form2.repassword"
          placeholder="请再次输入密码" @keyup.enter="" />
      </n-form-item>
    </n-form>
    <div class="btns">
      <n-button v-if="current == 1" type="primary" secondary @click="back">返回登录</n-button>
      <n-button v-if="current == 2" type="primary" secondary @click="current--">上一步</n-button>
      <n-button v-if="current == 1" type="primary" @click="next">下一步</n-button>
      <n-button v-if="current == 2" type="primary" @click="submit">确定改密</n-button>
    </div>
  </div>
 </template>
 <script setup>
 const emit = defineEmits(["back"]);
 const pass = ref(null)
 const repass = ref(null)
 const current = ref(1);
 const form1 = reactive({
  username: "",
  code: "",
 });
 const form2 = reactive({
  username: "",
  password: "",
  repassword: "",
 });
 const rules = {
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { validator: validatePassword, message: "必须是含有数字，字母的6-12位密码", trigger: "blur" },
  ],
  repassword: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { validator: validatePassword, message: "必须是含有数字，字母的6-12位密码", trigger: "blur" },
    { validator: validatePasswordSame, message: "两次密码输入不一致", trigger: ["blur", "password-input"] },
  ],
 };
 function validatePasswordSame(rule, value) {
  return value === form2.password;
 }
 function validatePassword(r, v) {
  return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(v);
 }
 async function getCode() {
  if (!form1.username) {
    $msg.error("请输入邮箱");
    return;
  }
  const res = await $http.addr.sendMailinpass({ mail: form1.username });
  console.log(888, res);
  if (res.code == "1") $msg.success(res.msg);
  else if (res.code == "0") $msg.error(res.msg);
 }
 async function next() {
  if (!form1.username) {
    $msg.error("请输入邮箱");
    return;
  }
  if (!form1.code) {
    $msg.error("请输入验证码");
    return;
  }
  const res = await $http.user.rexpass(form1);
  if (res.code == "1") {
    $msg.success(res.msg);
    current.value++;
    form2.username = form1.username;
  } else if (res.code == "0") $msg.error(res.msg);
 }
 function submit() {
  pass.value.validate(async errors => {
    if (!errors) {
      const res = await $http.user.updatepass(form2);
      if (res.code == "1") {
        $msg.success(res.msg);
        emit("back");
      } else if (res.code == "0") $msg.error(res.msg);
    } else {
      $msg.error(errors[0][0].message)
    }
  });
 }
 function back() {
  emit("back");
 }
 </script>
 <style scoped lang="less">
 .btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  :deep(.n-button) {
    width: 45%;
  }
 }
 :deep(.n-step--wait-status) {
  .n-step-indicator {
    border: 1px solid @blue;
    .n-step-indicator-slot__index {
      color: @blue;
    }
  }
  .n-step-content-header__title {
    color: @blue;
  }
 }
 :deep(.n-step--finish-status) {
  .n-step-content-header__title {
    color: @purple;
  }
 }
 </style>
--- a/src/components/router.vue
+++ b/src/components/router.vue
@ -0,0 +1,42 @@
 <!-- 渐变过渡 -->
 <template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <div>
        <component :is="Component" />
      </div>
    </transition>
  </router-view>
 </template>
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 0.5s ease;
 }
 .fade-enter-from,
 .fade-leave-to {
  opacity: 0;
 }
 </style>
 <!-- 缩放过渡 -->
 <!-- <template>
  <router-view v-slot="{ Component }">
    <transition name="scale" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
 </template>
 <style scoped>
  .scale-enter-active,
  .scale-leave-active {
    transition: all 0.5s ease;
  }
  .scale-enter-from,
  .scale-leave-to {
    opacity: 0;
    transform: scale(0.9);
  }
 </style> -->
--- a/src/components/wea.vue
+++ b/src/components/wea.vue
@ -0,0 +1,58 @@
 <template>
  <div class="info">
    <div class="loc flex items-center">
      <n-icon size="18" color="#8a2be2">
        <IosPin />
      </n-icon>
      {{ addr }}
    </div>
    <div class="wea">
      <i :class="'qiIcon qi-' + now.icon + '-fill'"></i>
      <div class="tem">{{ now.text }} {{ now.temp }} ℃</div>
    </div>
  </div>
 </template>
 <script setup>
 import { IosPin } from "@vicons/ionicons4";
 const city = ref("合肥市");
 const addr = ref("安徽省合肥市");
 let now = ref({});
 onMounted(async () => { 
  const res = await $http.addr.getAddressByIP();
  console.log("111", res);
  city.value = res.city;
  addr.value = ['上海','重庆','北京','天津'].includes(res.province) ? res.country + res.city : res.province + res.city;
  const r = await $http.wea.getWeather({ city: city.value });
  now.value = r.now;
 });
 </script>
 <style lang="less" scoped>
 .info {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  .loc {
    margin-right: 15px;
    :deep(n-icon) {
      padding-top: 5px;
    }
  }
  .wea {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    .qiIcon {
      font-size: 26px;
      color: @purple;
    }
    .tem {
      margin-left: 15px;
    }
  }
 }</style>
--- a/src/cursor/alt.png
+++ b/src/cursor/alt.png
--- a/src/cursor/busy.png
+++ b/src/cursor/busy.png
--- a/src/cursor/cross.png
+++ b/src/cursor/cross.png
--- a/src/cursor/diag1.png
+++ b/src/cursor/diag1.png
--- a/src/cursor/diag2_26x26.png
+++ b/src/cursor/diag2_26x26.png
--- a/src/cursor/handwriting_26x26.png
+++ b/src/cursor/handwriting_26x26.png
--- a/src/cursor/help_26x26.png
+++ b/src/cursor/help_26x26.png
--- a/src/cursor/horiz_26x26.png
+++ b/src/cursor/horiz_26x26.png
--- a/src/cursor/link_26x26.png
+++ b/src/cursor/link_26x26.png
--- a/src/cursor/loc_26x26.png
+++ b/src/cursor/loc_26x26.png
--- a/src/cursor/move_26x26.png
+++ b/src/cursor/move_26x26.png
--- a/src/cursor/normal.png
+++ b/src/cursor/normal.png
--- a/src/cursor/text_26x26.png
+++ b/src/cursor/text_26x26.png
--- a/src/cursor/unavailable.png
+++ b/src/cursor/unavailable.png
--- a/src/cursor/vert.png
+++ b/src/cursor/vert.png
--- a/src/cursor/working.png
+++ b/src/cursor/working.png
--- a/src/icon/article.svg
+++ b/src/icon/article.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M26 30H11a2.002 2.002 0 0 1-2-2v-6h2v6h15V6h-9V4h9a2.002 2.002 0 0 1 2 2v22a2.002 2.002 0 0 1-2 2z" fill="currentColor"></path><path d="M17 10h7v2h-7z" fill="currentColor"></path><path d="M16 15h8v2h-8z" fill="currentColor"></path><path d="M15 20h9v2h-9z" fill="currentColor"></path><path d="M9 19a5.005 5.005 0 0 1-5-5V3h2v11a3 3 0 0 0 6 0V5a1 1 0 0 0-2 0v10H8V5a3 3 0 0 1 6 0v9a5.005 5.005 0 0 1-5 5z" fill="currentColor"></path></svg>
--- a/src/icon/back.svg
+++ b/src/icon/back.svg
@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694156756216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4088" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M379.616 515.648L705.44 841.472c20 20 20 52.416 0 72.416s-52.416 20-72.416 0L270.976 551.84c-20-20-20-52.416 0-72.416l362.048-362.048c20-20 52.416-20 72.416 0s20 52.416 0 72.416L379.616 515.616z" p-id="4089"></path></svg>
--- a/src/icon/group.svg
+++ b/src/icon/group.svg
@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="48px" height="48.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#7B1DD3" d="M822.327949 1008.51541h-620.624867a186.404679 186.404679 0 0 1-186.18746-186.187461v-620.624867a186.404679 186.404679 0 0 1 186.18746-186.18746h620.624867a186.404679 186.404679 0 0 1 186.187461 186.18746v620.624867a186.404679 186.404679 0 0 1-186.187461 186.187461zM510.960453 298.520561a84.063638 84.063638 0 0 0-57.842237 22.590745 98.679354 98.679354 0 0 0-27.090276 35.996243 158.259341 158.259341 0 0 0-10.891966 37.237492 107.399133 107.399133 0 0 0-1.365375 17.129246 123.380224 123.380224 0 0 0 13.002091 55.452832 100.944635 100.944635 0 0 0 39.719992 45.119428l-131.386285 60.883299a24.173339 24.173339 0 0 0-13.684778 23.273433v104.016728a27.400588 27.400588 0 0 0 6.206249 17.811933 18.835965 18.835965 0 0 0 15.050153 7.540593h335.94424a19.487621 19.487621 0 0 0 15.732841-7.540593 27.400588 27.400588 0 0 0 6.206248-17.811933v-104.016728a23.831995 23.831995 0 0 0-13.684778-23.273433l-91.014637-43.754053-38.975241-18.618746a100.199885 100.199885 0 0 0 39.657929-46.546865 131.479378 131.479378 0 0 0 10.954028-52.753114 158.259341 158.259341 0 0 0-3.413436-30.814024 116.615413 116.615413 0 0 0-34.134368-58.959363 84.932513 84.932513 0 0 0-58.959362-22.994151z m158.104185 41.085366a62.062487 62.062487 0 0 0-21.22537 3.72375 86.887481 86.887481 0 0 0-19.177309 9.961029 153.449498 153.449498 0 0 1 8.22328 27.928119 161.021122 161.021122 0 0 1 2.730749 30.069275 157.049123 157.049123 0 0 1-6.516561 45.491802 149.167187 149.167187 0 0 1-18.122246 39.347617 72.706203 72.706203 0 0 0 18.618746 15.763872l67.710173 32.179399a53.001364 53.001364 0 0 1 22.901058 20.852996 58.680081 58.680081 0 0 1 8.595654 31.031243v88.252856h72.520016a15.298403 15.298403 0 0 0 12.412497-5.802842 22.46662 22.46662 0 0 0 4.778812-14.739841v-83.474045a19.735871 19.735871 0 0 0-10.954029-19.177308l-104.699415-49.929271a89.152762 89.152762 0 0 0 29.44865-33.172399 99.299979 99.299979 0 0 0 11.636716-47.570896 101.81351 101.81351 0 0 0-6.206249-35.220461 93.404043 93.404043 0 0 0-16.818934-29.076275 79.408952 79.408952 0 0 0-24.824994-19.549684 68.920392 68.920392 0 0 0-31.000212-6.919967z m-314.780932 0a66.468923 66.468923 0 0 0-30.503713 7.168218 80.898451 80.898451 0 0 0-24.576744 19.549683 94.428074 94.428074 0 0 0-16.756872 29.076275 105.164884 105.164884 0 0 0 5.430468 83.474045 85.335919 85.335919 0 0 0 30.814024 33.172399l-106.002727 49.246583a17.998121 17.998121 0 0 0-10.954029 19.177308v83.474045a22.435589 22.435589 0 0 0 4.716749 14.739841 15.515622 15.515622 0 0 0 12.412497 5.802842h70.534017v-88.252856a58.959362 58.959362 0 0 1 8.533592-31.031243 52.753114 52.753114 0 0 1 23.583745-20.852996l70.471953-33.544774a68.610079 68.610079 0 0 0 15.763872-13.002091 143.240219 143.240219 0 0 1-19.115246-40.030304 154.970029 154.970029 0 0 1-6.919967-46.17449 157.576654 157.576654 0 0 1 11.698778-59.517925 101.223916 101.223916 0 0 0-18.618746-8.905967 60.572987 60.572987 0 0 0-20.48062-3.599624z"  /></svg>
--- a/src/icon/hot.svg
+++ b/src/icon/hot.svg
@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711591952359" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3959" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M414.72 981.333s-416.427-91.52-230.4-545.92c0 0 42.667 50.56 36.48 74.88 0 0 33.067-114.773 104.533-183.253 61.44-59.093 123.734-224.64 66.347-284.373 0 0 284.8 59.733 316.587 359.04 0 0 36.48-95.36 111.146-104.747a204.587 204.587 0 0 0 0 130.987s235.947 403.84-170.666 540.373c0 0 121.813-138.453-136.534-375.893 0 0-61.013 128-97.28 171.946-0.213 0-101.973 114.134-0.213 216.96z" p-id="3960" fill="#d81e06"></path></svg>
--- a/src/icon/index.js
+++ b/src/icon/index.js
@ -0,0 +1,12 @@
 const icons = import.meta.glob('./*.svg', {
  eager: true,
 })
 const icon = {}
 console.log(icons);
 for (const i in icons) {
  const t = i.split("/")
  const name = t[1].split('.')[0]
  icon[name] = icons[i]
 }
 export default icon
--- a/src/icon/lr.svg
+++ b/src/icon/lr.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M14.768 15.712l1.513-1.461l-1.513-1.461a.75.75 0 1 1 1.042-1.08l1.886 1.821a1 1 0 0 1 0 1.44l-1.886 1.82a.75.75 0 0 1-1.042-1.079zm-9.534 0L3.72 14.251l1.513-1.461a.75.75 0 0 0-1.042-1.08l-1.886 1.821a1 1 0 0 0 0 1.44l1.886 1.82a.75.75 0 0 0 1.042-1.079zM8 14.252a.75.75 0 0 1-.75.75h-.5a.75.75 0 1 1 0-1.5h.5a.75.75 0 0 1 .75.75zm1.75.75a.75.75 0 1 1 0-1.5h.5a.75.75 0 0 1 0 1.5h-.5zm2.25-.75c0 .415.336.75.75.75h.5a.75.75 0 1 0 0-1.5h-.5a.75.75 0 0 0-.75.75zm5-9.252a2 2 0 0 0-2-2h-10a2 2 0 0 0-2 2v4.25a.75.75 0 0 0 1.5 0V5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v4.25a.75.75 0 1 0 1.5 0V5z" fill="currentColor"></path></g></svg>
--- a/src/icon/mail.svg
+++ b/src/icon/mail.svg
@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="48px" height="48.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#7B1DD3" d="M873.472 0H150.528C67.584 0 0 67.584 0 150.528v722.944C0 956.416 67.584 1024 150.528 1024h722.944c82.944 0 150.528-67.584 150.528-150.528V150.528C1024 67.584 956.416 0 873.472 0z m-61.952 656.896c0 41.472-33.792 74.752-74.752 74.752H287.232c-41.472 0-74.752-33.28-74.752-74.752V367.104c0-41.472 33.28-74.752 74.752-74.752h449.024c41.472 0 74.752 33.28 74.752 74.752v289.792z"  /><path fill="#7B1DD3" d="M712.192 427.008L512 556.032 311.808 427.008c-9.216-6.144-21.504-3.072-27.648 6.144-6.144 9.216-3.072 21.504 6.144 27.648l210.944 135.68c3.072 2.048 7.168 3.072 10.752 3.072 3.584 0 7.68-1.024 10.752-3.072L733.696 460.8a20.48 20.48 0 0 0 6.144-27.648 20.48 20.48 0 0 0-27.648-6.144z"  /></svg>
--- a/src/icon/more.svg
+++ b/src/icon/more.svg
@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711588832708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6877" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M713.8 523.5c-8.9-8.9-23.2-8.6-32.1 0.3L512.1 693.6 342.7 523.7c-8.9-8.9-23.2-9.1-32.1-0.3v0.5c-8.9 8.9-8.9 23 0 31.9l185.3 185.5c0.5 0.5 1.1 1 1.7 1.5l0.1 0.1c0.5 0.4 1.1 0.8 1.7 1.2 0.1 0.1 0.2 0.1 0.2 0.2 0.5 0.4 1.1 0.7 1.7 1 0.1 0 0.2 0.1 0.3 0.1 0.6 0.3 1.2 0.6 1.8 0.8 0.1 0 0.1 0.1 0.2 0.1 0.6 0.2 1.2 0.5 1.9 0.7h0.2c0.6 0.2 1.3 0.4 2 0.5h0.1c0.7 0.1 1.4 0.2 2 0.3h0.1c0.7 0.1 1.4 0.1 2.1 0.1 0.7 0 1.4 0 2.1-0.1h0.1c0.7-0.1 1.4-0.2 2-0.3h0.1c0.7-0.1 1.3-0.3 2-0.5h0.2c0.6-0.2 1.3-0.4 1.9-0.7 0.1 0 0.1-0.1 0.2-0.1 0.6-0.2 1.2-0.5 1.8-0.8 0.1 0 0.2-0.1 0.3-0.1 0.6-0.3 1.1-0.6 1.7-1 0.1-0.1 0.2-0.1 0.2-0.2 0.6-0.4 1.1-0.8 1.7-1.2l0.1-0.1c0.6-0.5 1.1-1 1.7-1.5l185.8-185.5c8.8-8.8 8.8-23.4-0.1-32.3z m-218.3-23.1c0.5 0.5 1.1 1 1.7 1.5l0.1 0.1c0.5 0.4 1.1 0.8 1.7 1.2 0.1 0.1 0.2 0.1 0.2 0.2 0.5 0.4 1.1 0.7 1.7 1 0.1 0 0.2 0.1 0.3 0.1 0.6 0.3 1.2 0.6 1.8 0.8 0.1 0 0.1 0.1 0.2 0.1 0.6 0.2 1.2 0.5 1.9 0.7h0.2c0.6 0.2 1.3 0.4 2 0.5h0.1c0.7 0.1 1.4 0.2 2 0.3h0.1c0.7 0.1 1.4 0.1 2.1 0.1 0.7 0 1.4 0 2.1-0.1h0.1c0.7-0.1 1.4-0.2 2-0.3h0.1c0.7-0.1 1.3-0.3 2-0.5h0.2c0.6-0.2 1.3-0.4 1.9-0.7 0.1 0 0.1-0.1 0.2-0.1 0.6-0.2 1.2-0.5 1.8-0.8 0.1 0 0.2-0.1 0.3-0.1 0.6-0.3 1.1-0.6 1.7-1 0.1-0.1 0.2-0.1 0.2-0.2 0.6-0.4 1.1-0.8 1.7-1.2l0.1-0.1c0.6-0.5 1.1-1 1.7-1.5l185.8-185.5c8.9-8.9 8.9-23.5 0-32.4-8.9-8.9-23.2-8.6-32.1 0.3L511.7 452.6 342.3 282.7c-8.9-8.9-23.2-9.1-32.1-0.3v0.5c-8.9 8.9-8.9 23 0 31.9l185.3 185.6z" p-id="6878" fill="#8a2be2"></path></svg>
--- a/src/icon/orange.svg
+++ b/src/icon/orange.svg
@ -0,0 +1,17 @@
  <svg
    t="1652688633372"
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="1737"
    width="200"
    height="200"
  >
    <path
      d="M544.768 904.192c40.96-3.412992 80.212992-12.971008 117.76-28.672s72.020992-36.864 103.424-63.488L578.56 624.64c-10.24 6.144-21.504 10.923008-33.792 14.336v265.216z m267.264-138.24c26.624-31.403008 47.787008-65.876992 63.488-103.424 15.700992-37.547008 25.259008-76.8 28.672-117.76H638.976c-3.412992 12.288-8.192 23.552-14.336 33.792l187.392 187.392z m92.16-286.72c-3.412992-40.96-12.971008-80.212992-28.672-117.76s-36.864-72.020992-63.488-103.424L624.64 445.44c6.144 10.24 10.923008 21.504 14.336 33.792h265.216zM765.952 211.968c-31.403008-26.624-65.876992-47.787008-103.424-63.488-37.547008-15.700992-76.8-25.259008-117.76-28.672v265.216c12.288 3.412992 23.552 8.192 33.792 14.336l187.392-187.392z m-286.72-92.16c-40.96 3.412992-80.212992 12.971008-117.76 28.672s-72.020992 36.864-103.424 63.488l187.392 187.392c10.24-6.144 21.504-10.923008 33.792-14.336V119.808zM211.968 258.048c-26.624 31.403008-47.787008 65.876992-63.488 103.424-15.700992 37.547008-25.259008 76.8-28.672 117.76h265.216c3.412992-12.288 8.192-23.552 14.336-33.792L211.968 258.048z m-92.16 286.72c3.412992 40.96 12.971008 80.212992 28.672 117.76s36.864 72.020992 63.488 103.424l187.392-187.392c-6.144-10.923008-10.923008-22.187008-14.336-33.792H119.808z m138.24 267.264c31.403008 26.624 65.876992 47.787008 103.424 63.488 37.547008 15.700992 76.8 25.259008 117.76 28.672V638.976c-11.604992-3.412992-22.868992-8.192-33.792-14.336L258.048 812.032z m253.952 158.72c-129.707008-3.412992-237.739008-48.299008-324.096-134.656S56.660992 641.707008 53.248 512c3.412992-129.707008 48.299008-237.739008 134.656-324.096S382.292992 56.660992 512 53.248c129.707008 3.412992 237.739008 48.299008 324.096 134.656S967.339008 382.292992 970.752 512c-3.412992 129.707008-48.299008 237.739008-134.656 324.096S641.707008 967.339008 512 970.752z m0-393.216c18.432-0.683008 33.792-7.168 46.08-19.456s18.432-27.648 18.432-46.08-6.144-33.792-18.432-46.08-27.648-18.432-46.08-18.432-33.792 6.144-46.08 18.432-18.432 27.648-18.432 46.08 6.144 33.792 18.432 46.08 27.648 18.772992 46.08 19.456z"
      p-id="1738"
    ></path>
  </svg>
--- a/src/icon/pic.svg
+++ b/src/icon/pic.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3l150.1 178L658.1 489L888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2zM304 456a88 88 0 1 0 0-176a88 88 0 0 0 0 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28s-28-12.5-28-28s12.5-28 28-28z" fill="currentColor"></path></svg>
--- a/src/icon/profile.svg
+++ b/src/icon/profile.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="4"></circle><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path><path d="M21 21v-2a4 4 0 0 0-3-3.85"></path></g></svg>
--- a/src/icon/qq.svg
+++ b/src/icon/qq.svg
@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="48px" height="48.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#7B1DD3" d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" /></svg>
--- a/src/icon/right.svg
+++ b/src/icon/right.svg
@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694158711559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5049" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M724 511.4L361 947.6c-12.2 14.6-33.9 16.6-48.5 4.4-14.6-12.2-16.6-33.9-4.4-48.5l326.2-392-326.3-391c-12.2-14.6-10.2-36.3 4.4-48.5 14.6-12.2 36.3-10.2 48.5 4.4l363.1 435z" p-id="5050"></path></svg>
--- a/src/icon/user.svg
+++ b/src/icon/user.svg
@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="48px" height="48.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#7B1DD3" d="M490.7 100.8c115.8 0 209.6 92.3 209.6 206.2 0 113.9-93.9 206.2-209.6 206.2S281.1 420.9 281.1 307c0-113.9 93.9-206.2 209.6-206.2z m0 0c115.8 0 209.6 92.3 209.6 206.2 0 113.9-93.9 206.2-209.6 206.2S281.1 420.9 281.1 307c0-113.9 93.9-206.2 209.6-206.2zM412.1 582h174.7c149.6 0 270.8 119.2 270.8 266.3v17.2c0 58-121.2 60.2-270.8 60.2H412.1c-149.6 0-270.8-0.1-270.8-60.2v-17.2c0-147.1 121.2-266.3 270.8-266.3z m0 0" /></svg>
--- a/src/index.vue
+++ b/src/index.vue
@ -0,0 +1,13 @@
 <template>
  <n-global-style />
  <RouterView />
 </template>
 <script setup>
 import { useDialog, useMessage, useNotification } from "naive-ui";
 window.$msg = useMessage();
 window.$dialog = useDialog();
 window.$note = useNotification();
 </script>
 <style scoped></style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,36 @@
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 import http from '@/api/index.js';
 import icon from "@/icon/index.js";
 import "@vant/touch-emulator";
 import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 import "qweather-icons/font/qweather-icons.css";
 import "tailwindcss/tailwind.css";
 import "vfonts/FiraCode.css";
 import VueWechatTitle from "vue-wechat-title";
 import App from "./App.vue";
 import "./assets/style/main.css";
 import router from "./router/guard.js";
 import { formatTimeBydate } from './util/index.js';
 Date.prototype.format = formatTimeBydate
 const app = createApp(App);
 document.oncontextmenu = function () {
  return false;
 };
 app.use(createPinia());
 app.use(router).use(VueWechatTitle);
 window.$http = http
 // window.$icon = icon
 for (const key in icon) {
  // console.log(key, icon[key]);
  app.component('icon-'+key, icon[key]);
 }
 app.mount("#app");
--- a/src/router/guard.js
+++ b/src/router/guard.js
@ -0,0 +1,38 @@
 import NProgress from "nprogress";
 import cookie from "vue-cookies";
 import router from "./index";
 // import 'nprogress/nprogress.css'; // nprogress样式文件
 import "@/router/nprogress.less";
 router.beforeEach((to, from, next) => {
  const token = cookie.get("token");
  const userinfo = cookie.get("userinfo");
  // 路由发生变化修改页面title
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  // 开启进度条
  NProgress.start();
  if (to.meta?.auth) {
    if (!!token && !!userinfo) {
      next();
    } else {
      next({
        path: "/login",
        query: {
          redirect: to.fullPath,
        },
      });
    }
  } else {
    next();
  }
 });
 //当路由跳转结束后
 router.afterEach(() => {
  // 关闭进度条
  NProgress.done();
 });
 export default router;
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,143 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      redirect: "/home",
      children: [
        {
          path: "/",
          component: HomeView,
          redirect: "/home",
          children: [
            {
              path: "/home",
              component: () => import("@/views/home/index.vue"),
            },
            {
              path: "/gallery",
              component: () => import("@/views/gallery/index.vue"),
            },
            {
              path: "/article",
              component: () => import("@/views/article/index.vue"),
            },
            {
              path: "/tour",
              component: () => import("@/views/tour/index.vue"),
            },
            {
              path: "/plink",
              component: () => import("@/views/plink/index.vue"),
            },
          ],
        },
        {
          path: "/login",
          component: () => import("@/views/login.vue"),
        },
        {
          path: "/swag",
          component: () => import("@/views/swag/index.vue"),
        },
        {
          path: "/mini/:id",
          component: () => import("@/views/article/mini/index.vue"),
        },
        {
          path: "/console",
          component: () => import("@/views/console/index.vue"),
          redirect: "/console/home",
          children: [
            {
              path: "/console/home",
              component: () => import("@/views/console/home/index.vue"),
              meta: {
                title: "控制台",
                name: "首页",
                auth: true,
              },
            },
            {
              path: "/console/profile",
              component: () => import("@/views/console/profile/index.vue"),
              meta: {
                title: "控制台",
                name: "个人信息",
                auth: true,
              },
            },
            {
              path: "/console/gallery",
              component: () => import("@/views/console/gallery/index.vue"),
              meta: {
                title: "控制台",
                name: "画廊管理",
                auth: true,
              },
            },
            {
              path: "/console/article",
              component: () => import("@/views/console/article/index.vue"),
              meta: {
                title: "控制台",
                name: "文章管理",
                auth: true,
              },
            },
          ],
        },
        {
          path: "/m",
          component: () => import("@/views/mobile/index.vue"),
          redirect: "/m/home",
          children: [
            {
              path: "/m/home",
              component: () => import("@/views/mobile/home/index.vue"),
              meta: {
                title: "我的",
                name: "控制台",
                auth: true,
              },
            },
            {
              path: "/m/profile",
              component: () => import("@/views/mobile/info/index.vue"),
              meta: {
                title: "个人信息",
                name: "控制台",
                auth: true,
              },
            },
            {
              path: "/m/gallery",
              component: () => import("@/views/mobile/gallery/index.vue"),
              meta: {
                title: "画廊管理",
                name: "控制台",
                auth: true,
              }
            },
            {
              path: "/m/article",
              component: () => import("@/views/mobile/arti/index.vue"),
              meta: {
                title: "文章管理",
                name: "控制台",
                auth: true,
              }
            },
          ]
        }
      ],
    },
  ],
 });
 export default router;
--- a/src/router/nprogress.less
+++ b/src/router/nprogress.less
@ -0,0 +1,82 @@
 /* Make clicks pass-through */
 #nprogress {
  pointer-events: none;
 }
 #nprogress .bar {
  background: @purple;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
 }
 /* Fancy blur effect */
 #nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
 }
 /* Remove these to get rid of the spinner */
 #nprogress .spinner {
  /* display: block; */
  display: none;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
 }
 #nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
 }
 .nprogress-custom-parent {
  overflow: hidden;
  position: relative;
 }
 .nprogress-custom-parent #nprogress .spinner,
 .nprogress-custom-parent #nprogress .bar {
  position: absolute;
 }
@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
 }
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
 }
--- a/src/stores/login.js
+++ b/src/stores/login.js
@ -0,0 +1,14 @@
 import { defineStore } from "pinia";
 export const loginStore = defineStore("login", {
  state: () => {
    return {
      loginStatus: true,
    };
  },
  getters: {},
  actions: {
    setLoginStatus(v) {
      this.loginStatus = v;
    },
  },
 });
--- a/src/stores/size.js
+++ b/src/stores/size.js
@ -0,0 +1,21 @@
 import { defineStore } from "pinia";
 export const usesizeStore = defineStore("size", {
  state: () => ({
    menuH: 0,
    navH: 0,
    conH: 0,
    footH:0,
  }),
  actions: {
    setMenuH(v) {
      this.menuH = v;
    },
    setConH(v) {
      this.conH = v;
    },
    setFootH(v){
      this.footH = v;
    }
  },
 });
--- a/src/util/consoleMenu.js
+++ b/src/util/consoleMenu.js
@ -0,0 +1,34 @@
 import article from "@/icon/article.svg";
 import orange from "@/icon/orange.svg";
 import pic from "@/icon/pic.svg";
 import profile from "@/icon/profile.svg";
 import { NIcon } from "naive-ui";
 import { RouterLink } from "vue-router";
 const options = [
  {
    label: () => h(RouterLink, { to: "/console/home", class: "menu-item" }, { default: () => "黑心柚子" }),
    key: "0",
    icon: () => h(NIcon, { class: "orange" }, { default: () => h(orange) }),
  },
  {
    label: () => h(RouterLink, { to: "/console/profile", class: "menu-item" }, { default: () => "个人信息" }),
    key: "1",
    icon: () => h(NIcon, { class: "orange" }, { default: () => h(profile) }),
  },
  {
    label: () => h(RouterLink, { to: "/console/gallery", class: "menu-item" }, { default: () => "画廊管理" }),
    key: "2",
    icon: () => h(NIcon, { class: "orange" }, { default: () => h(pic) }),
  },
  {
    label: () => h(RouterLink, { to: "/console/article", class: "menu-item" }, { default: () => "文章管理" }),
    key: "3",
    icon: () => h(NIcon, { class: "orange" }, { default: () => h(article) }),
  },
 ];
 const consoleMenuInfo = {
  options,
  menuList: ["/console/home", "/console/profile", "/console/gallery", "/console/article"],
 };
 export default consoleMenuInfo;
--- a/src/util/h.js
+++ b/src/util/h.js
@ -0,0 +1,9 @@
 import { NIcon } from 'naive-ui';
 export function renderIcon(icon) {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon)
    });
  };
 }
--- a/src/util/index.js
+++ b/src/util/index.js
@ -0,0 +1,136 @@
 // 将res的key对应的值复制给dzdata的同名key
 export function ObjectCopy(res, dzdata) {
  Object.keys(dzdata).map(key => {
    dzdata[key] = res[key];
  });
 }
 /** 
 * @description: 时间格式化
 * @param {*} time 传入时间参数，支持字符串和时间戳
 * @param {*} f 对应格式 "YYYY-MM-DD hh:mm:ss" "YYYY年MM月DD日hh时mm分ss秒"
 *              格式可以自定义，对应的字符串对应的时间会更新，输入单个字符表示可以不补零
 * @return {*} 返回格式化的日期
 */
 export function formatTime(time, f) {
  const date = new Date(time);
  if (!(date instanceof Date && !isNaN(date.getTime()))) {
    console.error("不合法的日期！");
    return;
  }
  const year = date.getFullYear();
  const month = date.getMonth();
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  const monthAdd0 = timeAdd0(month + 1);
  const dayAdd0 = timeAdd0(day);
  const hourAdd0 = timeAdd0(hour);
  const minuteAdd0 = timeAdd0(minute);
  const secondAdd0 = timeAdd0(second);
  let str = f.toString();
  str = str.replace("YYYY", year);
  if (f.includes("M")) {
    if (f.includes("MM")) str = str.replace("MM", monthAdd0);
    else str = str.replace("M", month + 1);
  }
  if (f.includes("D")) {
    if (f.includes("DD")) str = str.replace("DD", dayAdd0);
    else str = str.replace("D", day);
  }
  if (f.includes("h")) {
    if (f.includes("h")) str = str.replace("hh", hourAdd0);
    else str = str.replace("h", hour);
  }
  if (f.includes("m")) {
    if (f.includes("mm")) str = str.replace("mm", minuteAdd0);
    else str = str.replace("m", minute);
  }
  if (f.includes("s")) {
    if (f.includes("ss")) str = str.replace("ss", secondAdd0);
    else str = str.replace("s", second);
  }
  return str;
 }
 /** 
 * @description: 补零函数 为时间服务 不足两位的自定在数字前面加上0
 * @param {*} n 待补零数字
 * @return {*} 补零后数字
 */
 function timeAdd0(n) {
  const s = n.toString();
  return s.padStart(2, "0");
 }
 export function deepclone(obj) {
  let str, newobj = obj.constructor === Array ? [] : {};
  if (typeof obj !== "object") {
    return;
  }
  else if (window.JSON) {
    str = JSON.stringify(obj), //系列化对象
      newobj = JSON.parse(str); //还原
  }
  else {
    for (var i in obj) {
      newobj[i] = typeof obj[i] === "object" ? deepclone(obj[i]) : obj[i];
    }
  }
  return newobj;
 }
 export function formatTimeBydate(f) {
  return formatTime(this, f)
 }
 export function debounce(fn, delay) {
  let timer = null;
  return function () {
    let _this = this;
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(function () {
      fn.apply(_this, args);
    }, delay);
  }
 }
 export function throttle(fn, delay) {
  let timer = null;
  return function () {
    let _this = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        fn.apply(_this, args);
        timer = null;
      }, delay);
    }
  }
 }
 // 字典查询 通个一个字段返回另一个字段的值
 /**
 * @description 字典查询
 * @param {*} dict 字典数组
 * @param {*} ckey 查询字段
 * @param {*} cvalue 查询值
 * @param {*} rkey 返回字段
 * @return {*} 返回值
 */
 export function getDictValue(dict, ckey, cvalue,rkey) {
  let result = "";
  dict.map(item => {
    if (item[ckey] == cvalue) {
      result = item[rkey];
    }
  })
  return result;
 }
--- a/src/util/menu.js
+++ b/src/util/menu.js
@ -0,0 +1,32 @@
 import orange from "@/icon/orange.svg";
 import { NIcon } from "naive-ui";
 import { RouterLink } from "vue-router";
 const menuInfo = {
  options: [
    {
      label: () => "",
      key: "0",
      disabled: true,
      icon: () => h(NIcon, { class: "orange" }, { default: () => h(orange) }),
    },
    {
      key: "1",
      label: () => h(RouterLink, { to: "/home", class: "menu-item" }, { default: () => "首页" }),
    },
    {
      key: "2",
      label: () => h(RouterLink, { to: "/gallery", class: "menu-item" }, { default: () => "画廊" }),
    },
    {
      key: "3",
      label: () => h(RouterLink, { to: "/article", class: "menu-item" }, { default: () => "文章" }),
    },
    {
      key: "4",
      label: () => h(RouterLink, { to: "/plink", class: "menu-item" }, { default: () => "友链" }),
    },
  ],
  menuList: ["/home", "/gallery", "/article","/plink"],
 };
 export default menuInfo;
--- a/src/util/request.js
+++ b/src/util/request.js
@ -0,0 +1,58 @@
 import axios from 'axios';
 import qs from 'qs';
 import cookie from 'vue-cookies';
 import router from '../router/index.js';
 let baseURL = import.meta.env.VITE_APP_BASE_URL + '/api';
 let headers = {
  'Content-Type': 'application/x-www-form-urlencoded'
 };
 const request = axios.create({
  baseURL,
  headers
 });
 // 添加请求拦截器
 request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    if (config.method == 'post' || config.method == 'POST') {
      config.data = qs.stringify(config.data);
    }
    if (cookie.get('token') && cookie.get('token') != '') {
      config.headers['Authorization'] = cookie.get('token');
    }
    return config;
  },
  async function (error) {
    // 对请求错误做些什么
    return error.message;
  }
 );
 // 添加响应拦截器
 request.interceptors.response.use(
  function (response) {
    // const msg = useMessage()
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    if (response.data.code == 9) {
      window.$msg.error('登录过期，请重新登录');
      router.push('/login');
      return false;
    }
    if (response.data.code == 8) {
      window.$msg.error(response.data.msg);
      return false;
    }
    return response.data;
  },
  async function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return error.message;
  }
 );
 export default request;
--- a/src/util/theme.js
+++ b/src/util/theme.js
@ -0,0 +1,45 @@
 const themeOverrides = {
  lightOverrides: {
    common: {
      primaryColor: "#8a2be2", //默认颜色
      primaryColorHover: "#8a2be2", //hover颜色
      primaryColorPressed: "#8a2be2", //点击颜色
      successColor: "#409EFF",
      successColorHover: "#409EFF",
      successColorPressed: "#409EFF",
      infoColor: "#8a2be2",
      infoColorHover: "#8a2be2",
      infoColorPressed: "#8a2be2",
    },
    Radio: {
      buttonColorActive: "#FFA50040",
    },
  },
  darkOverrides: {
    common: {
      primaryColor: "#409EFF", //默认颜色
      primaryColorHover: "#409EFF", //hover颜色
      primaryColorPressed: "#409EFF", //点击颜色
      successColor: "#409EFF",
      successColorHover: "#409EFF",
      successColorPressed: "#409EFF",
    },
    Menu: {
      itemColorHover: "rgb(38, 52, 69)", //hover背景颜色
      itemTextColor: "#777", //默认文字颜色
      itemTextColorHover: "rgb(191, 203, 217)", ////hover文字颜色
      arrowColor: "rgb(191, 203, 217)", //默认标签颜色
      arrowColorHover: "rgb(191, 203, 217)", // hover 标签颜色
      itemHeight: "56px", //item的高度
      itemIconColor: "rgb(191, 203, 217)", //默认icon颜色
      itemIconColorHover: "rgb(191, 203, 217)", //hover icon颜色
      itemIconColorCollapsed: "rgb(191, 203, 217)", //收缩 icon颜色
      itemColorActiveCollapsed: "rgb(38, 52, 69)",
    },
    Radio: {
      buttonColorActive: "#409EFF",
    },
  },
 };
 export default themeOverrides;
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,39 @@
 <template>
  <n-layout style="">
    <n-layout-header ref="nav">
      <navH />
    </n-layout-header>
    <n-scrollbar :style="cH">
      <router>
        <router-view />
      </router>
    </n-scrollbar>
  </n-layout>
 </template>
 <script setup>
 import navH from "@/components/menu.vue";
 import router from "@/components/router.vue";
 import { onMounted } from "vue";
 const nav = ref(null);
 let contH = ref(0);
 let cH = ref({});
 onMounted(() => {
  getH();
 });
 function getH() {
  contH.value = nav.value.$el.clientHeight;
  cH.value = {
    height: document.documentElement.clientHeight - contH.value + "px",
    backgroundColor:"#f1f2f3"
  };
  // console.log(4, contH.value);
 }
 </script>
 <style scoped lang="less">
 :deep(.n-layout-header) {
  background-color: @dp;
 }
 </style>
--- a/src/views/article/index.vue
+++ b/src/views/article/index.vue
@ -0,0 +1,35 @@
 <template>
  <div>
    <div class="box xxx" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
      <n-scrollbar class="pt-6" trigger="hover" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
        <arti :list="artList" />
      </n-scrollbar>
    </div>
  </div>
 </template>
 <script setup>
 import arti from '@/components/arti.vue';
 import { usesizeStore } from "@/stores/size.js";
 const size = usesizeStore();
 const artList = ref([])
 //mark 周期、内置函数等
 onMounted(async () => {
  const res = await $http.art.queryArt()
  artList.value = res.data
 })
 </script>
 <style scoped>
 :deep(.n-layout-sider) {
  width: unset !important;
  max-width: unset !important;
 }
 :deep(.n-scrollbar-rail) {
  display: none !important;
 }
 </style>
--- a/src/views/article/mini/index.vue
+++ b/src/views/article/mini/index.vue
@ -0,0 +1,62 @@
 <template>
  <n-scrollbar style="max-height: 100vh">
    <div class="title">
      {{ info.title }}
    </div>
    <div class="author">
      {{ info.nickname }}
    </div>
    <div class="cont">
      <Editor v-model="info.cont" :defaultConfig="editorConfig" />
    </div>
    <div class="time">--发表于 {{ formatTime(info.updated_at, "YYYY年MM月DD日hh时") }}</div>
  </n-scrollbar>
 </template>
 <script setup>
 import { formatTime } from "@/util/index.js";
 import { Editor } from "@wangeditor/editor-for-vue";
 import { useRoute } from "vue-router";
 const editorConfig = { readOnly: true };
 const info = ref({updated_at:new Date()});
 const route = useRoute();
 // console.log(route.params.id);
 getInfo(route.params.id);
 async function getInfo(id) {
  const res = await $http.art.queryArtInfo(id);
  // console.log("**********", res);
  info.value = res.data[0];
 }
 </script>
 <style scoped lang="less">
 .title {
  font-style: italic;
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
 }
 .author {
  padding: 5px 20px;
  text-align: right;
  color: @purple;
 }
 .cont {
  width: 96%;
  margin: 0px auto;
  min-height: 80vh;
 }
 .time {
  font-style: italic;
  text-align: right;
  padding: 5px 30px;
 }
 :deep(#w-e-element-3) {
  margin: unset !important;
 }
 </style>
--- a/src/views/console/article/index.vue
+++ b/src/views/console/article/index.vue
@ -0,0 +1,176 @@
 <template>
  <div>
    <div class="mb-8 mt-8 relative">
      <h1 class="text-center text-lg">我的文章</h1>
      <div class="absolute top-0 right-[5%]">
        <n-button type="primary" @click="add">写文章</n-button>
      </div>
    </div>
    <div class="table w-[95%] mx-auto">
      <n-data-table :columns="columns" striped :single-line="false" :paginate-single-page="false" :pagination="pagination"
        :data="artiList">
        <template #empty>
          <div>
            <span>您还未发表过文章，</span><span class="text-pp-200 hover:underline" @click="add">去写一篇 ></span>
          </div>
        </template>
      </n-data-table>
    </div>
    <n-drawer v-model:show="dshow" :width="702" :mask-closable="false">
      <n-drawer-content :title="dtitle" closable>
        <artiView v-if="show == 'view'" :id="opId" />
        <edition v-if="show == 'add'" :id="-1" @close="handdleCloseEditor" />
        <edition v-if="show == 'edit'" :id="curId" @close="handdleCloseEditor" />
      </n-drawer-content>
    </n-drawer>
    <n-modal v-model:show="showModal" preset="dialog" title="删除" content="是否永久删除该文章？" positive-text="确认"
      negative-text="取消" @positive-click="submitCallback" @negative-click="cancelCallback" />
  </div>
 </template>
 <script setup>
 import edition from '@/components/edition.vue';
 import { onMounted, ref } from 'vue';
 import artiView from './view.vue';
 const dshow = ref(false)
 const showModal = ref(false)
 const artiList = ref([])
 const pagination = ref({
  pageSize: 10,
 })
 const dtitle = ref('');
 const opId = ref(-1);
 const curId = ref(-1);
 const delId = ref(-1);
 const show = ref('')
 const columns = createColumns({
  view: (row) => {
    dshow.value = true
    dtitle.value = '文章预览'
    opId.value = row.id
    show.value = 'view'
  },
  edit: (row) => {
    dshow.value = true
    dtitle.value = '编辑文章'
    curId.value = row.id
    show.value = 'edit'
  },
  remove: (row) => {
    showModal.value = true
    delId.value = row.id
  }
 })
 function createColumns({ edit, remove, view }) {
  return [
    {
      title: '序号',
      key: 'key',
      align: 'center',
      width: "80",
      render: (_, index) => {
        return `${index + 1}`
      }
    },
    {
      title: "标题",
      align: 'center',
      width: "300",
      key: "title"
    },
    {
      title: "简介",
      align: 'center',
      key: "pro",
      ellipsis: {
        tooltip: true
      }
    },
    {
      title: "操作",
      align: 'center',
      key: "actions",
      width: "200",
      render(row) {
        return h(
          'div',
          [
            h(NButton,
              {
                type: "primary",
                text: true,
                size: "small",
                onClick: () => view(row)
              },
              { default: () => "预览" }
            ),
            h(NButton,
              {
                type: "primary",
                text: true,
                size: "small",
                style: "margin-left: 10px",
                onClick: () => edit(row)
              },
              { default: () => "编辑" }
            ),
            h(NButton,
              {
                type: "primary",
                text: true,
                style: "margin-left: 10px",
                size: "small",
                onClick: () => remove(row)
              },
              { default: () => "删除" }
            ),
          ]
        );
      }
    }
  ];
 };
 function add() {
  dshow.value = true
  dtitle.value = '新建文章'
  show.value = 'add'
 }
 onMounted(() => {
  getList()
 })
 async function getList() {
  // 获取文章列表
  const res = await $http.art.myArti()
  artiList.value = res.data
 }
 function handdleCloseEditor() {
  dshow.value = false
  show.value = ''
  dtitle.value = ''
  curId.value = -1
  getList()
 }
 async function submitCallback() {
  const res = await $http.art.deleteArti(delId.value)
  if (res.code == 1) $msg.success(res.msg)
  else $msg.error(res.msg)
  showModal.value = false
  delId.value = -1
  getList()
 }
 function cancelCallback() {
  showModal.value = false
  delId.value = -1
 }
 </script>
 <style scoped></style>
--- a/src/views/console/article/view.vue
+++ b/src/views/console/article/view.vue
@ -0,0 +1,67 @@
 <template>
  <n-scrollbar style="max-height: 100vh">
    <div class="title">
      {{ info.title }}
    </div>
    <div class="author">
      {{ info.nickname }}
    </div>
    <div class="cont">
      <Editor v-model="info.cont" :defaultConfig="editorConfig" />
    </div>
    <div class="time">--发表于 {{ formatTime(info.updated_at, "YYYY年MM月DD日hh时") }}</div>
  </n-scrollbar>
 </template>
 <script setup>
 import { formatTime } from "@/util/index.js";
 import { Editor } from "@wangeditor/editor-for-vue";
 const editorConfig = { readOnly: true };
 const info = ref({updated_at:new Date()});
 const props = defineProps({
  id: {
    type: [String,Number],
    default: "",
  },
 });
 getInfo(props.id);
 async function getInfo(id) {
  const res = await $http.art.queryArtInfo(id);
  // console.log("**********", res);
  info.value = res.data[0];
 }
 </script>
 <style scoped lang="less">
 .title {
  font-style: italic;
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
 }
 .author {
  padding: 5px 20px;
  text-align: right;
  color: @purple;
 }
 .cont {
  width: 96%;
  margin: 0px auto;
  min-height: 500px;
 }
 .time {
  font-style: italic;
  text-align: right;
  padding: 5px 30px;
 }
 :deep(#w-e-element-3) {
  margin: unset !important;
 }
 </style>
--- a/src/views/console/gallery/index.vue
+++ b/src/views/console/gallery/index.vue
@ -0,0 +1,317 @@
 <template>
  <div class="div w-[100%]" ref="gw">
    <div class="list px-3">
      <n-upload style="height: 200px; width: 50%" multiple directory-dnd action="https://www.hxyouzi.com/api/file/upload"
        accept="image/*" :headers="{ Authorization: token }" :show-file-list="false" :on-finish="fileFinish">
        <n-upload-dragger>
          <div style="margin-bottom: 12px">
            <n-icon size="48" class="up">
              <MdCloudUpload />
            </n-icon>
          </div>
          <n-text style="font-size: 16px"> 点击或者拖动文件到该区域来上传 </n-text>
          <n-p depth="3" style="margin: 8px 0 0 0"> 请不要上传大于5m的图片</n-p>
        </n-upload-dragger>
      </n-upload>
      <falls :fileList="list" :count="acount" :bot="bottomLen" pathname="filepath" v-slot="{ file }">
        <div class="img mb-1" @contextmenu="handdlemenu($event, file)" @longpress="handdlemenu($event, file)">
          <n-image height="200px" :src="file.filepath" object-fit="fill" :img-props="{ loading: 'lazy' }" />
        </div>
      </falls>
      <div class="munur" v-if="menuShow" :style="{ position: 'fixed', top: y + 'px', left: x + 'px' }">
        <template v-for="i in menuList">
          <n-button v-if="i.show" type="primary" :tertiary="!i.active" @click="handdleclickmenu(i.id)"
            @mouseenter="handdleentermenu(i.id)" @mouseleave="handdleleavemenu(i.id)">{{ i.name
            }}</n-button>
        </template>
      </div>
      <n-modal v-model:show="showModal" preset="dialog" title="Dialog">
        <template #header>
          <div>提示</div>
        </template>
        <div>
          <div style="text-align: center">{{ currentImg.filename }}</div>
          <n-form-item label="">
            <n-input v-model:value="fileName" placeholder="请输入新的文件名" @keyup.enter="" />
          </n-form-item>
        </div>
        <template #action>
          <n-button @click="handdleClose">取消</n-button>
          <n-button type="primary" @click="updatename">确认</n-button>
        </template>
      </n-modal>
    </div>
  </div>
 </template>
 <script setup>
 import falls from '@/components/falls.vue';
 import { MdCloudUpload } from "@vicons/ionicons4";
 import { onMounted } from 'vue';
 import cookie from "vue-cookies";
 const acount = ref(2)
 const bottomLen = ref(20)
 // console.log(4444, size.conH);
 const list = ref([]);
 const token = cookie.get("token");
 function fileFinish(file) {
  const res = JSON.parse(file.event.currentTarget.response);
  // console.log(res);
  if (res.code == 1) {
    $msg.success(res.msg);
    getMyfile();
  } else {
    $msg.error(res.msg);
  }
 }
 async function getMyfile() {
  list.value = [];
  const res = await $http.file.MyFile();
  list.value = res.data;
 }
 onMounted(() => {
  getMyfile();
 });
 const menuShow = ref(false);
 const x = ref(0);
 const y = ref(0);
 let imgTimer
 const menuList = ref([
  {
    id: 1,
    name: "修改文件名",
    active: false,
    show: true,
  },
  {
    id: 2,
    name: "分享",
    active: false,
    show: true,
  },
  {
    id: 3,
    name: "取消分享",
    active: false,
    show: true,
  },
  {
    id: 4,
    name: "下载",
    active: false,
    show: true,
  },
  {
    id: 5,
    name: "删除",
    active: false,
    show: true,
  },
 ])
 const fileName = ref("");
 const showModal = ref(false);
 const currentImg = ref({});
 function handdlemenu(e, img) {
  menuShow.value = false
  const { clientX, clientY } = e;
  x.value = clientX;
  y.value = clientY;
  menuShow.value = true;
  menuList.value[1].show = !img.share;
  menuList.value[2].show = !!img.share;
  currentImg.value = img;
  console.log(img);
  imgTimer && clearTimeout(imgTimer)
  imgTimer = setTimeout(() => {
    menuShow.value = false
    resetMenuList()
  }, 2000);
 }
 function handdleclickmenu(id) {
  switch (id) {
    case 1:
      showModal.value = true;
      menuShow.value = false;
      break;
    case 2:
      share(currentImg.value.id)
      break;
    case 3:
      unshare(currentImg.value.id)
      break;
    case 4:
      downloadImg(currentImg.value)
      break;
    case 5:
      remove(currentImg.value.id)
      break;
  }
  resetMenuList()
 }
 function handdleentermenu(id) {
  menuList.value[id - 1].active = true;
  imgTimer && clearTimeout(imgTimer)
 }
 function handdleleavemenu(id) {
  menuList.value[id - 1].active = false;
  imgTimer = setTimeout(() => {
    menuShow.value = false
    resetMenuList()
  }, 2000);
 }
 function resetMenuList() {
  menuList.value = ([
    {
      id: 1,
      name: "修改文件名",
      active: false,
      show: true,
    },
    {
      id: 2,
      name: "分享",
      active: false,
      show: true,
    },
    {
      id: 3,
      name: "取消分享",
      active: false,
      show: true,
    },
    {
      id: 4,
      name: "下载",
      active: false,
      show: true,
    },
    {
      id: 5,
      name: "删除",
      active: false,
      show: true,
    },
  ])
 }
 async function share(id) {
  menuShow.value = false;
  const res = await $http.file.updateFile(id);
  res.code ? $msg.success(res.msg) : $msg.error(res.msg);
  getMyfile();
 }
 async function unshare(id) {
  menuShow.value = false;
  const res = await $http.file.unUpdateFile(id);
  res.code ? $msg.success(res.msg) : $msg.error(res.msg);
  getMyfile()
 }
 async function remove(id) {
  menuShow.value = false;
  const res = await $http.file.delFile(id);
  res.code ? $msg.success(res.msg) : $msg.error(res.msg);
  getMyfile()
 }
 async function downloadImg(img) {
  let a = document.createElement("a");
  a.download = img.filename;
  a.href = img.filepath;
  a.target = "_BLANK";
  a.click();
 }
 function handdleClose() {
  fileName.value = "";
  showModal.value = false;
 }
 async function updatename() {
  if (fileName.value != "") {
    const res = await $http.file.updateName({ id: currentImg.value.id, name: fileName.value });
    res.code ? $msg.success(res.msg) : $msg.error(res.msg);
    handdleClose();
    getMyfile()
  } else {
    $msg.error("文件名不能为空");
  }
 }
 const pw = 200
 const gw = ref(null)
 function arrCount() {
  const cw = gw.value.clientWidth
  if (cw < 750) {
    acount.value = 2
    // pivW.value = 180
    bottomLen.value = 10
    return
  }
  // pivW.value = 200
  bottomLen.value = 20
  acount.value = Math.floor(cw * 0.95 / (pw + 20))
 }
 onMounted(() => {
  arrCount()
 })
 </script>
 <style scoped lang="less">
 .div {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 :deep(.up.n-icon) {
  color: @purple;
 }
 :deep(.n-upload-dragger) {
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
 .list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
 }
 .munur {
  border-radius: 4px;
  overflow: hidden;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background-color: #fff;
 }
 :deep(.n-image) {
  display: flex;
  img {
    width: 200px;
    height: auto;
  }
 }
 .img {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: @ps;
  border: 1px solid #dddddd;
 }
 </style>
--- a/src/views/console/home/index.vue
+++ b/src/views/console/home/index.vue
@ -0,0 +1,7 @@
 <template>
  <div>控制台首页。</div>
 </template>
 <script setup></script>
 <style scoped></style>
--- a/src/views/console/index.vue
+++ b/src/views/console/index.vue
@ -0,0 +1,98 @@
 <template>
  <n-layout has-sider>
    <n-layout-sider ref="sider" bordered collapse-mode="width" inverted :collapsed-width="64" show-trigger :width="240" :collapsed="collapsed" :show-trigger="false" @collapse="collapsed = true" @expand="collapsed = false">
      <div ref="consoleSiderHeader" class="" @click="collapsed = false">
        <n-menu :collapsed="collapsed" inverted :collapsed-width="64" :icon-size="20" :collapsed-icon-size="26" :options="menuOptions" />
      </div>
      <div class="menu">
        <console-menu :collapsed="collapsed" />
      </div>
    </n-layout-sider>
    <n-layout>
      <n-layout-header :style="{ height: navH + 'px' }">
        <div class="header bg-[#f2e8fc] flex items-center justify-between">
          <div class="index ml-4">{{ route.meta.name }}</div>
          <div class="info flex items-center">
            <div class="wea">
              <wea></wea>
            </div>
            <div class="my">
              <div class="uinfo mx-8 text-white flex items-center">
                <n-avatar round size="small" :src="userinfo.avaUrl" />
                <div class="ml-2"></div>
                <n-button text class="userinfo">
                  {{ userinfo.nickname }}
                </n-button>
              </div>
            </div>
            <n-button color="#8a2be2" size="small" class="mr-4" @click="goHome"> 回首页 </n-button>
          </div>
        </div>
      </n-layout-header>
      <n-layout-content :content-style="cst" :native-scrollbar="false">
        <router-view></router-view>
      </n-layout-content>
    </n-layout>
  </n-layout>
 </template>
 <script setup>
 import consoleMenu from "@/components/consoleMenu.vue";
 import wea from "@/components/wea.vue";
 import { usesizeStore } from "@/stores/size.js";
 import { MdMenu } from "@vicons/ionicons4";
 import cookie from "vue-cookies";
 import { useRoute, useRouter } from "vue-router";
 const size = usesizeStore();
 const userinfo = cookie.get("userinfo");
 const collapsed = ref(false);
 let consoleSiderHeader = ref(null);
 let navH = ref(0);
 const cst = ref({});
 const menuOptions = [
  {
    label: "控制台",
    key: "0",
    disabled: true,
    icon: () => h(NIcon, { class: "console-sider-header" }, { default: () => h(MdMenu) }),
  },
 ];
 const route = useRoute();
 const router = useRouter();
 onMounted(() => {
  navH.value = consoleSiderHeader.value.clientHeight;
  size.setConH(document.documentElement.clientHeight - navH.value);
  cst.value = {
    height: document.documentElement.clientHeight - navH.value + "px",
  };
 });
 function goHome() {
  router.replace("/");
 }
 </script>
 <style scoped>
 .header {
  height: 100%;
 }
 :deep(.n-layout-sider) {
  height: 100vh;
 }
 .col {
  margin: 0 auto;
 }
 .nocol {
  margin-left: 10px;
 }
 :deep(.n-menu-item-content--disabled) {
  opacity: unset !important;
 }
 :deep(.console-sider-header) {
  color: #fff;
 }
 </style>
--- a/src/views/console/profile/index.vue
+++ b/src/views/console/profile/index.vue
@ -0,0 +1,98 @@
 <template>
  <div class="list">
    <div class="row flex items-center">
      <div class="label">头像</div>
      <n-avatar round :src="userinfo.avaUrl" />
      <div class="edit" @click="showModal = true">更换</div>
    </div>
    <div class="row flex items-center mt-4">
      <div class="label">手机号</div>
      <div>{{ userinfo.tel }} <span v-if="!userinfo.tel" class="text-gray-500 text-[12px] underline italic">尚未绑定手机号</span>
      </div>
      <div class="edit" @click="showTelModal = true">更换</div>
    </div>
  </div>
  <n-modal :closable="false" :show="showModal" title="更改头像" @mask-click="showModal = false" @esc="showModal = false"
    @negative-click="showModal = false" preset="dialog" negative-text="取消">
    <div style="margin: 10px 0; width: 100%; display: flex; justify-content: center">
      <n-avatar round :size="80" :src="userinfo.avaUrl" fallback-src="https://www.hxyouzi.com/gin/assets/ava/默认.png" />
    </div>
    <n-upload action="https://www.hxyouzi.com/api/info/update/avater" :headers="{ Authorization: token }"
      :show-file-list="false" :on-finish="fileFinish" accept=".jpg,.jpeg,.png,.gif,.jfif"
      style="width: 100%; display: flex; justify-content: center">
      <n-button type="primary">上传头像</n-button>
    </n-upload>
  </n-modal>
  <n-modal :closable="false" :show="showTelModal" title="更改手机号" @mask-click="showTelModal = false"
    @esc="showTelModal = false" @negative-click="showTelModal = false" preset="dialog" negative-text="取消"
    positive-text="确认" @positive-click="submitCallback">
    <n-input v-model:value="tel" type="text" :placeholder="userinfo.tel || '请输入手机号'" clearable></n-input>
  </n-modal>
 </template>
 <script setup>
 import cookie from "vue-cookies";
 let userinfo = ref(cookie.get("userinfo"));
 let token = ref(cookie.get("token"));
 const showModal = ref(false);
 const showTelModal = ref(false);
 const tel = ref('')
 function fileFinish(file) {
  const res = JSON.parse(file.event.currentTarget.response);
  // console.log(res);
  if (res.code == 1) {
    $msg.success(res.msg);
    autologin();
  } else {
    $msg.error(res.msg);
  }
 }
 async function autologin() {
  const res = await $http.user.alogin();
  if (res.code == 1) {
    cookie.set("token", res.token, "1d");
    cookie.set("userinfo", res.data, "1d");
    userinfo.value = cookie.get("userinfo");
    location.reload();
  }
 } 
 async function submitCallback() {
  if (!tel.value) return
  if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(tel.value)) {
    $msg.error('请输入正确的手机号!')
    return
  }
  const res = await $http.user.updatetel({ tel: tel.value })
  if (res.code == 1) {
    $msg.success(res.msg)
    showTelModal.value = false
  }
  else $msg.error(res.msg)
 }
 </script>
 <style scoped lang="less">
 .label {
  padding: 0 10px;
  margin-right: 20px;
 }
 .edit {
  // padding: 0 10px;
  margin-left: 20px;
  font-size: 12px;
  text-decoration: underline;
  color: @blue;
  cursor: url("@/cursor/link_26x26.png"), pointer !important;
 }
 .edit:hover {
  color: @purple;
 }</style>
--- a/src/views/gallery/index.vue
+++ b/src/views/gallery/index.vue
@ -0,0 +1,101 @@
 <template>
  <n-scrollbar class="bg-[#f8f9fa]" :on-scroll="onScroll" :style="{ maxHeight: contH + 'px' }">
    <div class="w-[40vw] mx-auto my-6 md:w-[80vw]">
      <n-input-group>
        <n-input v-model:value="kw" placeholder="图片名 | 分享人" @keyup.enter.native="search" :style="{ width: '80%' }" />
        <n-button :style="{ width: '20%' }" type="info" @click="search"> 搜索 </n-button>
      </n-input-group>
    </div>
    <div class="list">
      <xPic :fileList="sharelist"></xPic>
    </div>
    <n-back-top :right="20" />
  </n-scrollbar>
 </template>
 <script setup>
 import { usesizeStore } from '@/stores/size.js';
 import { onMounted } from "vue";
 import xPic from './xPic.vue';
 const kw = ref("");
 const sharelist = ref([]);
 const ps = ref(20), pn = ref(1), total = ref(0)
 const size = usesizeStore()
 const contH = ref(0)
 let reqLock = false // 请求锁
 onMounted(() => {
  getSharefile();
  contH.value = document.documentElement.clientHeight - size.menuH - 10
 })
 function search() {
  sharelist.value = [];
  pn.value = 1
  getSharefile()
 }
 async function getSharefile() {
  if (reqLock) return
  reqLock = true
  const res = await $http.file.ShareFile({
    keyword: kw.value,
    page_size: ps.value,
    page_num: pn.value,
  });
  total.value = res.total
  res.data.forEach(i => i.ishow = false)
  sharelist.value = res.data;
  setTimeout(() => {
    reqLock = false
  }, 1000)
 }
 // 触底加载新内容
 let lastTop = 0 // 记录上一次滚动距离，方便判断滚动的方向
 function onScroll(e) {
  if (reqLock) return
  if (ps.value * pn.value >= total.value) return
  let st = e.target.scrollTop
  let ch = e.target.clientHeight
  let sh = e.target.scrollHeight
  if (st > lastTop) {
    if (st + ch + 200 >= sh) {
      // reqLock = false
      pn.value++
      getSharefile()
    }
  }
  lastTop = st
 }
 </script>
 <style scoped>
 .search {
  padding: 0 30%;
 }
 .empty {
  margin-top: 15%;
 }
 .space {
  padding: 20px 10px;
 }
 .space::after {
  height: 0;
  flex: auto;
  content: "";
 }
 </style>
--- a/src/views/gallery/xPic.vue
+++ b/src/views/gallery/xPic.vue
@ -0,0 +1,184 @@
 <template>
  <div class="box flex justify-center" ref="curcomp">
    <falls :fileList="fileList" :count="acount" :bot="bottomLen" pathname="filepath" v-slot="{ file }">
      <div class="img" @mouseenter="movein(file)" @mouseleave="moveout(file)">
        <n-image width="200px" :imgW="pivW" :src="file.filepath" object-fit="cover" :img-props="{ loading: 'lazy' }" />
        <div class="title w-[120px]" v-if="!ismobile && file.ishow">
          <n-ellipsis style="max-width: 120px" :line-clamp="1">{{ file.filename }}</n-ellipsis>
        </div>
        <div class="tooltip" v-if="ismobile || file.ishow">
          <div class="block">
            <div class="uploadBy flex items-center">
              <n-ellipsis :line-clamp="1">由{{ file.nickname }}分享</n-ellipsis>
            </div>
          </div>
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-button text size="small" @click="downloadImg(file)">
                <n-icon size="20">
                  <MdDownload />
                </n-icon>
              </n-button>
            </template>
            下载
          </n-tooltip>
        </div>
      </div>
    </falls>
  </div>
 </template>
 <script setup>
 import falls from '@/components/falls.vue';
 import { MdDownload } from "@vicons/ionicons4";
 import { ref } from 'vue';
 const pivW = ref(200);
 const prop = defineProps({
  fileList: {
    type: Array,
    default: () => [],
  },
 });
 const { fileList } = toRefs(prop);
 const pw = 200
 const acount = ref(2)
 const bottomLen = ref(20)
 const ismobile = ref(false)
 arrCount()
 window.addEventListener("resize", arrCount)
 function movein(file) {
  if (ismobile.value) return
  file.ishow = true
 }
 function moveout(file) {
  if (ismobile.value) return
  file.ishow = false
 }
 async function downloadImg(img) {
  let a = document.createElement("a");
  a.download = img.filename;
  a.href = img.filepath;
  a.target = "_BLANK";
  a.click();
 }
 function arrCount() {
  // console.log('w=>', document.documentElement.clientWidth);
  const cw = document.documentElement.clientWidth
  if (cw < 1000) {
    acount.value = 2
    pivW.value = 180
    bottomLen.value = 10
    ismobile.value = true
    return
  }
  pivW.value = 200
  bottomLen.value = 20
  ismobile.value = false
  acount.value = Math.floor(cw * 0.95 / (pw + 20))
 }
 </script>
 <style lang="less" scoped>
 .img {
  // width: 100%;
  // height: 200px;
  position: relative;
  margin-bottom: 20px;
  box-shadow: @ps;
  .title {
    box-sizing: border-box;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00000080;
    position: absolute;
    color: #ddd;
    top: 0px;
    display: flex;
    font-size: 12px;
    justify-content: center;
    cursor: url("@/cursor/link_26x26.png"), pointer !important;
  }
  .tooltip {
    box-sizing: border-box;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00000080;
    position: absolute;
    border-radius: 0 0 10px 10px;
    bottom: 0px;
    cursor: url("@/cursor/link_26x26.png"), pointer !important;
    .n-icon {
      color: #fff !important;
    }
    .n-icon:hover {
      color: @purple !important;
    }
  }
  .uploadBy {
    font-size: 12px;
    color: @orange;
  }
 }
 :deep(.n-space)>div,
 .block {
  display: flex;
  justify-content: center;
 }
 :deep(.n-image) {
  border-radius: 10px;
  box-shadow: @ps;
  display: flex;
  img {
    width: 200px;
    height: auto;
  }
 }
 .img {
  // margin-right: 20px;
  border-radius: 10px;
  overflow: hidden;
  background-color: transparent;
 }
@media screen and (max-width:1000px) {
  :deep(.n-image) {
    img {
      width: 180px;
      height: auto;
    }
  }
  .img {
    // margin-right: 10px;
    margin-bottom: 10px;
  }
 }
 </style>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -0,0 +1,54 @@
 <template>
  <div>
    <div class="box xxx" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
      <n-layout>
        <n-layout has-sider>
          <n-layout-content class="sm:w-[90vh] w-[70%]" :content-style="{ height: `calc(100vh - ${size.menuH}px)`,backgroundColor:'#f1f2f3' }">
            <n-scrollbar class="pt-6" trigger="hover" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
              <search></search>
              <NavMenu />
            </n-scrollbar>
          </n-layout-content>
          <n-layout-sider class="sm:hidden" :content-style="{width: '30vw',height: `calc(100vh - ${size.menuH}px)`,overflow:'hidden',backgroundColor:'#f1f2f3' }">
            <Suspense>
              <side />
            </Suspense>
          </n-layout-sider>
        </n-layout>
      </n-layout>
    </div>
    <aplayerView></aplayerView>
    <foot />
  </div>
 </template>
 <script setup>
 import aplayerView from "@/components/aplayerView.vue";
 import foot from "@/components/foot.vue";
 import { usesizeStore } from "@/stores/size.js";
 import NavMenu from "./navMenu.vue";
 import search from './search.vue';
 import side from './side.vue';
 const size = usesizeStore();
 const artList = ref([])
 //mark 周期、内置函数等
 onMounted(async () => {
  const res = await $http.art.queryArt()
  artList.value = res.data
 })
 </script>
 <style scoped>
 :deep(.n-layout-sider) {
  width: unset !important;
  max-width: unset !important;
 }
 :deep(.n-scrollbar-rail) {
  display: none !important;
 }
 </style>
--- a/src/views/home/navMenu.vue
+++ b/src/views/home/navMenu.vue
@ -0,0 +1,159 @@
 <template>
  <div class="box flex flex-wrap pl-[2%] mt-8">
    <div class="nav-card w-[300px] mx-[2%] mb-6 p-2 bg-[#fafbfc]" v-for="(item, index) in navList" :key="index">
      <div class="t" @click="expand(index)">
        <n-divider title-placement="center">
          <div class="flex items-center  font-bold">
            {{ item.menuClass }}
            <n-icon size="24" class="tiao mx-2">
              <icon-more />
            </n-icon>
          </div>
        </n-divider>
      </div>
      <div class="flex flex-wrap pt-3" v-show="item.exp">
        <div class="w-[45%] ml-[3%] mb-2" v-for="(it, idx) in item.children" :key="index">
          <!-- <n-popover trigger="hover"> -->
          <!-- <template #trigger> -->
          <n-button class="w-[100%] text-[12px] text-ellipsis hover:bg-gradient-to-r hover:from-pp-100 hover:to-pp-400 font-bold" ghost color="#B172EC" @click="link(it.menuLink)">
          <!-- <n-button class="w-[100%] text-[12px] text-ellipsis" ghost color="#ff69b4" @click="link(it.menuLink)"> -->
            {{ it.menuName }}
          </n-button>
          <!-- </template> -->
          <!-- <span class="text-[12px]">{{ it.menuName }}</span> -->
          <!-- </n-popover> -->
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup>
 import { onMounted } from 'vue';
 //mark import
 //mark data
 const navList = ref([])
 const active = ref(-1)
 //mark method
 function formatNav(list) {
  let menu = []
  let result = []
  list.forEach(i => {
    if (!menu.includes(i.menuClass)) {
      menu.push(i.menuClass)
    }
  });
  menu.forEach(i => {
    result.push({
      menuClass: i,
      children: list.filter(it => it.menuClass == i),
      exp: false
    })
  })
  console.log(result);
  return result
 }
 function expand(index) {
  console.log(index, active.value);
  if (active.value == index) {
    navList.value[index].exp = !navList.value[index].exp
  } else {
    navList.value.forEach(i => {
      i.exp = false
    })
    navList.value[index].exp = true
  }
  active.value = index
 }
 function link(url) {
  window.open(url, "_blank")
 }
 //mark 周期、内置函数等
 onMounted(async () => {
  const res = await $http.nav.listNav()
  navList.value = formatNav(res.data)
 })
 </script>
 <style scoped lang="less">
 .nav-card {
  box-shadow: @ps;
  border-radius: 4px;
  flex-grow: 1;
 }
 .box {
  align-items: start;
 }
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-1px);
  }
 }
 .tiao {
  animation: bounce 1s infinite;
  /* 播放名为bounce的动画，循环无限次，每次动画时长1秒 */
 }
 :deep(.n-divider) {
  margin: 0px;
 }
 :deep(.n-button__content) {
  display: block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
 }
 :deep(.n-button):hover {
  // background-color: @purple !important;
  border: none !important;
  color: white !important;
  animation: swing .8s ease-in-out 3;
 }
@keyframes swing {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-3px);
  }
  60% {
    transform: translateX(3px);
  }
 }
 </style>
--- a/Show More
+++ b/Show More
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M26 30H11a2.002 2.002 0 0 1-2-2v-6h2v6h15V6h-9V4h9a2.002 2.002 0 0 1 2 2v22a2.002 2.002 0 0 1-2 2z" fill="currentColor"></path><path d="M17 10h7v2h-7z" fill="currentColor"></path><path d="M16 15h8v2h-8z" fill="currentColor"></path><path d="M15 20h9v2h-9z" fill="currentColor"></path><path d="M9 19a5.005 5.005 0 0 1-5-5V3h2v11a3 3 0 0 0 6 0V5a1 1 0 0 0-2 0v10H8V5a3 3 0 0 1 6 0v9a5.005 5.005 0 0 1-5 5z" fill="currentColor"></path></svg>
		`@ -0,0 +1 @@`
							<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694156756216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4088" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M379.616 515.648L705.44 841.472c20 20 20 52.416 0 72.416s-52.416 20-72.416 0L270.976 551.84c-20-20-20-52.416 0-72.416l362.048-362.048c20-20 52.416-20 72.416 0s20 52.416 0 72.416L379.616 515.616z" p-id="4089"></path></svg>
		`@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="4"></circle><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path><path d="M21 21v-2a4 4 0 0 0-3-3.85"></path></g></svg>`