Nuxt.js详解(一)

约定不等于承诺〃 2024-04-06 13:02 17阅读 0赞

**目录**

1. Nuxt.js 概述

1.1 我们一起做过的SPA

1.2 什么是SEO

1.3 什么是SSR技术

1.4 SPA和SSR对比

1.5 什么是Nuxt.js

2 入门案例

2.1 create-nuxt-app 介绍

2.2 安装

2.3 启动

2.4 访问

3. 目录结构

3.1 目录

3.2 别名

4 路由

4.1 路由概述

4.2 基础路由

4.3 动态路由

4.4 动态命名路由

4.5 默认路由

4.6 嵌套路由(知道)

4.7 过渡动效（了解）

4.7.1 全局过渡动效设置

4.7.1 自定义动画

4.8 案例：学生管理

5. 视图

5.1 默认模板（了解）

5.2 默认布局【掌握】

5.2.1 布局概述

5.2.2 布局分析

5.2.3 公共导航

5.3 自定义布局

5.4 错误页面

5.5 Nuxt组件特殊配置

5.5.1 模板代码

5.5.2 head

## 1. Nuxt.js 概述 ##

### 1.1 我们一起做过的SPA ###

*  SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。
 *  我们之前学习的Vue就是SPA中的佼佼者。
 *  SPA 应用广泛用于对SEO要求不高的场景中
    
    ![749db200cae64674ba9be12c9458dddf.png][]

### 1.2 什么是SEO ###

*  SEO：搜索引擎优化（Search Engine Optimization）, 通过各种技术（手段）来确保，我们的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量。
 *  非常明显，SPA程序不利于SEO
    
    ![d6ac059ae3b94341a1bd69e8e49fe5b2.png][]
 *  SEO解决方案：提前将`页面和数据`进行整合
    
     *  前端：采用SSR
     *  后端：页面静态化 （freemarker 、thymeleaf、velocity）

### 1.3 什么是SSR技术 ###

*  服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。
    
     *  在SSR中，前端分成2部分：前端客户端、前端服务端
     *  前端服务端，用于发送ajax，获得数据
     *  前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）
    
    ![9630345506a7474f96ae9adeff2b53bf.png][]
 *  如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。

### 1.4 SPA和SSR对比 ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>SPA单页应用程序</th> 
   <th>SSR服务器端渲染</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>优势</td> 
   <td>1.页面内容在客户端渲染 2. 只关注View层，与后台耦合度低，前后端分离 3.减轻后台渲染画面的压力</td> 
   <td>1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面 2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面</td> 
  </tr> 
  <tr> 
   <td>劣势</td> 
   <td>1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好</td> 
   <td>1.更多的服务器端负载 2.涉及构建设置和部署的更多要求，需要用Node.js渲染 3.开发条件有限制，一些生命周期将失效 4.一些常用的浏览器API无法使用</td> 
  </tr> 
 </tbody> 
</table>

### 1.5 什么是Nuxt.js ###

*  Nuxt.js 是一个基于 Vue.js 的通用应用框架。
    
     *  Nuxt支持vue的所有功能，此类内容为`前端客户端`内容。
     *  Nuxt特有的内容，都是`前端服务端`内容。
 *  通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 **UI 渲染**。
 *  Nuxt.js 预设了利用 Vue.js 开发**服务端渲染**的应用所需要的各种配置。

## 2 入门案例 ##

### 2.1 create-nuxt-app 介绍 ###

*  Nuxt.js 提供了脚手架工具 `create-nuxt-app`
 *  `create-nuxt-app` 需要使用 `npx`
 *  npx 命令为 NPM版本5.2.0默认安装组件
    
    ![bc4ae340744146ca83babd8945cfbdf1.png][]

### 2.2 安装 ###

npx create-nuxt-app <project-name>

*  例如

npx create-nuxt-app demo_nuxt02

![f2a56e6e1fc24359800d9554ab733bc3.png][]

![abf310e6f72b44e4b84d4491fdb1c586.png][]

### 2.3 启动 ###

npm run dev

*  nuxtjs改善
    
    ![250985ec187d4c2fb4e6aa464a35bef3.png][]

### 2.4 访问 ###

http://localhost:3000

![1e52c609cb14470eaefa58803793b6c7.png][]

## 3. 目录结构 ##

### 3.1 目录 ###

