尚医通 (十五) --------- 平台管理前端搭建

旧城等待， 2024-04-01 17:51 108阅读 0赞

#### 目录 ####

*  一、管理前端平台搭建
 *  二、医院设置管理
 *   *  1. 项目开发流程
     *  2. 分页查询
     *  3. 删除
     *  4. axios 响应拦截器
     *  5. 批量删除
     *  6. 锁定与取消锁定
     *  7. 添加医院设置
     *  8. 显示医院设置
     *  9. 更新医院设置
     *  10. 组件重用问题

--------------------

## 一、管理前端平台搭建 ##

**A、项目名称**

解压 vue-admin-template-master.zip，项目重命名：yygh-admin

**B、修改 package.json**

{
        
    	"name": "yygh-admin",
    	"version": "3.8.0",
    	"license": "MIT",
    	"description": "尚医通管理平台系统",
    	"author": "1796952157@qq.com",
    	...
    }

![在这里插入图片描述][412c414fb1e7429ea03184c8152a022f.png]  
**C、如果需要修改端口号**

config/index.js 中修改：

port: 9528

同时关闭 ESlint 语法检查

useEslint: false

![在这里插入图片描述][66139df46f9545048270a798e21e052d.png]

**D、项目目录结构**

├── build // 构建脚本
    ├── config // 全局配置 
    ├── node_modules // 项目依赖模块
    ├── src //项目源代码
    ├── static // 静态资源
    └── package.jspon // 项目信息和依赖配置
     
    src 
    ├── api // 各种接口 
    ├── assets // 图片等资源 
    ├── components // 各种公共组件，非公共组件在各自view下维护 
    ├── icons //svg icon 
    ├── router // 路由表 
    ├── store // 存储 
    ├── styles // 各种样式 
    ├── utils // 公共工具，非公共工具，在各自view下维护 
    ├── views // 各种layout
    ├── App.vue //***项目顶层组件*** 
    ├── main.js //***项目入口文件***
    └── permission.js //认证入口

**E、运行项目**

npm insall
    npm run dev