<table> 
 <thead> 
  <tr> 
   <th>目录名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assets</td> 
   <td>资源目录，用于存放==需要编译==的静态资源。例如：LESS、SASS等 默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件</td> 
  </tr> 
  <tr> 
   <td>components</td> 
   <td>vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR</td> 
  </tr> 
  <tr> 
   <td>layouts</td> 
   <td>布局组件目录</td> 
  </tr> 
  <tr> 
   <td>pages</td> 
   <td>页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。</td> 
  </tr> 
  <tr> 
   <td>plugins</td> 
   <td>插件目录</td> 
  </tr> 
  <tr> 
   <td>static</td> 
   <td>静态文件目录，==不需要编译==的文件</td> 
  </tr> 
  <tr> 
   <td>store</td> 
   <td>vuex目录</td> 
  </tr> 
  <tr> 
   <td>nuxt.config.js</td> 
   <td>nuxt个性化配置文件，内容将覆盖默认</td> 
  </tr> 
  <tr> 
   <td>package.json</td> 
   <td>项目配置文件</td> 
  </tr> 
 </tbody> 
</table>

![6f5865a5710e4aacaff2c06b75ae6aa2.png][]

### 3.2 别名 ###

*  assets 资源的引用：~ 或 @
    
        // HTML 标签
        <img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
        <img src="~/assets/13.jpg" style="height:100px;width:100px;" alt="">
        <img src="@/assets/13.jpg" style="height:100px;width:100px;" alt="">
        
        // CSS
        background-image: url(~assets/13.jpg);
        background-image: url(~/assets/13.jpg);
        background-image: url(@/assets/13.jpg);
 *  static 目录资源的引用：/ 直接引用
    
        //html标签
        <img src="/12.jpg" style="height:100px;width:100px;" alt="">
        
        //css
        background-image: url(/12.jpg);
 *  实例
    
        <template>
          <div>
            
            <img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
        
            
            <img src="/12.jpg" style="height:100px;width:100px;" alt="">
        
            
            <div class="img1"></div>
            <div class="img2"></div>
          </div>
        </template>
        
        <script>
        export default {
        
        }
        </script>
        
        <style>
          .img1 {
            height: 100px;
            width: 100px;
            background-image: url(~assets/13.jpg);
            background-size: 100px 100px;
            display: inline-block;
          }
          .img2 {
            height: 100px;
            width: 100px;
            background-image: url(/12.jpg);
            background-size: 100px 100px;
            display: inline-block;
          }
        </style>

## 4 路由 ##

### 4.1 路由概述 ###

*  Nuxt.js 依据 **pages** 目录结构自动生成 vue-router 模块的路由配置。
 *  要在页面之间切换路由，我们建议使用`<nuxt-link>` 标签。

<table> 
 <thead> 
  <tr> 
   <th>标签名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;nuxt-link&gt;</code></td> 
   <td>nuxt.js中切换路由</td> 
  </tr> 
  <tr> 
   <td><code>&lt;Nuxt /&gt;</code></td> 
   <td>nuxt.js的路由视图</td> 
  </tr> 
  <tr> 
   <td><code>&lt;router-link&gt;</code></td> 
   <td>vue默认切换路由</td> 
  </tr> 
  <tr> 
   <td><code>&lt;router-view/&gt;</code></td> 
   <td>vue默认路由视图</td> 
  </tr> 
 </tbody> 
</table>

### 4.2 基础路由 ###

*  自动生成基础路由规则

<table> 
 <thead> 
  <tr> 
   <th>路径</th> 
   <th>组件位置及其名称</th> 
   <th>规则</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/</td> 
   <td>pages/index.vue</td> 
   <td>默认文件 index.vue</td> 
  </tr> 
  <tr> 
   <td>/user</td> 
   <td>pages/user/index.vue</td> 
   <td>默认文件 index.vue</td> 
  </tr> 
  <tr> 
   <td>/user/one</td> 
   <td>pages/user/one.vue</td> 
   <td>指定文件</td> 
  </tr> 
 </tbody> 
</table>

*  实例
    
        情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）
          - 资源位置： ~/pages/user/one.vue
          - 访问路径：http://localhost:3000/user/one
        
        
        情况2：每一个目录下，都有一个默认文件 index.vue
          - 资源位置： ~/pages/user/index.vue
          - 访问路径：http://localhost:3000/user
 *  思考：`/user` 可以匹配几种文件？
    
     *  `pages/user.vue` 文件 【优先级高】
     *  `pages/user/index.vue` 文件

### 4.3 动态路由 ###

*  在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

<table> 
 <thead> 
  <tr> 
   <th>路由中路径匹配</th> 
   <th>组件位置及其名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/</td> 
   <td>pages/index.vue</td> 
  </tr> 
  <tr> 
   <td>/user/:id</td> 
   <td>pages/user/_id.vue</td> 
  </tr> 
  <tr> 
   <td>/:slug</td> 
   <td>pages/_slug/index.vue</td> 
  </tr> 
  <tr> 
   <td>/:slug/comments</td> 
   <td>pages/_slug/comments.vue</td> 
  </tr> 
 </tbody> 
</table>

*  实例1：获得id值，创建资源 `user/_id.vue`

<template>
      <div>
        查询详情 {
      {this.$route.params.id}}
      </div>
    </template>
    
    <script>
    export default {
      transition: 'test',
      mounted() {
        console.info(this.$route)
      },
    }
    </script>
    
    <style>
    
    </style>

### 4.4 动态命名路由 ###

*  路径 `/news/123` 匹配`_id.vue`还是`_name.vue` ？
    
    ![653f09dbabfe4dc0aea5fb2bcf4a8239.png][]
 *  我们可以使用`<nuxt-link>`解决以上问题
    
     *  通过name 确定组件名称：“xxx-yyy”
     *  通过params 给对应的参数传递值

<nuxt-link :to="{name:'news-id',params:{id:1002}}">第2新闻</nuxt-link>
    <nuxt-link :to="{name:'news-name',params:{name:1003}}">第3新闻</nuxt-link>

### 4.5 默认路由 ###

<table> 
 <thead> 
  <tr> 
   <th>路径</th> 
   <th>组件位置及其名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>不匹配的路径</td> 
   <td>pages/_.vue</td> 
  </tr> 
 </tbody> 
</table>

*  404页面，可以采用 \_.vue进行处理

### 4.6 嵌套路由(知道) ###

*  创建嵌套子路由，你需要添加一个 父组件Vue 文件，同时添加一个**与该文件同名**的目录用来存放子视图组件。
    
     *  要求：父组件 使用`<nuxt-child/>` 显示子视图内容
    
        pages/
        --| book/                       //同名文件夹
        -----| _id.vue
        -----| index.vue
        --| book.vue                    //父组件
 *  步骤1：编写父组件 `pages/child/book.vue`
    
        <template>
          <div>
              <nuxt-link to="/child/book/list">书籍列表</nuxt-link> |
              <nuxt-link to="/child/book/123">书籍详情</nuxt-link> |
              <hr>
              <nuxt-child />
          </div>
        </template>
        
        <script>
        export default {
        
        }
        </script>
        
        <style>
        
        </style>
        
 *  步骤2：编写子组件 `pages/child/book/list.vue`
    
        <template>
          <div>书籍列表</div>
        </template>
        
        <script>
        export default {
        
        }
        </script>
        
        <style>
        
        </style>
        
 *  步骤3：编写子组件 `pages/child/book/_id.vue`
    
        <template>
          <div>书籍详情{
            {$route.params.id}} </div>
        </template>
        
        <script>
        export default {
        
        }
        </script>
        
        <style>
        
        </style>

### 4.7 过渡动效（了解） ###

#### 4.7.1 全局过渡动效设置 ####

*  Nuxt.js 默认使用的过渡效果名称为 page
    
     *  `.page-enter-active`样式表示进入的过渡效果。
     *  `.page-leave-active`样式表示离开的过渡效果。
 *  步骤1：创建 `assets/main.css`，编写如下内容：
    
        .page-enter-active, .page-leave-active {
          transition: opacity .5s;
        }
        .page-enter, .page-leave-active {
          opacity: 0;
        }
 *  步骤2：nuxt.config.js 引入main.css文件
    
        module.exports = {
          css: [
            'assets/main.css'
          ]
        }

#### 4.7.1 自定义动画 ####

*  如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 `transition` 字段即可：
 *  步骤1：在全局样式 `assets/main.css` 中添加名称为`test`的过渡效果
    
        .test-enter-active, .test-leave-active {
          transition: all 2s;
          font-size:12px;
        }
         .test-enter, .test-leave-active {
          opacity: 0;
          font-size:40px;
        }
        
 *  步骤2：需要使用特效的vue页面编写如下：
    
        export default {
          transition: 'test'
        }