`npm install` 下载依赖报错的可以参考 ：[https://blog.csdn.net/weixin\_43048780/article/details/121845987][https_blog.csdn.net_weixin_43048780_article_details_121845987] 这篇文章

**F、登录页修改**

将登陆相关请求接口改为静态数据，不请求接口  
修改文件：`\src\store\modules\user.js`  
注释掉：Login、GetInfo、LogOut 三个方法，替换为如下代码：

Login({
         commit }) {
        
    	const data = {
        
    		'token': 'admin'
    	}
    	setToken(data.token)// 将token存储在cookie中
    	commit('SET_TOKEN', data.token)
    },
    
    GetInfo({
         commit }) {
        
    	const data = {
        
    		'roles': [
    			'admin'
    		],
    		'name': 'admin',
    		'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
    	}
    	if (data.roles &&data.roles.length >0) {
         // 验证返回的roles是否是一个非空数组
    		commit('SET_ROLES', data.roles)
    	}
    	commit('SET_NAME', data.name)
    	commit('SET_AVATAR', data.avatar)
    },
    
    // 登出
    LogOut({
         commit, state }) {
        
    	return new Promise((resolve, reject) => {
        
    		commit('SET_TOKEN', '')
    		commit('SET_ROLES', [])
    		removeToken()
    		resolve()
    	})
    }

说明：token 是我们手动配置的，如果过期后续自行生成，后续会有 TokenHelper 类生成token，在此不用关注

修改 `\src\util\request.js`

config.headers['token'] = getToken()

![在这里插入图片描述][b910f44b5d8b4185b4c4379785f909d1.png]  
**G、页面零星修改**

**1.标题**

index.html (项目的 html 入口)

<title>尚医通管理平台系统</title>

![在这里插入图片描述][11349100758b4db585f4490ce61ad864.png]  
**2. 国际化设置**

打开 src/main.js (项目的js入口)，第 7 行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

![在这里插入图片描述][248a86baf14140b9b40e76d223051cbc.png]

**3.导航栏文字**

`src/views/layout/components` (当前项目的布局组件)：`src/views/layout/components/Navbar.vue`

13行

<el-dropdown-item>首页</el-dropdown-item>

17行

![在这里插入图片描述][b4bd5894382543f09c12c73ffbfb8a9f.png]

**4.面包屑文字**

`src/components(可以在很多项目中复用的通用组件)`:`src/components/Breadcrumb/index.vue`

38行

meta: {
         title: '首页' }

**5.关闭校验**

打开 config/index.js，配置是否开启语法检查

useEslint: false,

**6.复制 icon 图标**

将 vue-element-admin/src/icons/svg 中的图标复制到 yygh-admin 项目中

**H、路由分析**

入口文件中调用路由 src/main.js

...
    import router from './router'//引入路由模块
    ...
    new Vue({
        
    	el: '#app',
    	router,
    	store,
    	render: h => h(App)
    })

路由模块中定义路由

src/router/index.js

...
    export const constantRouterMap = [
    ...
       {
         path: '*', redirect: '/404', hidden: true }
    ]
    
    export default new Router({
        
    	// mode: 'history', //后端支持可开
    	scrollBehavior: () => ({
         y: 0 }),
    	routes: constantRouterMap
    })

说明：我们后续菜单路由就在此配置

## 二、医院设置管理 ##

### 1. 项目开发流程 ###

![在这里插入图片描述][3425da76617849c49e0ab0dee5234ebf.png]  
**A、定义路由模块**

src/router/index.js 配置医院设置管理相关路由

{
        
        path: '/hospSet',
        component: Layout,
        redirect: '/hospSet/list',
        name: 'hospital',
        meta: {
         title: '医院管理', icon: 'table' },
        children: [
            {
        
    	        path: 'list',
    	        name: '医院设置列表',
    	        component: () =>import('@/views/hosp/hospitalSet/list'),
    	        meta: {
         title: '医院设置列表', icon: 'table'}
            },
            {
        
    	        path: 'hospitalSet/add',
    	        name: '医院设置添加',
    	        component: () =>import('@/views/hosp/hospitalSet/add'),
    	        meta: {
         title: '医院设置添加', icon: 'tree'},
      
            },
            {
        
              	path: 'edit/:id',
              	name: '医院设置更改',
              	component: () =>import('@/views/hosp/hospitalSet/form'),
              	meta: {
         title: '编辑', noCache: true },
              	hidden: true
            }
         ]
    },

**B、定义 api 模块**

创建文件 src/api/hosp/hospitalSet.js

import request from '@/utils/request'
    
    const api_name = '/admin/hosp/hospitalSet'
    
    export default {
        
    
    	getPageList(current, limit, searchObj) {
        
    		return request({
        
    			url: `${
          api_name}/findPageHospSet/${
          current}/${
          limit}`,
    			method: 'post',
    		    data: searchObj
    		})
    	}
    }

**C、定义页面组件脚本**

src/views/hosp/hospitalSet/list.vue

**D、定义页面组件模板**

<template>
    	<div class="app-container">
    	
    		
    		<el-table 
    			:data="list"
    			stripe
    		    style="width: 100%">
    			<el-table-column type="index" width="50"/>
    			<el-table-column prop="hosname" label="医院名称"/>
    			<el-table-column prop="hoscode" label="医院编号"/>
    			<el-table-column prop="apiUrl" label="api基础路径"width="200"/>
    			<el-table-column prop="contactsName" label="联系人姓名"/>
    			<el-table-column prop="contactsPhone" label="联系人手机"/>
    			<el-table-column label="状态" width="80">
    				<template slot-scope="scope">
    				     {
       { scope.row.status === 1 ? '可用' : '不可用' }}
    				</template>
    			</el-table-column>
    		</el-table>
    	</div>
    </template>

**E、测试通信数据**

启动项目，在命令行执行 ：`npm run dev`，打开浏览器调试状态。

![在这里插入图片描述][94e100caf5b340ed92f1f60aa0e953cc.png]

测试失败，接口请求了，但是没有返回结果，这是为什么呢？其实这就是跨域的问题。

![在这里插入图片描述][6b8291df7c5a4764a27c8ed2234e071d.png]

跨域：浏览器对于 JavaScript 的同源策略的限制 。

以下情况都属于跨域：

<table> 
 <thead> 
  <tr> 
   <th>跨域原因说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>域名不同</td> 
   <td>www.jd.com 与 www.taobao.com</td> 
  </tr> 
  <tr> 
   <td>域名相同，端口不同</td> 
   <td>www.jd.com:8080 与 www.jd.com:8081</td> 
  </tr> 
  <tr> 
   <td>二级域名不同</td> 
   <td>item.jd.com 与 miaosha.jd.com</td> 
  </tr> 
 </tbody> 
</table>

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：

www.jd.com/item 
    www.jd.com/goods
    http和https也属于跨域

而我们刚才是从 `localhost:3000` 去访问 `localhost:8201` ，这属于端口不同，跨域了。

如何解决呢？

Spring 早就给我们提供了解决方案，我们只需要在对应 controller 上添加一个标签就可以了 (`@CrossOrigin //跨域`)。

我们在 HospitalSetController 类上添加跨域标签 `@CrossOrigin`，再进行测试，则测试成功！

但还有可能会报出下图的错误。。。

![在这里插入图片描述][73ac3827f5bf46d89974264af7fac60d.png]  
这是因为前后端的状态码定义不一致导致的，且见下图

![在这里插入图片描述][e50af8632ef44e0682e14f3634088539.png]

![在这里插入图片描述][ff441a43d7f545b982d31dd430b1aeca.png]

将前端的状态码接受修改为跟后端一致即可。。。

修改完之后，即可正常访问

![在这里插入图片描述][a60383f7edb94151851fa0a3c227dc18.png]

> 注意：Swagger 进行测试分页查询接口，如果 total 显示 0 则表明分页插件不生效需要再在当前服务再次配置分页。

![在这里插入图片描述][c56839d587e64510b434520a5d4722c9.png]  
![在这里插入图片描述][9a28504a52b649779e240f3c8cc3f1a6.png]

### 2. 分页查询 ###

**A、定义页面组件脚本**

方法细化：

src/views/hosp/hospitalSet/list.vue

**B、定义页面组件模板**

在 table 组件下面添加分页组件

<el-pagination
    	:current-page="page"
    	:page-size="limit"
    	:total="total"
    	style="padding: 30px 0; text-align: center;"
    	layout="total, prev, pager, next, jumper"
    	@current-change="fetchData"
    />

**C、表单查询**

<el-form :inline="true" class="demo-form-inline">
    	<el-form-item>
    		<el-input  v-model="searchObj.hosname" placeholder="医院名称"/>
    	</el-form-item>
    	<el-form-item>
    		<el-input v-model="searchObj.hoscode" placeholder="医院编号"/>
    	</el-form-item>
    	<el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
    </el-form>

### 3. 删除 ###

**A、定义 api 模块**

在 src/api/hosp/hospitalSet.js 添加方法

//删除医院设置
    deleteHospSet(id) {
        
    	return request ({
        
    		url: `/admin/hosp/hospitalSet/${
          id}`,
    		method: 'delete'
    	})
    }

**B、定义页面组件模板**

在 table 组件中添加删除列

**C、定义页面组件脚本**

//删除医院设置的方法
    removeDataById(id) {
        
       this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
        
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(() => {
         //确定执行then方法
          //调用接口
          hospset.deleteHospSet(id)
             .then(response => {
        
                //提示
                this.$message({
        
                   type: 'success',
                   message: '删除成功!'
                })
                //刷新页面
                this.getList(1)
             })
       })
    }

![在这里插入图片描述][5cc2e974aa124c1da27b0e888142d646.png]  
![在这里插入图片描述][db5c5659c6654ec7ae4d19b5d6fe8c52.png]

这里执行的是逻辑删除

### 4. axios 响应拦截器 ###

// response 拦截器
    service.interceptors.response.use(
      response => {
        
        /**
         * code为非20000是抛错 可结合自己业务进行修改
         */
        const res = response.data
        if (res.code !== 200) {
        
          Message({
        
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
    
          // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
          if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        
            MessageBox.confirm(
              '你已被登出，可以取消继续留在该页面，或者重新登录',
              '确定登出',
              {
        
                confirmButtonText: '重新登录',
                cancelButtonText: '取消',
                type: 'warning'
              }
            ).then(() => {
        
              store.dispatch('FedLogOut').then(() => {
        
                location.reload() // 为了重新实例化vue-router对象 避免bug
              })
            })
          }
          return Promise.reject('error')
        } else {
        
          return response.data
        }
      },
      error => {
        
        console.log('err' + error) // for debug
        Message({
        
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )

### 5. 批量删除 ###

**A、定义 api 模块**

在 src/api/hosp/hospitalSet.js 添加方法

batchRemoveHospSet(idList) {
        
    	return request({
        
    		url: `${
          api_name}/batchRemove`,
    		method: 'delete',
    		data: idList
    	})
    }

**B、定义页面组件模板**

在 table 组件上添加批量删除

<div>
       <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
    </div>

在 table 组件上添加复选框

<el-table
    :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55"/>

**C、定义页面组件脚本**

① Data定义数据

multipleSelection: [] // 批量选择中选择的记录列表

② 定义方法

// 当表格复选框选项发生变化的时候触发
    handleSelectionChange(selection) {
        
      this.multipleSelection = selection
    },

③ 定义删除方法

//批量删除
    removeRows() {
        
       this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
        
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(() => {
         //确定执行then方法
          var idList = []
          //遍历数组得到每个id值，设置到idList里面
          for(var i=0;i<this.multipleSelection.length;i++) {
        
             var obj = this.multipleSelection[i]
             var id = obj.id
             idList.push(id)
          }
          //调用接口
          hospSet.batchRemoveHospSet(idList)
             .then(response => {
        
                //提示
                this.$message({
        
                   type: 'success',
                   message: '删除成功!'
                })
                //刷新页面
                this.getList(1)
             })
       })
    }

![在这里插入图片描述][455e203404704061b4934c776cfa777e.png]

### 6. 锁定与取消锁定 ###

**1.定义 api 模块**

在 src/api/hosp/hospitalSet.js 添加方法

//锁定和取消锁定
    lockHospSet(id,status) {
        
    	return request ({
        
    		url: `${
          api_name}/lockHospitalSet/${
          id}/${
          status}`,
    		method: 'put'
    	})
    }

**2. 定义页面组件模板**

在 table 组件上添加按钮

<el-table-column label="操作" width="280" align="center">
       <template slot-scope="scope">
          <el-button type="danger" size="mini" 
             icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
          <el-button v-if="scope.row.status==1" type="primary" size="mini" 
             icon="el-icon-delete" @click="lockHostSet(scope.row.id,0)">锁定</el-button>
          <el-button v-if="scope.row.status==0" type="danger" size="mini" 
             icon="el-icon-delete" @click="lockHostSet(scope.row.id,1)">取消锁定</el-button>
       </template>
    </el-table-column>

**3. 定义页面组件脚本**

//锁定和取消锁定
    lockHostSet(id,status) {
        
       hospset.lockHospSet(id,status)
          .then(response => {
        
             //刷新
             this.getList()
          })
    },

![在这里插入图片描述][617b35eb19654308ae9a3579de8b8f02.png]

### 7. 添加医院设置 ###

**A、定义 api 模块**

在 src/api/hosp/hospitalSet.js 添加方法

//添加医院设置
    saveHospSet(hospitalSet) {
        
    	return request ({
        
    		url: `${
          api_name}/saveHospitalSet`,
    		method: 'post',
    		data: hospitalSet
    	})
    }

**B、定义页面组件脚本**

src/views/hosp/hospitalSet/form.vue，完善 data 定义

export default {
        
    	data() {
        
    		return {
        
    			hospitalSet:{
        } 
    		}
    	}
    }

**C、定义页面组件模板**

src/views/hosp/hospitalSet/form.vue

<template>
      <div class="app-container">
          医院设置添加
          <el-form label-width="120px">
             <el-form-item label="医院名称">
                <el-input v-model="hospitalSet.hosname"/>
             </el-form-item>
             <el-form-item label="医院编号">
                <el-input v-model="hospitalSet.hoscode"/>
             </el-form-item>
             <el-form-item label="api基础路径">
                <el-input v-model="hospitalSet.apiUrl"/>
             </el-form-item>
             <el-form-item label="联系人姓名">
                <el-input v-model="hospitalSet.contactsName"/>
             </el-form-item>
             <el-form-item label="联系人手机">
                <el-input v-model="hospitalSet.contactsPhone"/>
             </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="saveOrUpdate">保存</el-button>
             </el-form-item>
          </el-form>
       </div>
    </template>

**D、实现新增功能**

![在这里插入图片描述][e31149227b5d4b1cbffc39a95a9985c5.png]

### 8. 显示医院设置 ###

**A、定义 api 模块**

在 src/api/hosp/hospitalSet.js 添加方法

//医院设置id查询
    getHospSet(id) {
        
      return request ({
        
        url: `/admin/hosp/hospitalSet/getHospSet/${
          id}`,
        method: 'get'
      })
    },

**B、定义页面组件脚本**

src/views/hosp/hospitalSet/form.vue，methods 中定义回显方法

//根据id查询
    getHostSet(id) {
        
       hospSet.getHospSet(id) 
          .then(response => {
        
             this.hospitalSet = response.data
          })
    },

页面渲染成功后获取数据

因为已在路由中定义如下内容：`path: 'edit/:id'`，因此可以使用 `this.$route.params.id` 获取路由中的 id

created() {
        //页面渲染之前执行
        //获取路由id值 调用接口得到医院设置信息
         if(this.$route.params && this.$route.params.id) {
        
            const id = this.$route.params.id
            this.getHostSet(id)
         }
    },

**C、定义页面组件模板**

src/views/hosp/hospitalSet/list.vue

<router-link :to="'/hospSet/edit/'+scope.row.id">
       <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
    </router-link>

### 9. 更新医院设置 ###

**A、定义 api 模块**

在 src/api/hosp/hospitalSet.js 添加方法

//修改医院设置
    updateHospSet(hospitalSet) {
        
      return request ({
        
    	url: `/admin/hosp/hospitalSet/updateHospitalSet`,
    	method: 'post',
    	data: hospitalSet
      })
    }

**B、定义页面组件脚本**

src/views/hosp/hospitalSet/form.vue，methods 中定义 update 方法

//修改
    update() {
        
       hospset.updateHospSet(this.hospitalSet)
          .then(response => {
        
             //提示
             this.$message({
        
                type: 'success',
                message: '修改成功!'
             })
             //跳转列表页面，使用路由跳转方式实现
             this.$router.push({
        path:'/hospSet/list'})
          })
    },

完善 saveOrUpdate 方法

saveOrUpdate() {
        
       //判断添加还是修改
       if(!this.hospitalSet.id) {
         //没有id，做添加
          this.save();
       } else {
        //修改
          this.update()
       }
    }

![在这里插入图片描述][070900ac4cda4bd68dbf4e78f6ec2ce5.png]  
![在这里插入图片描述][13a6738a39d24df894f0efa24a456e0b.png]

### 10. 组件重用问题 ###

问题：vue-router 导航切换 时，如果两个路由都渲染同个组件，组件的生命周期方法 (created或者mounted) 不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建。

解决方案：可以简单的在 router-view上加上一个唯一的 key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。

修改 src/views/layout/components/AppMain.vue 文件如下：

<router-view:key="key"></router-view>
    
    computed: {
        
    	key() {
        
    		return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    	}
    }

[412c414fb1e7429ea03184c8152a022f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0aa7af87712d4f5a9bcb0d506bd06c9f.png
[66139df46f9545048270a798e21e052d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1d064559737e4c89894da9fb4ec8677e.png
[https_blog.csdn.net_weixin_43048780_article_details_121845987]: https://blog.csdn.net/weixin_43048780/article/details/121845987
[b910f44b5d8b4185b4c4379785f909d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d1c5b5d2fc7a48a084f1d8ffbcd6900d.png
[11349100758b4db585f4490ce61ad864.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a3e9e9e3659347bd93ccaf8d6f1cdb0b.png
[248a86baf14140b9b40e76d223051cbc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b67bf52c9ed347b9aa958b5cef96ead4.png
[b4bd5894382543f09c12c73ffbfb8a9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d727008d79754c5ea1b91f99676d4217.png
[3425da76617849c49e0ab0dee5234ebf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d32be0c5fd3b4cd1a4bbfa2306138607.png
[94e100caf5b340ed92f1f60aa0e953cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/dd202ac71cef491db29fda9d7a9ff234.png
[6b8291df7c5a4764a27c8ed2234e071d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8cb569c904674e0b9916917ba6d436ec.png
[73ac3827f5bf46d89974264af7fac60d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/faaa0e181cf640b7983297448e8bfd26.png
[e50af8632ef44e0682e14f3634088539.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/771e1502cc484f9ea94eeb9abb3a78ce.png
[ff441a43d7f545b982d31dd430b1aeca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/607731906f384ead95b2c1fbace2964f.png
[a60383f7edb94151851fa0a3c227dc18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9264c35724264bcca34d85356963b221.png
[c56839d587e64510b434520a5d4722c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9e9dfaa310c14b6394a5aab18047cded.png
[9a28504a52b649779e240f3c8cc3f1a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c1a79328f3b44922976eb693bcaf7371.png
[5cc2e974aa124c1da27b0e888142d646.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2633527b8c0b4940a4185f3518364db2.png
[db5c5659c6654ec7ae4d19b5d6fe8c52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b1afc272ce0349dc835ca9629f1ee3ca.png
[455e203404704061b4934c776cfa777e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b82d712c6db142faa8b5216ad504bcdd.png
[617b35eb19654308ae9a3579de8b8f02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/24bd6cc6a812476caa411dfb4d9eced4.png
[e31149227b5d4b1cbffc39a95a9985c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c4a6304b76184b888bdb7b572b257b22.png
[070900ac4cda4bd68dbf4e78f6ec2ce5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/66132eab2bcc485f909f2220cad6bc13.png
[13a6738a39d24df894f0efa24a456e0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d8f7df61e578454b8e635f4de4100705.png