### 4.8 案例：学生管理 ###

*  需求1：首页
    
    ![1af793c533fc483483e356f4771a2f16.png][]
 *  需求2：点击，学生管理
    
    ![7ee40c9faf874eb9a387be9e2a27ba10.png][]
 *  需求3：点击“添加”按钮
    
    ![d82a3275d4654d7582c154dd060dea18.png][]
 *  需求4：点击修改按钮
    
    ![24d70da6b07445e39097695285dfa7dd.png][]
 *  需求5：详情
    
    ![3e9d07cbcced4c7893808df740344855.png][]

## 5. 视图 ##

### 5.1 默认模板（了解） ###

*  定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。
 *  默认模板：
    
        <!DOCTYPE html>
        <html {
            { HTML_ATTRS }}>
          <head {
            { HEAD_ATTRS }}>
            {
            { HEAD }}
          </head>
          <body {
            { BODY_ATTRS }}>
            {
            { APP }}
          </body>
        </html>
 *  修改模板，对低版本IE浏览器进行支持（兼容IE浏览器）
    
        <!DOCTYPE html>
        
        <html {
            { HTML_ATTRS }}>
          <head {
            { HEAD_ATTRS }}>
            {
            { HEAD }}
          </head>
          <body {
            { BODY_ATTRS }}>
            {
            { APP }}
          </body>
        </html>

### 5.2 默认布局【掌握】 ###

#### 5.2.1 布局概述 ####

*  布局：Nuxt.js根据布局，将不同的组件进行组合。
 *  模板：html页面，是布局后所有组件挂载的基础。

![eed3478a40d14ff78b732fcdaa53e8bf.png][]

#### 5.2.2 布局分析 ####

*  layouts/default.vue 默认布局组件
    
     *  访问路径根据路由，确定执行组件
     *  组件具体显示的位置，有布局来确定

![5dc52674fee5495da6135993e1380842.png][]

#### 5.2.3 公共导航 ####

*  修改 `layouts/default.vue`

<template>
      <div>
        <nuxt-link to="/">首页</nuxt-link> |
        <nuxt-link to="/user/login">登录</nuxt-link> |
        <nuxt-link to="/user/123">详情</nuxt-link> |
        <nuxt-link to="/about">默认页</nuxt-link> |
        <nuxt-link to="/nuxt/async">async</nuxt-link> |
        <hr/>
        <Nuxt />
      </div>
    </template>

### 5.3 自定义布局 ###

*  在layouts目录下创建组件：layouts/blog.vue
    
        <template>
            <div>
                开头<br/>
                <nuxt/>
                结束<br/>
            </div>
          
        </template>
        
        <script>
        export default {
        
        }
        </script>
        
        <style>
        
        </style>
        
 *  在需要的视图中使用 blog布局
    
        <script>
        export default {
          layout: 'blog'
          //...
        }
        </script>

![9690e0ff7a404f9db86a6a863ba280b5.png][]

### 5.4 错误页面 ###

*  编写`layouts/error.vue`页面，实现个性化错误页面

<template>
      <div>
        <div v-if="error.statusCode == 404">
          404 页面不存在 {
      {error.message}}
        </div>
        <div v-else>
          应用程序错误
        </div>
        <nuxt-link to="/">首 页</nuxt-link>
      </div>
    </template>
    
    <script>
    export default {
      props: ['error']
    }
    </script>
    
    <style>
    
    </style>

*  解决问题： 404 、500、连接超时（服务器关闭）
 *  总结：所学习的技术中，有2种方式处理错误页面
    
     *  方式1：默认路径，`_.vue` （先执行）
     *  方式2：错误页面，`~/layouts/error.vue`

### 5.5 Nuxt组件特殊配置 ###

*  页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项

<table> 
 <thead> 
  <tr> 
   <th><strong>特殊配置项</strong></th> 
   <th><strong>描述</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>asyncData</strong></td> 
   <td>SSR进行异步数据处理，也就是服务器端ajax操作区域。</td> 
  </tr> 
  <tr> 
   <td><strong>fetch</strong></td> 
   <td>在渲染页面之前获取数据填充应用的状态树（store）</td> 
  </tr> 
  <tr> 
   <td><strong>head</strong></td> 
   <td>配置当前页面的head标签，整合第三方css、js等。</td> 
  </tr> 
  <tr> 
   <td><strong>layout</strong></td> 
   <td>指定当前页面使用的布局</td> 
  </tr> 
  <tr> 
   <td><strong>transition</strong></td> 
   <td>指定页面切换的过渡动效</td> 
  </tr> 
  <tr> 
   <td><strong>scrollToTop</strong></td> 
   <td>布尔值，默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。</td> 
  </tr> 
 </tbody> 
</table>

#### 5.5.1 模板代码 ####

<template>
      <h1 class="red">Hello {
      { name }}!</h1>
    </template>
    
    <script>
    export default {
        //异步处理数据, 每次加载之前被调用
      asyncData (context) {
        // called every time before loading the component
        return { name: 'World' }
      },    
        //用于在渲染页面之前获取数据填充应用的状态树（store）
      fetch () {
        // The fetch method is used to fill the store before rendering the page
      },
        //配置当前页面的 Meta 标签
      head: {
        // Set Meta Tags for this Page
      },
      // and more functionality to discover
      ...
    }
    </script>
    
    <style>
    .red {
      color: red;
    }
    </style>

#### 5.5.2 head ####

*  html模板代码
    
        <html>
        <head>
            <meta charset="UTF-8" />
            <title>我是标题</title>
            <link rel="stylesheet" type="text/css" href="css外部文件"/>
            <script src="js外部文件" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
        </body>
        </html>
 *  通过nuxt提供head属性，可以给单个也是设置：标题、外部css、外部js 等内容。

![6b9cf8c9ea5143eaa8519810b0615823.png][]

<template>
      <div>
        详情页 {
      {$route.params.id}} <br/>
    
        <div class="bg2"></div>
        <div class="bg3"></div>
    
      </div>
    </template>
    
    <script>
    export default {
      head: {
        title: '详情页',
        link: [
          {rel:'stylesheet',href:'/style/img.css'},....
        ],
        script: [
          { type: 'text/javascript', src: '/js/news.js' }
        ]
      }
    }
    </script>
    
    <style>
      .bg2 {
        background-image: url('~static/img/2.jpg');
        width: 300px;
        height: 300px;
        background-size: 300px;
      }
    </style>

[749db200cae64674ba9be12c9458dddf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8c242e07b1ec4c0aab791773fe6ded6a.png
[d6ac059ae3b94341a1bd69e8e49fe5b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/60c95e677f704f9082f90a75de33528b.png
[9630345506a7474f96ae9adeff2b53bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a47f704328aa41679cb6f0fd53c46041.png
[bc4ae340744146ca83babd8945cfbdf1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/46799febaa5e4386a5e77bddfd47c004.png
[f2a56e6e1fc24359800d9554ab733bc3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/330c9980ae154ed49fb89d557d456e4b.png
[abf310e6f72b44e4b84d4491fdb1c586.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9bfdfece8c5c45e0bcf9d405c537be27.png
[250985ec187d4c2fb4e6aa464a35bef3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/feb1c782220b4f8e916a6cec89a41627.png
[1e52c609cb14470eaefa58803793b6c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c70a0eb37bca4b22aa8f0647d5f9899f.png
[6f5865a5710e4aacaff2c06b75ae6aa2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fa9729cfbe6d445d868b8ab30a5bc75b.png
[653f09dbabfe4dc0aea5fb2bcf4a8239.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/dc7c7818d0ea446883b2fbbbd011aab0.png
[1af793c533fc483483e356f4771a2f16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fa7c5d5c3eb24fb48eeeab4ef4c9c6e1.png
[7ee40c9faf874eb9a387be9e2a27ba10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/06b2a8f5819e4f3faf237a8381c93573.png
[d82a3275d4654d7582c154dd060dea18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d5f5ebce457b4eeda96f5e9b67012f47.png
[24d70da6b07445e39097695285dfa7dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d2a70a5b7d844f4da60f84929ab8d38e.png
[3e9d07cbcced4c7893808df740344855.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d232c6e38d074622916938f2ac97ccec.png
[eed3478a40d14ff78b732fcdaa53e8bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0f05019b695b4686a55c314f09164f6d.png
[5dc52674fee5495da6135993e1380842.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/02bbebea0fc546ccb6b77aa8ded6f04d.png
[9690e0ff7a404f9db86a6a863ba280b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/149ebca6da454d8384b1927d853cb279.png
[6b9cf8c9ea5143eaa8519810b0615823.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7e6d7c9093ca417391fb419677811d25.png